Skip to content

Instantly share code, notes, and snippets.

@ESOComputing

ESOComputing/FCC Challenge 13 - DASH 5.5 - SlideTranscripts

Last active August 29, 2015 14:13
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save ESOComputing/e473e52f311d968bfeee to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save ESOComputing/e473e52f311d968bfeee to your computer and use it in GitHub Desktop.
Download ZIP
Raw
FCC Challenge 13 - DASH 5.5 - SlideTranscripts
FCC Challenge 13 (Dash Project 5 - Mad Libs Game: 5.5)
********************************************************************************************
Slide 1/44
********************************************************************************************
LIN'S MAD LIB
Part 5: Put It All Together
********************************************************************************************
Slide 2/44
********************************************************************************************
You're building an interactive Mad Lib for word-game-obsessed Lin.
You wrote JavaScript that prompts players to provide some words--then you made JavaScript remember and display those answers!
********************************************************************************************
Slide 3/44
********************************************************************************************
OUR MISSION: In this lesson ,we'll cover 3 main things:
1. Learn a sneaky new JavaScript function that makes HTML elements vanish!
2. Connect player answers into a real Mad Libs story
3. Add some CSS to make the app look stylin'
********************************************************************************************
Slide 4/44
********************************************************************************************
LET'S GET STARTED
********************************************************************************************
Slide 5/44
********************************************************************************************
1. Everybody's Got Something to Hide
********************************************************************************************
Slide 6/44
********************************************************************************************
We ran into a problem towards the end of the last lesson. The "next" button should vanish when all the prompts have been answered and you display the players' words on screen.
********************************************************************************************
Slide 7/44
********************************************************************************************
And JQuery has a function for that!
$('button').hide();
********************************************************************************************
Slide 8/44
********************************************************************************************
It belongs inside your showFinal function.
ex //this is withing the showFinal function
//show answers array
//and then hide the button
$('button').hide();
********************************************************************************************
Slide 9/44
********************************************************************************************
CHECKPOINT #1
Write $('button').hide(); inside your showFinal function, on a new line just before the closing curly brace
********************************************************************************************
Slide 10/44
********************************************************************************************
NOW RUN YOUR JAVASCRIPT!
And see what happens at the end...
********************************************************************************************
Slide 11/44
********************************************************************************************
The hide() function in JQuery is similar to the toggle() function you used in Esha's and Cotter's projects. And if you guessed that there's also a show() function... well, then you're a smarty pants!
********************************************************************************************
Slide 12/44
********************************************************************************************
2. Connect the Dots. La-La-La!
********************************************************************************************
Slide 13/44
********************************************************************************************
In the last lesson, you concatenated three things held inside an answers array.
********************************************************************************************
Slide 14/44
********************************************************************************************
This is what it looked like.
var showFinal = function() {
$('body').html(answers[0]+' '+answers[1]+' '+answers[2]);
}
********************************************************************************************
Slide 15/44
********************************************************************************************
Now, you're going to use that same trick to include the parts of the Mad Lib that connect the words the players come up with.
This is the story of _____name____ and the _____adjective____ _____noun_____.
********************************************************************************************
Slide 16/44
********************************************************************************************
This is what the new showFinal will look like.
var showFinal = function() {
$('.prompt').html('This is the story of '+answers[0]+' and the '+answers[1]+' '+answers[2]);
$('button').hide();
}
Don't worry about where the line break falls on the html function.
********************************************************************************************
Slide 17/44
********************************************************************************************
CHECKPOINT #2
Add 'This is the story of' + to your html function. Pay attention to the spaces inside the quotes
Write ' and the ' between the answer[0] and answer[1]
********************************************************************************************
Slide 18/44
********************************************************************************************
NOW RUN YOUR JAVASCRIPT!
And see what happens...
********************************************************************************************
Slide 19/44
********************************************************************************************
Lin: "That's so cool! The Mad Lib works--but it looks pretty basic.
Can you make it more like a real Mad Lib? It would be awesome if the answers look handwritten inside fill-in-the-blanks!"
********************************************************************************************
Slide 20/44
********************************************************************************************
3. Styling it!
********************************************************************************************
Slide 21/44
********************************************************************************************
Now that all the HTML and JavaScript is doing its thing, let's use CSS to fancy up Lin's website.
********************************************************************************************
Slide 22/44
********************************************************************************************
First, add some Google Web Fonts.
<link href='http://fonts.googleapis.com/css?family=Fjalla+One' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Shadows+Into+Light' rel='stylesheet' type='text/css'>
Fjalla One is a nice big readable type, and Shadows Into Light will be your handwritten font
********************************************************************************************
Slide 23/44
********************************************************************************************
You can visit google.com/fonts in a new tab or window, search for those two fonts by name, click on the arrow, and paste the code from step 3 into Dash!
********************************************************************************************
Slide 24/44
********************************************************************************************
They go right near the top of your code inside the <head> tags.
Remember, Dash won't display it unless the link starts with https://
********************************************************************************************
Slide 25/44
********************************************************************************************
CHECKPOINT #3
Add the Google Web Font "Fjalla One" to your project. Make sure to change the http to https!
Add the Google Web Font "Shadows Into Light" to your project. Make sure to change http to https!
********************************************************************************************
Slide 26/44
********************************************************************************************
Now we can get to the styling!
Let's make the body text 20px, centered and Fjalla One.
ex body {
text-align: center;
font-family: 'Fjalla One';
font-size: 20px;
}
********************************************************************************************
Slide 27/44
********************************************************************************************
CHECKPOINT #4
Inside the style tags, give the body a text-align: center
Make the body's font-size 20px
Set the body font-family to Fjalla One
********************************************************************************************
Slide 28/44
********************************************************************************************
Now, run JavaScript!
Ooooh, fancy.
********************************************************************************************
Slide 29/44
********************************************************************************************
Let's add a background color to the body.
we're going to give the button some breathing room, and make the input box bigger, too.
ex body {
text-align: center;
font-family: 'Fjalla One';
font-size: 20px;
background: #e6eaf0
}
button {
margin: 40px;
}
input {
font-size: 24px;
} input {
font-size: 24px;
}
********************************************************************************************
Slide 30/44
********************************************************************************************
CHECKPOINT #5
Give the body a background of #e6af0
Give the button a margin of 40px
Make the input's font-size 24px
********************************************************************************************
Slide 31/44
********************************************************************************************
When you run JavaScript, the answer looks like this.
[example of what our current code outputs for showFinal]
We want it to look like this.
[example of what we want our code to output with showFinal]
********************************************************************************************
Slide 32/44
********************************************************************************************
Let's wrap a span with a class called "fill" around the fill-in-the blank parts, so they can have style!
$('.prompt').html('This is the story of <span class="fill">'+answers[0]+'</span> and the <span class="fill">'+answers[1]+'</span> <span class="fill">'+answers[2]+'</span>.');
Then--you guessed it!--you'll make a fill class in the CSS stylesheet.
********************************************************************************************
Slide 33/44
********************************************************************************************
Pay attention to quotes! Use single for the JS and double in the HTML, so we don't accidentally close any.
$('.prompt').html('This is the story of <span class="fill">'+answers[0]+'</span> and the <span class="fill">'+answers[1]+'</span> <span class="fill">'+answers[2]+'</span>.');
While you're in there, stick a period on the end of the sentence, after the last </span>.
********************************************************************************************
Slide 34/44
********************************************************************************************
CHECKPOINT #6
Wrap a span class called "fill" around answer[0]
Wrap a second span around answer[1]
Put a span around[2], and stick a period at the end of the sentence
********************************************************************************************
Slide 35/44
********************************************************************************************
Pay attention to quotes! Use single for the JS and double in the HTML, so we don't accidentally close any.
********************************************************************************************
Slide 36/44
********************************************************************************************
Now CSS knows to class those answers up!
Start by assigning them a background color of white, a font color of red, and a solid black border just on the bottom.
ex .fill {
background: white;
color: red;
border-bottom: 2px black solid;
}
********************************************************************************************
Slide 37/44
********************************************************************************************
CHECKPOINT #7
Create a class called .fill in your CSS, and give it a background: white
Set it's fill color to red
Give it border-bottom: 2px black solid
********************************************************************************************
Slide 38/44
********************************************************************************************
RUN JAVASCRIPT, RUN!
Obviously, we need to chnage .fill's font.
********************************************************************************************
Slide 39/44
********************************************************************************************
It also needs some padding to make the white box a little wider, and margins to put space between the words in the boxes and the rest of the sentence.
********************************************************************************************
Slide 40/44
********************************************************************************************
We'll use the handwriting font, Shadows Into Light.
Give it 6px of padding on the left and right sides, and leave the top and bottom with 0. Set the margin to 4px.
ex .fill {
background: white;
color: red;
border-bottom: 2px black solid;
font-family: 'Shadows Into Light';
padding: 0 6px;
margin: 4px;
}
********************************************************************************************
Slide 41/44
********************************************************************************************
Give .fill the font-family Shadows Into Light
Give it padding: 0 6px
Set fill's margin to 4px
********************************************************************************************
Slide 42/44
********************************************************************************************
BRAVO!
[Example of the code's final output]
********************************************************************************************
Slide 43/44
********************************************************************************************
Lin: "My Mad Lib is perfect!
Thank you so much. It's wild how much cool stuff you can build with HTML, CSS, and just a little bit of JavaScript."
********************************************************************************************
Slide 44/44
********************************************************************************************
YOU'RE DONE - GREAT JOB!
********************************************************************************************
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment