code icon

CSCI 1720

Intermediate Web


Homework 3 - JavaScript & Modals

  1. Download the project starter archive and extract it to a new folder on your external drive: homework/hw3
  1. Extract the file's content to the new folder
  1. You won't need many of the placeholder files and folders for this project. So you can delete index.php, index-bs.php, index-bs.html, sql, and php, if you wish

    You'll also need to download the project's images: highway.jpg & highway2.jpg and save them in your media folder
  1. So we're going to recreate the following page
output page
Fig 1- HW3 Final Product

When the page loads, the first thing displayed will be a modal, which is a page (not necessarily a page - the point is that it requires the user's attention) that overlays the window with content for the user to read. It can act as an introduction to the page's content, among other things

  1. Open index.html and scss/main.scss in Brackets
  1. Notice that both files have starter code already
starter file
Fig 2- main.scss

The starter code included here includes normalize.css, which tells older browsers how to deal with HTML5 elements and 'resets' the page when it loads (the body) class rules. The box-sizing: border-box; rule collapses the content, padding, and border, making it easier to align elements

starter file
Fig 3- index.html
  1. Complete the meta-information for both files
  1. Open content.txt in a new browser tab. Copy and paste the first block of content into the <head> element.

These are links to Google Fonts that we'll be using for this project

  1. Copy and paste the remaining text in between the <body> and </body> tags in index.html. You can see that there's nothing really fancy here HTML-wise. We're going to make it fancy using Sass and JavaScript

There are several classes included with the page that we'll have to define in our CSS

  1. Now we have to fire up Sass. You can refer back to our Sass labs if you're hazy on how to set it up

Since we're homebound, you'll have to install Sass on your personal computer, if you haven't already. It has a really small footprint and is free, so it shouldn't be much of a problem. Another advantage is that you don't have to enter the big, long pathname to use it, since on your local machine, it will be added to the PATH. That means you can run it from any directory. So, all you have to do when you open the CLI is navigate to your working directory and enter sass --watch scss:css --style compressed

starter file
Fig 4- Sass command line
  1. Once the compiler is running, return to main.scss in Brackets
  1. Uncomment the font-family line in the body rule and add 'Source Sans Pro', sans-serif;
  1. The first thing we want to do is style the modal. Notice from the code that I have the modal divided into an outer and an inner part. The outer part (.modal) will cover the whole display, while the inner modal (.modal-inner) will display the content, suitably positioned
starter file
Fig 5- Outer modal

Of particular note here is z-index: 1;. The z-index property is for layering. The default value is '0', so anything >0 will display on top. You can define multiple layers by using larger numbers, e.g., z-index: 10; would display on top of any z-index value less than 10

  1. Style the inner modal:
starter file
Fig 6- Inner modal

Noteworthy things here:
position: absolute;       sets the position value to absolute w/r/t its container

top:50%; and left:50%;       positions the top left corner of the element in the center of the container

transform: translate(-50%, -50%);       shifts the container halfway back to the top and to the left, centering it in its container, regardless of its dimensions

starter file
Fig 7- transform: translate(-50%, -50%)
  1. The modal includes an 'OK' button that we also need to style. We want it to be larger and to stand out. We also want some animation when the user hovers over it, so
starter file
Fig 8- Styling the button

Noteworthy things here:
1. This time, we're only translating the position on the X-axis while the vertical position is fixed 10px above the bottom of the container

2. We can set the background color to transparent

3. Again, we're animating the transition when the button is hovered over, making it take three-tenths of a second

4. We can specify which cursor displays when the button is hovered over. This provides additional visual feedback to the user - "Hey, this does something when you click it"

  1. Styling the page's container element is a bit involved. Again, it is arranged with an outer container (.container) and an inner container (.container-inner). This nesting is common practice because it provides more granular control over how your content is rendered
starter file
Fig 9- The page's containers

Again, we're positioning the outer container absolutely with respect to its parent, <body> and the inner container with respect to its parent, <div class='container'>

  1. Style the document's header and header h1 selectors
starter file
Fig 10- header and header h1
  1. Add some classes for floating images
starter file
Fig 11- Image float classes
  1. Save your work and display the page in a browser (remember, with Brackets, we can use the 'Live Preview' button live preview)
starter file
Fig 12- Displaying the modal

Since we set the background color for the modal to be rgba(0,0,0,.9), it is slightly transparent, which, I think, provides a nice visual effect

  1. Click the 'OK' button. What happens? Right. Nothing... This is where Javascript comes in...

JavaScript

  1. In your index.html file, add a pair of <script> ... </script> tags just above the closing </body> tag
starter file
Fig 14- Adding a scripts

We can add scripts anywhere in an HTML file, but I think it's best to put them at the end of the file when possible. It makes things more readable

  1. Define a couple of variables. This makes it so you don't have to keep typing document.getElementById('...'); over and over again
starter file
Fig 15- Declaring variables
  1. Now, add
starter file
Fig 15- Event listener

What this does is bind the button to an event listener that fires when the button is clicked. modal.style.display selects the inline CSS for the modal element and
= 'none'; changes the value for the display property to none, hiding it

  1. Return to your browser. Refresh the page (Brackets mostly does this when you save changes; but sometimes it doesn't. So I always just refresh it to make sure). Now, click the 'OK' button. What happens?
  1. Ok, cool. It goes away now. But I think the sudden disappearance of the modal is a bit jarring. I'd like for it to fade out instead. One way we can do this is to change the element's CSS properties when the event fires and include a CSS transition. So, in your main.scss file, add the following class
starter file
Fig 17- Add a class to
hide the modal
  1. Replace modal.style.display = 'none'; with the following in index.html:
starter file
Fig 18- Add a function to the JS

The JavaScript should be pretty self-explanitory. It dynamically adds the 'hide' class from the CSS to the modal element. As you can see from Fig. 17, the 'hide' class then changes the element's opacity to 0 over the course of one second

  1. Reload the page in your browser and test it out. Great! Now it fades out....but there's a problem
  1. Try this: in your index.html file, add a hyperlink to one of the paragraphs:
starter file
Fig 19- Adding a hyperlink
  1. Return to your browser and refresh the page. Click the 'OK' button. Then try clicking the link. What happens? Right. Nothing

The problem is that even though the modal's opacity is 0, it is still there, between you and the rest of the page. So we have to do one more step

  1. To get the modal out of the way, we have to change it's display property to none. So add the following function
starter file
Fig 20- Setting the modal's
display property to none

The first line just removes the 'hide' class, since we don't really need it anymore. The second line is what we need to get it out of the way

  1. Add a call to your new hide() to your event handler, after the fade()
starter file
Fig 22- Adding code to change
the modal's display value
  1. Return to your page and refresh it (do a hard refresh - Ctrl+reload - sometimes changes to the JS don't get picked up with a soft refresh)
  1. Click 'OK'. Oh, great! The modal disappears, but you lost the fade effect. What the --

The reason for this is that JS executes the functions one after another, not caring about how long the first one may take to complete. So we have to, somehow, delay the execution of the hide() function for a second...

  1. Replace the second line in the event handler with
starter file
Fig 23- setTimeout()

setTimeout() delays the execution of a function (hide(), in this case) for however long you specify - the number in the parentneses. The value is in milliseconds, so 1000 would delay the execution of hide() for one second. If you'll recall, we set the transition speed for the .hide class in our CSS to one second. So setTimeout(hide, 1000); will make the hide() function wait for one second before executing (I realize now that naming both the class and the function 'hide' may be a bit confusing - sorry about that)

The reason we don't include the () after 'hide' in the setTimeout() function is that we're not calling hide(), we're identifying it for the setTimeout() function

  1. Save your work and refresh (remember, hard refresh) the page. Click 'OK' -- that should do it
  1. Confirm that you can now click the hyperlink after the modal is out of the way, then delete it from your code
  1. Save your work and refresh - confirming that everything is working
starter file
Fig 24- Display the file

If you're an observant person, you may have noticed that what we have now doesn't look exactly like the screen shot way back at the top of the page. We still need a little more CSS and JavaScript. But we'll tackle that for Homework 4

  1. Once you've got it looking and working the way it should, upload all your files and folders to your account into a new hw3 folder
  1. Check your page in the browser from the server side. Ctrl+click the two validation icons and make sure there are no errors. If there are any, correct them and re-upload your work
  1. Copy & paste the URL to your work into a text file named hw3.txt and upload it to the HW 3 folder on D2L

Have a nice day 😊