code icon

CSCI 1720

Intermediate Web


Homework 4 - More JavaScript & Modals

  1. Here's a reminder of what our final product will look like
output page
Fig 1- HW4 Final Product

So we finished off the last assignment with the project almost done. There are still a couple of things we want to do

  1. Make a new folder on your external drive called hw4
  1. Copy all the files and folders in hw3 and paste them into hw4. This is our starting point
  1. Open index.html & main.scss in Brackets. Also, run Sass to watch your new scss & css folders

Drop Caps

I like the drop-cap effect. It gives the page a subtle, but elegant look, I think. One thing, though, it's easy to overdo it

  1. We need to add a new set of rules to our SCSS in order to create the drop-cap effect. Navigate to the .container-inner rules
  1. Nest the following inside the block
output page
Fig 2- Pseudo element

A CSS pseudo element is sort of like a pseudo class. It applies a set of rules to an element based on certain conditions. In this case, it is modifying the paragraph's first letter. You can check W3Schools for more information about pseudo elements

The first line, obviously, sets the first letter's display property to 'block.' You may recall that we added a couple of Google Fonts to our <head> element in HW3. This is where we link to that font with the font-family property.

  1. Let's zoom in and look at what we've got so far
output page
Fig 3- Drop cap - initally

Well, that's close, but not exactly what we want. Ultimately, I want the drop cap to span two lines and not obstruct the other text. We're going to have to do some fine-tuning

  1. Open the developer tools (Ctrl+right-click+Inspect or F12)

To make sure that what you see aligns with the instructions, make sure that the tools' display is docked on the right of the window

output page
Fig 4- Developer Tools
  1. Click the element selection tool (selection tool), Then use it to select the first paragraph
output page
Fig 5- Selecting the paragraph
  1. In the tools, on the bottom pane, scroll down to Pseudo ::first-letter element
output page
Fig 6- Displaying the properties
of the first letter

Remember from our lecture about the developer tools, we can dynamically change the property values as the page is displayed to make the selected eleement display the way we want it to

  1. Click on the value for the font-size property (2rem). Notice how it is now highlighted in blue. Using the mouse's scroll wheel, change the value to 3rem
output page
Fig 7- Modifying properties
output page
Fig 8- Modifying properties - result

That's a little better, but it needs more tweaking

  1. Modify the other properties (font-size, line-height, margin-top, and margin-right) until you get the desired result
output page
Fig 9- Tweaking property values
to get what you want

I found, through experimentation, that the four properties - font-size, line-height, margin-top, and margin-right - were best for positioning the first letter exactly where I wanted it to be. The numbers you come up with may not be exactly the same as mine. That's ok, as long as your end-result displays similarly to what's shown

  1. Remember, the changes we've made don't affect the source code. So we have to copy the values back in to the code. Highlight the property/values in the developer tools display, right-click, and select 'copy'
output page
Fig 10- Copying the changed code back in to
source code
  1. Return to Brackets and paste the changed values over what you started with (you'll have to fix the indentation)
output page
Fig 11- Update the source code
  1. Save your changes and refresh the page in the browser to confirm that all is well

So that's one way we can use to modify our code to make the page display the way we want it to in a relatively pain-free way

Audio

We want to wrap this assignment up with an embedded audio player. Of course, we'll have to customize it a little and use JavaScript to enable the controls

  1. Download the .mp3 file, whiskey_in_the_jar.mp3 and save it to your media folder
  1. Add the following to index.html, after the heading element
output page
Fig 12- Adding an audio player
output page
Fig 14- Modifying the audio control
  1. We're going to build some custom controls. Download the file icons.zip and extract the files to your media folder

These will be your custom controls - play, pause, volume up, volume down. If you're feeling frisky, feel free to find your own icons

  1. Add the following to index.html
screen shot
Fig 15- Adding custom controls

The thing to note here is the onclick attribute. This will make the browser execute the built-in JS functions that are associated with the audio object

onclick

Some developers frown on using onclick, arguing that you should create an event listener instead. But I think you should use the tool that's appropriate for the job - sure, I could drive a nail with a sledgehammer, but why waste the effort when a claw hammer will do?

  1. Save your work and refresh the page. We're getting there. Click the 'play' button and enjoy the serenade
  1. In main.scss, start styling the controls
screen shot
Fig 16- Positioning the audio controls

So, at this point, I don't know exactly what values I need to get the thing to show up where I want it to. That's why I set right & top to zero. We're going to use the 'developer tools' trick again to get them right where we want them

  1. Refresh the page and launch the developer tools, if they aren't already open
  1. Again, use the element selection tool to select the 'controls' div
  1. Modify the values for right & top until the controls are displaying where you want them to
screen shot
Fig 17- Positioning the controls

Again, your actual values may differ from mine +/- a little. Maybe you think the controls should be closer to the text; or a little higher or lower. The point here is to use the developer tools to precisely place the controls, then

  1. Copy your property/values back in to main.scss
screen shot
Fig 18- Update the values
  1. This is probably unnecessary, but I almost always do it anyway: Save your file and refresh the page to make sure the values are correct
  1. A couple of final tweaks to the controls' appearance:
screen shot
Fig 19- Adding img pseudo classes to enhance
the appearance

These are some minor changes to make the page a little more dynamic. So when the user hovers over a button, the cursor changes to pointer and a little animation fires to call attention to the button

More JavaScript

  1. There isn't much left to do. The only thing, maybe you noticed this, the default volume for the audio control is 100%, which, again, is a bit jarring. I want to change that. So go to index.html and scroll down to the script
  1. Add the following inside the script:
screen shot
Fig 20- Setting the initial volume

The purists among you may have noted that I could have compressed the above code into one line:

js code

and it'd have worked fine. There's no particular reason I did it the other way, other than I'm just in the habit of assigning element selections to variables

Either way, an important thing to note is that we're not calling a function, here. We are setting the value property for the element, which is 1 by default and can range from 0 - 1. I settled on a value of 0.3 by trial and error

  1. Whichever way you choose to add the volume setting, save your work, refresh the page, and start the playback. Note that it doesn't start out full-blast. Play with the volume controls up/down to verify that they work
  1. Once all your files are complete and the page is working as specified, upload your work to the server in a new homework/hw4 folder
  1. Check the page in a browser and make sure it is error-free. Fix any errors, save, and re-upload your work
  1. Copy the page's URL into a text file named hw4.txt and upload it to the D2L Homework 4 folder (remember to let me know if you did the bonus part)

Have a nice day 😊