Repopulate the Home Screen

This section of the project will actually be fairly JavaScript heavy. There is no new HTML and only 1 CSS class that we need to add.

The main of this section will be clearing the application with a transition and repopulating our home screen with the icons from the array. We will not actually be clearing the app but minimizing it for the time being. In a future project we will focus on what we need to do to totally reset the application so it will run again when it is open.

There is no new HTML in this section.

Create the class of .digital-clock-app-container.slide-right. This will take effect whenever the .slide-right class is added in the same element of .digital-clock-app-container.

What this class and its attributes will do is slide the container to the right by -100%. In the past section we set the right attribute to 0%, this class will alter that setting and add a transition animation to the change.

The very first thing we need to do is create a variable that will signify if any app is open and functioning as the active application on the phone screen. We will need to set this as a let variable because we will be making changes to it when apps are opened and closed. Make the default setting of it false.

Now we will add a change of the appOpen variable when the digitalClockApp( ) function is ran. All we need to do for this, is to change the variable to true as soon as the function is ran.

All of the changes we make here will be made when we push the home button. Previously, all the home button did was unlock the phone from its default state. This will make it so if you push the home button, it will clear the app and repopulate the home screen.

The first step is creating an IF/ELSE IF statement after the eventListener on the smartHomePhoneBtn. This is going to check the state of the global appOpen variable and proceed based on if it is true or false.

If an app is open (appOpen === true), we want a click of the home button to clear the screen and repopulate the home screen with our icons. Since the default state of the phone will not have any apps open (appOpen === false), move the existing code we had in the function into the IF section of the statement. This will function just as it did before.

In the ELSE IF section of the statement, we will be working on if an app is currently open and we would like to close it. This would mean that appOpen would be set to true. In the first step let's set that back to false.

Now run the populateHomeScreen( ) function. This will start the function that loops through the array and begins rebuilding the home screen. The benefit of calling this now is that it will start rebuilding itself behind the scenes and not just appear once the following lines are ran.

Create 3 variables for digitalClockAppDiv, topBezel, and bottomBezel. You may remember that these were the 3 elements we grabbed when we first opened the digitalClockApp to add styling and positioning elements to them. These next few steps will remove or change those attributes.

Add the class of .slide-right to the digitalClockAppDiv. This will slide the element from a right setting of 0% to -100%.

Remove the class of .app-open from the topBezel and bottomBezel variables. This will remove the pink styling border on the bezels when an app is open.

The next step in this function is probably the most important to ensure everything continues to function probably. What we want to do is remove the classes of .open and .slide-right from the digitalClockAppDiv to return it back to it's default/starting location underneath the phone. The only tricky thing about this, is if we just remove them, they will cause the digitalClockAppDiv to completely disappear as it is sliding out. What you need to do for this is to use a setTimeout method that will allow these to be removed after a set amount of time. This set amount of time will remove the classes after the sliding transition plays out and nothing is visible to the user.

If you look at the setTimeout we have created, we removed the classes and then set the timing to 1000ms (1 second). That means after 1 second, whatever is in the setTimeout will run, which in this case is removing all positioning from the digitalClockAppDiv and returning it to it's default location.

So there you have it! That is the first application for the smartphone complete! The next one I plan to build is using an API and should actually be pretty interesting with a lot of neat little tricks!