Name
+
+
+
+ {shouldRemove ? null :
+ );
+}
+```
+
+and the ClickReminder code:
+```
+function ClickReminder() {
+ const [timeoutId, setTimeoutId] = useState(null)
+
+ const clickHandler = () => {
+ console.log('clearing timeout');
+ clearTimeout(timeoutId)
+ }
+
+ useEffect(() => {
+ let timeoutId = setTimeout(()=>{alert("remember to click")}, 2000)
+ setTimeoutId(timeoutId)
+
+ return () => {
+ clearTimeout(timeoutId)
+ }
+ }, [])
+
+ return (
+
+
+
+ );
+}
+```
+
+This is good to know. It brings us to explore another option. Watch this video where we investigate another case of using cleanups:
+
+
+
+Here is the code:
+```
+function FriendStatus(props) {
+ const [isOnline, setIsOnline] = useState(null);
+
+ useEffect(() => {
+ function handleStatusChange(status) {
+ setIsOnline(status.isOnline);
+ }
+ ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
+
+ return function cleanup() {
+ ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
+ };
+ });
+
+ if (isOnline === null) {
+ return 'Loading...';
+ }
+ return
+ Frind with id {props.friend.id} is {isOnline ? 'Online' : 'Offline'}
+
+}
+```
+
+One last thing that we can add is an optimization. We do want the cleanup function running if the props change, but only if the friend's id has changed.
+At the moment the cleanup function will run on every update.
+To avoid that we can add the id to the dependencies array like that:
+
+```
+ useEffect(() => {
+ function handleStatusChange(status) {
+ setIsOnline(status.isOnline);
+ }
+ ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
+
+ return function cleanup() {
+ ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
+ };
+ }, [props.friend.id]);
+```
+
+Now the cleanup will run only if the id of the friend has changed.
\ No newline at end of file
diff --git a/react-advanced/react-lifecycle-and-the-useeffect-hook/_sidebar.md b/react-advanced/react-lifecycle-and-the-useeffect-hook/_sidebar.md
new file mode 100644
index 0000000..ae963d7
--- /dev/null
+++ b/react-advanced/react-lifecycle-and-the-useeffect-hook/_sidebar.md
@@ -0,0 +1,12 @@
+- [⬅ Back to React Advanced](../README.md)
+
+- [Cleanup](./Cleanup.md)
+- [Components Lifecycle](./Components-Lifecycle.md)
+- [Comprehension Check](./Comprehension-Check.md)
+- [Dependencies](./Dependencies.md)
+- [Exercises](./Exercises.md)
+- [Fetch Data](./Fetch-Data.md)
+- [Hooks](./Hooks.md)
+- [Intro](./Intro.md)
+- [Side Effects](./Side-Effects.md)
+- [Virtual Dom](./Virtual-Dom.md)
\ No newline at end of file
diff --git a/react-basics/README.md b/react-basics/README.md
new file mode 100644
index 0000000..0dc88eb
--- /dev/null
+++ b/react-basics/README.md
@@ -0,0 +1,15 @@
+# React Basics
+
+- [Catchphrase Socket Project Optional ](catchphrase---socket-project--optional-/README.md)
+- [Hangman Part I](hangman---part-i/README.md)
+- [Hangman Part Ii](hangman---part-ii/README.md)
+- [Pomodoro Project Optional ](pomodoro-project--optional-/README.md)
+- [React Components](react-components/README.md)
+- [React Data Flow](react-data-flow/README.md)
+- [React Input](react-input/README.md)
+- [React Intro](react-intro/README.md)
+- [React Props](react-props/README.md)
+- [React Router](react-router/README.md)
+- [React State](react-state/README.md)
+- [Reflix Project](reflix-project/README.md)
+- [Webpack Ec](webpack-ec/README.md)
\ No newline at end of file
diff --git a/react-basics/catchphrase---socket-project--optional-/README.md b/react-basics/catchphrase---socket-project--optional-/README.md
new file mode 100644
index 0000000..49eb2a1
--- /dev/null
+++ b/react-basics/catchphrase---socket-project--optional-/README.md
@@ -0,0 +1,15 @@
+# Intro
+
+The _Catchphrase_ game is a multi-player game, where the players need to guess a secret word. The game needs to work in different clients, meaning live client-to-client communication (two separate browser tabs/windows).
+
+
+
+Each turn, a player is presented with a secret word that they need to describe to the other player via chat. The second player then needs to guess what the secret words.
+
+
+
+Guessing the correct word will win the player 10 points.
+
+
+
+Each user can start a new game or join an existing one.
\ No newline at end of file
diff --git a/react-basics/hangman---part-i/README.md b/react-basics/hangman---part-i/README.md
new file mode 100644
index 0000000..c9cd911
--- /dev/null
+++ b/react-basics/hangman---part-i/README.md
@@ -0,0 +1,30 @@
+# Components Overview
+
+Let's think about the components we'll need for our hangman game.
+
+
+
+- A component to show the remaining guesses
+- One to show the _ _ _ _ and fill up with letters
+- One for the letters we can choose
+
+
+
+For now that should be enough.
+
+
+
+Starting with the last one, we can break it down some more:
+
+
+
+- A component to hold all our letters
+- A component that represents a single letter
+
+
+
+A component for a single letter may seem extreme. In fact, _how small should we make our components?_ is a popular question. Some will say _as small as possible_ - but that's more of a buzz-phrase than concrete guidance.
+
+
+
+The React docs themselves have a nice [Thinking In React](https://reactjs.org/docs/thinking-in-react.html) section which is worth checking out - but the short of it is that you should make your components small enough so they are maintainable and serve one specific purpose.
\ No newline at end of file
diff --git a/react-basics/hangman---part-i/_sidebar.md b/react-basics/hangman---part-i/_sidebar.md
new file mode 100644
index 0000000..6a6c3b9
--- /dev/null
+++ b/react-basics/hangman---part-i/_sidebar.md
@@ -0,0 +1,5 @@
+- [⬅ Back to React Basics](../README.md)
+
+- [Components Overview](./Components-Overview.md)
+- [Intro](./Intro.md)
+- [To Do](./To-Do.md)
\ No newline at end of file
diff --git a/react-basics/pomodoro-project--optional-/README.md b/react-basics/pomodoro-project--optional-/README.md
new file mode 100644
index 0000000..c7dee65
--- /dev/null
+++ b/react-basics/pomodoro-project--optional-/README.md
@@ -0,0 +1,34 @@
+# Intro
+
+Hello, Reacters.
+
+
+
+You're only at the beginning of your React journey but you've learned a lot.
+
+
+
+Think about all the things you know:
+
+- Components
+- JSX
+- Props
+- State
+- Events
+- Proper data flow
+
+
+
+So much power!
+
+
+
+But power is nothing without practice, so it's time to put it together...
+
+
+
+You're going to build **Pomodoro**.
+
+
+
+Here we go.
\ No newline at end of file
diff --git a/react-basics/react-components/README.md b/react-basics/react-components/README.md
new file mode 100644
index 0000000..51beaa0
--- /dev/null
+++ b/react-basics/react-components/README.md
@@ -0,0 +1,47 @@
+# Child Components
+
+Now, even though we saw that we can put any JSX inside the `App`'s `return`, we're going to do something a little different.
+
+We're going to load **child components** in there, instead.
+
+
+
+React is _built_ around components. If we put all our JSX in one place, it would defeat the purpose.
+
+
+
+Consider this code:
+
+
+
+```js
+function Nav() {
+ return (
+
+ )
+}
+
+function App() {
+ return (
+
+ {/* loading a child component */}
+
+ )
+}
+```
+
+
+Generally, **you should create a new file for each component** - but for the sake of this example, we're keeping it all in one file.
+
+
+
+Here we have two components, where the `App` component is **loading** the `Nav` component.
+
+
+
+We say that `App` **is a parent of `Nav`, and `Nav` is a child of `App`** - this should come as no surprise as it is very familiar to our HTML/DOM hierarchy.
+
+
+
+Also notice the syntax: **when we create a component, we can use it like an "HTML" tag** - angled brackets and all.
\ No newline at end of file
diff --git a/react-basics/react-components/_sidebar.md b/react-basics/react-components/_sidebar.md
new file mode 100644
index 0000000..f1fe905
--- /dev/null
+++ b/react-basics/react-components/_sidebar.md
@@ -0,0 +1,12 @@
+- [⬅ Back to React Basics](../README.md)
+
+- [Child Components](./Child-Components.md)
+- [Component Tree](./Component-Tree.md)
+- [Components Jsx](./Components---JSX.md)
+- [Comprehension Check](./Comprehension-Check.md)
+- [Exercises](./Exercises.md)
+- [Intro](./Intro.md)
+- [Spot Check 1](./Spot-Check-1.md)
+- [Spot Check 2](./Spot-Check-2.md)
+- [Spot Check 3](./Spot-Check-3.md)
+- [Spot Check 4](./Spot-Check-4.md)
\ No newline at end of file
diff --git a/react-basics/react-data-flow/README.md b/react-basics/react-data-flow/README.md
new file mode 100644
index 0000000..717e5c3
--- /dev/null
+++ b/react-basics/react-data-flow/README.md
@@ -0,0 +1,8 @@
+# Comprehension Check
+
+{Check It!|assessment}(multiple-choice-2271404646)
+{Check It!|assessment}(multiple-choice-1079840672)
+{Check It!|assessment}(multiple-choice-1016190687)
+{Check It!|assessment}(multiple-choice-3334046330)
+{Check It!|assessment}(multiple-choice-3484771619)
+{Check It!|assessment}(multiple-choice-3610721489)
\ No newline at end of file
diff --git a/react-basics/react-data-flow/_sidebar.md b/react-basics/react-data-flow/_sidebar.md
new file mode 100644
index 0000000..b676b33
--- /dev/null
+++ b/react-basics/react-data-flow/_sidebar.md
@@ -0,0 +1,10 @@
+- [⬅ Back to React Basics](../README.md)
+
+- [Comprehension Check](./Comprehension-Check.md)
+- [Data Flow Up I](./Data-Flow---Up---I.md)
+- [Data Flow Up Ii](./Data-Flow---Up---II.md)
+- [Done](./Done.md)
+- [Exercises](./Exercises.md)
+- [React Data Flow](./React-Data-Flow.md)
+- [Recap](./Recap.md)
+- [Spot Check 1](./Spot-Check-1.md)
\ No newline at end of file
diff --git a/react-basics/react-input/README.md b/react-basics/react-input/README.md
new file mode 100644
index 0000000..00660b5
--- /dev/null
+++ b/react-basics/react-input/README.md
@@ -0,0 +1,22 @@
+# Catch All Handler
+
+You now understand the basics of handling input in React. And honestly, there's not much more to it.
+
+
+
+The only "issue" might arise when you have multiple inputs, and you need multiple methods to manage the state changes.
+
+
+
+There's nothing inherently wrong with having a method for each input element - you may very well want to do different things for each input.
+
+However, When we are dealing with states in general we want to combine states that have a common ground into one state.
+This allows us to have generalization in our code.
+
+**That said**, it is silly to have several methods that do exactly the same thing: update one property of `state`.
+
+To that end, **take a look at** [**Handling Multiple Inputs**](https://medium.com/nerd-for-tech/how-to-build-forms-with-multiple-input-fields-using-react-hooks-677da2b851aa).
+
+
+
+They show a clever use of **ES6**'s [computed property names](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer#Computed_property_names) syntax in conjunction with the name attribute.
\ No newline at end of file
diff --git a/react-basics/react-input/_sidebar.md b/react-basics/react-input/_sidebar.md
new file mode 100644
index 0000000..52f1d32
--- /dev/null
+++ b/react-basics/react-input/_sidebar.md
@@ -0,0 +1,7 @@
+- [⬅ Back to React Basics](../README.md)
+
+- [Catch All Handler](./Catch-All-Handler.md)
+- [Exercises](./Exercises.md)
+- [Intro](./Intro.md)
+- [Spot Check ](./Spot-Check-.md)
+- [Two Way Binding](./Two-Way-Binding.md)
\ No newline at end of file
diff --git a/react-basics/react-intro/README.md b/react-basics/react-intro/README.md
new file mode 100644
index 0000000..ecc01eb
--- /dev/null
+++ b/react-basics/react-intro/README.md
@@ -0,0 +1,7 @@
+# Comprehension Check
+
+{Check It!|assessment}(multiple-choice-4160273971)
+
+{Check It!|assessment}(multiple-choice-1026556269)
+
+{Check It!|assessment}(multiple-choice-2722621591)
\ No newline at end of file
diff --git a/react-basics/react-intro/_sidebar.md b/react-basics/react-intro/_sidebar.md
new file mode 100644
index 0000000..ca4a75a
--- /dev/null
+++ b/react-basics/react-intro/_sidebar.md
@@ -0,0 +1,16 @@
+- [⬅ Back to React Basics](../README.md)
+
+- [Comprehension Check](./Comprehension-Check.md)
+- [Exercises](./Exercises.md)
+- [File Structure](./File-Structure.md)
+- [Introduction](./Introduction.md)
+- [Jsx I](./JSX-I.md)
+- [Jsx Ii](./JSX-II.md)
+- [Jsx Lecture](./JSX-Lecture.md)
+- [React Overview Lecture](./React-Overview-Lecture.md)
+- [React Setup Boilerplate Lecture](./React-Setup---Boilerplate-Lecture.md)
+- [Setup](./Setup.md)
+- [Spot Check 1](./Spot-Check-1.md)
+- [Spot Check 2](./Spot-Check-2.md)
+- [Spot Check 3](./Spot-Check-3.md)
+- [Virtual Dom](./Virtual-DOM.md)
\ No newline at end of file
diff --git a/react-basics/react-props/README.md b/react-basics/react-props/README.md
new file mode 100644
index 0000000..28c9eed
--- /dev/null
+++ b/react-basics/react-props/README.md
@@ -0,0 +1,3 @@
+# Comprehension Check
+
+{Check It!|assessment}(multiple-choice-1601730673)
\ No newline at end of file
diff --git a/react-basics/react-props/_sidebar.md b/react-basics/react-props/_sidebar.md
new file mode 100644
index 0000000..4e85153
--- /dev/null
+++ b/react-basics/react-props/_sidebar.md
@@ -0,0 +1,16 @@
+- [⬅ Back to React Basics](../README.md)
+
+- [Comprehension Check](./Comprehension-Check.md)
+- [Data Flow](./Data-Flow.md)
+- [Intro](./Intro.md)
+- [Mapping Props Ii](./Mapping-Props-II.md)
+- [Mapping Props](./Mapping-Props.md)
+- [Prop Keys](./Prop-Keys.md)
+- [Props](./Props.md)
+- [Spot Check 1](./Spot-Check-1.md)
+- [Spot Check 2](./Spot-Check-2.md)
+- [Spot Check 3](./Spot-Check-3.md)
+- [Spot Check 4](./Spot-Check-4.md)
+- [Spot Check 5](./Spot-Check-5.md)
+- [Summery](./Summery.md)
+- [Video](./Video.md)
\ No newline at end of file
diff --git a/react-basics/react-router/README.md b/react-basics/react-router/README.md
new file mode 100644
index 0000000..c11bb74
--- /dev/null
+++ b/react-basics/react-router/README.md
@@ -0,0 +1,5 @@
+# Comprehension Check
+
+{Check It!|assessment}(multiple-choice-886395639)
+{Check It!|assessment}(multiple-choice-1284626046)
+{Check It!|assessment}(multiple-choice-3829301310)
\ No newline at end of file
diff --git a/react-basics/react-router/_sidebar.md b/react-basics/react-router/_sidebar.md
new file mode 100644
index 0000000..c63f112
--- /dev/null
+++ b/react-basics/react-router/_sidebar.md
@@ -0,0 +1,10 @@
+- [⬅ Back to React Basics](../README.md)
+
+- [Comprehension Check](./Comprehension-Check.md)
+- [Exercises](./Exercises.md)
+- [Intro](./Intro.md)
+- [Links](./Links.md)
+- [Route](./Route.md)
+- [Router](./Router.md)
+- [Setup](./Setup.md)
+- [Useparams](./useParams.md)
\ No newline at end of file
diff --git a/react-basics/react-state/README.md b/react-basics/react-state/README.md
new file mode 100644
index 0000000..a16a489
--- /dev/null
+++ b/react-basics/react-state/README.md
@@ -0,0 +1,83 @@
+# Common Fitfalls
+
+## State updates are async operation
+
+Look at this code, and try to find what is wrong
+
+```
+function Counter() {
+ const [count,setCount] = useState(0)
+
+ const updateCounter = () => {
+ setCount(count + 1)
+ console.log(count)
+ }
+
+ return (
+ Welcome!
+
+
+
+ );
+}
+```
+If you open the console and click the button you will see that the count is "not updating".
+The reason is that the state update is an asynchronous operation, so the count state hasn't been updated yet.
+
+We will see later how to solve it.
+For the mean time, just be aware of it.
+
+
+## State Objects
+When we define a state, some times it will be an object.
+
+For instance, if we have a `classroom` object which has a `students` property in it, and we want to add a student to it, we need to access `classroom.students` first.
+
+
+
+We need to do the following
+
+
+```
+import { useState } from 'react';
+
+const ClassRoom = () => {
+ const [classRoom, setClassRoom] = useState({ students: [] });
+
+ const addStudent = (student) => {
+ let newClassroom = {...classRoom}
+ newClassroom.students = [...classRoom.students, student]
+ setClassRoom(newClassroom);
+ }
+ return
+}
+
+export default ClassRoom;
+```
+
+What we are doing here is that we take the old state and clone it first. Then we mutate it to fit our needs and then replace it fully with the new mutated object.
+
+
+Be careful of situations like this.
+```
+import { useState } from 'react';
+
+const ClassRoom = () => {
+ const [classRoom, setClassRoom] = useState({ students: [] });
+
+ const removeStudent = (student) => {
+ students = classRoom.students
+ students.pop()
+ }
+ return
+}
+
+export default useClassRoom;
+```
+
+
+This is bad because `classRoom.students` is an array, which is a [reference type](https://codeburst.io/explaining-value-vs-reference-in-javascript-647a975e12a0) - that means that even though we've created a new variable, `students`, any modifications we make to that (the `.pop()` on the second line) will still affect the original array in `classRoom`.
+
+
+
+**Check out** how to use the [ES6 spread operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax) to avoid this problem.
\ No newline at end of file
diff --git a/react-basics/react-state/_sidebar.md b/react-basics/react-state/_sidebar.md
new file mode 100644
index 0000000..6132ea3
--- /dev/null
+++ b/react-basics/react-state/_sidebar.md
@@ -0,0 +1,18 @@
+- [⬅ Back to React Basics](../README.md)
+
+- [Common Fitfalls](./Common-fitfalls.md)
+- [Comprehension Check](./Comprehension-Check.md)
+- [Events](./Events.md)
+- [Exercises](./Exercises.md)
+- [Intro](./Intro.md)
+- [Note About State Props](./Note-About-State---Props.md)
+- [Spot Check 1](./Spot-Check-1.md)
+- [Spot Check 2](./Spot-Check-2.md)
+- [Spot Check 3](./Spot-Check-3.md)
+- [Spot Check 4](./Spot-Check-4.md)
+- [Spot Check 5](./Spot-Check-5.md)
+- [State As State](./State-As-State.md)
+- [State Video](./State-Video.md)
+- [State](./State.md)
+- [Summery](./Summery.md)
+- [Updating The State](./Updating-the-state.md)
\ No newline at end of file
diff --git a/react-basics/reflix-project/README.md b/react-basics/reflix-project/README.md
new file mode 100644
index 0000000..81d3388
--- /dev/null
+++ b/react-basics/reflix-project/README.md
@@ -0,0 +1,9 @@
+# Extension Users
+
+If you've done all of the above, and you fancy a bit of refactoring, give some meaning to the users on the landing page.
+
+
+
+Any user's rented movies and budget should be saved to that particular user - then you should persist everything with LocalStorage.
+
+Good luck =]
\ No newline at end of file
diff --git a/react-basics/reflix-project/_sidebar.md b/react-basics/reflix-project/_sidebar.md
new file mode 100644
index 0000000..e2efd95
--- /dev/null
+++ b/react-basics/reflix-project/_sidebar.md
@@ -0,0 +1,7 @@
+- [⬅ Back to React Basics](../README.md)
+
+- [Extension Users](./Extension---Users.md)
+- [Guidelines Basic](./Guidelines---Basic.md)
+- [Guidlines Features](./Guidlines---Features.md)
+- [Intro](./Intro.md)
+- [Reflix](./Reflix.md)
\ No newline at end of file
diff --git a/react-basics/webpack-ec/README.md b/react-basics/webpack-ec/README.md
new file mode 100644
index 0000000..b6a2ce1
--- /dev/null
+++ b/react-basics/webpack-ec/README.md
@@ -0,0 +1,11 @@
+# Intro
+
+Webpack is an important tool that is used by many developers. Please read the following article to learn a bit about webpack, note that you do not need to spend time coding along, just read through it.
+
+
+
+[https://www.sitepoint.com/webpack-beginner-guide/](https://www.sitepoint.com/webpack-beginner-guide/)
+
+
+
+Once you're done, head onto the exercises in the next session. Feel free to use the [webpack docs](https://webpack.js.org/guides/getting-started/) to help you solve the assignment.
\ No newline at end of file
diff --git a/resources/README.md b/resources/README.md
new file mode 100644
index 0000000..ce76653
--- /dev/null
+++ b/resources/README.md
@@ -0,0 +1,12 @@
+# Resources
+
+- [Can Do Approach](can-do-approach/README.md)
+- [Clean Code](clean-code/README.md)
+- [Css Special Cases](css-special-cases/README.md)
+- [How To Search In Google](how-to-search-in-google/README.md)
+- [How To Solve A Question](how-to-solve-a-question/README.md)
+- [How To Talk About A Project](how-to-talk-about-a-project/README.md)
+- [Project Presentation Template](project-presentation-template/README.md)
+- [Talking About Code](talking-about-code/README.md)
+- [Terms Defention](terms-defention/README.md)
+- [Work Plan Template](work-plan-template/README.md)
\ No newline at end of file
diff --git a/resources/clean-code/README.md b/resources/clean-code/README.md
new file mode 100644
index 0000000..2828793
--- /dev/null
+++ b/resources/clean-code/README.md
@@ -0,0 +1,3 @@
+# Presentation
+
+
\ No newline at end of file
diff --git a/resources/how-to-search-in-google/README.md b/resources/how-to-search-in-google/README.md
new file mode 100644
index 0000000..64f61a9
--- /dev/null
+++ b/resources/how-to-search-in-google/README.md
@@ -0,0 +1,8 @@
+# Page 1
+
+You can download it from the download button.
+
\ No newline at end of file
diff --git a/resources/how-to-search-in-google/_sidebar.md b/resources/how-to-search-in-google/_sidebar.md
new file mode 100644
index 0000000..9b1cac4
--- /dev/null
+++ b/resources/how-to-search-in-google/_sidebar.md
@@ -0,0 +1,3 @@
+- [⬅ Back to Resources](../README.md)
+
+- [Page 1](./Page-1.md)
\ No newline at end of file
diff --git a/script.py b/script.py
new file mode 100644
index 0000000..bef0b10
--- /dev/null
+++ b/script.py
@@ -0,0 +1,89 @@
+import os
+import re
+
+ROOT_DIR = '.' # Your course root
+
+def humanize(name):
+ return name.replace('-', ' ').title()
+
+def generate_root_sidebar(modules):
+ lines = [f'* [{humanize(m)}]({m}/README.md)' for m in sorted(modules)]
+ with open(os.path.join(ROOT_DIR, '_sidebar.md'), 'w', encoding='utf-8') as f:
+ f.write('\n'.join(lines))
+ print('✅ Root _sidebar.md generated.')
+
+def generate_module_sidebar(module_path, chapters):
+ lines = [f'- {humanize(os.path.basename(module_path))}']
+ for chapter in sorted(chapters):
+ lines.append(f' - [{humanize(chapter)}]({chapter}/README.md)')
+ with open(os.path.join(module_path, '_sidebar.md'), 'w', encoding='utf-8') as f:
+ f.write('\n'.join(lines))
+
+def generate_module_readme(module_path, chapters):
+ lines = [f'# {humanize(os.path.basename(module_path))}', '']
+ for chapter in sorted(chapters):
+ lines.append(f'- [{humanize(chapter)}]({chapter}/README.md)')
+ with open(os.path.join(module_path, 'README.md'), 'w', encoding='utf-8') as f:
+ f.write('\n'.join(lines))
+
+def extract_chapter_sidebar_entries(sidebar_path):
+ entries = []
+ with open(sidebar_path, 'r', encoding='utf-8') as f:
+ for line in f:
+ match = re.search(r'\[(.*?)\]\((\.\/.*?\.md)', line.strip())
+ if match:
+ entries.append((match.group(1), match.group(2)))
+ return entries
+
+def generate_chapter_sidebar(chapter_path, entries, module_name):
+ lines = [f'- [⬅ Back to {humanize(module_name)}](../README.md)', '']
+ lines += [f'- [{label}]({path})' for label, path in entries]
+ with open(os.path.join(chapter_path, '_sidebar.md'), 'w', encoding='utf-8') as f:
+ f.write('\n'.join(lines))
+
+def generate_chapter_readme(chapter_path, first_entry):
+ label, path = first_entry
+ content_path = os.path.join(chapter_path, path)
+ if not os.path.exists(content_path):
+ print(f'⚠️ Missing file for README.md: {content_path}')
+ return
+ with open(content_path, 'r', encoding='utf-8') as f:
+ content = f.read()
+ with open(os.path.join(chapter_path, 'README.md'), 'w', encoding='utf-8') as f:
+ f.write(f'# {label}\n\n{content.strip()}')
+
+def process_course():
+ modules = []
+ for module in os.listdir(ROOT_DIR):
+ module_path = os.path.join(ROOT_DIR, module)
+ if not os.path.isdir(module_path) or module.startswith('.'):
+ continue
+ modules.append(module)
+ chapters = []
+ for chapter in os.listdir(module_path):
+ chapter_path = os.path.join(module_path, chapter)
+ if os.path.isdir(chapter_path) and not chapter.startswith('.'):
+ chapters.append(chapter)
+
+ # Process chapter _sidebar.md
+ original_sidebar_path = os.path.join(chapter_path, '_sidebar.md')
+ if os.path.exists(original_sidebar_path):
+ entries = extract_chapter_sidebar_entries(original_sidebar_path)
+ else:
+ # Fallback to .md files if no _sidebar.md exists
+ entries = []
+ for file in sorted(os.listdir(chapter_path)):
+ if file.endswith('.md') and not file.startswith('_') and file != 'README.md':
+ label = humanize(file.replace('.md', ''))
+ entries.append((label, f'./{file}'))
+
+ if entries:
+ generate_chapter_sidebar(chapter_path, entries, module)
+ generate_chapter_readme(chapter_path, entries[0])
+
+ generate_module_sidebar(module_path, chapters)
+ generate_module_readme(module_path, chapters)
+
+ generate_root_sidebar(modules)
+
+process_course()
diff --git a/servers/README.md b/servers/README.md
new file mode 100644
index 0000000..453b6e7
--- /dev/null
+++ b/servers/README.md
@@ -0,0 +1,13 @@
+# Servers
+
+- [Express Crud Router Middleware](express--crud--router----middleware/README.md)
+- [Express Intro Servers Routes Params](express-intro--servers--routes----params/README.md)
+- [Guided Debugging Exercise](guided-debugging-exercise/README.md)
+- [Intro To Servers](intro-to-servers/README.md)
+- [Json Web Tokens](json-web-tokens/README.md)
+- [My Recipes](my-recipes/README.md)
+- [Node](node/README.md)
+- [Npm Node Package Manager](npm---node-package-manager/README.md)
+- [Postman](postman/README.md)
+- [Server Error Handling](server-error-handling/README.md)
+- [Status Codes Practice](status-codes-practice/README.md)
\ No newline at end of file
diff --git a/servers/express--crud--router----middleware/README.md b/servers/express--crud--router----middleware/README.md
new file mode 100644
index 0000000..89f1e1f
--- /dev/null
+++ b/servers/express--crud--router----middleware/README.md
@@ -0,0 +1,56 @@
+# Body Parser
+
+When we make a POST request from the browser, behind the scenes **the browser is turning the data we're sending into a JSON** - this is a good thing because it allows us to forgo the `JSON.stringify` bit.
+
+
+
+However, since we are sending JSON, the server needs to know that it needs to **parse** that JSON.
+
+To do that, we need to add the following to our `server.js`:
+```
+app.use(express.json())
+app.use(express.urlencoded({ extended: false }))
+```
+
+
+* You can add the above code under all the `require`s but above the other lines of `app.use`.
+
+
+
+We'll dive into what `use` is later in this lesson, but for now it's enough to understand that this code allows our server to receive and parse JSON.
+
+
+
+----------
+
+
+
+Now if you restart your server, refresh your page, type in a Wonder and Location, and press the `Add Wonder` button:
+
+
+
+
+
+Click [here](https://s3-us-west-2.amazonaws.com/learn-app/lesson-images/post-from-client-gui.PNG) to emibggen.
+
+
+
+You should see this in your server logs:
+
+
+
+
+
+Excellent! We've sent some data to our server through a POST request - note that this is **different** than sending data through GET parameters!
+
+
+
+When we send data through GET, we're doing it through the **route**, i.e. the URL - this is not always safe or what we want. Plus, it is not convenient when we want to send lots of data - especially if it's more complex data.
+
+
+
+Sending data with a **POST request allows us to send any JS object**. This is great.
+
+
+
+And now, of course, we want to _add_ this object to our `wonders` array in the server.
\ No newline at end of file
diff --git a/servers/express--crud--router----middleware/_sidebar.md b/servers/express--crud--router----middleware/_sidebar.md
new file mode 100644
index 0000000..e5cef83
--- /dev/null
+++ b/servers/express--crud--router----middleware/_sidebar.md
@@ -0,0 +1,16 @@
+- [⬅ Back to Servers](../README.md)
+
+- [Body Parser](./Body-Parser.md)
+- [Crud](./CRUD.md)
+- [Comprehension Check](./Comprehension-Check.md)
+- [Exercises](./Exercises.md)
+- [Http Status Codes](./HTTP-Status-Codes.md)
+- [Intro](./Intro.md)
+- [Middleware](./Middleware.md)
+- [Overview Video](./Overview-Video.md)
+- [Post](./POST.md)
+- [Put](./PUT.md)
+- [Router](./Router.md)
+- [Spot Check 1](./Spot-Check-1.md)
+- [Spot Check 2](./Spot-Check-2.md)
+- [Spot Check 3](./Spot-Check-3.md)
\ No newline at end of file
diff --git a/servers/express-intro--servers--routes----params/README.md b/servers/express-intro--servers--routes----params/README.md
new file mode 100644
index 0000000..a65390b
--- /dev/null
+++ b/servers/express-intro--servers--routes----params/README.md
@@ -0,0 +1,3 @@
+# Setup & Basics Video
+
+
\ No newline at end of file
diff --git a/servers/guided-debugging-exercise/README.md b/servers/guided-debugging-exercise/README.md
new file mode 100644
index 0000000..c6cbd9a
--- /dev/null
+++ b/servers/guided-debugging-exercise/README.md
@@ -0,0 +1,57 @@
+# Page 1
+
+### The Task
+Here is some code that contains bugs.
+Your task is to find these bugs and fix them.
+Copy the code and run it in your computer so that you can debug.
+
+### Hint
+The debugger id your friend!
+
+### Guidance
+1. First take a minute to understand what the code is doing
+1. Now find the bugs. Specifically try to find the row of where the bug happens
+1. Fix the bug, so that the code works fine.
+
+```js
+const posts = [
+ {
+ id: 1,
+ text: "Love this product",
+ comments: []
+ },
+ {
+ id: 2,
+ text: "This is the worst. DON'T BUY!",
+ comments: [
+ { id: 1, text: "Idiot has no idea" },
+ { id: 2, text: "Fool!" },
+ { id: 3, text: "I agree!" }
+ ]
+ },
+ {
+ id: 3,
+ text: "So glad I found this. Bought four already!",
+ comments: []
+ }
+]
+
+const removeComment = function (postId, commentId) {
+ for (post in posts) {
+ if (post.id === postId) {
+ removeCommentFromPost(post, commentId);
+ }
+ }
+}
+
+const removeCommentFromPost = function(post, commentId){
+ for (let i =0; i < comments.length; i++) {
+ if (post.comments[i].id === commentId) {
+ post.comments.remove(comment);
+ }
+ }
+}
+
+removeComment(2, 3)
+
+```
\ No newline at end of file
diff --git a/servers/guided-debugging-exercise/_sidebar.md b/servers/guided-debugging-exercise/_sidebar.md
new file mode 100644
index 0000000..fee6fbc
--- /dev/null
+++ b/servers/guided-debugging-exercise/_sidebar.md
@@ -0,0 +1,4 @@
+- [⬅ Back to Servers](../README.md)
+
+- [Page 1](./Page-1.md)
+- [Page 2](./Page-2.md)
\ No newline at end of file
diff --git a/servers/intro-to-servers/README.md b/servers/intro-to-servers/README.md
new file mode 100644
index 0000000..d383e5a
--- /dev/null
+++ b/servers/intro-to-servers/README.md
@@ -0,0 +1,101 @@
+# Barebone Server
+
+To see an example of a simple server, let's create one using node's built-in `http` module.
+
+
+
+Start by opening a new directory called `server-intro` and inside of it create a file called `server.js`
+
+
+
+Inside of this file, add the following code:
+```
+const http = require('http')
+
+const server = http.createServer(function (request, response) {
+ response.writeHead(200, { 'Content-Type': 'text/plain' })
+ response.write('Hello, world')
+ response.end();
+})
+
+const port = 3000
+server.listen(port, function () {
+ console.log(`Node server created at port ${port}`)
+})
+```
+
+
+Now run this file (just like any other JS file in node: `node server.js` in your command line/terminal), and you should see the console log "Node server created at port 3000"
+
+
+
+Now go to your browser, and head to `http://localhost:3000/`
+
+
+
+And that's it. You've used your browser to make a GET request to your server, and the server replied with "Hello, world"
+
+
+
+----------
+
+
+
+Of course, this doesn't seem very exciting yet, but here's what's going on in that code:
+
+- We didn't have to `npm install http` because this module is **built-in** to node
+- One of the things this module can do is invoke the `createServer` method
+ - This method receives one parameter, a callback function, that takes two arguments: a request, and a response
+ - We'll get to `request` later, but `response` is what allows us to reply to a client that sends a request
+- The `response.writehead` is a method that sends **metadata** about the response
+ - This is information about the response the user won't see, but the browser (or whoever is making the request) can access
+ - The `200` is an [HTTP Status Code](https://www.restapitutorial.com/httpstatuscodes.html) that says "everything is OK"
+ - The ``{'Content-Type...}`` tells whoever made the request what kind of data it will receive in return
+- The `response.write` method actually "writes" something to display to whoever makes the request
+- Finally, the `response.end()` closes this **request-response cycle**
+
+
+
+We have the `server.listen` code at the bottom which is what ultimately starts the server. Without this, the server does not exist.
+
+
+
+The `listen` part is important: **servers are always listening for requests. Like functions, they do nothing until called upon** - this means that we can write the best server in the world, but it will do **nothing** except for **serve** whoever makes a ``request``
+
+
+
+In our example, the entity making the request is the browser itself when we go to **localhost:3000** - this initiates a request, the server gets the request, the server creates and sends a response, and the cycle completes.
+
+
+
+Luckily for us, when we start using `express`, the code to run a server will be **much** simpler.
+
+
+
+----------
+
+
+
+Now, go to your terminal and stop the server from running (press `Ctrl+C`), and refresh the page where you were at localhost:3000, you should something like this:
+
+
+
+
+
+
+
+Once you shut down your server, it's no longer listening. The browser (or any client) cannot find **localhost:3000** because it doesn't exist anymore.
+
+
+
+So remember:
+
+1. You create a server
+2. You spin/run/activate/start the server - now it is listening
+3. Clients make requests to the server
+4. The server serves a response
+5. Cycle ends
+
+
+
+The way we'll build our servers, the server will be able to receive many requests simultaneously - but you must consider each one as a separate **request-response cycle** - _even if_ the same client makes 1,000 requests to the same server, each one is a separate cycle.
\ No newline at end of file
diff --git a/servers/intro-to-servers/_sidebar.md b/servers/intro-to-servers/_sidebar.md
new file mode 100644
index 0000000..007a252
--- /dev/null
+++ b/servers/intro-to-servers/_sidebar.md
@@ -0,0 +1,7 @@
+- [⬅ Back to Servers](../README.md)
+
+- [Barebone Server](./Barebone-Server.md)
+- [Comprehension Check](./Comprehension-Check.md)
+- [Intro](./Intro.md)
+- [Localhost](./Localhost.md)
+- [Ngrok Exposing Your Localhost To The World Optional ](./Ngrok---Exposing-your-Localhost-to-the-World--Optional--.md)
\ No newline at end of file
diff --git a/servers/my-recipes/README.md b/servers/my-recipes/README.md
new file mode 100644
index 0000000..1c1ea19
--- /dev/null
+++ b/servers/my-recipes/README.md
@@ -0,0 +1,5 @@
+# Extensions
+
+Possible Extensions:
+- Improve your CSS :)
+- Add more filter options
\ No newline at end of file
diff --git a/servers/my-recipes/_sidebar.md b/servers/my-recipes/_sidebar.md
new file mode 100644
index 0000000..4541073
--- /dev/null
+++ b/servers/my-recipes/_sidebar.md
@@ -0,0 +1,4 @@
+- [⬅ Back to Servers](../README.md)
+
+- [Extensions](./Extensions.md)
+- [Intro](./Intro.md)
\ No newline at end of file
diff --git a/servers/node/README.md b/servers/node/README.md
new file mode 100644
index 0000000..2fa4b79
--- /dev/null
+++ b/servers/node/README.md
@@ -0,0 +1,3 @@
+# Node JS Intro Video
+
+
\ No newline at end of file
diff --git a/servers/npm---node-package-manager/README.md b/servers/npm---node-package-manager/README.md
new file mode 100644
index 0000000..7058025
--- /dev/null
+++ b/servers/npm---node-package-manager/README.md
@@ -0,0 +1,70 @@
+# Client Vs Server Packages
+
+Though NPM literally has **Node** as the first part of its acronym, we're not limited to node when we use NPM packages. We can also take advantage of NPM (depending on the package) in the browser.
+
+
+
+For example, we've hitherto imported jQuery, Handlebars, and font-awesome like this:
+```
+
+
+
+
+
+```
+
+
+Which is a pain, because we'd always have to go and find those CDNs - but no more! Now you can run the following command:
+
+
+```
+npm install jquery handlebars font-awesome
+```
+
+
+Yes, you can install multiple packages at once - just separate them with a space.
+
+And then add them to our HTML like this:
+
+
+```
+
+
+
+
+
+```
+
+
+Which is much, much cleaner, more straightforward, and definitely more reliable.
+
+
+
+Of course, the code in these packages is the exact same as what you get from the old way (using the CDN) - and it will still only work in JS that you run in the browser, but **NPM is a package manager for any JS code, not just code that runs in node**.
+
+
+
+This might be confusing, but if you realize that humans called this **Node**Package Manager because at first it was just for Node, and you realize that humans don't always think ahead, then you should be able to sleep at night.
+
+
+
+----------
+
+
+
+**Spot check:** Create a directory called npm-jquery-run, and inside of it create two files: index.html and main.js
+
+- Use NPM to install jQuery
+- Import jQuery in your HTML from node_modules
+- Create a small div in your HTML - give it some dimensions and a background color
+- In your JS file, use jQuery to add a listener to the div - when you click it, it should change to the color "#f39c12"
+
+
+
+Once that works, in your JS file make a GET request to the following API, and console log the results:
+```
+https://ele-people-api-8eb0b1bd9b96.herokuapp.com/people
+```
+
+
+Unfortunately, the above GET request won't work (but still do it so you see the error). Let's fix that.
\ No newline at end of file
diff --git a/servers/npm---node-package-manager/_sidebar.md b/servers/npm---node-package-manager/_sidebar.md
new file mode 100644
index 0000000..10292d7
--- /dev/null
+++ b/servers/npm---node-package-manager/_sidebar.md
@@ -0,0 +1,9 @@
+- [⬅ Back to Servers](../README.md)
+
+- [Client Vs Server Packages](./Client-vs--Server-Packages.md)
+- [Comprehension Check](./Comprehension-Check.md)
+- [Exercises](./Exercises.md)
+- [Intro](./Intro.md)
+- [Setting Up](./Setting-Up.md)
+- [The Urllib Package](./The-urllib-Package.md)
+- [Using Npm Packages](./Using-NPM-Packages.md)
\ No newline at end of file
diff --git a/servers/postman/README.md b/servers/postman/README.md
new file mode 100644
index 0000000..ab55062
--- /dev/null
+++ b/servers/postman/README.md
@@ -0,0 +1,89 @@
+# Basic Usage
+
+When you finish installing and logging in, you should see a screen more or less like this:
+
+
+
+
+
+
+
+Click [here](https://s3-us-west-2.amazonaws.com/learn-app/lesson-images/postman-starter.PNG) to emibggen.
+
+
+
+Now, say you're making a GET request to our favorite [user api](https://jsonplaceholder.typicode.com/users) - we can make this request via the browser, or with a `$.get` request - and now we can also make it with Postman. Just enter this URL into the input, press send, and you should soon enough see the result:
+
+
+
+
+
+
+
+Click [here](https://s3-us-west-2.amazonaws.com/learn-app/lesson-images/postman-first-get.PNG) to emibggen.
+
+
+
+It knows to make a GET request because of the GET on the side - but we can change that, it's a drop-down!
+
+
+
+----------
+
+
+
+To test other request types, go ahead **create a** `dummy-server.js` **file** with the following code, then **run** `node dummy-server.js`:
+
+
+```
+const express = require('express')
+const bodyParser = require('body-parser')
+
+const app = express()
+app.use(bodyParser.json())
+app.use(bodyParser.urlencoded({ extended: false }))
+
+app.get('/test/:data', function (req, res) {
+ console.log("Someone is getting!")
+ console.log(req.params.data)
+ res.send("Thanks for the get, here's a potato.")
+})
+
+app.post('/test', function (req, res) {
+ console.log("Someone is posting!")
+ res.send("Thanks for the post, here's a potatoe.")
+})
+
+app.post('/testData', function (req, res) {
+ console.log(req.body)
+ res.end()
+})
+
+const port = 4349
+app.listen(port, function () {
+ console.log(`Server running on ${port}`)
+})
+```
+
+
+We can use Postman to make a GET request to this `get` route as well - we just have to give it the whole path: `http://localhost:4349/test/something`:
+
+
+
+
+
+
+
+Click [here](https://s3-us-west-2.amazonaws.com/learn-app/lesson-images/postman-get-to-custom-api.PNG) to emibggen.
+
+
+
+And of course, we can also use Postman to make a request to our `post` route, we just need to select POST from the dropdown:
+
+
+
+
+
+
+
+Click [here](https://s3-us-west-2.amazonaws.com/learn-app/lesson-images/postman-post-to-custom-api.PNG) to emibggen.
\ No newline at end of file
diff --git a/servers/postman/_sidebar.md b/servers/postman/_sidebar.md
new file mode 100644
index 0000000..74e0d9f
--- /dev/null
+++ b/servers/postman/_sidebar.md
@@ -0,0 +1,7 @@
+- [⬅ Back to Servers](../README.md)
+
+- [Basic Usage](./Basic-Usage.md)
+- [Enjoy](./Enjoy.md)
+- [Intro](./Intro.md)
+- [Overview Video](./Overview-Video.md)
+- [Sending Data](./Sending-Data.md)
\ No newline at end of file
diff --git a/servers/server-error-handling/README.md b/servers/server-error-handling/README.md
new file mode 100644
index 0000000..692a227
--- /dev/null
+++ b/servers/server-error-handling/README.md
@@ -0,0 +1,4 @@
+# Comprehension Check
+
+{Check It!|assessment}(multiple-choice-1966696812)
+{Check It!|assessment}(multiple-choice-2865629610)
\ No newline at end of file
diff --git a/servers/server-error-handling/_sidebar.md b/servers/server-error-handling/_sidebar.md
new file mode 100644
index 0000000..8fd6979
--- /dev/null
+++ b/servers/server-error-handling/_sidebar.md
@@ -0,0 +1,13 @@
+- [⬅ Back to Servers](../README.md)
+
+- [Comprehension Check](./Comprehension-Check.md)
+- [Example Introduction](./Example-introduction.md)
+- [Exercises](./Exercises.md)
+- [First Error](./First-Error.md)
+- [Handle Error](./Handle-Error.md)
+- [Handle Post Errors](./Handle-Post-Errors.md)
+- [Handling Multiple Errors](./Handling-Multiple-Errors.md)
+- [Intro](./Intro.md)
+- [Post Errors](./Post-Errors.md)
+- [Spot Check](./Spot-Check.md)
+- [Summary](./Summary.md)
\ No newline at end of file
diff --git a/servers/status-codes-practice/README.md b/servers/status-codes-practice/README.md
new file mode 100644
index 0000000..8af669e
--- /dev/null
+++ b/servers/status-codes-practice/README.md
@@ -0,0 +1,3 @@
+# Page 2
+
+# Sample content Page 2
\ No newline at end of file
diff --git a/servers/status-codes-practice/_sidebar.md b/servers/status-codes-practice/_sidebar.md
new file mode 100644
index 0000000..dd698ad
--- /dev/null
+++ b/servers/status-codes-practice/_sidebar.md
@@ -0,0 +1,4 @@
+- [⬅ Back to Servers](../README.md)
+
+- [Page 2](./Page-2.md)
+- [Task Code](./Task-Code.md)
\ No newline at end of file
diff --git a/solutions/README.md b/solutions/README.md
new file mode 100644
index 0000000..f45d49e
--- /dev/null
+++ b/solutions/README.md
@@ -0,0 +1,52 @@
+# Solutions
+
+- [Ajax Intro To Apis Solutions](ajax---intro-to-apis---solutions/README.md)
+- [Algorithms Js Solutions](algorithms--js----solutions/README.md)
+- [Big O Time Complexity Js Solutions](big-o---time-complexity--js----solutions/README.md)
+- [Callbacks Arrow Functions Solutions](callbacks---arrow-functions---solutions/README.md)
+- [Closures Modules Solutions](closures---modules---solutions/README.md)
+- [Css 3 Variables Animations Solutions](css-3--variables---animations---solutions/README.md)
+- [Css Basics Solutions](css-basics---solutions/README.md)
+- [Css Grid Solutions](css-grid---solutions/README.md)
+- [Data Flow Solutions](data-flow---solutions/README.md)
+- [Data Structures Solutions](data-structures---solutions/README.md)
+- [Dom Intro Solutions](dom-intro---solutions/README.md)
+- [Dom Traversal With Jquery Solutions](dom-traversal-with-jquery---solutions/README.md)
+- [Es6 Array Methods Solutions](es6-array-methods---solutions/README.md)
+- [Express Crud Router Middleware Solutions](express--crud--router----middleware---solutions/README.md)
+- [Express Intro Servers Routes Params Solutions](express-intro--servers--routes----params---solutions/README.md)
+- [Functions Solutions](functions---solutions/README.md)
+- [Html Basics Solutions](html-basics---solutions/README.md)
+- [Intro To Json Solutions](intro-to-json---solutions/README.md)
+- [Javascript Basics Solutions](javascript-basics---solutions/README.md)
+- [Jquery Solutions](jquery---solutions/README.md)
+- [Js This Solutions](js-this---solutions/README.md)
+- [Local Storage Solutions](local-storage---solutions/README.md)
+- [Matrices Solutions](matrices---solutions/README.md)
+- [Mobx 1 Solutions](mobx-1---solutions/README.md)
+- [Mobx 2 Solutions](mobx-2---solutions/README.md)
+- [Mongo Db Intro Solutions](mongo-db-intro---solutions/README.md)
+- [Mongoose Intro Solutions](mongoose-intro---solutions/README.md)
+- [Mongoose Population Solutions](mongoose-population---solutions/README.md)
+- [Node Solutions](node---solutions/README.md)
+- [Npm Node Package Manager Solutions](npm---node-package-manager---solutions/README.md)
+- [Object Oriented Programming Intro Oop Solutions](object-oriented-programming-intro--oop----solutions/README.md)
+- [Oop Inheritance Solutions](oop-inheritance---solutions/README.md)
+- [Promises Solutions](promises---solutions/README.md)
+- [React Components Solutions](react-components---solutions/README.md)
+- [React Events Set State Solutions](react-events---set-state---solutions/README.md)
+- [React Hooks Solutions](react-hooks---solutions/README.md)
+- [React Input Solutions](react-input---solutions/README.md)
+- [React Intro Solutions](react-intro---solutions/README.md)
+- [React Props State Data Flow Solutions](react-props--state---data-flow---solutions/README.md)
+- [React Routes Solutions](react-routes---solutions/README.md)
+- [Recursion Solutions](recursion---solutions/README.md)
+- [Scope Solutions](scope---solutions/README.md)
+- [Scraping R D Solutions](scraping-r-d---solutions/README.md)
+- [Sql In Node Sequelize Solutions](sql-in-node--sequelize---solutions/README.md)
+- [Sql Intro Js Solutions](sql-intro--js----solutions/README.md)
+- [Sql Join Solutions](sql-join---solutions/README.md)
+- [Stacks Queues Solutions](stacks---queues---solutions/README.md)
+- [Trees And Binary Search Trees Solutions](trees-and-binary-search-trees---solutions/README.md)
+- [Typescript R D Solutions](typescript-r-d---solutions/README.md)
+- [Webpack R D Solutions](webpack-r-d---solutions/README.md)
\ No newline at end of file
diff --git a/solutions/ajax---intro-to-apis---solutions/README.md b/solutions/ajax---intro-to-apis---solutions/README.md
new file mode 100644
index 0000000..0f7c21d
--- /dev/null
+++ b/solutions/ajax---intro-to-apis---solutions/README.md
@@ -0,0 +1,188 @@
+# Solutions
+
+## Exercise 1
+
+```
+const fetch = function (isbn) {
+ $.ajax({
+ method: "GET",
+ url: `https://www.googleapis.com/books/v1/volumes?q=isbn:${isbn}`,
+ success: function (data) {
+ console.log(data);
+ },
+ error: function (xhr, text, error) {
+ console.log(text);
+ }
+ });
+}
+
+fetch(9782806269171)
+```
+
+
+## Exercise 2
+
+```
+const fetch = function (queryType, queryValue) {
+ $.ajax({
+ method: "GET",
+ url: `https://www.googleapis.com/books/v1/volumes?q=${queryType}:${queryValue}`,
+ success: function (data) {
+ console.log(data);
+ },
+ error: function (xhr, text, error) {
+ console.log(text);
+ }
+ });
+}
+
+fetch("title", "The Wise Man's Fears")
+fetch("isbn", 9789814561778)
+```
+
+
+## Exercise 3
+
+```
+const fetch = function (queryType, queryValue) {
+ $.ajax({
+ method: "GET",
+ url: `https://www.googleapis.com/books/v1/volumes?q=${queryType}:${queryValue}`,
+ success: function (data) {
+ data.items.forEach(b => console.log(`Title: ${b.volumeInfo.title}, Author: ${b.volumeInfo.authors}, ISBN: ${b.volumeInfo.industryIdentifiers[0].identifier}`))
+ },
+ error: function (xhr, text, error) {
+ console.log(text);
+ }
+ });
+}
+
+fetch("title", "The Wise Man's Fears")
+```
+
+
+## Exercise 4
+
+```
+const fetch = function () {
+ $.get("http://api.giphy.com/v1/gifs/search?q=cats&api_key=50m5Set06jQuFMy7VNXir7iaNl8ypsEu", function (gifs) {
+ console.log(gifs.data[0].embed_url)
+ $(".gif").append(``)
+
+})
+
+
+
+const fetch = function (input) {
+ $.ajax({
+ method: "GET",
+ url: `http://api.giphy.com/v1/gifs/search?q=${input}&api_key=50m5Set06jQuFMy7VNXir7iaNl8ypsEu`,
+ success: appendGifs
+ })
+}
+
+
+
+$("#submit").on("click", function () {
+
+
+ let input = $("#yourgif").val()
+ console.log(input)
+ fetch(input)
+})
+```
+
+
+## Google Books API Extension
+
+```
+ let neruoscienceComputerBooks = []
+
+
+ const fetch = function (startIndex) {
+ $.ajax({
+ method: "GET",
+ url: `https://www.googleapis.com/books/v1/volumes?q=intitle:neuroscience&startIndex=${startIndex}&maxResults=40`,
+ success: function (data) {
+ console.log(data)
+ let book
+ for (let j = 0; j < data.items.length; j++) {
+ book = data.items[j]
+ if (book.volumeInfo.categories) {
+ if (book.volumeInfo.categories.some(c => c === "Computers")) {
+ neruoscienceComputerBooks.push(book.volumeInfo.title)
+ }
+ }
+
+
+ }
+
+
+ console.log(neruoscienceComputerBooks)
+ },
+ error: function (xhr, text, error) {
+ console.log(text);
+ }
+ });
+ }
+
+
+ let startIndexArr = [0, 40, 120]
+ for (let i = 0; i < 3; i++) {
+ console.log(i)
+ fetch(startIndexArr[i])
+ }
+
+
+ console.log(neruoscienceComputerBooks)
+```
\ No newline at end of file
diff --git a/solutions/algorithms--js----solutions/README.md b/solutions/algorithms--js----solutions/README.md
new file mode 100644
index 0000000..635f4df
--- /dev/null
+++ b/solutions/algorithms--js----solutions/README.md
@@ -0,0 +1,177 @@
+# Solutions
+
+## Exercise 1
+
+```
+const printStars = function (num) {
+ let ast = ''
+ for (let i = 1; i <= num; i++) {
+ ast += "*"
+ console.log(ast)
+ }
+}
+
+
+```
+
+## Exercise 2
+
+```
+const printBackwardsStars = function (num) {
+ let string = ''
+
+
+ while (num > 0) {
+ if (string.length < num) {
+ string += '*'
+ } else if (string.length === num) {
+ console.log(string)
+ num--
+ string = ''
+ }
+ }
+}
+
+```
+
+## Exercise 3
+
+```
+const printStarSeries = function (num, count) {
+
+
+ for (let j = 0; j < count; j++) {
+ for (let i = 1; i <= num; i++) {
+ console.log(i)
+ }
+
+
+ for (let i = num - 1; i > 0; i--) {
+ console.log(i)
+ }
+ }
+
+
+}
+
+```
+
+## Exercise 4
+
+```
+const reverse = function (str) {
+
+
+ let reversed = ''
+ for (let i = str.length - 1; i >= 0; i--) {
+ reversed += str[i]
+ }
+
+
+ return reversed
+}
+```
+
+## Exercise 5
+
+```
+const isPalindrom = function (str) {
+ str = str.replace(/\s/g, '').toLowerCase()
+ console.log(str)
+ let r = reverse(str)
+
+
+ if (r === str) {
+ return true
+ }
+
+
+ return false
+}
+```
+
+## Exercise 6
+
+```
+const encrypt = function (str) {
+
+
+ let encryptedStr = ''
+
+
+ for (let i = 0; i < str.length; i++) {
+ let char = ''
+ str[i] === 'z' ? char = 'a' : char = String.fromCharCode(str.charCodeAt(i) + 1)
+
+
+ encryptedStr += char
+ }
+
+
+ return encryptedStr
+}
+```
+
+## Exercise 7
+
+```
+const decrypt = function (str) {
+ let decryptedStr = ''
+
+
+ for (let i = 0; i < str.length; i++) {
+ let char = ''
+ str[i] === 'a' ? char = 'z' : char = String.fromCharCode(str.charCodeAt(i) - 1)
+ decryptedStr += char
+ }
+
+
+ return decryptedStr
+}
+```
+
+## Exercise 8
+
+```
+const jumble = function (arr1, arr2) {
+ let jumbledArr = []
+
+
+ for(let a of arr2) {
+ arr1.push(a)
+ }
+
+
+ while(arr1.length) {
+ let randomNumber = Math.floor(Math.random() * arr1.length)
+ jumbledArr.push(arr1.splice(randomNumber, 1)[0])
+ }
+
+
+ return jumbledArr
+}
+```
+
+## Exercise 9
+
+```
+getLetter() {
+ const rawDist = {
+ A: 60,
+ B: 10,
+ C: 10,
+ D: 20
+ }
+ let randomNum = Math.floor((Math.random() * 100) + 1)
+ const letters = Object.keys(rawDist)
+ let currentPercentage = 0
+ for (let i = 0; i < letters.length; i++) {
+ const letter = letters[i]
+ if (rawDist[letter] + currentPercentage >= randomNum) {
+ return letter
+ } else {
+ currentPercentage += rawDist[letter]
+ }
+ }
+}
+```
\ No newline at end of file
diff --git a/solutions/big-o---time-complexity--js----solutions/README.md b/solutions/big-o---time-complexity--js----solutions/README.md
new file mode 100644
index 0000000..ef49f80
--- /dev/null
+++ b/solutions/big-o---time-complexity--js----solutions/README.md
@@ -0,0 +1,111 @@
+# Solutions
+
+## Exercise 1
+
+```
+O(n)
+```
+
+## Exercise 2
+
+```
+O(log(n))
+```
+
+## Exercise 3
+
+```
+O(1)
+```
+
+## Exercise 4
+
+```
+O(NM)
+```
+
+## Exercise 5
+
+```
+O(n)
+```
+
+## Exercise 6
+
+```
+const findDuplicates = function (arr) {
+
+
+ let obj = {}
+
+
+ for (let i = 0; i < arr.length; i++) {
+ if(obj[arr[i]]) {
+ obj[arr[i]]++
+ } else {
+ obj[arr[i]] = 1
+ }
+ }
+
+
+ Object.keys(obj).forEach(k => {
+ if(obj[k] > 1) {
+ console.log("There is a duplicate")
+ }
+ })
+}
+
+```
+
+## Exercise 7
+
+```
+let employees = {
+ ax01: {
+ name: "Ray",
+ age: 28,
+ salary: 1300
+ },
+ qs84: {
+ name: "Lucius",
+ age: 31,
+ salary: 840
+ },
+ bg33: {
+ name: "Taylor",
+ age: 18,
+ salary: 2700
+ }
+}
+
+const findEmployeeSalary = function(employeeID) {
+ let salary = employees[employeeID].salary
+ return salary
+}
+```
+
+## Exercise 8
+
+```
+const findIndex = function (numbers, num) {
+ let startIndex = 0
+ let endIndex = numbers.length - 1
+ let middleIndex, index
+ let found = false
+ while(!found) {
+ middleIndex = Math.floor((endIndex - startIndex)/2)
+ index = middleIndex + startIndex
+
+
+ if(num === numbers[index]) {
+ found = true
+ } else if(numbers[index] > num) {
+ endIndex = middleIndex - 1
+ } else if (numbers[index] < num) {
+ startIndex = middleIndex + startIndex
+ }
+ }
+
+ return index
+}
+```
\ No newline at end of file
diff --git a/solutions/callbacks---arrow-functions---solutions/README.md b/solutions/callbacks---arrow-functions---solutions/README.md
new file mode 100644
index 0000000..9d5b03f
--- /dev/null
+++ b/solutions/callbacks---arrow-functions---solutions/README.md
@@ -0,0 +1,89 @@
+# Solutions
+
+## Exercise 1 - Callbacks
+```
+const pushPull = function (func) {
+ func()
+ }
+
+ const push = function () {
+ console.log("pushing it!")
+ }
+
+ const pull = function () {
+ console.log("pulling it!")
+ }
+
+ pushPull(push)
+ pushPull(pull)
+```
+
+## Exercise 2 - Callbacks
+```
+const getTime = function (func) {
+ const time = new Date()
+ func(time)
+}
+
+const returnTime = function (time) {
+ alert('The current time is: ' + time)
+}
+
+getTime(returnTime)
+```
+
+## Exercise 3 - Callbacks
+```
+const displayData = function (alertDataFunc, logDataFunc, data) {
+ alertDataFunc(data)
+ logDataFunc(data)
+}
+
+const logData = function (data) {
+ console.log(data)
+}
+
+displayData(alert, logData, "I like to party")
+```
+
+## Exercise 4 - Arrow Functions
+```
+const getSum = (a, b, c) => a + b + c
+
+console.log(getSum(1,2,3))
+```
+
+## Exercise 5 - Arrow Functions
+```
+const capitalize = str => str[0].toUpperCase() + str.slice(1).toLowerCase()
+
+const b = capitalize("bOb") // returns Bob
+console.log(b)
+const t = capitalize("TAYLOR") // returns Taylor
+console.log(t)
+const f = capitalize("feliSHIA") // returns Felishia
+console.log(f)
+```
+
+## Exercise 6 - Arrow functions
+```
+const determineWeather = temp => {
+ if (temp > 25) {
+ return "hot"
+ }
+ return "cold"
+}
+
+const commentOnWeather = temp => `It's ${determineWeather(temp)}`
+
+console.log(commentOnWeather(30)) //returns "It's hot"
+console.log(commentOnWeather(22)) //returns "It's cold"
+```
+
+## Exercise 7
+HTML (inside element):
+
+
+```
+
+```
\ No newline at end of file
diff --git a/solutions/closures---modules---solutions/README.md b/solutions/closures---modules---solutions/README.md
new file mode 100644
index 0000000..4fbca1c
--- /dev/null
+++ b/solutions/closures---modules---solutions/README.md
@@ -0,0 +1,131 @@
+# Solutions
+
+## Exercise 1
+```
+const StringFormatter = function () {
+
+ const capitalizeFirst = function (str) {
+ let newStr = str[0].toUpperCase()
+ newStr += str.slice(1).toLowerCase()
+
+ return newStr
+ }
+
+ const skewerCase = function (str) {
+ let newStr = str.replace(/ /g, "-")
+ return newStr
+ }
+
+ return {
+ capitalizeFirst,
+ skewerCase
+ }
+ }
+
+ const formatter = StringFormatter()
+
+ console.log(formatter.capitalizeFirst("dorothy"))
+ console.log(formatter.skewerCase("blue box"))
+ ```
+
+## Exercise 2
+```
+const Bank = function () {
+
+ let _money = 500
+
+ const depositCash = function (cash) {
+ _money += cash
+ }
+
+ const checkBalance = function () {
+ console.log(_money)
+ }
+
+ return {
+ deposit: depositCash,
+ showBalance: checkBalance
+ }
+
+ }
+
+ const bank = Bank()
+
+ bank.deposit(200)
+ bank.deposit(250)
+ bank.showBalance()
+```
+
+## Exercise 3
+```
+const SongsManager = function () {
+
+
+ const _songs = {}
+
+
+ const _doesSongExist = function (newSong) {
+ const songKeys = Object.keys(_songs)
+ for(let song of songKeys) {
+ if(song === newSong) {
+ return true
+ }
+ }
+ return false
+ }
+
+
+ const _shaveSongLink = function (link) {
+
+ const index = link.indexOf("=")
+ const newLink = link.slice(index + 1)
+
+
+ return newLink
+ }
+
+
+ const addSong = function (songName, songLink) {
+ const lowerCaseSong = songName.toLowerCase()
+
+ if(_doesSongExist(lowerCaseSong)) {
+ console.log("You've already added this song.")
+ } else {
+ const shavedSongLink = _shaveSongLink(songLink)
+ _songs[lowerCaseSong] = shavedSongLink
+ }
+ }
+
+
+ const getSong = function (songName) {
+ if(_doesSongExist(songName)) {
+ console.log("https://www.youtube.com/watch?v=" + _songs[songName])
+ } else {
+ console.log("This song is not in your list.")
+ }
+ }
+
+
+
+
+ return {
+ addSong,
+ getSong
+ }
+ }
+
+
+ const songsManager = SongsManager()
+ songsManager.addSong("sax", "https://www.youtube.com/watch?v=3JZ4pnNtyxQ")
+ songsManager.addSong("how long", "https://www.youtube.com/watch?v=CwfoyVa980U")
+ songsManager.addSong("ain't me", "https://www.youtube.com/watch?v=D5drYkLiLI8")
+
+
+ songsManager.getSong("sax") // should print https://www.youtube.com/watch?v=3JZ4pnNtyxQ
+ songsManager.getSong("how long")
+ songsManager.getSong("ain't me")
+
+
+ songsManager.addSong("sax")
+ songsManager.getSong("truth")
+```
\ No newline at end of file
diff --git a/solutions/css-3--variables---animations---solutions/README.md b/solutions/css-3--variables---animations---solutions/README.md
new file mode 100644
index 0000000..f68d617
--- /dev/null
+++ b/solutions/css-3--variables---animations---solutions/README.md
@@ -0,0 +1,257 @@
+# Solutions
+
+## Exercise 1
+
+```
+:root {
+ --glow-color: #F39C12;
+ }
+
+
+
+
+ @keyframes halo-glowing {
+ from {
+ box-shadow: -1px -1px 5px 5px var(--glow-color);
+ }
+ to {
+ box-shadow: -10px -10px 30px 30px var(--glow-color);
+ }
+ }
+
+
+
+
+ body {
+ display: grid;
+ background-color: #000000;
+ margin: 0;
+ height: 100vh;
+ }
+
+
+ #ball {
+ display: grid;
+ justify-self: center;
+ align-self: center;
+ background-color: var(--glow-color);
+ width: 200px;
+ height: 200px;
+ border-radius: 50%;
+ animation-name: halo-glowing;
+ animation-duration: 2s;
+ animation-iteration-count: infinite;
+ animation-direction: alternate;
+ animation-timing-function: linear;
+ }
+
+
+```
+
+
+## Exercise 2
+
+```
+#ball:hover {
+ box-shadow: -10px -10px 30px 30px var(--glow-color);
+}
+
+#ball {
+ box-shadow: -1px -1px 5px 5px var(--glow-color);
+
+
+ transition: box-shadow 2s;
+ transition-timing-function: linear;
+}
+```
+
+
+## Exercise 3
+
+HTML:
+```
+
+
+```
+
+JS:
+```
+const addMenu = function() {
+
+ $("#button-container").empty().append(
+ `
+ {count}
+
+
+
+
+
+ `
+ )
+
+
+ let newHTML =
+ ``
+
+ $("body").append(newHTML)
+
+
+ }
+
+
+ const deleteMenu = function() {
+ $("#menu-container").remove()
+ }
+```
+
+
+CSS:
+
+```
+@keyframes fade-menu {
+ from {
+ width: 0
+ }
+ to {
+ width: 200px;
+ }
+ }
+
+
+
+
+ @keyframes make-x-1 {
+ from{
+ transform: rotate(0deg);
+ margin-left: 0;
+ }
+ to {
+ transform: rotate(-45deg);
+ margin-left: 4px;
+ }
+ }
+
+
+ @keyframes make-x-2 {
+ from{
+ transform: rotate(0deg);
+ margin-left: 0;
+ margin-top: 0;
+ }
+ to {
+ transform: rotate(45deg);
+ margin-left: 3px;
+ margin-top: -6px;
+ }
+ }
+
+
+
+
+
+
+ :root {
+ --secondary-color: #F7D794;
+ }
+
+
+ #nav-bar {
+ display: grid;
+ height: 75px;
+ width: 100%;
+ background-color: #CF6A87;
+ }
+
+
+ .line {
+ background-color: var(--secondary-color);
+ height: 4px;
+ width:30px;
+ margin: 2px;
+ }
+
+
+ #hamburger {
+ display: grid;
+ align-self: center;
+
+ }
+
+
+ #button-container {
+ margin-left: 30px;
+ display: grid;
+ align-self: center;
+ }
+
+
+ #menu-container {
+ background-color: var(--secondary-color);
+ height: 500px;
+ width: 200px;
+
+
+ animation-name: fade-menu;
+ animation-duration: 2s;
+ animation-direction: alternate;
+
+
+ display: grid;
+ grid-template-rows: repeat(3, 1fr);
+ grid-gap: 20px;
+ overflow: hidden;
+ }
+
+
+ /* #menu {
+ display: grid;
+ grid-template-rows: repeat(3, 1fr);
+ grid-gap: 50px;
+ } */
+
+
+ .menu-item{
+ margin-left: 10px;
+ }
+
+
+ .line-x {
+ background-color: var(--secondary-color);
+ height: 4px;
+ width:30px;
+ margin: 2px;
+ }
+
+
+ #line-x-1 {
+ transform: rotate(-45deg);
+ margin-left: 4px;
+
+
+ animation-name: make-x-1;
+ animation-duration: 1s;
+ }
+
+
+ #line-x-2 {
+ transform: rotate(45deg);
+ margin-left: 3px;
+ margin-top: -6px;
+
+
+ animation-name: make-x-2;
+ animation-duration: 1s;
+ }
+```
\ No newline at end of file
diff --git a/solutions/css-basics---solutions/README.md b/solutions/css-basics---solutions/README.md
new file mode 100644
index 0000000..b140026
--- /dev/null
+++ b/solutions/css-basics---solutions/README.md
@@ -0,0 +1,39 @@
+# Solutions
+
+Exercise 1
+-
+```css
+.box {
+ border: 1px solid black;
+ display: inline-block;
+ width: 50px;
+ height: 50px;
+}
+
+#first {
+ background-color: rgb(10, 158, 133);
+}
+
+#second {
+ background-color: rgb(216, 112, 38);
+}
+
+button {
+ background-color: rgb(67, 202, 128);
+ box-shadow: 1px;
+ border-color: mediumseagreen;
+}
+
+body {
+ background-color: lightgrey;
+ font-family: sans-serif;
+}
+
+#container {
+ width: 153px;
+ height: 131px;
+ background-color: lightgrey;
+ font-family: sans-serif;
+ box-shadow: 2px 2px 5px black;
+}
+```
\ No newline at end of file
diff --git a/solutions/css-grid---solutions/README.md b/solutions/css-grid---solutions/README.md
new file mode 100644
index 0000000..cbdd376
--- /dev/null
+++ b/solutions/css-grid---solutions/README.md
@@ -0,0 +1,197 @@
+# Solutions
+
+Chat UI Exercise
+--
+html:
+```html
+
+
+
+
+
+
+
+```
+
+CSS:
+
+
+```css
+#container {
+ display: grid;
+ height: 100vh;
+ grid-template-columns: 1fr 4fr;
+
+
+ }
+
+
+ #contact-container {
+ display: grid;
+ background-color: #8E44AD;
+ height: 100%;
+ padding-right: 10px;
+ padding-left: 10px;
+ font-family: 'Inconsolata', monospace;
+
+
+ }
+
+
+ #contact-head {
+ font-weight: bold;
+ margin-left: 8px;
+ margin-top: 10px;
+ }
+
+
+ .friend {
+ background-color: #9B59B6;
+ height: 5vh;
+ border-radius: 3px;
+ align-content: center;
+ display: grid;
+ padding-left: 5px;
+ }
+
+
+ #chat-container {
+ display: grid;
+ grid-template-rows: 9fr 1fr;
+ background-color: #ECF0F1;
+ }
+
+
+ #message-container {
+ display: grid;
+ grid-template-rows: repeat(5, 1fr);
+ grid-gap: 60px;
+ }
+
+
+
+
+ .message {
+
+ display: grid;
+ grid-template-areas:
+ "m t";
+
+
+ border-radius: 7px;
+ margin-left: 10px;
+ margin-right: 10px;
+ grid-gap: 20px;
+
+
+ margin-bottom: 10px;
+ margin-top: 10px;
+
+ }
+
+
+ .friend-message {
+ display: grid;
+ justify-self: start;
+ background-color: #2ecc71;
+ }
+
+
+ .my-message {
+ display: grid;
+ justify-self: end;
+ background-color: #BDC3C7;
+ }
+
+
+ .message-text {
+ font-family: 'Indie Flower', cursive;
+ display: grid;
+ grid-area: m;
+ padding-left: 8px;
+ align-self: center;
+ justify-self: start;
+ }
+
+
+ .message-time {
+ font-family: 'Gloria Hallelujah', cursive;
+ display: grid;
+ grid-area: t;
+ padding-right: 8px;
+ padding-bottom: 3px;
+ justify-self: end;
+ align-self: end;
+ font-size: 12px;
+ }
+
+
+
+
+ #editor-container {
+
+ display: grid;
+ grid-template-columns: 4fr 1fr;
+ height: 100%;
+ }
+
+
+ #write-message {
+
+
+ font-size: 12px;
+ display: grid;
+ padding-left: 5px;
+ border: grey solid 1px;
+ align-content: center;
+ background-color: #FFFFFF;
+ }
+
+
+ #send-button{
+ font-size: 14px;
+ display: grid;
+ align-content: center;
+ justify-content: center;
+ background-color: #8E44AD;
+ }
+```
\ No newline at end of file
diff --git a/solutions/data-flow---solutions/README.md b/solutions/data-flow---solutions/README.md
new file mode 100644
index 0000000..2a50f4a
--- /dev/null
+++ b/solutions/data-flow---solutions/README.md
@@ -0,0 +1,75 @@
+# Solutions
+
+## Recap Exercise
+```
+const posts = [
+ {
+ name: "Uncle Jerome",
+ text: "Happy birthday kido!"
+ },
+ {
+ name: "BFF Charlene",
+ text: "HEARTS LOVE YOU FOREVER BFF4LYFE HBD"
+ },
+ {
+ name: "Old High School Teacher",
+ text: "Hey ace, have a good one."
+ }
+ ]
+
+
+ const render = function() {
+ for(let post of posts) {
+ $("#posts").append($(`
+
+
+
+ Friends
+ Freya
+ Linda
+ Kenan
+ Theresa
+
+
+
+
+
+
+
+
+
+ ${post.name}: ${post.text}
`))
+ }
+ }
+
+
+ render()
+
+
+ $("button").on("click", function () {
+
+
+
+ const $name = $("#name")
+ const $text = $("#text")
+
+
+ const post = {name: $name.val(), text: $text.val()}
+
+
+ posts.push(post)
+
+
+ $("#posts").empty()
+ render()
+
+
+ $name.val("")
+ $text.val("")
+ })
+```
+
+## Extension
+```
+$("#posts").on("click", ".post", function () {
+
+ const $post = $(this)
+
+ const name = $post.text().substring(0, $post.text().indexOf(":"))
+
+
+
+
+ for(let i in posts) {
+ if(posts[i].name === name) {
+ posts.splice(i, 1)
+ }
+ }
+
+
+ $("#posts").empty()
+ render()
+ })
+```
\ No newline at end of file
diff --git a/solutions/data-structures---solutions/README.md b/solutions/data-structures---solutions/README.md
new file mode 100644
index 0000000..8276e53
--- /dev/null
+++ b/solutions/data-structures---solutions/README.md
@@ -0,0 +1,71 @@
+# Solutions
+
+## Exercise
+
+```
+class UniqueArray {
+ constructor() {
+ this.arr = []
+ this.length = 0
+ this.obj = {}
+ }
+
+ add(item) {
+ if(!this.exists(item)) {
+ this.arr[this.length] = item
+ this.length++
+ this.obj[item] = 1
+ }
+ }
+
+
+ showAll() {
+ console.log(this.arr)
+ }
+
+
+ exists(item) {
+ if(this.obj[item]){
+ return true
+ } else {
+ return false
+ }
+ }
+
+
+ get(index) {
+ if(index <= (this.length - 1)){
+ return this.arr[index]
+ } else {
+ return -1
+ }
+ }
+
+
+}
+```
+
+
+## Extension
+
+```
+_isPrimitive(item) {
+ if(typeof item === "number" || typeof item === "string" || typeof item === "boolean" ||typeof item === "undefined" || typeof item === "null" || typeof item === "symbol") {
+ return true
+ } else {
+ return false
+ }
+}
+
+
+add(item) {
+ if(this._isPrimitive(item)) {
+ if(!this.exists(item)) {
+ this.arr[this.length] = item
+ this.length++
+ this.obj[item] = 1
+ }
+ }
+}
+
+```
\ No newline at end of file
diff --git a/solutions/dom-intro---solutions/README.md b/solutions/dom-intro---solutions/README.md
new file mode 100644
index 0000000..b80b384
--- /dev/null
+++ b/solutions/dom-intro---solutions/README.md
@@ -0,0 +1,299 @@
+# Solutions
+
+Completing the Game
+-
+index.html:
+```html
+↑
←
→
↓
+
+
+
+
+
+
+```
+
+
+CSS:
+
+
+```css
+body {
+ font-family: helvetica;
+}
+
+#container {
+ position: relative;
+ background-color: #1abc9c;
+ display: inline-block;
+ padding-top: 40px;
+ padding-bottom: 40px;
+ padding-right: 20px;
+ padding-left: 20px;
+ border: #16a085 solid 4px;
+}
+
+#form {
+ position: relative;
+ width: 350px;
+ height: 300px;
+}
+
+.main {
+ margin: 12px;
+}
+
+.second-line {
+ display: inline-block;
+}
+
+#error-message {
+ color: red;
+ position: absolute;
+}
+
+#name{
+ width: 100%;
+}
+
+#desired-salary {
+ width: 150px;
+}
+
+#birthday {
+ width: 100%;
+}
+
+#phone {
+ width: 100%;
+}
+
+#button {
+ position: absolute;
+ right: 20px;
+ bottom: 20px;
+ background-color: #34495e;
+ color: #95a5a6;
+ border: #2c3e50 solid 3px;
+
+ width: 75px;
+ height:35px;
+ border-radius: 5%
+}
+```
+
+
+JS:
+
+
+```js
+const isMissing = function(input) {
+ if(input.length === 0) {
+ return true
+ } else {
+ return false
+ }
+}
+
+const message = document.createElement("div")
+message.setAttribute("id", "error-message")
+
+const validate = function() {
+
+ const form = document.getElementById("form")
+ const name = document.getElementById("name").value
+ const salary = parseInt(document.getElementById("desired-salary").value)
+ console.log(salary)
+ const birthday = document.getElementById("birthday").value
+ const phone = document.getElementById("phone").value
+
+
+
+ if(isMissing(name)){
+ message.innerHTML = "Name is missing"
+ } else if(name.length <= 2) {
+ message.innerHTML = "Name is too short, please enter name with more than 2 characters"
+ } else if (isMissing(salary)) {
+ message.innerHTML = "Desired salary is missing"
+ } else if((salary < 10000)) {
+ message.innerHTML = "Salary must be greater than 10000"
+ } else if((salary > 16000)) {
+ message.innerHTML = "Salary must be less than 16000"
+ } else if (isMissing(birthday) || birthday === null) {
+ message.innerHTML = "Please enter your birthday"
+ } else if(isMissing(phone)) {
+ message.innerHTML = "Phone is missing"
+ } else if(phone.length < 10) {
+ message.innerHTML = "Phone number too short, must be 10 digits"
+ } else if(phone.length > 10) {
+ message.innerHTML = "Phone number too long, must be 10 digits"
+ } else {
+ form.style.display = "none"const welcome = document.createElement("h1")
+ welcome.innerHTML = "Welcome in, " + name
+ welcome.style.color = "green"document.body.appendChild(welcome)
+ }
+
+
+
+
+ document.getElementById("form").appendChild(message)
+
+}
+```
\ No newline at end of file
diff --git a/solutions/dom-traversal-with-jquery---solutions/README.md b/solutions/dom-traversal-with-jquery---solutions/README.md
new file mode 100644
index 0000000..1234919
--- /dev/null
+++ b/solutions/dom-traversal-with-jquery---solutions/README.md
@@ -0,0 +1,30 @@
+# Solutions
+
+## Exercises
+```
+let ids = []
+
+
+ $(".generator").on("click", function () {
+ let processor = $(this).closest(".processor").attr("id")
+ let dataId = $(this).closest(".computer").data().id
+ let busNum = $(this).closest(".computer").find(".BUS").text()
+
+
+ ids.push({cmp_id: dataId})
+
+
+ console.log(`Processor ID: ${processor}\nComputer's data-id: ${dataId}\nBUS: ${busNum}`)
+ })
+
+
+
+
+ $(".validator").on("click", function() {
+ let generatorText = $(this).closest(".computer").find(".generator").text()
+ let mb = $(this).closest(".computer").find(".MB").text()
+ let qr1 = $(this).closest(".computer").find(".QR:first-child").text()
+ let qr2 = $(this).closest(".computer").find(".QR:nth-child(2)").text()
+ console.log(`Text: ${generatorText}\nMB: ${mb}\nQR 1: ${qr1}\nQR 2: ${qr2}`)
+ })
+```
\ No newline at end of file
diff --git a/solutions/es6-array-methods---solutions/README.md b/solutions/es6-array-methods---solutions/README.md
new file mode 100644
index 0000000..65cb319
--- /dev/null
+++ b/solutions/es6-array-methods---solutions/README.md
@@ -0,0 +1,51 @@
+# Solutions
+
+## Exercise 1
+
+```
+ const emailCompany = users.map(u => {return {email: u.email, companyName: u.company.name}})
+```
+
+
+## Exercise 2
+
+```
+const zipCodeFive = users.filter(u => u.address.zipcode[0] === "5")
+```
+
+
+## Exercise 3
+
+```
+const zipCodeFiveId = users.filter(u => u.address.zipcode[0] === "5")
+ .map(u => u.id)
+```
+
+
+## Exercise 4
+
+```
+const names = users.map(u => u.name)
+ .filter(n => n[0].toLowerCase() === "c")
+```
+
+
+## Exercise 5
+
+```
+const doesAllLiveSC = users.every(u => u.address.city === "South Christy")
+```
+
+
+## Exercise 6
+
+```
+const findUser = suite => console.log(users.find(u => u.address.suite === suite).company.name)
+```
+
+
+## Exercise 7
+
+```
+const printInfo = user => console.log(`${user.name} lives in ${user.address.city}, and owns the company ${user.company.name}`) users.forEach(printInfo)
+```
\ No newline at end of file
diff --git a/solutions/express--crud--router----middleware---solutions/README.md b/solutions/express--crud--router----middleware---solutions/README.md
new file mode 100644
index 0000000..46950d8
--- /dev/null
+++ b/solutions/express--crud--router----middleware---solutions/README.md
@@ -0,0 +1,85 @@
+# Solutions
+
+## Exercise 1
+```
+router.get('/sanity', function(req, res) {
+ res.send("Server up and running")
+ })
+```
+
+## Exercise 2
+```
+const wordCounter = {}
+router.get('/word/:word', function(req, res) {
+ if(wordCounter[req.params.word]) {
+ res.send({count: wordCounter[req.params.word]})
+ } else {
+ res.send({count: 0})
+ }
+
+
+ })
+```
+
+## Exercise 3
+```
+router.post('/word/:word', function(req, res) {
+
+ if(wordCounter[req.params.word]) {
+ wordCounter[req.params.word]++
+ } else {
+ wordCounter[req.params.word] = 1
+ }
+
+
+ res.send({text: `Added ${req.params.word}`, currentCount: wordCounter[req.params.word]})
+ })
+```
+
+## Exercise 4
+```
+router.post('/words/:sentence', function(req, res) {
+
+ let words = req.params.sentence.split(" ")
+ let numNewWords = 0
+ let numOldWords = 0
+
+
+ for(let word of words) {
+ if(wordCounter[word]) {
+ wordCounter[word]++
+ numOldWords++
+ } else {
+ wordCounter[word] = 1
+ numNewWords++
+ }
+ }
+
+
+ res.send({text: `Added ${numNewWords} words, ${numOldWords} already existed.`, currentCount: -1})
+ })
+```
+
+## Exercise 5
+```
+router.get('/total', function(req, res) {
+ const words = Object.keys(wordCounter)
+ let sum = 0
+
+ for(let word of words) {
+ sum += wordCounter[word]
+ }
+
+
+ res.send({text: "Total count", count: sum})
+ })
+```
+
+## Extension 1
+No Solution
+
+## Extension 2
+No Solution
+
+## Extension 3
+No Solution
\ No newline at end of file
diff --git a/solutions/express-intro--servers--routes----params---solutions/README.md b/solutions/express-intro--servers--routes----params---solutions/README.md
new file mode 100644
index 0000000..e4428c2
--- /dev/null
+++ b/solutions/express-intro--servers--routes----params---solutions/README.md
@@ -0,0 +1,146 @@
+# Solutions
+
+## Exercise 2
+```
+app.get('/priceCheck/:name', function(request, response) {
+ let name = request.params.name
+ let priceObj = {price: null}
+ for(let obj of store) {
+ if(obj.name === name) {
+ priceObj = {price: obj.price}
+ }
+ }
+
+
+ response.send(priceObj)
+ })
+```
+
+## Exercise 3
+HTML:
+```
+
+
+
+
+
+
+
+
+ Desired Salary
+
+
+
+ Birthday
+
+
+
+
+ Phone
+
+
+
+
+
+
Money:
+```
+JS:
+```
+$("#submit").on("click", function () {
+ const input = $("#furniture").val()
+ $.get(`/priceCheck/${input}`, function (furnData) {
+ $("body").append(`${furnData.price}
`)
+ })
+ $("#furniture").val("")
+ })
+```
+
+## Exercise 4
+```
+app.get('/buy/:name', function(request, response) {
+ let name = request.params.name
+ for(let obj of store) {
+ if(obj.name === name) {
+ obj.inventory -= 1
+ response.send(`Congrats! You've just bought ${obj.name} for ${obj.price}. There are ${obj.inventory} left in stock.`)
+ }
+ }
+
+
+ response.end()
+ })
+```
+
+## Exercise 5
+html:
+```
+
+
+```
+js:
+```
+$("#buy").on("click", function () {
+ const input = $("#buy-furniture").val()
+
+
+ $.get(`/buy/${input}`, function (response) {
+ $("body").append(`
${response}
`)
+ })
+
+
+ $("#buy-furniture").val("")
+})
+```
+
+## Exercise 6
+```
+app.get('/sale', function(request, response) {
+ let q = request.query
+ if(q.admin) {
+ for(let obj of store) {
+ if(obj.inventory > 10){
+ obj.price *= 0.5
+
+
+ }
+ console.log(obj.price)
+ }
+ }
+
+
+ response.end()
+ })
+```
+
+## Extension 1
+html:
+```
+
Money:
+```
+js:
+```
+$("#buy").on("click", function () {
+ const input = $("#buy-furniture").val()
+
+
+ $.get(`/priceCheck/${input}`, function(priceObj) {
+ if(money >= priceObj.price) {
+ $.get(`/buy/${input}`, function (response) {
+ $("body").append(`${response}
`)
+ })
+ money -= priceObj.price
+ fetch()
+ } else {
+ $("#money-container").append(`
+${$("input").val()} `)
+ $("input").val("")
+ })
+```
+
+## Exercise 2
+```
+$("#human-list").on("click", "li", function() {
+ $(this).remove()
+ })
+```
+
+## Exercise 3
+```
+$("body").append("")
+$("body").append("")
+
+let $boxes = $(".box")
+
+$(".box").hover(function () {
+ $boxes.css("background-color", "rgb(231, 76, 60)")
+ $(this).css("background-color", "rgb(142, 68, 173)")
+})
+```
+
+## Exercise 4
+```
+$(".item").click(function () {
+
+ if ($(this).data().instock) {
+ $("#cart").append(`")
+ $("#timeline").append(postBox)
+ }
+}
+render()
+```
+
+
+This is great because our view now reflects our data exactly.
+
+
+
+But what happens when someone else posts on our timeline?
+
+
+
+----------
+
+
+
+From the view the user can trigger some **events** - like a button that posts another birthday wish.
+
+
+
+
+
+So far, in situations like this - where there is an event that should change the DOM, we have been doing something like this:
+
+
+```
+$("post").on("click", function () {
+ const name = $("input-name").val()
+ const text = $("input-text").val()
+ $("#timeline").append(newPost(name, text))
+ //where newPost is a funciton that creates a post html element with the given name and text
+})
+```
+
+
+This is bad because there are other events that trigger DOM changes.
+
+
+
+- Someone sending you a direct message
+- An invite to Crush-a-Candy
+- Another post on the timeline
+
+
+
+So many things can change the DOM that if we had loose on.("click")s everywhere it would eventually become very hard to keep track.
+
+
+
+Instead, when an event happens, **the only thing that should change is data itself!**
+
+
+
+The idea behind the data flow concept is that **we don't want to change the view directly**. The event should only affect the data.
+
+
+
+So back to our code, it would look like this:
+
+
+```
+$("post").on("click", function () {
+ posts.push({
+ name: $("input-name").val(),
+ text: $("input-text").val()
+ })
+})
+```
+
+The event is still the same - the post has been clicked - but now all we're doing is pushing to our posts array.
+
+
+
+And now, since our data is updated, we can just call our render function again.
+
+
+
+
+
+And that's our circle ~
\ No newline at end of file
diff --git a/web-development-basics-advanced/dom-intro/README.md b/web-development-basics-advanced/dom-intro/README.md
new file mode 100644
index 0000000..9d9813f
--- /dev/null
+++ b/web-development-basics-advanced/dom-intro/README.md
@@ -0,0 +1,60 @@
+# Intro
+
+So far we've learned to write HTML+CSS, and JS separately. They have not interacted with one another... until _today_.
+
+
+
+To make our webpages more interesting, we want to be able to **dynamically change the content** on the page - that means either removing, changing, or adding new elements to the page.
+
+
+
+We also want to interact with the user; if the user clicks a button, we want to _do something_ in response to that.
+
+
+
+As such, today's lesson will cover the following:
+
+
+
+- The DOM and the `document` object
+- Using JS to find HTML elements on our page
+- Accessing the values of those elements
+- Modifying/removing elements and/or their values
+- Creating new elements with JS and adding them to the page
+- Events - things the user does on our page, to which we want to react
+
+
+
+This is the beginning of doing really cool things as developers! Be excited!
+
+
+
+----------
+
+
+
+#### **THE DOM**
+
+
+
+Before we _do_ anything, we need to understand what we're dealing with. After all, we want to do all these HTML related actions using JS, but we don't write any HTML in our JS files.
+
+
+
+Remember this: **the way JS accesses HTML elements is through the DOM**
+
+
+
+DOM stands for **D**ocument **O**bject **M**odel - it is a _representation_ of our HTML document.
+
+
+
+In particular, it is a representation in which each _node_ in our HTML is an _object_ which represents part of the `document`.
+
+
+
+What is this `document`?
+
+
+
+The `document` is an object accessible in JS that represents our entire page. Let's check it out.
\ No newline at end of file
diff --git a/web-development-basics-advanced/dom-traversal-with-jquery/README.md b/web-development-basics-advanced/dom-traversal-with-jquery/README.md
new file mode 100644
index 0000000..a6b5d18
--- /dev/null
+++ b/web-development-basics-advanced/dom-traversal-with-jquery/README.md
@@ -0,0 +1,11 @@
+# Intro
+
+In this lesson we're going to learn how to move around from one element to another. We can't always give specific IDs to everything, so we need a better way to target elements given a certain starting point, and _traversing_ to them.
+
+
+
+So get yourself an index.html, a main.js, and some jQuery imports*. Then buckle up for a heck-of-a ride.
+
+
+
+###### *Or use codepen, just make sure you have jQuery set up there
\ No newline at end of file
diff --git a/web-development-basics-advanced/e-commerce-dom-project--optional-/README.md b/web-development-basics-advanced/e-commerce-dom-project--optional-/README.md
new file mode 100644
index 0000000..c07e246
--- /dev/null
+++ b/web-development-basics-advanced/e-commerce-dom-project--optional-/README.md
@@ -0,0 +1,24 @@
+# Description
+
+The goal of this project is to create a simple e-commerce website. This can be a little challenging with your current knowledge, so take it slowly, read through all of the instructions before you start, and use Google :)
+
+
+
+The site should have a navigation bar with 3 buttons:
+
+1. `About Us` - when clicked there should be some HTML rendered with some information about the website (feel free to get creative)
+2. `All Products` - when clicked it should render different HTML on the page which displays a list of all the products
+ - Each product should also have an add to cart button.
+3. `Cart Page` - when clicked it should render new HTML to the page which will display all items that are already added to the cart (here items can have a `delete` from cart button)
+
+
+
+Note: You can use modules, but don’t need to if you’re not sure how.
+
+
+
+Additionally, feel free to be as creative as you want. The idea is to explore and challenge yourself. You don’t necessarily need to add all the features or go exactly according to the instructions.
+
+
+
+Good luck!
\ No newline at end of file
diff --git a/web-development-basics-advanced/jquery/README.md b/web-development-basics-advanced/jquery/README.md
new file mode 100644
index 0000000..973e7ef
--- /dev/null
+++ b/web-development-basics-advanced/jquery/README.md
@@ -0,0 +1,64 @@
+# Intro
+
+We've been working with the DOM a bit, and eventually you've got to get tired of writing document.getElementById... - it's very verbose.
+
+
+
+So today we're introducing the **jQuery library** - effectively this will give us several shortcuts to working with the DOM. Don't get confused: **jQuery is just JavaScipt**. Specifically, it is a [wrapper](https://en.wikipedia.org/wiki/Wrapper_function) for **vanilla JS** that makes our lives easier.
+
+
+
+For instance, instead of writing this in vanilla (plain, regular) JS:
+```
+document.getElementById("container")
+```
+
+
+We'll write this with jQuery:
+```
+$("#container")
+```
+
+
+In terms of getting an element by an ID, they do the exact same! But that jQuery sure is more convenient.
+
+
+
+jQuery does more than give us shortcuts for things that vanilla JS already does. It also gives us extra methods that do specific things for us. Like this:
+
+
+```
+//vanilla JS
+document.getElementById("container").style.display = "none"
+
+//jQuery
+$("#container").hide() //when we select elements with jQuery, we also get methods that can work on the element, on top of the element itself
+```
+
+
+We'll talk more about jQuery methods soon.
+
+----------
+
+
+
+There's a lot to explore in jQuery, but for this lesson we'll focus on the following:
+
+
+
+- Targeting/selecting elements
+- Understanding $
+- Common jQuery methods
+- css and addClass
+- val
+- data
+- Handling user events
+- Good ol' this - in jQuery
+- Creating & adding/removing elements to/from the DOM
+- Dynamic event listeners
+
+
+
+It may seem like a lot, but really it's mostly the same things we did in vanilla JS, with more convenience.
+
+Call it DOM++ if you like.
\ No newline at end of file
diff --git a/web-development-basics-advanced/tweeter-controller/README.md b/web-development-basics-advanced/tweeter-controller/README.md
new file mode 100644
index 0000000..1877f61
--- /dev/null
+++ b/web-development-basics-advanced/tweeter-controller/README.md
@@ -0,0 +1,19 @@
+# Intro
+
+It's time to complete Tweeter!
+
+
+
+So far we have our module that handles the logic - adding/removing posts and comments.
+
+
+
+And our rendering module which takes the data from the logic module and renders it.
+
+Now we need to build the part that handles both of these. How do we add posts? When are comments created and removed? Who calls renderPosts?
+
+
+
+All of these dynamic things happen as a result of user interaction! In our case, clicks.
+
+This, finally, is the **Controller** in our MV**C** architecture - the part that deals with user input.
\ No newline at end of file
diff --git a/web-development-basics-advanced/tweeter-logic-module/README.md b/web-development-basics-advanced/tweeter-logic-module/README.md
new file mode 100644
index 0000000..b7289c1
--- /dev/null
+++ b/web-development-basics-advanced/tweeter-logic-module/README.md
@@ -0,0 +1,69 @@
+# Intro
+
+It's time to put what we've learned about closures and modularization to practice. We'll do so by creating our own Tweeter. It is not at all related to the somewhat more popular Twitter, though its basic functionalities will be similar.
+
+
+
+Eventually, our Tweeter will look like this:
+
+
+
+
+
+
+
+But for now we're only going to implement the data related parts that will be the 'engine' powering this multi-million dollar project.
+
+
+
+Go ahead and **create a tweeter folder** - you can start by creating a repository on Github, or by doing it locally and then pushing later. Up to you. It should end up on GitHub eventually, though.
+
+
+
+
+
+----------
+
+
+
+
+
+#### **MODULES IN ACTION**
+
+
+
+
+
+We learned about modularization, but it'll only be clear once we start to talk about applications on a higher level.
+
+
+
+So - what are the components, the building blocks, the _modules_ of Tweeter?
+
+
+
+- The module that manages our posts logic
+- Storing all our twits (not the same as tweets)
+- Posting a twit
+- Commenting on twits
+- Removing twits
+- Removing comments
+- A module that manages our **rendering** - displaying things on the page
+- Creating HTML for a twit dynamically
+- Creating HTML for comments dynamically
+- Rendering all our twits and their comments
+- Something that glues both of the above
+
+
+
+For now, we're only going to deal with the first part - our core _twits_ operations - so we're going to create a Tweeter module.
+
+
+
+We'll learn about MVC soon, but know that this module is the **Model** in our **M**VC architecture - the part that is responsible for our data.
+
+
+
+Because we want to keep our modules separate, we're literally going to separate them into different files.
+
+As such, go ahead and **create a** **model.js** **file** - this is where our Tweeter module will be. Add this file to your **tweeter** folder.
\ No newline at end of file
diff --git a/web-development-basics-advanced/tweeter-render-module/README.md b/web-development-basics-advanced/tweeter-render-module/README.md
new file mode 100644
index 0000000..6d6ccf2
--- /dev/null
+++ b/web-development-basics-advanced/tweeter-render-module/README.md
@@ -0,0 +1,67 @@
+# Intro
+
+After Completing the Module part of the **M**VC ,It's time to **(partly)** bring our **Tweeter app** to life!
+
+
+
+If you've got your whole **Tweeter logic module working well** - great. Keep that.
+
+if you did not **complete** it, thats okay! 😄 you can use the following instead for now, since we're only going to deal with rendering and nothing dynamic yet:
+
+ +Having the getPosts function is enough for this part, because that's all our rendering module will **require**. (we Do **NOT** need anything more than that) + +--- + +Also, here is some HTML (add it to your **tweeter** folder) you should use - it's nothing exciting, and we won't be changing it throughout this project: +``` + + + +Tweeter
+
+
+
+
+
+
+
+
+
+
+```
\ No newline at end of file
diff --git a/web-development-basics/README.md b/web-development-basics/README.md
new file mode 100644
index 0000000..f2f3392
--- /dev/null
+++ b/web-development-basics/README.md
@@ -0,0 +1,17 @@
+# Web Development Basics
+
+- [Box Model](box-model/README.md)
+- [Code_Standards](code_standards/README.md)
+- [Css Basics](css-basics/README.md)
+- [Css Grid](css-grid/README.md)
+- [Css Positioning](css-positioning/README.md)
+- [Css_Positioning_Exercises](css_positioning_exercises/README.md)
+- [Extra_Practice](extra_practice/README.md)
+- [Functions](functions/README.md)
+- [Functions_Mini_Lesson_Optional](functions_mini_lesson_optional/README.md)
+- [Git Basics](git-basics/README.md)
+- [Html Basics](html-basics/README.md)
+- [Javascript Basics](javascript-basics/README.md)
+- [Js This](js-this/README.md)
+- [Scope](scope/README.md)
+- [Web Debugger Basics](web-debugger-basics/README.md)
\ No newline at end of file
diff --git a/web-development-basics/_sidebar.md b/web-development-basics/_sidebar.md
new file mode 100644
index 0000000..188e16e
--- /dev/null
+++ b/web-development-basics/_sidebar.md
@@ -0,0 +1,16 @@
+- Web Development Basics
+ - [Box Model](box-model/README.md)
+ - [Code_Standards](code_standards/README.md)
+ - [Css Basics](css-basics/README.md)
+ - [Css Grid](css-grid/README.md)
+ - [Css Positioning](css-positioning/README.md)
+ - [Css_Positioning_Exercises](css_positioning_exercises/README.md)
+ - [Extra_Practice](extra_practice/README.md)
+ - [Functions](functions/README.md)
+ - [Functions_Mini_Lesson_Optional](functions_mini_lesson_optional/README.md)
+ - [Git Basics](git-basics/README.md)
+ - [Html Basics](html-basics/README.md)
+ - [Javascript Basics](javascript-basics/README.md)
+ - [Js This](js-this/README.md)
+ - [Scope](scope/README.md)
+ - [Web Debugger Basics](web-debugger-basics/README.md)
\ No newline at end of file
diff --git a/web-development-basics/box-model/README.md b/web-development-basics/box-model/README.md
new file mode 100644
index 0000000..074e233
--- /dev/null
+++ b/web-development-basics/box-model/README.md
@@ -0,0 +1,55 @@
+# The Box Model
+
+# The Box Model
+
+We know enough now to talk about the Box Model. To understand this, you must first accept the following boggling statement:
+
+_There is more to an element on the page than the element on the page._
+
+And we can explain that visually. Say we have our good old red box, with a `width` and `height` of 100px. Create such an element.
+
+Now right-click the box and select "Inspect". You should see Chrome's developer tools pop up, and there you'll see the HTML that the browser has available:
+
+
+
+You should be on the **Elements** tab, and in the smaller window you should be on the **Styles** tab. Scroll down the little window until you see this:
+
+
+
+
+This is the CSS **box model**. What we're seeing here is how the element looks on the page. Right now it's pretty stark - naturally, because we haven't done much.
+
+
+Notice the 100 x 100 in the middle? Yup, those are the dimensions we gave our element!
+
+##### **Note: the box model will _always show dimensions in pixels_, even if you use percents or other units**
+
+Ok so the above doesn't tell us much we don't know. But let's add a margin-top of 100px as well and see what that does:
+
+
+
+
+
+There it is, our box model keeping exact track of the positioning of our element. Of course, you should have seen your element move as well. Now what if we add just `padding: 20px` ?
+
+
+
+
+
+
+Yessir, all around. Just as we would expect. But the really fun part is when you **hover your mouse** over any of the box model's sections.
+
+
+When you hover over the innermost part, you'll see your div get highlighted on the page - this is _great_ for locating elements when you've got a bunch on the page.
+
+
+When you hover over the margin section, you'll see exactly what the browser is doing with that 100px - the "push", so to speak. You'll _also_ see that the margin highlight extends all the way to the right-most part of the page - why? Because this `div` is a **block** element! Bam.
+
+
+So **whenever elements start disappearing or they don't look the way you expect - inspect them and look at their box model**, that should give you some headway about how to start fixing.
+
+
+Btw, what happens when you hover on the padding section?
+
+
+You should see the 20px all around that are padding the element. That's what we mean by the `div` being pushed "outside" beyond its original 100 x 100 dimensions.
\ No newline at end of file
diff --git a/web-development-basics/code_standards/README.md b/web-development-basics/code_standards/README.md
new file mode 100644
index 0000000..db4d773
--- /dev/null
+++ b/web-development-basics/code_standards/README.md
@@ -0,0 +1,11 @@
+# Intro
+
+# Code Standards
+
+Through out the course we want to maintain a certain level of code standards that are fit for the industry.
+
+Please make sure to practice these conventions as best as you can!
+
+
+
+**we are watching you**
\ No newline at end of file
diff --git a/web-development-basics/css-basics/README.md b/web-development-basics/css-basics/README.md
new file mode 100644
index 0000000..b9f6251
--- /dev/null
+++ b/web-development-basics/css-basics/README.md
@@ -0,0 +1,14 @@
+# Intro
+
+# CSS Basics
+
+In this lesson we will cover:
+
+- Properties (briefly)
+- CSS Selectors
+- Specificity
+- Display
+
+Note, CSS code should go in your `style.css` file - and make sure you have the connection from your HTML file!
+
+There will be exercises in the middle and end of the lesson, but you should be trying things out throughout - don't just read it over, you'll get bored ~
\ No newline at end of file
diff --git a/web-development-basics/css-grid/README.md b/web-development-basics/css-grid/README.md
new file mode 100644
index 0000000..e2ffc8f
--- /dev/null
+++ b/web-development-basics/css-grid/README.md
@@ -0,0 +1,96 @@
+# Intro
+
+# Intro
+
+CSS can be... a lot. The absolutes, positions, margins - sometimes one attribute messes with another and it's unclear how instead of a few boxes side by side you got this:
+
+
+
+
+
+
+
+
+
+Though, to be honest, if you're able to replicate that - well done.
+
+
+
+Anyway, sometimes we want to layout our page a certain way without worrying too much about the small details of CSS. Everything from the basic CSS lesson is **still important** and you definitely **will use it more** - but for a more intuitive approach to the layout of our web apps, we want someone else to take care of the heavy lifting.
+
+
+
+And so we have [CSS Grid](https://cssgrid.io/).
+
+
+
+----------
+
+
+
+#### **A GRID**
+
+
+
+A grid layout is just what you imagine - some columns and rows, with our elements aligned neatly around the page.
+
+
+
+
+
+
+Can you think of how you would design something like the above image with just plain CSS? And how would the HTML look? This is one (not very fun) option:
+
+NOTE: if you copying thous line by clicking the "copy" button, it might not work... To fixed that, just select the code and copy/paste it
+
+
+```html
+
+
+```
+
+```css
+.container{
+ padding: 10px;
+ position: relative;
+}
+
+.head{
+ height: 70px;
+ width: 90%;
+ right: 0;
+ position: absolute;
+ background-color: #a29bfe;
+ display:inline-block;
+
+}
+
+.side-nav{
+ height: 500px;;
+ width: 10%;
+ background-color: #6c5ce7;
+ display: inline-block;
+}
+
+.main{
+ position: absolute;
+ display: inline-block;
+ width: 100%;
+}
+
+.inner-content{
+ position: absolute;
+ top: 70px;
+ height: 430px;
+ width: 90%;
+ background-color:red;
+}
+```
+
+
+...point is, it becomes pretty involved - and that is a pretty _basic_ layout. What if we wanted something even more complex? _And_ a lot of the values there are **hard-coded**.
+
+
+
+With CSS Grid, we can simplify this a _whole_ lot. Let's dive right in and see what this is all about.
\ No newline at end of file
diff --git a/web-development-basics/css-positioning/README.md b/web-development-basics/css-positioning/README.md
new file mode 100644
index 0000000..7185ee4
--- /dev/null
+++ b/web-development-basics/css-positioning/README.md
@@ -0,0 +1,22 @@
+# Intro
+
+# CSS Position
+
+So far, we've covered pretty basic HTML and CSS.
+
+It wasn't the prettiest, but we're not shallow.
+
+Today we will learn about the **box model** and start moving elements around the page using the following CSS properties
+
+- margin
+- padding
+- position
+- relative
+- absolute
+- left, top, right, bottom
+
+You'll be playing around with a lot of HTML/CSS.
+
+- You **must** try all the things in this lesson, otherwise it will be useless and boring to you
+- If you want to keep some code but not delete it, you can **comment** it out
+- In VSCode, highlight the line(s) you want to comment out and press Ctrl+/ (that's a slash) - this will wrap your code in a comment and prevent it from being read by the browser.
\ No newline at end of file
diff --git a/web-development-basics/css_positioning_exercises/README.md b/web-development-basics/css_positioning_exercises/README.md
new file mode 100644
index 0000000..c979126
--- /dev/null
+++ b/web-development-basics/css_positioning_exercises/README.md
@@ -0,0 +1,50 @@
+# Present
+
+# Present
+
+Create the following:
+
+
+
\ No newline at end of file
diff --git a/web-development-basics/extra_practice/README.md b/web-development-basics/extra_practice/README.md
new file mode 100644
index 0000000..eaef783
--- /dev/null
+++ b/web-development-basics/extra_practice/README.md
@@ -0,0 +1,110 @@
+# Page1
+
+# JavaScript Exercises
+
+1. **Count Object Properties**:
+ Write a function that counts the number of properties in an object.
+ ```javascript
+ function countProperties(obj) {
+ // Your code here
+ }
+ // Test the function with
+ console.log(countProperties({ name: 'Alice', age: 25 })); // Should return 2
+ ```
+
+2. **Check for Nested Property**:
+ Write a function to check if a nested property exists in an object.
+ ```javascript
+ function hasNestedProperty(obj, key) {
+ // Your code here
+ }
+ // Test the function with
+ console.log(hasNestedProperty({ user: { name: 'Bob', age: 30 } }, 'user.name')); // Should return true
+ ```
+
+3. **Calculate Age from Birth Year**:
+ Create an object `person` with properties `name` and `birthYear`. Write a function that calculates age from the birth year.
+ ```javascript
+ let person = {
+ name: 'John',
+ birthYear: 1990
+ };
+
+ function calculateAge(obj) {
+ // Your code here
+ }
+ // Test the function with
+ console.log(calculateAge(person)); // Should return age
+ ```
+
+4. **Update Object Property**:
+ Write a function that updates the value of a given property in an object.
+ ```javascript
+ function updateProperty(obj, key, value) {
+ // Your code here
+ }
+ // Test the function with
+ console.log(updateProperty({ name: 'Alice' }, 'name', 'Bob')); // Should change name to Bob
+ ```
+
+5. **Nested Object Creation**:
+ Write a function to create a nested object from a single object with dot-separated keys.
+ ```javascript
+ function createNestedObject(obj) {
+ // Your code here
+ }
+ // Test the function with
+ console.log(createNestedObject({ 'user.name': 'Alice', 'user.age': 25 })); // Should return { user: { name: 'Alice', age: 25 } }
+ ```
+
+6. **Display Object in HTML**:
+ Write a function that takes an object and displays its properties and values in HTML format.
+ ```javascript
+ function displayObjectInHTML(obj) {
+ // Your code here
+ }
+ // Test with an object of your choice
+ ```
+
+7. **Object Property Checker**:
+ Write a function that checks if a property exists in an object.
+ ```javascript
+ function hasProperty(obj, key) {
+ // Your code here
+ }
+ // Test the function with
+ console.log(hasProperty({ name: 'Alice', age: 25 }, 'age')); // Should return true
+ ```
+
+8. **Add Method to Object**:
+ Add a method `greet` to an object `person` that returns "Hello, [name]!".
+ ```javascript
+ let person = {
+ name: 'John',
+ greet: function() {
+ // Your code here
+ }
+ };
+ // Test the method with
+ console.log(person.greet()); // Should return "Hello, John!"
+ ```
+
+9. **Object to Array Conversion**:
+ Write a function that converts an object into an array of `[key, value]` pairs.
+ ```javascript
+ function objectToArray(obj) {
+ // Your code here
+ }
+ // Test the function with
+ console.log(objectToArray({ name: 'Alice', age: 25 })); // Should return [['name', 'Alice'], ['age', 25]]
+ ```
+
+10. **Merge Two Objects**:
+ Write a function that merges two objects into one.
+ ```javascript
+ function mergeObjects(obj1, obj2) {
+ // Your code here
+ }
+ // Test the function with
+ console.log(mergeObjects({ name: 'Alice' }, { age: 25 })); // Should return { name: 'Alice', age: 25 }
+ ```
\ No newline at end of file
diff --git a/web-development-basics/extra_practice/_sidebar.md b/web-development-basics/extra_practice/_sidebar.md
new file mode 100644
index 0000000..ede63d2
--- /dev/null
+++ b/web-development-basics/extra_practice/_sidebar.md
@@ -0,0 +1,3 @@
+- [⬅ Back to Web Development Basics](../README.md)
+
+- [Page1](./Page1.md)
\ No newline at end of file
diff --git a/web-development-basics/functions/README.md b/web-development-basics/functions/README.md
new file mode 100644
index 0000000..b8151f4
--- /dev/null
+++ b/web-development-basics/functions/README.md
@@ -0,0 +1,40 @@
+# Intro
+
+# Functions
+
+
+
+A JavaScript function is a block of code designed to perform a particular task. A JavaScript function is executed when "something" invokes it (calls it).
+
+In this lesson we'll talk about the following:
+
+- Function syntax
+- Calling/invoking functions
+- Function parameters & arguments
+- Default parameters
+- Reference pitfalls
+- The `return` statement
+- Methods
+
+SYNTAX
+---
+
+A simple syntax to use functions is :
+
+
+```js
+const greet = function(){
+ console.log("Hello there")
+}
+```
+
+Generally, we will want our functions to be `const`s, because there is no reason for them to change.
+
+So as usual, we start by defining a variable with a name: `const greet` - here `greet`* is our `function` name.
+###### *Naming convention for functions dictates that **function names should be some sort of _action_, or a verb**. We'll see examples of this throughout the lesson.
+
+The way we invoke the function is by `()`, the moment we invoke it, the function is called
+
+```js
+ greet() //will print "Hello there"
+```
\ No newline at end of file
diff --git a/web-development-basics/functions_mini_lesson_optional/README.md b/web-development-basics/functions_mini_lesson_optional/README.md
new file mode 100644
index 0000000..3bd3e43
--- /dev/null
+++ b/web-development-basics/functions_mini_lesson_optional/README.md
@@ -0,0 +1,14 @@
+# More Functions
+
+# More Functions
+
+---
+
+
+**THIS IS OPTIONAL**
+
+Hello clever student. If you're here, you've finished working with functions and are looking **for an extra challenge** to dive deeper into functions - this lesson should **not** prevent you from moving on with the rest of the content.
+
+
+
+If, however, you're done with everything else and would like to challenge yourself - have fun 😁
\ No newline at end of file
diff --git a/web-development-basics/html-basics/README.md b/web-development-basics/html-basics/README.md
new file mode 100644
index 0000000..558b08d
--- /dev/null
+++ b/web-development-basics/html-basics/README.md
@@ -0,0 +1,56 @@
+# Intro
+
+# Intro
+
+This lesson is about HTML. In particular, we will:
+
+- Talk about the difference between HTML "nodes", "tags", and "elements".
+- Distinguish between "block" and "inline" elements.
+- Look at a few HTML attributes.
+- Look at some of the most common HTML tags.
+
+----------
+
+
+
+## Setup
+
+From your command line, create an index.html file, open it in your code editor (e.g VS Code, Notepad, PyCharm...), and add the following **boilerplate** to it:
+
+
+```html
+
+
+
+
+
+
+
+ Document
+
+
+
+
+
+
+
+```
+
+
+Test things out (a habit we need to form) by opening your **index.html** in your browser. Everything working as expected?
+
+----------
+
+
+
+## Reminder
+
+Remember, except for the **boilerplate** HTML - **any HTML you write must be in the** **body** **tag** - that is, between these two:
+
+```
+
+
+
+
+
+```
\ No newline at end of file
diff --git a/web-development-basics/javascript-basics/README.md b/web-development-basics/javascript-basics/README.md
new file mode 100644
index 0000000..00d802f
--- /dev/null
+++ b/web-development-basics/javascript-basics/README.md
@@ -0,0 +1,13 @@
+# Intro
+
+# Java Script Basics
+In This lesson we're going to cover the following basic concepts in JavaScript:
+
+
+- Variables
+- Identifiers
+- Operators
+- Conditional Statements
+- Arrays
+- Objects
+- Loops
\ No newline at end of file
diff --git a/web-development-basics/js-this/README.md b/web-development-basics/js-this/README.md
new file mode 100644
index 0000000..6c43df2
--- /dev/null
+++ b/web-development-basics/js-this/README.md
@@ -0,0 +1,44 @@
+# Intro
+
+# Java Script this
+
+Before we get into what `this` is in JS, let's refresh two concepts: Objects and Methods
+```js
+const person = {
+ username: "Felicia",
+ introduce: function(){
+ console.log("Hi, I'm Felicia")
+ }
+}
+
+person.introduce() //prints "Hi, I'm Felicia"
+```
+
+
+In the above, we've create an object with two properties: a `username`, which is a string, and `introduce`, which is a function. We call the latter a **method** because it's inside an object.
+
+
+
+Isn't it repetitive to have "Felicia" both in the `username` property, and inside the method's console log?
+
+
+
+But if we try something like this:
+
+```js
+const person = {
+ username: "Felicia",
+ introduce: function(){
+ console.log("Hi, I'm " + username)
+ }
+}
+
+person.introduce() //throws an error
+```
+
+
+We get an error because inside the `introduce` function, `username` does not exist! The "global"* scope of `username` doesn't apply in this context.
+
+###### *Not really global, but relative to the function it is
+
+To be able to reference/access an object's own properties from within its methods, we need `this`
\ No newline at end of file
diff --git a/web-development-basics/scope/README.md b/web-development-basics/scope/README.md
new file mode 100644
index 0000000..7dad9a6
--- /dev/null
+++ b/web-development-basics/scope/README.md
@@ -0,0 +1,61 @@
+# Intro
+
+# Scope
+
+When we talked about if statements, loops, and functions, we kept referencing this notion of a **code block**.
+
+
+
+Generally, anything between curly braces,
+```
+ {
+ this stuff
+ }
+```
+
+is said to be its own block, and therefore have its own **scope**.
+
+Scope refers to the **"visibility"** of a variable - i.e. which parts of the code can see and access the variable. Let's dive into this to see what we mean.
+
+## If
+
+Check out the following code:
+
+```js
+const bag = ["flashlight", "medicine"]
+const moreItems = ["tent", "water bottle", "knife", "rope"]
+
+if(bag.length < 3){
+ const nextItem = moreItems[0]
+ bag.push(nextItem)
+}
+
+console.log(bag)
+console.log("Added " + nextItem)
+```
+
+We expect the code above to push `"tent"` into `bag`, because the length of `bag` is 2 at first.
+
+Then we expect to see the new `bag` in the console, as well as `"Added tent"`, since that is what we added.
+
+
+
+When you run this code, you should see two logs:
+
+
+ ["flashlight", "medicine", "tent"]
+*Uncaught ReferenceError: nextItem is not defined
+
+
+
+So the code _does enter_ the if, and it _does push_ `nextItem` in the `bag` - and yet we get an error that says that `nextItem` is not defined.
+
+
+
+That is exactly **scope** in action.
+
+The variable `nextItem` is only defined within the _scope_ of the `if` - i.e. within the `if`'s curly braces.
+
+
+
+More generally, **any variable is only accessible in the scope in which it was defined**
\ No newline at end of file
diff --git a/web-development-basics/web-debugger-basics/README.md b/web-development-basics/web-debugger-basics/README.md
new file mode 100644
index 0000000..7a49bd7
--- /dev/null
+++ b/web-development-basics/web-debugger-basics/README.md
@@ -0,0 +1,12 @@
+# Overview
+
+# Web Debugger Basics: Overview
+
+A good craftsman knows his tools! In this lesson we’re going to learn how to use Chrome Developer Tools (aka DevTools). Specifically, we'll learn how to do the following with DevTools:
+
+- Change the style of our webpage
+- Interact with our JavaScript
+- View errors in our code
+- Debug our JavaScript
+
+DevTools was created for Chrome. Other browsers also have their own developer tools, there are even add-ons available, for example "Firebug" for Firefox, that give you even more cool features. Having said that, DevTools is pretty sweet so we'll just stick to working with that.
\ No newline at end of file
diff --git a/web-security---osi-model--python-backend-/-stay-logged-in--method/README.md b/web-security---osi-model--python-backend-/-stay-logged-in--method/README.md
new file mode 100644
index 0000000..459fe2a
--- /dev/null
+++ b/web-security---osi-model--python-backend-/-stay-logged-in--method/README.md
@@ -0,0 +1,8 @@
+# Intro
+
+After a user successfully authorizes themselves, they can access a single resource or page. But what if they want to access multiple pages? Or come back to the same page a few times over the next few days? Do they need to login each time? No they don’t. They just need to store the token on the client side.
+
+The next question we need to answer is where do we store? We have a few options, but really only one really makes sense.
+
+- **HTML5 Web Storage (localStorage or sessionStorage)**. We might be tempted to store the token in localstorage, but as you can imagine, this is not safe, as Web Storage (localStorage/sessionStorage) is accessible through JavaScript on the same domain. This means that any JavaScript running on your site will have access to web storage, and because of this can be vulnerable to cross-site scripting (XSS) attacks.
+- **Cookie**. The next usual suspect are the cookies, and cookies is the best option, and especially if used with the `HttpOnly` cookie flag, are not accessible through JavaScript, and are immune to XSS. You can also set the `Secure` cookie flag to guarantee the cookie is only sent over HTTPS
\ No newline at end of file
diff --git a/web-security---osi-model--python-backend-/README.md b/web-security---osi-model--python-backend-/README.md
new file mode 100644
index 0000000..947cb2f
--- /dev/null
+++ b/web-security---osi-model--python-backend-/README.md
@@ -0,0 +1,10 @@
+# Web Security Osi Model Python Backend
+
+- [ Stay Logged In Method](-stay-logged-in--method/README.md)
+- [Authorization Token](authorization-token/README.md)
+- [Basic Authentication With Fastapi](basic-authentication-with-fastapi/README.md)
+- [Https Under Sslslashtls](https-under-sslslashtls/README.md)
+- [Jwt Is The New Token](jwt-is-the-new-token/README.md)
+- [Password Hashing](password-hashing/README.md)
+- [The Dns Protocol](the-dns-protocol/README.md)
+- [The Osi Model](the-osi-model/README.md)
\ No newline at end of file
diff --git a/web-security---osi-model--python-backend-/authorization-token/README.md b/web-security---osi-model--python-backend-/authorization-token/README.md
new file mode 100644
index 0000000..7b60a50
--- /dev/null
+++ b/web-security---osi-model--python-backend-/authorization-token/README.md
@@ -0,0 +1,34 @@
+# Intro
+
+The basic authentication scheme learned before is, as its name suggests, basic, and exposes both the username and the hashed password to attackers in each API call. A more modern security flow, instead of the *username/password* pair, and more secure concept, is a secure token called *authorization token’. The authorization token is an encoded string that is generated by the server. The client then stores this token and uses it in each subsequent request to be able to execute the authorized endpoints.
+
+This token is referred to as the *Bearer token*, and is also known as *Bearer authentication* or *token authentication*, and has security tokens called bearer tokens. The name “Bearer authentication” can be understood as “give access to the bearer of this token.” The bearer token is a cryptic string, usually generated by the server in response to a login request. The client must send this token in the Authorization header when making requests to protected resources.
+
+### Bearer authentication flow
+Below is a simple flow of the Bearer authentication flow:
+1. Client sends *username* and *password* to the server
+1. Server creates a hashed token and sends it back to the client (the hashed token holds unique user information that allows the server to retrieve the relevant user)
+1. The client then requests an API endpoint and includes the token
+1. The server validates that the token is valid by decoding the token and retrieving the relevant user from the databases based on the ‘unique user information’ included in the token
+1. The server then checks if the user is authorized to access the endpoint
+1. If the server the the user is authorized, the endpoint returns the desired result with the 200 status code (successful)
+1. Otherwise, the server will return a 401 unauthorized error
+
+
+
+The main difference in this form of authorization is that the `Authorization` header contains a `Bearer` string and not a `Basic` string as in with the basic authentication.
+
+### Examples of Bearer and Basic authentication tokens.
+An example of a Bearer token is:
+```Python
+Authorization: Bearer $2a$12$CgpQ6EX4ukkKmTROa245OeplIB2kraEV6wuPJAM7G1gqX.Im.KBQC`
+```
+
+This tells the server that this is a token that includes multiple values that identifies a user and not just a ‘username’ and ‘password’ pair that exists in a Basic authentication scheme as follows:
+```Python
+Authorization: Basic $2a$12$CgpQ6EX4ukkKmTROa245OeplIB2kraEV6wuPJAM7G1gqX.Im.KBQC
+```
+
+If you’re using *Postman* to test your API endpoints, you need to select the `Bearer Token` from the *Type* field in the `Authorization` tab:
+
+
\ No newline at end of file
diff --git a/web-security---osi-model--python-backend-/basic-authentication-with-fastapi/README.md b/web-security---osi-model--python-backend-/basic-authentication-with-fastapi/README.md
new file mode 100644
index 0000000..f58d8ea
--- /dev/null
+++ b/web-security---osi-model--python-backend-/basic-authentication-with-fastapi/README.md
@@ -0,0 +1,6 @@
+# Comprehension Check
+
+{Check It!|assessment}(multiple-choice-3770161820)
+{Check It!|assessment}(multiple-choice-270365881)
+{Check It!|assessment}(multiple-choice-2019470503)
+{Check It!|assessment}(multiple-choice-2987915630)
\ No newline at end of file
diff --git a/web-security---osi-model--python-backend-/basic-authentication-with-fastapi/_sidebar.md b/web-security---osi-model--python-backend-/basic-authentication-with-fastapi/_sidebar.md
new file mode 100644
index 0000000..37d55f7
--- /dev/null
+++ b/web-security---osi-model--python-backend-/basic-authentication-with-fastapi/_sidebar.md
@@ -0,0 +1,11 @@
+- [⬅ Back to Web Security Osi Model Python Backend ](../README.md)
+
+- [Comprehension Check](./Comprehension-check.md)
+- [Creating A Simple Fastapi App](./Creating-a-simple-FastAPI-app.md)
+- [Dependencies Based Authentication](./Dependencies-based-authentication.md)
+- [Dependencies](./Dependencies.md)
+- [Exercises](./Exercises.md)
+- [Fastapi Testing Using Postman](./FastAPI-testing-using-Postman.md)
+- [Intro](./Intro.md)
+- [Middleware Based Authentication](./Middleware-based-authentication.md)
+- [Validating Credentials](./Validating-credentials.md)
\ No newline at end of file
diff --git a/web-security---osi-model--python-backend-/https-under-sslslashtls/README.md b/web-security---osi-model--python-backend-/https-under-sslslashtls/README.md
new file mode 100644
index 0000000..5e926a0
--- /dev/null
+++ b/web-security---osi-model--python-backend-/https-under-sslslashtls/README.md
@@ -0,0 +1,16 @@
+# Overview
+
+## HTTPS Protocol
+
+HTTPS (HyperText Transfer Protocol Secure) is an encrypted version of the HTTP protocol usually running on **port 443**. It uses SSL or TLS to encrypt all communication between a client and a server. This secure connection allows clients to safely exchange sensitive data with a server, such as when performing banking activities or online shopping. In today's modern HTTPS protocol, the communication protocol is encrypted using Transport Layer Security (TLS).
+
+To understand the need for HTTPS over TLS, let’s walk through a typical client-server banking scenario. When clients want to transfer money using the bank website, they form an HTTP request which essentially says "I'm Bob, want to transfer 500$ to Alice using the following credit card number....". If no security measures are taken, Bob could be have a few surprises.
+
+- If no **encryption** is used, an intruder (man-in-the-middle) could intercept Bob’s request and use Bob's credit card details.
+- If no **data integrity** is used, an intruder could modify Bob’s transaction (e.g. change "Alice" to "Eve").
+- Finally, if no **server authentication** is used, a server could display the bank famous logo, when actually the site maintained by Eve, an intruder who is impersonating as the bank website. After receiving Bob’s transaction, Eve could take Bob’s information and run away.
+
+
+## TLS
+
+The primary goal of the TLS protocol is to provide **privacy (encryption)**, **data integrity** and **authenticity** between two communicating applications. Once the client and server have agreed to use TLS, they negotiate a stateful connection by using the so-called *handshaking* procedure.
\ No newline at end of file
diff --git a/web-security---osi-model--python-backend-/jwt-is-the-new-token/README.md b/web-security---osi-model--python-backend-/jwt-is-the-new-token/README.md
new file mode 100644
index 0000000..812416f
--- /dev/null
+++ b/web-security---osi-model--python-backend-/jwt-is-the-new-token/README.md
@@ -0,0 +1,8 @@
+# Intro
+
+JSON Web Token (JWT) is an open standard that defines a compact and self-contained way for securely transmitting information between parties as a JSON object. This information can be verified and trusted because it is digitally signed.
+
+JWT is a token authentication scheme using the `Authentication: Bearer {token}` syntax.
+
+Below is a schematic flow of the client-server JWT communications.
+
\ No newline at end of file
diff --git a/web-security---osi-model--python-backend-/password-hashing/README.md b/web-security---osi-model--python-backend-/password-hashing/README.md
new file mode 100644
index 0000000..91c667f
--- /dev/null
+++ b/web-security---osi-model--python-backend-/password-hashing/README.md
@@ -0,0 +1,13 @@
+# Intro
+
+Storing raw passwords is super dangerous. In case our db is compromised for whatsoever reason. All our user's passwords will be available to the hacker without any effort. To tackle this scenario we make use of password hashing.
+
+In very simple words, It is a one-way algorithm to convert passwords to a string that looks like gibberish e.g. If your password is "HelloWorld" it would become `$2y$12$kbQm9Vb96023efZFhSkZf.a4bAGyzDW6zKC/K1JDtKY0f.gKZxAHO` with 12 cryptographic iterations.
+
+
+
+The wonderful thing about hashing is that we do not de-hash but we compare hashes to see if the password entered is the same as that of the existing password.
+
+In this lesson we will learn:
+- How to hash passwords
+- How to integrate password hashing into your FastAPI security scheme
\ No newline at end of file
diff --git a/web-security---osi-model--python-backend-/the-dns-protocol/README.md b/web-security---osi-model--python-backend-/the-dns-protocol/README.md
new file mode 100644
index 0000000..661c366
--- /dev/null
+++ b/web-security---osi-model--python-backend-/the-dns-protocol/README.md
@@ -0,0 +1,19 @@
+# Overview
+
+All computers on the internet, from smart phones to the servers that serve massive amount of content, communicate with each other by using IP addresess.
+
+When you open a browser and go to a website, you don't have to remember and enter the server IP address. Instead, you can enter a domain name like example.com and still end up in the right place. The DNS service helps to make that connection between domain names and IP addresses.
+
+The DNS is an application-layer protocol that allows a given hosts (clients) to query a complex distributed database system in order to resolve a domain (e.g. www.google.com) to the IP address (e.g. 142.250.201.14).
+
+Suppose a user wants to visit www.google.com. The web browser needs to translate the google.com hostname to an IP address. The browser will invoke the client side of DNS, which send a query message into the network. All DNS query and reply messages are sent over **UDP** on **port 53**. After a delay ranging from milliseconds to seconds, DNS in the user’s host receives a DNS reply message that provides the desired hostname -> IP address mapping.
+
+
+|||definition
+## Why UDP?
+
+
+DNS utilizes the low overhead of UDP to resolve hostname as fast as possible. UDP, as a *connectionless* protocol, is **much faster** than TCP which requires the handshake before sides can communicate. DNS queries are usually not more than 512 bytes and can be delivered within a **single packet**, so no order control is required. If packet is getting lost, DNS just try again! DNS implements a simple logic to check data integrity itself (instead of relying on that of TCP).
+
+Note that DNS **may** use TCP for large size queries.
+|||
\ No newline at end of file
diff --git a/web-security---osi-model--python-backend-/the-osi-model/README.md b/web-security---osi-model--python-backend-/the-osi-model/README.md
new file mode 100644
index 0000000..c9be47c
--- /dev/null
+++ b/web-security---osi-model--python-backend-/the-osi-model/README.md
@@ -0,0 +1,51 @@
+# The OSI Model
+
+# Layered Architecture
+
+The Public Internet is an *extremely* complicated system. This chapter introduces the OSI layer model to help you understand what happen to a piece of data while it is being transferred between two hosts over the Internet.
+
+
+In order to get data over a given network, lots of different hard- and software components needs to work together. **Network Protocol** is a set of rules for those components to communicate with each other. To provide structure to the design of network protocols, network designers organize protocols — and the network hardware and software that implement the protocols - in **layers**.
+
+All these different types of communication protocols are classified in 7 layers, which are known as the **Open Systems Interconnection Reference Model**, the OSI Model for short. For easy understanding, this model is reduced to a 4-layer protocol description, as described in the table below:
+
+| Layer Name | Protocol used in this layer |
+|---------|----------|
+| Application Layer | HTTP, DNS, SMTP, SSH |
+| Transport Layer | TCP, UDP |
+| Network Layer | IP, ICMP |
+| Link and Physical Layer | Ethernet |
+
+Each layer can only use the functionality of the layer below, each layer can only export functionality to the layer above.
+
+We will review the 4 layers by an example, from top to bottom.
+What happen when you open your web browser and type http://www.google.com? We will try to examine it in the prism of the OSI model.
+
+**Application Layer**
+The browser uses HTTP protocol to form a request to Google's servers, to serve Google home page. The HTTP request message may look like:
+```
+GET / HTTP/1.1
+Host: google.com
+User-Agent: Mozilla/5.0
+```
+
+We literally want to transfer this text to Google's servers over the Internet, their server already knows how to response to this to kind of messages.
+Since the web browser is an application that uses the network, it resides in the application-layer.
+
+The application layer is where network applications and their application-layer protocols reside. Network applications may be Web browsers, mails, WhatsUp, and every application that send or receive data over the Internet.
+
+
+**Transport Layer**
+Continuing the above example, the HTTP text message is transferred to another software in the user operation system. This software can transport application-layer messages using TCP protocol. TCP breaks long messages into shorter **segments**, it guarantees that the data was indeed delivered to the destination and controls the order in which segments are being passed. Note that TCP only controls **how** the data is being sent and received, but it does not responsible for the actual sending of the data.
+
+The transport layer controls the transportation of application-layer messages between application endpoints.
+
+**Network Layer**
+The IP protocol is responsible for moving the TCP segments from one host to another. Just as you would give the postal service a letter with a destination address, IP protocol sends piece of data (a.k.a **packets**) to address (a.k.a **IP addresses**). It does so by communicating with a computer network devices (either physical or virtual) over a **Network Interfaces**.
+
+The network layer routes packets through a series of routers between the source and destination hosts.
+
+**Link and Physical Layers**
+To move a packet from one **node** (host or router) to the next node in the route, the network layer relies on the services of the link and physical layers. In particular, at each node, the network layer passes the packet down to the link layer, which is a physical device (for example, Ethernet or WiFi interface cards). The network device delivers the packet to the next node along the route. This can be achieved over a wired or wireless electrical equipment.
+
+
\ No newline at end of file
Not enough money, get a job!
`)
+ }
+ })
+
+
+ $("#buy-furniture").val("")
+ })
+```
+
+## Extension 2
+```
+let currentChairPrice
+
+
+ setInterval(function() {
+ $.get(`/priceCheck/chair`, function(priceObj) {
+ if(!currentChairPrice) {
+ currentChairPrice = priceObj.price
+ console.log("set current price")
+ } else if(priceObj.price < currentChairPrice) {
+ $.get('/buy/chair', function(response) {
+ console.log("bought chair for less")
+ currentChairPrice = priceObj.price
+ })
+ } else {
+ console.log("Still waiting for price drop.")
+ }
+ })
+
+
+ }, 3000)
+```
\ No newline at end of file
diff --git a/solutions/functions---solutions/README.md b/solutions/functions---solutions/README.md
new file mode 100644
index 0000000..602dad5
--- /dev/null
+++ b/solutions/functions---solutions/README.md
@@ -0,0 +1,80 @@
+# Solutions
+
+Exercise 1
+-
+```js
+const isEven = function(number) {
+ return (number % 2) === 0
+}
+
+const evenOrOdd = isEven(21)
+console.log(evenOrOdd)
+```
+Exercise 2
+-
+```js
+const printOdds = function (numbers) {
+ for(let number of numbers) {
+ if(!isEven(number)) {
+ console.log(number)
+ }
+ }
+}
+
+const numbers = [17, 81, 98, 99, 70, 20, 18, 9, 20, 12, 31, 33]
+
+printOdds(numbers)
+```
+Exercise 3
+-
+```js
+const checkExists = function (ints, num) {
+ for(let number of ints) {
+ if(number === num) {
+ return true
+ }
+ }
+ return false
+}
+
+const numbers = [17, 81, 98, 99, 70, 20, 18, 9, 20, 12, 31, 33]
+
+console.log(checkExists(numbers, 99))
+```
+Exercise 4
+-
+```js
+const calculator = {
+ add: function (a, b) {
+ return a + b
+ },
+ subtract: function(a, b) {
+ return a - b
+ }
+}
+
+const result1 = calculator.add(20, 1)
+const result2 = calculator.subtract(30, 9)
+
+console.log(calculator.add(result1, result2))
+```
+Exercise 5
+-
+```js
+const makeRegal = function(name) {
+ return "His Royal Highness, " + name
+}
+
+const increaseByNameLength = function(money, name) {
+ return name.length * money
+}
+
+const turnToKing = function(name, money){
+ name = name.toUpperCase()
+ money = increaseByNameLength(money, name)
+ name = makeRegal(name)
+ console.log(name + " has " + money + " gold coins")
+}
+
+turnToKing("martin luther", 100)
+```
\ No newline at end of file
diff --git a/solutions/html-basics---solutions/README.md b/solutions/html-basics---solutions/README.md
new file mode 100644
index 0000000..b771a0a
--- /dev/null
+++ b/solutions/html-basics---solutions/README.md
@@ -0,0 +1,39 @@
+# Solutions
+
+## Exercise 1
+
+```
+
+
+
+
+-
+
- dog +
- Cat +
+ One Love!
+ Elevation
+
+My first website
+My dogs
+ + + +
+ YOUR INFO
+
+```
\ No newline at end of file
diff --git a/solutions/intro-to-json---solutions/README.md b/solutions/intro-to-json---solutions/README.md
new file mode 100644
index 0000000..606cb04
--- /dev/null
+++ b/solutions/intro-to-json---solutions/README.md
@@ -0,0 +1,99 @@
+# Solutions
+
+## Exercise 1
+The solution is in exercise 2
+
+## Exercise 2
+```
+let recipe = {
+ "name": "Mashed Potatoes",
+ "serves": 4,
+ "ingredients": [
+ {
+ "name": "water"
+ },
+ {
+ "name": "potatoes",
+ "count": 2
+ },
+ {
+ "name": "butter",
+ "count": 2,
+ "unit": "tablespoons"
+ },
+ {
+ "name": "salt",
+ "count": 0.5,
+ "unit": "teaspoon"
+ },
+ {
+ "name": "pepper",
+ "count": 0.25,
+ "unit": "teaspoons"
+ },
+ {
+ "name": "garlic powder",
+ "count": "2",
+ "unit": "teaspoons"
+ }
+ ],
+ "directions": [
+ "Cut potatoes into half inch thick slices",
+ "Add potatoes to a pot and cover with an inch of water.",
+ "Bring the water to a boil over high heat, then reduce to a simmer and cover.",
+ "Simmer for 20 minutes or until potatoes are fork tender.",
+ "Drain water from potatoes, leaving the potatoes in the original pot.",
+ "Add remaining ingredients to the pot with the potatoes.",
+ "Mash potatoes until they reach the desired consistency.",
+ "Serve immediately, or cover and refrigerate."
+ ],
+ "calories": "250",
+ "healthy": "true"
+ }
+```
+
+## Exercise 3
+The solution is in exercise 4
+
+## Exercise 4
+```
+{
+ "name": "gray wolf",
+ "weight": {
+ "count": "37",
+ "unit": "kilograms"
+ },
+ "habitat": "Eurasia",
+ "endangered": true,
+ "diet": [
+ {
+ "food type": "deer",
+ "percentage of diet": "80"
+ },
+ {
+ "food type": "elk",
+ "percentage of diet": "10"
+ },
+ {
+ "food type": "moose",
+ "percentage of diet": "5"
+ },
+ {
+ "food type": "livestock",
+ "percentage of diet": "2"
+ },
+ {
+ "food type": "carrion",
+ "percentage of diet": "2"
+ },
+ {
+ "food type": "garbage",
+ "percentage of diet": "1"
+ }
+ ],
+ "eaten by": [
+ "grizzly"
+ ],
+ "how delicious": 2
+ }
+```
\ No newline at end of file
diff --git a/solutions/javascript-basics---solutions/README.md b/solutions/javascript-basics---solutions/README.md
new file mode 100644
index 0000000..1d150eb
--- /dev/null
+++ b/solutions/javascript-basics---solutions/README.md
@@ -0,0 +1,14 @@
+# Arrays
+
+Exercise 1
+-
+```js
+const numbers = [1,2,3,4,5,6,7,8,9,10]
+
+numbers.splice(1,2)
+numbers[3] = 1
+numbers.splice(numbers.length - 4)
+numbers.unshift(0)
+// or: numbers.splice(0,0,0)
+console.log(numbers)
+```
\ No newline at end of file
diff --git a/solutions/javascript-basics---solutions/_sidebar.md b/solutions/javascript-basics---solutions/_sidebar.md
new file mode 100644
index 0000000..cd1c43d
--- /dev/null
+++ b/solutions/javascript-basics---solutions/_sidebar.md
@@ -0,0 +1,7 @@
+- [⬅ Back to Solutions](../README.md)
+
+- [Arrays](./Arrays.md)
+- [Conditional Statements](./Conditional-Statements.md)
+- [Loops](./Loops.md)
+- [Objects](./Objects.md)
+- [Variables Identifiers And Operators](./Variables--Identifiers-and-Operators.md)
\ No newline at end of file
diff --git a/solutions/jquery---solutions/README.md b/solutions/jquery---solutions/README.md
new file mode 100644
index 0000000..d9d74c0
--- /dev/null
+++ b/solutions/jquery---solutions/README.md
@@ -0,0 +1,119 @@
+# Solutions
+
+## Exercise 1
+```
+$("button").on("click", function () {
+ $("#human-list").append(`
+ Name:
+
+
+ Wish:
+
+
+ Birthday:
+
+
+
+
+${$(this).text()}
`)
+ }
+ }) */
+```
+
+## Exercise 5
+```
+const fruits = [
+ { name: "Orange", color: "orange" },
+ { name: "Banana", color: "yellow" },
+ { name: "Coconut", color: "brown" },
+ { name: "Kiwi", color: "brown" },
+ { name: "Lemon", color: "yellow" },
+ { name: "Cucumber", color: "green" },
+ { name: "Persimmon", color: "orange" },
+ { name: "Pumpkin", color: "orange" }
+ ]
+
+ for(let fruit of fruits) {
+ $("#basket").append(`${fruit.name}
`)
+ }
+```
+
+## Extensions - Color Picker
+```
+let $spans = $("span")
+
+ for(let $span of $spans) {
+ console.log($span)
+ $($span).addClass("picker")
+ $($span).css("background-color", $($span).data().color)
+
+ $($span).on("click", function () {
+ const color = $($span).data().color
+ $(".box").css("background-color", color)
+ })
+ }
+```
+
+## Extensions - Cart
+```
+let melonCounter = 1
+ let shoeCounter = 1
+
+
+ $(".item").click(function () {
+
+
+ if ($(this).data().instock) {
+
+
+ if ($(this).text() === "Shoe") {
+
+
+ if (shoeCounter === 1) {
+ $("#cart").append(`${$(this).text()}
`)
+ shoeCounter++
+ } else {
+ $(".shoe").remove()
+ $("#cart").append(`${$(this).text()} x${shoeCounter}
`)
+ shoeCounter++
+ }
+
+
+ } else if ($(this).text() === "Melon") {
+ if (melonCounter === 1) {
+ $("#cart").append(`${$(this).text()}
`)
+ melonCounter++
+ } else {
+ $(".melon").remove()
+ $("#cart").append(`${$(this).text()} x${melonCounter}
`)
+ melonCounter++
+ }
+ }
+
+
+ }
+ })
+
+
+ $("#cart").on("click", ".cart-item", function () {
+ $(this).remove()
+ })
+```
\ No newline at end of file
diff --git a/solutions/js-this---solutions/README.md b/solutions/js-this---solutions/README.md
new file mode 100644
index 0000000..5f2317e
--- /dev/null
+++ b/solutions/js-this---solutions/README.md
@@ -0,0 +1,203 @@
+# Solutions
+
+Exercise 1
+-
+```js
+const person = {
+ hungry: true,
+
+ feed: function () {
+ if (this.hungry) {
+ this.hungry = false;
+ alert('Im no longer hungry!')
+ }
+ }
+ }
+
+ person.feed() //should alert "I'm no longer hungry"
+```
+Exercise 2
+-
+```js
+ const pump = function (amount) {
+ this.liters += amount;
+ console.log('You put ' + amount + ' liters in ' + this.name);
+ };
+
+ const garage = {
+ car1: {
+ name: 'Audi',
+ liters: 3,
+ fillTank: pump
+ },
+ car2: {
+ name: 'Mercedes',
+ liters: 1,
+ fillTank: pump
+ }
+ };
+
+ garage.car1.fillTank(2);
+ console.log('Audi should have 5 liters: ', garage.car1.liters);
+
+ garage.car2.fillTank(30);
+ console.log('Mercedes should have 31 liters: ', garage.car2.liters);
+```
+Exercise 3
+-
+```js
+ const pumpFuel = function (plane) {
+ plane.fuel += 1;
+ };
+
+ const airplane = {
+ fly: function () {
+ if (this.fuel < 2) { // #1 - add "this" to "fuel"
+ return 'on the ground!';
+ }
+ else {
+ return 'flying!';
+ }
+ },
+ fuel: 0 // #2 - add a "fuel" property with value of 0
+ };
+
+ console.log('The plane should not be able to fly (yet): ' + airplane.fly());
+
+ pumpFuel(airplane);
+ console.log('The plane should STILL not be able to fly: ' + airplane.fly());
+
+ pumpFuel(airplane);
+ console.log('Take off! ' + airplane.fly());
+```
+Exercise 4
+-
+```js
+ const tipJar = {
+ coinCount: 20,
+ tip: function () {
+ this.coinCount += 1;
+ },
+ stealCoins: function (amount) {
+ this.coinCount -= amount
+ }
+ };
+
+ tipJar.tip();
+ console.log('Tip jar should have 21 coins: ' + tipJar.coinCount);
+
+ tipJar.stealCoins(3);
+ console.log('Tip jar should have 18 coins: ' + tipJar.coinCount);
+
+ tipJar.stealCoins(10);
+ console.log('Tip jar should have 8 coins: ' + tipJar.coinCount);
+```
+Exercise 5
+-
+```js
+ const revealSecret = function () {
+ return this.secret;
+ };
+
+ const shoutIt = function (person, func) {
+ person.revealItAll = func;
+ const result = person.revealItAll();
+ alert(person.name + " said: " + result);
+ };
+
+ const avi = {
+ name: "Avi",
+ secret: "Im scared of snakes!"
+ };
+
+ const narkis = {
+ name: "Narkis",
+ secret: "I dont have secrets because I'm zen like that."
+ };
+
+ shoutIt(avi, revealSecret);
+ shoutIt(narkis, revealSecret);
+```
+Exercise 6
+-
+```js
+const coffeeShop = {
+ beans: 40,
+
+
+ money: 15,
+
+ drinkRequirements: {
+ latte: {beanRequirement: 10, price: 10},
+ americano: {beanRequirement: 5, price: 5},
+ doubleShot: {beanRequirement: 15, price: 15},
+ frenchPress: {beanRequirement: 12, price: 12}
+ },
+
+
+ buyBeans: function(numBeans) {
+
+
+ this.beans += numBeans
+ this.money -= numBeans * 0.5
+
+ },
+
+
+ hasDrink: function(drinkType) {
+ let drinks = Object.keys(this.drinkRequirements)
+
+ for(let drink of drinks) {
+ if(drink === drinkType){
+ return true
+ }
+ }
+
+
+ return false
+ },
+
+
+ hasEnoughBeans: function(drinkType) {
+ if(this.beans > this.drinkRequirements[drinkType].beanRequirement) {
+ return true
+ } else {
+ return false
+ }
+ },
+
+
+ useBeans: function(drinkType) {
+ this.beans -= this.drinkRequirements[drinkType].beanRequirement
+ },
+
+ makeDrink: function (drinkType) {
+
+ /* Because of the exercise extension we already don't need the first if here because we need
+ to check if the drink exists as to not get an error
+ if(!this.hasDrink(drinkType)) {
+ alert("Sorry, we don't make " + drinkType)
+ } else */ if(!this.hasEnoughBeans(drinkType)) {
+ //can also use the buy beans function
+ /*
+ this.buyBeans(this.drinkRequirements[drinkType].beanRequirement)
+ */
+ alert("Sorry we're all out of beans!")
+ } else {
+ this.useBeans(drinkType)
+ }
+
+
+ },
+
+
+ buyDrink: function(drinkType) {
+ if(this.hasDrink(drinkType)){
+ this.money += this.drinkRequirements[drinkType].price
+ this.makeDrink(drinkType)
+ } else {
+ alert("Sorry, we don't make " + drinkType)
+ }
+ }
+ }
+```
\ No newline at end of file
diff --git a/solutions/local-storage---solutions/README.md b/solutions/local-storage---solutions/README.md
new file mode 100644
index 0000000..a549498
--- /dev/null
+++ b/solutions/local-storage---solutions/README.md
@@ -0,0 +1,93 @@
+# Solutions
+
+## Exercises
+html:
+```
+
+
+
+
+
+
+
+
+```
+JS
+```
+let wisdom = []
+ let input
+ // let texts = localStorage.wisdom || []
+
+
+ let texts = JSON.parse(localStorage.wisdom || "[]")
+
+
+
+
+ if (texts) {
+ for (let a of texts) {
+ $("#info").append(`${a.text}
`)
+ }
+ }
+
+
+ let isInside
+ let p
+ $("#app").on("click", function () {
+ $("#info").empty()
+ input = $("input").val()
+ $("#info").append(`${input}
`)
+ wisdom.push({ "text": input })
+ $("input").val("")
+
+
+ if (!(wisdom.length % 2)) {
+ if (localStorage.wisdom) {
+ p = JSON.parse(localStorage.wisdom)
+ for (let i in wisdom) {
+ isInside = false
+ for (let j in p) {
+ if (p[j].text === wisdom[i].text) {
+ isInside = true
+ }
+ }
+ if(!isInside){
+ p.push(wisdom[i])
+ }
+ }
+ localStorage.wisdom = JSON.stringify(p)
+ } else {
+ localStorage.wisdom = JSON.stringify(wisdom)
+ }
+
+
+ }
+ })
+
+
+ $("#ls-clear").on("click", function() {
+ localStorage.removeItem("wisdom")
+ $("#info").empty()
+ })
+
+
+ $("#info").on("click", ".delete", function() {
+ $(this).closest(".line-delete").remove()
+
+
+ let id = $(this).closest(".line-delete").data().id
+
+
+ let storage = JSON.parse(localStorage.wisdom)
+
+
+ for(let i in storage) {
+ if(storage[i].text == id){
+ storage.splice(i, 1)
+ }
+ }
+
+
+ localStorage.wisdom = JSON.stringify(storage)
+ })
+```
\ No newline at end of file
diff --git a/solutions/matrices---solutions/README.md b/solutions/matrices---solutions/README.md
new file mode 100644
index 0000000..b79f7ef
--- /dev/null
+++ b/solutions/matrices---solutions/README.md
@@ -0,0 +1,195 @@
+# Solutions
+
+## Exercise 1
+
+```
+constructor(row, col) {
+ this.matrix = this.generateMatrix(row, col)
+}
+print() {
+ console.log(this.matrix)
+}
+get(x, y) {
+ return this.matrix[x][y]
+}
+alter(row, col, newNumber) {
+ this.matrix[row][col] = newNumber
+}
+printColumn(x) {
+ this.matrix.forEach(row => console.log(row[x]))
+}
+printRow(y) {
+ for (let i = 0; i < this.matrix[y].length; i++) {
+ console.log(this.matrix[y][i])
+ }
+}
+```
+
+## Exercise 2
+
+```
+findCoordinate(number) {
+ for (let i = 0; i < this.matrix.length; i++) {
+ for (let j = 0; j < this.matrix[i].length; j++) {
+ if (this.matrix[i][j] === number) {
+ return({ x: j, y: i })
+ }
+ }
+ }
+}
+```
+
+## Exercise 3
+
+```
+ loadData(salaryData) {
+ this.matrix = []
+ salaryData.forEach(object => this.matrix.push((Object.values(object))))
+}
+```
+
+## Exercise 4
+
+```
+ getEmployees(department) {
+ return this.matrix.filter(row => row[2] === department)
+ .map(row => row[1])
+}
+```
+
+## Exercise 5
+
+```
+ getTotalSalary(department) {
+ let sum = 0
+ this.matrix.filter(row => row[2] === department)
+ .forEach(row => sum += row[3])
+ return sum
+}
+```
+
+## Exercise 6
+
+```
+ findRichest() {
+
+ let highestSalary = 0
+ let name = ''
+
+
+ for (let i = 0; i < this.matrix.length; i++) {
+ if (this.matrix[i][3] > highestSalary) {
+ name = this.matrix[i][1]
+ highestSalary = this.matrix[i][3]
+ }
+ }
+
+
+ return name
+}
+```
+
+## Exercise 7
+
+```
+class TicTacToe extends Matrix {
+ constructor() {
+ super()
+ }
+
+
+ loadBoard() {
+ for (let i = 0; i < 3; i++) {
+ this.matrix[i] = []
+ for (let j = 0; j < 3; j++) {
+ this.matrix[i].push('.')
+ }
+ }
+ }
+}
+```
+
+## Exercise 8
+
+```
+play(rowNum, columnNum, player) {
+ player === 1 ? this.alter(rowNum, columnNum, 'x') : this.alter(rowNum, columnNum, 'o')
+}
+```
+
+## Exercise 9
+
+```
+getColumn(colNum) {
+ let str = ''
+
+
+ for (let i = 0; i < this.matrix.length; i++) {
+ str += this.matrix[i][colNum]
+ }
+
+
+ return str
+ }
+
+
+
+
+ gettRow(rowNum) {
+ let str = ''
+
+
+ for (let i = 0; i < this.matrix[rowNum].length; i++) {
+ str += this.matrix[rowNum][i]
+ }
+
+
+ return str
+ }
+
+
+ play(rowNum, columnNum, player) {
+ player === 1 ? this.alter(rowNum, columnNum, 'x') : this.alter(rowNum, columnNum, 'o')
+ this._checkThreeInARow() ? console.log(`Congratulations player ${player}`) : null
+ }
+
+
+ _checkThreeInARow() {
+ let strs = []
+ for (let i = 0; i < 3; i++) {
+ strs.push(this.getColumn(i))
+ }
+
+
+ for (let i = 0; i < 3; i++) {
+ strs.push(this.gettRow(i))
+ }
+
+
+ let middle1 = ''
+ for (let i = 0; i < 3; i++) {
+ middle1 += this.matrix[i][i]
+ }
+
+
+ let middle2 = ''
+ for(let i = 2; i >= 0; i--) {
+ middle2 += this.matrix[i][i]
+ }
+
+
+
+
+
+
+ for(let str of strs) {
+ if((str === 'xxx') || (str === 'ooo')) {
+ return true
+ }
+ }
+
+
+ return false
+ }
+}
+```
\ No newline at end of file
diff --git a/solutions/mobx-1---solutions/README.md b/solutions/mobx-1---solutions/README.md
new file mode 100644
index 0000000..8c3b3b4
--- /dev/null
+++ b/solutions/mobx-1---solutions/README.md
@@ -0,0 +1,153 @@
+# Solutions
+
+## Exercise 1
+
+```
+addItem = (name) => {
+ const item = new Item(name)
+ this.list.push(item)
+}
+```
+
+Your constructor should now look like this:
+```
+constructor() {
+ this.list = []
+ this.length
+
+ makeObservable(this, {
+ list: observable,
+ length: observable,
+ checkItem: action,
+ addItem: action
+ })
+}
+```
+
+## Exercise 2
+
+```
+export class Item {
+ constructor(name) {
+ this.name = name
+ this.completed = falsethis.location = "Super Sell"
+
+ makeObservable(this, {
+ name: observable,
+ completed: observable,
+ location: observable
+ })
+ }
+}
+```
+
+```
+class Item extends Component {
+
+ checkItem = (e) => {
+ this.props.store.checkItem(e.target.value)
+ }
+ render() {
+ let item = this.props.item
+ return (
+
+
+ {item.name}, {item.location}
+
+ )
+ }
+}
+```
+
+## Exercise 3
+
+```
+class Item extends Component {
+
+ editItem = () => {
+ const newLocation = prompt("Please enter a new location")
+ this.props.store.editItem(this.props.item.name, newLocation)
+ }
+
+ render() {
+ let item = this.props.item
+ return (
+
+
+ {item.name}, {item.location}
+
+
+ )
+ }
+}
+```
+
+```
+export class ShoppingList {
+ constructor(){
+ //...
+ makeObservable(this, {
+ list: observable,
+ length: observable,
+ checkItem: action,
+ addItem: action,
+ editItem: action
+ })
+ }
+
+ editItem = (itemName, newLocation) => {
+ const item = this.list.find(l => l.name === itemName)
+ item.location = newLocation
+ }
+}
+```
+
+
+## Exercise 4
+
+```
+export class ShoppingList {
+ constructor() {
+ //...
+ makeObservable(this, {
+ list: observable,
+ length: observable,
+ checkItem: action,
+ addItem: action,
+ editItem: action,
+ deleteItem: action
+ })
+ }
+
+ deleteItem = (itemName) => {
+ const index = this.list.findIndex(l => l.name === itemName)
+ this.list.splice(index, 1)
+ }
+}
+
+class Item extends Component {
+ render() {
+ let item = this.props.item
+ return (
+
+
+ {item.name}, {item.location}
+
+
+
+ )
+ }
+}
+```
\ No newline at end of file
diff --git a/solutions/mobx-2---solutions/README.md b/solutions/mobx-2---solutions/README.md
new file mode 100644
index 0000000..f8c9842
--- /dev/null
+++ b/solutions/mobx-2---solutions/README.md
@@ -0,0 +1,137 @@
+# Solutions
+
+## Exercise 1
+
+```
+ get restPopulation() {
+ let totalPeople = 0
+ this.reservations.forEach(r => {
+ if(!r.completed && r.seated) {
+ totalPeople += parseInt(r.numPeople)
+ }
+ })
+ return totalPeople
+ }
+ get completedTables() {
+ let totalTables = 0
+ this.reservations.forEach(r => r.completed ? totalTables+= 1 : null)
+ return totalTables
+ }
+ addRes = (name, numPeople) => {
+ this.reservations.push(new Reservation(name, numPeople))
+ }
+ completeRes = (id) => {
+ this.reservations.find(r => r.id === id).completed = true
+ }
+
+```
+
+
+## Exercise 2
+
+```
+export class RestaurantStore {
+
+ get totalReservations() { //automatically calculates the total reservationsreturn this.reservations.length
+ }
+ get openTables() { //automatically caluclates the number of tables avalible, only when the state is affectedlet counter = 0this.reservations.forEach(r => r.seated ? counter ++: null)return (this.numTables - counter)
+ }
+ get restPopulation() {
+ let totalPeople = 0this.reservations.forEach(r => {
+ if(!r.completed && r.seated) {
+ totalPeople += parseInt(r.numPeople)
+ }
+ })
+ return totalPeople
+ }
+
+
+ get completedTables() {
+ let counter = 0this.reservations.forEach(r => r.completed ? counter ++: null)
+ return counter
+
+
+ }
+ addRes = (name, numPeople) => {
+ this.reservations.push(new Reservation(name, numPeople))
+ }
+ seatRes = (id) => {
+ const reservation = this.reservations.find(r => r.id === id)
+ reservation.seated = true
+ }
+ completeRes = (id) => {
+ const reservation = this.reservations.find(r => r.id === id)
+ reservation.completed = true
+ }
+}
+```
+
+```
+class Restaurant extends Component{
+ addRes = () => {
+ let name = this.props.GeneralStore.name
+ let num = this.props.GeneralStore.numPeople
+ this.props.RestaurantStore.addRes(name, num)
+ }
+ render () {
+ return (
+ You have {this.props.RestaurantStore.openTables} open tables
+ )
+ }
+}
+```
+
+```
+class Reservation extends Component {
+ completeRes = (e) => {
+ this.props.RestaurantStore.completeRes(e.target.id)
+ }
+
+
+ seatRes = (e) => {
+ this.props.RestaurantStore.seatRes(e.target.id)
+ }
+ render() {
+ let res = this.props.res
+ return (
+ There are {this.props.RestaurantStore.restPopulation} people in the restaurant
{this.props.RestaurantStore.completedTables} tables have been served today
+ {this.props.RestaurantStore.reservations.map((r, i) => )}
+
+ {res.name} : {res.numPeople}
+
+
+
+ )
+ }
+}
+```
+
+
+## Exercise 3
+
+```
+render() {
+ let res = this.props.res
+ return (
+
+ {res.name} : {res.numPeople}
+
+
+
+ )
+}
+```
\ No newline at end of file
diff --git a/solutions/mongo-db-intro---solutions/README.md b/solutions/mongo-db-intro---solutions/README.md
new file mode 100644
index 0000000..e103f66
--- /dev/null
+++ b/solutions/mongo-db-intro---solutions/README.md
@@ -0,0 +1,43 @@
+# Solutions
+
+## Exercise 1
+```
+db.linkedon.count({salary: {$gt: 25000}})
+```
+
+## Exercise 2
+```
+db.linkedon.find({}, {firstName: 1, salary: 1, _id: 0}).sort({salary: -1}).limit(3)
+```
+
+## Exercise 3
+```
+db.linkedon.count({$and: [{salary: {$gte: 7000}}, {"currentCompany.name": "Walmart"}]})
+```
+
+## Exercise 4
+```
+db.linkedon.find({$or: [{"currentCompany.industry": "Sales"}, {"currentCompany.industry": "Retail"}]}, {firstName: 1, lastName: 1, "currentCompany.name": 1, salary: 1, _id: 0}).sort({salary: -1}).limit(1)
+```
+
+## Exercise 5
+```
+db.linkedon.count({$or: [{"currentCompany.name": "Apple"}, {previousCompanies: {$elemMatch: {name: "Apple"}}}]})
+```
+
+## Extension 1
+```
+db.linkedon.aggregate([{$match: {"currentCompany.name": "Apple"}},{$group: {_id: "$currentCompany.industry", count: {$sum: 1}}}])
+
+```
+
+## Extension 2
+```
+db.linkedon.aggregate([{$match: {currentPosition: "Analyst"}},{$group: {_id: "$currentCompany.name", averageSalary: {$avg: "$salary"}}}])
+```
+
+## Extension 3
+```
+db.linkedon.aggregate([{$match: {$and: [{"currentCompany.industry": "Tech"}, {$or: [{"currentCompany.name": "Apple"}, {"currentCompany.name": "Google"}]}]}},{$group: {_id: "$lastName", averageSalary: {$avg: "$salary"}}}, {$sort: {averageSalary: -1}}])
+
+```
\ No newline at end of file
diff --git a/solutions/mongoose-intro---solutions/README.md b/solutions/mongoose-intro---solutions/README.md
new file mode 100644
index 0000000..bc4e0b4
--- /dev/null
+++ b/solutions/mongoose-intro---solutions/README.md
@@ -0,0 +1,40 @@
+# Solutions
+
+## Exercise 1
+```
+router.post('/person', function(req, res) {
+ let person = req.body
+ let p1 = new Person({
+ firstName: person.firstName,
+ lastName: person.lastName,
+ age: person.age
+ })
+
+ p1.save()
+ res.end()
+ })
+```
+
+## Exercise 2
+```
+router.put('/person/:id', function(req, res) {
+ let id = req.params.id
+ Person.findByIdAndUpdate(id, {age: 80}, function(err, person) {
+ res.end()
+ })
+ })
+```
+
+## Exercise 3
+```
+router.delete('/apocalypse', function(req, res) {
+
+
+ Person.find({}, function(err, people) {
+ people.forEach(p => p.remove())
+ })
+
+
+ res.end()
+ })
+```
\ No newline at end of file
diff --git a/solutions/mongoose-population---solutions/README.md b/solutions/mongoose-population---solutions/README.md
new file mode 100644
index 0000000..f99d8d7
--- /dev/null
+++ b/solutions/mongoose-population---solutions/README.md
@@ -0,0 +1,152 @@
+# Solutions
+
+## Exercise 1
+```
+const solarSystemSchema = new Schema({
+ planets: [{type: Schema.Types.ObjectId, ref: 'Planet'}],
+ starName: String
+ })
+
+
+ const planetSchema = new Schema({
+ name: String,
+ system: {type: Schema.Types.ObjectId, ref: 'SolarSystem'},
+ visitors: [{type: Schema.Types.ObjectId, ref: 'Visitor'}]
+ })
+
+
+ const visitorSchema = new Schema({
+ name: String,
+ homePlanet: {type: Schema.Types.ObjectId, ref: 'Planet'},
+ visitedPlanets: [{type: Schema.Types.ObjectId, ref: 'Planet'}]
+ })
+
+
+ const SolarSystem = mongoose.model("SolarSystem", solarSystemSchema)
+ const Planet = mongoose.model("Planet", planetSchema)
+ const Visitor = mongoose.model("Visitor", visitorSchema)
+
+
+ let ss = new SolarSystem({
+ planets: [],
+ starName: "Soya Way"
+ })
+
+
+ let p1 = new Planet({
+ name: "Earthy",
+ system: ss,
+ visitors: []
+ })
+
+
+ let p2 = new Planet({
+ name: "Marsy",
+ system: ss,
+ visitors: []
+ })
+
+
+ let p3 = new Planet({
+ name: "Uranusy",
+ system: ss,
+ visitors: []
+ })
+
+
+ let v1 = new Visitor({
+ name: "Mr mars",
+ homePlanet: p2,
+ visitedPlanets: []
+ })
+
+
+ let v2 = new Visitor({
+ name: "Mr Uranus",
+ homePlanet: p3,
+ visitedPlanets: []
+ })
+
+
+ /* ss.planets.push(p1)
+ ss.planets.push(p2)
+ ss.planets.push(p3)
+
+ v1.visitedPlanets.push(p3)
+ v1.visitedPlanets.push(p1)
+
+ p1.visitors.push(v1)
+ p3.visitors.push(v1)
+
+ v2.visitedPlanets.push(p1)
+ p1.visitors.push(v2)
+
+ ss.save()
+
+ p1.save()
+ p2.save()
+ p3.save()
+
+ v1.save()
+ v2.save() */
+
+
+ //Find a visitor's list of visited planets
+ /* Visitor.findOne({}).populate("visitedPlanets").exec(function(err, visitor) {
+ visitor.visitedPlanets.forEach(vp => console.log(vp.name))
+ }) */
+
+
+
+
+ //Find all the visitors on a planet
+ /* Planet.findOne({}).populate("visitors").exec(function(err, planet) {
+ planet.visitors.forEach(v => console.log(v.name))
+ }) */
+
+
+ //Find all the visitors in a system (subdocuments!)
+ /* SolarSystem.findOne({}).populate({
+ path: "planets",
+ populate: {
+ path: "visitors"
+ }
+ }).exec(function (err, solarSystem){
+
+ for(planet of solarSystem.planets) {
+ planet.visitors.forEach(v => console.log(v.name))
+ }
+ }) */
+
+
+
+
+ //Find the name of the star in the system of a visitor's home planet
+ /* Visitor.findOne({}).populate({
+ path: "homePlanet",
+ populate: {
+ path: "system",
+ }
+ }).exec(function(err, visitor) {
+ console.log(visitor.homePlanet.system.starName)
+ }) */
+
+
+ //Find a planet's system's star name as well as its visitors
+
+
+ /* Planet.findOne({}).populate("system visitors").exec(function(err, planet) {
+ console.log(planet.system.starName)
+ planet.visitors.forEach(v => console.log(v.name))
+ }) */
+
+
+ Planet.findOne({}).populate({
+ path: "system visitors",
+ populate: {
+ path: "homePlanet"
+ }
+ }).exec(function(err, planet) {
+ planet.visitors.forEach(v => console.log(v.homePlanet.name))
+ })
+```
\ No newline at end of file
diff --git a/solutions/node---solutions/README.md b/solutions/node---solutions/README.md
new file mode 100644
index 0000000..5bb108a
--- /dev/null
+++ b/solutions/node---solutions/README.md
@@ -0,0 +1,69 @@
+# Solutions
+
+## Exercise 1
+No Solution
+
+## Exercise 2
+consts.js:
+```
+const FINANCE = "finance"
+ const WEATHER = "weather"
+ const EMOTIONS = "emotions"
+
+
+ module.exports.complaints = {
+ FINANCE,
+ WEATHER,
+ EMOTIONS
+ }
+```
+complaintsHandler.js:
+```
+const c = require("./consts")
+
+
+ const handleComplaints = function(complaint) {
+ if(complaint.type === c.complaints.FINANCE) {
+ return console.log("Money doesn't grow on trees, you know.")
+ } else if (complaint.type === c.complaints.WEATHER) {
+ return console.log("It is the way of nature. Not much to be done.")
+ } else if (complaint.type === c.complaints.EMOTIONS) {
+ return console.log("It'll pass, as all things do, with time.")
+ }
+
+
+ }
+
+
+ module.exports.handleComplaint = handleComplaints
+```
+complaints.js:
+```
+const c = require("./consts")
+
+
+ let complaint1 = {
+ text: "I'm not getting enough money",
+ type: c.complaints.FINANCE
+ }
+
+
+ let complaint2 = {
+ text: "My salary hasn't come in yet",
+ type: c.complaints.FINANCE
+ }
+
+
+ let complaint3 = {
+ text: "I'm always full of energy",
+ type: c.complaints.EMOTIONS
+ }
+
+
+ const ch = require("./complaintsHandler")
+
+
+ ch.handleComplaint(complaint1) //should print "Money doesn't grow on trees, you know."
+ ch.handleComplaint(complaint2) //should print "Money doesn't grow on trees, you know."
+ ch.handleComplaint(complaint3) //should print "It'll pass, as all things do, with time."
+```
\ No newline at end of file
diff --git a/solutions/npm---node-package-manager---solutions/README.md b/solutions/npm---node-package-manager---solutions/README.md
new file mode 100644
index 0000000..5c5f914
--- /dev/null
+++ b/solutions/npm---node-package-manager---solutions/README.md
@@ -0,0 +1,37 @@
+# Solutions
+
+## Exercise 1
+```
+ let validator = require("validator")
+ console.log(validator.isEmail("shoobert@dylan"))
+
+ console.log(validator.isMobilePhone("786-329-9958","en-US"))
+
+ let blacklist = ["!", "?", ".", "@", "~", ",", "'"]
+ let text = "I'M SO EXCITED!!!~!"
+
+ console.log(validator.blacklist(text, blacklist).toLowerCase())
+```
+
+## Exercise 2
+```
+let faker = require("faker")
+
+
+ const makeHuman = function (num) {
+ for(let i = 0; i < num; i++) {
+
+
+ console.log(faker.fake("{{name.firstName}}, {{image.avatar}}, {{company.companyName}}"))
+
+ }
+ }
+
+
+
+
+ makeHuman(4)
+```
+
+## Exercise 3
+No Solution
\ No newline at end of file
diff --git a/solutions/object-oriented-programming-intro--oop----solutions/README.md b/solutions/object-oriented-programming-intro--oop----solutions/README.md
new file mode 100644
index 0000000..5bf9d95
--- /dev/null
+++ b/solutions/object-oriented-programming-intro--oop----solutions/README.md
@@ -0,0 +1,67 @@
+# Solution
+
+```
+class Document {
+ constructor(EmployeeName) {
+ this.EmployeeName = EmployeeName;
+ }
+}
+
+class Employee {
+ constructor(name) {
+ this.name = name;
+ }
+
+ work(office) {
+ for (let i = 0; i < 10; i++) {
+ office.documents.push(new Document(this.name))
+ }
+ }
+}
+
+class Manager {
+ constructor(name) {
+ this.employees = [];
+ this.name = name;
+ }
+
+ hireEmployee(name) {
+ this.employees.push(new Employee(name));
+ }
+
+ askEmployeesToWork(office) {
+ this.employees.forEach(employee => employee.work(office));
+ }
+}
+
+class Cleaner {
+ constructor(name) {
+ this.name = name;
+ }
+
+ clean() {
+ console.log('Clean')
+ }
+}
+
+class Office {
+ constructor() {
+ this.documents = [];
+ this.managers = [];
+ this.cleaners = [];
+ }
+
+ hireCleaner(name) {
+ this.cleaners.push(new Cleaner(name));
+ }
+
+ hireManager(name) {
+ this.managers.push(new Manager(name));
+ }
+
+ startWorkDay() {
+ this.managers.forEach(manager => manager.askEmployeesToWork(this));
+ this.cleaners.forEach(cleaner => cleaner.clean());
+ }
+}
+```
\ No newline at end of file
diff --git a/solutions/oop-inheritance---solutions/README.md b/solutions/oop-inheritance---solutions/README.md
new file mode 100644
index 0000000..bbf4b7f
--- /dev/null
+++ b/solutions/oop-inheritance---solutions/README.md
@@ -0,0 +1,114 @@
+# Solution
+
+```
+class Person {
+ constructor(name, startYear) {
+ this.name = name
+ this.startYear = startYear
+ this.courses = []
+ }
+
+
+ addCourse(course) {
+ this.courses.push(course)
+ }
+}
+
+
+class Student extends Person {
+ constructor(name, startYear) {
+ super(name, startYear)
+ this.grades = []
+ }
+
+
+ addCourse(course) {
+ if (this.courses.indexOf(course) == -1) {
+ super.addCourse(course)
+ }
+ }
+
+
+ receiveGrade(courseName, finalGrade) {
+ this.grades.push({
+ course: courseName,
+ grade: finalGrade
+ })
+ }
+}
+
+
+class Teacher extends Person {
+ constructor(name, startYear, salary) {
+ super(name, startYear)
+ this.salary = salary
+ this.courses = {}
+ }
+
+
+ giveGrade(student, courseName, grade) {
+ student.receiveGrade(courseName, grade)
+ }
+
+
+ addCourse(course) {
+ let courseNames = Object.keys(this.courses)
+ for (let courseName of courseNames) {
+ if (course === courseName) {
+ this.courses[course] += 1
+ return
+ }
+ }
+ this.courses[course] = 1
+ }
+}
+
+
+class TeachingAssistant extends Teacher {
+ constructor(name, startYear, salary) {
+ super(name, startYear, salary)
+ }
+}
+
+
+
+
+class Principal extends Person {
+ constructor(name, startYear) {
+ super(name, startYear)
+ this.teachers = []
+ this.students = []
+ }
+
+
+ hireTeacher(teacher) {
+ this.teachers.push(teacher)
+ console.log(`${this.name} just hired ${teacher.name}`)
+ }
+
+
+ recruitStudent(student) {
+ this.students.push(student)
+ console.log(`${this.name} just recruited ${student.name}`)
+ }
+
+
+ expelStudent(student) {
+
+
+ for (let i in this.students) {
+ if (this.students[i].name === student.name) {
+ return this.students.splice(i, 1)
+ }
+ }
+ }
+
+
+ transferStudent(student, principal) {
+ this.expelStudent(student)
+ principal.recruitStudent(student)
+ }
+
+
+}
+```
\ No newline at end of file
diff --git a/solutions/promises---solutions/README.md b/solutions/promises---solutions/README.md
new file mode 100644
index 0000000..89622a5
--- /dev/null
+++ b/solutions/promises---solutions/README.md
@@ -0,0 +1,28 @@
+# Solutions
+
+## Exercise 1
+```
+$.get('/randomWord')
+ .then(function(word) {
+ console.log(word)
+ return $.get(`https://www.googleapis.com/books/v1/volumes?q=intitle:${word}`)
+ })
+ .then(function(book) {
+ console.log(book);
+ })
+```
+
+## Exercise 2
+```
+$.get('/randomWord')
+ .then(function(word) {
+ console.log(word)
+ let randomBook = $.get(`https://www.googleapis.com/books/v1/volumes?q=title:${word}`)
+ let randomGif = $.get(`http://api.giphy.com/v1/gifs/search?q=${word}&api_key=50m5Set06jQuFMy7VNXir7iaNl8ypsEu`)
+ Promise.all([randomBook, randomGif])
+ .then(function(result) {
+ $("body").append(`${result[0].items[0].volumeInfo.title}
`)
+ $("body").append(`
\ No newline at end of file
diff --git a/sql-basics/sql-join/README.md b/sql-basics/sql-join/README.md
new file mode 100644
index 0000000..08a070a
--- /dev/null
+++ b/sql-basics/sql-join/README.md
@@ -0,0 +1,3 @@
+# SQL Join Lecture - 1 to Many
+
+
\ No newline at end of file
diff --git a/state-management/README.md b/state-management/README.md
new file mode 100644
index 0000000..9782997
--- /dev/null
+++ b/state-management/README.md
@@ -0,0 +1,6 @@
+# State Management
+
+- [Agora Project](agora-project/README.md)
+- [Mobx 1](mobx-1/README.md)
+- [Mobx 2](mobx-2/README.md)
+- [Scraping](scraping/README.md)
\ No newline at end of file
diff --git a/state-management/agora-project/README.md b/state-management/agora-project/README.md
new file mode 100644
index 0000000..776aaa3
--- /dev/null
+++ b/state-management/agora-project/README.md
@@ -0,0 +1,10 @@
+# Extensions
+
+If you are done and have more time here are some cool ideas for extensions:
+- Add a simple server to experiment with async code
+- Write in typescript
+
+
+And even more ideas:
+* Add a search bar
+* Filter by max price
\ No newline at end of file
diff --git a/state-management/agora-project/_sidebar.md b/state-management/agora-project/_sidebar.md
new file mode 100644
index 0000000..2178f8d
--- /dev/null
+++ b/state-management/agora-project/_sidebar.md
@@ -0,0 +1,6 @@
+- [⬅ Back to State Management](../README.md)
+
+- [Extensions](./Extensions.md)
+- [Intro](./Intro.md)
+- [Overview](./Overview.md)
+- [Storage Tracker](./Storage-Tracker.md)
\ No newline at end of file
diff --git a/state-management/mobx-1/README.md b/state-management/mobx-1/README.md
new file mode 100644
index 0000000..862db13
--- /dev/null
+++ b/state-management/mobx-1/README.md
@@ -0,0 +1,41 @@
+# Intro
+
+Welcome to the wonderful world of MobX! This lesson will cover:
+
+
+
+- What is MobX
+- Why do we need a state manager?
+- The basics of MobX
+ - MobX data-flow
+ - Creating a Store and Observable
+ - Observer
+ - Actions
+
+
+
+Let's get MobXing!
+
+
+
+----------
+
+
+
+#### **WHAT IS MOBX?**
+
+
+
+Simply put, MobX is a library for state management.
+
+
+
+React renders an application state. MobX brings in a new mechanism for storing and updating the state that React renders.
+
+
+
+As the [MobX documentation](https://mobx.js.org/) says, "MobX provides mechanisms to optimally synchronize application state with your React components by using a reactive virtual dependency state graph that is only updated when strictly needed and is never stale."
+
+
+
+We'll understand this quote more in depth later, but the important thing to take away from it is that MobX manages passing the necessary information to each react component, and updating the data **only when necessary**.
\ No newline at end of file
diff --git a/state-management/mobx-2/README.md b/state-management/mobx-2/README.md
new file mode 100644
index 0000000..b4865c2
--- /dev/null
+++ b/state-management/mobx-2/README.md
@@ -0,0 +1,17 @@
+# Intro
+
+We've seen the basic functionality that the MobX + React combination can bring us, through `observable`, `observer`, and `action`. Now, let's go more in depth in the world of React + MobX!
+
+
+
+This lesson will cover:
+
+- `computed` values
+- `Provider`
+- Injecting a MobX store into a React component
+- Using multiple MobX stores
+- Binding input values with MobX
+
+
+
+To start with fork and clone [this starter repo](https://github.com/Elevationacademy/mobx-2-lesson-exercises-updated). It's the set up for a simple reservations manager. We'll go over the code in it and add on to it!
\ No newline at end of file
diff --git a/state-management/scraping/README.md b/state-management/scraping/README.md
new file mode 100644
index 0000000..ad1a990
--- /dev/null
+++ b/state-management/scraping/README.md
@@ -0,0 +1,3 @@
+# Intro
+
+Read [this article](https://www.freecodecamp.org/news/the-ultimate-guide-to-web-scraping-with-node-js-daa2027dcd3/), and then move on to the exercise. The exercise is meant to be done in pairs.
\ No newline at end of file
diff --git a/typescript/README.md b/typescript/README.md
new file mode 100644
index 0000000..0773603
--- /dev/null
+++ b/typescript/README.md
@@ -0,0 +1,11 @@
+# Typescript
+
+- [Chrome Extensions](chrome-extensions/README.md)
+- [Dom And Casting](dom-and-casting/README.md)
+- [Generics](generics/README.md)
+- [Random User Page Api Project](random-user-page-api-project/README.md)
+- [Setting Up A Typescript Environment](setting-up-a-typescript-environment/README.md)
+- [Strict Mode](strict-mode/README.md)
+- [Types](types/README.md)
+- [Union Types](union-types/README.md)
+- [What Is Typescript ](what-is-typescript-/README.md)
\ No newline at end of file
diff --git a/typescript/chrome-extensions/README.md b/typescript/chrome-extensions/README.md
new file mode 100644
index 0000000..0f6f022
--- /dev/null
+++ b/typescript/chrome-extensions/README.md
@@ -0,0 +1,4 @@
+# What is a Google Chrome Extension?
+
+- Google Chrome extensions are programs that can be installed into Chrome in order to change the browser's functionality
+- This includes adding new features to Chrome or modifying the existing behavior of the program itself to make it more convenient for the user.
\ No newline at end of file
diff --git a/typescript/dom-and-casting/README.md b/typescript/dom-and-casting/README.md
new file mode 100644
index 0000000..4a94df4
--- /dev/null
+++ b/typescript/dom-and-casting/README.md
@@ -0,0 +1,9 @@
+# Intro
+
+When we enable TypeScript in web development frameworks such as React and Angular, we need to take into account that writing TypeScript code that interacts with DOM elements and events, is based on a concept called ‘casting’.
+
+As interacting with HTML elements is dynamic and occurs at run-time, we need to place special attention to types, and we need to ‘cast’, i.e. ‘adjust’ the types we receive via DOM elements and via event handling, to the equivalent TypeScript types.
+
+In this chapter we will cover:
+1. Interacting with DOM elements using TypeScript
+1. Handling DOM events using TypeScript
\ No newline at end of file
diff --git a/typescript/generics/README.md b/typescript/generics/README.md
new file mode 100644
index 0000000..45dedea
--- /dev/null
+++ b/typescript/generics/README.md
@@ -0,0 +1,10 @@
+# Intro
+
+One of the most critical concepts of good software engineering is the ability to develop reusable code. Making code reusable also requires us to allow the code to work with multiple types.
+
+Earlier we got familiarized with type unions, allowing us to define multiple types for a variable. This works well in a single block of code, as we would need to initialize a variable with a value, and therefore its type, but when we use functions and classes, the arguments and return value types are only defined at run-time. This causes TypeScript to throw many compile-time errors. And this is where Generics come to the rescue.
+
+In this lesson we will learn:
+1. Why do we need Generics?
+1. Using Generics with functions
+1. Using Generics with classes
\ No newline at end of file
diff --git a/typescript/random-user-page-api-project/README.md b/typescript/random-user-page-api-project/README.md
new file mode 100644
index 0000000..2c04580
--- /dev/null
+++ b/typescript/random-user-page-api-project/README.md
@@ -0,0 +1,16 @@
+# Intro
+
+Now that you know how to request data from **API**s and use `Handlebars.js` to render data on a page really easily - it's time to put your skills to work!
+
+
+
+You'll be making a **Random-User-Page-Generator** 🗿.
+
+ What exactly is a **Random-User-Page-Generator**🗿 (or **RUPG** for short, pronounced _ruh-pa-geh_)?
+
+ It's essentially a Facebook profile page, filled with content taken from **API**s and generated with different data at the click of a button.
+
+You'll be using **API**s, **jQuery**, **Handlebars**, **Promises**, **TypeScript** and of course creating it all in **OOP**.
+
+
+ Are you Excited 🤩? Great, because **RUPG** is a multi-million-dollar-application just waiting for you to create it!
\ No newline at end of file
diff --git a/typescript/setting-up-a-typescript-environment/README.md b/typescript/setting-up-a-typescript-environment/README.md
new file mode 100644
index 0000000..d1e16f7
--- /dev/null
+++ b/typescript/setting-up-a-typescript-environment/README.md
@@ -0,0 +1,12 @@
+# Intro
+
+Setting up a JavaScript environment to use TypeScript is easy. You install TypeScript through any of the available package managers, such as npm, yarn or pnpm. For this course we will use npm as our baseline, which comes with a NodeJS distribution (specific instruction in the next page).
+
+When we move to TypeScript, we need to consider the following new concepts that are introduced:
+- **’.ts’ files.** TypeScript is a separate development language, and therefore, has it’s separate files, based on its own syntax. TypeScript files have the *.ts* extension. These come ‘in addition’ to the JavaScript files, which has the *.js* extension.
+- **‘tsconfig.json’.** TypeScript introduces a configuration file called ‘tsconfig.json’, which includes the settings that control how TypeScript behaves, what elements of the programming language will be type-checked, where will the compiled *.js* files will be placed etc.
+
+In this chapter, we will cover the following topics:
+1. How to install TypeScript?
+1. How to compile TypeScript files?
+1. How to configure TypeScript?
\ No newline at end of file
diff --git a/typescript/strict-mode/README.md b/typescript/strict-mode/README.md
new file mode 100644
index 0000000..36d9c7f
--- /dev/null
+++ b/typescript/strict-mode/README.md
@@ -0,0 +1,7 @@
+# Intro
+
+In this section we will cover JavaScript’s `”use strict”;` directive, what restrictions it introduces in JavaScript and how TypeScript's strict checks relate to it and extend it.
+
+These are the topics we’ll cover in this section:
+1. JavaScript’s `“use strict”;` directive
+1. Differences between `“use strict”;` and TypeScript
\ No newline at end of file
diff --git a/typescript/types/README.md b/typescript/types/README.md
new file mode 100644
index 0000000..5349d8e
--- /dev/null
+++ b/typescript/types/README.md
@@ -0,0 +1,9 @@
+# Intro
+
+In this lesson we will be covering the basics of **TypeScript types**. We will examine what types exist, how to use them in attributes and in functions.
+
+### Topics covered:
+1. A strong-typed language
+1. TypeScript types
+1. Types in objects and classes
+1. Types in functions
\ No newline at end of file
diff --git a/typescript/union-types/README.md b/typescript/union-types/README.md
new file mode 100644
index 0000000..1addec0
--- /dev/null
+++ b/typescript/union-types/README.md
@@ -0,0 +1,8 @@
+# Intro
+
+Variables in TypeScript can be assigned one or more types, called a union of types, a list of types that could be used for a particular variable. We can also define an alias that will represent multiple types throughout the codebase, and even define a list of predefined values a variable could hold.
+
+In this lesson we will cover the following topics:
+1. Union types
+1. Type aliases
+1. Literal types
\ No newline at end of file
diff --git a/typescript/what-is-typescript-/README.md b/typescript/what-is-typescript-/README.md
new file mode 100644
index 0000000..fcfc862
--- /dev/null
+++ b/typescript/what-is-typescript-/README.md
@@ -0,0 +1,40 @@
+# Intro
+
+TypeScript is a compiled language that enhances JavaScript. It brings type-checking and syntax-checking superpowers to JavaScript.
+
+By saying TypeScript henhances JavaScript we mean that you write TypeScript code, which is then **transpiles** (being translated) into standard JavaScript code that can be run in any JavaScript-enabled environment.
+
+
+|||info
+## Compiler vs Transpiler
+---
+**Compiler** - translates code from a programming language to Machine language.
+**Transpiler** - translates code from one programming language to another programming language
+|||
+
+Let’s look at an example. You will see some unfamiliar syntax, that includes types, we will explain it later.
+
+This TypeScript code:
+```
+const first_name: string = "John"
+let age: number
+age = 2
+```
+
+Is transpiled to standard JavaScript:
+```
+"use strict";
+const first_name = "John";
+let age;
+age = 2;
+```
+
+Notice the unique type declarations in the TypeScript code that are ‘omitted’ in the JavaScript output. The reason for that, is that we don’t have types in JavaScript.
+
+TypeScript makes sure you write better code which keeps to standards, easily understood by others, improves your application’s robustness, and reduces amounts of defects.
+
+In this lesson we will be covering the differences between JavaScript and TypeScript, what are the benefits of using it, and where can we use it.
+
+### Topics covered:
+1. Differences between JS and TS
+1. Benefits of TypeScript
\ No newline at end of file
diff --git a/unit-testings/README.md b/unit-testings/README.md
new file mode 100644
index 0000000..27a24b0
--- /dev/null
+++ b/unit-testings/README.md
@@ -0,0 +1,3 @@
+# Unit Testings
+
+- [Unit Tests With Jest](unit-tests-with-jest/README.md)
\ No newline at end of file
diff --git a/unit-testings/unit-tests-with-jest/README.md b/unit-testings/unit-tests-with-jest/README.md
new file mode 100644
index 0000000..3ed7a7b
--- /dev/null
+++ b/unit-testings/unit-tests-with-jest/README.md
@@ -0,0 +1,25 @@
+# Intro
+
+The concept of "testing" code has been around since Time Immemorial. Maybe not that long though.
+
+
+
+If we take a moment to step back and think about code in the Real World, then you quickly realize that there are pieces of software out there that are literally processing **billions of dollars** every hour.
+
+
+
+Or some bio-tech program that might **save a life**.
+
+
+
+With any code that serves clients, we as the developers need to do everything we can to guarantee the code will work. However, **code changes all the time** - new developers join the team, veteran developers leave - and sometimes a piece of code that was written by Person A in 2019 could be modified by Person B in 2023.
+
+
+
+One of the reasons to write tests is **to validate that changes in our code do not ruin our code's functionality**.
+
+
+
+Today we have lots of ways to test code, but ultimately, **a test is just some code that checks that other code is doing what it's meant to**.
+
+Broadly speaking, there are two major types of tests: **unit tests**, and [**integration tests**](http://softwaretestingfundamentals.com/integration-testing/). This lesson will focus on **unit tests**.
\ No newline at end of file
diff --git a/web-development-basics-advanced/README.md b/web-development-basics-advanced/README.md
new file mode 100644
index 0000000..8d3eaf7
--- /dev/null
+++ b/web-development-basics-advanced/README.md
@@ -0,0 +1,13 @@
+# Web Development Basics Advanced
+
+- [Callbacks Arrow Functions](callbacks---arrow-functions/README.md)
+- [Catch A The Optional ](catch-a-the--optional-/README.md)
+- [Closures Modules](closures---modules/README.md)
+- [Data Flow](data-flow/README.md)
+- [Dom Intro](dom-intro/README.md)
+- [Dom Traversal With Jquery](dom-traversal-with-jquery/README.md)
+- [E Commerce Dom Project Optional ](e-commerce-dom-project--optional-/README.md)
+- [Jquery](jquery/README.md)
+- [Tweeter Controller](tweeter-controller/README.md)
+- [Tweeter Logic Module](tweeter-logic-module/README.md)
+- [Tweeter Render Module](tweeter-render-module/README.md)
\ No newline at end of file
diff --git a/web-development-basics-advanced/callbacks---arrow-functions/README.md b/web-development-basics-advanced/callbacks---arrow-functions/README.md
new file mode 100644
index 0000000..a13abad
--- /dev/null
+++ b/web-development-basics-advanced/callbacks---arrow-functions/README.md
@@ -0,0 +1,44 @@
+# Arrow Functions Ii
+
+So that's great for basic syntax, what about return? This also works the same way:
+```
+const add = (x, y) => {
+ return x + y
+}
+
+const sum = add(1, 2)
+console.log(sum) //prints 3
+```
+
+
+........................but wait. There's more!
+
+
+
+If the function block is only one line - we don't even need the return keyword!
+```
+const add = (x, y) => x + y
+
+const sum = add(1, 2)
+console.log(sum) //prints 3
+```
+
+
+This is a one line function that knows how to **return** implicitly. Please take a deep breath before moving on. This is all very exciting stuff. _Wow_.
+
+
+
+Note, however, that if you have a more complicated function, you still need curly braces and return:
+
+
+```
+const getHypotenuse = (a, b) => {
+ const aSquared = a * a
+ const bSquared = b * b
+ const cSquared = aSquared + bSquared
+ return Math.sqrt(cSquared)
+}
+
+const hypoteneuese = getHypotenuse(3, 4)
+console.log(hypoteneuese ) //prints 5
+```
\ No newline at end of file
diff --git a/web-development-basics-advanced/callbacks---arrow-functions/_sidebar.md b/web-development-basics-advanced/callbacks---arrow-functions/_sidebar.md
new file mode 100644
index 0000000..c760ef8
--- /dev/null
+++ b/web-development-basics-advanced/callbacks---arrow-functions/_sidebar.md
@@ -0,0 +1,14 @@
+- [⬅ Back to Web Development Basics Advanced](../README.md)
+
+- [Arrow Functions Ii](./Arrow-Functions-II.md)
+- [Arrow Functions](./Arrow-Functions.md)
+- [Callback Functions Ii](./Callback-Functions-II.md)
+- [Comprehension Check](./Comprehension-Check.md)
+- [Exercises](./Exercises.md)
+- [Intro](./Intro.md)
+- [Spot Check 1](./Spot-Check-1.md)
+- [Spot Check 2](./Spot-Check-2.md)
+- [Spot Check 3](./Spot-Check-3.md)
+- [Spot Check 4](./Spot-Check-4.md)
+- [Spot Check 5](./Spot-Check-5.md)
+- [This](./this.md)
\ No newline at end of file
diff --git a/web-development-basics-advanced/catch-a-the--optional-/README.md b/web-development-basics-advanced/catch-a-the--optional-/README.md
new file mode 100644
index 0000000..bd5ecab
--- /dev/null
+++ b/web-development-basics-advanced/catch-a-the--optional-/README.md
@@ -0,0 +1,30 @@
+# Intro
+
+
+Let's recap the things we've learned so far:
+
+
+
+- HTML + CSS
+- Grid
+- JS
+ - Basics
+ - Callbacks
+ - Arrow functions
+ - `this`
+- DOM
+- jQuery
+ - DOM Traversal
+- Data Flow
+
+
+
+And you've got experience on at least a couple of projects (Tweeter, Form, Ball Game) - that's quite a lot of coding!
+
+
+
+Today you're going to work on another project - and you're going to make it entirely on your own, from scratch, using the tools you know.
+
+
+
+The inspiration for this game is from [this entertaining clip](https://www.youtube.com/watch?v=HywwY2Az5bQ), and you've got instructions below. Good luck!
\ No newline at end of file
diff --git a/web-development-basics-advanced/closures---modules/README.md b/web-development-basics-advanced/closures---modules/README.md
new file mode 100644
index 0000000..3079e13
--- /dev/null
+++ b/web-development-basics-advanced/closures---modules/README.md
@@ -0,0 +1,107 @@
+# Closures Modules
+
+Let's look at this bit again:
+
+
+```
+const m = mathOperations()
+```
+
+What we're doing here is - as with any function call - getting whatever the function returns and setting it in a variable. In this case, storing mathOperations' returned object inside of the variable m
+
+
+
+So now, m has the value of this object that we returned earlier:
+
+
+```
+{
+ add: add,
+ sub: subtract,
+ mult: multiply,
+ div: divide
+}
+```
+
+
+Again, m is just a normal JS object. So if we do m.mult, all we're doing is accessing the **value** of the property mult - which in this case happens to be the multiply function!
+
+
+
+That's why m.mult(3, 4) works - we're simply calling a function.
+
+
+
+**Modularization** (using modular bits of code) is one of the most popular design patterns in Javascript. In future lessons we'll learn an even _better_ way to modularize our code.
+
+
+
+Write your own example of a module. If you're still unsure, ask an instructor or a classmate to help clarify.
+
+
+
+----------
+
+
+
+
+
+Let's look at an example of a module with closure:
+
+
+```
+const UsersModule = function () {
+ const _users = ['Aaron', 'Avi'];
+
+ const addUser = function (user) {
+ _users.push(user)
+ }
+
+ const listUsers = function () {
+ for (let user of _users) {
+ console.log(user)
+ }
+ }
+
+ return {
+ addUser: addUser,
+ listUsers: listUsers
+ }
+}
+
+const usersModule = UsersModule()
+
+usersModule.addUser('Narkis')
+usersModule.listUsers()
+```
+
+
+Copy/paste the above code for this part (you can use [repl.it](https://repl.it/) again)
+
+
+
+Here we've created a module called **UsersModule***. Inside this module we will keep all of our code related to users:
+
+###### *By convention, we CapitalizeModuleNames, as opposed to our usual camelCase
+
+
+
+- A function to add users
+- A function to show (list) all our users
+- A **private*** variable, _users** where we store all our..well, users
+
+###### *We say _private_ because it's not accessible outside of the module
+
+###### **Also, by convention, we preface private variables/functions with an underscore to signify they should not be exposed
+
+
+
+When UsersModule is invoked, it returns an object with our two module functions. So now outside of our module we can interact with our users, but _only_ to the extent that we've been allowed (with the addUser and listUsers functions)
+
+
+
+In other words, because of closure, we cannot _directly_ interact with our users, but we can do so indirectly.
+
+
+
+This is great because if we want to guarantee that adding users only happens in a certain way (say we always want to send an email to a user once they have been added), we know the only way to modify users is through addUser!
\ No newline at end of file
diff --git a/web-development-basics-advanced/closures---modules/_sidebar.md b/web-development-basics-advanced/closures---modules/_sidebar.md
new file mode 100644
index 0000000..597f8ec
--- /dev/null
+++ b/web-development-basics-advanced/closures---modules/_sidebar.md
@@ -0,0 +1,12 @@
+- [⬅ Back to Web Development Basics Advanced](../README.md)
+
+- [Closures Modules](./Closures---Modules.md)
+- [Comprehension Check](./Comprehension-Check.md)
+- [Exercises](./Exercises.md)
+- [Intro](./Intro.md)
+- [Modules](./Modules.md)
+- [Quick Note On Closures And Memory In Js](./Quick-Note-on-Closures-and-Memory-in-JS.md)
+- [Spot Check 1](./Spot-Check-1.md)
+- [Spot Check 2](./Spot-Check-2.md)
+- [Spot Check 3](./Spot-Check-3.md)
+- [What Are Closures ](./What-are-Closures-.md)
\ No newline at end of file
diff --git a/web-development-basics-advanced/data-flow/README.md b/web-development-basics-advanced/data-flow/README.md
new file mode 100644
index 0000000..b3f0886
--- /dev/null
+++ b/web-development-basics-advanced/data-flow/README.md
@@ -0,0 +1,173 @@
+# Intro
+
+Up to now, whenever we've dealt with the DOM - specifically, whenever we've added/removed things dynamically from the DOM - we just kinda.. _did_ it directly. No sense of order, no single source of responsibility.
+
+Any rogue button or hover could just change things.
+
+
+
+And while that is fun, it's certainly not a good practice. In fact, it's quite a bad practice.
+
+
+
+Today we'll see a good way to deal with data, and it all has to do with the flow of data ~
+
+
+
+----------
+
+
+
+#### **DATA FLOW**
+
+
+
+You can think of every application as a machine that takes user input, holds some data (and perhaps modifies it), then gives back some sort of output that's useful to the user.
+
+When the user does something, the data changes, and a new or updated output is given.
+
+
+
+We'll call this concept "data flow", but it's also known by several other names, including [reactive programming](https://en.wikipedia.org/wiki/Reactive_programming).
+
+
+
+In most applications we have some data stored in some global variables (arrays or objects).
+
+
+
+The application usually displays this data in a **view** - in web development, the view is generally the DOM.
+
+This action is called **rendering** - the application **renders** the data on the view:
+
+
+
+
+
+
+
+**Render** means _cause to be or become; make_.
+
+A **view** is something you can see with your eyes.
+
+
+
+For example, Facebook takes the data about who you are and what your friends are posting and **renders** it into a **view** of your timeline!
+
+
+
+Here is a simple example:
+
+
+```
+const posts = [
+ {
+ name: "Uncle Jerome",
+ text: "Happy birthday kido!"
+ },
+ {
+ name: "BFF Charlene",
+ text: "HEARTS LOVE YOU FOREVER BFF4LYFE HBD"
+ },
+ {
+ name: "Old High School Teacher",
+ text: "Hey ace, have a good one."
+ }
+]
+```
+
+
+Assume the above data represents the people who have posted on your wall for your birthday.
+
+
+
+In order to render this data in your view (your timeline), we would do something like this:
+
+
+```
+const render = function () {
+ for (let post of posts) {
+ let postBox = $("" + post.name + "
" + post.text + "
+
+Tweeter Logic
+ +``` +const Tweeter = function () { + const _posts = [ + { + text: "First post!", + id: "p1", + comments: [ + { id: "c1", text: "First comment on first post!" }, + { id: "c2", text: "Second comment on first post!!" }, + { id: "c3", text: "Third comment on first post!!!" } + ] + }, + { + text: "Aw man, I wanted to be first", + id: "p2", + comments: [ + { id: "c4", text: "Don't wory second poster, you'll be first one day." }, + { id: "c5", text: "Yeah, believe in yourself!" }, + { id: "c6", text: "Haha second place what a joke." } + ] + } + ] + + const getPosts = () => _posts + + return { + getPosts: getPosts + } +} +``` + ++ +Having the getPosts function is enough for this part, because that's all our rendering module will **require**. (we Do **NOT** need anything more than that) + +--- + +Also, here is some HTML (add it to your **tweeter** folder) you should use - it's nothing exciting, and we won't be changing it throughout this project: +``` + + + +
Tweeter
Twit
+
+Click here to reveal the answer. +
+ +HTML (inside the `` tag) + +```html +
+
+```
+
+
+
+
+CSS:
+
+```css
+#parent {
+ display: inline-block;
+ background-color: blue;
+ width: 300px;
+ height: 300px;
+}
+
+.child {
+ background-color: red;
+}
+
+#child-1 {
+ position: absolute;
+ width: 300px;
+ height: 20px;
+ top: 50px;
+}
+
+#child-2 {
+ position: absolute;
+ height: 300px;
+ width: 20px;
+ left: 50px;
+}
+```
+