Step 4: Include Files

Now we have all three parts of a web page: HTML, CSS, and JavaScript. They are all written in the index.html file. As more content is added to the page, more code will need to be written. If we continue this way, the index.html file will grow large. For this reason, and others you will learn later, we are going to move the CSS and JavaScript into their own files and link them to the index.html file.

Step 4 - Lesson

Instructions

Create the main.css File

In W3spaces, click the New folder button in the upper right.
Name the folder css in all lowercase, then click the "Create folder" button.
Click to open the css folder.
Click the "New file" button in the upper right.
Select the .css style content option, name the file main in all lowercase, then click the "Create file" button.
Click the Edit file button in the upper right.
Select and copy the CSS class from the "CSS Markup in the css/main.css File" section below and paste it into the new main.css file.
Save the main.css file.

Hint: Press Ctrl + S for a shortcut to save files.

Create the main.js File

In W3spaces, we are currently in the css directory and need to go back up to the root level. Click your website name in the breadcrumb navigation at the top of the table.
Click the New folder button in the upper right.
Name the folder js in all lowercase, then click the "Create folder" button.
Click to open the js folder.
Click the "New file" button in the upper right.
Select the .js script content option, name the file main in all lowercase, then click the "Create file" button.
Click the Edit file button in the upper right.
Select and copy the JS code from the "JavaScript Code in the js/main.js File" section below and paste it into the new main.js file.
Save the main.js file.

Hint: Press Ctrl + S for a shortcut to save files.

Update the index.html File

We are currently working in the js directory and need to return to the root level. To do this, click your website name in the breadcrumb navigation at the top of the table.
Replace the <style> and <script> elements in the <head> section with:

1) <link rel="stylesheet" href="css/main.css">

2) <script src="js/main.js"></script>

See the screenshot example below.Accessibility users can access the full code as text in the "Step 4 Resources - HTML Markup in the index.html File" section at the bottom of this page.
Your index.html code should match the example in the section below titled "HTML Markup in the index.html File".
Save the index.html file.

Hint: Press Ctrl + S for a shortcut to save files.
Click the Run button and ensure that your button looks and behaves like the sample in the Results section below when clicked. There should be no changes from the last step: Step 3: Writing JavaScript.
Now that the HTML, CSS, and JavaScript are in their respective files, let's code the calculator buttons. Go to Step 5: Code Calculator Buttons

Result

Click the button to see what happens.

Step 4 - Resources

Explanation

It is better to have the HTML, CSS, and JavaScript in their own files. This keeps them organized and keeps the CSS and JavaScript code modular, allowing them to be reused on other web pages without needing to duplicate the code.

It is an industry standard to use the file names main.css and main.js in the directories css and js, respectively.

HTML Markup in the index.html File

The HTML markup in your index.html file should match the sample below:


                <!DOCTYPE html>

                <html lang="en-US">

                  <head>

                    <title>My Calculator</title>

                    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

                    <link rel="stylesheet" href="css/main.css">

                    <script src="js/main.js"></script>

                

                  </head>

                  <body>

                

                    <button type="button" class="buttonStyle" onClick="calculatorButtonClicked(0)">0</button>

                

                  </body>

                </html>

CSS Markup in the css/main.css File

Hint: For the rest of this course, this section will contain the correct CSS code for each step. This is the correct CSS code for "Step 4: Include Files".

The CSS markup in your css/main.css file should match the sample below:


                .buttonStyle {

                  width: 50px;

                  height: 50px;

                  font-weight: bold;

                  font-size: 1em;

                  margin-bottom: 0.4em;

                  margin-right: 0.2em;

                }

JavaScript Code in the js/main.js File

Hint: For the rest of this course, this section will contain the correct JavaScript code for each step. This is the correct JavaScript code for "Step 4: Include Files".

The JavaScript markup in your js/main.js file should match the sample below:


                function calculatorButtonClicked(buttonValue) {

                

                  alert(buttonValue);

                

                }