diff --git a/mongoDB_cirriculum_week1/F1.2.md b/mongoDB_cirriculum_week1/F1.2.md new file mode 100644 index 00000000..075b83db --- /dev/null +++ b/mongoDB_cirriculum_week1/F1.2.md @@ -0,0 +1,37 @@ +# F1.1 An Introduction to MongoDB and Atlas + +MongoDB is a database program which is used for high-volume data storage. Databases allow for the storage and retrieval of data. + +A database is needed for dynamic websites, as they rely on data in order to function. Examples of dynamic websites include Quora, and Gmail, as they both store data and retrieve it. Static websites such as personal websites, do not need databases because they do not have to retieve any data. + +MongoDB has three distinct components, each with their own unique tools: Atlas, Compass, and Stitch. + +## Atlas + +MongoDB Atlas handles the deployment of your database, using the cloud provider of your choice. Let's get started. + +First, sign up for MongoDB on this site: "https://www.mongodb.com/cloud/atlas?tck=docs_atlas" + +This is how the webpage should look: + +![Screen Shot 2020-03-27 at 4.19.56 AM](/Users/vishnuv/Library/Application Support/typora-user-images/Screen Shot 2020-03-27 at 4.19.56 AM.png) + + + +Hit the "Try Free" button and sign up. Your screen should then look like this: + + + +![Screen Shot 2020-03-27 at 5.01.46 AM](/Users/vishnuv/Library/Application Support/typora-user-images/Screen Shot 2020-03-27 at 5.01.46 AM.png) + + Choose the "Starter Clusters" Option and Create a cluster! A cluster is essentially a collection of various nodes, which each handle different parts of data. The main advantage that comes with using a cluster is that nodes are mainly independent of each other and can be examined seperately. + +Then, choose your cluster and your region (US-WEST) and hit "Create Cluster" + +![Screen Shot 2020-03-27 at 5.05.33 AM](/Users/vishnuv/Desktop/Screen Shot 2020-03-27 at 5.05.33 AM.png) + +Your screen should finally end up looking like this: + +![Screen Shot 2020-03-27 at 5.06.32 AM](/Users/vishnuv/Desktop/Screen Shot 2020-03-27 at 5.06.32 AM.png) + +MongoDB uses collections in order to store data, which are basically like tables. \ No newline at end of file diff --git a/mongoDB_cirriculum_week1/F1.3.md b/mongoDB_cirriculum_week1/F1.3.md new file mode 100644 index 00000000..ae43ad5f --- /dev/null +++ b/mongoDB_cirriculum_week1/F1.3.md @@ -0,0 +1,34 @@ +# F1.2: Introduction to Stitch + Using Stitch + +Another component of MongoDB is using Stich, which allows you to configure rules, authentication and other services for your services. To fully understand Stitch, let's build a blog which allows you to post and edit comments. + +Make sure you've created your cluster and your account to access and finish this tutorial. + +## Step 1: Creating a Stitch Application + +1. On the left, click Stitch and create a new application and give it a name(ie StichEx) + + ![Screen Shot 2020-03-27 at 5.06.32 AM](/Users/vishnuv/Desktop/Screen Shot 2020-03-27 at 5.06.32 AM.png) + +2. After waiting a few minutes to initalize, you should reach the starting screen(again): + + ## + +## Step 2: Authentication + +On the starting page, scroll down and turn on "Anonymous Authentication." There are other ways to configure authentication, such as through Google or through username and password authentication. + +![Screen Shot 2020-03-27 at 6.57.37 AM](/Users/vishnuv/Library/Application Support/typora-user-images/Screen Shot 2020-03-27 at 6.57.37 AM.png) + +## Step 3: Setting Rules for the Application + +1. On the Stich Homepage, click "Rules" +2. Add a collection and set the database name to "Comment Ex" +3. Set the collection name to comments +4. Select "No Template" and add collection +5. Under the "default" column, tick both "read" and "write" so the database can store comments +6. Click "save" + +![Screen Shot 2020-03-27 at 7.41.10 AM](/Users/vishnuv/Library/Application Support/typora-user-images/Screen Shot 2020-03-27 at 7.41.10 AM.png) + +7. Finally, deploy your application. \ No newline at end of file diff --git a/mongoDB_cirriculum_week1/F1.4.md b/mongoDB_cirriculum_week1/F1.4.md new file mode 100644 index 00000000..9a949cfa --- /dev/null +++ b/mongoDB_cirriculum_week1/F1.4.md @@ -0,0 +1,108 @@ +# F1.3: Creating the webpage for the Stitch Application + +Let's generate an HTML page so we can comment on the blog. + +## Step 1: Creating the HTML page + +Create an HTML file and copy the following onto it: + +```html + + + + +

My First Blog

+
+ Hi! This is an example of how to use Stitch! +
+
+
+ + +``` + +## Step 2: Include the Stitch SDK + +Include the following +``` + +## Step 3: Initialize the Stitch client + +Paste this below the SDK in the head tag: + +Replace the "" with your app id, which you can find on the clients page of the Stitch homepage + +```javascript + +``` + +## Step 4: Displaying Comments + +Add the following functions to the +``` + +This is how the button would look like before clicking it: + +![Screen Shot 2020-02-26 at 9.18.48 PM](/Users/vishnuv/Library/Application Support/typora-user-images/Screen Shot 2020-02-26 at 9.18.48 PM.png) + +And this is the button after it is clicked: + +![Screen Shot 2020-02-26 at 9.20.01 PM](/Users/vishnuv/Library/Application Support/typora-user-images/Screen Shot 2020-02-26 at 9.20.01 PM.png) + +Let's make another button, which upon mousover, will change colors. \ No newline at end of file diff --git a/react_week2_fixed/2.md b/react_week2_fixed/2.md new file mode 100644 index 00000000..647254e5 --- /dev/null +++ b/react_week2_fixed/2.md @@ -0,0 +1,28 @@ +## Introduction to JavaScript + +JS is written by inserting a "script" tag into the HTML webpage as shown here: + + + + + + +## External JS + +Although the + + +External JavaScripts can either be put into the head or body part of the DOM. For the rest of the course, we'll be making new files and using external JavaScript in order to initialize the code. + +External scripts should not contain the script tag. \ No newline at end of file diff --git a/react_week2_fixed/3.md b/react_week2_fixed/3.md new file mode 100644 index 00000000..fbedac48 --- /dev/null +++ b/react_week2_fixed/3.md @@ -0,0 +1,49 @@ +## The If/Else Statements + +Let's examine the first one, the `if` and `else` conditional. + +```javascript + + let buttonsize = 4; + if (buttonsize < 5) + { + console.log("Button is too small!"); + } + else + { + console.log("Button is too big!"); + } +``` + +The if/else statemenent checks the condition and then does whatever the specific condition we make it do. + +What does the above code block do? + +What happens if we have more than one condition? + +Enter the "else if" condition + +## Else if + +The `else if` condition is used if the first condition is false. Let's modify our code so that we can use an `else if` function. + +``` javascript + let buttonsize = 4; + if (buttonsize < 5) + { + document.write("Button is too small!"); + } + else if (buttonsize===5) + { + alert("Perfect size!"); + } + else + { + document.write("Button is too big!"); + } +``` + +Recall that `===` is what we use to equate. What does this code block do? + +Write an if/else statement which checks to see if button font is bigger than 32 pp, and if it is, it will print("this is large"). However, otherwise, the code will print("this is small!") + diff --git a/react_week2_fixed/4.md b/react_week2_fixed/4.md new file mode 100644 index 00000000..9bf07996 --- /dev/null +++ b/react_week2_fixed/4.md @@ -0,0 +1,24 @@ +## Switch + +The switch statements evaluates the variable and looks for `cases` which would match the initial condition. + +``` javascript + const fruit = 'Papayas'; +switch (fruit) { + case 'Oranges': + comsole.log('Oranges are $0.59 a pound.'); + break; + case 'Papayas': + console.log('Papayas are $2.79 a pound.'); + break; + default: + console.log('Sorry, we are out of ' + fruit + '.'); +} +``` + +We set "fruit" to Papayas, which means that the script will evaluate each case until it finds the appropriate case, and then it will execute that case. + +Note that switch statements have a `default`, which is what the script will default to if the condition doesn't have an associated case. + +When writing a switch statement, don't forget to include a `break` which would "break" out of the conditional once if has executed the condition. A more-indepth look will be provided when we go over loops. + diff --git a/react_week2_fixed/5.md b/react_week2_fixed/5.md new file mode 100644 index 00000000..e9c02875 --- /dev/null +++ b/react_week2_fixed/5.md @@ -0,0 +1,28 @@ +## Arrays + +JavaScript allows arrays, a special type of object. + +This is an example of an array: + +`let fruit = ["Mango", "Apple", "Banana"]` + +It functions as a list. The easiest way to create an array is + +`let array_name = [item1, item2, item3...]` + +To access an item of an array, we reference the **index number** + +`let name = fruit[0]` will return the first item in the array, which is "Mango". In JS, indexing starts at "0", meaning that the first item is referenced as 0. + +What happens if we want to change an item in an array? We do this: + +`fruit[0]=Watermelon` This assigns the first item to the value "Watermelon" + +We can use different methods to perform a variety of functions. For instance, the following block will give us the length of the fruit array. + +`let x = fruit.length();` + +There are several other methods: + +![images](https://www.oreilly.com/library/view/javascript-and-jquery/9781118531648/images/p530-001.jpg) + diff --git a/react_week2_fixed/6.md b/react_week2_fixed/6.md new file mode 100644 index 00000000..b8df7857 --- /dev/null +++ b/react_week2_fixed/6.md @@ -0,0 +1,47 @@ +## Loops + +For loops iterate a certain amount of times, often dictated by the amount of items in an array. Let's look at an example and dissect it from there: + +JavaScript writes a for loop like this: + +You've probably seen for loops written similarly from other language: + +``` javascript + let buttoncolor = ["Red", "Blue", "Green", "Yellow", "Maroon", "Black"]; + let i; + for (i = 0; i < buttonColor.length; i++) { + console.log(buttonColor[i] + ", ") + } + while (i < buttonColor.length) { + + } + +``` + +This script will iterate 5 times and will print this: `Red, Blue, Green, Yellow, Maroon, Black` + +where x is executed once before the code block, y defines the condition to the execution of the code block, and z executes after the code block has been executed. + +To exit out of a loop, use the `break` keyword and to skip to the next iteration, use the `continue` keyword. + +Instead of using the traditional for loop, JavaScript provides an easier-to-read loop: + + + +## For Each Loop + +The For Each loop is a way to iterate through an object's properties. + +```javascript +let sum = 0; +let obj = {prop1: 5, prop2: 13, prop3: 8}; + +for each (let item in obj) { + sum += item; +} + +console.log(sum); // logs "26", which is 5+13+8 +``` + + + diff --git a/react_week2_fixed/7.md b/react_week2_fixed/7.md new file mode 100644 index 00000000..a965517f --- /dev/null +++ b/react_week2_fixed/7.md @@ -0,0 +1,36 @@ +## While Loops + +While loops iterate through the loop for as long as the condition is true. Let's look at an example: + +``` javascript + let buttontext = ""; + let i = 0; + while (i < 10) { + buttontext += "
The number is " + i; + i++; +} +console.log(buttontext) +``` + +This loop iterates 0-9 times, so our result will look like this: + +`The number is 0 +The number is 1` and so forth. The while loop iterated until i became 10, and then stopped iterating. The `i++` function adds 1 to i and increments it. `i--` would decrement the code. + +The general format of the while loop is as follows: + +`while (condition) {` + +`code to be executed` + +`}` + +What would this print? + +```javascript +let button=""; +let x=0; +while(x<10){ + console.log(x) +} +``` \ No newline at end of file diff --git a/react_week2_fixed/8.md b/react_week2_fixed/8.md new file mode 100644 index 00000000..799dcf84 --- /dev/null +++ b/react_week2_fixed/8.md @@ -0,0 +1,26 @@ +## .map() + + + +Using the `map()` keyword simplifies the indexing of arrays and returns the value you want. +Let's assume that you recieve an array with the name and age of several people. However, you only want the ages of the people. + +```javascript +let button = [ + { color: "blue", text: 'click me!' }, + { color: "red", text: 'test button' }, + { color: "black", text: 'generate!' }, + { color: "green", text: 'see results!' } +]; +// we want the color of the button +``` + +You can use `.map()` to return the color of this object. + +```javascript +const buttoncolor = button.map(button => button.color); +``` + +`.map` looks through each individual element of an array and returns only what we are looking for. + +Write a `.map()` function to return the text in this object. \ No newline at end of file diff --git a/react_week2_fixed/9.md b/react_week2_fixed/9.md new file mode 100644 index 00000000..d8415422 --- /dev/null +++ b/react_week2_fixed/9.md @@ -0,0 +1,36 @@ +## .reduce() + +Just like `.map()`, `.reduce()` looks through all the elements in an array but only returns one value that you want. Let's look at an example: + +```javascript +let button = [ + { + id: 1, + text: "1", + value: 1, + }, + { + id: 2, + text: "+", + value: 0 , + }, + { + id: 3, + text: "2", + value: 2, + } +]; +// we want the largest value in this array +``` + +Using `.reduce()`, we'll be able to find the oldest person in the array: + +```javascript +let largestvalue = button.reduce(function (largevalue, button) { + return (largevalue.value || 0) > button.value ? largevalue : button; +}, {}); +``` + +Naming the accumulator `largevalue` is a way to check each element in an array. If one value is larger than the other, then that value becomes the new `largevalue`. + +Use `.reduce()` to find the youngest person in the array. \ No newline at end of file