dev1 – JS Arrays

Tutorials

  • Section 11, videos 103 – 113
  • 11 JS – Arrays tutorial notes
  • Exercise files to publish on your server as HTML/JS pairs:
    • todo-list-part1.html / todo-list-part1.js
    • challenge.html / challenge.js
    • todo-list-part2.html / todo-list-part2.js
    • array-prob-set.html / array-prob-set.js
    • foreach.html / foreach.js

Blog Questions

  • With the array methods pop() / push() and shift() / unshift(), explain the difference between the returned value of each method and the resulting value of the array? Use an example piece of code with the Enlighter tool to support your description.
  • Link to an example of a site that is using an array of data that is presented on page. Describe what is in value of the array.

dev2 – 10 advanced array methods problem set

Using the included array of objects, create the requested functions using the named array methods in following JS file. Below is the contents of the JS file in a code snippet. Upload to your server the completed problem set HTML/JS adv-array.html / adv-arr.js pair and link them in your course post for the week.

var students = [{
        name: "Diksha Dohman",
        age: 20,
        major: "Communications Technology",
        coursesTaken: ["CT 101", "CT 210", "CT 137", "CT 205"],
        totalCredits: 75,
        enrolled: true
    },
    {
        name: "Voski Dreher",
        age: 24,
        major: "Communications Technology",
        coursesTaken: ["CT 101", "CT 160", "CT 201", "CT 210", "CT 137", "CT 205", "CT 240", "CT 355", "CT 345"],
        totalCredits: 110,
        enrolled: true
    },
    {
        name: "Divya Glas",
        age: 19,
        major: "Communications Technology",
        coursesTaken: ["CT 101"],
        totalCredits: 15,
        enrolled: false
    },
    {
        name: "Theofanis Sandoval",
        age: 20,
        major: "Communications Technology",
        coursesTaken: ["CT 101", "CT 201", "CT 137", "CT 160", "CT 360", "CT 370", "CT 381", "CT 385"],
        totalCredits: 95,
        enrolled: true
    },
    {
        name: "Wolf Shepard",
        age: 21,
        major: "Communications Technology",
        coursesTaken: ["CT 101", "CT 201", "CT 137", "CT 160", "CT 360"],
        totalCredits: 45,
        enrolled: false
    }
]


// Write a function courseCount(studArr) that takes an array as an argument and uses a forEach method to count the number of courses a student has taken. Console.log the student's name and the number of courses taken by the student.

//For example the last console.log would be
//"Wolf Shepard has taken 5 courses."

function courseCount(studArr) {

}

//Write a function firstLast(studArr) that uses a map method to return an array of objects with added first and last keys with the first and last names created from the name value.

//For example the last object in the array would now include:

//first: "Wolf"
//last: "Shepard"

function firstLast(studArr) {

}

//Write a function isEnrolled(studArr, bool) which takes an array and a boolean value as arguments. Use the filter method to check which students are or are not enrolled. Returns an array of student objects.

function isEnrolled(studArr, bool) {

}

//Write a function courseCompleted(studArr, courseNum, bool) that takes an array, the string value of a course number, and a Boolean value. 
//Use a reduce() method to return an array of objects with the students that have taken or not taken the particular course.
//return in each object the name of the student, and two new key value pairs – course: courseNum and taken: bool

//Example returned object in array of objects
// {
//     name: "Wolf Shepard",
//     course: "CT 101",
//     taken: true
// }

function courseCompleted(studArr, courseNum, bool) {

}

dev1 – 10 JS functions problem set

There are two pairs of HTML/JS files to be completed and submitted:

  • Random Color – Create a function randomColor() when called returns a random RGB color value like rgb(173, 65, 203).
  • 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.
  • Falling Down Stairs – Create a function fallingDownStairs(phrase) which takes a string value as an argument and gives a console.log output to the similarly named problem from last week.
  • Climbing the Mountain – Create a function climbMountain(phrase) which takes a string value as an argument and gives a console.log output to the similarly named problem from last week.

dev2 – Adv Array Methods

Tutorials

  • ADV 10 Advanced Array Methods – videos 103-116
  • You will be using a number of exercise files with the problems described in the code. Please download the files and complete them. They should then be linked to a single HTML file and uploaded to your server:
    • adv-arr.html
    • filter-exercise.js
    • foreach-exercise.js
    • map-exercise.js
    • reduce-exercise.js
    • some-every-exercise.js

Blogging Questions

TBD

dev1 – JS Basics, Functions

Tutorials

  • Section 10, videos 093 – 102
  • 10 JS Basics – Functions tutorial notes
  • Exercise files to publish on your server as HTML/JS pairs:
    • functions-examples.html / functions-examples.js
    • functions-problem-set.html / functions-problem-set.js includes isEven(num)factorial(num), and kebabToSnake(str).
    • scope-example.html / scope-example.js

Blog Questions

Describe the difference between declaring a function and calling a function. Give an example in a code snippet using Enlighter. Have you example use an argument.

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

css.php