1. Front-End Web Dev.rtf

# Lesson 2 : HTML Syntax 

Quiz - Make Your First Element 

<!--
This is a comment. Note the special tags. You can type whatever you want
in a comment. You can leave notes for yourself or other people with it.
-->

<!--
I want you to make three elements:
* One paragraph
* Two spans
Make sure you put some text content in every element!

When you're ready to test, click "Test run" button to see how your page looks.
When you're ready to submit, click "Submit" button to get feedback!
-->

<!--
Here's an example element:
<tag>content</tag>
-->
<html>
<p>para 1</p>
<span>span 1</span>
<span>span 2</span>
</html>

Quiz - Spot The Bug

Which Chunks of HTML are formatted incorrectly?

<p>a paragraph</p>
<span…middle of sentence…</span>
<p><em>words, words, wrods.</p></em>

Quiz - HTML Research

<p><b>This text should be bold.</b></p>
<p><em>And this text should have emphasis (italics).</em></p>


# Lesson 3 : HTML Syntax Problem Set

Quiz : Make all the Headers 

headandshoulders

Quiz : Make a list

listlistlistlist

Quiz : Tree To HTML

letsclimbatree

Quiz : Constructing Links

<a href="https://www.google.com">Google</a>

Quiz : Add an Image

<!--
Sample image element:

    <img src="http://somewebsite.com/image.jpg" alt="short description">

How to complete this quiz:

* Create an image element at the designated spot in the paragraph below.
* Set the source to: http://udacity.github.io/fend/images/udacity.png
* Set the alt description to a quick description of the image (maybe something like, "Udacity logo").
* Play around with the URL! See if you can make a different image appear.
-->

<p>
    <img src="http://udacity.github.io/fend/images/udacity.png" alt="Udacity Logo">
    This is a big paragraph of text about Udacity. Cool. Cool. And here is an image! <!-- put the image element here! --> Here's another question for you: how is the text reacting to the image? Is the image on its own line or is it showing up in the same last as the rest of the text?
</p>

Quiz : Figures

arenttreescool?


# Lesson 5 : CSS Syntax

Quiz : CSS or HTML?

3

Quiz : CSS Syntax

<!DOCTYPE html>

<!-- Instructions: Change the color of "Hello, world!" to green. -->

<html>
<head>
	<title>Quiz - Hello, world!</title>
    <style>
    h1{
        color:green;
    }
		p {
			color: blue;
		}        
        /* add CSS here */
    </style>
</head>
<body>
	<h1>Hello, world!</h1>
	<p>Are you ready for your first challenge?</p>
	<p>Let's add some style to this webpage!</p>
</body>
</html>

Quiz : Tag Selectors

All Paragraphs

Quiz : Using Selectors

<div class="right"></div>
<p class="highlight module right"></p>

Quiz : Using CSS References

font-style
text-decoration
text-transform
font-weight

Quiz : Units in CSS

<!DOCTYPE html>

<!-- Instructions: Add the following changes to this webpage:

* set the first div's width to 100px (pixels)
* set the second div's height to 200px (pixels)
* set the third div's margin to 1em
* set the fourth div's font-size to 2em

-->

<html>
<head>
    <title>Quiz - Units in CSS</title>
    <style>
    	.first {
    	    width:100px;
            /* add CSS here */
    	}
    	.second {
    	    height:200px;
            /* add CSS here */
    	}
    	.third {
    	    margin:1em;
            /* add CSS here */
    	}
    	.fourth {
    	    font-size:2em;
            /* add CSS here */    		
    	}
    </style>
</head>
<body>
	<div class="first"></div>
	<div class="second"></div>
	<div class="third">Hammock ex plaid nulla. Nihil stumptown gastropub, dreamcatcher gochujang franzen cillum cliche keffiyeh pop-up pug small batch knausgaard. Fanny pack elit you probably haven't heard of them before they sold out. Sint elit tofu et veniam irony 3 wolf moon. VHS slow-carb trust fund chartreuse wolf. Qui sed dreamcatcher cronut, hoodie fixie normcore. Gochujang dolor consectetur post-ironic.</div>
	<div class="fourth">Hammock ex plaid nulla. Nihil stumptown gastropub, dreamcatcher gochujang franzen cillum cliche keffiyeh pop-up pug small batch knausgaard. Fanny pack elit you probably haven't heard of them before they sold out. Sint elit tofu et veniam irony 3 wolf moon. VHS slow-carb trust fund chartreuse wolf. Qui sed dreamcatcher cronut, hoodie fixie normcore. Gochujang dolor consectetur post-ironic.</div>
</body>
</html>

Quiz : Identifying Colors

color : blue;
color : rgb(0 ,0 ,255);
color :  300f;


# Lesson 6 : CSS Syntax Problem Set

Quiz : Style an Image

<!DOCTYPE html>

<!-- Instructions: Replicate the same styling seen in the kitten image below. -->

<html>
<head>
    <title>Style an Image Quiz</title>
    <style>
    	.kitten-image {
    	   border: dashed red;
            /* add CSS here */
    	}
    </style>
</head>
<body>
    <!-- Image credit: Nicolas Suzor, https://www.flickr.com/photos/nicsuzor/ - via Flickr, Creative Commons. -->
        <img src="http://udacity.github.io/fend/lessons/L3/problem-set/02-style-an-image/kitten.jpg" alt="kitten" class="kitten-image">
</body>
</html>

Quiz : Style the Font

<!DOCTYPE html>

<!-- Instructions: Replicate the same styling seen in the Udacity text below. -->

<html>
<head>
    <title>Style the Font Quiz</title>
    <style>
    	.udacity-text {
            /* add CSS here */
    	}
    </style>
</head>
<body>
    <h1 class="udacity-text">udacity</h1>
</body>
</html>

Quiz : Writing Selectors

andtheSELECTIONis

Quiz : Using Attributes

<!DOCTYPE html>

<!-- Instructions: Using the provided HTML and CSS, add the correct attributes to the HTML to replicate the same webpage pictured below. -->

<html>
<head>
	<meta charset="utf-8">
	<title>Using Attributes Quiz</title>
	<style>
        body {
            font-family: Arial; 
        }
        #to-do-list {
            width: 400px;
            background: #2e3d49;
            padding: 10px 20px;
        }
        .title {
            color: #fff;
        }
        .underline {
            text-decoration: underline;
            
        } 
        .list {
            list-style-type: circle;
            text-align: left;
            font-size: 16px;
            color: #1fba58;
            line-height: 24px;
        }
        .finished {
            color: #f4442f;
            text-decoration: line-through;
        }
	</style>
</head>
<body>
	<div id="to-do-list">
		<h1 class="title">My To-Do List</h1>
		<h2 class="underline title">Chores</h2>
		<ul class="list">
			<li>load the diswasher</li>
			<li>vacuum living room</li>
			<li>take out garbage</li>
			<li class="finished">sweep the garage</li>
		</ul>
		<h2 class="underline title">Homework</h2>
		<ul class="list">
			<li class="finished">brainstorm ideas for Science project</li>
			<li class="finished">finish Calculus 2 problems</li>
			<li>study for Programming midterm :P</li>
            <li>finish Project 0 on Udacity FEND</li>
			<li class="finished">find sources for Biology research paper</li>
			<li>read first two chapters of The Art of War</li>
		</ul>
        <h2 class="underline title">Party</h2>
        <ul class="list">
            <li class="finished">send out invitations</li>
            <li>reserve party room at restaurant</li>
            <li>order the cake!</li>
        </ul>
	</div>
</body>
</html>

Quiz : Slack Card

imnotslacking

Quiz : Udacity Site Header

fullsteamahead

Quiz : Link to a Stylesheet

aLINKtotheSTYLEZ


# Lesson 7 : How to write Code Faster

Quiz : Keyboard Shortcuts

150
61

Quiz : What’s Your Favorite Theme?

City Lights Syntax Theme


# Lesson 11 : Data Types & Variables 

Quiz : First Expression (2-1)

/*
 * Programming Quiz: First Expression (2-1)
 *
 * Write an expression that uses at least three, different, arithmetic operators
 * to log the number 42 to the console.
 */

// this expression equals 4, change it to equal 42
console.log(39 + 5 - 2);
console.log(80 / 2 + 2);
console.log(2 * 20 + 2);

Quiz : Converting Temperatures (2-2)

/*
 * Programming Quiz: Converting Tempatures (2-2)
 *
 * Use the Celsius-to-Fahrenheit formula to set the fahrenheit varible:
 *
 *     F = C x 1.8 + 32
 *
 * Log the fahrenheit variable to the console.
 *
 */

var celsius = 12;
var fahrenheit = celsius*(1.8)+32; /* convert celsius to fahrenheit here */

console.log( fahrenheit/* print out result here */);

Quiz : Favorite Food (2-3)

/*
 * Programming Quiz: Favorite Food (2-3)
 */
var Food1 = "Dahi";
var Food2 = "Egg";
var Food3 = "Milk";
console.log(Food1,Food2,Food3/* replace this comment with your string */);

Quiz : String Equality for All (2-4)

/*
 * Programming Quiz: String Equality for All (2-4)
 */

// fix the right side of the expression
var answer = "ALL Strings are CrEaTeD equal" == "ALL Strings are CrEaTeD equal";
console.log(answer);

Quiz : All Tied Up (2-5)

/*
 * Programming Quiz: All Tied Up (2-5)
 */

var joke = "Why couldn't the shoes go out and play? \nThey were all tied up!"; /* write your joke here */
console.log(joke);

Quiz : Yosa Buson (2-6)

/*
 * Programming Quiz: Yosa Buson (2-6)
 */

var haiku = "Blowing from the west\n" + "Fallen leaves gather\n" + "In the east." ;
console.log(haiku);

Quiz : Facebook Post (2-7)

String
String
String
Boolean
Number

Quiz : Semicolons! (2-8)

/*
 * Programming Quiz: Semicolons! (2-8)
 */

// your code goes here
var thingOne="red";
var thingTwo="blue";
console.log(thingOne+" "+ thingTwo);

Quiz : What's my Name? (2-9)

/*
 * Programming Quiz: What's my Name? (2-9)
 */

// your code goes here
var fullName = "Kshitij Sharma";

Quiz : Out to Dinner (2-10)

/*
 * Programming Quiz: Out to Dinner (2-10)
 */

// your code goes here
var bill = 10.25 + 3.99 + 7.15;
var tip = 0.15 * bill;
var total = tip + bill;
console.log("$"+total.toFixed(2));

Quiz : Mad Libs (2-11)

/*
 * Programming Quiz: MadLibs (2-11)
 * 
 * 1. Declare a madLib variable
 * 2. Use the adjective1, adjective2, and adjective3 variables to set the madLib variable to the message:
 * 
 * 'The Intro to JavaScript course is amazing. James and Julia are so fun. I cannot wait to work through the rest of this entertaining content!'
 */

var adjective1 = 'amazing';
var adjective2 = 'fun';
var adjective3 = 'entertaining';

// your code goes here
var madLib = "The Intro to JavaScript course is " + adjective1 + ". James and Julia are so " + adjective2 + ". I cannot wait to work through the rest of this " + adjective3 +" content!";
console.log(madLib);


Quiz : One Awesome Message (2-12)

/*
 * Programming Quiz: One Awesome Message (2-12)
 *
 * 1. Create the variables:
 *     - firstName
 *     - interest
 *     - hobby
 * 2. Create a variable named awesomeMessage and, using string concatenation 
      and the variables above, create an awesome message.
 * 3. Print the awesomeMessage variable to the console.
 */
 
/*
 * Notes:
 * - Using the above as an example, firstName would have been assigned to
 *   "Julia", interest to "cats", and hobby to "play video games".
 * - Be sure to include spaces and periods where necessary!
 */

// Add your code here
var firstName = "Julia";
var interest = "cats";
var hobby = "play video games";
var awesomeMessage = "Hi, my name is "+ firstName + "." + " I love " + interest + "." +  " In my spare time, I like to "+ hobby + ".";
console.log(awesomeMessage);


# Lesson 9 : Data Types & Variables

Quiz : First Expression (2-1)

/*
 * Programming Quiz: First Expression (2-1)
 *
 * Write an expression that uses at least three, different, arithmetic operators
 * to log the number 42 to the console.
 */

// this expression equals 4, change it to equal 42
console.log(39 + 5 - 2);
console.log(80 / 2 + 2);
console.log(2 * 20 + 2);

Quiz : Converting Temperatures (2-2)

/*
 * Programming Quiz: Converting Tempatures (2-2)
 *
 * Use the Celsius-to-Fahrenheit formula to set the fahrenheit varible:
 *
 *     F = C x 1.8 + 32
 *
 * Log the fahrenheit variable to the console.
 *
 */

var celsius = 12;
var fahrenheit = celsius*(1.8)+32; /* convert celsius to fahrenheit here */

console.log( fahrenheit/* print out result here */);

Quiz : Favorite Food (2-3)

/*
 * Programming Quiz: Favorite Food (2-3)
 */
var Food1 = "Dahi";
var Food2 = "Egg";
var Food3 = "Milk";
console.log(Food1,Food2,Food3/* replace this comment with your string */);

Quiz : String Equality for All (2-4)

/*
 * Programming Quiz: String Equality for All (2-4)
 */

// fix the right side of the expression
var answer = "ALL Strings are CrEaTeD equal" == "ALL Strings are CrEaTeD equal";
console.log(answer);

Quiz : All Tied Up (2-5)

/*
 * Programming Quiz: All Tied Up (2-5)
 */

var joke = "Why couldn't the shoes go out and play? \nThey were all tied up!"; /* write your joke here */
console.log(joke);

Quiz : Yosa Buson (2-6)

/*
 * Programming Quiz: Yosa Buson (2-6)
 */

var haiku = "Blowing from the west\n" + "Fallen leaves gather\n" + "In the east." ;
console.log(haiku);

Quiz : Facebook Post (2-7)

String
String
String
Boolean
Number

Quiz : Semicolons! (2-8)

/*
 * Programming Quiz: Semicolons! (2-8)
 */

// your code goes here
var thingOne="red";
var thingTwo="blue";
console.log(thingOne+" "+ thingTwo);

Quiz : What's my Name? (2-9)

/*
 * Programming Quiz: What's my Name? (2-9)
 */

// your code goes here
var fullName = "Kshitij Sharma";

Quiz : Out to Dinner (2-10)

/*
 * Programming Quiz: Out to Dinner (2-10)
 */

// your code goes here
var bill = 10.25 + 3.99 + 7.15;
var tip = 0.15 * bill;
var total = tip + bill;
console.log("$"+total.toFixed(2));

Quiz : Mad Libs (2-11)

/*
 * Programming Quiz: MadLibs (2-11)
 * 
 * 1. Declare a madLib variable
 * 2. Use the adjective1, adjective2, and adjective3 variables to set the madLib variable to the message:
 * 
 * 'The Intro to JavaScript course is amazing. James and Julia are so fun. I cannot wait to work through the rest of this entertaining content!'
 */

var adjective1 = 'amazing';
var adjective2 = 'fun';
var adjective3 = 'entertaining';

// your code goes here
var madLib = "The Intro to JavaScript course is " + adjective1 + ". James and Julia are so " + adjective2 + ". I cannot wait to work through the rest of this " + adjective3 +" content!";
console.log(madLib);

Quiz : One Awesome Message (2-12)

/*
 * Programming Quiz: One Awesome Message (2-12)
 *
 * 1. Create the variables:
 *     - firstName
 *     - interest
 *     - hobby
 * 2. Create a variable named awesomeMessage and, using string concatenation 
      and the variables above, create an awesome message.
 * 3. Print the awesomeMessage variable to the console.
 */
 
/*
 * Notes:
 * - Using the above as an example, firstName would have been assigned to
 *   "Julia", interest to "cats", and hobby to "play video games".
 * - Be sure to include spaces and periods where necessary!
 */

// Add your code here
var firstName = "Julia";
var interest = "cats";
var hobby = "play video games";
var awesomeMessage = "Hi, my name is "+ firstName + "." + " I love " + interest + "." +  " In my spare time, I like to "+ hobby + ".";
console.log(awesomeMessage);


# Lesson 12 : Conditionals

Quiz : Flowcharts (3-1)

Take a look at the flowchart above. What data type would best represent (Yes/No) if you have enough money to purchase the item?
Boolean

Here’s a different flowchart for approaching the castle gates. If you decide to storm the castle, what is the immediate resulting outcome?
A dragon appears and attack!

Quiz : Even or Odd (3-2)

/*
 * Programming Quiz: Even or Odd (3-2)
 *
 * Write an if...else statement that prints `even` if the 
 * number is even and prints `odd` if the number is odd.
 *
 * Note - make sure to print only the string "even" or the string "odd"
 */

// change the value of `number` to test your if...else statement
var number = 12;

if (number% 2 === 0) {
    console.log("even")
} 
else 
{
 console.log("odd")
}

Quiz : Musical Groups (3-3)

/*
 * Programming Quiz: Musical Groups (3-3)
 */

// change the value of `musicians` to test your conditional statements
var musicians = 20;
if (musicians === 1) {
    console.log("solo");
}// your code goes here
else if (musicians === 2) {
    console.log("duet");
}// your code goes here
else if (musicians === 3) {
    console.log("trio");
}// your code goes here
else if (musicians === 4) {
    console.log("quartet");
}// your code goes here
else if (musicians > 4) {
    console.log("this is a large group");
}// your code goes here

else {
    console.log("not a group");
}

Quiz : Murder Mystery (3-4)

/*
 * Programming Quiz: Murder Mystery (3-4)
 */

// change the value of `room` and `suspect` to test your code
var room = "gallery";
var suspect = "Ms. Van Cleve";
var weapon = "";
var solved = false;

if (room === "dining room" && suspect === "Mr. Parkes") {
    weapon = "knife";
    solved=true;

} else if (room === "billiards room" && suspect === "Mrs. Sparr") {
    weapon = "pool stick";
    solved=true;


} else if (room === "gallery" &&  suspect === "Ms. Van Cleve") {
    weapon = "trophy";
    solved=true;

}  else if (room === "ballroom" &&  suspect === "Mr. Kalehoff") {
    weapon= "poison";
    solved=true;
}

if(solved) {
    console.log(suspect + " did it in the " + room + " with the " + weapon + "!");
}

Quiz : Checking your Balance (3-5)

/*
 * Programming Quiz - Checking Your Balance (3-5)
 */

// change the values of `balance`, `checkBalance`, and `isActive` to test your code
var balance = 325.00;
var checkBalance = true;
var isActive = false;

// your code goes here
if(checkBalance) {
    if (isActive && balance > 0) {
        console.log("Your balance is $" + balance +".");
    } 
    else if (!isActive) {
        console.log("Your account is no longer active.");
    } 
    else if (balance === 0) {
        console.log("Your account is empty.");
    } 
    else {
        console.log("Your balance is negative. Please contact bank.");
    }
}
else {
    console.log("Thank you. Have a nice day!");
}

Quiz : Ice Cream (3-6)

/*
 * Programming Quiz: Ice Cream (3-6)
 *
 * Write a single if statement that logs out the message:
 * 
 * "I'd like two scoops of __________ ice cream in a __________ with __________."
 * 
 * ...only if:
 *   - flavor is "vanilla" or "chocolate"
 *   - vessel is "cone" or "bowl"
 *   - toppings is "sprinkles" or "peanuts"
 *
 * We're only testing the if statement and your boolean operators. 
 * It's okay if the output string doesn't match exactly.
 */

// change the values of `flavor`, `vessel`, and `toppings` to test your code
var flavor = "strawberry";
var vessel = "cone";
var toppings = "cookies";

// Add your code here
if( (flavor === "vanilla" || flavor === "chocolate") && 
    (vessel === "cone" || vessel === "bowl" ) &&
    (toppings === "sprinkles" || toppings === "peanuts")

  ) {
    
        console.log("I'd like two scoops of " + flavor + " ice cream in a " + vessel + " with " + toppings + ".");
        
    }
    
Quiz : What do I Wear? (3-7)

/*
 * Programming Quiz: What do I Wear? (3-7)
 */

// change the values of `shirtWidth`, `shirtLength`, and `shirtSleeve` to test your code
var shirtWidth = 23;
var shirtLength = 30;
var shirtSleeve = 8.71;

// your code goes here
if (shirtWidth >=18 && shirtWidth <20 && shirtLength >=28 && shirtLength <29 && shirtSleeve >= 8.13 && shirtSleeve < 8.38) {
    console.log("S");
}
else if (shirtWidth >=20 && shirtWidth <22 && shirtLength >=29 && shirtLength <30 && shirtSleeve >= 8.38 && shirtSleeve < 8.63) {
    console.log("M");
}
else if (shirtWidth >=22 && shirtWidth <24 && shirtLength >=30 && shirtLength <31 && shirtSleeve >= 8.63 && shirtSleeve < 8.88) {
    console.log("L");
}
else if (shirtWidth >=24 && shirtWidth <26 && shirtLength >=31 && shirtLength <33 && shirtSleeve >= 8.88 && shirtSleeve < 9.63) {
    console.log("XL");
}
else if (shirtWidth >=26 && shirtWidth <28 && shirtLength >=33 && shirtLength <34 && shirtSleeve >= 9.63 && shirtSleeve < 10.13) {
    console.log("2XL");
}
else if ((shirtWidth === 28) && (shirtLength === 34) && (shirtSleeve === 10.13)) {
    console.log("3XL");
}
else {
    console.log("N/A");
}

Quiz : Navigating the Food Chain (3-8)

var eatsPlants = false;
var eatsAnimals = true;
var category = (eatsPlants && eatsAnimals) ? "omnivore" : (eatsAnimals) ? "carnivore" : (eatsPlants) ? "herbivore" : undefined ;
console.log(category);

Quiz : Back to School (3-9)

var education = "no high school diploma";

// set the value of this based on a persons education
var salary;

// your code goes here
switch  (education) {
    case "no high school diploma":
        salary="$25,636/year";
        console.log("In 2015, a person with " +  education + " earned an average of " + salary.toLocaleString("en-US") + ".");
        break;
    case "a high school diploma":
        salary="$35,256/year";
        console.log("In 2015, a person with " +  education + " earned an average of " + salary.toLocaleString("en-US") + ".");
        break;
    case "an Associate's degree":
        salary="$41,496/year";
        console.log("In 2015, a person with " +  education + " earned an average of " + salary.toLocaleString("en-US") + ".");
        break;
    case "a Bachelor's degree":
        salary="$59,124/year";
        console.log("In 2015, a person with " +  education + " earned an average of " + salary.toLocaleString("en-US") + ".");
        break;
    case "a Master's degree":
        salary="$69,732/year";
        console.log("In 2015, a person with " +  education + " earned an average of " + salary.toLocaleString("en-US") + ".");
        break;
    case "a Professional degree":
        salary="$89,960/year";
        console.log("In 2015, a person with " +  education + " earned an average of " + salary.toLocaleString("en-US") + ".");
        break;
    case "a Doctoral degree":
        salary="$84,396/year";
        console.log("In 2015, a person with " +  education + " earned an average of " + salary.toLocaleString("en-US") + ".");
        break;
    default:
        console.log ("nothing");
        break;
}


# Lesson 13 : Loops

Quiz : JuliaJames (4-1)

var x = 1;

while (x <=20) {
    if (x%3 === 0 && x%5 === 0) {
        console.log("JuliaJames");
    }
    else if (x%5 === 0) {
        console.log("James");
    }
    else if (x%3 === 0){
        console.log("Julia");
    }
    else {
        console.log(x);
    }
    x=x+1;
    }
    
Quiz : 99 Bottles of Juice (4-2)

/*
 * Programming Quiz: 99 Bottles of Juice (4-2)
 *
 * Use the following `while` loop to write out the song "99 bottles of juice".
 * Log the your lyrics to the console.
 *
 * Note
 *   - Each line of the lyrics needs to be logged to the same line.
 *   - The pluralization of the word "bottle" changes from "2 bottles" to "1 bottle" to "0 bottles".
 */

var num = 99;

while (num >=0) {
       if  (num > 2) {
           sub=num - 1;
           console.log(num +" bottles of juice on the wall! " + num+ " bottles of juice! Take one down, pass it around... "+ sub + " bottles of juice on the wall!");
       }
        else if (num == 2){
            sub=num - 1;
           console.log(num +" bottles of juice on the wall! " + num+ " bottles of juice! Take one down, pass it around... "+ sub + " bottle of juice on the wall!");
        }
        else if (num === 1) {
            sub=num - 1;
           console.log(num +" bottle of juice on the wall! " + num+ " bottle of juice! Take one down, pass it around... "+ sub + " bottles of juice on the wall!");
        }
           num = num - 1;
    }
    
Quiz : Countdown, Liftoff! (4-3)

/*
 * Programming Quiz: Countdown, Liftoff! (4-3)
 * 
 * Using a while loop, print out the countdown output above.
 */

// your code goes here
var x=60;
while(x>=1){
 console.log("T"+x);
 x=x-1;

for(var x=9; x>=1; x=x-1)

{
    console.log("T-"+x);
}
}

Quiz : Changing the Loop (4-4)

/*
 * Programming Quiz: Changing the Loop (4-4)
 */

// rewrite the while loop as a for loop
var x = 9;
for(var x=9; x>=1; x=x-1)  {
    console.log("hello " + x);

}

Quiz : Fix the Error 1 (4-5)

/*
 * Programming Quiz: Fix the Error 1 (4-5)
 */

// fix the for loop

for (var x=5;x < 10; x++) {
    console.log(x);
}

Quiz : Fix the Error 2 (4-6)

/*
 * Programming Quiz: Fix the Error 2 (4-6)
 */

// fix the for loop
for (var k = 0; k < 200; k++) {
    console.log(k);
}


Quiz : Factorials! (4-7)

/*
 * Programming Quiz: Factorials (4-7)
 */

// your code goes here
var solution=1;
for(var x=1;x<=12;x++)
{
    solution=solution*x
}
console.log(solution);

Quiz : Find my Seat (4-8)

/*
 * Programming Quiz: Find my Seat (4-8)
 * 
 * Write a nested for loop to print out all of the different seat combinations in the theater.
 * The first row-seat combination should be 0-0 
 * The last row-seat combination will be 25-99
 * 
 * Things to note: 
 *  - the row and seat numbers start at 0, not 1
 *  - the highest seat number is 99, not 100
 */

// Write your code here
var row;
var seat;
for (row = 0; row <= 25; row++){
for (seat = 0; seat <= 99; seat++){
console.log(row + "-" + seat);
}
}


# Lesson 14 : Functions

Quiz: Laugh it Off 1 (5-1)

/*
 * Programming Quiz: Laugh it Off 1 (5-1)
 */

// your code goes here
function laugh(){
    return"hahahahahahahahahaha!";
}
console.log(laugh()/* call the laugh function */);

Quiz : Laugh it Off 2 (5-2)

/*
 * Programming Quiz: Laugh it Off 2 (5-2)
 *
 * Write a function called `laugh` with a parameter named `num` that represents the number of "ha"s to return.
 *
 * Note:
 *  - make sure your the final character is an exclamation mark ("!")
 *  - make sure that your function produces the correct results when it is called multiple times
 */
function laugh(num){
    var ha='';
    for(var i=0;i<num;i=i+1){
        ha+="ha";
        string=ha+"!";
    }
    return string;
}

Quiz : Build a Triangle (5-3)

/*
 * Programming Quiz: Build A Triangle (5-3)
 */

// creates a line of * for a given length
function makeLine(length) {
    var line = "";
    for (var j = 1; j <= length; j++) {
        line += "* ";
    }
    return line + "\n";
}
function buildTriangle(num){
    var buildtriangle="";
    for(var i=1;i<=num;i++){
        var make=makeLine(i);
        buildtriangle += make;
    }
    return buildtriangle;
}
console.log(buildTriangle(10));

// your code goes here.  Make sure you call makeLine() in your own code.


// test your code by uncommenting the following line
//console.log(buildTriangle(10));

Quiz : Laugh (5-4)

function laugh(num) {
    var ha='';
    for(var i=0;i<num;i=i+1) {
        ha+="ha";
        string=ha+"!";
    }
    return string;
}

console.log(laugh(3));

Quiz : Cry (5-5)

/*
 * Programming Quiz: Cry (5-5)
 */

// your code goes here
var cry = function makeCry(){
    var cryString = 'boohoo!';
    return cryString
}
console.log(cry());

Quiz: Inline (5-6)

/*
 * Programming Quiz: Inline Functions (5-6)
 */

// don't change this code
function emotions(myString, myFunc) {
    console.log("I am " + myString + ", " + myFunc(2));
}

// your code goes here
// call the emotions function here and pass in an
// inline function expression
emotions("happy", function luagh(num)
{
    var laughString = "";
    for (i=0; i<num;i++)
    {
        laughString +="ha";
    }
    laughString +='!';
    return laughString;
    
});


# Lesson 15 : Arrays

Quiz : UdaciFamily (6-1)

var udaciFamily=["Julia","James","Anum"];
console.log(udaciFamily);

Quiz : Building the Crew (6-2)

/*
 * Programming Quiz: Building the Crew (6-2)
 */

var captain = "Mal";
var second = "Zoe";
var pilot = "Wash";
var companion = "Inara";
var mercenary = "Jayne";
var mechanic = "Kaylee";

var crew=[captain,second,pilot,companion,mercenary,mechanic];
console.log(crew);

Quiz : The Price is Right (6-3)

/*
 * Programming Quiz: The Price is Right (6-3)
 */

var prices = [1.23, 48.11, 90.11, 8.50, 9.99, 1.00, 1.10, 67.00];

prices[0]=2.45;
prices[2]=8.67;
prices[6]=55.55
console.log(prices);

Quiz : Colors of the Rainbow (6-4)

/*
 * Programming Quiz: Colors of the Rainbow (6-4)
 */

var rainbow = ["Red", "Orange", "Blackberry", "Blue"];

// your code goes here
rainbow.splice(2,1,"Yellow","Green");
rainbow.splice(5,0,"Purple");
console.log(rainbow);

Quiz : Quidditch Cup (6-5)

/*
 * Programming Quiz: Quidditch Cup (6-5)
 */

// your code goes here

function hasEnoughPlayers(array) {
  if (array.length >= 7) {
    return true; 
  }else {
    return false; 
  }
}

var team = ["Oliver Wood", "Angelina Johnson", "Katie Bell", "Alicia Spinnet", "George Weasley", "Fred Weasley", "Harry Potter"];
console.log(hasEnoughPlayers(team));


Quiz : Joining the Crew (6-6)

/*
 * Programming Quiz: Joining the Crew (6-6)
 */

var captain = "Mal";
var second = "Zoe";
var pilot = "Wash";
var companion = "Inara";
var mercenary = "Jayne";
var mechanic = "Kaylee";

var crew = [captain, second, pilot, companion, mercenary, mechanic];

var doctor = "Simon";
var sister = "River";
var shepherd = "Book";

// your code goes here
crew.push(doctor,sister,shepherd);
console.log(crew);

Quiz : Checking out the Docs (6-7)

Use the MDN Documentation to determine which of these methods would be best for reversing elements in this array:
var reverseMe = ["h", "e", "l", "l", "o"];
reverse()

What would be the best array method to sort the elements in this array:
var sortMe = [2, 1, 10, 7, 6];
sort()

Consider the following array, removeFirstElement:
var removeFirstElement = ["a", "b", "c"];
Let's say that you want to modify (i.e., mutate) removeFirstElement by removing the first element within it. Which method(s) could you use?
shift()
splice()

What method would be best for changing this array into a string?
var turnMeIntoAString = ["U", "d", "a", "c", "i", "t", "y"];
join()

Quiz : Another Type of Loop (6-8)

/*
 * Programming Quiz: Another Type of Loop (6-8)
 * 
 * Use the existing `test` variable and write a `forEach` loop 
 * that adds 100 to each number that is divisible by 3.
 * 
 * Things to note: 
 *  - use an `if` statement to verify code is divisible by 3
 *  - use `console.log` to print the `test` variable when you're finished looping
 */

var test = [12, 929, 11, 3, 199, 1000, 7, 1, 24, 37, 4, 
            19, 300, 3775, 299, 36, 209, 148, 169, 299, 
            6, 109, 20, 58, 139, 59, 3, 1, 139];

// Write your code here
test.forEach(function(num, index, array){
  if(num % 3 === 0){
    array[index] = num += 100; 
  }

});

console.log(test);

Quiz : I Got Bills (6-9)

/*
 * Programming Quiz: I Got Bills (6-9)
 *
 * Use the .map() method to take the bills array below and create a second array
 * of numbers called totals. The totals array should contains each amount from the
 * bills array but with a 15% tip added. Log the totals array to the console.
 *
 * For example, the first two entries in the totals array would be:
 *
 * [57.76, 21.99, ... ]
 *
 * Things to note:
 *  - each entry in the totals array must be a number
 *  - each number must have an accuracy of two decimal points
 */

var bills = [50.23, 19.12, 34.01,
    100.11, 12.15, 9.90, 29.11, 12.99,
    10.00, 99.22, 102.20, 100.10, 6.77, 2.22
];

var totals= bills.map(function(number,index,array) {
                number+= number*0.15;
               return Number((number.toFixed(2)));
            });

console.log(totals);

Quiz : Nested Numbers (6-10)

/*
 * Programming Quiz: Nested Numbers (6-10)
 *
 *   - The `numbers` variable is an array of arrays.
 *   - Use a nested `for` loop to cycle through `numbers`.
 *   - Convert each even number to the string "even"
 *   - Convert each odd number to the string "odd"
 */

var numbers = [
    [243, 12, 23, 12, 45, 45, 78, 66, 223, 3],
    [34, 2, 1, 553, 23, 4, 66, 23, 4, 55],
    [67, 56, 45, 553, 44, 55, 5, 428, 452, 3],
    [12, 31, 55, 445, 79, 44, 674, 224, 4, 21],
    [4, 2, 3, 52, 13, 51, 44, 1, 67, 5],
    [5, 65, 4, 5, 5, 6, 5, 43, 23, 4424],
    [74, 532, 6, 7, 35, 17, 89, 43, 43, 66],
    [53, 6, 89, 10, 23, 52, 111, 44, 109, 80],
    [67, 6, 53, 537, 2, 168, 16, 2, 1, 8],
    [76, 7, 9, 6, 3, 73, 77, 100, 56, 100]
];

// your code goes here
for (var r=0;r<numbers.length; r++){
    for(var c=0; c<numbers[r].length;c++){
        if(numbers[r][c]%2===0){
            numbers[r][c]="even";
            console.log(numbers[r][c]);
        }
        else{
            numbers[r][c]="odd";
            console.log(numbers[r][c]);
        }
    }
}
console.log(numbers);


# Lesson 16 : Objects

Quiz : Umbrella (7-1)

/*
 * Programming Quiz: Umbrella (7-1)
 */

var umbrella = {
    color: "pink",
    isOpen: true,
    open: function() {
        if (umbrella.isOpen === true) {
            return "The umbrella is already opened!";
        } else {
            umbrella.isOpen = true;
            return "Julia opens the umbrella!";
        }
    },
    // your code goes here
      close: function() {
        if(umbrella.isOpen === false) {
            return "The umbrella is already closed!";
        } else {
            umbrella.isOpen = false;
            return "Julia closed the umbrella";
        }
    }
};

Quiz : Menu Items (7-2)

/*
 * Programming Quiz: Menu Items (7-2)
 */

// your code goes here
var breakfast={
    name:"The Lumberjack",
    price:"9.95",
    ingredients: ["eggs","sausage","toast","hashbrowns","pancakes"]
}

Quiz : Bank Accounts 1 (7-3)

/*
 * Programming Quiz: Bank Accounts 1 (7-3)
 */

var savingsAccount = {
    balance: 1000,
    interestRatePercent: 1,
    deposit: function addMoney(amount) {
        if (amount > 0) {
            savingsAccount.balance += amount;
        }
    },
    withdraw: function removeMoney(amount) {
        var verifyBalance = savingsAccount.balance - amount;
        if (amount > 0 && verifyBalance >= 0) {
            savingsAccount.balance -= amount;
        }
    },
    // your code goes here
   printAccountSummary:function  printAccountSummary() {
        return "Welcome!\n"+ "Your balance is currently $"  + savingsAccount.balance + " and your interest rate is " + savingsAccount.interestRatePercent +"%."

    }
};

console.log(savingsAccount.printAccountSummary());

Quiz : Bank Accounts 2 (7-4)

Which of the following are valid ways to access properties and call methods from the savingsAccount object?
savingsAccount.balance;
savingsAccount[balance];
savingsAccount.withdraw(50);

Quiz : Facebook Friends (7-5)

/*
 * Programming Quiz: Facebook Friends (7-5)
 */

// your code goes here
var facebookProfile = {
    name:"Kshitij Sharma",
    friends:5,
    messages:["hello","good morning"],
    postMessage : function(message) {
        return facebookProfile.messages.push(message);
    } ,
    addFriend : function() {
        return facebookProfile.friends +=1;
    } ,
    removeFriend : function () {
        return facebookProfile.friends -= 1;
    },
    deleteMessage : function(index) {
        var remove= facebookProfile.messages.splice(index,1);
        return remove
    }
};
console.log(facebookProfile.friends);
console.log((facebookProfile.addFriend()));
console.log(facebookProfile.friends);

Quiz : Donuts Revisited (7-6)

/*
 * Programming Quiz: Donuts Revisited (7-6)
 */

var donuts = [
    { type: "Jelly", cost: 1.22 },
    { type: "Chocolate", cost: 2.45 },
    { type: "Cider", cost: 1.59 },
    { type: "Boston Cream", cost: 5.99 }
];

// your code goes here

donuts.forEach(function(elem){
    console.log(elem.type+" donuts cost $"+elem.cost+" each");
})


# Lesson 18 : The Basics : the DOM,$,and Selectors

Quiz : What is jQuery actually

A function
An Object

Quiz : DOM Inspiration

ul

Quiz : Select by Tags

/*
For this quiz, use a jQuery tag selector to grab all of the <li>s on the page!
*/

// Start with this variable! (don't delete it!)
var listElements;

listElements = $('li'); // your code goes here!
console.log(listElements);

Quiz : Select by Classes Quiz

/*
For this quiz, use a jQuery class selector to grab all of the elements of class 'article-item' on the page!
*/

// don't change this variable!
var articleItems;

articleItems =$('.article-item'); // your code goes here!
console.log(articleItems);

Quiz : Select by IDs

/*
For this quiz, use a jQuery class selector to grab all the element with id 'nav' on the page!
*/

// don't change this variable!
var nav;

nav =$('#nav'); // your code goes here!
console.log(nav);

Quiz : Filters Quiz

/*
For this quiz, use articleList and DOM navigation methods to collect articleList's
sibling <h1> (var h1), children (var kids), and parent <div>s (var parents).

You must use articleList to navigate to the element(s)!
*/

// Start with these variable!
var articleList, h1, kids, parents;

articleList = $('.article-list');

h1 = $('.article-list').siblings().css( "background-color", "red" );// Your code goes here!

kids = $('.article-list').children().css( "background-color", "yellow" );// Your code goes here!

parents = $('.article-list').parent().css( "background-color", "blue" );// Your code goes here!

console.log(articleList);
console.log(h1);
console.log(kids);
console.log(parents);


# Lesson 19 : The Tricks : Dom Manipulation

Quiz : you.toggleClass() Quiz

/*
For this quiz, use a jQuery class selector and featuredArticle variable to toggle the 'featured' class!
*/

// don't change this variable!
var featuredArticle;

featuredArticle = $( "li.article-item" ).toggleClass("featured");
// your code starts here!
console.log(featuredArticle);

Quiz : Toggling Classes Quiz

/*
For this quiz, remove the class 'featured' from Article #2 and add it to Article #3!

You must use jQuery's toggleClass method!
*/

// don't change these variable!
var article2, article3;

// your code goes here!

article2=$("li.article-item").toggleClass("featured");
article3=$("li.Ariticle3").next().text("article-item featured");

console.log(article2);
console.log(article3);

Quiz : Changing Attributes Quiz

/*
For this quiz, set the href of the <a> in the first nav item to "#1".

You must use jQuery's attr() method!
*/

// Start with this variable!
var navList, firstItem, link;

navList = $('.nav-list'); // your code goes here!
firstItem = navList.children().first();
link = firstItem.find('a');
link.attr('href', '#1');

Quiz : Modifying CSS Quiz

/*
For this quiz, change the font-size of all the article-items to 20px!

You must use jQuery's css() method!
*/

// Start with this variable!
var articleItems;

articleItems = $('.article-item');// your code goes here!
articleItems.css('font-size', '20px');

Quiz : Collecting Values Quiz

/*
For this quiz, use jQuery's val method to make live changes to the 'Cool Articles' <h1>!

The starter code below creates an event listener that will run any time the input changes.
For more on events, check the instructor notes.
*/


$('#input').on('change', function() {
    var val, h1;
    val = $('#input').val(); // Your code goes here!
    h1 = $('.articles').children('h1');
    h1.text(val);
});

Quiz : Removing DOM Elements

/*
For this quiz, remove the <ul> from the first article item!

You must use jQuery's remove() method.
*/

// Start with this variable!
var articleItems, ul;

articleItems = $('.article-item'); // your code goes here!
ul = articleItems.find('ul');
ul.remove();

Quiz : Build a DOM (Family) Tree!

/*
For this quiz, you'll need to add to the DOM tree that already exists.

'#family2' should be a sibling of and come after '#family1'. '#bruce' should be the only immediate child
of '#family2'. '#bruce' should have two <div>s as children, '#madison' and '#hunter'.
*/
// Your code goes here!
var family1, family2, bruce, madison, hunter;
family1 = $('#family1');
family2 = $('<div id="family2"><h1>Family 2</h1></div>');
bruce = $('<div id="bruce"><h2>Bruce</h2></div>');
madison = $('<div id="madison"><h3>Madison</h2></div>');
hunter = $('<div id="hunter"><h3>Hunter</h2></div>');
family2.insertAfter(family1);
family2.append(bruce);
bruce.append(madison);
bruce.append(hunter);

Quiz : Iterating with Each Quiz

/*
For this quiz, use jQuery's each() method to iterate through the <p>s,
calculate the length of each one, and add each length to the end of each <p>.

Also, make sure you don't change the text inside each <p> except to add the length, otherwise your
length numbers won't be correct!
*/

// Your code goes here!
function numberAdder(){
    var text, number;
    text =$(this).text();
    number = text.length;
    $(this).text(text+" "+number);
}
$('p').each(numberAdder);

Quiz : Why use jQuery? 

Fast Selection
Cross-Browser Compatibility
Easy DOM Manipulation
It makes Cameron Happy


# Lesson 20 : Event Listeners With JQuery 

Quiz : monitorEvents Quiz 

mouseout
mouseover
mousemove

Quiz : jQuery Event Listener Order Quiz

//JQuery Event Listener Order
$("target element").on("type of event", "function with actions");

Quiz : jQuery Event Listener

/*
For this quiz, use jQuery to set up an event listener. Your event listener must:
    1. listen to the #my-button element
    2. listen for a `click` event
    3. perform the following actions when the button is clicked:
        a. remove the #my-button element from the DOM
        b. add the `success` class to the body
*/
$("#my-button").on("click", function(){
    
    // remove button with "my-button" id
    $(this).remove();
    
    // add "success" class to the body
    $("body").addClass("success");
});

Quiz : Convenience Methods Quiz

target.hover(...) --> target.on('hover',function(){....});