dev2 – color game becomes icon guessing game

The final project in the tutorials from the Web Development Bootcamp was to make the RGB Color Guessing Game. This is a great mixture of DOM manipulation as well as working with various data structures, functions, and logic.

For your final review, I’d like you to rebuild this game with a slight twist. You’re going to make this into a guess the Font Awesome Icons guessing game. I’ve pre-built the HTML/CSS for the new game, as well as an array of all the free solid icon names. With this have your game do the following:

  • Select six names at random from the list of names and have them become the six icons displayed to choose.
  • Randomly select one of the six and set that as the answer.
  • The remaining interactions of the color game should prevail
    • Selected incorrect answers become hidden and “Try Again” is displayed.
    • Have the correct selected answer replace all icons as well as “You got it!” is displayed
    • “New Game” resets the game. “Hard” has a game of six icons. “Easy” has a game of three icons.
  • To publish on your server:
    • icon-game/index.html
    • icon-game/css/style.css
    • icon-game/css/font-awesome-directory-and-all-contents
    • icon-game/js/icon-names-arr.js
    • icon-game/js/my-game.js
  • Quick link to a compressed directory of the icon-game boilerplate

dev1 – 09 JS control flow problem set

There are six pairs (plus a bonus) of HTML/JS files to be completed and submitted.

  1. How are you really feeling? Write a program that asks “How are you feeling?” Then have the program immediately ask again, “How are you really feeling?” Have the program compare the statements. If the statements match, then send a message, “Wow so you really feel insert feeling” If they don’t match send a message, “Ok so you’re not sure if you’re firstFeeling or secondFeeling.”
    1. feeling.html / feeling.js
  2. How fast were you running? Write a program that asks for how many miles a person ran and how many minutes the run took. If either answer was not a number, then let the user know they should try again. If both answers are numbers calculate and report the MPH the user averaged.
    1. running.html / running.js
  3. What’s the weather? Write a program that asks a user what the weather looks like today. Using a switch statement, have your program respond with advice to the following answers, “rain”, “cloudy”, “sunny”, “cold”,  “hot”, and for all other answers let the user know, “I don’t have any advice for you today, sorry.”
    1. weather.html / weather.js
  4. FizzBuzz – This is a classic loop problem for which the solution exists in a myriad of languages and methods. Write a program that console.log’s the numbers 1 to 100. Except log for numbers divisible by 3 log “Fizz”, numbers divisible by 5 log “Buzz”, and numbers divisible by both 3 and 5 log “FizzBuzz”.
    1. fizzbuzz.html / fizzbuzz.js
  5. Guessing Game between 1 and 100 – Write a program that generates a random whole number between 1 and 100 and then prompts a user to guess the number. If the guess is less than the answer given, prompt the user with the hint that the number is lower than the one guessed. If the guess is higher than the answer given, prompt the user with the clue that the number is higher than the one guessed. If the user guesses correctly, alert the user that they have guessed the answer. Be sure to report the correctly guessed number in the alert.
    1. guess.html / guess.js
  6. Falling down the stairs – Take the phrase “falling down the stairs” and write a program that console logs the phrase one letter per line, but for each line add one additional space is in front of each letter. This will give the appearance of the letters in the phrase looking like a staircase.
    1. stairs.html / stairs.js
  7. ***BONUS*** Climbing Up the Mountain – Take the phrase, “Climbing up the Mountain” and log one letter per line but in reverse. Also the last line should have one space in front, the second to last two spaces, etc. This will give the impression of a the letters going up to a peak. Hint: You will need to employ new string methods.
    1. mountain.html / mountain.js

dev2 – JS Review Sections 12 – 15

Tutorials

  • Tutorial Notes
  • Section 12, videos 114 – 120
  • Section 13, videos 121 – 129
  • Section 14, videos 130 – 135
  • Section 15, videos 136 – 144
  • Exercises to be completed and published as HTML/JS pairs
    • movie-db.html / movie-db.js
    • selector-exercise.html / selector-exercise.js
    • score-keeper.html / score-keeper.js

Blogging Questions

  • Why are arrays of objects such commonly used data structures? Give an example of how an array of objects is used on a webpage.
  • Describe the difference between querySelector() and querySelectorAll(). What kinds of values can be passed as an argument to either selector?

dev1 – JS Basics, Control Flow

Tutorials

  • Section 09, videos 079 – 092
  • 09 JS Basics – Control Flow tutorial notes
  • Exercise files to publish on your server as HTML/JS pairs:
    • bouncer.html / bouncer.js
    • age-exercise.html / age-exercise.js
    • number-guess.html / number-guess.js
    • while-loops.html / while-loops.js
    • annoy-o-matic.html / annoy-o-matic.js
    • for-loops.html / for-loops.js

Blog Questions

Use the code insert tool and provide examples to answer these two questions. Use JS comment syntax to describe your example.

  • How can you use “falsey-ness” to determine if a string value can be coerced to a number? Why does this work? What is “type coercion” anyway?
  • What do you need to do to convert a for loop to a while loop?
// Here's my description in a JS Comment
// Here's some more!!
// Below is my code...
var num = 0
for(var i = 0; i <= 9; i++){
    num+=i
}
console.log(num)

dev1 – 08 Intro to JS Problem Set

There are four pairs of HTML/JS files to be completed and submitted.

  1. Create a program that prompts a user three times asking for three favorite deserts. Have the program alert the user with a sentence that names all of these deserts.
    1. desserts.html and desserts.js
  2. Create a program that asks the user how many credits they have completed towards their college degree. Have the program alert the user with a sentence that reports how many credits out of 120 have been completed and how many credits remain.
    1. credits.html and credits.js
  3. Create a program that asks a user for their favorite quote. Have the program alert the user with a sentence that repeats the quote in quotation marks and that they love it too.
    1. quote.html and quote.js
  4. Create a program that asks a user for their first name and then their last name. Have the program alert the user with a sentence shows their full name and tells them how many characters there are in their full name.
    1. name.html and name.js

dev2 – review 08-11 Problem Set

  1. Random Color – Create a function randomColor() when called returns a random RGB color value like rgb(173, 65, 203).
  2. Game – Create three functions startGame()endGame(), and checkGame(). Each function returns the boolean value of gameOver and should affect gameOver as the function name suggests.
  3. Range Array – Create a function rangeArray(start, end)which takes two numbers as arguments. The function returns an array containing all the numbers from the start up to and including the end. For example: rangeArray(3, 9) returns [3,4,5,6,8,9].
  4. Only Numbers – Create a function onlyNums(arr) which takes an array as an argument. The function returns an array that has removed any values except numbers. For example: onlyNums(["fun", 23, 45, undefined, "a", 4]) returns [23, 45, 4].

Why learn to code?

via Lisa Charlotte Rost, “How I Feel When I Learn To Code

I’m not sure if you’ve actually asked yourself this question or tried to describe an answer to this question. So I thought we’d start with this given we’re in a classroom with students that will be taking their first JavaScript course as well as those taking their second.

If you’ve never thought about it, consider looking at the r/learnprogramming subreddit. This is one of many communities out there where people are starting out with a number of different programming languages looking for support in a variety of ways – getting started, finding a project to work on, showcasing tools you use, getting feedback on work, and finding the answer to an-infinite-number-of-problems-encountered-when-trying-to-learn-to-program.

Look through the subreddit’s wiki on “common concerns and fears” and “questions about learning.” Choose a couple topics from these to talk to a partner about. Take notes on their answers as well as yours. Summarize your thoughts, concerns, and questions in your first blog post.

dev2 – JS Review Sections 08-11

Topics

Tutorials

  • Section 08, videos 067 – 078; Section 09, videos 079 – 092; Section 10, videos 093 – 102; Section 11, videos 103 – 113
  • dev1 08-11 Tutorial Notes
  • Exercise files to publish on your server, HTML/JS pairs
    • Section 08
      • age-calculator.js
    • Section 09
      • number-guess.js
      • annoy-o-matic.js
    • Section 10
      • func-prob-set.js includes isEven(num)factorial(num), and kebabToSnake(str)
    • Section 11
      • arr-prob-set.js includes functions printReverse()isUniform()sumArray(), and max().

Problem Set

Problem set files to be published on your server with one HTML file and four JS files connected:

  • webdev2-prob-set1.html
  • random-color.js
  • game.js
  • range-array.js
  • only-numbers.js

Blog Questions

  • Describe which section you felt most comfortable with and which you felt least comfortable with and why. Give a specific example of JS using enLighter for each.
//Here's my example of code that I feel comfortable with.
//Basic variable declarations - strings, numbers, arrays, booleans, etc...

//some code

//my example that I'm least comfortable with
//declaring arguments for a function and calling the function

//some code

dev1 – Introduction to JavaScript

Topics

Tutorials

  • Section 08, videos 067 – 078
  • dev1 08 Tutorial Notes
  • Exercise files to publish on your server, HTML/JS pairs
    • greeting.html and greeting.js
    • stalker.html and stalker.js
    • age-calculator.html and age-calculator.js

Problem Set

Problem set files to be published on your server with HTML/JS pairs:

  • desserts.html and desserts.js
  • credits.html and credits.js
  • quote.html and quote.js
  • name.html and name.js

Blog Questions

  • Describe how you connect an HTML file and a JS file.
  • Describe the difference between writing code in the Chrome console and writing HTML/JS files that are then open in Chrome.
css.php