├── 02_03_2023 ├── guessing-game │ ├── style.css │ ├── .vscode │ │ └── settings.json │ ├── index.html │ └── index.js └── flash-card-demo │ ├── .vscode │ └── settings.json │ ├── style.css │ ├── README.md │ ├── index.html │ └── index.js ├── 01_31_2023 ├── DOM │ ├── style.css │ ├── index.html │ └── script.js └── review.js ├── 02_01_2023 ├── chess-demo │ ├── jstwo.js │ ├── style.css │ ├── index.html │ └── index.js ├── event-intro │ ├── style.css │ ├── index.html │ └── index.js └── review │ ├── index.html │ ├── style.css │ └── index.js ├── 02_02_2023 ├── style.css ├── index.html └── script.js ├── 01_20_2023 ├── .DS_Store ├── SingleProductCard │ ├── media │ │ ├── img1.jpg │ │ ├── img2.jpg │ │ └── img3.jpg │ ├── index.css │ └── index.html ├── MultipleHtmls │ ├── about.html │ └── index.html ├── VerticalNavbar │ ├── index.html │ └── index.css └── HorizontalNavbar │ ├── index.html │ └── index.css ├── 01_26_2023 └── reacto.png ├── 02_13_2023 ├── recursion │ ├── Recursion-Notes.png │ └── index.js ├── morning-rev │ ├── style.css │ ├── index.html │ ├── index.js │ └── animal.js └── function-tests.js ├── 02_14_2023 ├── this.js ├── recursion.js ├── closures.js ├── currying.js ├── higher-order-functions.js └── factoryClosure.js ├── 01_23_2023 ├── style.css ├── index.html ├── page1.html └── page2.html ├── 02_09_2023 ├── schools-example │ ├── style.css │ ├── index.html │ └── js │ │ ├── index.js │ │ ├── classroom.js │ │ └── person.js └── morning │ └── review.js ├── 02_17_2023 ├── README.md ├── style.css ├── index.html └── js │ ├── ApartmentList.js │ ├── index.js │ └── Apartment.js ├── 01_25_2023 ├── arrays.js ├── review.js └── functions.js ├── 02_06_2023 ├── scope.js └── review.js ├── 02_16_2023 ├── sort.js └── higher-order-functions.js ├── 01_19_2023 ├── index.html └── style.css ├── 02_15_2023 ├── moring-rev │ ├── competency-rev.js │ └── tdd-review.js └── map-filter-reduce │ ├── array-funcs.js │ └── mapping-to-objs.js ├── 02_10_2023 └── review.js ├── 02_07_2023 ├── inheritance │ ├── inheritance-worksheet.js │ └── example.js └── review │ └── review.js ├── 01_24_2023 ├── bug-hunt-solution.js └── conditionals.js ├── 01_27_2023 └── review.js ├── 01_30_2023 ├── review.js └── objects.js └── README.md /02_03_2023/guessing-game/style.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /01_31_2023/DOM/style.css: -------------------------------------------------------------------------------- 1 | p { 2 | color: black; 3 | } 4 | -------------------------------------------------------------------------------- /02_01_2023/chess-demo/jstwo.js: -------------------------------------------------------------------------------- 1 | console.log('SECOND FILE') -------------------------------------------------------------------------------- /02_01_2023/event-intro/style.css: -------------------------------------------------------------------------------- 1 | p { 2 | font-size: 18px; 3 | } -------------------------------------------------------------------------------- /02_02_2023/style.css: -------------------------------------------------------------------------------- 1 | ul { 2 | padding: 0; 3 | list-style: none; 4 | } 5 | -------------------------------------------------------------------------------- /02_03_2023/flash-card-demo/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "liveServer.settings.port": 5501 3 | } -------------------------------------------------------------------------------- /02_03_2023/guessing-game/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "liveServer.settings.port": 5501 3 | } -------------------------------------------------------------------------------- /01_20_2023/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FullstackAcademy/2301-FSA-ET-WEB-FT-SF-FOUNDATIONS/HEAD/01_20_2023/.DS_Store -------------------------------------------------------------------------------- /01_26_2023/reacto.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FullstackAcademy/2301-FSA-ET-WEB-FT-SF-FOUNDATIONS/HEAD/01_26_2023/reacto.png -------------------------------------------------------------------------------- /02_13_2023/recursion/Recursion-Notes.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FullstackAcademy/2301-FSA-ET-WEB-FT-SF-FOUNDATIONS/HEAD/02_13_2023/recursion/Recursion-Notes.png -------------------------------------------------------------------------------- /01_20_2023/SingleProductCard/media/img1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FullstackAcademy/2301-FSA-ET-WEB-FT-SF-FOUNDATIONS/HEAD/01_20_2023/SingleProductCard/media/img1.jpg -------------------------------------------------------------------------------- /01_20_2023/SingleProductCard/media/img2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FullstackAcademy/2301-FSA-ET-WEB-FT-SF-FOUNDATIONS/HEAD/01_20_2023/SingleProductCard/media/img2.jpg -------------------------------------------------------------------------------- /01_20_2023/SingleProductCard/media/img3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FullstackAcademy/2301-FSA-ET-WEB-FT-SF-FOUNDATIONS/HEAD/01_20_2023/SingleProductCard/media/img3.jpg -------------------------------------------------------------------------------- /02_13_2023/morning-rev/style.css: -------------------------------------------------------------------------------- 1 | 2 | body { background-color: aqua;} 3 | 4 | .animal { 5 | background-color: white; 6 | } 7 | 8 | .animal h1 { 9 | font-size: 50px; 10 | } -------------------------------------------------------------------------------- /02_01_2023/review/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /02_01_2023/review/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: lightblue; 3 | } 4 | 5 | .sports { 6 | text-transform: uppercase; 7 | background-color: rgb(37, 34, 34); 8 | color: red; 9 | } 10 | -------------------------------------------------------------------------------- /02_14_2023/this.js: -------------------------------------------------------------------------------- 1 | console.log(this); 2 | 3 | function hello() { 4 | this.i = 0; 5 | 6 | console.log(this); 7 | } 8 | 9 | const helloArrow = () => { 10 | console.log(this); 11 | }; 12 | 13 | hello(); 14 | helloArrow(); -------------------------------------------------------------------------------- /01_23_2023/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | } 3 | 4 | main, 5 | footer, 6 | header { 7 | padding: 1em; 8 | margin: 1em; 9 | } 10 | 11 | nav a { 12 | text-decoration: none; 13 | } 14 | 15 | nav a:hover { 16 | text-decoration: underline; 17 | } 18 | -------------------------------------------------------------------------------- /02_01_2023/chess-demo/style.css: -------------------------------------------------------------------------------- 1 | td { 2 | height: 50px; 3 | width: 50px; 4 | border: 1px solid black; 5 | display: inline-block; 6 | } 7 | 8 | tr { 9 | display: inline-block; 10 | } 11 | 12 | p { 13 | font-size: 18px; 14 | } -------------------------------------------------------------------------------- /01_20_2023/MultipleHtmls/about.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | About 5 | 6 | 7 | 11 |

About Page

12 | 13 | -------------------------------------------------------------------------------- /01_20_2023/MultipleHtmls/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | About 5 | 6 | 7 | 11 |

Home Page

12 | 13 | -------------------------------------------------------------------------------- /02_13_2023/morning-rev/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |

Title

11 |
12 | 13 | 14 | -------------------------------------------------------------------------------- /02_01_2023/event-intro/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 |

Event Handling

10 | 11 | 12 | 13 | 14 | 15 |

Hello

16 | 17 | -------------------------------------------------------------------------------- /02_02_2023/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | DOM Demo for Class 5 | 6 | 7 | 8 | 9 | 10 | 11 |

12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /02_03_2023/flash-card-demo/style.css: -------------------------------------------------------------------------------- 1 | #card { 2 | display:flex; 3 | flex-direction: column; 4 | width: 50vw; 5 | align-items: flex-end; 6 | border: 1px solid black; 7 | padding: 2rem; 8 | } 9 | 10 | #card > section { 11 | display:flex; 12 | justify-content: space-between; 13 | width: 100%; 14 | } 15 | 16 | #card hr { 17 | border-top: 2px solid black; 18 | width: 90%; 19 | } -------------------------------------------------------------------------------- /02_01_2023/chess-demo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 |

MY CHESS GAME

8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | -------------------------------------------------------------------------------- /02_09_2023/schools-example/style.css: -------------------------------------------------------------------------------- 1 | .classes { 2 | display:flex; 3 | flex-direction: column; 4 | width: 80%; 5 | margin: 0 auto; 6 | align-items: center; 7 | } 8 | 9 | .people { 10 | display: flex; 11 | flex-wrap: wrap; 12 | } 13 | 14 | .card { 15 | width: 150px; 16 | border: 1px solid black; 17 | margin: 2%; 18 | border-radius: 4%; 19 | padding: 2%; 20 | } 21 | 22 | h2{ 23 | text-align: center; 24 | } -------------------------------------------------------------------------------- /02_09_2023/schools-example/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Schools Demo 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /02_14_2023/recursion.js: -------------------------------------------------------------------------------- 1 | const powerCallCounter = (baseNum, exponent, calls = 1) => { 2 | // base case 3 | if (exponent === 0) { 4 | console.log("Executing base case. Total calls: ", calls); 5 | 6 | return 1; 7 | } else { 8 | // recursive step / case 9 | console.log("Executing recursive case. Call number: ", calls); 10 | 11 | return baseNum * powerCallCounter(baseNum, exponent - 1, calls + 1); 12 | } 13 | }; 14 | 15 | powerCallCounter(4, 3); 16 | -------------------------------------------------------------------------------- /01_31_2023/DOM/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Document 5 | 6 | 7 | 8 |
9 |

This is a paragraph

10 |

11 | This is a paragraph 12 |

13 |

This is a paragraph

14 |

This is a paragraph

15 |

This is a paragraph

16 |
17 | 18 | 19 | -------------------------------------------------------------------------------- /01_20_2023/VerticalNavbar/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Document 5 | 6 | 7 | 8 | 18 | 19 | -------------------------------------------------------------------------------- /02_17_2023/README.md: -------------------------------------------------------------------------------- 1 | 2 | # Apartment Listings 3 | 4 | ## Apartment Class 5 | 6 | - Properties: 7 | - price 8 | - numOfRooms 9 | - numOfBathrooms 10 | - squareFootage 11 | - address 12 | - amenities 13 | 14 | - Rendering to HTML 15 | 16 | ## Apartment as a list of classes (ApartmentList) 17 | 18 | - container for the list of appartments 19 | 20 | - add/remove apartments from the list 21 | 22 | - Rendering to HTML 23 | 24 | 25 | ### OPTIONALS 26 | 27 | - Add a list of favorite apartments 28 | - Sort by Price 29 | 30 | -------------------------------------------------------------------------------- /01_20_2023/VerticalNavbar/index.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | CSS for the Vertical Bar 4 | - Links are blue background with white color 5 | - Text is aligned center 6 | - Each link is spaced with gaps 7 | - Font is monospace 8 | */ 9 | 10 | ul { 11 | list-style: none; 12 | width: fit-content; 13 | } 14 | 15 | li { 16 | background-color: #3b3bc1; 17 | color: white; 18 | 19 | padding: 1rem; 20 | margin: 1rem; 21 | text-align: center; 22 | text-transform:uppercase; 23 | 24 | font-family: monospace; 25 | } -------------------------------------------------------------------------------- /01_25_2023/arrays.js: -------------------------------------------------------------------------------- 1 | const names = ["orlando", "dyllan", "matt", "veronica"]; 2 | 3 | // initializing an array 4 | console.log(names[1], names[0], names[3], names[2]); 5 | console.log(names); 6 | 7 | const numbers = [1, 2, 3, 4]; 8 | 9 | console.log(numbers[2]); 10 | 11 | const mixedContentArray = [5, "orlando", false, 6.7]; 12 | 13 | console.log(mixedContentArray); 14 | 15 | // adding content to an array 16 | names.push("aaron"); 17 | 18 | console.log(names); 19 | 20 | names.unshift("denisse"); 21 | 22 | console.log(names); 23 | 24 | names = [1, 2, 3, 4]; 25 | -------------------------------------------------------------------------------- /01_25_2023/review.js: -------------------------------------------------------------------------------- 1 | const num = 20; 2 | const value = 20; 3 | 4 | // the following loops are equivalent 5 | 6 | // loops 7 | for (let i = 1; i <= 10; i++) { 8 | console.log("The value of i is: ", i); 9 | } 10 | 11 | let i = 1; 12 | while (i <= 10) { 13 | console.log("The value of i is: ", i); 14 | ++i; 15 | } 16 | 17 | // conditionals 18 | if (num < value) { 19 | console.log("number is less than value"); 20 | } else if (num > value) { 21 | console.log("number is greater than value"); 22 | } else { 23 | console.log("number is equal to value"); 24 | } 25 | -------------------------------------------------------------------------------- /02_06_2023/scope.js: -------------------------------------------------------------------------------- 1 | // scope 2 | const number = 1; 3 | 4 | // if (number === 2) { 5 | // const string = "orlando"; 6 | // console.log(number); 7 | // } else { 8 | // console.log(string); 9 | // } 10 | 11 | // function sum(argument1, argument2) { 12 | // const randomNumber = 10; 13 | 14 | // console.log(randomNumber); 15 | 16 | // if (randomNumber === 10) { 17 | // console.log("hooray"); 18 | // } 19 | 20 | // return argument1 + argument2; 21 | // } 22 | 23 | // sum(1, 2); 24 | 25 | // console.log(randomNumber); 26 | 27 | // console.log(string); 28 | -------------------------------------------------------------------------------- /02_03_2023/flash-card-demo/README.md: -------------------------------------------------------------------------------- 1 | # Flashcard Demo 2 | 3 | ### Goals 4 | 5 | - Make a flashcard in html with CSS 6 | - Should show the prompt 7 | - Should have an input field for the user to answer 8 | - Shoudl have a submit button to check answer 9 | - Use Javascript to verify the answer from the user and reveal if it was right or wrong 10 | - Move onto next card 11 | 12 | #### Bonus 13 | 14 | - Make more types of cards 15 | - Maybe store as an object in an array to allow for more variety 16 | - Allow users to "pass" to a new card, and the old one will show up later 17 | -------------------------------------------------------------------------------- /02_13_2023/function-tests.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | function a() { 4 | console.log('Inside A') 5 | } 6 | 7 | // a() 8 | 9 | const b = function () { 10 | console.log('Inside B') 11 | } 12 | 13 | // b() 14 | 15 | const greetC = (name) => console.log(`Hello ${name}!`) 16 | 17 | // let returnVal = greetC('Travis') 18 | 19 | // console.log(returnVal) 20 | 21 | const fnA = () => { 22 | return "A" + fnB() // ABC 23 | }; 24 | 25 | const fnB = () => { 26 | return "B" + fnC() // BC 27 | }; 28 | 29 | const fnC = () => { 30 | return "C"; 31 | }; 32 | 33 | let fnCAnswer = fnC() // C 34 | let fnBAnswer = fnB() 35 | let answer = fnA(); 36 | 37 | console.log(answer) 38 | 39 | -------------------------------------------------------------------------------- /01_23_2023/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | HTML Example 8 | 9 | 10 | 11 |
12 | 17 |
18 |
19 |
Home
20 | 21 |
22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /01_23_2023/page1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | HTML Example 8 | 9 | 10 | 11 |
12 | 17 |
18 |
19 |
Page 1
20 | 21 |
22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /01_23_2023/page2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | HTML Example 8 | 9 | 10 | 11 |
12 | 17 |
18 |
19 |
Page 2
20 | 21 |
22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /02_09_2023/schools-example/js/index.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | let fsa = new Classroom('2301-FSA') 4 | 5 | let studentA = new Student('Bob') 6 | let studentB = new Student('Jenny') 7 | 8 | let staffA = new Staff('Travis', 'Instructor') 9 | let staffB = new Staff('Kwame', 'Mentor') 10 | 11 | fsa.addPersonToClass(studentA) 12 | fsa.addPersonToClass(studentB) 13 | fsa.addPersonToClass(staffA) 14 | fsa.addPersonToClass(staffB) 15 | 16 | console.log(fsa) 17 | 18 | console.log(studentA.render()) 19 | console.log(staffA.render()) 20 | 21 | let classRoomContainer = document.querySelector('main.classes') 22 | let fsaRender = fsa.render() // get the rendered section 23 | classRoomContainer.append(fsaRender) // Adds to the ACTUAL page 24 | -------------------------------------------------------------------------------- /02_16_2023/sort.js: -------------------------------------------------------------------------------- 1 | const array = [10, -1, 3, 5000, -43, 2]; 2 | 3 | const sortedArray = array.sort((num1, num2) => { 4 | if (num1 > num2) { 5 | return 1; 6 | } else if (num1 < num2) { 7 | return -1; 8 | } else { 9 | return 0; 10 | } 11 | }); 12 | 13 | console.log(sortedArray); 14 | 15 | const arrayOfStrings = ["ball", "Wall", "flOOr", "fRuit", "Cup", "reD"]; 16 | 17 | const sortedArrayOfStrings = arrayOfStrings.sort((num1, num2) => { 18 | if (num1 > num2) { 19 | // string1 belongs after string2 20 | return 1; 21 | } else if (num1 < num2) { 22 | // string2 belongs after string1 23 | return -1; 24 | } else { 25 | return 0; 26 | } 27 | }); 28 | 29 | console.log(sortedArrayOfStrings); 30 | -------------------------------------------------------------------------------- /01_19_2023/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | CSS Examples 8 | 9 | 10 | 11 |
12 | 19 |
20 |
21 |
article
22 | 23 |
24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /02_03_2023/guessing-game/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | Document 12 | 13 | 14 |
15 |

Guessing Game

16 |
17 |
18 |

Guess a number between 1 and 100

19 | 20 | 21 |

22 |
23 |
24 | 25 | -------------------------------------------------------------------------------- /01_31_2023/review.js: -------------------------------------------------------------------------------- 1 | // objects 2 | const person = { 3 | name: "orlando c", 4 | age: 39, 5 | "-address": "jersey city", 6 | }; 7 | 8 | const keyToLookFor = "name"; 9 | 10 | // modifying a value of a key 11 | person.age = 29 // 😉 orlando's visible age 12 | 13 | console.log(person.name); 14 | console.log(person.age); 15 | 16 | // the following code is invalid 17 | // console.log(person.-address) 18 | 19 | // alternative syntax 20 | console.log(person["name"]); 21 | console.log(person["age"]); 22 | 23 | // this code however is valid 24 | console.log(person["-address"]); 25 | console.log(person[keyToLookFor]); 26 | 27 | // looping thru object 28 | for (const property in person) { 29 | console.log("Property -> ", property, ", value -> ", person[property]); 30 | } 31 | -------------------------------------------------------------------------------- /02_14_2023/closures.js: -------------------------------------------------------------------------------- 1 | // creates a counter with its own copy of count 2 | function createCounter() { 3 | let count = 0; 4 | 5 | return function () { 6 | count++; 7 | return count; 8 | }; 9 | } 10 | 11 | // create 3 different counters 12 | const counter1 = createCounter(); 13 | const counter2 = createCounter(); 14 | const counter3 = createCounter(); 15 | 16 | console.log(counter1()); // 1 17 | console.log(counter1()); // 2 18 | console.log(counter1()); // 3 19 | 20 | console.log(counter2()); // 1 21 | console.log(counter2()); // 2 22 | console.log(counter2()); // 3 23 | console.log(counter2()); // 4 24 | console.log(counter2()); // 5 25 | 26 | console.log(counter3()); // 1 27 | console.log(counter3()); // 2 28 | console.log(counter3()); // 3 29 | console.log(counter3()); // 4 30 | -------------------------------------------------------------------------------- /01_20_2023/SingleProductCard/index.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | CSS for the Product Card 4 | - Width is at most 1/3rd the page (maybe set to specific width) 5 | - Title on blue background with white text 6 | - Image to width of card 7 | - text is left aligned 8 | - Price same color as title 9 | */ 10 | 11 | .product { 12 | display:flex; 13 | flex-direction: column; 14 | width: 30vw; 15 | 16 | box-shadow: 0px 0px 2px gray; 17 | padding: 0; 18 | font-family: sans-serif; 19 | } 20 | 21 | section, h3 { 22 | display:flex; 23 | justify-content: space-between; 24 | align-items: center; 25 | background-color: #3b3bc1; 26 | color: white; 27 | font-weight: bold; 28 | 29 | margin:0; 30 | padding: 0.5rem 1rem; 31 | } -------------------------------------------------------------------------------- /01_20_2023/HorizontalNavbar/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Document 5 | 6 | 7 | 8 | 9 |
10 | 16 | 21 |
22 | 23 | -------------------------------------------------------------------------------- /02_01_2023/chess-demo/index.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | function generateChessBoard() { 9 | // Target the tbody (where Im putting the tr and tds) 10 | let tbody = document.querySelector('tbody') 11 | // tr - tablerow 12 | // td - cell in each row 13 | 14 | let color = false; 15 | 16 | for (let i = 0; i < 8; i++) { 17 | let row = document.createElement('tr') 18 | 19 | for (let k = 0; k < 8; k++) { 20 | let cell = document.createElement('td') 21 | 22 | if (color) { 23 | cell.style.backgroundColor = 'black' 24 | } 25 | 26 | row.appendChild(cell) 27 | 28 | color = !color 29 | } 30 | tbody.appendChild(row) 31 | color = !color 32 | } 33 | 34 | } 35 | 36 | generateChessBoard() -------------------------------------------------------------------------------- /02_01_2023/review/index.js: -------------------------------------------------------------------------------- 1 | 2 | let sports = ['basketball', 'soccer', 'football', 'baseball'] 3 | // let body = document.getElementsByTagName('body')[0] 4 | 5 | for (let i = 0; i < sports.length; i++) { 6 | let newHeader = createHeader(sports[i]) 7 | document.body.appendChild(newHeader) 8 | } 9 | 10 | function createHeader(title) { 11 | let header = document.createElement('h1') 12 | header.innerText = title 13 | header.classList.add('sports') 14 | header.style.color = 'gold' 15 | header.style.textTransform = 'uppercase' 16 | 17 | return header 18 | } 19 | 20 | 21 | function setTDStyles() { 22 | let element = document.getElementById('myElement') 23 | // element.style.backgroundColor = 'blue' 24 | element.classList.add('blue') 25 | } 26 | 27 | 28 | 29 | 30 | 31 | 32 | // setTDStyles() -------------------------------------------------------------------------------- /02_14_2023/currying.js: -------------------------------------------------------------------------------- 1 | function greetCurried(greeting) { 2 | // this is the function area 3 | 4 | // function innerFunc(name) { 5 | // console.log(greeting + ", " + name); 6 | // } 7 | 8 | // return innerFunc; 9 | 10 | // the code below equivalent to the code above 11 | return function (name) { 12 | console.log(greeting + ", " + name); 13 | }; 14 | } 15 | 16 | const greetHello = greetCurried("Hello"); 17 | 18 | greetHello("Orlando"); // greetCurried("Hello")("Orlando") 19 | greetHello("Samuel"); // greetCurried("Hello")("Samuel") 20 | greetHello("Veronica"); // greetCurried("Hello")("Veronica") 21 | 22 | const greetGoodbye = greetCurried("Goodbye"); 23 | 24 | greetGoodbye("Orlando"); // greetCurried("Goodbye")("Orlando") 25 | greetGoodbye("Samuel"); // greetCurried("Goodbye")("Samuel") 26 | greetGoodbye("Veronica"); // greetCurried("Goodbye")("Veronica") 27 | -------------------------------------------------------------------------------- /02_13_2023/morning-rev/index.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | let dog = new Animal('Spike', 'dog') 4 | 5 | let myAnimal = dog.render() 6 | // ADD animal to the page 7 | document.querySelector('main').append(myAnimal) 8 | 9 | 10 | 11 | let arrOfProps = [ 12 | ['prop1', 'prop2', 'prop3','prop4'], 13 | ['prop1', 'prop2', 'prop3','prop4'], 14 | ['prop1', 'prop2', 'prop3','prop4'], 15 | ['prop1', 'prop2', 'prop3','prop4'], 16 | ] 17 | 18 | let myObjArray = [ 19 | {}, 20 | {}, 21 | {}, 22 | {} 23 | ] 24 | 25 | let exampleArr = ['prop1', 'prop2', 'prop3','prop4'] 26 | let keysArray = ['one', 'two', 'three', 'four'] // Object.keys() 27 | let exampleObj = {} 28 | 29 | for (let i = 0; i < keysArray.length; i++) { 30 | exampleObj[keysArray[i]] = exampleArr[i] 31 | 32 | // obj[ 'one' ] = 'prop1' 33 | 34 | } 35 | 36 | console.log(exampleObj) 37 | 38 | [ { name: 'Travis'}, { name: 'Misael'} ] -------------------------------------------------------------------------------- /02_14_2023/higher-order-functions.js: -------------------------------------------------------------------------------- 1 | const array = [1, 2, 3, 4, 5]; 2 | 3 | function looper(currentElementOfArray) { 4 | console.log(currentElementOfArray); 5 | } 6 | 7 | const looperArrow = (currentElementOfArray) => { 8 | console.log(currentElementOfArray); 9 | }; 10 | 11 | // forEach allows us to loop through a list of elements using functional 12 | // syntax 13 | array.forEach(looperArrow); 14 | array.forEach((element) => console.log(element)); 15 | 16 | function createGreeter(name) { 17 | return function () { 18 | console.log("Hello: ", name); 19 | }; 20 | } 21 | 22 | // the function createGreeter returns another function 23 | const greeterFunc1 = createGreeter("Orlando"); 24 | const greeterFunc2 = createGreeter("Denisse"); 25 | 26 | greeterFunc1(); // Hello: Orlando 27 | greeterFunc1(); // Hello: Orlando 28 | 29 | greeterFunc2(); // Hello: Denisse 30 | greeterFunc2(); // Hello: Denisse 31 | -------------------------------------------------------------------------------- /02_17_2023/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | background-color: cadetblue; 5 | } 6 | 7 | header { 8 | background-color: black; 9 | color: white; 10 | text-align: center; 11 | } 12 | 13 | h1 { 14 | margin: 0; 15 | } 16 | 17 | .apartment-list { 18 | display:flex; 19 | flex-wrap: wrap; 20 | } 21 | .card { 22 | width: fit-content; 23 | background-color: beige; 24 | margin: 10px; 25 | } 26 | .card > * { 27 | padding-left: 2em; 28 | } 29 | .card img { 30 | padding:0; 31 | width: 100%; 32 | max-width: 500px; 33 | } 34 | 35 | .card .features { 36 | display:flex; 37 | } 38 | .card .features > * { 39 | margin: 1em; 40 | border-right: 2px solid gray; 41 | padding-right: 2em; 42 | } 43 | 44 | .add-form{ 45 | display:flex; 46 | flex-direction: column; 47 | } 48 | 49 | input { 50 | width: 50%; 51 | } 52 | 53 | button { 54 | width: 200px; 55 | } -------------------------------------------------------------------------------- /02_13_2023/morning-rev/animal.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | class Animal { 4 | constructor(name, type) { 5 | this.name = name 6 | this.type = type 7 | } 8 | 9 | render() { 10 | 11 | /* 12 | GOAL of this function: 13 | Create an html element with all the values we need 14 | 15 | we can use this element to add it to the actual page 16 | 17 |
18 |

Name

19 |

Type

20 |

21 | */ 22 | 23 | const animal = document.createElement('section') 24 | animal.classList.add('animal') 25 | 26 | const name = document.createElement('h1') 27 | name.innerText = this.name 28 | const type = document.createElement('h2') 29 | type.innerText = this.type 30 | 31 | animal.append(name) 32 | animal.append(type) 33 | 34 | return animal 35 | } 36 | } -------------------------------------------------------------------------------- /02_03_2023/flash-card-demo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | Document 11 | 12 | 13 | 14 | 24 | 25 |
26 |

7

27 |
28 |

X

29 |

3

30 |
31 |
32 |
33 | 34 | 35 |
36 | 37 |
38 | 39 | 40 | -------------------------------------------------------------------------------- /02_03_2023/flash-card-demo/index.js: -------------------------------------------------------------------------------- 1 | 2 | let a, b, answer 3 | 4 | 5 | function generateNumbers(){ 6 | a = Math.floor(Math.random() * 10) // 0 - 9 7 | b = Math.floor(Math.random() * 10) // 0 - 9 8 | 9 | answer = a * b 10 | 11 | document.querySelector('.a').innerText = a 12 | document.querySelector('.b').innerText = b 13 | 14 | console.log(a, b, answer) 15 | } 16 | 17 | generateNumbers() 18 | 19 | function checkAnswer() { 20 | 21 | let userAnswer = parseInt(document.getElementById('answer').value) 22 | console.log(typeof userAnswer) 23 | 24 | let p = document.createElement('p') 25 | if (userAnswer === answer) { 26 | console.log('Correct') 27 | p.innerText = 'Correct' 28 | } else { 29 | console.log('Incorrect') 30 | p.innerText = 'Incorrect' 31 | } 32 | 33 | document.body.appendChild(p) 34 | } 35 | 36 | 37 | let button = document.querySelector('button') 38 | 39 | button.addEventListener('click', checkAnswer) -------------------------------------------------------------------------------- /01_20_2023/HorizontalNavbar/index.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | CSS for the Horizontal Navbar 4 | - Background is Blue 5 | - Text is White 6 | - Links on the Left 7 | - Log In/Sign Up, Account, Cart Icon on the Right 8 | - White Bars between each link 9 | */ 10 | 11 | 12 | /* 13 | Background of header set to blue 14 | Also get display flex ready for layout 15 | */ 16 | header { 17 | display: flex; 18 | flex-direction: row; 19 | justify-content: space-between; 20 | align-items: center; 21 | 22 | background-color: #3b3bc1; 23 | color: white; 24 | } 25 | 26 | nav { 27 | display:flex; 28 | justify-content: space-evenly; 29 | align-items: center; 30 | padding: 1rem; 31 | } 32 | 33 | nav > * { 34 | color: white; 35 | font-size: 1.5rem; 36 | margin: 0 1rem; 37 | padding-right: 1rem; 38 | border-right: 1px solid white; 39 | } 40 | 41 | nav > *:last-child { 42 | border: none; 43 | } -------------------------------------------------------------------------------- /02_16_2023/higher-order-functions.js: -------------------------------------------------------------------------------- 1 | const array = [1, 5, 20, 300, 14, -5]; // 1 + 5 + 20 + 300 + 15 + -5 => 236 2 | 3 | // forEach 4 | for (let i = 0; i < array.length; ++i) { 5 | console.log(array[i]); 6 | } 7 | 8 | for (let element of array) { 9 | console.log(element); 10 | } 11 | 12 | array.forEach((element) => console.log(element)); 13 | 14 | // map 15 | const mappedArray = array.map((element) => { 16 | return `
  • ${element}
    • `; 17 | }); 18 | 19 | console.log(mappedArray); 20 | console.log(mappedArray.join(" | ")); 21 | 22 | // filter 23 | 24 | const filteredArray = array.filter((element) => { 25 | // if (element % 2 === 0) { 26 | // return true; 27 | // } else { 28 | // return false; 29 | // } 30 | 31 | // this code below is the same as above 32 | return element % 2 === 0; 33 | }); 34 | 35 | console.log(filteredArray); 36 | 37 | // reduce 38 | 39 | // 1 + 5 + 20 + 300 + 15 + -5 => 335 40 | const sum = array.reduce((previousValue, currentValue) => { 41 | return previousValue + currentValue; 42 | }, 75); 43 | 44 | console.log(sum); 45 | -------------------------------------------------------------------------------- /02_15_2023/moring-rev/competency-rev.js: -------------------------------------------------------------------------------- 1 | const callCounter = () => { 2 | let callCount = 0; 3 | return function () { 4 | callCount++; 5 | console.log(`Number of calls: ${callCount}`); 6 | }; 7 | }; 8 | 9 | const counter1 = callCounter(); 10 | const counter2 = counter1; 11 | const counter3 = counter1; 12 | 13 | // Similar to this 14 | // let arr = [1,2,3] 15 | // let arr2 = arr 16 | 17 | // arr2.push(4) 18 | // console.log(arr) 19 | 20 | // counter1() 21 | // counter2() // counter1() 22 | // counter3() // counter1() 23 | 24 | 25 | function Person(str, func) { 26 | this.counter = func(); // counter1 = callCounter() 27 | this.name = str; 28 | this.intro = function () { 29 | console.log(`hello, my name is ${this.name}`); 30 | this.counter(); 31 | }; 32 | this.farewell = function () { 33 | console.log('farewell, friend, I\'ve got to be off now.'); 34 | this.counter(); 35 | }; 36 | } 37 | 38 | const calliope = new Person("Calliope", callCounter); 39 | calliope.intro(); 40 | calliope.farewell(); -------------------------------------------------------------------------------- /01_20_2023/SingleProductCard/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Document 5 | 6 | 7 | 8 | 9 |
    10 |
    11 |

    Product Name

    12 | 13 |
    14 | 15 |

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae purus tellus. Integer maximus orci nulla, ut rutrum ex convallis ac. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed eleifend ante id congue iaculis. Donec laoreet et tellus pretium pretium. Nulla vel ligula tristique, blandit ligula at, vestibulum elit. Sed placerat rhoncus felis, in euismod sem pulvinar eget. Aliquam eu lorem ac mauris vestibulum ornare. Morbi faucibus metus erat,

    16 |

    Price: $27.99

    17 |
    18 | 19 | -------------------------------------------------------------------------------- /02_14_2023/factoryClosure.js: -------------------------------------------------------------------------------- 1 | // this is a factory function 2 | function createCounter() { 3 | let count = 0; 4 | 5 | return { 6 | name: "newCounter", 7 | increment: function () { 8 | count++; 9 | // the value of this IS pointing to the object 10 | console.log(this.name); 11 | }, 12 | decrement: () => { 13 | count--; 14 | // the value of this IS NOT pointing to the object 15 | console.log(this.name); 16 | }, 17 | getValue: function () { 18 | return count; 19 | }, 20 | }; 21 | } 22 | 23 | const counter1 = createCounter(); 24 | const counter2 = createCounter(); 25 | 26 | counter1.increment(); // count === 1 27 | counter1.increment(); // count === 2 28 | counter1.increment(); // count === 3 29 | counter1.decrement(); // count === 2 30 | counter1.decrement(); // count === 1 31 | 32 | console.log(counter1.getValue()); 33 | 34 | counter2.increment(); // count === 1 35 | counter2.increment(); // count === 2 36 | counter2.increment(); // count === 3 37 | counter2.increment(); // count === 4 38 | counter2.increment(); // count === 5 39 | 40 | console.log(counter2.getValue()); 41 | -------------------------------------------------------------------------------- /02_09_2023/morning/review.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | // a() // invoke the function 4 | // let b = new B() 5 | // console.log(b) 6 | 7 | function a() { 8 | console.log('A') 9 | } 10 | 11 | class B { 12 | constructor(){ 13 | } 14 | } 15 | 16 | 17 | 18 | function dog(name, breed, age) { 19 | const dog = {}; 20 | dog.name = name; 21 | dog.breed = breed; 22 | dog.age = age; 23 | return dog; 24 | } 25 | 26 | const myDog = dog('Ace', 'Poodle', 8) 27 | const myDogClone = dog('Ace', 'Poodle', 8) 28 | 29 | console.log(myDog === myDogClone) 30 | console.log(myDog == myDogClone) 31 | 32 | console.log(JSON.stringify(myDog) === JSON.stringify(myDogClone)) 33 | 34 | function compareFn(ob1, ob2) { 35 | if (Object.keys(ob1).length != Object.keys(ob2).length) { 36 | return false // dont have same number of keys 37 | } 38 | 39 | for (let key in ob1) { 40 | if (!(key in ob2)) { 41 | return false 42 | } 43 | if (ob1[key] !== obj2[key]) { 44 | return false 45 | } 46 | } 47 | 48 | return true 49 | } 50 | 51 | console.log(myDog) 52 | console.log(myDogClone) -------------------------------------------------------------------------------- /02_02_2023/script.js: -------------------------------------------------------------------------------- 1 | // let's select some elements from the html file 2 | const textField = document.querySelector("input"); 3 | const croissantButton = document.querySelector("#croissant-button"); 4 | const entriesList = document.querySelector("ul"); 5 | const h1 = document.querySelector("h1"); 6 | 7 | const entriesArray = []; 8 | const correctAnswer = "tea"; 9 | 10 | console.log(textField, croissantButton, entriesList, h1); 11 | 12 | // let's set what happens when you click the button 13 | croissantButton.addEventListener("click", function () { 14 | const textFieldValue = textField.value; 15 | 16 | console.log(textFieldValue); 17 | 18 | if (textFieldValue === correctAnswer) { 19 | h1.textContent = "Your answer is correct!"; 20 | console.log("Your answer is correct!"); 21 | } else { 22 | h1.textContent = "Wrong answer"; 23 | console.log("Wrong answer"); 24 | } 25 | 26 | // add the value to the unordered list 27 | const listItem = document.createElement("li"); 28 | listItem.textContent = textFieldValue; 29 | entriesList.appendChild(listItem); 30 | 31 | entriesArray.push(textFieldValue); 32 | console.log(entriesArray); 33 | }); 34 | -------------------------------------------------------------------------------- /01_31_2023/DOM/script.js: -------------------------------------------------------------------------------- 1 | // to select one element, returns an HTMLElement 2 | const firstP = document.querySelector("p"); 3 | 4 | // to select all elements, returns a NodeList 5 | const paragraphs = document.querySelectorAll("p"); 6 | 7 | // modify a style property 8 | firstP.style.color = "red"; 9 | 10 | // display the content of paragraphs 11 | console.log(paragraphs); 12 | 13 | // create elements 14 | const newParagraph1 = document.createElement("p"); 15 | const newParagraph2 = document.createElement("p"); 16 | 17 | // when you create elements, they are not placed within the DOM 18 | // yet 19 | 20 | // modify the text inside the element 21 | newParagraph1.textContent = "This is the last p"; 22 | 23 | // this code would add the new paragraph to the end of the body 24 | // document.body.appendChild(newParagraph1); 25 | 26 | // select the first div on the document 27 | const div = document.querySelector("div"); 28 | 29 | // adds new paragraph to beginning of the div to 30 | div.prepend(newParagraph2); 31 | 32 | // selects an element with id of larger 33 | const largerP = document.querySelector("p#larger"); 34 | 35 | // modifies the paragraph with the new font size 36 | largerP.style.fontSize = "2em"; 37 | -------------------------------------------------------------------------------- /02_03_2023/guessing-game/index.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | // Generate a Random Number between 1 and 100 4 | 5 | function generateNumber() { 6 | // Math.random is 0 -> .99999999 7 | return Math.floor((Math.random() * 100) + 1) 8 | } 9 | 10 | function checkGuess(guess, answer) { 11 | 12 | if (guess === answer){ 13 | // correct answer 14 | return 'Correct' 15 | } else if (guess < answer) { 16 | return 'Too Low' 17 | } else { 18 | return 'Too High' 19 | } 20 | } 21 | 22 | 23 | let button = document.querySelector('button') 24 | 25 | button.addEventListener('click', function() { 26 | 27 | if (numberOfGuesses < 5) { 28 | // Grab the input field value 29 | let input = document.getElementById('guess') 30 | let guess = parseInt(input.value) 31 | // check that value against the randomNumber 32 | let result = checkGuess(guess, randomNumber) 33 | // Display the result to the user 34 | let resultsSection = document.getElementById('result') 35 | resultsSection.innerText = result 36 | console.log(result) 37 | 38 | numberOfGuesses++ 39 | } 40 | 41 | }) 42 | 43 | 44 | function startNewGame() { 45 | numberOfGuesses = 0 46 | randomNumber = generateNumber() 47 | } 48 | 49 | 50 | startNewGame() -------------------------------------------------------------------------------- /01_19_2023/style.css: -------------------------------------------------------------------------------- 1 | header { 2 | background-color: red; 3 | color: white; 4 | } 5 | 6 | main { 7 | display: flex; 8 | /* border: 1px solid rgb(4, 104, 40); */ 9 | border-width: 1px; 10 | border-color: rgb(4, 104, 40); 11 | border-style: solid; 12 | /* flex-direction: row-reverse; 13 | justify-content: flex-end; */ 14 | } 15 | 16 | footer { 17 | background-color: black; 18 | color: white; 19 | } 20 | 21 | article { 22 | background-color: blue; 23 | color: white; 24 | /* width: 20%; 25 | position: relative; 26 | left: 50px; 27 | top: 100px; */ 28 | /* margin: 0.5em; 29 | padding: 0.5em; */ 30 | /* border: 1px solid black; */ 31 | } 32 | 33 | a:nth-child(2n) { 34 | text-decoration: none; 35 | } 36 | 37 | a:active { 38 | color: yellow; 39 | } 40 | 41 | article:hover { 42 | background-color: rgb(4, 104, 40); 43 | } 44 | 45 | aside { 46 | background-color: rgb(187, 0, 255); 47 | color: white; 48 | } 49 | 50 | /* iphone */ 51 | @media (min-width: 0px) { 52 | a { 53 | color: black; 54 | } 55 | } 56 | 57 | /* iPad */ 58 | @media (min-width: 300px) and (max-width: 500px) { 59 | a { 60 | color: green; 61 | } 62 | } 63 | 64 | @media (min-width: 501px) { 65 | a { 66 | color: purple; 67 | } 68 | } 69 | 70 | /* header, 71 | main, 72 | footer { 73 | border: 1px solid black; 74 | } */ 75 | -------------------------------------------------------------------------------- /02_17_2023/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
    16 |

    Travis' Apartment Lists

    17 |
    18 | 19 |
    20 | 21 |
    22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 |
    38 | 39 |
    40 |
    41 | 42 | 45 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /02_10_2023/review.js: -------------------------------------------------------------------------------- 1 | // const obj1 = { 2 | // name: "old entity", 3 | // age: 9001, 4 | // }; 5 | 6 | // const obj2 = { 7 | // name: "really old entity", 8 | // age: 100009001, 9 | // }; 10 | 11 | // function constructors 12 | function Dealership() { 13 | this.vehicles = []; 14 | 15 | this.addVehicleByData = function (model, cost, year, make) { 16 | const newVehicle = new Vehicle(model, cost, year, make); 17 | this.vehicles.push(newVehicle); 18 | }; 19 | 20 | // dependency injection 21 | this.addVehicle = function (vehicle) { 22 | this.vehicles.push(vehicle); 23 | }; 24 | } 25 | 26 | function Vehicle(model, cost, year, make) { 27 | this.model = model; 28 | this.cost = cost; 29 | this.year = year; 30 | this.make = make; 31 | } 32 | 33 | // classes 34 | class DealershipClass { 35 | constructor() { 36 | this.vehicles = []; 37 | } 38 | 39 | addVehicle(vehicle) { 40 | this.vehicles.push(vehicle); 41 | } 42 | } 43 | 44 | class VehicleClass { 45 | constructor(model, cost, year, make) { 46 | this.model = model; 47 | this.cost = cost; 48 | this.year = year; 49 | this.make = make; 50 | } 51 | } 52 | 53 | // invoke our classes/ function constructors 54 | 55 | const chevy = new VehicleClass("chevy", 35000, 1976, "corvette"); 56 | 57 | const dealership = new DealershipClass(); 58 | 59 | dealership.addVehicle(chevy); 60 | 61 | console.log(dealership); 62 | -------------------------------------------------------------------------------- /02_09_2023/schools-example/js/classroom.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | class Classroom { 4 | constructor(name) { 5 | 6 | this.name = name 7 | this.maxCapacity = 100 8 | this.people = [] 9 | } 10 | 11 | addPersonToClass(person) { 12 | this.people.push(person) 13 | } 14 | 15 | render() { 16 | 17 | // classroom section 18 | let classroomSection = document.createElement('section') 19 | classroomSection.classList.add('classroom') // gives us something to target in css 20 | 21 | let className = document.createElement('h2') 22 | className.innerText = this.name 23 | 24 | let personLabel = document.createElement('label') 25 | personLabel.innerText = 'People in class' 26 | 27 | // We need to render all the PEOPLE cards for the class 28 | 29 | let peopleSection = document.createElement('section') 30 | peopleSection.classList.add('people') 31 | 32 | for (let i = 0; i < this.people.length; i++) { 33 | let person = this.people[i] 34 | let card = person.render() // call the RENDER of that person and make a card for them 35 | 36 | peopleSection.append(card) 37 | } 38 | 39 | // ---------- 40 | 41 | classroomSection.appendChild(className) 42 | classroomSection.appendChild(personLabel) 43 | classroomSection.appendChild(peopleSection) 44 | 45 | 46 | return classroomSection 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /01_25_2023/functions.js: -------------------------------------------------------------------------------- 1 | // const num1 = 10; 2 | // const num2 = 30; 3 | 4 | // const sum1 = num1 + num2; 5 | 6 | // console.log(sum1); 7 | 8 | // const num3 = 70; 9 | // const num4 = 100; 10 | 11 | // const sum2 = num3 + num4; 12 | 13 | // console.log(sum2); 14 | 15 | // --------------------------- 16 | 17 | // functions give us the ability to avoid writing code like above ☝ 18 | // we can reuse the same behavior yet allow the values being calculated 19 | // to be different 20 | 21 | // function definition example 22 | function displayWordsToScreen(word1, word2) { 23 | // word1 and word2 are parameters in this function 24 | console.log(word1, word2); 25 | } 26 | 27 | // function invocation / execute examples 28 | 29 | // "something" and "else" are arguments being passed into the function 30 | displayWordsToScreen("something", "else"); 31 | displayWordsToScreen("number 1"); 32 | displayWordsToScreen("hello"); 33 | displayWordsToScreen("😁"); 34 | 35 | // function return values 36 | function add(parameterA, parameterB) { 37 | // const sum = parameterA + parameterB; 38 | // return sum; 39 | 40 | // the line below and the two lines above are equivalent 41 | return parameterA + parameterB; 42 | } 43 | 44 | // here we add 1 and 2 together and store the result in newSum 45 | const newSum = add(1, 2); 46 | 47 | // the following two lines are equivalent 48 | console.log(newSum); 49 | console.log(add(1, 2)); 50 | 51 | const newSum2 = add(-90, 10); 52 | 53 | console.log(newSum2); 54 | console.log(add(-90, 10)); 55 | -------------------------------------------------------------------------------- /02_07_2023/inheritance/inheritance-worksheet.js: -------------------------------------------------------------------------------- 1 | class Animal { 2 | constructor(name) { 3 | this.name = name; 4 | } 5 | 6 | shout() { 7 | console.log("AAAAA"); 8 | } 9 | } 10 | 11 | class Goat extends Animal { 12 | constructor() { 13 | super("Goat"); 14 | } 15 | } 16 | 17 | class Bird extends Animal { 18 | constructor() { 19 | super("Bird"); 20 | } 21 | 22 | shout() { 23 | console.log("tweet!"); 24 | } 25 | } 26 | 27 | 28 | class Fox extends Animal { 29 | constructor() { 30 | super("Fox"); 31 | } 32 | } 33 | 34 | class Dog extends Animal { 35 | constructor() { 36 | super('Dog') 37 | } 38 | } 39 | 40 | const f1 = new Fox(); 41 | const f2 = new Fox(); 42 | 43 | const b = new Bird(); 44 | b.shout(); 45 | const g = new Goat(); 46 | g.shout(); 47 | 48 | 49 | // EXAMPLE OF CLASSES IN OTHER CLASSES 50 | 51 | class Person { 52 | constructor(name) { 53 | this.name 54 | } 55 | 56 | greeting() { console.log('hello', this.name) } 57 | } 58 | 59 | class Student extends Person { 60 | constructor(name, grade) { 61 | super(name) 62 | this.grade = grade 63 | } 64 | } 65 | 66 | class School { 67 | constructor(name, listOfPeople) { 68 | this.name = name 69 | this.listOfPeople = listOfPeople // array of students 70 | } 71 | } 72 | 73 | 74 | let person = new Student('Bob', 98) 75 | let person2 = new Student('Ann', 76) 76 | 77 | new School('FSA', [person, person2]) -------------------------------------------------------------------------------- /01_24_2023/bug-hunt-solution.js: -------------------------------------------------------------------------------- 1 | const caterpillar = '🐛'; // missing quotes 2 | 3 | const leaf = '🌿'; 4 | const rock = '🪨'; // mismatched quotes 5 | 6 | let forest = ""; // needs to be let since we add to it 7 | /* 8 | FOR LOOP ISSUES: 9 | Let vs const 10 | needs semi-colons not commas 11 | */ 12 | for (let i = 0; i < 100; i++) { 13 | if (Math.random() < 0.8) { // missing parens 14 | forest += leaf; 15 | } else { 16 | forest += rock; 17 | } 18 | } 19 | 20 | console.log(forest); // incorrect spelling 21 | 22 | let numLeaves = 0; // needs to be let since we add to it 23 | for (const emoji of forest) { 24 | if (emoji == leaf) { // == for comparison, leaf not leave 25 | numLeaves += 1; // should be +=1 not =+1 26 | } 27 | } // missing closing bracket 28 | 29 | 30 | console.log(`There are ${numLeaves} leaves in the forest.`); // log not l0g 31 | 32 | if (numLeaves >= 80) { 33 | console.log("There are enough leaves to eat :)"); // missing closing paren 34 | } else { // adding curley brackets around else statement 35 | console.log("There are not enough leaves to eat :("); // console missing 'e', missing open paren 36 | console.log(`${caterpillar} is hungry...`); // change to string literal with ` 37 | process.exit(); 38 | } 39 | 40 | const timerLabel = `${caterpillar} ate all the leaves in`; 41 | console.time(timerLabel); 42 | 43 | console.log(`${caterpillar} gets to feast!`); // spelling error on variable name 44 | 45 | let leafLog = ""; // needs to be let 46 | while (numLeaves > 0) { 47 | leafLog += `${numLeaves}.. `; 48 | numLeaves -= 1; // (not =-) 49 | } 50 | console.log(leafLog); // typo 51 | console.log('0! YUM!'); // mismatch quotes 52 | 53 | console.timeEnd(timerLabel); -------------------------------------------------------------------------------- /02_13_2023/recursion/index.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | function countDown(n) { 4 | if ( n <= 0 ){ 5 | return // ends function without returning a value 6 | } 7 | console.log(n) 8 | countDown(n-1) 9 | } 10 | 11 | function coundDownLoop(n) { 12 | for (let i = n; n > 0; n--) { 13 | console.log(i) 14 | } 15 | } 16 | 17 | // countDown(5) 18 | 19 | 20 | // 5! = 1 * 2 * 3 * 4 * 5 21 | 22 | function factLoop(n) { 23 | let total = 1 24 | for (let i = 1; i <= n; i++) { 25 | total *= i 26 | } 27 | 28 | return total 29 | } 30 | 31 | // console.log(factLoop(5)) 32 | 33 | 34 | function factorial(n) { 35 | // 5! = 5 * 4 * 3 * 2 * 1 36 | // 5! = 5 * 4! 37 | // 4! = 4 * 3 * 2 * 1 38 | // 4! = 4 * 3! 39 | 40 | // ... 0! = 1 41 | 42 | if ( n === 0 ) { 43 | return 1 44 | } 45 | 46 | let nextFact = factorial(n-1) 47 | console.log(`${n} * fact(${n-1}) :`, n, ' * ', nextFact) 48 | return n * nextFact 49 | } 50 | 51 | // console.log(factorial(5)) 52 | 53 | 54 | 55 | 56 | /* 57 | 58 | Function Declarations 59 | 60 | */ 61 | 62 | function name1(parameters) { 63 | // body 64 | console.log('hi') 65 | } 66 | 67 | let name2 = function () { 68 | console.log('hi') 69 | } 70 | 71 | // name2() 72 | 73 | // ARROW function 74 | // { } are optional if you only have 1 line 75 | let name3 = (param) => console.log('hi', param) 76 | 77 | // name3('Travis') 78 | 79 | let arrowFn = () => { return 42 } 80 | // function arrowFn() { return 42 } 81 | let arrowFn2 = (r) => 2 * Math.PI * r 82 | let arrowConsole = (input) => console.log(input) 83 | 84 | console.log(arrowFn()) 85 | 86 | let cir = arrowFn2(4) 87 | arrowConsole(cir) 88 | 89 | 90 | -------------------------------------------------------------------------------- /02_17_2023/js/ApartmentList.js: -------------------------------------------------------------------------------- 1 | 2 | class AparmentList { 3 | constructor() { 4 | this.apartments = [] 5 | } 6 | 7 | addApartment(apt) { 8 | this.apartments.push(apt) 9 | } 10 | 11 | removeApartment(apt) { 12 | // find the index based on the address of my apt 13 | 14 | let index = this.apartments.findIndex(element => element.address == apt.address) 15 | 16 | // remove it 17 | this.apartments.splice(index, 1) 18 | } 19 | 20 | render() { 21 | // makes a card for EACH apt in the list 22 | 23 | let allAptRenders = this.apartments.map((apt) => apt.render()) 24 | 25 | // grab the section from the html 26 | let listSection = document.querySelector('.apartment-list') 27 | 28 | listSection.innerHTML = '' // removes any previous html in the section 29 | // another way to do this is with replaceChild instead of appendChild 30 | 31 | // loop through the allAptRenders and append each one to the listSection 32 | 33 | for( let i = 0; i < allAptRenders.length; i++) { 34 | let card = allAptRenders[i] 35 | listSection.append(card) 36 | 37 | let removeBtns = document.querySelectorAll('.remove-btn') // grab ALL "remove" btns 38 | let lastBtn = removeBtns[removeBtns.length-1] 39 | 40 | console.log('Looping: ', i) 41 | console.log(removeBtns) 42 | // only adding the event listener to the most recent button as Im looping 43 | lastBtn.addEventListener('click', () => { 44 | console.log('Remove Btn!') 45 | 46 | this.removeApartment(this.apartments[i]) 47 | // could refactor (Re-code) and use index to remove 48 | // that might be better 49 | 50 | this.render() 51 | }) 52 | } 53 | 54 | return allAptRenders 55 | } 56 | 57 | } -------------------------------------------------------------------------------- /02_09_2023/schools-example/js/person.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | class Person { 4 | constructor(name) { //skip contact info 5 | this.name = name 6 | // We can add contact info in futre 7 | } 8 | 9 | render() { 10 | 11 | // creating a "card" for the person 12 | let card = document.createElement('section') 13 | card.classList.add('card') 14 | 15 | // Add the person's info to the card 16 | let namePlate = document.createElement('h3') 17 | namePlate.innerText = this.name 18 | 19 | 20 | // Append to the card 21 | card.append(namePlate) 22 | 23 | return card 24 | } 25 | } 26 | 27 | 28 | class Student extends Person { 29 | constructor(name) { 30 | super(name) 31 | 32 | this.grades = [] 33 | this.attendance = [] 34 | } 35 | 36 | getGrade() { 37 | if (!this.grades.length) { 38 | return 'No Grades Yet' 39 | } 40 | let total = 0 41 | 42 | for (let i = 0; i < this.grades.length; i++) { 43 | total += this.grades[i] 44 | } 45 | 46 | return total / this.grades.length 47 | } 48 | 49 | render() { 50 | // start by rendering the PERSON parts 51 | let card = super.render() 52 | 53 | // Add the STUDENT SPECIFICS 54 | let grades = this.getGrade() 55 | let grade = document.createElement('p') 56 | grade.innerText = `Grade: ${grades}` 57 | 58 | card.append(grade) 59 | 60 | return card 61 | 62 | } 63 | } 64 | 65 | class Staff extends Person { 66 | constructor(name, role) { 67 | super(name) 68 | 69 | this.role = role 70 | this.startDate = new Date() // set it to whenever this instance of Staff is created 71 | } 72 | 73 | render() { 74 | // start by rendering the PERSON parts 75 | let card = super.render() 76 | 77 | let role = document.createElement('p') 78 | role.innerText = `Role: ${this.role}` 79 | 80 | let start = document.createElement('p') 81 | start.innerText = `Been here since: ${this.startDate}` 82 | 83 | card.append(role) 84 | card.append(start) 85 | 86 | return card 87 | } 88 | } -------------------------------------------------------------------------------- /02_17_2023/js/index.js: -------------------------------------------------------------------------------- 1 | // Going to use the classes to make content on the page 2 | // console.log('Hello') // check that you are connected to html 3 | 4 | let myListing = new Apartment( 'https://thumbor.forbes.com/thumbor/fit-in/900x510/https://www.forbes.com/home-improvement/wp-content/uploads/2022/07/download-23.jpg', 1, 3, 2.5, 2000, '1 Cool Dr.') 5 | let myListing2 = new Apartment( undefined, 1000000, 3, 2.5, 2000, '2 Cool Dr.') 6 | let myListing3 = new Apartment( 'https://images.familyhomeplans.com/cdn-cgi/image/fit=scale-down,quality=85/plans/44207/44207-b600.jpg', 50000, 2, 2.5, 1500, '137 Cool Dr.') 7 | 8 | let aptList = new AparmentList() 9 | aptList.addApartment(myListing) 10 | aptList.addApartment(myListing2) 11 | aptList.addApartment(myListing3) 12 | 13 | console.log(aptList) 14 | aptList.removeApartment(myListing2) 15 | console.log(aptList) 16 | 17 | // Auto run the first render 18 | aptList.render() 19 | 20 | 21 | // adding New Apartments 22 | 23 | let addBtn = document.getElementById('add-btn') 24 | 25 | addBtn.addEventListener('click', () => { 26 | // 1st I need to grab all the values of the input fields 27 | let imgUrl = document.getElementById('apt-img').value 28 | 29 | // Three different ways to convert strings to numbers 30 | let price = parseInt(document.getElementById('apt-price').value) 31 | let rooms = Number(document.getElementById('apt-rooms').value) 32 | let baths = +document.getElementById('apt-baths').value 33 | let sqft = +document.getElementById('apt-sqft').value 34 | 35 | let address = document.getElementById('apt-address').value 36 | 37 | // Check my values and see if they exist or not 38 | 39 | if (!price) { // can also use isNan() function 40 | alert('Must enter a valid price') 41 | return // ends the function 42 | } 43 | 44 | // we can add more conditions for rooms/baths/sqft/address etc 45 | 46 | let newApartment = new Apartment(imgUrl, price,rooms, baths, sqft, address) 47 | aptList.addApartment(newApartment) 48 | 49 | 50 | aptList.render() 51 | 52 | }) 53 | 54 | 55 | let removeBtns = [...document.getElementsByClassName('remove-btn')] 56 | removeBtns.forEach(btn => btn.addEventListener('click', () => console.log('Remove'))) -------------------------------------------------------------------------------- /02_15_2023/map-filter-reduce/array-funcs.js: -------------------------------------------------------------------------------- 1 | 2 | let nums = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ] 3 | 4 | // Add one to each value 5 | // for (let i = 0; i < nums.length; i++) { 6 | // nums[i] = nums[i] + 1 7 | // } 8 | 9 | 10 | // let forEachRtn = nums.forEach((element, index, array) => { 11 | // array[index] = element + 1 12 | // }) 13 | 14 | /* 15 | ------- MAP Function ------------ 16 | */ 17 | let numsPlus = nums.map((element, index, array) => element + 1) 18 | 19 | // [2, 3, 4, 5, 6, ...] 20 | console.log('Map returns:', numsPlus) 21 | console.log('Original Array:', nums) 22 | 23 | // Multiply each value by 7 24 | 25 | let multBy7 = nums.map((val) => val * 7) 26 | console.log(multBy7) 27 | 28 | 29 | // Create a string for each value that says "My favorite number is: ___" 30 | 31 | let favNums = nums.map((num) => `My Favorite number is: ${num}`) 32 | console.log(favNums) 33 | 34 | console.log('Original Array:', nums) 35 | 36 | // let htmls = nums.map(num => { 37 | // let node = document.createElement('option') 38 | // node.innerText = num 39 | // }) 40 | 41 | 42 | /* 43 | ------- FILTER Function ------------ 44 | */ 45 | 46 | nums = [1,3,5,7,2,4,6,8] 47 | 48 | let evens = nums.filter((element) => element % 2 === 0) 49 | let odds = nums.filter((element) => element % 2 === 1) 50 | 51 | console.log('Filtered Even:', evens) 52 | console.log('Filtered Odds:', odds) 53 | 54 | const getRelevantSentences = (criteriaFn, sentences) => { 55 | return sentences.filter(sentence => criteriaFn(sentence)) 56 | }; 57 | 58 | const getRelevantSentencesOrig = (criteriaFn, sentences) => { 59 | const relevantSentences = []; 60 | for (const sentence of sentences) { 61 | if (criteriaFn(sentence)) { 62 | relevantSentences.push(sentence); 63 | } 64 | } 65 | return relevantSentences; 66 | }; 67 | 68 | 69 | /* ----- REDUCE ----------- */ 70 | 71 | console.log(nums) 72 | let total = nums.reduce((acc, curr ) => { 73 | console.log('Acc + curr:', acc, ' + ', curr) 74 | return acc + curr 75 | }, 0) 76 | 77 | console.log(total) 78 | 79 | let arrOfObj = [ { total: 120}, {total: 37}] 80 | 81 | total = arrOfObj.reduce((acc, curr) => acc + curr.total, 0) 82 | 83 | console.log(total) 84 | 85 | 86 | 87 | -------------------------------------------------------------------------------- /01_27_2023/review.js: -------------------------------------------------------------------------------- 1 | // let vs const 2 | let num = 5; 3 | // num = 11; 4 | 5 | let nameString = "jglay"; 6 | 7 | // the following will not work because nameString is a constant 8 | // nameString = "JP"; 9 | 10 | // DO NOT DO THIS 11 | // var otherString = "dfsdfs"; 12 | // otherString = "dfsdfs"; 13 | 14 | // data types 15 | const numA = 10; 16 | const str = "Some sort of string"; 17 | const floatA = 4.5; 18 | const arrayOfNumbers = [1, 2, 3, 4, 5]; 19 | 20 | // this will check the data type 21 | typeof str; 22 | 23 | // conditionals 24 | if (num > 10) { 25 | console.log("Number is greater than 10"); 26 | } else if (num < 10) { 27 | console.log("Number is less than 10"); 28 | } else { 29 | console.log("Number is equal to 10"); 30 | } 31 | 32 | // always use strict equality to compare values 33 | console.log(0 === 1); 34 | 35 | // loops 36 | // const counter = 4; 37 | 38 | // while (nameString === "jglay") { 39 | // console.log("nameString is set to jglay"); 40 | 41 | // if (counter === 3) { 42 | // nameString = "orlando"; 43 | // } 44 | // } 45 | 46 | // let counter = 0; 47 | 48 | // while (counter < 10) { 49 | // console.log("Counter is: ", counter); 50 | // counter++; 51 | // } 52 | 53 | // for 54 | for (let counter = 0; counter < 10; ++counter) { 55 | console.log("Counter is: ", counter); 56 | } 57 | 58 | // arrays 59 | const emptyArray = []; 60 | const arrayOfSize1 = ["sdklfjkdslfj"]; 61 | 62 | // indices start at 0... so orlando is in index 0 and gina is in index 3 63 | const array = ["orlando", "daniel", "susan", "gina"]; 64 | 65 | emptyArray.push(11); 66 | emptyArray.push(-43); 67 | 68 | console.log(emptyArray); 69 | 70 | emptyArray[0] = 90; 71 | emptyArray[1] = 43; 72 | 73 | // go thru an array in reverse 74 | for (let i = emptyArray.length - 1; i >= 0; --i) { 75 | console.log( 76 | "The current element of within the empty array is: ", 77 | emptyArray[i] 78 | ); 79 | } 80 | 81 | // functions 82 | function greet(names) { 83 | // console.log("Hello ", name, "!"); 84 | for (let i = 0; i < names.length; ++i) { 85 | console.log("Hello ", names[i], "!"); 86 | } 87 | } 88 | 89 | greet(["Michael", "Orlando", "Elisha"]); 90 | 91 | function subtract(argA, argB) { 92 | return argA - argB; 93 | } 94 | 95 | console.log(subtract(10, 9)); 96 | -------------------------------------------------------------------------------- /02_07_2023/inheritance/example.js: -------------------------------------------------------------------------------- 1 | // Class inheritance 2 | 3 | class Vehicle { 4 | constructor(type, motor, model, make, year, cost) { 5 | this.type = type 6 | this.motor = motor 7 | this.model = model 8 | this.make = make 9 | this.year = year 10 | this.cost = cost 11 | } 12 | 13 | // shared by both CAR and AIRPLANE 14 | displayVehicle() { 15 | console.log(`Type of Vehicle: ${this.type}`) 16 | console.log(`Model of Vehicle: ${this.model}`) 17 | console.log(`Make of Vehicle: ${this.make}`) 18 | console.log(`Cost of Vehicle: ${this.cost}`) 19 | } 20 | 21 | // This function will be shared with child classes 22 | turnOnEngine(sound = 'put-put-put') { 23 | console.log(`*** ${sound} ***`) 24 | } 25 | } 26 | 27 | // let myCar = new Vehicle('car', 'v8', 'ford', 'bronco', 2023, 50000) 28 | 29 | class Car extends Vehicle { 30 | constructor(motor, model, make, year, cost, color) { 31 | // All the things the parent needs to know 32 | super('car', motor, model, make, year, cost) 33 | 34 | // You can add anything specific to Car like normal 35 | this.color = color 36 | } 37 | 38 | // THESE FUNCTIONS ARE CAR ONLY 39 | changeColor(color) { 40 | this.color = color 41 | } 42 | 43 | showOffColor() { 44 | console.log(`Look at my awesome ${this.color} ${this.make}`) 45 | } 46 | // ----------------- 47 | 48 | // Overwritting parent function 49 | turnOnEngine() { 50 | super.turnOnEngine('VROOM VROOM') 51 | } 52 | } 53 | 54 | class Airplane extends Vehicle { 55 | constructor(motor, model, make, year, cost, tailNumber) { 56 | super('airplane', motor, model, make, year, cost) 57 | 58 | this.tailNumber = tailNumber 59 | } 60 | 61 | turnOnEngine() { 62 | // start with the default from the parent 63 | super.turnOnEngine() 64 | // do extra stuff 65 | 66 | super.turnOnEngine('WHOOSH!') 67 | 68 | } 69 | } 70 | 71 | 72 | 73 | let myCar = new Car('v8', 'ford', 'bronco', 2023, 50000, 'black') 74 | let myPlane = new Airplane('jet-engine', 'SR-71', 'Blackbird', 1964, 5000000) 75 | 76 | 77 | myCar.displayVehicle() 78 | 79 | myCar.showOffColor() 80 | myCar.turnOnEngine() 81 | console.log('\n\n') 82 | myPlane.displayVehicle() 83 | myPlane.turnOnEngine() 84 | -------------------------------------------------------------------------------- /02_07_2023/review/review.js: -------------------------------------------------------------------------------- 1 | // Scope 2 | 3 | // global scope 4 | 5 | // document // from html and always global 6 | // window 7 | 8 | let x = 5 9 | 10 | function first() { 11 | console.log(x) // can always read values at a higher level than the function you are in 12 | } 13 | 14 | // function scope 15 | 16 | function parent() { 17 | let x = 5 18 | let y = 7 19 | function one() { 20 | x *= 5 21 | } 22 | 23 | function two() { 24 | console.log(x) 25 | } 26 | 27 | one() 28 | two() 29 | 30 | // console.log(x+y) 31 | } 32 | 33 | 34 | // block scope 35 | 36 | for (let i = 0; i < 100; i++){ 37 | // do stuff 38 | 39 | // console.log(i) 40 | } 41 | 42 | 43 | for (let i = 0; i < 100; i++){ 44 | // do stuff 45 | 46 | // console.log(i) // this i is not the same as the loop above 47 | } 48 | 49 | 50 | /* 51 | Classes 52 | */ 53 | 54 | // writing a class as a constructor function 55 | function StudentFn(name, cohort) { 56 | this.name = name 57 | this.cohort = cohort 58 | } 59 | 60 | // this is the way to write using the class keywords 61 | class Student { 62 | constructor(name, cohort) { 63 | this.name = name 64 | this.cohort = cohort 65 | this.grade = 0 66 | 67 | this.projects = [] 68 | } 69 | 70 | greeting() { 71 | console.log('Hello,', this.name) 72 | // console.log(this) // WHAT IS THIS?! 73 | } 74 | 75 | capitalizeName() { 76 | let firstLetter = this.name[0].toUpperCase() 77 | let restOfName = this.name.slice(1).toLowerCase() 78 | 79 | this.name = firstLetter + restOfName 80 | } 81 | 82 | setGrade(number) { 83 | this.grade = number 84 | } 85 | } 86 | 87 | let bob = new Student('bob', '2301') 88 | 89 | // console.log(bob) 90 | // console.log(bob.name) 91 | 92 | let jenny = new Student('jeNNy', '2301') 93 | 94 | console.log(jenny) 95 | // console.log(jenny.name) 96 | 97 | 98 | // bob.greeting() 99 | 100 | jenny.greeting() // name starts lowercase 101 | 102 | jenny.capitalizeName() // updates name to capitalized 103 | 104 | jenny.greeting() // now the name is capitalized 105 | 106 | let studentList = [] 107 | 108 | studentList.push(bob) 109 | studentList.push(jenny) 110 | 111 | console.log(jenny.grade) 112 | 113 | -------------------------------------------------------------------------------- /02_17_2023/js/Apartment.js: -------------------------------------------------------------------------------- 1 | 2 | class Apartment { 3 | /* 4 | Apartment class needs some values like price and room count 5 | - Amenities are optional and default to an empty array 6 | */ 7 | constructor(img, price, rooms, bathrooms, sqft, address, amenities = []) { 8 | this.img = img || 'https://t4.ftcdn.net/jpg/01/23/68/71/360_F_123687102_3rPakqjpruQ7hV0yImMYcSYBXGkTCwE5.jpg' 9 | this.price = price 10 | this.rooms = rooms 11 | this.bathrooms = bathrooms 12 | this.sqft = sqft 13 | this.address = address 14 | this.amenities = amenities // we can add amenities later 15 | } 16 | 17 | /** 18 | * Converts Aparment properties to HTML card 19 | * 20 | *
    21 | * < img src=.../> 22 | *

    Price:

    23 | *

    rooms:

    24 | *

    bathrooms:

    25 | *

    sqft:

    26 | *
    27 | */ 28 | render() { 29 | 30 | let card = document.createElement('section') 31 | card.classList.add('card') 32 | 33 | let image = document.createElement('img') 34 | image.src = this.img 35 | 36 | let price = document.createElement('h2') 37 | price.innerText = `$ ${this.price}` 38 | 39 | let rooms = document.createElement('h3') 40 | rooms.innerText = `${this.rooms} Rooms` 41 | 42 | let baths = document.createElement('h3') 43 | baths.innerText = `${this.bathrooms} baths` 44 | 45 | let sqft = document.createElement('h3') 46 | sqft.innerText = `${this.sqft} sqft` 47 | 48 | let address = document.createElement('p') 49 | address.innerText = this.address 50 | 51 | 52 | let removeBtn = document.createElement('button') 53 | removeBtn.classList.add('remove-btn') 54 | removeBtn.innerText = 'X' 55 | 56 | // Also add Amenities later 57 | 58 | let features = document.createElement('section') 59 | features.classList.add('features') 60 | 61 | features.append(rooms) 62 | features.append(baths) 63 | features.append(sqft) 64 | 65 | card.append(image) 66 | card.append(price) 67 | card.append(features) 68 | card.append(address) 69 | card.append(removeBtn) 70 | 71 | return card 72 | } // end of the render function 73 | 74 | } // end of class 75 | 76 | -------------------------------------------------------------------------------- /02_06_2023/review.js: -------------------------------------------------------------------------------- 1 | // objects 2 | const lowPowerComputer = { 3 | os: "windows 11", 4 | ram: "8 GB", 5 | ssd: "250 GB", 6 | info: function () { 7 | return this.os + ", " + this.ram + ", " + this.ssd; 8 | }, 9 | }; 10 | 11 | const computer = { 12 | os: "windows 11", 13 | ram: "16 GB", 14 | ssd: "1 TB", 15 | info: function () { 16 | return this.os + ", " + this.ram + ", " + this.ssd; 17 | }, 18 | }; 19 | 20 | const crazySpecComputer = { 21 | os: "windows 11", 22 | ram: "128 GB", 23 | ssd: "50 TB", 24 | info: function () { 25 | return this.os + ", " + this.ram + ", " + this.ssd; 26 | }, 27 | }; 28 | 29 | // computer.ssd = "500 GB"; 30 | 31 | // console.log(crazySpecComputer.info()); 32 | 33 | // factory functions 34 | function computerFactory(os, ram, ssd) { 35 | // const newObject = { 36 | // os: os, 37 | // ram: ram, 38 | // ssd: ssd, 39 | // }; 40 | 41 | // function info() { 42 | // return this.os + ", " + this.ram + ", " + this.ssd; 43 | // } 44 | 45 | // this is the same as above 46 | return { 47 | os: os, 48 | ram: ram, 49 | ssd: ssd, 50 | info: function () { 51 | return this.os + ", " + this.ram + ", " + this.ssd; 52 | }, 53 | }; 54 | } 55 | 56 | const lowPowerComputerFromFactory = computerFactory( 57 | "windows 11", 58 | "8 GB", 59 | "250 GB" 60 | ); 61 | const computerFromFactory = computerFactory("windows 11", "16 GB", "1 TB"); 62 | const crazySpecComputerFromFactory = computerFactory( 63 | "windows 11", 64 | "128 GB", 65 | "50 TB GB" 66 | ); 67 | 68 | // console.log(lowPowerComputerFromFactory.info()); 69 | // console.log(computerFromFactory.info()); 70 | // console.log(crazySpecComputerFromFactory.info()); 71 | 72 | // constructor functions 73 | function Computer(os, ram, ssd) { 74 | this.os = os; 75 | this.ram = ram; 76 | this.ssd = ssd; 77 | // this.info = function () { 78 | // return this.os + ", " + this.ram + ", " + this.ssd; 79 | // }; 80 | } 81 | 82 | const computerFromContructor = new Computer("windows 11", "16 GB", "1 TB"); 83 | const macbookFromContructor = new Computer("OS X", "16 GB", "2 TB"); 84 | 85 | console.log(computerFromContructor.os); 86 | console.log(macbookFromContructor.ram); 87 | 88 | // classes 89 | class ComputerClass { 90 | constructor(os, ram, ssd) { 91 | this.os = os; 92 | this.ram = ram; 93 | this.ssd = ssd; 94 | } 95 | 96 | info() { 97 | return this.os + ", " + this.ram + ", " + this.ssd; 98 | } 99 | } 100 | 101 | const linuxComputerFromClass = new ComputerClass("linux", "16 GB", "1 TB"); 102 | const macComputerFromClass = new ComputerClass("OS X", "32 GB", "5 TB"); 103 | 104 | // console.log(linuxComputerFromClass.info()); 105 | // console.log(macComputerFromClass.info()); 106 | -------------------------------------------------------------------------------- /01_24_2023/conditionals.js: -------------------------------------------------------------------------------- 1 | /* 2 | What are conditionals? 3 | 4 | - Look at a condition (evaluate a set of values) 5 | - They will determine if its a true statement or a false one 6 | 7 | */ 8 | 9 | let num = 7 10 | 11 | console.log(7 < 5) // true or false -- Boolean 12 | 13 | let bool = true 14 | console.log(bool) 15 | 16 | /* 17 | 18 | less than/greater than - <, > 19 | less than or equal to: <=, >= 20 | Not operator: ! 21 | Is equal: ==, === 22 | Not Equal: !== 23 | 24 | LOGIC OPERATORS 25 | AND - && 26 | OR - || 27 | 28 | */ 29 | 30 | console.log(!bool) 31 | 32 | let myFavNum = 3 33 | let aNum = 4 34 | 35 | console.log('Are they the same? ', (myFavNum == aNum)) 36 | 37 | myFavNum = myFavNum + 1 38 | 39 | console.log('Are they the same, now? ', (myFavNum == aNum)) 40 | 41 | let timeOfDay = "lunch" 42 | let weather = "rainy" 43 | 44 | // T && F 45 | let outside = (timeOfDay === "lunch" && weather ==="clear") 46 | console.log("Should I go outside?", outside ) 47 | 48 | // T || F 49 | let outside2 = (timeOfDay === "lunch" || weather ==="clear") 50 | console.log("Should I go outside?", outside2 ) 51 | 52 | 53 | /* 54 | Conditional Statements 55 | 56 | if (condition) { 57 | do a true thing 58 | } else { 59 | do this thing for false 60 | } 61 | */ 62 | 63 | let score = 30 64 | 65 | if ( score >= 90 ) { 66 | console.log('You got an A!') 67 | } else if ( score >= 80) { 68 | console.log('You got a B!') 69 | } else if ( score >= 70 ) { 70 | console.log('You got a C!') 71 | } else if ( score >= 60 ) { 72 | console.log('You got a D...') 73 | } else { 74 | console.log('You got a F...') 75 | } 76 | 77 | 78 | // let a=3, b=4, c=5 79 | 80 | // !(a < b) && c + 27 > 42 81 | 82 | // 5 + false 83 | 84 | // !(3 < 4) && 32 > 42 || true 85 | 86 | // ! (true) && false || true 87 | 88 | // false && (false || true) 89 | 90 | // false || true 91 | 92 | // true 93 | 94 | let x = 5 95 | console.log(x) 96 | x = x + 1 97 | console.log(x) 98 | x -= 7 // subracts 7 from x ( x = x - 7) 99 | 100 | console.log(x) 101 | 102 | x++ 103 | // x-- 104 | 105 | console.log(x) 106 | 107 | 108 | /* Loops */ 109 | 110 | console.log('----- Loops') 111 | 112 | // Starting Point 113 | // How long does the loop run 114 | // Body of the Loop (what the loop does) 115 | // Tell the loop to move to the next pass 116 | 117 | 118 | // Do this but in a loop: 119 | // console.log('T-9..') 120 | // console.log('T-8..') 121 | // console.log('T-7..') 122 | // console.log('T-6..') 123 | 124 | let count = 10 125 | while ( count > 0 ) { 126 | console.log(`T-${count}..`) // "T-" + count + ".." 127 | count-- // count = count - 1 128 | } 129 | 130 | // for ( starting point; condition; update) 131 | 132 | for (let count = 10; count > 0; count--) { 133 | console.log("T-" + count + "..") 134 | } -------------------------------------------------------------------------------- /01_30_2023/review.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | // Error conditionals 4 | 5 | console.log(typeof(typeof 17)) // typeof returns a string that has the word "number"/'number' 6 | if (typeof num === 'number') 7 | typeof "Travis" != 'string' 8 | // vs 9 | typeof 'Travis' != "string" 10 | 11 | // single quote and double quote are both strings (they just have to match) 12 | let name = 'Travis' 13 | "Don't stay up too late" 14 | console.log(`${name}, don't stay up too late`) // string literals (template literals) 15 | 16 | 17 | 18 | // Arrays 19 | 20 | let arr = [] // empty array 21 | 22 | arr.push('A') // add the letter to the end of my array bucket 23 | 24 | console.log(arr) 25 | 26 | arr.push('B') 27 | arr.push('C') 28 | 29 | console.log(arr) 30 | 31 | // SPLICE 32 | 33 | arr.splice(1, 1, 'In-Between') 34 | 35 | console.log(arr) 36 | 37 | // SLICE 38 | 39 | console.log(arr.slice(1)) // creates a COPY of the array starting at position 1 and going to the end 40 | // slice ( starting point, up to but not including the ending point) 41 | console.log(arr) 42 | 43 | let numArr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10] 44 | 45 | console.log(numArr.length) 46 | console.log(numArr.slice(3, numArr.length)) 47 | 48 | let middle = numArr.slice(3,7) 49 | console.log(middle.reverse()) 50 | 51 | console.log(numArr) 52 | 53 | /** 54 | * 55 | */ 56 | function myFunc() { 57 | 58 | return 42 59 | } 60 | 61 | 62 | let returnVal = myFunc() 63 | 64 | // console.log(returnVal) 65 | 66 | 67 | console.log('-------------------') 68 | // For of loops 69 | 70 | let exampleArr = ['Travis', 'Stratton'] 71 | 72 | // console.log(exampleArr[1]) 73 | 74 | for (let i = 0; i < exampleArr.length; i++) { 75 | let str = '' 76 | let toggleUpper = true; 77 | for (let letter = 0; letter < exampleArr[i].length; letter++) { 78 | if (toggleUpper){ 79 | str += exampleArr[i][letter].toUpperCase() 80 | } else { 81 | str += exampleArr[i][letter].toLowerCase() 82 | } 83 | 84 | toggleUpper = !toggleUpper // flips the boolean from true to false to true ever loop 85 | } 86 | exampleArr[i] = str 87 | } 88 | 89 | // console.log(exampleArr) 90 | 91 | 92 | let numArr2 = [42, 234, 1, 234, 12, 876] 93 | 94 | for (let val of numArr2) { 95 | // console.log(val) 96 | } 97 | 98 | // Same as: for (let index = 0; index < numArr2; index++) 99 | for (let index in numArr2) { 100 | // console.log(typeof index) // treated as string! 101 | } 102 | 103 | 104 | // 2D Arrays 105 | let twoDArr = [] 106 | 107 | 108 | twoDArr.push( ['name', 'Travis']) 109 | twoDArr.push( ['name', 'Orlando']) 110 | 111 | console.log(twoDArr) 112 | // To get to Orlando 113 | console.log(twoDArr[1]) 114 | console.log(twoDArr[1][1]) 115 | 116 | 117 | let ticTacToe = [ 118 | [ '', '', ''], 119 | [ '', '', ''], 120 | [ '', '', ''], 121 | ] 122 | 123 | console.log(ticTacToe) 124 | ticTacToe[0][0] = 'X' 125 | console.log(ticTacToe) 126 | ticTacToe[1][2] = 'O' 127 | console.log(ticTacToe) 128 | 129 | // Short Circuit Evals 130 | 131 | /* 132 | P | Q | P && Q 133 | true true true 134 | true false false 135 | false true false 136 | false false false 137 | 138 | if the first value determines the answer, 139 | you dont need the second value to be evaluated 140 | */ -------------------------------------------------------------------------------- /02_01_2023/event-intro/index.js: -------------------------------------------------------------------------------- 1 | 2 | document.body.style.height = '500vh' // large enough body to scroll 3 | // Event Handling 4 | 5 | let button = document.getElementById('btn') 6 | button.style.position = 'absolute'; 7 | button.addEventListener('click', function(event) { 8 | console.log("I've been clicked!", event) 9 | // Anything you want to do goes here 10 | document.body.style.backgroundColor = 'lightblue' 11 | 12 | let p = document.createElement('p') 13 | p.innerText = 'Hello, I am new.' 14 | document.body.appendChild(p) 15 | }) 16 | // annonymous function 17 | 18 | let circle = document.createElement('div') 19 | circle.style.height = '50px' 20 | circle.style.width = '50px' 21 | circle.style.borderRadius = '50%' 22 | circle.style.backgroundColor='red'; 23 | circle.style.position='absolute'; 24 | 25 | document.body.appendChild(circle) 26 | 27 | 28 | window.addEventListener('mousemove', function(event){ 29 | // console.log(event) 30 | circle.style.top = `${event.y-25}px` 31 | circle.style.left = `${event.x-25}px` 32 | circle.style.zIndex = '-1' 33 | }) 34 | 35 | let r=255, g=125, b=0, rdir=false, gdir=true; bdir=true 36 | setInterval(() => { 37 | r = rdir ? r+5: r-5 38 | g = gdir ? g+5: g-5 39 | b = bdir ? b+5: b-5 40 | 41 | if (rdir && r >=255) { 42 | rdir = false 43 | } else if (!rdir && r <= 0) { 44 | rdir = true 45 | } 46 | if (gdir && g >=255) { 47 | gdir = false 48 | } else if (!gdir && g <= 0) { 49 | gdir = true 50 | } 51 | if (bdir && b >=255) { 52 | bdir = false 53 | } else if (!bdir && b <= 0) { 54 | bdir = true 55 | } 56 | 57 | circle.style.backgroundColor = `rgb(${r}, ${g}, ${b})` 58 | }, 1) 59 | 60 | 61 | 62 | /* 63 | Arrow Functions 64 | button.addEventListener('click', () => { 65 | console.log("I've been clicked!") 66 | }) 67 | */ 68 | 69 | 70 | /* 71 | 72 | - Click Event (mouse click) 73 | - Change Event (Text boxes update) 74 | - Scroll Events (Anytime you scroll) 75 | - KeyPress Events (Anytime a key is pressed) 76 | 77 | */ 78 | let fontSize = 18 79 | document.addEventListener('keydown', function(event) { 80 | if (event.key === 'ArrowUp') { 81 | button.style.fontSize = `${fontSize++}px`; 82 | console.log('up') 83 | } 84 | }) 85 | 86 | // rgb(255 255 255) 87 | let red = 255, green = 255, blue = 255 88 | document.addEventListener('scroll', function(event) { 89 | console.log('scrolling') 90 | red--; 91 | if (red <= 0) { 92 | red = 0 93 | } 94 | green--; 95 | if (green <= 0) { 96 | green = 0 97 | } 98 | blue--; 99 | if (blue <= 0) { 100 | blue = 0 101 | } 102 | 103 | document.body.style.backgroundColor = `rgb(${red}, ${green}, ${blue})` 104 | }) 105 | 106 | 107 | 108 | document.getElementById('input').addEventListener('change', function(event) { 109 | console.log('Typing in the input field.') 110 | }) 111 | 112 | 113 | 114 | // How you can get styles from elements 115 | let par = document.querySelector('p') 116 | let fontSizeFromCSS = window.getComputedStyle(par).fontSize 117 | let fontSizeNumber = parseInt(fontSizeFromCSS) 118 | 119 | console.log(fontSizeFromCSS) // 18px (it's a string that includes the px) 120 | console.log(fontSizeNumber) // 18 (parseInt removes the px and converts to number) -------------------------------------------------------------------------------- /01_30_2023/objects.js: -------------------------------------------------------------------------------- 1 | /* What are objects in Javascript? */ 2 | 3 | let arr = ["a", "b","c"] // group these strings together 4 | 5 | let people = [ ['Travis', 42, 'Instructor'], [1337, 'IronMan' , 'SuperHero'] ] 6 | 7 | // need to remember indexes 8 | // not repeatable * (Hard to read) 9 | // inner array, elements need to be in a specific order 10 | // if I switch name and favNumber, it could cause issues in code 11 | 12 | let travis = { 13 | "favNum": 3, 14 | "name": "Travis", 15 | "role": "Instructor" 16 | } // we use {} for objects 17 | 18 | // Objects have KEY:VALUE pairs (property:value) 19 | 20 | console.log('The name is:', travis["name"]) 21 | 22 | let ironman = { 23 | "name": "Iron Man", 24 | "role": "Superhero", 25 | } 26 | 27 | people = [ travis, ironman ] 28 | 29 | console.log(people) 30 | 31 | 32 | 33 | 34 | // How to use Object Notation 35 | 36 | console.log(travis['favNum']) // bracket-notation 37 | 38 | console.log(travis.favNum) // dot-notation 39 | 40 | travis['age'] = 17 41 | 42 | travis.age = 31 // add properties 43 | 44 | travis.favNum = 42 // update properties 45 | 46 | console.log(travis) 47 | 48 | delete travis.favNum // to remove properties 49 | 50 | console.log(travis) 51 | 52 | console.log('------------') 53 | 54 | 55 | // [ { name: "Travis"}, { name: "Ironman"}] 56 | // Person: { name: "Travis" } 57 | // props: ['name', 'role'] 58 | // p: 'name' 59 | 60 | // person[p] -> person['name'] -> 'Travis' 61 | 62 | 63 | 64 | // for-of (for arrays only) 65 | // go through each element in the array, and set the element to the variable 'person' 66 | // people = [ travis, ironman ] 67 | 68 | for (let person of people) { 69 | // uppercase the names of each person 70 | let props = ['name', 'role'] 71 | for (let p of props) { 72 | person[p] = person[p].toUpperCase() // variables require bracket notation 73 | } 74 | } 75 | 76 | console.log(people) 77 | 78 | 79 | 80 | 81 | // JSON - Javascript Object Notation 82 | console.log(travis) 83 | 84 | console.log(JSON.stringify(travis)) 85 | let travisStr = JSON.stringify(travis) // makes it a string 86 | 87 | let objTravis = JSON.parse(travisStr) // makes string an object again 88 | 89 | console.log(objTravis) 90 | 91 | 92 | 93 | 94 | // Looping over objects 95 | 96 | // FOR - IN Loop 97 | console.log('----- FOR IN ------') 98 | for ( let key in travis) { 99 | console.log(key, ':', travis[key]) 100 | } 101 | 102 | // Error : Not itterable 103 | // for (let something of travis) { 104 | // console.log(something) 105 | // } 106 | 107 | let myArr = [42, 32, 643, 6321, 2342] 108 | 109 | for (let i in myArr) { 110 | // console.log(typeof i) // usually you want numbers not strings 111 | } 112 | 113 | console.log('------------') 114 | const weather = { 115 | latitude: 40.75, 116 | longitude: -74, 117 | elevation: 27, 118 | temperature: 23.4, 119 | }; 120 | 121 | for (let key in weather){ 122 | console.log(weather[key]) 123 | console.log(`The ${key} is ${weather[key]}`); 124 | } 125 | 126 | 127 | if ("elevation" in weather){ 128 | console.log(`The elevation is ${weather.elevation}`); 129 | }else { 130 | console.log("Elevation not available."); 131 | } 132 | 133 | /* 134 | Write the boolean expressions to check if: 135 | `weight` key exists in `pet` 136 | 137 | 138 | `product` contains `price` 139 | 140 | 141 | `book` has a `title` 142 | 143 | */ 144 | 145 | // let bool = 'weight' in pet 146 | 147 | // if ('price' in product) {} 148 | 149 | // if (book.hasOwnProperty('title')){} 150 | // if (book.title){} 151 | 152 | 153 | 'The elevation is ' + weather.elevation // C-8 -------------------------------------------------------------------------------- /02_15_2023/moring-rev/tdd-review.js: -------------------------------------------------------------------------------- 1 | const isRelevant = (topics, paragraph) => { 2 | 3 | // Account for LowerCase 4 | for (let i = 0; i < topics.length; i++) { 5 | topics[i] = topics[i].toLowerCase() 6 | } 7 | paragraph = paragraph.toLowerCase() // make the sentence all lowercase 8 | 9 | // Check for is relevant 10 | const words = paragraph.split(" "); 11 | 12 | for (const word of words) { 13 | if (topics.includes(word)) { 14 | return true; 15 | } 16 | } 17 | return false; 18 | } 19 | 20 | 21 | // isRelevant(['cat', 'kitten'], "The quick brown fox jumps over the lazy dog"); // false 22 | // console.log(isRelevant(['cat', 'fox'], "The quick brown fox jumps over the lazy dog")); // true 23 | 24 | 25 | const about = (topics) => (sentence) => isRelevant(topics, sentence) 26 | 27 | // const aboutCats = about(["cat", "kitten", "cats"]); 28 | // let ans = aboutCats('there once was a DOG') 29 | // console.log(ans) 30 | 31 | const getRelevantSentences = (criteriaFn, sentences) => { 32 | 33 | let sentencesToKeep = [] 34 | 35 | for ( const sent of sentences) { 36 | if (criteriaFn(sent)) { 37 | // keep the sentence to return later 38 | sentencesToKeep.push(sent) 39 | } // else do nothing 40 | } 41 | 42 | return sentencesToKeep 43 | } 44 | 45 | const sentences = [ 46 | "I have a pet cat.", 47 | "I have a pet dog.", 48 | "I don't have a pet.", 49 | "less", 50 | "than", 51 | "five" 52 | ]; 53 | 54 | // let ans = getRelevantSentences((s) => s.length > 5, sentences) 55 | 56 | const getLengthDistance = (s1, s2) => Math.abs(s1.length - s2.length); 57 | 58 | 59 | const getClosestDistance = (words, inputWord, limit) => { 60 | 61 | let currentClosestWord; 62 | let currentClosestDistance = Number.MAX_VALUE 63 | 64 | for (let i = 0; i < words.length; i++) { 65 | let nextWord = words[i] 66 | 67 | let distance = getLengthDistance(nextWord, inputWord) 68 | 69 | if (distance < currentClosestDistance) { 70 | currentClosestDistance = distance // replaces with the new smallest 71 | currentClosestWord = nextWord 72 | } 73 | } 74 | 75 | // currentClosestDistance is the smallest distance we found 76 | // currentClosestWord is the word that is closest to the input Word 77 | 78 | // if ( currentClosestDistance < limit) { 79 | // return currentClosestWord 80 | // } else { 81 | // return inputWord 82 | // } 83 | 84 | return currentClosestDistance < limit ? currentClosestWord : inputWord; 85 | } 86 | 87 | 88 | const isSame = (s1, s2) => { 89 | /// Base Cases 90 | // Both empty 91 | if (s1.length === 0 && s2.length === 0) { 92 | return true; 93 | } 94 | 95 | // Difference in lengths 96 | if (s1.length === 0 || s2.length === 0) { 97 | return false; 98 | } 99 | 100 | /// Different first letter 101 | if (s1[0] !== s2[0]) { 102 | return false; 103 | } 104 | 105 | /// Recursive case 106 | return isSame(s1.slice(1), s2.slice(1)); 107 | }; 108 | 109 | 110 | 111 | const getEditDistance = ( s1, s2 ) => { 112 | // Base Cases 113 | if (s1 === s2) return 0; // strings are same ( we are done ) 114 | // Both empty 115 | if (!s1 && !s2) return 0; 116 | // One empty and one not 117 | if (!s1 || !s2) return Math.abs(s1.length - s2.length); 118 | 119 | // Maybe a case where one string is part of another string (the distance between is how many removals) 120 | 121 | // Recursive Cases 122 | 123 | /** 124 | * The idea here is that we only ever look at the first letter, 125 | * and if they're the same then we can ignore them. 126 | * Otherwise we have to try an edit operation. 127 | */ 128 | 129 | if (s1[0] === s2[0]) { // same first letter 130 | return getEditDistance(s1.slice(1), s2.slice(2)) 131 | } 132 | 133 | // ABC, DEF => DABC, DEF => ABC, EF 134 | const add = getEditDistance(s1, s2.slice(1)) 135 | const remove = getEditDistance(s1.slice(1), s2); 136 | 137 | const substitute = getEditDistance(s1.slice(1), s2.slice(1)); 138 | 139 | return Math.min(add, remove, substitute) + 1 140 | 141 | } 142 | 143 | 144 | 145 | 146 | 147 | 148 | const getClosestWord = (words, word, distanceFn, limit) => { 149 | let currentClosestWord; 150 | let currentClosestDistance = Number.MAX_VALUE; 151 | 152 | for (const w of words) { 153 | const distance = distanceFn(w, word); // The only line that has changed 154 | if (distance < currentClosestDistance) { 155 | currentClosestDistance = distance; 156 | currentClosestWord = w; 157 | } 158 | } 159 | // Uses conditional ternary operator (?) to return 160 | return currentClosestDistance < limit ? currentClosestWord : word; 161 | }; -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 2301-FSA-ET-WEB-FT-SF 2 | 3 | ## Week 1 4 |
    5 | HTML & CSS 6 | 7 | ### 01-19-2023 8 | 9 | - [Examples](01_19_2023) 10 | 11 | ### 01-20-2023 12 | 13 | - [Review Lecture](https://youtu.be/XwQNPPGfvRE) 14 | - [CSS Layout Solutions](01_20_2023) 15 | - [Personal Site Intro](https://youtu.be/6BF0qcHIh2Q) 16 | 17 |
    18 | 19 | ## Week 2 20 |
    21 | Javascript & TDD 22 | 23 | ### 01-23-2023 24 | 25 | - [Review Lecture + Terminal](https://youtu.be/4ARAx2iJ9jU) 26 | - [Terminal Worksheet Review](https://youtu.be/Noamj6crsVk) 27 | - [Intro to JS](https://youtu.be/YaTd3RNZ_h4) 28 | - [JS Worksheet Review](https://youtu.be/z_FwfTa7TVQ) 29 | - [Today's Examples](01_23_2023) 30 | 31 | ### 01_24_2023 32 | 33 | - [Morning Review](https://youtu.be/HOcODmqUqOY) 34 | - [Conditionals Lecture](https://youtu.be/nV8IYI2uvWs) 35 | - [Conditionals Worksheet Recap](https://youtu.be/-JlfwyseNs8) 36 | - [Loops Lecture](https://youtu.be/BFAqzfk6810) 37 | 38 | - [Conditionals and Loops notes](/01_24_2023/conditionals.js) 39 | 40 | - [Bug-hunt-solution](/01_24_2023/bug-hunt-solution.js) 41 | 42 | ### 01_25_2023 43 | 44 | - [Morning Review + Intro to Functions](https://youtu.be/4XBjw9PSO90) 45 | - [Intro to Arrays](https://youtu.be/VFVUkSAJ-fg) 46 | - [Arrays Review + Intro to TDD](https://youtu.be/yf95ArwZe1s) 47 | - [Examples](01_25_2023) 48 | 49 | ### 01_26_2023 50 | 51 | - [Morning Review](https://youtu.be/BGx6MeHjTVE) 52 | - [Intro to REACTO](https://youtu.be/qnrji4lpmXo) 53 | - [TDD-Strategies Solution Review](https://youtu.be/pbNzND6OH-U) 54 | 55 | - [TDD-Strategies Solution Code](https://github.com/FullstackAcademy/Foundations.JS.TDD.Strategies.Solution) 56 | 57 | ### 01_27_2023 58 | 59 | - [Examples](01_27_2023) 60 | - [Morning Review](https://youtu.be/0Hjl4YPEpbw) 61 | 62 |
    63 | 64 | ## Week 3 65 |
    66 | Intro to the DOM 67 | 68 | ### 1_30_2023 69 | 70 | - Morning Review 71 | - [Lecture](https://youtu.be/C-kLGx2H5gs) 72 | - [Notes](01_30_2023/review.js) 73 | - Git Demo 74 | - [Lecture](https://youtu.be/LcJFfqKWAVo) 75 | - [Worksheet Solution](https://docs.google.com/document/d/1m2ejwaiZmxw_iVndkh7EnIEOMB9ylgRbrm_Jx0NsuSE/edit) 76 | 77 | - Objects 78 | - [Lecture](https://youtu.be/a2R_sYGebug) 79 | - [Worksheet Solution](https://docs.google.com/document/d/1tMHJX1TdtDb5fJCNfPQXCkeUhKVokbgW8mYAfeLZ5rc/edit) 80 | - [TDD.Objects Solution](https://github.com/FullstackAcademy/Foundations.TDD.Peer.Programming.Objects.Solution) 81 | 82 | ### 1_31_2023 83 | 84 | - Morning Review 85 | - [Lecture](https://youtu.be/VxN87Ew3KuE) 86 | - [Example](01_31_2023/review.js) 87 | - DOM 88 | - [Lecture](https://youtu.be/69q3RDmdN8s) 89 | - [Examples](01_31_2023/DOM) 90 | - [DOM Worksheet Review](https://youtu.be/3oV7ZeXgQeE) 91 | 92 | ### 2_01_2023 93 | 94 | - Morning Review 95 | - [lecture](https://youtu.be/9vdA5I-tLqo) 96 | - [Example](02_01_2023/review) 97 | 98 | - DOM Chessboard 99 | - [Lecture](https://youtu.be/4rK7bPlLG8I) 100 | - [Example](02_01_2023/chess-demo) 101 | 102 | - Events & Handlers 103 | - [Lecture](https://youtu.be/4rK7bPlLG8I) 104 | - [Example](02_01_2023/event-intro) 105 | - [Worksheet Solution](https://docs.google.com/document/d/12MMtk-pJFUOmA2eJ1Zl3S5E4MGq2NUae6PWzD-yNaX4/edit) 106 | 107 | - [Events Pair Exercise Solution](https://github.com/FullstackAcademy/Foundations.DOM.Pair.Programming.Events.Solution) 108 | - [Video](https://youtu.be/eoBC0PKN28w) 109 | 110 | ### 02_02_2023 111 | 112 | - Morning Review 113 | - [Lecture](https://youtu.be/9cUCtgxf-ZY) 114 | - [Example](02_02_2023) 115 | 116 | ### 02_03_2023 117 | 118 | - OH Guessing Game Review 119 | - [Video](https://youtu.be/GQRZlUbLlh4) 120 | - [Code](02_03_2023/guessing-game) 121 | - Morning Review 122 | - [Lecture](https://youtu.be/HuUsfNYVY64) 123 | - [Example](02_03_2023/flash-card-demo) 124 | 125 |
    126 | 127 | ## Week 4 128 |
    129 | Object Oriented Programming 130 | 131 | ### 02_06_2023 132 | 133 | - Lecture 134 | - [Recording](https://youtu.be/h2BhX4hTpjc) 135 | - [Code Examples](https://github.com/FullstackAcademy/2301-FSA-ET-WEB-FT-SF/tree/main/02_06_2023) 136 | 137 | - Resources: 138 | - [Function Constructors](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/Function) 139 | - [Classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes) 140 | - [Factory Functions](https://www.webmound.com/javascript-factory-function-explained/) 141 | - [Scope](https://developer.mozilla.org/en-US/docs/Glossary/Scope) 142 | 143 | - Solutions: 144 | - [Team Worksheet](https://docs.google.com/document/d/1OJc03tACbj6xNX_qfUGlubP8ec_zQjJujubRnhGoC6I/edit?usp=sharing) 145 | - [Monster Battle 1](https://github.com/FullstackAcademy/Foundations.OOP.MonsterBattle.Solution/blob/4.1Solution/index.js) 146 | 147 | 148 | ### 02_07_2023 149 | 150 | - Morning Review 151 | - [code](/02_07_2023/review/review.js) 152 | - [Lecture](https://youtu.be/l-qjkdgVSg8) 153 | 154 | - Inheritance 155 | - [Examples](02_07_2023/inheritance) 156 | - [Lecture](https://youtu.be/nXxLL479FWo) 157 | 158 | - Solutions 159 | - [Team Worksheet](https://docs.google.com/document/d/1Yh_LScwN5J6V2Ol75-FxKV4OR-YU-GG-JgoJuWZguGU/edit?usp=sharing) 160 | - [Monsters to Screen](https://github.com/FullstackAcademy/Foundations.OOP.MonsterBattle.Solution/tree/4.2Solution/js) 161 | - [Monsters to Screen Lecture](https://youtu.be/DOWpCwW4Xc8) 162 | 163 | ### 02_08_2023 164 | 165 | - Expectations Going Forward 166 | - [Recording](https://youtu.be/wMHAlPnfNi0) 167 | 168 | ### 02_09_2023 169 | 170 | - Morning Review 171 | - [Lecture](https://youtu.be/FT4wHgnKkEQ) 172 | 173 | - Lecture 174 | - [Video](https://youtu.be/y6jvVg0iV04) 175 | - [demo code ](02_09_2023/schools-example) 176 | 177 | - Card Game 178 | - [Basic classes and game render](https://github.com/FullstackAcademy/Foundations.OOP.CardGames.Solution.git) 179 | 180 | ### 02_10_2023 181 | 182 | - Morning Review + Function Constructors / Classes 183 | - [Lecture](https://youtu.be/ylDX-yOMOBE) 184 | - [Examples](02_10_2023/review.js) 185 | 186 |
    187 | 188 | ## Week 5 189 |
    190 | Functional Programming 191 | 192 | ### 02_13_2023 193 | 194 | - Morning Review 195 | - [Notes](02_13_2023/morning-rev) 196 | - Recursion 197 | - [Lecture][https://youtu.be/FFWm6cJFKGg] 198 | - [Notes](02_13_2023/recursion) 199 | - Functions Worksheet 200 | - [Notes](02_13_2023/function-tests.js) 201 | - [Worksheet Solution](https://docs.google.com/document/d/1_cPLOcNDKjAdLBAWrPkDh2M2R9NyrIS_0yFSiHbnwm8/edit?usp=sharing) 202 | - [Video](https://youtu.be/MQGoHuZuuTY) 203 | 204 | - TDD Recursion 205 | - [Solution Code](https://github.com/FullstackAcademy/Foundations.TDD.Recursion.Solution) 206 | 207 | ### 02_14_2023 208 | 209 | - Morning Lecture 210 | - [Lecture](https://youtu.be/1_l_kKVnxLI) 211 | - [Recursion Review Example](02_14_2023/recursion.js) 212 | - New Content Examples 213 | - [Higher Order Function](02_14_2023/higher-order-functions.js) 214 | - [Closures](02_14_2023/closures.js) 215 | - [Factory Function Closure](02_14_2023/factoryClosure.js) 216 | - [this](02_14_2023/this.js) 217 | - [Currying](02_14_2023/currying.js) 218 | 219 | - Afternoon 220 | - [Team Worksheet Review](https://youtu.be/ltQBO4knUEs) 221 | - [Team Worksheet Solution](https://docs.google.com/document/d/1cX7jlrdrvDDtk4XEKXTlDJ7Zmeskhppx6kV74vPXs6E/edit?usp=sharing) 222 | - [Pair Assignment Explanation](https://youtu.be/kBeiiLh0ZAg) 223 | - [Text Processing Solution](https://gist.github.com/orlandocaraballo/4d2c237d1c80edd42b4863a504fa5e59) 224 | 225 | 226 | ### 02_15_2023 227 | 228 | - Morning Review 229 | - [Demo Code](02_15_2023/moring-rev) 230 | - [Lecture](https://youtu.be/DvXIoO3Pvrk) 231 | 232 | - Map/ Filter/ Reduce 233 | - [Example](02_15_2023/map-filter-reduce) 234 | - [Lecture part 1](https://youtu.be/nOM6vMoNNOY) 235 | - [Lecture part 2](https://youtu.be/wpTjGnK7Irs) 236 | 237 | - [DataAnalytics Solution](https://github.com/FullstackAcademy/Foundations.FP.DataAnalytics.Solution) 238 | - [ Solution Video 1-5, 8](https://youtu.be/E5_frxo4jZ0) 239 | 240 | 241 | 242 | ### 02_16_2023 243 | 244 | - Morning 245 | - [Lecture](https://youtu.be/DvXIoO3Pvrk) 246 | - [Sort](02_16_2023/sort.js) 247 | - [Higher Order Functions](02_16_2023/higher-order-functions.js) 248 | - Afternoon 249 | - [Dynamic DOM Review + Bookshelf Sorting Intro](https://youtu.be/xFKnUZ6M9L4) 250 | - [Dynamic DOM Solution](https://github.com/FullstackAcademy/Foundations.FP.DynamicDOM.Solution) 251 | 252 | ### 02_17_2023 253 | 254 | - Foundations FINAL PROJECT 255 | - [Intro to final Project Lecture](https://youtu.be/PxsNmM2THRo) 256 | 257 | - Review > Apartment Listings 258 | - [Demo](02_17_2023/) 259 | - [Video](https://youtu.be/k1eaLfoDY_E) 260 | 261 |
    262 |
    263 | 264 | 265 | ## Weekly Project Solutions 266 | 267 | \* *Disclaimer* \* We will release solutions to the end of week projects only AFTER grades have been posted. This may take up to a week depending on how complex the grading can be since we do grade each one individually to give you the most attention possible. 268 | 269 | - [Portfolio Site](https://github.com/FullstackAcademy/Foundations.Assessment.Portfolio.Solution) 270 | - [Technical Interview TDD](https://github.com/FullstackAcademy/Foundations.Assessment.TechnicalInterview.Solution) 271 | - [Whack-a-Mole](https://github.com/FullstackAcademy/Foundations.Assessment.Whackamole.Solution) 272 | - [Bookshelf Data](https://github.com/FullstackAcademy/Foundations.Assessment.BookshelfSims.Solution/tree/bookshelf-data-classes) 273 | - [Bookshelf Sorting](https://github.com/FullstackAcademy/Foundations.Assessment.BookshelfSims.Solution) -------------------------------------------------------------------------------- /02_15_2023/map-filter-reduce/mapping-to-objs.js: -------------------------------------------------------------------------------- 1 | 2 | let sentence = `When in the Course of human events, it becomes necessary for one people to dissolve the political bands which have connected them with another, and to assume among the powers of the earth, the separate and equal station to which the Laws of Nature and of Nature's God entitle them, a decent respect to the opinions of mankind requires that they should declare the causes which impel them to the separation. 3 | 4 | We hold these truths to be self-evident, that all men are created equal, that they are endowed by their Creator with certain unalienable Rights, that among these are Life, Liberty and the pursuit of Happiness.--That to secure these rights, Governments are instituted among Men, deriving their just powers from the consent of the governed, --That whenever any Form of Government becomes destructive of these ends, it is the Right of the People to alter or to abolish it, and to institute new Government, laying its foundation on such principles and organizing its powers in such form, as to them shall seem most likely to effect their Safety and Happiness. Prudence, indeed, will dictate that Governments long established should not be changed for light and transient causes; and accordingly all experience hath shewn, that mankind are more disposed to suffer, while evils are sufferable, than to right themselves by abolishing the forms to which they are accustomed. But when a long train of abuses and usurpations, pursuing invariably the same Object evinces a design to reduce them under absolute Despotism, it is their right, it is their duty, to throw off such Government, and to provide new Guards for their future security.--Such has been the patient sufferance of these Colonies; and such is now the necessity which constrains them to alter their former Systems of Government. The history of the present King of Great Britain is a history of repeated injuries and usurpations, all having in direct object the establishment of an absolute Tyranny over these States. To prove this, let Facts be submitted to a candid world. 5 | 6 | He has refused his Assent to Laws, the most wholesome and necessary for the public good. 7 | 8 | He has forbidden his Governors to pass Laws of immediate and pressing importance, unless suspended in their operation till his Assent should be obtained; and when so suspended, he has utterly neglected to attend to them. 9 | 10 | He has refused to pass other Laws for the accommodation of large districts of people, unless those people would relinquish the right of Representation in the Legislature, a right inestimable to them and formidable to tyrants only. 11 | 12 | He has called together legislative bodies at places unusual, uncomfortable, and distant from the depository of their public Records, for the sole purpose of fatiguing them into compliance with his measures. 13 | 14 | He has dissolved Representative Houses repeatedly, for opposing with manly firmness his invasions on the rights of the people. 15 | 16 | He has refused for a long time, after such dissolutions, to cause others to be elected; whereby the Legislative powers, incapable of Annihilation, have returned to the People at large for their exercise; the State remaining in the mean time exposed to all the dangers of invasion from without, and convulsions within. 17 | 18 | He has endeavoured to prevent the population of these States; for that purpose obstructing the Laws for Naturalization of Foreigners; refusing to pass others to encourage their migrations hither, and raising the conditions of new Appropriations of Lands. 19 | 20 | He has obstructed the Administration of Justice, by refusing his Assent to Laws for establishing Judiciary powers. 21 | 22 | He has made Judges dependent on his Will alone, for the tenure of their offices, and the amount and payment of their salaries. 23 | 24 | He has erected a multitude of New Offices, and sent hither swarms of Officers to harrass our people, and eat out their substance. 25 | 26 | He has kept among us, in times of peace, Standing Armies without the Consent of our legislatures. 27 | 28 | He has affected to render the Military independent of and superior to the Civil power. 29 | 30 | He has combined with others to subject us to a jurisdiction foreign to our constitution, and unacknowledged by our laws; giving his Assent to their Acts of pretended Legislation: 31 | 32 | For Quartering large bodies of armed troops among us: 33 | 34 | For protecting them, by a mock Trial, from punishment for any Murders which they should commit on the Inhabitants of these States: 35 | 36 | For cutting off our Trade with all parts of the world: 37 | 38 | For imposing Taxes on us without our Consent: 39 | 40 | For depriving us in many cases, of the benefits of Trial by Jury: 41 | 42 | For transporting us beyond Seas to be tried for pretended offences 43 | 44 | For abolishing the free System of English Laws in a neighbouring Province, establishing therein an Arbitrary government, and enlarging its Boundaries so as to render it at once an example and fit instrument for introducing the same absolute rule into these Colonies: 45 | 46 | For taking away our Charters, abolishing our most valuable Laws, and altering fundamentally the Forms of our Governments: 47 | 48 | For suspending our own Legislatures, and declaring themselves invested with power to legislate for us in all cases whatsoever. 49 | 50 | He has abdicated Government here, by declaring us out of his Protection and waging War against us. 51 | 52 | He has plundered our seas, ravaged our Coasts, burnt our towns, and destroyed the lives of our people. 53 | 54 | He is at this time transporting large Armies of foreign Mercenaries to compleat the works of death, desolation and tyranny, already begun with circumstances of Cruelty & perfidy scarcely paralleled in the most barbarous ages, and totally unworthy the Head of a civilized nation. 55 | 56 | He has constrained our fellow Citizens taken Captive on the high Seas to bear Arms against their Country, to become the executioners of their friends and Brethren, or to fall themselves by their Hands. 57 | 58 | He has excited domestic insurrections amongst us, and has endeavoured to bring on the inhabitants of our frontiers, the merciless Indian Savages, whose known rule of warfare, is an undistinguished destruction of all ages, sexes and conditions. 59 | 60 | In every stage of these Oppressions We have Petitioned for Redress in the most humble terms: Our repeated Petitions have been answered only by repeated injury. A Prince whose character is thus marked by every act which may define a Tyrant, is unfit to be the ruler of a free people. 61 | 62 | Nor have We been wanting in attentions to our Brittish brethren. We have warned them from time to time of attempts by their legislature to extend an unwarrantable jurisdiction over us. We have reminded them of the circumstances of our emigration and settlement here. We have appealed to their native justice and magnanimity, and we have conjured them by the ties of our common kindred to disavow these usurpations, which, would inevitably interrupt our connections and correspondence. They too have been deaf to the voice of justice and of consanguinity. We must, therefore, acquiesce in the necessity, which denounces our Separation, and hold them, as we hold the rest of mankind, Enemies in War, in Peace Friends. 63 | 64 | We, therefore, the Representatives of the united States of America, in General Congress, Assembled, appealing to the Supreme Judge of the world for the rectitude of our intentions, do, in the Name, and by Authority of the good People of these Colonies, solemnly publish and declare, That these United Colonies are, and of Right ought to be Free and Independent States; that they are Absolved from all Allegiance to the British Crown, and that all political connection between them and the State of Great Britain, is and ought to be totally dissolved; and that as Free and Independent States, they have full Power to levy War, conclude Peace, contract Alliances, establish Commerce, and to do all other Acts and Things which Independent States may of right do. And for the support of this Declaration, with a firm reliance on the protection of divine Providence, we mutually pledge to each other our Lives, our Fortunes and our sacred Honor. 65 | 66 | ` 67 | let words = sentence.split(' ') 68 | // divides the string into array of words 69 | 70 | // console.log(words) 71 | console.log(`There are ${words.length} words`) 72 | 73 | // write a function to check for how many times a word appears in a sentence? 74 | 75 | // word - word to look for 76 | // sentence - array of words 77 | const checkDuplicateWordsCount = (wordToFind, sentence) => { 78 | let result = sentence.filter(element => wordToFind.toLowerCase() === element.toLowerCase()) 79 | return result.length 80 | } 81 | 82 | console.log(checkDuplicateWordsCount('when', words)) 83 | 84 | let wordCount = { 85 | the: 76, 86 | of: 76, 87 | when: 3 88 | } 89 | 90 | const countWordsInSentence = (sentence) => { 91 | let wordsObj = { } 92 | sentence = sentence.map(word => word.toLowerCase()) // make all the words lower case 93 | 94 | sentence.map(word => { 95 | // if (word in wordsObj) { 96 | // wordsObj[word] += 1 97 | // } else { 98 | // // word is not in my wordObj 99 | // wordsObj[word] = 1 100 | // } 101 | wordsObj[word] = checkDuplicateWordsCount(word, sentence) 102 | 103 | }) 104 | 105 | return wordsObj 106 | } 107 | 108 | const mostFreqWord = (wordsObj) => { 109 | let mostFreqWord 110 | let freq = 0 111 | 112 | for (let word in wordsObj) { 113 | if ( wordsObj[word] > freq) { 114 | mostFreqWord = word 115 | freq = wordsObj[word] 116 | } 117 | } 118 | 119 | console.log('The most freq word is:', mostFreqWord) 120 | console.log('it appears in the text', freq, 'times') 121 | } 122 | 123 | 124 | let obj = countWordsInSentence(words) 125 | console.log(obj) 126 | mostFreqWord(obj) 127 | 128 | 129 | 130 | 131 | 132 | 133 | // What would be useful for each prompt? 134 | 135 | // 1) 136 | // .length 137 | 138 | // 2) 139 | // token.length -> length of a sinle token 140 | // sum up all the lengths(reduce?) 141 | 142 | // 3) 143 | // total length of all words / total number of words 144 | 145 | // 4) 146 | // loop/map/forEach find the length of a token and see if its longer than previous ones 147 | 148 | // 5) 149 | // filter 150 | 151 | // 6 & 7 (how many start with a character) 152 | // filter 153 | 154 | let bText = ['hello', 'test', 'he', 'Welcome'] 155 | const numberOfTokens = (bText) => bText.length 156 | 157 | const totalCharacters = (bText) => bText.reduce((acc, curVal) => acc + curVal.length,0) 158 | 159 | console.log(totalCharacters(bText)) 160 | console.log(totalCharacters(bText) / numberOfTokens(bText)) --------------------------------------------------------------------------------