├── .gitignore ├── README.md ├── JS-04 - Arrays and Loops ├── js │ └── main.js ├── index.html └── README.md ├── JS-10 - Unit Tests in JavaScript ├── js │ ├── calculator │ │ ├── calculator.js │ │ └── calculator.test.js │ ├── user │ │ ├── user.js │ │ ├── user-controller.test.js │ │ └── user-controller.js │ ├── package.json │ └── jest.config.js └── README.md ├── callbacks_promises.js ├── JS-07 - Fetch & Web Storage APIs ├── js │ ├── main.js │ ├── data.json │ ├── main2.js │ └── render.js ├── index.html └── README.md ├── JS-03 - Control Flow └── README.md ├── JS-02 - Declare and Use Functions └── README.md ├── JS-05 - Operators and Expressions └── README.md ├── JS-01 - Data Types and Variables └── README.md ├── JS-09 - Introduction to NPM └── README.md ├── JS-06 - DOM Manipulation └── README.md └── JS-08 - Introduction to Object Oriented Programming └── README.md /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | *node_modules/* -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # JS 2 | Intro to JS Module 3 | -------------------------------------------------------------------------------- /JS-04 - Arrays and Loops/js/main.js: -------------------------------------------------------------------------------- 1 | let fila = ["Sofia", "David", "Juan"]; 2 | console.log("Parte #1"); 3 | console.log(fila); 4 | fila.push("Sara"); 5 | fila.push("Augustin"); 6 | fila.shift(); 7 | console.log("Parte #2"); 8 | console.log(fila); 9 | fila.splice(1,0, "Renata"); 10 | fila.push("Elena"); 11 | console.log("Parte #3"); 12 | console.log(fila); 13 | -------------------------------------------------------------------------------- /JS-10 - Unit Tests in JavaScript/js/calculator/calculator.js: -------------------------------------------------------------------------------- 1 | var add = function(a, b) { 2 | return a + b; 3 | } 4 | var subtract = function(a, b) { 5 | return a - b; 6 | } 7 | 8 | function divide(a, b){ 9 | return a / b; 10 | } 11 | 12 | function multiply(a, b){ 13 | return a * b; 14 | } 15 | 16 | // When you want to use the divide or multiple function, remember to add it to the export here 17 | module.exports = {add: add, subtract: subtract}; 18 | -------------------------------------------------------------------------------- /JS-10 - Unit Tests in JavaScript/js/user/user.js: -------------------------------------------------------------------------------- 1 | class User { 2 | constructor(id, name, email) { 3 | this.id = id; 4 | this.name = name; 5 | this.email = email; 6 | } 7 | 8 | getId(){ 9 | return this.id; 10 | } 11 | 12 | getName(){ 13 | return this.name; 14 | } 15 | 16 | getEmail(){ 17 | return this.email; 18 | } 19 | 20 | equalsTo(user){ 21 | return user.id === this.id; 22 | } 23 | 24 | } 25 | 26 | module.exports = User; -------------------------------------------------------------------------------- /JS-10 - Unit Tests in JavaScript/js/calculator/calculator.test.js: -------------------------------------------------------------------------------- 1 | const calculator = require('./calculator'); 2 | 3 | test('adds 1 + 2 to equal 3', () => { 4 | expect(calculator.add(1, 2)).toBe(3); 5 | }); 6 | 7 | test('adds -4 + 8 to equal 4', () => { 8 | expect(calculator.add(-4, 8)).toBe(4); 9 | }); 10 | 11 | test('subtract 5 - 4 to equal 1', () => { 12 | expect(calculator.subtract(5, 4)).toBe(1); 13 | }); 14 | 15 | test('subtract -5 - -10 to equal 5', () => { 16 | expect(calculator.subtract(-5, -10)).toBe(5); 17 | }); -------------------------------------------------------------------------------- /callbacks_promises.js: -------------------------------------------------------------------------------- 1 | // Callback example 2 | 3 | firstRequest(function(response) { 4 | secondRequest(response, function(nextResponse) { 5 | thirdRequest(nextResponse, function(finalResponse) { 6 | console.log('Final response: ' + finalResponse); 7 | }, failureCallback); 8 | }, failureCallback); 9 | }, failureCallback); 10 | 11 | // Promise example 12 | firstRequest() 13 | .then(function(response) { 14 | return secondRequest(response); 15 | }).then(function(nextResponse) { 16 | return thirdRequest(nextReponse); 17 | }).then(function(finalResponse) { 18 | console.log('Final response ' + finalResponse); 19 | }).catch(failureCallback) -------------------------------------------------------------------------------- /JS-10 - Unit Tests in JavaScript/js/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "js-10-tests", 3 | "version": "1.0.0", 4 | "description": "JavaScript unit test with Jest", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "jest" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/generation-org/JS.git" 12 | }, 13 | "keywords": [ 14 | "JavaScript", 15 | "Testing", 16 | "Jest" 17 | ], 18 | "author": "Santiago Carrillo", 19 | "license": "ISC", 20 | "bugs": { 21 | "url": "https://github.com/generation-org/JS/issues" 22 | }, 23 | "homepage": "https://github.com/generation-org/JS#readme", 24 | "devDependencies": { 25 | "jest": "^25.2.4" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /JS-10 - Unit Tests in JavaScript/js/user/user-controller.test.js: -------------------------------------------------------------------------------- 1 | const UserController = require("./user-controller"); 2 | const User = require("./user"); 3 | 4 | const userController = new UserController(); 5 | 6 | test('add user to userController', () => { 7 | let user = new User(1234,"Santiago", "santiago@generation.org"); 8 | userController.add(user); 9 | expect(userController.getUsers()).toContain(user); 10 | }); 11 | 12 | test('remove user to userController', () => { 13 | let user = new User(1234,"Santiago", "santiago@generation.org"); 14 | userController.add(user); 15 | userController.remove(user); 16 | expect(userController.users).not.toContain(user); 17 | }); 18 | 19 | 20 | -------------------------------------------------------------------------------- /JS-04 - Arrays and Loops/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Javascript Arrays and Loops 7 | 8 | 9 | 10 |
11 | 12 |
13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /JS-10 - Unit Tests in JavaScript/js/user/user-controller.js: -------------------------------------------------------------------------------- 1 | class UserController{ 2 | 3 | constructor(){ 4 | this.users = []; 5 | } 6 | 7 | getUsers(){ 8 | return this.users; 9 | } 10 | 11 | add(user){ 12 | this.users.push(user); 13 | } 14 | 15 | remove(user){ 16 | this.users = this.users.filter(function(ele){ 17 | return ele != user; 18 | }); 19 | } 20 | 21 | findByEmail(email){ 22 | for (let i = 0; i < this.users.length; i++) { 23 | if(this.users[i].email === email) 24 | return this.users[i]; 25 | } 26 | } 27 | 28 | findById(id){ 29 | for (let i = 0; i < this.users.length; i++) { 30 | if(this.users[i].id === id) 31 | return this.users[i]; 32 | } 33 | } 34 | 35 | 36 | } 37 | 38 | 39 | module.exports = UserController; 40 | -------------------------------------------------------------------------------- /JS-07 - Fetch & Web Storage APIs/js/main.js: -------------------------------------------------------------------------------- 1 | function addItem(item) { 2 | const itemHTML = '
\n' + 3 | '
\n' + 4 | '
' + item.name + '
\n' + 5 | '

' + item.pantone_value + '

\n' + 6 | '
' + item.color + '
\n' + 7 | '
\n' + 8 | '
\n' + 9 | '
'; 10 | const itemsContainer = document.querySelector("#list-items"); 11 | itemsContainer.innerHTML += itemHTML; 12 | } 13 | 14 | // after fetching the colors, call addItem with each color 15 | function fetchColorsList() { 16 | fetch('data.json') 17 | .then((response) => response.json()) // transforms data into json 18 | .then(response => { 19 | for (let i = 0; i < response.data.length; i++) { 20 | addItem(response.data[i]); 21 | } 22 | 23 | const colorsJson = JSON.stringify(response.data); 24 | localStorage.setItem('colors', colorsJson); 25 | }) 26 | } 27 | 28 | function loadColorsFromStorage() { 29 | if (localStorage.getItem('colors')) { 30 | const colorsJson = localStorage.getItem('colors'); 31 | const colors = JSON.parse(colorsJson); 32 | itemsContainer.innerHTML = ''; 33 | for (let i = 0; i < colors.length; i++) { 34 | addItem(colors[i]); 35 | } 36 | } 37 | } 38 | 39 | fetchColorsList(); 40 | loadColorsFromStorage(); -------------------------------------------------------------------------------- /JS-10 - Unit Tests in JavaScript/README.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | # JS - 10 Unit Tests in JavaScript 4 | 5 |
6 |
7 | 8 | ## Part 1: Verify and Run Tests 9 | 1. Download the file and navigate using the terminal inside the *js* folder. 10 | 2. Run the following command to install the dependencies using NPM: 11 | ```bash 12 | npm install 13 | ``` 14 | 3. Run the unit tests and verify the results: 15 | ```bash 16 | npm test 17 | ``` 18 | 4. Open the *js* folder on Visual Studio Code and verify the existing test. 19 | 20 | ## Part 2: Implement Calculator test 21 | 1. Implement 2 unit tests for the *divide* function. 22 | 2. Implement 2 unit tests for the *multiply* function. 23 | 24 | ## Part 3: Implement UserController test 25 | 1. Implement 1 test for the *add* function that verifies a user that is not in the users' list. 26 | 2. Implement 1 test for the *remove* function that verifies a user that is not in the users' list. 27 | 3. Implement 2 unit tests for the *findByEmail* function. 28 | 4. Implement 2 unit tests for the *findById* function. 29 | 30 | ## Challenge Yourself 31 | In Test Driven Development you write the first test that fails, and then you add the code so test can pass. 32 | 1. Write a unit test to verify the function *divide* by passing 0 as the second argument. 33 | 2. Fix the divide function so the test passes and it does handle the case for division by 0. 34 | -------------------------------------------------------------------------------- /JS-07 - Fetch & Web Storage APIs/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | Colors List 12 | 13 | 14 | 15 |
16 |
17 |
18 |

My Colors list

19 |
20 |
21 |
22 | 23 |
24 |
25 | 26 | 27 | 29 | 31 | 33 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /JS-07 - Fetch & Web Storage APIs/README.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | # JS-07 - Fetch & Web Storage APIs 5 | 6 |
7 |
8 | 9 | 10 | ## Part 1: Using the Fetch API 11 | 12 | 1. Download the *js* folder and the *index.html* files from this repository. 13 | 2. Open the *index.html* in the browser and observe what it does. 14 | 3. Open the *js* folder and the *index.html* with your code editor of choice and analyze the functionality and the code. 15 | 4. Implement the function *fetchColorsList* using the fetch API to download the full colors list from the following endpoint: 16 | https://reqres.in/api/unknown 17 | 5. Connect the *fetchColorsList* with the *addItem* funciton so the colors list is filled and displayed in the *index.html* page. 18 | 19 | ## Part 2: Using the Web Storage API 20 | 1. Modify the *fetchColorsList* function so when the data is downloaded from the API, the colors list is stored using the local storage. 21 | 2. Implement the *loadColorsFromStorage* function so the color values are loaded from the local storage. 22 | 3. Open the developer tools and verify that the data is stored in the local storage. 23 | 4. Test your application without connection to the internet and verify that the colors list is loaded. 24 | 25 | ## Challenge Yourself 26 | 1. Add a clear button that removes all the elements from the list. 27 | 2. Add a load button that calls the *fetchColorsList* function and loads the colors again. 28 | -------------------------------------------------------------------------------- /JS-07 - Fetch & Web Storage APIs/js/data.json: -------------------------------------------------------------------------------- 1 | { 2 | "page": 1, 3 | "per_page": 6, 4 | "total": 12, 5 | "total_pages": 2, 6 | "data": [{ 7 | "id": 1, 8 | "name": "a color", 9 | "year": 2000, 10 | "color": "#98B2D1", 11 | "pantone_value": "15-4020" 12 | }, 13 | { 14 | "id": 2, 15 | "name": "fuchsia rose", 16 | "year": 2001, 17 | "color": "#C74375", 18 | "pantone_value": "17-2031" 19 | }, 20 | { 21 | "id": 3, 22 | "name": "true red", 23 | "year": 2002, 24 | "color": "#BF1932", 25 | "pantone_value": "19-1664" 26 | }, 27 | { 28 | "id": 4, 29 | "name": "aqua sky", 30 | "year": 2003, 31 | "color": "#7BC4C4", 32 | "pantone_value": "14-4811" 33 | }, 34 | { 35 | "id": 5, 36 | "name": "tigerlily", 37 | "year": 2004, 38 | "color": "#E2583E", 39 | "pantone_value": "17-1456" 40 | }, 41 | { 42 | "id": 6, 43 | "name": "blue turquoise", 44 | "year": 2005, 45 | "color": "#53B0AE", 46 | "pantone_value": "15-5217" 47 | } 48 | ], 49 | "ad": { 50 | "company": "StatusCode Weekly", 51 | "url": "http://statuscode.org/", 52 | "text": "A weekly newsletter focusing on software development, infrastructure, the server, performance, and the stack end of things." 53 | } 54 | } -------------------------------------------------------------------------------- /JS-07 - Fetch & Web Storage APIs/js/main2.js: -------------------------------------------------------------------------------- 1 | const itemsContainer = document.getElementById("list-items"); 2 | 3 | function addItem(item) { 4 | const itemHTML = '
\n' + 5 | '
\n' + 6 | '
' + item.name + '
\n' + 7 | '

' + item.pantone_value + '

\n' + 8 | '
' + item.color + '
\n' + 9 | '
\n' + 10 | '
\n' + 11 | '
'; 12 | itemsContainer.innerHTML += itemHTML; 13 | } 14 | 15 | // runs if online 16 | function fetchColorsList() { 17 | fetch('https://reqres.in/api/data') 18 | .then((response) => response.json()) // transforms data into json 19 | .then(response => { 20 | // reset html so page is blank 21 | itemsContainer.innerHTML = ''; 22 | for (let i = 0; i < response.data.length; i++) { 23 | addItem(response.data[i]); 24 | } 25 | const colorsJson = JSON.stringify(response.data); 26 | localStorage.setItem('colors', colorsJson); 27 | }); 28 | } 29 | 30 | // render if offline 31 | function loadColorsFromStorage() { 32 | if (localStorage.getItem('colors')) { 33 | const colorsJson = localStorage.getItem('colors'); 34 | const colors = JSON.parse(colorsJson); 35 | // reset html 36 | itemsContainer.innerHTML = ''; 37 | for (let i = 0; i < colors.length; i++) { 38 | addItem(colors[i]); 39 | } 40 | } 41 | } 42 | fetchColorsList(); 43 | loadColorsFromStorage(); -------------------------------------------------------------------------------- /JS-07 - Fetch & Web Storage APIs/js/render.js: -------------------------------------------------------------------------------- 1 | const itemsContainer = document.getElementById("list-items"); 2 | 3 | function addItem(item) { 4 | const itemHTML = '
\n' + 5 | '
\n' + 6 | '
' + item.name + '
\n' + 7 | '

' + item.pantone_value + '

\n' + 8 | '
' + item.color + '
\n' + 9 | '
\n' + 10 | '
\n' + 11 | '
'; 12 | itemsContainer.innerHTML += itemHTML; 13 | } 14 | 15 | function render(items) { 16 | // reset html 17 | itemsContainer.innerHTML = ''; 18 | for (let i = 0; i < items.length; i++) { 19 | addItem(items[i]); 20 | } 21 | } 22 | 23 | addItem(); 24 | 25 | // remove hard coded data once fetch is working 26 | // addItem({ 27 | // "id": 1, 28 | // "name": "cerulean", 29 | // "year": 2000, 30 | // "color": "#98B2D1", 31 | // "pantone_value": "15-4020" 32 | // }); 33 | 34 | function fetchColorsList() { 35 | fetch('https://reqres.in/api/unknown') 36 | .then((response) => response.json()) // transforms data into json 37 | .then(response => { 38 | render(response.data); 39 | const colorsJson = JSON.stringify(response.data); 40 | localStorage.setItem('colors', colorsJson); 41 | }); 42 | } 43 | 44 | function loadColorsFromStorage() { 45 | if (localStorage.getItem('colors')) { 46 | const colorsJson = localStorage.getItem('colors'); 47 | const colors = JSON.parse(colorsJson); 48 | render(colors); 49 | } 50 | } 51 | fetchColorsList(); 52 | loadColorsFromStorage(); -------------------------------------------------------------------------------- /JS-04 - Arrays and Loops/README.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | # JS-04 Arrays and Loops 4 | 5 |
6 |
7 | 8 | Open up a text editor of your choice and complete the following Javascript exercises. 9 | 10 | ### Exercise #1 11 | 12 | #### Part 1 13 | There are three people waiting for the bank. Their names, in order, are Sofia, David, and Juan. 14 | Create an array that has these three names in order. 15 | 16 | #### Part 2 17 | 18 | Two more people get added to the back of the line - Sara and Augustin. 19 | The first person in line is called to the teller. 20 | What does the queue look like? 21 | 22 | #### Part 3 23 | 24 | It turns out David was saving a spot for his friend Renata. She shows up and goes behind him in the line. One more person (Elena) shows up and goes to the end of the line. 25 | What does the queue look like? 26 | 27 | ### Exercise #2 28 | 29 | Write a JavaScript program to construct the following pattern, using a nested for loop. 30 | 31 | ``` 32 | * 33 | * * 34 | * * * 35 | * * * * 36 | * * * * * 37 | ``` 38 | ### Exercise #3 39 | 40 | Write while loops to do the following: 41 | ``` 42 | – Repeatedly print the value of the variable xValue, decreasing it by 0.5 each time, 43 | as long as xValue remains positive. 44 | ``` 45 | ``` 46 | - Print all the odd numbers between 1 - 100. 47 | ``` 48 | ``` 49 | - Write a method with a while loop to print 1 through n in square brackets. 50 | For example, if n = 6 print [1] [2] [3] [4] [5] [6] 51 | ``` 52 | ``` 53 | - Write a method with a while loop that computes the sum of first n positive integers: 54 | sum = 1 + 2 + 3 + … + n 55 | Examples: 56 | n = 5 sum = 15 57 | n = 19 sum = 190 58 | ``` 59 | -------------------------------------------------------------------------------- /JS-03 - Control Flow/README.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | # JS-03 Control Flow 4 | 5 |
6 |
7 | 8 | Open up a text editor of your choice and complete the following Javascript exercises. 9 | 10 | ### Exercise #1 11 | 12 | We'll build the industry plant calendar from the opening exercise. 13 | 14 | #### Part 1 15 | First, build a function called "businessHours". Similar to the day of the week class exercise, this function should accept two parameters: dayNumber and hourNumber. 16 | 17 | By reading the dayNumber and the hourNumber, your program should print whether it is business hours or not. It should return true if it is business hours, and false if not. 18 | 19 | `function businessHours(dayNumber, hourNumber)` 20 | 21 | Obs: consider business hours 9am - 6pm. Use the 24-hour clock system (6pm = 18). 22 | 23 | #### Part 2 24 | 25 | Now, create the function getDayNumber. 26 | 27 | It should accept two parameters: janFirstDayNumber and yearDayNumber. 28 | 29 | The yearDayNumber will be an int ranging from 0 to 365. 30 | 31 | janFirstDayNumber will be an int ranging from 0 to 6, representing the day of the week of January 1st. 32 | 33 | Your function should then calculate and return the day of the week corresponding to the yearDayNumber passed. 34 | 35 | Hint: use the remainder operator (%), dividing your yearDayNumber by 7. 36 | 37 | #### Part 3 38 | 39 | Finally, build a function that, from a yearDayNumber (int, 0-365) and an hourNumber (int, 0-23), returns true if it is business hours. 40 | 41 | ### Challenge 42 | 43 | Replace the yearDayNumber and hourNumber parameters with a Date() variable. 44 | 45 | Hints: 46 | 47 | https://www.w3schools.com/jsref/jsref_gethours.asp 48 | 49 | https://www.w3schools.com/jsref/jsref_getday.asp 50 | -------------------------------------------------------------------------------- /JS-02 - Declare and Use Functions/README.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | # JS-02 Declare and Use Functions 4 | 5 |
6 |
7 | 8 | 9 | Before each exercise, make sure you think about the 4 steps of a function. 10 | 11 | ``` 12 | 1. Understand the purpose of the function. 13 | 2. Define the data that comes into the function from the caller (in the form of parameters)! 14 | 3. Define what data variables are needed inside the function to accomplish its goal. 15 | 4. Decide the set of steps that the program will use to accomplish this goal (the algorithm). 16 | ``` 17 | 18 | Start coding up your answer once you have completed step 4. 19 | 20 | ### Exercise #1 21 | 22 | Maria has to calculate the cost of her payments for the month. For every transation there is a $3 fee and a 0.1% (0.01) interest fee. 23 | Can you help her calculate her costs? 24 | 25 | Return the value of what she should be paying. 26 | 27 | ### Exercise #2 28 | 29 | #### Part 1 30 | Ed would like a way to input 3 names of his friends. 31 | The output should be a console greeting to his friends saying: 32 | `Welcome {name1}, {name2}, {name3}.` 33 | 34 | #### Part 2 35 | Ed would like to create a function that takes in a birth year and returns the age. 36 | 37 | i.e. 1990 returns 30 38 | 39 | #### Part 3 40 | Ed would like to create a function that prints out, 41 | `Welcome {name1}, you are {age1}. Welcome {name2}, you are {age2}. Welcome {name3}, you are {age3}.` 42 | 43 | ### Challenge Yourself 44 | A teacher wants to create a rubric for grading. The rubric is from 0 - 11. 45 | 46 | #### Part 1 47 | A student passes if they have a score greater than or equal to 5. 48 | Create a function that returns a boolean true or false. 49 | 50 | #### Part 2 51 | A student has an excellent grade if they score higher than 8. 52 | Add on to your function to print out "Excellent" for scores greater than 8. 53 | 54 | #### Part 3 55 | A student has a perfect grade if their score is 11. 56 | Add on to your function to print out "Perfect" for a score of 11. 57 | 58 | -------------------------------------------------------------------------------- /JS-05 - Operators and Expressions/README.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | # JS-05 Conditions and Expressions 4 | 5 |
6 |
7 | 8 | ### Exercise #1 9 | 10 | You have a list of names: 11 | `var names = ["Maria", "Antony", "Joy", "Juan"]` 12 | 13 | #### Part 1 14 | Write a function to insert a name to the end of the list. 15 | Add your own name to the end of the list. 16 | 17 | #### Part 2 18 | Write a function that takes in a name and checks if the list has that name. It should return back a boolean - true/false. 19 | 20 | #### Part 3 21 | Write a function that takes in a list of names. This function should compare the list taken into the `names` list you currently have. 22 | The function should pass back an array with the names that are in both lists. 23 | 24 | #### Part 4 25 | Write a function that takes in a list of names and returns a list of Integers with the length of the names in the same order as received. *Hint* use the [push function](https://www.w3schools.com/jsref/jsref_push.asp) 26 | 27 | 28 | ### Exercise #2 29 | 30 | What do the following expressions evaluate to? 31 | 32 | ``` 33 | false || (true && false); 34 | true || (11 + 12); 35 | (31 + 22) || true; 36 | true && (1 + 7); 37 | false && (3 + 4); 38 | (1 + 2) && true; 39 | (32 * 4) >= 129; 40 | false !== !true; 41 | true === 4; 42 | false === (847 === '847'); 43 | false === (887 == '887'); 44 | (!true || (!(100 / 5) === 20) || ((328 / 4) === 82)) || false; 45 | ``` 46 | 47 | ### Exercise #3 48 | Write a function that logs whether a number is between 0 and 25 (inclusive), between 26 and 100 (inclusive), greater than 100, or less than 0. 49 | 50 | ``` 51 | numberRange(25); // '25 is between 0 and 25' 52 | numberRange(75); // '75 is between 26 and 100' 53 | numberRange(125); // '125 is greater than 100' 54 | numberRange(-25); // '-25 is less than 0' 55 | ``` 56 | 57 | ## Additional Exercises 58 | 59 | What is shown on the console when f is console.log'd? 60 | 61 | ``` 62 | var a; 63 | var b = null; 64 | var c = undefined; 65 | var d = 4; 66 | var e = 'five'; 67 | var f = a || b || c || d || e; 68 | 69 | console.log(f); 70 | ``` 71 | -------------------------------------------------------------------------------- /JS-01 - Data Types and Variables/README.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | # JS-1 Data Types and Variables 4 | 5 |
6 |
7 | 8 | 9 | ## Part 1: Type Converter 10 | 11 | Work in pairs to complete the following table: 12 | 13 | | Value to be converted | number() | String() | Boolean() | 14 | |-----------------------|----------|----------|-----------| 15 | | false | | | | 16 | | true | | | | 17 | | 0 | | | | 18 | | 1 | | | | 19 | | “0” | | | | 20 | | “000” | | | | 21 | | “1” | | | | 22 | | NaN | | | | 23 | | Infinity | | | | 24 | | -Infinity | | | | 25 | | “” | | | | 26 | | “20” | | | | 27 | | “Twenty” | | | | 28 | | null | | | | 29 | | undefinited | | | | 30 | 31 | 32 | ## Part 2: New contender 33 | 34 | Complete each challenge individually. Use all resources available. 35 | 36 | ### Challenge 1: Create an Age Calculator 37 | 38 | Store your birth year in a variable. 39 | Store a future year in another variable. 40 | Calculate your possible ages for the future year and display it in the console. 41 | Example: If you were born in 1988, then in 2026 you’ll be 37 or 38 (depending on the month in 2026). 42 | 43 | 44 | 45 | ### Challenge 2: Create an information card 46 | 47 | Create a card holding 3 pieces of information about a person, such as Name, Location, and Hobby. 48 | Each piece of information should be a variable. 49 | Display the card with the information in the correct place. 50 | Example: “Hi, my name is John. I live in South Africa and enjoy drinking homemade wine.” 51 | 52 | -------------------------------------------------------------------------------- /JS-09 - Introduction to NPM/README.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | # JS - 09 Introduction to NPM 4 | 5 |
6 |
7 | 8 | ## Using Axios 9 | 10 | Git clone the exercise folder (https://github.com/generation-org/NPM-Practice). 11 | 12 | Make sure you have installed NPM properly. You can reference [here](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm) if you are having trouble with your installation. 13 | 14 | This folder doesn't have NPM initialized. Create an NPM project and fill in as many fields as you can with information to create the package.json. 15 | (Hint use: `npm init`) 16 | 17 | To prepare for this exercise, we will need to install json-server. 18 | 19 | Run the command: 20 | `npm install -g json-server` 21 | 22 | Run the command: 23 | `npm install axios --save` 24 | 25 | We will be using JSON Server to create a fake REST API. 26 | 27 | Check out the test user data in this folder - `users.json`. 28 | 29 | #### Starting JSON server 30 | The JSON server is started with the json-server, which we have installed globally. 31 | 32 | `$ json-server --watch users.json` 33 | The --watch option is used to specify the data for the server. 34 | 35 | Go to http://localhost:3000/users to see all the users. 36 | 37 | Open another terminal to the project folder. 38 | Use the curl command to get the user with Id 2. 39 | ``` 40 | $ curl localhost:3000/users/2/ 41 | { 42 | "id": 2, 43 | "first_name": "Song", 44 | "last_name": "Gonzalez", 45 | "email": "sgo@gmail.com" 46 | } 47 | ``` 48 | 49 | #### Getting all users 50 | Go to `get_users.js` and complete the commented `let res = ...` in order to see all users 51 | 52 | Call `node get_users.js` to see all users. 53 | 54 | #### Posting a new user 55 | Go to `post_user.js` and complete the commented `let res = ...` in order to post a new user. 56 | 57 | To post a new user, call `node post_user.js`. 58 | 59 | To add different names for new users, update the `params` field in `post_user.js`. 60 | 61 | Call `node get_users.js` to see if your new user was added or reload http://localhost:3000/users. 62 | 63 | #### Deleting a user 64 | Go to `delete_user.js` and complete the commented `let res = ...` in order to delete a user. 65 | 66 | Call `node delete_user.js` to see if your user was deleted. The console should return a status 200. 67 | Check your http://localhost:3000/users, to see that user #2 has been deleted. 68 | -------------------------------------------------------------------------------- /JS-06 - DOM Manipulation/README.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | # JS-06 DOM Manipulation 4 | 5 |
6 |
7 | 8 | ### Exercise #1 9 | 10 | Modify the style of the paragraph text through javascript code. 11 | Sample HTML file: 12 | ``` 13 | 14 | 15 | 16 | 17 | JS DOM paragraph style 18 | 19 | 20 | 21 |

JavaScript Exercises #1

22 |
23 | 24 |
25 | 26 | 27 | ``` 28 | By clicking on the button, the font, font size, and color of the paragraph text should change. 29 | 30 | ### Exercise #2 31 | 32 | Write a JavaScript function to get the values of First and Last name from the following form. 33 | 34 | Print out the names to the console. 35 | 36 | Sample HTML file : 37 | ``` 38 | 39 | 40 | 41 | 42 | Return first and last name from a form - w3resource 43 | 44 | 45 | 46 |
47 | First name:
48 | Last name:
49 | 50 |
51 | 52 | 53 | ``` 54 | 55 | ### Exercise #3 56 | 57 | Write a function and call it when clicking a button to show an alert with: 58 | 59 | 1. The number of links on the page 60 | 2. The first link in the page 61 | 3. The last link in the page 62 | 63 | ### Exercise #4 64 | 65 | ``` 66 | 67 | 68 | 69 | 70 | Document 71 | 72 | 73 |
74 |
75 |
76 | 81 |
    82 |
  1. one
    2. 83 |
  2. two
    3. 84 |
  3. three
    4. 85 |
86 |
87 |
88 |
89 | 90 | 91 | ``` 92 | 93 | Write the code that will do the following: 94 | 95 | 1. Select the section with a container id without using querySelector. 96 | 2. Select the section with a container id using querySelector. 97 | 3. Select all the items list with a class of "second". 98 | 4. Select a list item with a class of third, but only the list item inside of the ol tag. 99 | 5. Give the text "Hello!" to the section with a container id. 100 | 6. Add the main class to the div with a footer class. 101 | 7. Remove the main class on the div with a footer class. 102 | 8. Create a new li element. 103 | 9. Give the li the text "four". 104 | 10. Append the li to the ul element. 105 | 106 | ## Challenge Yourself 107 | 108 | ### Add on to Exercise #4 109 | 1. Loop over all the li inside the ol tag and give them a background "green" color. 110 | 2. Remove the div with a footer class. 111 | -------------------------------------------------------------------------------- /JS-08 - Introduction to Object Oriented Programming/README.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | # JS-08 Introduction to Object Oriented Programming 4 | 5 |
6 |
7 | 8 | ### Exercise #1: A Person Object 9 | 10 | #### Part 1 Javascript 11 | Create a class called Person which accepts the name of a person as a string, and his/her/their age as a number. 12 | 13 | The Person class should have a method called Describe which returns a string with the following syntax: "name, age years old". 14 | 15 | For example, if Manny is 19 years old the function Describe of his object will return "Manny, 19 years old". 16 | 17 | #### Part 2 HTML 18 | Create an HTML page that has 2 input boxes: one for name and another for age. When someone enters a name and age, the page will show a list of "{Name}, {x} years old". 19 | 20 | ---- 21 | 22 | ### Exercise #2: The Reading List 23 | 24 | Create an object-oriented book-list! 25 | 26 | Start with an HTML page that has the title: My Book List. 27 | 28 | #### Part 1 Book 29 | 30 | In your Javascript file, create a class called `Book`. 31 | Each *Book* should have several properties: 32 | 33 | * Title 34 | * Genre 35 | * Author 36 | * Read (true or false) 37 | * Read date; can be blank, otherwise needs to be a JS Date() object 38 | 39 | Add to your HTML page 2 books that reference the Book objects. 40 | 41 | #### Part 2 Booklist 42 | 43 | In your Javascript file - create a class `BookList`. 44 | 45 | *BookLists* should have the following properties: 46 | 47 | * Number of books marked as read 48 | * Number of books marked as not read yet 49 | * A reference to the next book to read (book object) 50 | * A reference to the current book being read (book object) 51 | * A reference to the last book read (book object) 52 | * An array of all the Books 53 | 54 | Every *Booklist* should have a few methods: 55 | 56 | * .add(book) 57 | * should add a book to the books list. 58 | * .finishCurrentBook() 59 | * should mark the book that is currently being read as "read" 60 | * Give it a read date of new Date(Date.now()) 61 | * Change the last book read to be the book that just got finished 62 | * Change the current book to be the next book to be read 63 | * Change the next book to be read property to be the first unread book you find in the list of books 64 | 65 | *Booklists* and *Books* might need more methods than that. Try to think of more that might be useful. 66 | 67 | Update your HTML page with a section that shows the name of your booklist, the number of books marked as read, and the next book to read. 68 | 69 | #### Part 3 SOLID Principles 70 | Review the `SOLID` principles and see how your Javascript code can be refactored to adhere those principles. 71 | 72 | 73 | ``` 74 | __Single Responsibility Principle (SRP)__ 75 | A class should have a single responsibility, job or purpose. 76 | 77 | __Open/Closed Principle__ 78 | Software entities (classes, modules, functions, etc.) should be open for extension, but closed for modification. 79 | 80 | Why is it useful? 81 | Agile – By being open to adding new features, the development process is agile. Much time won’t be spent on refactoring the code to add new features. 82 | Reliable – This principle ensures reliability, that adding new features will not introduce new bugs, since the code is closed to modification. 83 | 84 | __Liskov’s Substitution Principle (LSP)__ 85 | “Derived or child classes must be substitutable for their base or parent classes“. 86 | This principle ensures that any class that is the child of a parent class should be usable in place of its parent without any unexpected behavior. 87 | 88 | __Interface Segregation Principle (ISP)__ 89 | "Do not force any client to implement an interface which is irrelevant to them". 90 | You should prefer many client interfaces rather than one general interface and each interface should have a specific responsibility. 91 | 92 | __Dependency Inversion Principle (DIP)__ 93 | High-level modules/classes should not depend on low-level modules/classes. Both should depend upon abstractions. 94 | Abstractions should not depend upon details. Details should depend upon abstractions. 95 | ``` 96 | 97 | ---- 98 | ### Challenge Yourself 99 | 100 | 1. Write a function called “convertObjectToList” which converts an object into an array of arrays. 101 | ``` 102 | Input (Object): 103 | var object = {name: “Lucia”, age: 35, role: “Scientist”}; 104 | Output: 105 | [[“name”, “Lucia”], [“age”, 35], [“role”, “Scientist”]] 106 | ``` 107 | 108 | Sample code: 109 | ``` 110 | var obj = {name: “Lucia”, age: 35, role: “Scientist”}; 111 | function convertListToObject(obj) { 112 | // your code here 113 | } 114 | ``` 115 | 116 | 2. Complete the following practice: 117 | * https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Object_building_practice 118 | -------------------------------------------------------------------------------- /JS-10 - Unit Tests in JavaScript/js/jest.config.js: -------------------------------------------------------------------------------- 1 | // For a detailed explanation regarding each configuration property, visit: 2 | // https://jestjs.io/docs/en/configuration.html 3 | 4 | module.exports = { 5 | // All imported modules in your tests should be mocked automatically 6 | // automock: false, 7 | 8 | // Stop running tests after `n` failures 9 | // bail: 0, 10 | 11 | // Respect "browser" field in package.json when resolving modules 12 | // browser: false, 13 | 14 | // The directory where Jest should store its cached dependency information 15 | // cacheDirectory: "/private/var/folders/nf/4p2ghqf1287cksy4bd5xk7cm0000gn/T/jest_dx", 16 | 17 | // Automatically clear mock calls and instances between every test 18 | clearMocks: true, 19 | 20 | // Indicates whether the coverage information should be collected while executing the test 21 | // collectCoverage: false, 22 | 23 | // An array of glob patterns indicating a set of files for which coverage information should be collected 24 | // collectCoverageFrom: undefined, 25 | 26 | // The directory where Jest should output its coverage files 27 | coverageDirectory: "coverage", 28 | 29 | // An array of regexp pattern strings used to skip coverage collection 30 | // coveragePathIgnorePatterns: [ 31 | // "/node_modules/" 32 | // ], 33 | 34 | // A list of reporter names that Jest uses when writing coverage reports 35 | // coverageReporters: [ 36 | // "json", 37 | // "text", 38 | // "lcov", 39 | // "clover" 40 | // ], 41 | 42 | // An object that configures minimum threshold enforcement for coverage results 43 | // coverageThreshold: undefined, 44 | 45 | // A path to a custom dependency extractor 46 | // dependencyExtractor: undefined, 47 | 48 | // Make calling deprecated APIs throw helpful error messages 49 | // errorOnDeprecated: false, 50 | 51 | // Force coverage collection from ignored files using an array of glob patterns 52 | // forceCoverageMatch: [], 53 | 54 | // A path to a module which exports an async function that is triggered once before all test suites 55 | // globalSetup: undefined, 56 | 57 | // A path to a module which exports an async function that is triggered once after all test suites 58 | // globalTeardown: undefined, 59 | 60 | // A set of global variables that need to be available in all test environments 61 | // globals: {}, 62 | 63 | // The maximum amount of workers used to run your tests. Can be specified as % or a number. E.g. maxWorkers: 10% will use 10% of your CPU amount + 1 as the maximum worker number. maxWorkers: 2 will use a maximum of 2 workers. 64 | // maxWorkers: "50%", 65 | 66 | // An array of directory names to be searched recursively up from the requiring module's location 67 | // moduleDirectories: [ 68 | // "node_modules" 69 | // ], 70 | 71 | // An array of file extensions your modules use 72 | // moduleFileExtensions: [ 73 | // "js", 74 | // "json", 75 | // "jsx", 76 | // "ts", 77 | // "tsx", 78 | // "node" 79 | // ], 80 | 81 | // A map from regular expressions to module names or to arrays of module names that allow to stub out resources with a single module 82 | // moduleNameMapper: {}, 83 | 84 | // An array of regexp pattern strings, matched against all module paths before considered 'visible' to the module loader 85 | // modulePathIgnorePatterns: [], 86 | 87 | // Activates notifications for test results 88 | // notify: false, 89 | 90 | // An enum that specifies notification mode. Requires { notify: true } 91 | // notifyMode: "failure-change", 92 | 93 | // A preset that is used as a base for Jest's configuration 94 | // preset: undefined, 95 | 96 | // Run tests from one or more projects 97 | // projects: undefined, 98 | 99 | // Use this configuration option to add custom reporters to Jest 100 | // reporters: undefined, 101 | 102 | // Automatically reset mock state between every test 103 | // resetMocks: false, 104 | 105 | // Reset the module registry before running each individual test 106 | // resetModules: false, 107 | 108 | // A path to a custom resolver 109 | // resolver: undefined, 110 | 111 | // Automatically restore mock state between every test 112 | // restoreMocks: false, 113 | 114 | // The root directory that Jest should scan for tests and modules within 115 | // rootDir: undefined, 116 | 117 | // A list of paths to directories that Jest should use to search for files in 118 | // roots: [ 119 | // "" 120 | // ], 121 | 122 | // Allows you to use a custom runner instead of Jest's default test runner 123 | // runner: "jest-runner", 124 | 125 | // The paths to modules that run some code to configure or set up the testing environment before each test 126 | // setupFiles: [], 127 | 128 | // A list of paths to modules that run some code to configure or set up the testing framework before each test 129 | // setupFilesAfterEnv: [], 130 | 131 | // A list of paths to snapshot serializer modules Jest should use for snapshot testing 132 | // snapshotSerializers: [], 133 | 134 | // The test environment that will be used for testing 135 | testEnvironment: "node", 136 | 137 | // Options that will be passed to the testEnvironment 138 | // testEnvironmentOptions: {}, 139 | 140 | // Adds a location field to test results 141 | // testLocationInResults: false, 142 | 143 | // The glob patterns Jest uses to detect test files 144 | // testMatch: [ 145 | // "**/__tests__/**/*.[jt]s?(x)", 146 | // "**/?(*.)+(spec|test).[tj]s?(x)" 147 | // ], 148 | 149 | // An array of regexp pattern strings that are matched against all test paths, matched tests are skipped 150 | // testPathIgnorePatterns: [ 151 | // "/node_modules/" 152 | // ], 153 | 154 | // The regexp pattern or array of patterns that Jest uses to detect test files 155 | // testRegex: [], 156 | 157 | // This option allows the use of a custom results processor 158 | // testResultsProcessor: undefined, 159 | 160 | // This option allows use of a custom test runner 161 | // testRunner: "jasmine2", 162 | 163 | // This option sets the URL for the jsdom environment. It is reflected in properties such as location.href 164 | // testURL: "http://localhost", 165 | 166 | // Setting this value to "fake" allows the use of fake timers for functions such as "setTimeout" 167 | // timers: "real", 168 | 169 | // A map from regular expressions to paths to transformers 170 | // transform: undefined, 171 | 172 | // An array of regexp pattern strings that are matched against all source file paths, matched files will skip transformation 173 | // transformIgnorePatterns: [ 174 | // "/node_modules/" 175 | // ], 176 | 177 | // An array of regexp pattern strings that are matched against all modules before the module loader will automatically return a mock for them 178 | // unmockedModulePathPatterns: undefined, 179 | 180 | // Indicates whether each individual test should be reported during the run 181 | // verbose: undefined, 182 | 183 | // An array of regexp patterns that are matched against all source file paths before re-running tests in watch mode 184 | // watchPathIgnorePatterns: [], 185 | 186 | // Whether to use watchman for file crawling 187 | // watchman: true, 188 | }; 189 | --------------------------------------------------------------------------------