├── .gitignore
├── LICENSE
├── README.md
├── assets
├── explain.gif
└── hobbit.gif
├── week-1-review
├── DOM-Async
│ ├── dom-async-notes.md
│ └── todo-list-practice
│ │ ├── README.md
│ │ ├── todos.css
│ │ ├── todos.html
│ │ └── todos.js
└── assets
│ └── DOM-model.svg.png
├── week-2-review
├── assets
│ └── lifecycle.png
├── class-components
│ ├── .babelrc
│ ├── index.html
│ ├── package-lock.json
│ ├── package.json
│ ├── src
│ │ ├── App.jsx
│ │ ├── components
│ │ │ ├── Greeting.jsx
│ │ │ ├── Page.jsx
│ │ │ └── Visitors.jsx
│ │ └── index.js
│ └── webpack.config.js
├── react-hooks
│ ├── hook-example
│ │ ├── .babelrc
│ │ ├── README.md
│ │ ├── package-lock.json
│ │ ├── package.json
│ │ ├── public
│ │ │ └── index.html
│ │ ├── src
│ │ │ ├── App.js
│ │ │ ├── components
│ │ │ │ ├── ColorToggle.js
│ │ │ │ └── Counter.js
│ │ │ ├── index.js
│ │ │ └── styles.css
│ │ └── webpack.config.js
│ └── react-hook-notes.md
└── ticTacToeRedux
│ ├── .babelrc
│ ├── .eslintrc.json
│ ├── .gitignore
│ ├── README.md
│ ├── client
│ ├── App.jsx
│ ├── actions
│ │ └── actions.js
│ ├── components
│ │ ├── Board.jsx
│ │ ├── Cell.jsx
│ │ ├── Row.jsx
│ │ ├── Winner.jsx
│ │ └── resetButton.jsx
│ ├── constants
│ │ └── actionTypes.js
│ ├── containers
│ │ ├── MainContainer.jsx
│ │ └── MarketsContainer.jsx
│ ├── index.js
│ ├── reducers
│ │ ├── gameReducer.js
│ │ └── index.js
│ ├── store.js
│ └── styles.css
│ ├── index.html
│ ├── package-lock.json
│ ├── package.json
│ └── webpack.config.js
└── week-3-review
├── assets
├── json.png
├── login.png
├── plus.png
├── pm-UI.png
├── pm-header.png
├── pm-right-panel.png
└── register.png
└── postman
└── postman-notes.md
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2023 Codesmith-Jr-Code-Review
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Junior Review
2 |
3 | Welcome to the Junior Review repository! This repo is designed to help you get a brief overview of key concepts in the previous week and weeks to come. The content is divided into weekly reviews, with each week focusing on specific topics
4 |
5 | ## Table of Contents
6 | [Week 1](/week-1-review/)
7 | - [DOM-Async](/week-1-review/DOM-Async/)
8 | - [DOM Async Notes](/week-1-review/DOM-Async/dom-async-notes.md)
9 | - [Todo List Example](/week-1-review/DOM-Async/todo-list-practice/)
10 |
11 | [Week 2](/week-2-review/)
12 | - [Class Components](/week-2-review/class-components/)
13 | - [React Hooks](/week-2-review/react-hooks/)
14 | - [React Hooks Notes](/week-2-review/react-hooks/react-hook-notes.md)
15 | - [React Hooks Example](/week-2-review/react-hooks/hook-example/)
16 | - [ticTacToeRedux](/week-2-review/ticTacToeRedux/)
17 |
18 | [Week 3](/week-3-review/)
19 | - [Postman](/week-3-review/postman/)
20 |
21 | ---
22 | 😄 Remember to be patient with yourself!
23 | Learning can be hard, and it is important to remember everyone learns at their own pace~
24 |
25 |
26 |
27 |
28 | ✋ Don't be afraid to ask for help!
29 |
30 |
31 |
32 |
33 |
34 | ---
35 | Please feel free to reach out with any questions you may have!
36 |
37 | - Billy (William) Murphy [[Github](https://github.com/olsoninoslo)] [[LinkedIn](https://www.linkedin.com/in/w-william-j-murphy/)]
38 | - Rachel Kucharski [[Github](https://github.com/rachelk585)] [[LinkedIn](https://www.linkedin.com/in/rachelkucharski/)]
39 | - Samuel Lee [[Github](https://github.com/leesamuel423)] [[LinkedIn](https://www.linkedin.com/in/leesamuel423/)]
40 |
41 | And give these OSPs a ⭐
42 |
43 | 🔱 [Trydent](https://github.com/oslabs-beta/trydent) 🔱
44 | 🧪 [ReacType](https://github.com/open-source-labs/ReacType) 🧪
45 | 🌊 [Swell](https://github.com/open-source-labs/Swell) 🌊
46 | 🍃 [Spearmint](https://github.com/open-source-labs/spearmint) 🍃
47 | ⏰ [Chronos](https://github.com/open-source-labs/Chronos) ⏰
48 | ✨ [Recoilize](https://github.com/open-source-labs/Recoilize) ✨
49 | 🕵️♂️ [dbSpy](https://github.com/open-source-labs/dbSpy) 🕵️♂️
50 | ⏲️ [ReacTime](https://github.com/open-source-labs/reactime)⏲️
51 |
52 |
--------------------------------------------------------------------------------
/assets/explain.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Codesmith-Jr-Code-Review/jr-review/1d2dd96cb14d4c1900ee9abb41ed960b0c1a4b47/assets/explain.gif
--------------------------------------------------------------------------------
/assets/hobbit.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Codesmith-Jr-Code-Review/jr-review/1d2dd96cb14d4c1900ee9abb41ed960b0c1a4b47/assets/hobbit.gif
--------------------------------------------------------------------------------
/week-1-review/DOM-Async/dom-async-notes.md:
--------------------------------------------------------------------------------
1 | DOM Manipulation and Async Notes
2 |
3 | ## Table of Contents
4 | - [Introduction to DOM](#introduction-to-dom)
5 | - [Accessing and Modifying Elements](#accessing-and-modifying-elements)
6 | - [Selecting Elements](#selecting-elements)
7 | - [Modification of Elements](#modification-of-elements)
8 | - [Creating and Adding Elements](#creating-and-adding-elements)
9 | - [Removing Elements](#removing-elements)
10 | - [Event Listeners](#event-listeners)
11 | - [Asynchronous Operations](#asynchronous-operations)
12 | - [Promises (THIS IS IMPORTANT)](#promises-this-is-important)
13 | - [Async/Await](#asyncawait)
14 | - [Thenables](#thenables)
15 |
16 |
17 | ## Introduction to DOM
18 | - DOM is programming interface for HTML and XML documents, representing structure of a document as a tree of objects.
19 | - Each object represents a part of the document, such as an element, attribute, or text
20 |
21 | DOM Model Example
22 |
23 |
24 |
25 | ## Accessing and Modifying Elements
26 |
27 | ### Selecting Elements
28 | - `document.querySelector(selector)`: Selects the first element that matches the specific selector
29 | - `document.querySelectorAll(selector)`: Returns a Node List of all elements that match the specific selector
30 |
31 | Example
32 |
33 | ```js
34 | // grabs first item with an id of 'container'
35 | const container = document.querySelector('#container');
36 |
37 | // grabs all the items that have a class of 'button'
38 | const buttons = document.querySelectorAll('.button');
39 | ```
40 |
41 | ### Modification of Elements
42 | There is a bit, but pay special attention to the "⭐" ones, they the most useful
43 | - `element.innerHTML`: Get or set the HTML content of an element. ⭐
44 | - `element.textContent`: Get or set the text content of an element. ⭐
45 | - `element.setAttribute(name, value)`: Set an attribute of an element. ⭐
46 | - `element.removeAttribute(name)`: Remove an attribute of an element.
47 | - `element.classList.add(className)`: Add a class to an element.
48 | - `element.classList.remove(className)`: Remove a class from an element.
49 |
50 | Example
51 |
52 | ```js
53 | // assign first item with id 'container' to the variable container
54 | const container = document.querySelector('#container');
55 |
56 | // assign the innerHTML property of container 'Cool!'
57 | container.innerHTML = '
Cool!
';
58 |
59 | // give the container's 'best-osp' attribute a value of 'trydent'
60 | container.setAttribute('best-osp', 'trydent');
61 |
62 | // ! Think of the container as an object. You have given the object's innerHTML key a value and the object's data-custom key a value as well
63 | ```
64 |
65 |
66 | ### Creating and Adding
67 | - `document.createElement(tagName)`: Create a new element with the specified tag name.
68 | - `parentNode.appendChild(childNode)`: Append a child node to the parent node.
69 |
70 | Example
71 |
72 | ```js
73 | // create a new element newParagraph with a
tag
74 | const newParagraph = document.createElement('p');
75 | newParagraph.textContent = 'This is a new paragraph.';
76 | const container = document.querySelector('#container');
77 |
78 | // append newParagraph to the container node
79 | container.appendChild(newParagraph);
80 | ```
81 |
82 |
83 | ### Removing Elements
84 | - `parentNode.removeChild(childNode)`: Remove a child node from the parent node.
85 |
86 | Example
87 |
88 | ```js
89 | const container = document.querySelector('#container');
90 |
91 | // grab the first
inside container
92 | const paragraphToRemove = container.querySelector('p');
93 |
94 | // delete the first
from the container node
95 | container.removeChild(paragraphToRemove);
96 | ```
97 |
98 |
99 | ### Event Listeners
100 | - `element.addEventListener(event, callback)`: Attach an event listener to an element.
101 | - `element.removeEventListener(event, callback)`: Remove an event listener from an element.
102 |
103 | Example
104 |
105 | ```js
106 | const button = document.querySelector('button');
107 |
108 | // function will log 'Button clicked!'
109 | function handleClick() {
110 | console.log('Button clicked!');
111 | }
112 |
113 | // listening for a 'click' event on the button. When the event happens, runs handleClick
114 | button.addEventListener('click', handleClick);
115 |
116 | // Later, if you want to remove the event listener
117 | // button.removeEventListener('click', handleClick);
118 | ```
119 |
120 |
121 | ## Asynchronous Operations
122 | - Asynch allows multiple tasks to be performed simultaneously.
123 | - Don't have to wait for one task to complete before starting the next
124 |
125 | ### Promises (THIS IS IMPORTANT)
126 | - Promise is an object that represents the eventual completion (or failure) of an async operation and its resulting value
127 | - Promises have 3 states:
128 | 1. Pending
129 | 2. Fulfilled
130 | 3. Rejected
131 |
132 | - Think of it like this:
133 | - Your parents forgot your birthday so they gave you a "coupon", where you could ask for whatever you wanted whenever.
134 | - 2 months later, you ask your parents for a playstation
135 | > Currently, the voucher is in a pending state: order has been placed, but nothing delivered
136 | - Scenario 1: Your parents actually agree and get you a playstation.
137 | > Voucher is now fulfilled: playstation has been delivered successfully, and you can now use that playstation to do whatever you want next
138 | - Scenario 2: Your parents say no
139 | > Voucher is now rejected: product couldn't be delivered and you are big sad
140 |
141 |
142 | Example
143 |
144 | ```js
145 | // Create a new promise
146 | const promise = new Promise((resolve, reject) => {
147 | // Simulate an asynchronous operation using setTimeout
148 | setTimeout(() => {
149 | // Resolve the promise with a value
150 | resolve('Playstation received');
151 | }, 1000);
152 | });
153 |
154 | // Handle the resolved promise using .then()
155 | promise.then((result) => {
156 | console.log(result); // Output: 'Playstation received'
157 | });
158 | /** Summary Because Promises are Important
159 | * Created a new Promise and stored it in the promise variable.
160 | * Promise represents the eventually complete or failure of asynch operation and its resulting value (Imma get this playstation or I won't, but if I get it, wow Imma play lots of games)
161 | * Inside the promise example, there is a setTimeout function to simulate an async operation. So after 1 second (1000 ms), we are gonna try to do something
162 | * BOOM, 1 second, great, we actually resolved the promise! Now the value 'Playstation received' is passed to the resolve function (which remember was a parameter) and it becomes the result of the promise
163 | * 'promise' variable is now representing the Promise that will be resolved with 'Playstation received' after 1 second
164 | */
165 | ```
166 |
167 |
168 | - Promises have a few key methods
169 | 1. `.then()`: Chained after a promise, it takes two optional arguments: (1) fulfillment handler and (2) rejection handler
170 | 2. `.catch()`: Handles rejection case, taking a single rejection handler as the argument
171 | 3. `finally()`: Executes given function when promise is settled, regardless of outcome
172 | _______not very often used in Codesmith
173 |
174 | ### Async/Await
175 | - Cool kids way of handling promises and make async code look and behave more like synchronous code
176 | - `async` keyword used to declare an asynchronous function
177 | - `await` keyword used to pause the execution of the function until a promise is settled
178 |
179 | Example
180 |
181 | ```js
182 | // Function that returns a promise
183 | const bestOSP = () => {
184 | return new Promise((resolve) => {
185 | setTimeout(() => {
186 | resolve('Trydent is the best OSP for sure');
187 | }, 1000);
188 | });
189 | };
190 |
191 | // Async function to handle the promise
192 | const fetchData = async () => {
193 | try {
194 | // Wait for the promise to resolve from bestOSP() and assign results to data
195 | const data = await bestOSP();
196 | console.log(data); // Output: 'Trydent is the best OSP for sure'
197 | } catch (error) {
198 | // Handle any errors
199 | console.error('Error:', error);
200 | }
201 | };
202 |
203 | // Call the async function
204 | fetchData(); // console logs 'Trydent is the best OSP for sure'
205 | ```
206 |
207 |
208 | ### Thenables
209 | - Objects that have a `then` method, taking in 1 or 2 arguments:
210 | 1. A callback function for fullfillment
211 | 2. Another callback for rejection
212 | - You can chain `then`s wowow!
213 |
214 | Example
215 |
216 | ```js
217 | // we have a fake API that outputs and array of objects representing all codesmith OSPs from best to worst
218 | const apiURL = 'https://api.fakedata.com/rankingOSP';
219 |
220 | // function to process data and return the best and meh OSP
221 | function getBestAndMeh(osps) {
222 | return {
223 | best: osps[0],
224 | meh: osps[osps.length - 1]
225 | };
226 | }
227 |
228 | // now we can fetch the data and process it with .then
229 | fetch(apiURL)
230 | //first .then() receives response object and we extract the JSON data from it with .json method
231 | .then((response) => response.json())
232 | // second .then() receives the actual data and we can do stuff with it
233 | .then((data) => {
234 | console.log(`Best OSP is ${ getBestAndMeh(data).best }`)
235 | console.log(`${ getBestAndMeh(data).meh } is meh`)
236 | })
237 | // logs 'Best OSP is Trydent', and 'Spearmint is meh'
238 | // jk we love peppermint too
239 | ```
240 |
241 |
242 |
243 | Hope these provide you a good overview of the basics! Remember, practice is key~
244 | GIVE TRYDENT A STAR IF YOU HAVEN'T ALREADY [-->TRIDENT GITHUB LINK <--](https://github.com/oslabs-beta/trydent)
245 |
246 | :)
247 |
--------------------------------------------------------------------------------
/week-1-review/DOM-Async/todo-list-practice/README.md:
--------------------------------------------------------------------------------
1 | # ToDo List
2 |
3 | This simple ToDo List application demonstrates basic DOM manipulation using vanilla JavasScript. Currently, there is functionality to create, read, and delete tasks. To run this application, please open the `todos.html` with Live Share!
4 |
5 | ## Files
6 |
7 | ### todo.html
8 | - The main HTML file contains the structure of the application. It includes a `div` with the ID `todoHome` that will hold the content of the application. The `todo.js` file is included as a script at the end of the `body`.
9 |
10 | ### todo.css
11 | - This file contains the styles for the application. It sets the background color, layout, and basic styling for the application elements.
12 |
13 | ### todo.js
14 | - The JavaScript file handles the DOM manipulation and functionality of the application. It creates elements, appends them to the DOM, and handles user interactions, such as adding and deleting tasks.
15 |
16 | ## DOM Manipulation
17 |
18 | - This application demonstrates how to create, modify, and delete elements in the DOM using vanilla JavaScript. The elements are created using `document.createElement()`, and attributes are set using `setAttribute()`. Elements are appended to their parent elements using `appendChild()`. Event listeners are added to handle user interactions.
19 |
20 | ## Challenges
21 |
22 | ### 1. Add an Edit Functionality
23 | - [ ] Add an "Edit" button next to the "Delete" button for each task. When the user clicks the "Edit" button, the task name should be replaced with an input field pre-filled with the current task name. The user should be able to modify the task name and submit the changes. Update the local `todos` array and the DOM accordingly.
24 |
25 | ### 2. Create a Completed/Deleted Tasks Section
26 | - [ ] Create a new section in the application to display completed or deleted tasks. When a task is marked as complete or deleted, move it to this new section. This can help users keep track of tasks they have completed or removed. You can add an additional button for marking tasks as complete, or you can use the existing "Delete" button for this purpose.
27 |
28 | ## Learning Resources
29 | You should not go through all of these resources. These are just a variety of resources you can utilize should you need some different perspectives!
30 |
31 | - [Mozilla Developer Network (MDN) - Introduction to the DOM](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction)
32 | - [MDN - DOM Manipulation](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents)
33 | - [MDN - DOM Enlightenment](http://www.domenlightenment.com/)
34 | - [MDN - Using Event Listeners](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener)
35 | - [W3Schools - JavaScript HTML DOM](https://www.w3schools.com/js/js_htmldom.asp)
36 | - [Eloquent JavaScript - Chapter 14: The Document Object Model](https://eloquentjavascript.net/14_dom.html)
37 |
38 |
39 |
40 |
--------------------------------------------------------------------------------
/week-1-review/DOM-Async/todo-list-practice/todos.css:
--------------------------------------------------------------------------------
1 | * {
2 | background-color: lightblue;
3 | }
4 |
5 | #todoHome {
6 | display: flex;
7 | flex-direction: column;
8 | }
9 |
10 | #createTodo {
11 | display: flex;
12 | flex-direction: column;
13 | width: 50%;
14 | }
15 |
16 | input {
17 | padding: 0.5rem;
18 | font-size: 1rem;
19 | }
20 |
21 | #todoDiv {
22 | display: flex;
23 | flex-wrap: wrap;
24 | }
25 |
26 | .todoItem {
27 | width: 20%;
28 | margin: 1rem;
29 | padding: 1rem;
30 | border: 1px solid black;
31 | }
--------------------------------------------------------------------------------
/week-1-review/DOM-Async/todo-list-practice/todos.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | Practice Todo
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
--------------------------------------------------------------------------------
/week-1-review/DOM-Async/todo-list-practice/todos.js:
--------------------------------------------------------------------------------
1 | // Please open todos.html with Liver Server to view this page
2 |
3 | // Wait for the DOM to load before running the script
4 | document.addEventListener('DOMContentLoaded', () => {
5 | console.log('ToDo DOM loaded');
6 |
7 | // Hard-coded user and todos array
8 | const user = 'TRYDENT';
9 | const todos = [{name: 'star the trydent repo'}];
10 |
11 | // Create and display the title header
12 | const title = document.createElement('h1');
13 | title.innerText = `ToDo List`;
14 | document.querySelector('#todoHome').appendChild(title);
15 |
16 | // Create a new div to hold the "Create a New ToDo" form
17 | const createTodoDiv = document.createElement('div');
18 | createTodoDiv.setAttribute('id', 'createTodo');
19 | document.querySelector('#todoHome').appendChild(createTodoDiv);
20 |
21 | // Create a heading for the form
22 | const createTodoLabel = document.createElement('h2');
23 | createTodoLabel.innerText = 'Create a New Task';
24 | document.querySelector('#createTodo').appendChild(createTodoLabel);
25 |
26 | // Create the form element
27 | const createTodoForm = document.createElement('form');
28 | createTodoForm.setAttribute('id', 'create-todo-form');
29 | document.querySelector('#createTodo').appendChild(createTodoForm);
30 | // Create an input field for the task name in the form
31 | const todoName = document.createElement('input');
32 | todoName.setAttribute('type', 'text');
33 | todoName.setAttribute('id', 'create-todo-name');
34 | todoName.setAttribute('placeholder', 'ToDo Name');
35 | document.querySelector('#createTodo').appendChild(todoName);
36 | // Create a submit button for the form
37 | const todoSubmit = document.createElement('input');
38 | todoSubmit.setAttribute('type', 'submit');
39 | todoSubmit.setAttribute('id', 'create-todo-submit');
40 | todoSubmit.setAttribute('value', 'Submit');
41 | document.querySelector('#createTodo').appendChild(todoSubmit);
42 |
43 | // Display the "Your ToDos" header
44 | const todoLabel = document.createElement('h2');
45 | todoLabel.innerText = 'Your ToDos';
46 | document.querySelector('#todoHome').appendChild(todoLabel);
47 |
48 | // Create the container for the tasks
49 | const todoDiv = document.createElement('div');
50 | todoDiv.setAttribute('id', 'todoDiv');
51 | document.querySelector('#todoHome').appendChild(todoDiv);
52 | // Add existing tasks to the DOM [try adding a task in the todos array and reloading the page]
53 | todos.forEach((todo) => {
54 | addTaskToDOM(todo);
55 | });
56 |
57 | // Function to add a task to the DOM. These will be the boxes that show up on submission
58 | function addTaskToDOM(task) {
59 | // Create a new div to hold the task item
60 | const todoItem = document.createElement('div');
61 | todoItem.setAttribute('class', 'todoItem');
62 | document.querySelector('#todoDiv').appendChild(todoItem);
63 | //
Element for the task name
64 | const todoName = document.createElement('h3');
65 | todoName.innerText = task.name;
66 | todoItem.appendChild(todoName); // referring to the todoItem in line 60, not the class! How might we refer to a class?
67 | //