code icon

CSCI 1720

Intermediate Web


Homework 5 - JavaScript & Modals

  1. Download the project starter archive and extract it to a new folder on your external drive: homework/hw5_js-1
  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,.manifest, 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- hw5_js-1 Final Product
(click image to zoom in)

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
(click image to zoom in)

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
(click image to zoom in)
  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
(click image to zoom in)

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
(click image to zoom in)

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
(click image to zoom in)

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
(click image to zoom in)

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
(click image to zoom in)
  1. Add some classes for floating images
starter file
Fig 11- Image float classes
(click image to zoom in)
  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 script

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
(click image to zoom in)

Here, we're using the let keyword to declare variables instead of the (not mostly depricated) var keyword → https://www.geeksforgeeks.org/difference-between-var-and-let-in-javascript/

  1. Now, add
starter file
Fig 16- Event listener
(click image to zoom in)

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?

Don't worry about the missing images and stuff at the top of the page. We'll fix that later

  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
(click image to zoom in)

Setting the z-index to -1 effectively 'buries' the modal 'beneath' the main page.

In this particular use-case, since we don't need to display the modal again, once the user has clicked 'ok,' there's no need to create a 'fade-in' effect

  1. Replace modal.style.display = 'none'; with the following in index.html:
starter file
Fig 18- Add a class to the modal,
using JS
(click image to zoom in)

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

This also helps illustrate how CSS and JavaScript can be used together to achieve the effect(s) you (I, in this case...but more importantly in the future...your client) want

  1. Reload the page in your browser and test it out. Great! Now it fades out
  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. Save your work and refresh - confirming that everything is working
starter file
Fig 19- 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 6 & 7

  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 homework/hw5_js-1 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 hw5_js-1.txt and upload it to the HW 5 - JavaScript I folder on D2L

Have a nice day 😊