├── README.md └── assignments ├── arrays.js ├── function-conversion.js ├── index.html └── objects.js /README.md: -------------------------------------------------------------------------------- 1 | # JavaScript - I 2 | 3 | - The point of these assignments is to take your knowledge of JavaScript and start putting into practice the principles learned throughout JavaScript I. 4 | 5 | ## Set Up The Project With Git 6 | 7 | **Follow these steps to set up and work on your project:** 8 | 9 | - [ ] Create a forked copy of this project. 10 | - [ ] Add your team lead as collaborator on Github. 11 | - [ ] Clone your OWN version of the repository (Not Lambda's by mistake!). 12 | - [ ] Create a new branch: git checkout -b ``. 13 | - [ ] Implement the project on your newly created `` branch, committing changes regularly. 14 | - [ ] Push commits: git push origin ``. 15 | 16 | **Follow these steps for completing your project.** 17 | 18 | - [ ] Submit a Pull-Request to merge Branch into master (student's Repo). **Please don't merge your own pull request** 19 | - [ ] Add your team lead as a reviewer on the pull-request 20 | - [ ] Your team lead will count the project as complete by merging the branch back into master. 21 | 22 | ## Assignment Description 23 | 24 | - Complete all the exercises as described inside each assignment file. 25 | - Use `console.log()` statements to check to see if your code does what it is supposed to do. 26 | - To test your `console.log()` statements open up the index.html file found in the assignments folder and use the developer tools to view the console. 27 | 28 | **Note:**You could also run `node /assignments/` and see what prints in your terminal. 29 | 30 | - Once you finish the exercises in each file, commit your code, and push it to your fork. 31 | 32 | ### Objects 33 | 34 | To better understand objects, you really just need to write more of them. The [objects.js](assignments/objects.js) file contains several challenges centered around a theme of interns starting at a new job. The Human Resources team needs information about the new hires. Use your new found object skills to answer vital questions for HR. 35 | 36 | - Read the instructions found within the file carefully to finish the challenges 37 | - Don't work on stretch until you have completed all assignments 38 | 39 | ### Arrays 40 | 41 | The [arrays.js](assignments/arrays.js) assignment takes us through a large data set of used cars. You have been asked to help a used car business with some customer requests based on their inventory. Use for loops and arrays to solve their problems. 42 | 43 | - Utilize the the array `inventory` to complete your challenges 44 | - Use any array method you see fit to solve the problem 45 | - Don't work on stretch until you have completed all assignments 46 | 47 | ### Arrow Function Syntax 48 | 49 | - [ ] Arrow Function Syntax - [Check out this awesome guide for ES6 arrow syntax](https://medium.freecodecamp.org/when-and-why-you-should-use-es6-arrow-functions-and-when-you-shouldnt-3d851d7f0b26). You will see more and more arrow functions as you progress deeper into JavaScript. Use the [function-conversion.js](assignments/function-conversion.js) file as a helper challenge to showcase some of the differences between ES5 and ES6 syntax. 50 | 51 | ### Stretch 52 | 53 | - Move on to tomorrow's content and start studying callbacks, write a few of your own to get the hang of it. 54 | - Look at array methods like .map(), .reduce(), .filter(). use them on the data in the arrays assignment to accomplish the same things you did with the ES5 for loop. 55 | -------------------------------------------------------------------------------- /assignments/arrays.js: -------------------------------------------------------------------------------- 1 | // To help us use arrays with real world problems we are going to simulate a used car dealer that has 50 cars in their inventory. 2 | 3 | // The car dealer has all of their inventory housed in the array seen below. Scroll down past the data to find out how you can help the car dealer. 4 | 5 | let inventory = [ 6 | { id: 1, car_make: "Lincoln", car_model: "Navigator", car_year: 2009 }, 7 | { id: 2, car_make: "Mazda", car_model: "Miata MX-5", car_year: 2001 }, 8 | { id: 3, car_make: "Land Rover", car_model: "Defender Ice Edition", car_year: 2010 }, 9 | { id: 4, car_make: "Honda", car_model: "Accord", car_year: 1983 }, 10 | { id: 5, car_make: "Mitsubishi", car_model: "Galant", car_year: 1990 }, 11 | { id: 6, car_make: "Honda", car_model: "Accord", car_year: 1995 }, 12 | { id: 7, car_make: "Smart", car_model: "Fortwo", car_year: 2009 }, 13 | { id: 8, car_make: "Audi", car_model: "4000CS Quattro", car_year: 1987 }, 14 | { id: 9, car_make: "Ford", car_model: "Windstar", car_year: 1996 }, 15 | { id: 10, car_make: "Mercedes-Benz", car_model: "E-Class", car_year: 2000 }, 16 | { id: 11, car_make: "Infiniti", car_model: "G35", car_year: 2004 }, 17 | { id: 12, car_make: "Lotus", car_model: "Esprit", car_year: 2004 }, 18 | { id: 13, car_make: "Chevrolet", car_model: "Cavalier", car_year: 1997 }, 19 | { id: 14, car_make: "Dodge", car_model: "Ram Van 1500", car_year: 1999 }, 20 | { id: 15, car_make: "Dodge", car_model: "Intrepid", car_year: 2000 }, 21 | { id: 16, car_make: "Mitsubishi", car_model: "Montero Sport", car_year: 2001 }, 22 | { id: 17, car_make: "Buick", car_model: "Skylark", car_year: 1987 }, 23 | { id: 18, car_make: "Geo", car_model: "Prizm", car_year: 1995 }, 24 | { id: 19, car_make: "Oldsmobile", car_model: "Bravada", car_year: 1994 }, 25 | { id: 20, car_make: "Mazda", car_model: "Familia", car_year: 1985 }, 26 | { id: 21, car_make: "Chevrolet", car_model: "Express 1500", car_year: 2003 }, 27 | { id: 22, car_make: "Jeep", car_model: "Wrangler", car_year: 1997 }, 28 | { id: 23, car_make: "Eagle", car_model: "Talon", car_year: 1992 }, 29 | { id: 24, car_make: "Toyota", car_model: "MR2", car_year: 2003 }, 30 | { id: 25, car_make: "BMW", car_model: "525", car_year: 2005 }, 31 | { id: 26, car_make: "Cadillac", car_model: "Escalade", car_year: 2005 }, 32 | { id: 27, car_make: "Infiniti", car_model: "Q", car_year: 2000 }, 33 | { id: 28, car_make: "Suzuki", car_model: "Aerio", car_year: 2005 }, 34 | { id: 29, car_make: "Mercury", car_model: "Topaz", car_year: 1993 }, 35 | { id: 30, car_make: "BMW", car_model: "6 Series", car_year: 2010 }, 36 | { id: 31, car_make: "Pontiac", car_model: "GTO", car_year: 1964 }, 37 | { id: 32, car_make: "Dodge", car_model: "Ram Van 3500", car_year: 1999 }, 38 | { id: 33, car_make: "Jeep", car_model: "Wrangler", car_year: 2011 }, 39 | { id: 34, car_make: "Ford", car_model: "Escort", car_year: 1991 }, 40 | { id: 35, car_make: "Chrysler", car_model: "300M", car_year: 2000 }, 41 | { id: 36, car_make: "Volvo", car_model: "XC70", car_year: 2003 }, 42 | { id: 37, car_make: "Oldsmobile", car_model: "LSS", car_year: 1997 }, 43 | { id: 38, car_make: "Toyota", car_model: "Camry", car_year: 1992 }, 44 | { id: 39, car_make: "Ford", car_model: "Econoline E250", car_year: 1998 }, 45 | { id: 40, car_make: "Lotus", car_model: "Evora", car_year: 2012 }, 46 | { id: 41, car_make: "Ford", car_model: "Mustang", car_year: 1965 }, 47 | { id: 42, car_make: "GMC", car_model: "Yukon", car_year: 1996 }, 48 | { id: 43, car_make: "Mercedes-Benz", car_model: "R-Class", car_year: 2009 }, 49 | { id: 44, car_make: "Audi", car_model: "Q7", car_year: 2012 }, 50 | { id: 45, car_make: "Audi", car_model: "TT", car_year: 2008 }, 51 | { id: 46, car_make: "Oldsmobile", car_model: "Ciera", car_year: 1995 }, 52 | { id: 47, car_make: "Volkswagen", car_model: "Jetta", car_year: 2007 }, 53 | { id: 48, car_make: "Dodge", car_model: "Magnum", car_year: 2008 }, 54 | { id: 49, car_make: "Chrysler", car_model: "Sebring", car_year: 1996 }, 55 | { id: 50, car_make: "Lincoln", car_model: "Town Car", car_year: 1999 } 56 | ]; 57 | 58 | // Example 1 for loop: 59 | 60 | // const arr = ['a', 'b', 'c', 'd']; 61 | // for (let i = 0; i < arr.length; i++) { 62 | // console.log(arr[i]); 63 | // } 64 | // 'a' 'b' 'c' 'd' 65 | 66 | // Example 2 for loop: 67 | 68 | // const arr = [12, 13, 14, 15]; 69 | // const evens = []; 70 | // for (let i = 0; i < arr.length; i++) { 71 | // if (arr[i] % 2 === 0) { evens.push(arr[i]); } 72 | // } 73 | // console.log(evens); 74 | // [12, 14] 75 | 76 | // ==== Challenge 1 ==== 77 | // The dealer can't recall the information for a car with an id of 33 on his lot. Help the dealer find out which car has an id of 33 by logging the car's year, make, and model in the console log provided to you below: 78 | console.log(`Car 33 is a *car year goes here* *car make goes here* *car model goes here*`); 79 | 80 | // ==== Challenge 2 ==== 81 | // The dealer needs the information on the last car in their inventory. What is the make and model of the last car in the inventory? Log the make and model into the console. 82 | let lastCar = 0; 83 | console.log(); 84 | 85 | // ==== Challenge 3 ==== 86 | // The marketing team wants the car models listed alphabetically on the website. Sort all the car model names into alphabetical order and log the results in the console 87 | let carModels = []; 88 | let carModelsSorted = []; 89 | console.log(); 90 | 91 | // ==== Challenge 4 ==== 92 | // The accounting team needs all the years from every car on the lot. Create a new array from the dealer data containing only the car years and log the result in the console. 93 | let carYears = []; 94 | console.log(); 95 | 96 | // ==== Challenge 5 ==== 97 | // The car lot manager needs to find out how many cars are older than the year 2000. Using the carYears array you just created, find out how many cars were made before the year 2000 by populating the array oldCars and logging it's length. 98 | let oldCars = []; 99 | console.log(); 100 | 101 | // ==== Challenge 6 ==== 102 | // A buyer is interested in seeing only BMW and Audi cars within the inventory. Return an array that only contains BMW and Audi cars. Once you have populated the BMWAndAudi array, use JSON.stringify() to show the results of the array in the console. 103 | let BMWAndAudi = []; 104 | console.log(); 105 | -------------------------------------------------------------------------------- /assignments/function-conversion.js: -------------------------------------------------------------------------------- 1 | // Take the commented ES5 syntax and convert it to ES6 arrow Syntax 2 | 3 | // let myFunction = function () { 4 | // console.log("Function was invoked!"); 5 | // }; 6 | // myFunction(); 7 | 8 | // let anotherFunction = function (param) { 9 | // return param; 10 | // }; 11 | // anotherFunction("Example"); 12 | 13 | // let add = function (param1, param2) { 14 | // return param1 + param2; 15 | // }; 16 | // add(1,2); 17 | 18 | // let subtract = function (param1, param2) { 19 | // return param1 - param2; 20 | // }; 21 | // subtract(1,2); 22 | 23 | 24 | // Stretch 25 | 26 | // exampleArray = [1,2,3,4]; 27 | // const triple = exampleArray.map(function (num) { 28 | // return num * 3; 29 | // }); 30 | // console.log(triple); -------------------------------------------------------------------------------- /assignments/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | JS I 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |

Check your work in the console!

17 | 18 | -------------------------------------------------------------------------------- /assignments/objects.js: -------------------------------------------------------------------------------- 1 | // Let's get some practice writing a few objects for a new group of interns at a small business. 2 | 3 | // ==== Challenge 1: Writing Objects ==== 4 | // HR needs some information on the new interns put into a database. Given an id, email, first name, and gender. Create an object for each person in the company list: 5 | 6 | // 1, mmelloy0@psu.edu, Mitzi, F 7 | // 2, kdiben1@tinypic.com, Kennan, M 8 | // 3, kmummery2@wikimedia.org, Keven, M 9 | // 4, gmartinson3@illinois.edu, Gannie, M 10 | // 5, adaine5@samsung.com, Antonietta, F 11 | 12 | // Example format of an intern object: 1, examples@you.edu, Example, F 13 | const example = { 14 | id: 0, 15 | name: "Example", 16 | email: "examples@you.edu", 17 | gender: "F", 18 | } 19 | 20 | // Write your intern objects here: 21 | 22 | 23 | // ==== Challenge 2: Reading Object Data ==== 24 | // Once your objects are created, log out the following requests from HR into the console: 25 | 26 | // Mitzi's name 27 | 28 | // Kennan's ID 29 | 30 | // Keven's email 31 | 32 | // Gannie's name 33 | 34 | // Antonietta's Gender 35 | 36 | // ==== Challenge 3: Object Methods ==== 37 | // Give Kennan the ability to say "Hello, my name is Kennan!" Use the console.log provided as a hint. 38 | // console.log(kennan.speak()); 39 | 40 | // Antonietta loves math, give her the ability to multiply two numbers together and return the product. Use the console.log provided as a hint. 41 | //console.log(antonietta.multiplyNums(3,4)); 42 | 43 | // === Great work! === Head over to the the arrays.js. You may come back and attempt the Stretch Challenge once you have completed the challenges in arrays.js and function-conversion.js. 44 | 45 | // ==== Stretch Challenge: Nested Objects and the this keyword ==== 46 | 47 | // 1. Create a parent object with properties for name and age. Make the name Susan and the age 70. 48 | // 2. Nest a child object in the parent object with name and age as well. The name will be George and the age will be 50. 49 | // 3. Nest a grandchild object in the child object with properties for name and age. The name will be Sam and the age will be 30 50 | // 4. Give each of the objects the ability to speak their names using the this keyword. 51 | 52 | const parent = {} 53 | 54 | // Log the parent object's name 55 | 56 | // Log the child's age 57 | 58 | // Log the name and age of the grandchild 59 | 60 | // Have the parent speak 61 | 62 | // Have the child speak 63 | 64 | // Have the grandchild speak 65 | --------------------------------------------------------------------------------