In this section, we will make some improvements to the style and presentation of our WakeUpTimes app. We will add some CSS to make the app more visually appealing and user-friendly. We will also add some additional content to help users understand how the app works and how to use it effectively.
Step 1: Add static assets
Download the following assets.zip file to your computer, unzip and copy the containing files (moon.png and favicon.png) to the wakeuptimes-app folder.
Step 2: Update the HTML file
Replace the index.html content with the following:
Here is a list of updates made to the index.html file:
Favicon Added
Added a favicon to the webpage by linking to a local favicon.png file in the <head> section. This will display the icon in the browser tab.
💡 Favicon (pronounced /ˈfæv.ɪˌkɒn/, short for “favorite icon”) is a graphic that the browsers displays in the address bar next to the page’s title.
Google Fonts Added:
Added the Roboto font from the Google Fonts API in the <head> section. This will make the text on the webpage appear in the Roboto font.
HTML Structure: Organized the HTML content into semantic sections:
Wrapped all content in the <body> tag inside a <main> tag with the id app. This is the main container for the application.
Wrapped the introductory text and calculate button in a <section> tag with the id prompt-section.
Added an image of a moon inside a div with the id img-container to visually enhance the webpage.
Wrapped the result content in a <section> tag with the id result-section and the class hidden. This section is initially hidden and will be shown after the user clicks the Calculate button.
It also includes two new buttons for returning to the previous screen and refreshing the results.
New Buttons: Added two new buttons in the result-section:
A return button (return-btn) that will take the user back to the initial screen.
A refresh button (refresh-btn) that will refresh the results (i.e., recalculate the wakeup times).
Step 3: Update the Styles File
Replace the index.css file with the following:
If you open the index.html in the browser, you should see this view:
We have made several updates to various HTML elements. However, there is one in particular that I want to bring to your attention:
This class is applied to the results section:
As a result of this styling, this result section is initially hidden. Our plan is to update the JavaScript file so the results will be shown after the user clicks the Calculate button.
Step 4: Update the JavaScript file
Replace the index.js file with the following:
Notice that the “onclick” event handler of both calcBtn and refreshBtn is the calcWakeUpTimes function. Moreover, instead of calc.Btn.onclick, we use a more generic approach to bind event handlers. Namely, we have:
addEventListener is a method in JavaScript used to attach an event listener to an HTML element. It takes two arguments: the type of event to listen for (e.g. “click”, “scroll”, “keydown”), and the function to be executed when the event is triggered.
When the specified event occurs on the element, the function is called. This allows you to add interactivity to your web pages and respond to user actions.
For example, in the code snippet provided, clcBtn.addEventListener("click", calcWakeUpTimes); adds a click event listener to the calcBtn element, so that when the button is clicked, the calcWakeUpTimes function is called.
In JavaScript, functions can be passed as arguments to other functions. For example, the calcWakeUpTimes function is passed as an argument to the addEventListener function, which adds a click event listener to the calcBtn element. This is a powerful feature of JavaScript that allows for greater flexibility and modularity in programming.
I would also like to draw your attention to how we switch the visibility of some HTML elements. For example, at the end of calcWakeUpTimes, we have these statements:
These statements use the classList property of DOM elements in JavaScript to add or remove CSS classes from the elements.
The classList property returns the class attribute of an element as a DOMTokenList object. This object represents a collection of classes and provides methods to add, remove, and toggle classes on the element.
In this case, promptSection.classList.add("hidden") adds the CSS class "hidden" to the promptSection element, which hides it from view. Similarly, imageContainer.classList.add("hidden") adds the "hidden" class to the imageContainer element, and resultSection.classList.remove("hidden") removes the "hidden" class from the resultSection element, revealing it to the user.
Recall that we have discussed the “hidden” class in the previous section.
Step 5: Putting it all together!
Open the app in your browser and click on the “calculate” button. This should bring up a new view that lists the calculated wakeup times. To return to the initial view, click on the “return” button.