This assignment will finish off our little ditty to 'Gentlemen of the Road.'
We want to add two things to the page we created with Homework 3. First, we want to add the drop-caps. We'll be using pseudo elements (not pseudo classes) to do this. Then we want to embed an audio player so the user can listen to the song that goes with the lyrics. And, of course, customize itOK!
So we finished off the last assignment with the project almost done. There are still a couple of things we want to do
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
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.
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
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
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
That's a little better, but it needs more tweaking
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
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
These will be your custom controls - play, pause, volume up, volume down. If you're feeling frisky, feel free to find your own icons
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
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?
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
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
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
The purists among you may have noted that I could have compressed the above code into one line:
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
Have a nice day 😊