In this task, we will create the basic HTML layout for our WakeUpTimes app. HTML, or HyperText Markup Language, is the standard markup language used to create web pages. It is used to structure and define content on a web page, such as headings, paragraphs, and links. We will add text, headings, and a button to our HTML page to make it interactive and engaging.
To create an HTML page, create a new file and save it as index.html. The .html file extension indicates that this is an HTML file. The name index is just a convention for naming the landing page of websites.
touch index.htmlAn HTML file is essentially a text file. For example, open the index.html file in VSCode and add the text “Hello, HTML!” to it:
Hello, HTML!Now open this index.html file in Firefox Developer Edition (or any other browser). Notice how it renders the text.
Next, update the content of index.html as follows and refresh the page in the browser.
<h1>WakeUpTimes App</h1>
<p>If you go to bed now, when should you wake up?</p>Notice how the presentation of the text within <h1></h1> tags differs from that within the <p></p> tags in the browser.
In HTML, “markup language” refers to the use of tags to define the structure and content of a web page. These tags, like <h1> and <p>, tell the web browser how to display the content on the page.
HTML has many tags that can be used to structure content on a web page. Some of the basic HTML tags include those for formatting content such as headings, paragraphs, lists, and tables, as well as tags for creating forms, images, and links. Each tag defines an HTML element. A properly formatted HTML must contain the following elements:
<!DOCTYPE html>
<html>
<head>
<!-- meta data about the page -->
</head>
<body>
<!-- content of the page -->
</body>
</html>The <!DOCTYPE> declaration is not an HTML tag. It is “information” to the browser about what document type to expect.
Note that HTML elements can be nested.
<html> tag is the root element of an HTML page and contains all other elements.<head> tag contains meta information about the page, such as the title and description, as well as links to external files such as stylesheets and scripts.<body> tag contains the visible content of the page. HTML is pretty easy, and you will pick it up as we progress through the course. Please see the Readings for more information.Let’s add more content to our HTML page. Save the file and refresh it in the browser.
<!DOCTYPE html>
<html>
<head>
<title>WakeUpTimes App</title>
</head>
<body>
<h1>WakeUpTimes App</h1>
<p>
A sleep cycle lasts about 90 minutes, and a good night's sleep consists of
5-6 sleep cycles.
</p>
<p>
If you wake up in the middle of a sleep cycle, you will feel groggy, even
if you've completed several cycles prior to waking up.
</p>
<p>If you go to bed now, when should you wake up?</p>
<button>Calculate</button>
</body>
</html>Congratulations! You have created a basic HTML page with text, headings, paragraphs, and a button. In the next section, we will learn how to add interactivity to our HTML page using JavaScript.
JavaScript can be added to an HTML page in several ways. In this section, we will learn how to add JavaScript to an HTML page using the onclick event handler. This event handler allows us to execute JavaScript code when a user clicks on a specific HTML element, such as a button.
To add an onclick event to a button, we can use the onclick attribute. Here’s an example:
<button onclick="window.alert('Boo!')">Calculate</button>When the button is clicked, an alert window will appear with the message “Boo!“. Try it! The window.alert('Boo!'); is a JavaScript statement. The window object represents an open window in a browser.
HTML attributes provide additional information about HTML elements. They are always specified in the start tag, usually in name/value pairs like: name="value".
We can also update the onclick event to execute multiple JavaScript statements. Here’s an example:
<button onclick="console.log('Bam!'); window.alert('Boo!')">Calculate</button>When the button is clicked, the message “Bam!” will appear in the console, followed by an alert window with the message “Boo!“. The console.log() is a JavaScript statement that provides access to the browser’s debugging console.
To access the console, in your browser, open “Web Developer Tools” (typically, you can do this by right-clicking and selecting “Inspect”) and find the “Console” tab.
While adding the onclick attribute directly to the button works, it is generally considered better practice to separate the JavaScript code from the HTML markup. It will be difficult to read more than a few (JavaScript) statements for the onclick attribute of a button. Therefore, it is not advisable to write event handlers (JavaScript statements that are executed in response to an event) using attributes of button (or other HTML) elements.
A better approach is to put all JavaScript statements (code) in a dedicated section, group the statements (about handling an event) in a function, and assign that function to the onclick event handler.
We can do this by moving the event listener to a <script> tag in the HTML file. Here’s an example:
<button onclick="handleClick()">Calculate</button>
<script>
function handleClick() {
console.log("Bam!");
window.alert("Boo!");
}
</script>Add the <script> section to the end of the <body> element (right before the closing </body> tag). Notice that the handleClick() function is defined in the <script> section. The function is then called when the button is clicked.
Here is a slightly different way to add an event listener to the button using JavaScript:
<button id="calc-btn">Calculate</button>
<script>
const calcBtn = document.getElementById("calc-btn");
calcBtn.onclick = handleClick;
function handleClick() {
console.log("Bam!");
window.alert("Boo!");
}
</script>Notice we have added id="calc-btn" to the button. The ID attribute specifies a unique id for an HTML element. The ID must be unique within the HTML document, although your webpage will still work if you use the same ID for multiple elements!
The document object represents the entire HTML document. It is the root node of the HTML document object model (DOM).
The DOM is a programming interface for web documents. It represents the structure of a document and allows you to manipulate its content and style.
The getElementById() is a DOM method that returns the element that has the ID attribute with the specified value. In the code above, we are selecting the button element with the ID calc-btn and assigning it to the calcBtn variable. We then assign the handleClick function to the onclick event of the button.
Be careful with the statement calcBtn.onclick = handleClick;. If you write it as calcBtn.onclick = handleClick();, (with parentheses at the end of handleClick), the handleClick function will be executed immediately when the script is loaded, not when the button is clicked. You want to assign the function itself to the onclick event, not the result of calling the function.
Congratulations! You have created an interactive HTML page. JavaScript is the essential ingredient for interactive web pages. With JavaScript, we can create dynamic web pages that respond to user input, display real-time data, and provide an immersive user experience.