├── coding-exercise-01
    └── solution
    │   └── index.html
├── coding-exercise-02
    └── solution
    │   └── index.html
├── coding-exercise-03
    └── solution
    │   └── index.html
├── coding-exercise-04
    └── solution
    │   └── index.html
├── coding-exercise-05
    └── solution
    │   └── index.html
├── coding-exercise-06
    └── solution
    │   └── index.html
├── coding-exercise-07
    └── solution
    │   ├── index.html
    │   └── styles.css
├── coding-exercise-08
    └── solution
    │   ├── app.css
    │   └── index.html
├── coding-exercise-09
    └── solution
    │   ├── app.css
    │   └── index.html
├── coding-exercise-10
    └── solution
    │   ├── app.css
    │   └── index.html
├── coding-exercise-11
    └── solution
    │   ├── NO_TOUCHING.css
    │   ├── app.css
    │   └── index.html
├── coding-exercise-12
    └── solution
    │   ├── app.css
    │   └── index.html
├── coding-exercise-13
    └── solution
    │   └── index.html
├── coding-exercise-14
    └── solution
    │   └── index.html
├── coding-exercise-15
    └── solution
    │   └── index.js
├── coding-exercise-16
    └── solution
    │   └── index.js
├── coding-exercise-17
    └── solution
    │   └── index.js
├── coding-exercise-18
    └── solution
    │   └── index.js
├── coding-exercise-19
    └── solution
    │   └── index.js
├── coding-exercise-20
    └── solution
    │   └── index.js
├── coding-exercise-21
    └── solution
    │   └── index.js
├── coding-exercise-22
    └── solution
    │   └── index.js
├── coding-exercise-23
    └── solution
    │   └── index.js
├── coding-exercise-24
    └── solution
    │   └── index.js
├── coding-exercise-25
    └── solution
    │   └── index.js
├── coding-exercise-26
    └── solution
    │   └── index.js
├── coding-exercise-27
    └── solution
    │   └── index.js
├── coding-exercise-28
    └── solution
    │   └── index.js
├── coding-exercise-29
    └── solution
    │   └── index.js
├── coding-exercise-30
    └── solution
    │   └── index.js
├── coding-exercise-31
    └── solution
    │   └── index.js
├── coding-exercise-32
    └── solution
    │   └── index.js
├── coding-exercise-33
    └── solution
    │   └── index.js
├── coding-exercise-34
    └── solution
    │   └── index.js
├── coding-exercise-35
    └── solution
    │   └── index.js
├── coding-exercise-36
    ├── solution-2
    │   └── index.js
    └── solution
    │   └── index.js
├── coding-exercise-37
    └── solution
    │   └── index.js
├── coding-exercise-38
    └── solution
    │   └── index.js
├── coding-exercise-39
    └── solution
    │   └── index.js
├── coding-exercise-40
    ├── solution-2
    │   └── index.js
    ├── solution-3
    │   └── index.js
    └── solution
    │   └── index.js
├── coding-exercise-41
    ├── solution-2
    │   └── index.js
    └── solution
    │   └── index.js
├── coding-exercise-42
    ├── solution-2
    │   └── index.js
    └── solution
    │   └── index.js
├── coding-exercise-43
    ├── solution-2
    │   └── index.js
    ├── solution-3
    │   └── index.js
    ├── solution-4
    │   └── index.js
    ├── solution-5
    │   └── index.js
    └── solution
    │   └── index.js
├── coding-exercise-44
    └── solution
    │   └── index.js
├── coding-exercise-45
    └── solution
    │   └── index.js
├── coding-exercise-46
    └── solution
    │   └── index.js
├── coding-exercise-47
    └── solution
    │   └── index.js
├── coding-exercise-48
    └── solution
    │   └── index.js
├── coding-exercise-49
    └── solution
    │   └── index.js
├── coding-exercise-50
    └── solution
    │   └── index.js
├── coding-exercise-51
    └── solution
    │   ├── app.js
    │   └── index.html
├── coding-exercise-52
    └── solution
    │   ├── app.css
    │   ├── app.js
    │   └── index.html
├── coding-exercise-53
    └── solution
    │   ├── app.js
    │   └── index.html
├── coding-exercise-54
    └── solution
    │   ├── app.js
    │   └── index.html
├── coding-exercise-55
    └── solution
    │   ├── app.js
    │   └── index.html
├── coding-exercise-56
    └── solution
    │   ├── app.js
    │   └── index.html
├── coding-exercise-57
    ├── solution-2
    │   ├── app.css
    │   ├── app.js
    │   └── index.html
    └── solution
    │   ├── app.css
    │   ├── app.js
    │   └── index.html
├── coding-exercise-58
    └── solution
    │   ├── app.js
    │   └── index.html
├── coding-exercise-59
    └── solution
    │   └── index.html
├── coding-exercise-60
    └── solution
    │   ├── app.js
    │   └── index.html
├── coding-exercise-61
    ├── solution-2
    │   ├── app.js
    │   └── index.html
    └── solution
    │   ├── app.js
    │   └── index.html
├── coding-exercise-62
    ├── solution-2
    │   ├── app.js
    │   └── index.html
    ├── solution-3
    │   ├── app.js
    │   └── index.html
    └── solution
    │   ├── app.js
    │   └── index.html
├── quiz-01
    └── quiz-01.md
├── quiz-02
    └── quiz-02.md
├── quiz-03
    └── quiz-03.md
├── quiz-04
    └── quiz-04.md
├── quiz-05
    └── quiz-05.md
├── quiz-06
    └── quiz-06.md
├── quiz-07
    └── quiz-07.md
└── readme.md


/coding-exercise-01/solution/index.html:
--------------------------------------------------------------------------------
 1 | <h1>Pangolin</h1>
 2 | <h2>Intro</h2>
 3 | <p>
 4 |     Pangolins, sometimes known as scaly anteaters, are mammals of the order Pholidota (from Ancient Greek φολῐ́ς, "horny
 5 |     scale"). The one extant family, Manidae, has three genera: Manis, Phataginus and Smutsia. Manis comprises the four
 6 |     species found in Asia, while Phataginus and Smutsia include two species each, all found in Sub-Saharan Africa. These
 7 |     species range in size from 30 to 100 cm (12 to 39 in). A number of extinct pangolin species are also known.
 8 | </p>
 9 | <h2>Description</h2>
10 | <p>
11 |     Pangolins have large, protective keratin scales covering their skin; they are the only known mammals with this
12 |     feature. They live in hollow trees or burrows, depending on the species. Pangolins are nocturnal, and their diet
13 |     consists of mainly ants and termites, which they capture using their long tongues. They tend to be solitary animals,
14 |     meeting only to mate and produce a litter of one to three offspring, which they raise for about two years.</p>
15 | 
16 | <h2>Poaching</h2>
17 | <p>
18 |     Pangolins are threatened by poaching (for their meat and scales, which are used in Chinese traditional medicine) and
19 |     heavy deforestation of their natural habitats, and are the most trafficked mammals in the world.As of January 2020,
20 |     of the eight species of pangolin, three (Manis culionensis, M. pentadactyla and M. javanica) are listed as
21 |     critically endangered, three (Phataginus tricuspis, Manis crassicaudata and Smutsia gigantea) are listed as
22 |     endangered and two (Phataginus tetradactyla and Smutsia temminckii) are listed as vulnerable on the Red List of
23 |     Threatened Species of the International Union for Conservation of Nature.</p>


--------------------------------------------------------------------------------
/coding-exercise-02/solution/index.html:
--------------------------------------------------------------------------------
 1 | <h1>Movies</h1>
 2 | <h2>My Top 3 Movies:</h2>
 3 | <ol>
 4 |     <li>Amadeus</li>
 5 |     <li>Stand By Me</li>
 6 |     <li>Amelie</li>
 7 | </ol>
 8 | 
 9 | <h2>Other Good Movies:</h2>
10 | <ul>
11 |     <li>Alien</li>
12 |     <li>Parasite</li>
13 |     <li>Annie Hall</li>
14 | </ul>


--------------------------------------------------------------------------------
/coding-exercise-03/solution/index.html:
--------------------------------------------------------------------------------
1 | <h1>Wolves <a href="https://en.wikipedia.org/wiki/Wolf">(Read More)</a></h1>
2 | <img src="https://upload.wikimedia.org/wikipedia/commons/5/5f/Kolm%C3%A5rden_Wolf.jpg" alt="Wolf Licking Lips">


--------------------------------------------------------------------------------
/coding-exercise-04/solution/index.html:
--------------------------------------------------------------------------------
1 | <h1>&#9731;Snowman Productions <sup>&#174;</sup></h1>


--------------------------------------------------------------------------------
/coding-exercise-05/solution/index.html:
--------------------------------------------------------------------------------
 1 | <table>
 2 |     <thead>
 3 |     <tr>
 4 |         <th>Subscription</th>
 5 |         <th>Price</th>
 6 |         <th>Support</th>
 7 |     </tr>
 8 |     </thead>
 9 |     <tbody>
10 |     <tr>
11 |         <td>Free</td>
12 |         <td>Free</td>
13 |         <td>N/A</td>
14 |     </tr>
15 |     <tr>
16 |         <td>Personal</td>
17 |         <td>$9.99</td>
18 |         <td>Weekdays</td>
19 |     </tr>
20 |     <tr>
21 |         <td>Business</td>
22 |         <td>49.99</td>
23 |         <td>24/7</td>
24 |     </tr>
25 |     </tbody>
26 | </table>


--------------------------------------------------------------------------------
/coding-exercise-06/solution/index.html:
--------------------------------------------------------------------------------
1 | <form>
2 |     <label for="username">Username</label>
3 |     <input type="text" placeholder="username" id="username">
4 |     <label for="password">Password</label>
5 |     <input type="password" placeholder="password" id="password">
6 |     <button>Register</button>
7 | </form>


--------------------------------------------------------------------------------
/coding-exercise-07/solution/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <title>Hey!</title>
 5 |     <link rel="stylesheet" href="styles.css">
 6 | </head>
 7 | <body>
 8 | <h1>Please make me green</h1>
 9 | <h2>This is so ugly</h2>
10 | <p>Kogi enamel pin polaroid, meditation hammock fashion axe bespoke viral mixtape XOXO tote bag artisan bushwick copper mug poutine. Yuccie humblebrag shabby chic tumeric raclette cronut migas blue bottle. Brooklyn stumptown offal hell of, church-key try-hard hot chicken truffaut. Hell of pok pok microdosing cold-pressed XOXO vice prism yuccie, photo booth actually enamel pin deep v semiotics helvetica. Mixtape four dollar toast butcher yuccie heirloom.</p>
11 | <button>Sign Up</button>
12 | </body>
13 | </html>


--------------------------------------------------------------------------------
/coding-exercise-07/solution/styles.css:
--------------------------------------------------------------------------------
 1 | h1 {
 2 |     color: green;
 3 | }
 4 | 
 5 | h2 {
 6 |     color: magenta;
 7 | }
 8 | 
 9 | p {
10 |     background-color: black;
11 |     color: white;
12 | }
13 | 
14 | button {
15 |     color: red;
16 |     background-color: pink;
17 | }


--------------------------------------------------------------------------------
/coding-exercise-08/solution/app.css:
--------------------------------------------------------------------------------
1 | h1 {
2 |     text-transform: uppercase;
3 |     font-family: monospace;
4 |     font-weight: 100;
5 |     font-size: 40px;
6 |     letter-spacing: 20px;
7 |     text-align: center;
8 |     text-decoration: underline wavy plum;
9 | }


--------------------------------------------------------------------------------
/coding-exercise-08/solution/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Hipster Logo</title>
 5 |     <link rel="stylesheet" href="app.css">
 6 | </head>
 7 | <body>
 8 | <h1>Purple Grain</h1>
 9 | </body>
10 | </html>
11 | 
12 | 


--------------------------------------------------------------------------------
/coding-exercise-09/solution/app.css:
--------------------------------------------------------------------------------
 1 | /* Make all LI's blue */
 2 | li {
 3 |     color: blue;
 4 | }
 5 | 
 6 | /* Make everything with the class of 'done' grey*/
 7 | .done {
 8 |     color: grey;
 9 | }
10 | 
11 | /* Make the element with the id of 'clear' have a red BG and white text */
12 | #clear {
13 |     background-color: red;
14 |     color: white;
15 | }


--------------------------------------------------------------------------------
/coding-exercise-09/solution/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Basic Selectors Practice</title>
 5 |     <link rel="stylesheet" href="app.css">
 6 | </head>
 7 | <body>
 8 | <h1>Todos</h1>
 9 | <ul>
10 |     <li class="done">Walk Chickens</li>
11 |     <li>Clean Out Coop</li>
12 |     <li class="done">Collect Chicken Eggs</li>
13 |     <li>Incubate Chicken Eggs</li>
14 |     <li>Hatch New Chickens!</li>
15 | </ul>
16 | <button id="clear">Clear List</button>
17 | <button>Add Todo</button>
18 | </body>
19 | </html>


--------------------------------------------------------------------------------
/coding-exercise-10/solution/app.css:
--------------------------------------------------------------------------------
1 | header a {
2 |     font-size: 30px;
3 |     color: teal;
4 | }
5 | 
6 | #dislikes a {
7 |     font-weight: bold;
8 |     color: red;
9 | }


--------------------------------------------------------------------------------
/coding-exercise-10/solution/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Descendant Combinator Practice</title>
 5 |     <link rel="stylesheet" href="app.css">
 6 | </head>
 7 | <body>
 8 | <header>
 9 |     <a href="/home">Home</a>
10 |     <a href="/contact">Contact</a>
11 |     <a href="/about">About</a>
12 | </header>
13 | 
14 | <p>
15 |     I like to eat <a href="/popcorn">popcorn</a> and <a href="/donuts">donuts</a>
16 | </p>
17 | 
18 | <p id="dislikes">
19 |     I hate eating <a href="/pickles">pickles</a> and <a href="/beets">beets</a>
20 | </p>
21 | </body>
22 | </html>


--------------------------------------------------------------------------------
/coding-exercise-11/solution/NO_TOUCHING.css:
--------------------------------------------------------------------------------
 1 | /* DO NOT TOUCH THIS FILE!!!  */
 2 | .square {
 3 |     width: 100px;
 4 |     height: 100px;
 5 |     box-sizing: border-box;
 6 |     border: 1px solid black;
 7 | }
 8 | 
 9 | /* DO NOT TOUCH THIS FILE!!!  */
10 | /* THIS CODE WILL MAKE SENSE ONCE WE COVER FLEXBOX!  */
11 | #board {
12 |     display: flex;
13 |     margin: 0 auto;
14 |     width: 500px;
15 |     flex-wrap: wrap;
16 | }
17 | 
18 | /* DO NOT TOUCH THIS FILE!!!  */


--------------------------------------------------------------------------------
/coding-exercise-11/solution/app.css:
--------------------------------------------------------------------------------
 1 | .square:nth-child(odd) {
 2 |     background-color: red;
 3 | }
 4 | 
 5 | .square:nth-child(even) {
 6 |     background-color: black;
 7 | }
 8 | 
 9 | /*Another approach:*/
10 | /*
11 | .square:nth-of-type(2n) {
12 |     background-color: black;
13 | }
14 | 
15 | .square:nth-of-type(2n+1) {
16 |     background-color: red;
17 | }
18 | */


--------------------------------------------------------------------------------
/coding-exercise-11/solution/index.html:
--------------------------------------------------------------------------------
 1 | <!--DON'T TOUCH ANYTHING IN THIS FILE!-->
 2 | <!doctype html>
 3 | <html>
 4 | <head>
 5 |     <title>Checkerboard</title>
 6 |     <link rel="stylesheet" href="NO_TOUCHING.css">
 7 |     <link rel="stylesheet" href="app.css">
 8 | </head>
 9 | <body>
10 | <!--DON'T TOUCH ANYTHING IN THIS FILE!-->
11 | <div id="board">
12 |     <div class="square"></div>
13 |     <div class="square"></div>
14 |     <div class="square"></div>
15 |     <div class="square"></div>
16 |     <div class="square"></div>
17 |     <div class="square"></div>
18 |     <div class="square"></div>
19 |     <div class="square"></div>
20 |     <div class="square"></div>
21 |     <div class="square"></div>
22 |     <div class="square"></div>
23 |     <div class="square"></div>
24 |     <div class="square"></div>
25 |     <div class="square"></div>
26 |     <div class="square"></div>
27 |     <div class="square"></div>
28 |     <div class="square"></div>
29 |     <div class="square"></div>
30 |     <div class="square"></div>
31 |     <div class="square"></div>
32 |     <div class="square"></div>
33 |     <div class="square"></div>
34 |     <div class="square"></div>
35 |     <div class="square"></div>
36 |     <div class="square"></div>
37 | </div>
38 | </body>
39 | </html>


--------------------------------------------------------------------------------
/coding-exercise-12/solution/app.css:
--------------------------------------------------------------------------------
 1 | .card {
 2 |     width: 210px;
 3 |     border: 1px solid grey;
 4 |     border-radius: 5px;
 5 |     text-align: center;
 6 | }
 7 | 
 8 | img {
 9 |     width: 200px;
10 |     border: 5px solid rgb(236, 183, 191);
11 |     border-radius: 50%;
12 | }


--------------------------------------------------------------------------------
/coding-exercise-12/solution/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Box Model Practice</title>
 5 |     <link rel="stylesheet" href="app.css">
 6 | </head>
 7 | <body>
 8 | <div class="card">
 9 |     <img alt="" src="https://assets.codepen.io/123865/dog.png">
10 |     <h1>I Am Dog</h1>
11 | </div>
12 | </body>
13 | </html>


--------------------------------------------------------------------------------
/coding-exercise-13/solution/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Flexbox Exercise</title>
 5 |     <!--INCLUDING BOOTSTRAP-->
 6 |     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
 7 |           integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
 8 | </head>
 9 | <body>
10 | <section class="container">
11 |     <h1 class="text-white bg-dark text-center">Bad News</h1>
12 |     <div class="alert alert-warning" role="alert">
13 |         You are going to die one day! It sucks, but it's normal :(
14 |     </div>
15 |     <button class="btn btn-success">Come To Terms With</button>
16 |     <button class="btn btn-danger">Continue To Deny</button>
17 | </section>
18 | </body>
19 | </html>


--------------------------------------------------------------------------------
/coding-exercise-14/solution/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Bootstrap Grid Exercise</title>
 5 |     <!--INCLUDING BOOTSTRAP-->
 6 |     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
 7 |           integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
 8 | </head>
 9 | <body>
10 | <div class="container">
11 |     <div class="row">
12 |         <div class="col-4 bg-danger">
13 |             One Third
14 |         </div>
15 |         <div class="col-8 bg-info">
16 |             Two Thirds
17 |         </div>
18 |     </div>
19 |     <div class="row">
20 |         <div class="col-3 bg-warning">
21 |             One Quarter
22 |         </div>
23 |         <div class="col-6 bg-primary">
24 |             One Half
25 |         </div>
26 |         <div class="col-3 bg-warning">
27 |             One Quarter
28 |         </div>
29 |     </div>
30 | </div>
31 | </body>
32 | </html>


--------------------------------------------------------------------------------
/coding-exercise-15/solution/index.js:
--------------------------------------------------------------------------------
1 | let myLuckyNumber = 37;
2 | let octopusLimbs = 8;


--------------------------------------------------------------------------------
/coding-exercise-16/solution/index.js:
--------------------------------------------------------------------------------
1 | const boilingPointC = 100;
2 | const boilingPointF = 212;


--------------------------------------------------------------------------------
/coding-exercise-17/solution/index.js:
--------------------------------------------------------------------------------
1 | const bestColor = "purple";
2 | const quote = 'You had me at "hello"';


--------------------------------------------------------------------------------
/coding-exercise-18/solution/index.js:
--------------------------------------------------------------------------------
1 | // DON'T TOUCH THIS LINE!
2 | const message = "    TASTE THE RAINBOW!  "; // DON'T CHANGE THIS LINE PLEASE!
3 | 
4 | // YOUR CODE BELOW THIS LINE:
5 | const whisper = message.toLowerCase().trim();


--------------------------------------------------------------------------------
/coding-exercise-19/solution/index.js:
--------------------------------------------------------------------------------
1 | // DON'T TOUCH THIS LINE! (please)
2 | const word = 'skateboard';
3 | 
4 | // YOUR CODE BELOW THIS LINE:
5 | const facialHair = word.slice(5).replace('o', 'e');


--------------------------------------------------------------------------------
/coding-exercise-20/solution/index.js:
--------------------------------------------------------------------------------
1 | // NO TOUCHING! (please)
2 | const die1 = Math.floor(Math.random() * 6) + 1; // random number from 1-6
3 | const die2 = Math.floor(Math.random() * 6) + 1; // random number from 1-6
4 | 
5 | // YOUR CODE BELOW THIS LINE:
6 | const roll = `You rolled a ${die1} and a ${die2}. They sum to ${die1 + die2}`;


--------------------------------------------------------------------------------
/coding-exercise-21/solution/index.js:
--------------------------------------------------------------------------------
1 | function isEven(num) {
2 |   if (num % 2 === 0) {
3 |     console.log('even');
4 |   }
5 | }


--------------------------------------------------------------------------------
/coding-exercise-22/solution/index.js:
--------------------------------------------------------------------------------
 1 | function getColor(phrase) {
 2 |   if (phrase === 'stop') {
 3 |     console.log('red');
 4 |   } else if (phrase === 'slow') {
 5 |     console.log('yellow');
 6 |   } else if (phrase === 'go') {
 7 |     console.log('green');
 8 |   } else {
 9 |     console.log('purple');
10 |   }
11 | }


--------------------------------------------------------------------------------
/coding-exercise-23/solution/index.js:
--------------------------------------------------------------------------------
 1 | // Change the value of num, so that "YOU GOT ME!" prints out
 2 | const num = 102;
 3 | 
 4 | // DO NOT TOUCH! (please)
 5 | if (num <= 100) {
 6 |   if (num >= 50) {
 7 |     console.log("HEY!");
 8 |   }
 9 | } else {
10 |   if (num < 103) {
11 |     if (num % 2 === 0) {
12 |       console.log("YOU GOT ME!");
13 |     }
14 |   }
15 | }


--------------------------------------------------------------------------------
/coding-exercise-24/solution/index.js:
--------------------------------------------------------------------------------
1 | const mystery = 'Panda7';
2 | 
3 | // LEAVE THIS CODE ALONE! (pretty please)
4 | if(mystery[0] === 'P' && mystery.length > 5 && mystery.indexOf('7') !== -1){
5 |   console.log("YOU GOT IT!!!");
6 | }


--------------------------------------------------------------------------------
/coding-exercise-25/solution/index.js:
--------------------------------------------------------------------------------
1 | // Define lottoNumbers below:
2 | const lottoNumbers = [45, 12, 23, 20, 9, 6];


--------------------------------------------------------------------------------
/coding-exercise-26/solution/index.js:
--------------------------------------------------------------------------------
1 | const leaderboard = ['Harry', 'Lua', 'Hermione', 'Bellatrix']; // DON'T TOUCH THIS LINE!
2 | 
3 | // YOUR CODE BELOW HERE:
4 | leaderboard[1] = "Luna";
5 | leaderboard[3] = "Draco";


--------------------------------------------------------------------------------
/coding-exercise-27/solution/index.js:
--------------------------------------------------------------------------------
1 | const planets = ['The Moon', 'Venus', 'Earth', 'Mars', 'Jupiter']; // DO NOT TOUCH THIS LINE!
2 | 
3 | // YOUR CODE GOES BELOW THIS LINE:
4 | planets.shift();
5 | planets.push('Saturn');
6 | planets.unshift('Mercury');


--------------------------------------------------------------------------------
/coding-exercise-28/solution/index.js:
--------------------------------------------------------------------------------
 1 | // DO NOT TOUCH!!! (please)
 2 | const airplaneSeats = [
 3 |   ['Ruth', 'Anthony', 'Stevie'],
 4 |   ['Amelia', 'Pedro', 'Maya'],
 5 |   ['Xavier', 'Ananya', 'Luis'],
 6 |   ['Luke', null, 'Deniz'],
 7 |   ['Rin', 'Sakura', 'Francisco']
 8 | ]
 9 | 
10 | // YOUR CODE GOES BELOW THIS LINE:
11 | airplaneSeats[3][1] = 'Hugo';


--------------------------------------------------------------------------------
/coding-exercise-29/solution/index.js:
--------------------------------------------------------------------------------
1 | const product = {
2 |   name: 'Gummy Bears',
3 |   inStock: true,
4 |   price: 1.99,
5 |   flavors: ['cherry', 'orange', 'lemon']
6 | };


--------------------------------------------------------------------------------
/coding-exercise-30/solution/index.js:
--------------------------------------------------------------------------------
 1 | // PLEASE DON'T TOUCH THIS LINE!
 2 | const restaurant = {
 3 |   name: 'Ichiran Ramen',
 4 |   address: `${Math.floor(Math.random() * 100) + 1} Johnson Ave`,
 5 |   city: 'Brooklyn',
 6 |   state: 'NY',
 7 |   zipcode: '11206',
 8 | };
 9 | 
10 | // YOUR CODE GOES DOWN HERE:
11 | const fullAddress = `${restaurant.address}, ${restaurant.city}, ${restaurant.state} ${restaurant.zipcode}`;
12 | 
13 | 
14 | // Alternative approaches:
15 | // #1:
16 | const fullAddress = `${restaurant["address"]}, ${restaurant["city"]}, ${restaurant["state"]} ${restaurant["zipcode"]}`;
17 | // #2:
18 | const fullAddress = restaurant.address + ", " + restaurant.city + ", " + restaurant.state + " " + restaurant.zipcode;
19 | // #3:
20 | const fullAddress = restaurant["address"] + ", " + restaurant["city"] + ", " + restaurant["state"] + " " + restaurant["zipcode"];


--------------------------------------------------------------------------------
/coding-exercise-31/solution/index.js:
--------------------------------------------------------------------------------
1 | // Print out "Da ba dee da ba daa" 6 times, using a for loop
2 | for (let i = 0; i < 6; i++) {
3 |   console.log('Da ba dee da ba daa');
4 | }


--------------------------------------------------------------------------------
/coding-exercise-32/solution/index.js:
--------------------------------------------------------------------------------
 1 | // Write a loop that prints:
 2 | // 25
 3 | // 20
 4 | // 15
 5 | // 10
 6 | // 5
 7 | // 0
 8 | 
 9 | for (let i = 25; i >= 0; i -= 5) {
10 |   console.log(i);
11 | }


--------------------------------------------------------------------------------
/coding-exercise-33/solution/index.js:
--------------------------------------------------------------------------------
1 | const people = ["Scooby", "Velma", "Daphne", "Shaggy", "Fred"]; // DON'T TOUCH THIS LINE!
2 | 
3 | // WRITE YOUR LOOP BELOW THIS LINE:
4 | for (let i = 0; i < people.length; i++) {
5 |   console.log(people[i].toUpperCase());
6 | }


--------------------------------------------------------------------------------
/coding-exercise-34/solution/index.js:
--------------------------------------------------------------------------------
1 | const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9]; // DON'T CHANGE THIS LINE PLEASE!
2 | 
3 | // WRITE YOUR LOOP BELOW THIS LINE:
4 | for (let num of numbers) {
5 |   console.log(num * num);
6 | }


--------------------------------------------------------------------------------
/coding-exercise-35/solution/index.js:
--------------------------------------------------------------------------------
1 | function printHeart() {
2 |   console.log('<3');
3 | }
4 | 
5 | printHeart();


--------------------------------------------------------------------------------
/coding-exercise-36/solution-2/index.js:
--------------------------------------------------------------------------------
1 | function rant(message) {
2 |   for (let i = 0; i < 3; i++) {
3 |     console.log(message.toUpperCase());
4 |   }
5 | }


--------------------------------------------------------------------------------
/coding-exercise-36/solution/index.js:
--------------------------------------------------------------------------------
 1 | function rant(message) {
 2 |   console.log(message.toUpperCase());
 3 |   console.log(message.toUpperCase());
 4 |   console.log(message.toUpperCase());
 5 | }
 6 | 
 7 | // Solution with a for loop:
 8 | function rant(message) {
 9 |   for (let i = 0; i < 3; i++) {
10 |     console.log(message.toUpperCase());
11 |   }
12 | }


--------------------------------------------------------------------------------
/coding-exercise-37/solution/index.js:
--------------------------------------------------------------------------------
1 | function isSnakeEyes(die1, die2) {
2 |   if (die1 === 1 && die2 === 1) {
3 |     console.log('Snake Eyes!');
4 |   } else {
5 |     console.log('Not Snake Eyes!');
6 |   }
7 | }


--------------------------------------------------------------------------------
/coding-exercise-38/solution/index.js:
--------------------------------------------------------------------------------
1 | function multiply(num1, num2) {
2 |   return num1 * num2;
3 | }


--------------------------------------------------------------------------------
/coding-exercise-39/solution/index.js:
--------------------------------------------------------------------------------
 1 | function isShortsWeather(temperature) {
 2 |   return temperature >= 75;
 3 | }
 4 | 
 5 | // Other approaches:
 6 | 
 7 | // Using an explicit if/else
 8 | function isShortsWeather(temperature) {
 9 |   if (temperature >= 75) {
10 |     return true;
11 |   } else {
12 |     return false;
13 |   }
14 | }
15 | 
16 | // Using the JavaScript ternary operator syntax
17 | function isShortsWeather(temperature) {
18 |   return temperature >= 75 ? true : false;
19 | }


--------------------------------------------------------------------------------
/coding-exercise-40/solution-2/index.js:
--------------------------------------------------------------------------------
 1 | function lastElement(arr) {
 2 |   if (!arr.length) {
 3 |     return null;
 4 |   }
 5 |   return arr[arr.length - 1];
 6 | }
 7 | 
 8 | // Or we can write it like this:
 9 | function lastElement(arr) {
10 |   if (!arr.length) return null;
11 |   return arr[arr.length - 1];
12 | }
13 | 
14 | // Another approach:
15 | function lastElement(arr) {
16 |   if (arr.length > 0) {
17 |     return arr[arr.length - 1];
18 |   }
19 |   return null;
20 | }
21 | 
22 | function lastElement(arr) {
23 |   if (arr.length > 0) return arr[arr.length - 1];
24 |   return null;
25 | }


--------------------------------------------------------------------------------
/coding-exercise-40/solution-3/index.js:
--------------------------------------------------------------------------------
 1 | // Using the JavaScript ternary operator syntax
 2 | function lastElement(arr) {
 3 |   return arr.length > 0 ? arr[arr.length - 1] : null;
 4 | }
 5 | 
 6 | // Another approach:
 7 | // arr.length will be 'truthy' if it's not 0, so we can write this:
 8 | function lastElement(arr) {
 9 |   return arr.length ? arr[arr.length - 1] : null;
10 | }


--------------------------------------------------------------------------------
/coding-exercise-40/solution/index.js:
--------------------------------------------------------------------------------
1 | function lastElement(arr) {
2 |   if (arr.length === 0) {
3 |     return null;
4 |   } else {
5 |     return arr[arr.length - 1];
6 |   }
7 | }


--------------------------------------------------------------------------------
/coding-exercise-41/solution-2/index.js:
--------------------------------------------------------------------------------
1 | // A bit more explicit solution:
2 | function capitalize(word) {
3 |   const firstLetterCapitalized = word[0].toUpperCase();
4 |   const restOfTheString = word.slice(1);
5 |   return firstLetterCapitalized + restOfTheString;
6 | }


--------------------------------------------------------------------------------
/coding-exercise-41/solution/index.js:
--------------------------------------------------------------------------------
1 | function capitalize(word) {
2 |   return word[0].toUpperCase() + word.slice(1);
3 | }


--------------------------------------------------------------------------------
/coding-exercise-42/solution-2/index.js:
--------------------------------------------------------------------------------
1 | function sumArray(nums) {
2 |   let total = 0;
3 |   for (let i = 0; i < nums.length; i++) {
4 |     total += nums[i];
5 |   }
6 |   return total;
7 | }


--------------------------------------------------------------------------------
/coding-exercise-42/solution/index.js:
--------------------------------------------------------------------------------
1 | function sumArray(nums) {
2 |   let total = 0;
3 |   for (let num of nums) {
4 |     total += num;
5 |   }
6 |   return total;
7 | }


--------------------------------------------------------------------------------
/coding-exercise-43/solution-2/index.js:
--------------------------------------------------------------------------------
 1 | function returnDay(num) {
 2 |   if (num < 1 || num > 7) {
 3 |     return null;
 4 |   }
 5 |   const days = {
 6 |     1: 'Monday',
 7 |     2: 'Tuesday',
 8 |     3: 'Wednesday',
 9 |     4: 'Thursday',
10 |     5: 'Friday',
11 |     6: 'Saturday',
12 |     7: 'Sunday'
13 |   };
14 |   return days[num];
15 | }


--------------------------------------------------------------------------------
/coding-exercise-43/solution-3/index.js:
--------------------------------------------------------------------------------
1 | function returnDay(num) {
2 |   const days = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
3 |   const day = days[num - 1];
4 |   // Using the JavaScript ternary operator syntax
5 |   return day ? day : null;
6 | }


--------------------------------------------------------------------------------
/coding-exercise-43/solution-4/index.js:
--------------------------------------------------------------------------------
 1 | // A long approach:
 2 | function returnDay(num) {
 3 |   if (num < 1 || num > 7) {
 4 |     return null;
 5 |   } else if (num === 1) {
 6 |     return ('Monday');
 7 |   } else if (num === 2) {
 8 |     return ('Tuesday');
 9 |   } else if (num === 3) {
10 |     return ('Wednesday');
11 |   } else if (num === 4) {
12 |     return ('Thursday');
13 |   } else if (num === 5) {
14 |     return ('Friday');
15 |   } else if (num === 6) {
16 |     return ('Saturday');
17 |   } else if (num === 7) {
18 |     return ('Sunday');
19 |   }
20 | }


--------------------------------------------------------------------------------
/coding-exercise-43/solution-5/index.js:
--------------------------------------------------------------------------------
 1 | // A long approach with a switch statement
 2 | function returnDay(num) {
 3 |   if (num >= 1 || num <= 7) {
 4 |     switch (num) {
 5 |       case 1:
 6 |         return 'Monday';
 7 |       case 2:
 8 |         return 'Tuesday';
 9 |       case 3:
10 |         return 'Wednesday';
11 |       case 4:
12 |         return 'Thursday';
13 |       case 5:
14 |         return 'Friday';
15 |       case 6:
16 |         return 'Saturday';
17 |       case 7:
18 |         return 'Sunday';
19 |       default:
20 |         return null;
21 |     }
22 |   }
23 | }


--------------------------------------------------------------------------------
/coding-exercise-43/solution/index.js:
--------------------------------------------------------------------------------
 1 | function returnDay(num) {
 2 |   const days = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
 3 |   if (num < 1 || num > 7) {
 4 |     return null;
 5 |   } else {
 6 |     return days[num - 1];
 7 |   }
 8 | }
 9 | 
10 | // Another approach:
11 | function returnDay(num) {
12 |   const days = [null, 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
13 |   if (num < 1 || num > 7) {
14 |     return null;
15 |   } else {
16 |     return days[num];
17 |   }
18 | }
19 | 
20 | // Some more different approaches:
21 | 
22 | function returnDay(num) {
23 |   if (num < 1 || num > 7) {
24 |     return null;
25 |   }
26 |   const days = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
27 |   return days[num - 1];
28 | }
29 | 
30 | function returnDay(num) {
31 |   if (num >= 1 && num <= 7) {
32 |     const days = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
33 |     return days[num - 1];
34 |   }
35 |   return null;
36 | }


--------------------------------------------------------------------------------
/coding-exercise-44/solution/index.js:
--------------------------------------------------------------------------------
 1 | const square = function (num) {
 2 |   return num * num;
 3 | }
 4 | 
 5 | // More approaches:
 6 | 
 7 | // #2
 8 | const square = function (num) {
 9 |   return Math.pow(num, 2);
10 | }
11 | 
12 | // #3 (doesn't work on the Udemy coding exercise platform at the time of writing this)
13 | const square = function (num) {
14 |   return num ** 2;
15 | }


--------------------------------------------------------------------------------
/coding-exercise-45/solution/index.js:
--------------------------------------------------------------------------------
 1 | const square = {
 2 |   area(side) {
 3 |     return side * side;
 4 |   },
 5 |   perimeter(side) {
 6 |     return side * 4;
 7 |   }
 8 | }
 9 | 
10 | // More verbose syntax approach:
11 | const square = {
12 |   area: function (side) {
13 |     return side * side;
14 |   },
15 |   perimeter: function (side) {
16 |     return side * 4;
17 |   }
18 | }


--------------------------------------------------------------------------------
/coding-exercise-46/solution/index.js:
--------------------------------------------------------------------------------
 1 | const hen = {
 2 |   name: 'Helen',
 3 |   eggCount: 0,
 4 |   layAnEgg() {
 5 |     this.eggCount++;
 6 |     return 'EGG';
 7 |   }
 8 | };
 9 | 
10 | // A bit more verbose:
11 | const hen = {
12 |   name: 'Helen',
13 |   eggCount: 0,
14 |   layAnEgg: function () {
15 |     this.eggCount += 1;
16 |     return 'EGG';
17 |   }
18 | };


--------------------------------------------------------------------------------
/coding-exercise-47/solution/index.js:
--------------------------------------------------------------------------------
 1 | // DO NOT ALTER THE FOLLOWING CODE:
 2 | const fullNames = [{first: 'Albus', last: 'Dumbledore'}, {first: 'Harry', last: 'Potter'}, {
 3 |   first: 'Hermione',
 4 |   last: 'Granger'
 5 | }, {first: 'Ron', last: 'Weasley'}, {first: 'Rubeus', last: 'Hagrid'}, {
 6 |   first: 'Minerva',
 7 |   last: 'McGonagall'
 8 | }, {first: 'Severus', last: 'Snape'}];
 9 | 
10 | // Write your code here
11 | const firstNames = fullNames.map(function (name) {
12 |   return name.first;
13 | });
14 | 
15 | // Arrow function syntax approach:
16 | const firstNames = fullNames.map(name => name.first);


--------------------------------------------------------------------------------
/coding-exercise-48/solution/index.js:
--------------------------------------------------------------------------------
1 | const greet = (name) => {
2 |   return `Hey ${name}!`;
3 | }
4 | 
5 | // More concise approach:
6 | const greet = name => `Hey ${name}!`;


--------------------------------------------------------------------------------
/coding-exercise-49/solution/index.js:
--------------------------------------------------------------------------------
 1 | function validUserNames(arr) {
 2 |   const filteredArr = arr.filter(function (name) {
 3 |     return name.length < 10;
 4 |   });
 5 |   return filteredArr;
 6 | }
 7 | 
 8 | // Another approach:
 9 | function validUserNames(arr) {
10 |   return arr.filter(name => name.length < 10);
11 | }
12 | 
13 | // Concise full arrow function syntax approach:
14 | const validUserNames = usernames => usernames.filter(usr => usr.length < 10);


--------------------------------------------------------------------------------
/coding-exercise-50/solution/index.js:
--------------------------------------------------------------------------------
 1 | function allEvens(arr) {
 2 |   return arr.every(function (num) {
 3 |     return num % 2 === 0;
 4 |   });
 5 | }
 6 | 
 7 | // Another approach:
 8 | const allEvens = function (arr) {
 9 |   return arr.every(num => num % 2 === 0);
10 | }
11 | 
12 | // Concise full arrow function syntax approach:
13 | const allEvens = arr => arr.every(num => num % 2 === 0);


--------------------------------------------------------------------------------
/coding-exercise-51/solution/app.js:
--------------------------------------------------------------------------------
1 | // Write your code in here:
2 | const image = document.getElementById('unicorn');
3 | const heading = document.getElementById('mainheading');


--------------------------------------------------------------------------------
/coding-exercise-51/solution/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Unicorn</title>
 8 | </head>
 9 | <body>
10 | <h1 id="mainheading">I &hearts; unicorns</h1>
11 | <img src="https://devsprouthosting.com/images/unicorn.jpg" id="unicorn" alt="unicorn">
12 | <script src="app.js"></script>
13 | </body>
14 | </html>


--------------------------------------------------------------------------------
/coding-exercise-52/solution/app.css:
--------------------------------------------------------------------------------
1 | /* No need to change anything in here! */
2 | .done {
3 |     color: grey;
4 |     text-decoration: line-through;
5 | }


--------------------------------------------------------------------------------
/coding-exercise-52/solution/app.js:
--------------------------------------------------------------------------------
1 | // Your code goes in here:
2 | const doneTodos = document.querySelectorAll('.done');
3 | const checkbox = document.querySelector('input[type="checkbox"]');


--------------------------------------------------------------------------------
/coding-exercise-52/solution/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | 
 4 | <head>
 5 |     <title>Todos</title>
 6 |     <link rel="stylesheet" href="app.css">
 7 | </head>
 8 | 
 9 | <body>
10 | <h1>Garden Todos</h1>
11 | <input type="text" placeholder="New Todo">
12 | <ul>
13 |     <li>Start Seedlings</li>
14 |     <li class="done">Deadhead Zinnias</li>
15 |     <li class="done">Water Tomatoes</li>
16 |     <li class="done">Harvest Potatoes</li>
17 |     <li>Prune Roses</li>
18 | </ul>
19 | <label>Delete All</label>
20 | <input type="checkbox" id="scales" name="scales" checked>
21 | <script src="app.js"></script>
22 | </body>
23 | </html>


--------------------------------------------------------------------------------
/coding-exercise-53/solution/app.js:
--------------------------------------------------------------------------------
1 | // YOUR CODE GOES IN HERE:
2 | const span = document.querySelector("span");
3 | span.innerText = 'Disgusting';


--------------------------------------------------------------------------------
/coding-exercise-53/solution/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <head>
 4 |     <title>Pickles</title>
 5 |     <!--LEAVE THESE LINES ALONE, PLEASE! THEY MAKE THE LIVE PREVIEW WORK!-->
 6 |     <script src="node_modules/babel-polyfill/dist/polyfill.js" type="text/javascript"> </script>
 7 |     <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
 8 | 
 9 | </head>
10 | 
11 | <body>
12 | <!--PLEASE LEAVE THIS LINE ALONE! MAKE YOUR CHANGES USING JAVASCRIPT!!-->
13 | <h1>Pickles Are <span>Delicious</span></h1>
14 | <script src="app.js"></script>
15 | </body>
16 | </html>


--------------------------------------------------------------------------------
/coding-exercise-54/solution/app.js:
--------------------------------------------------------------------------------
1 | const eggImg = document.querySelector('img');
2 | eggImg.src = 'https://devsprouthosting.com/images/chicken.jpg';
3 | eggImg.alt = 'chicken';


--------------------------------------------------------------------------------
/coding-exercise-54/solution/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | <head>
 4 |     <title>Manipulating Attributes Practice</title>
 5 | </head>
 6 | <body>
 7 | <!--DONT CHANGE ANYTHING IN THIS FILE, PLEASE!-->
 8 | Egg and Chicken
 9 | 
10 | 
11 | <h4>Which Came First?</h4>
12 | <img src="https://devsprouthosting.com/images/egg.jpg" width="200px">
13 | <!-- image source: unsplash.com -->
14 | <script src="app.js"></script>
15 | </body>
16 | </html>
17 | 


--------------------------------------------------------------------------------
/coding-exercise-55/solution/app.js:
--------------------------------------------------------------------------------
1 | const image = document.querySelector("img");
2 | image.style.width = '150px';
3 | image.style.borderRadius = '50%';
4 | 
5 | const container = document.querySelector('#container');
6 | container.style.textAlign = 'center';


--------------------------------------------------------------------------------
/coding-exercise-55/solution/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <head>
 4 |     <title>Forest</title>
 5 |     <!--LEAVE THESE LINES ALONE, PLEASE! THEY MAKE THE LIVE PREVIEW WORK!-->
 6 |     <script src="node_modules/babel-polyfill/dist/polyfill.js" type="text/javascript"> </script>
 7 |     <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
 8 | 
 9 | </head>
10 | 
11 | <body>
12 | <div id="container">
13 |     <h1>I &hearts; Trees</h1>
14 |     <img src="https://images.unsplash.com/photo-1596328546171-77e37b5e8b3d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1400&q=80" alt="">
15 | </div>
16 | <script src="app.js"></script>
17 | </body>
18 | </html>


--------------------------------------------------------------------------------
/coding-exercise-56/solution/app.js:
--------------------------------------------------------------------------------
1 | const colors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet']; // PLEASE DON'T CHANGE THIS LINE!
2 | 
3 | // YOU CODE GOES HERE:
4 | const spans = document.querySelectorAll('span');
5 | for (let i = 0; i < spans.length; i++) {
6 |   spans[i].style.color = colors[i];
7 | }


--------------------------------------------------------------------------------
/coding-exercise-56/solution/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <head>
 4 |     <title>Rainbow</title>
 5 |     <!--LEAVE THESE LINES ALONE, PLEASE! THEY MAKE THE LIVE PREVIEW WORK!-->
 6 |     <script src="node_modules/babel-polyfill/dist/polyfill.js" type="text/javascript"> </script>
 7 |     <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
 8 | 
 9 | </head>
10 | 
11 | <body>
12 | <!--DON'T TOUCH THIS FILE PLEASE!-->
13 | <h1>
14 |     <span>R</span>
15 |     <span>A</span>
16 |     <span>I</span>
17 |     <span>N</span>
18 |     <span>B</span>
19 |     <span>O</span>
20 |     <span>W</span>
21 | </h1>
22 | <script src="app.js"></script>
23 | </body>
24 | 
25 | </html>


--------------------------------------------------------------------------------
/coding-exercise-57/solution-2/app.css:
--------------------------------------------------------------------------------
1 | /*No need to touch anything in this file:*/
2 | li {
3 |     background-color: #B10DC9;
4 | }
5 | 
6 | .highlight {
7 |     background-color: #7FDBFF;
8 | }


--------------------------------------------------------------------------------
/coding-exercise-57/solution-2/app.js:
--------------------------------------------------------------------------------
 1 | // WRITE YOUR CODE IN HERE:
 2 | const lis = document.querySelectorAll('li')
 3 | 
 4 | for (let li of lis) {
 5 |   if (li.classList.contains('highlight')) {
 6 |     li.classList.remove('highlight');
 7 |   } else {
 8 |     li.classList.add('highlight');
 9 |   }
10 | }


--------------------------------------------------------------------------------
/coding-exercise-57/solution-2/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <head>
 4 |     <title>ClasList</title>
 5 |     <!--LEAVE THESE LINES ALONE, PLEASE! THEY MAKE THE LIVE PREVIEW WORK!-->
 6 |     <script src="node_modules/babel-polyfill/dist/polyfill.js" type="text/javascript"> </script>
 7 |     <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
 8 |     <link rel="stylesheet" href="app.css">
 9 | </head>
10 | 
11 | <body>
12 | <!--LEAVE THIS FILE ALONE!-->
13 | <ul>
14 |     <li>Hello</li>
15 |     <li class="highlight">Hello</li>
16 |     <li>Hello</li>
17 |     <li>Hello</li>
18 |     <li class="highlight">Hello</li>
19 |     <li>Hello</li>
20 | </ul>
21 | <script src="app.js"></script>
22 | </body>
23 | 
24 | </html>


--------------------------------------------------------------------------------
/coding-exercise-57/solution/app.css:
--------------------------------------------------------------------------------
1 | /*No need to touch anything in this file:*/
2 | li {
3 |     background-color: #B10DC9;
4 | }
5 | 
6 | .highlight {
7 |     background-color: #7FDBFF;
8 | }


--------------------------------------------------------------------------------
/coding-exercise-57/solution/app.js:
--------------------------------------------------------------------------------
1 | // WRITE YOUR CODE IN HERE:
2 | const lis = document.querySelectorAll('li');
3 | 
4 | for (let li of lis) {
5 |   li.classList.toggle('highlight');
6 | }


--------------------------------------------------------------------------------
/coding-exercise-57/solution/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <head>
 4 |     <title>ClasList</title>
 5 |     <!--LEAVE THESE LINES ALONE, PLEASE! THEY MAKE THE LIVE PREVIEW WORK!-->
 6 |     <script src="node_modules/babel-polyfill/dist/polyfill.js" type="text/javascript"> </script>
 7 |     <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
 8 |     <link rel="stylesheet" href="app.css">
 9 | </head>
10 | 
11 | <body>
12 | <!--LEAVE THIS FILE ALONE!-->
13 | <ul>
14 |     <li>Hello</li>
15 |     <li class="highlight">Hello</li>
16 |     <li>Hello</li>
17 |     <li>Hello</li>
18 |     <li class="highlight">Hello</li>
19 |     <li>Hello</li>
20 | </ul>
21 | <script src="app.js"></script>
22 | </body>
23 | 
24 | </html>


--------------------------------------------------------------------------------
/coding-exercise-58/solution/app.js:
--------------------------------------------------------------------------------
1 | // WRITE YOUR CODE IN HERE:
2 | const container = document.querySelector('#container');
3 | 
4 | for (let i = 0; i < 100; i++) {
5 |   const btn = document.createElement('button');
6 |   btn.innerText = 'Click';
7 |   container.appendChild(btn);
8 | }


--------------------------------------------------------------------------------
/coding-exercise-58/solution/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <head>
 4 |     <title>100 Buttons!</title>
 5 | </head>
 6 | 
 7 | <body>
 8 | <!--DO NOT TOUCH THIS FILE PLEASE!-->
 9 | <h1>Look At All My Buttons!</h1>
10 | <div id="container">
11 | 
12 | </div>
13 | <script src="app.js"></script>
14 | </body>
15 | 
16 | </html>


--------------------------------------------------------------------------------
/coding-exercise-59/solution/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <head>
 4 |     <title>Inline Events</title>
 5 |     <!--LEAVE THESE LINES ALONE, PLEASE! THEY MAKE THE LIVE PREVIEW WORK!-->
 6 |     <script src="node_modules/babel-polyfill/dist/polyfill.js" type="text/javascript"></script>
 7 |     <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
 8 | 
 9 | </head>
10 | 
11 | <body>
12 | <h1 onclick="console.log('boo')">Inline Events Suck...</h1>
13 | <button onclick="console.log('clicked')" id="btn">Click Me</button>
14 | </body>
15 | 
16 | </html>


--------------------------------------------------------------------------------
/coding-exercise-60/solution/app.js:
--------------------------------------------------------------------------------
1 | const helloButton = document.querySelector('#hello');
2 | helloButton.addEventListener('click', function () {
3 |   console.log('hello');
4 | });
5 | 
6 | const goodbyeButton = document.querySelector('#goodbye');
7 | goodbyeButton.addEventListener('click', function () {
8 |   console.log('goodbye');
9 | });


--------------------------------------------------------------------------------
/coding-exercise-60/solution/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <head>
 4 |     <title>ClasList</title>
 5 |     <!--LEAVE THESE LINES ALONE, PLEASE! THEY MAKE THE LIVE PREVIEW WORK!-->
 6 |     <script src="node_modules/babel-polyfill/dist/polyfill.js" type="text/javascript"> </script>
 7 |     <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
 8 | 
 9 | </head>
10 | 
11 | <body>
12 | <h1>Click These Buttons</h1>
13 | <p>And Prepare To Have Your Mind Blown</p>
14 | <button id="hello">Hello</button>
15 | <button id="goodbye">Goodbye</button>
16 | 
17 | <script src="app.js"></script>
18 | </body>
19 | 
20 | </html>


--------------------------------------------------------------------------------
/coding-exercise-61/solution-2/app.js:
--------------------------------------------------------------------------------
 1 | const form = document.querySelector('form');
 2 | const list = document.querySelector('#list');
 3 | 
 4 | form.addEventListener('submit', function (e) {
 5 |   e.preventDefault();
 6 |   const productInput = form.elements.product;
 7 |   const quantityInput = form.elements.qty;
 8 |   addElement(productInput.value, quantityInput.value);
 9 |   productInput.value = '';
10 |   quantityInput.value = '';
11 | });
12 | 
13 | const addElement = (product, qty) => {
14 |   const li = document.createElement('li');
15 |   li.innerText = `${qty} ${product}`;
16 |   list.appendChild(li);
17 | }


--------------------------------------------------------------------------------
/coding-exercise-61/solution-2/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <head>
 4 |     <title>Grocery List</title>
 5 |     <!--LEAVE THESE LINES ALONE, PLEASE! THEY MAKE THE LIVE PREVIEW WORK!-->
 6 |     <script src="node_modules/babel-polyfill/dist/polyfill.js" type="text/javascript"> </script>
 7 |     <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
 8 | 
 9 | </head>
10 | 
11 | <body>
12 | <h1>Grocery List</h1>
13 | <form action="/nowhere">
14 |     <label for="item">Enter A Product</label>
15 |     <input type="text" id="product" name="product">
16 |     <label for="item">Enter A Quantity</label>
17 |     <input type="number" id="qty" name="qty">
18 |     <button>Submit</button>
19 | </form>
20 | 
21 | <ul id="list"></ul>
22 | 
23 | <script src="app.js"></script>
24 | </body>
25 | 
26 | </html>


--------------------------------------------------------------------------------
/coding-exercise-61/solution/app.js:
--------------------------------------------------------------------------------
 1 | const form = document.querySelector('form');
 2 | const ul = document.querySelector('#list');
 3 | 
 4 | form.addEventListener('submit', function (e) {
 5 |   e.preventDefault();
 6 |   const qty = form.elements.qty.value;
 7 |   const product = form.elements.product.value;
 8 |   const li = document.createElement('li');
 9 |   li.innerText = `${qty} ${product}`;
10 |   ul.appendChild(li);
11 |   form.reset();
12 | });


--------------------------------------------------------------------------------
/coding-exercise-61/solution/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <head>
 4 |     <title>Grocery List</title>
 5 |     <!--LEAVE THESE LINES ALONE, PLEASE! THEY MAKE THE LIVE PREVIEW WORK!-->
 6 |     <script src="node_modules/babel-polyfill/dist/polyfill.js" type="text/javascript"> </script>
 7 |     <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
 8 | 
 9 | </head>
10 | 
11 | <body>
12 | <h1>Grocery List</h1>
13 | <form action="/nowhere">
14 |     <label for="item">Enter A Product</label>
15 |     <input type="text" id="product" name="product">
16 |     <label for="item">Enter A Quantity</label>
17 |     <input type="number" id="qty" name="qty">
18 |     <button>Submit</button>
19 | </form>
20 | 
21 | <ul id="list"></ul>
22 | 
23 | <script src="app.js"></script>
24 | </body>
25 | 
26 | </html>


--------------------------------------------------------------------------------
/coding-exercise-62/solution-2/app.js:
--------------------------------------------------------------------------------
 1 | const heading = document.querySelector('h1');
 2 | const input = document.querySelector('input');
 3 | 
 4 | input.addEventListener('input', function () {
 5 |   if (!this.value) {
 6 |     heading.innerText = `Enter Your Username`;
 7 |   } else {
 8 |     heading.innerText = `Welcome, ${this.value}`;
 9 |   }
10 | });


--------------------------------------------------------------------------------
/coding-exercise-62/solution-2/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <head>
 4 |     <title>Input Event</title>
 5 |     <!--LEAVE THESE LINES ALONE, PLEASE! THEY MAKE THE LIVE PREVIEW WORK!-->
 6 |     <script src="node_modules/babel-polyfill/dist/polyfill.js" type="text/javascript"> </script>
 7 |     <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
 8 | 
 9 | </head>
10 | 
11 | <body>
12 | <h1>Enter Your Username</h1>
13 | <input type="text" id="username">
14 | 
15 | <script src="app.js"></script>
16 | </body>
17 | 
18 | </html>


--------------------------------------------------------------------------------
/coding-exercise-62/solution-3/app.js:
--------------------------------------------------------------------------------
1 | const heading = document.querySelector('h1');
2 | const input = document.querySelector('input');
3 | 
4 | input.addEventListener('input', function () {
5 |   if (!this.value) {
6 |     return heading.innerText = `Enter Your Username`
7 |   }
8 |   heading.innerText = `Welcome, ${input.value}`;
9 | });


--------------------------------------------------------------------------------
/coding-exercise-62/solution-3/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <head>
 4 |     <title>Input Event</title>
 5 |     <!--LEAVE THESE LINES ALONE, PLEASE! THEY MAKE THE LIVE PREVIEW WORK!-->
 6 |     <script src="node_modules/babel-polyfill/dist/polyfill.js" type="text/javascript"> </script>
 7 |     <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
 8 | 
 9 | </head>
10 | 
11 | <body>
12 | <h1>Enter Your Username</h1>
13 | <input type="text" id="username">
14 | 
15 | <script src="app.js"></script>
16 | </body>
17 | 
18 | </html>


--------------------------------------------------------------------------------
/coding-exercise-62/solution/app.js:
--------------------------------------------------------------------------------
 1 | const heading = document.querySelector('h1');
 2 | const input = document.querySelector('input');
 3 | 
 4 | input.addEventListener('input', function () {
 5 |   if (input.value === '') {
 6 |     heading.innerText = `Enter Your Username`
 7 |   } else {
 8 |     heading.innerText = `Welcome, ${input.value}`;
 9 |   }
10 | });


--------------------------------------------------------------------------------
/coding-exercise-62/solution/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <head>
 4 |     <title>Input Event</title>
 5 |     <!--LEAVE THESE LINES ALONE, PLEASE! THEY MAKE THE LIVE PREVIEW WORK!-->
 6 |     <script src="node_modules/babel-polyfill/dist/polyfill.js" type="text/javascript"> </script>
 7 |     <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
 8 | 
 9 | </head>
10 | 
11 | <body>
12 | <h1>Enter Your Username</h1>
13 | <input type="text" id="username">
14 | 
15 | <script src="app.js"></script>
16 | </body>
17 | 
18 | </html>


--------------------------------------------------------------------------------
/quiz-01/quiz-01.md:
--------------------------------------------------------------------------------
1 | # Quiz 1: Colors Quiz
2 | 
3 | - Question 1: Answer #4 `rgb(0, 200, 0)` is correct! — "This color has lots of green in it (the 2nd channel) and very little red/blue."
4 | - Question 2: Answer #3 `#FFFFFF` is correct! — "#FFFFFF is "maxed out" red, green, and blue which gives us WHITE!"


--------------------------------------------------------------------------------
/quiz-02/quiz-02.md:
--------------------------------------------------------------------------------
1 | # Quiz 2: Specificity Quiz
2 | 
3 | - Question 1: Answer #2 `magenta` is correct! — "The class selector is the most specific of the three that are targeting the <li>"
4 | - Question 2: Answer #1 `blue` is correct! — "The id selector is super-specific and it beats out the other selectors in this case."
5 | - Question 3: Answer #3 `yellow` is correct! — "This selector is tied in specificity with the one above it, but it "wins" because it comes last in the file!"


--------------------------------------------------------------------------------
/quiz-03/quiz-03.md:
--------------------------------------------------------------------------------
1 | # Quiz 3: Variables Quiz
2 | 
3 | - Question 1: Answer #3 `5` is correct! — "We never update the value of score!"
4 | - Question 2: Answer #4 `60` is correct! — "Correct!"
5 | - Question 3: Answer #2 `64` is correct! — "Line 2 results in an error, because we cannot reassign a const variable.  So age stays 64."


--------------------------------------------------------------------------------
/quiz-04/quiz-04.md:
--------------------------------------------------------------------------------
1 | # Quiz 4: Quick Variable Quiz
2 | 
3 | - Question 1: Answer #3 `let isHappy = true; ` is correct! — "Correct!"
4 | - Question 2: Answer #4 `let highScore = 107; ` is correct! — "This variable name is camel-cased, with the first letter lowercased."


--------------------------------------------------------------------------------
/quiz-05/quiz-05.md:
--------------------------------------------------------------------------------
1 | # Quiz 5: Strings Basics Quiz
2 | 
3 | - Question 1: Answer #2 `"t"` is correct! — "t" is the 8th letter in the word, but it has an index of 7 (JS starts counting at 0)
4 | - Question 2: Answer #2 `"KyotoJapan"` is correct! — "JavaScript doesn't add any spaces in, it just smashes two strings together!"
5 | - Question 3: Answer #3 `"19981"` is correct! — "When adding a string and a number, JS behaves oddly!  It turns the number into a string and smushes them together"


--------------------------------------------------------------------------------
/quiz-06/quiz-06.md:
--------------------------------------------------------------------------------
1 | # Quiz 6: Comparison Quiz!
2 | 
3 | - Question 1: Answer #1 `false` is correct! — "3 is NOT less than or equal to 2."
4 | - Question 2: Answer #1 `true` is correct! — "Correct, double equals will convert both sides to the same type and then compare. This is why we don't use it!"
5 | - Question 3: Answer #1 `true` is correct! — "-5 is greater than or equal to -6"


--------------------------------------------------------------------------------
/quiz-07/quiz-07.md:
--------------------------------------------------------------------------------
1 | # Quiz 7: Function Scope Quiz
2 | 
3 | - Question 1: Answer #2 `"Pajama Squid"` is correct! — "Make sure you google pajama squid! They are really neat animals :)"
4 | - Question 2: Answer #2 `"Spanish Dancer" is printed` is correct! — "Correct!"
5 | - Question 3: Answer #3 `"Scorpionfish" "Blue-Ringed Octopus"` is correct! — "Correct!"


--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
1 | # The Web Developer Bootcamp course by Colt Steele
2 | ## Solutions for all the course coding exercises and quizzes


--------------------------------------------------------------------------------