bitprj · vvennela · Feb 19, 2020 · Feb 19, 2020 · Feb 19, 2020 · Feb 19, 2020
diff --git a/mongoDB_cirriculum_week1/F1.2.md 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.
diff --git a/mongoDB_cirriculum_week1/F1.3.md 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. 
diff --git a/mongoDB_cirriculum_week1/F1.4.md 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
+<html>
+  <head>
+  </head>
+  <body>
+    <h3>My First Blog</h3>
+    <div id="content">
+      Hi! This is an example of how to use Stitch!
+    </div>
+    <hr>
+    <div id="comments"></div>
+  </body>
+</html>
+```
+
+## Step 2: Include the Stitch SDK
+
+Include the following <script>  in the <head> file. This allows our HTML page to link and communicate with the Stitch application.
+
+```javascript
+<script src="https://s3.amazonaws.com/stitch-sdks/js/bundles/4/stitch.js"></script>
+```
+
+## Step 3: Initialize the Stitch client
+
+Paste this below the SDK in the head tag:
+
+Replace the "<your-app-id>" with your app id, which you can find on the clients page of the Stitch homepage
+
+```javascript
+<script>
+  const client = stitch.Stitch.initializeDefaultAppClient("<your-app-id>");
+  const mongodb = client.getServiceClient(
+    stitch.RemoteMongoClient.factory,
+    "mongodb-atlas"
+  );
+  const db = mongodb.db("blog");
+</script>
+```
+
+## Step 4: Displaying Comments
+
+Add the following functions to the <script> tag:
+
+```javascript
+function displayComments() {
+  db.collection("comments")
+    .find({}, {limit: 1000})
+    .toArray()
+    .then(docs => {
+      const html = docs.map(doc => `<div>${doc.comment}</div>`);
+      document.getElementById("comments").innerHTML = html;
+    });
+}
+```
+
+```javascript
+function displayCommentsOnLoad() {
+  client.auth
+
+    .loginWithCredential(new stitch.AnonymousCredential())
+
+    .then(displayComments)
+    .catch(console.error);
+}
+```
+
+Add this function in the <body> tag:
+
+```javascript
+<body onload="displayCommentsOnLoad()">
+```
+
+## Step 5: Add a form 
+
+Add this function to the <script> tag:
+
+```javascript
+function addComment() {
+  const newComment = document.getElementById("new_comment");
+  console.log("add comment", client.auth.user.id)
+  db.collection("comments")
+    .insertOne({ owner_id : client.auth.user.id, comment: newComment.value })
+    .then(displayComments);
+  newComment.value = "";
+}
+```
+
+Finally, add the following to the bottom of the body:
+
+```javascript
+<hr>
+Add comment:
+<input id="new_comment"><input type="submit" onClick="addComment()">
+```
+
+Congrats! Your blog now works. Try refreshing the file and commenting and Stitch will record the data. 
+
+
+
diff --git a/mongoDB_cirriculum_week1/F1.5.md b/mongoDB_cirriculum_week1/F1.5.md
@@ -0,0 +1,27 @@
+# F1.4: Compass
+
+Compass is another vital part of operating MongoDB. From the website: "As the GUI for MongoDB, MongoDB Compass allows you to make smarter decisions about document structure, querying, indexing, document validation, and more."
+
+MongoDB also allows you to contain and securely store sensitive data.
+
+Download it here: "https://www.mongodb.com/download-center/compass?tck=docs_compass"
+
+Opening Compass opens this screen:
+
+![Screen Shot 2020-03-27 at 8.30.23 AM](/Users/vishnuv/Library/Application Support/typora-user-images/Screen Shot 2020-03-27 at 8.30.23 AM.png)
+
+To paste the connection string, go back into Atlas and follow these steps:
+
+Click "Connect"on this view:
+
+![Screen Shot 2020-03-27 at 8.37.46 AM](/Users/vishnuv/Library/Application Support/typora-user-images/Screen Shot 2020-03-27 at 8.37.46 AM.png)
+
+Complete all the prompts on the "connect" view and enter your own IP address. On the next page, select the option of connecting with Compass. On the page after that, select "I have MongoDB Compass"
+
+![Screen Shot 2020-03-27 at 8.50.42 AM](/Users/vishnuv/Library/Application Support/typora-user-images/Screen Shot 2020-03-27 at 8.50.42 AM.png)
+
+After you copy the url code, paste it into Compass and click connect. You should get a screen that looks like this:
+
+![Screen Shot 2020-03-27 at 8.52.35 AM](/Users/vishnuv/Library/Application Support/typora-user-images/Screen Shot 2020-03-27 at 8.52.35 AM.png)
+
+Accessing all this data means that you can take a closer look at the clusters formed. Try exploring the data to gain a greater understanding of how Compass functions and manipulates databases.
diff --git a/mongodb_cirriculum b/mongodb_cirriculum
@@ -0,0 +1 @@
+
diff --git a/react_week2_fixed/1.md b/react_week2_fixed/1.md
@@ -0,0 +1,14 @@
+<!--Intro to JavaScript-->
+
+# What is JavaScript? 
+
+JavaScript is a dynamic programming which can enhance the user's experience and allows the user to interact with the webpage.
+
+JavaScript owes its dynamic identity to the HTML DOM(Document Object Model). The HTML DOM is a tree which sets up what and how HTML is written: 
+
+![DOM HTML tree](https://www.w3schools.com/js/pic_htmltree.gif)
+
+The HTML DOM is the standard to which you can add, delete and change HTML elements on the webpage. 
+
+
+
diff --git a/react_week2_fixed/10.md b/react_week2_fixed/10.md
@@ -0,0 +1,38 @@
+## .filter()
+
+`.filter()`, like both `.map()` and `.reduce()` is a way to generate values that you'd want. 
+
+```javascript
+let button = [
+  {
+    id: 1,
+    text: "Hi!",
+    language: "english" ,
+  },
+  {
+    id: 2,
+    text: "Hola!",
+    language: "spanish" ,
+  },
+  {
+    id: 3,
+    text: "Thanks!",
+    language: "english",
+  },
+  {
+    id: 4,
+    text: "Gracias!",
+    language: "spanish",
+  }
+];
+// we want two arrays, one for the button language that is spanish and the other that is english 
+```
+
+We'd create the two arrays like this:
+
+```javascript
+const spanish  = button.filter(button => button.language === "spanish");
+const english = button.filter(button => button.language === "english");
+```
+
+This checks if the value in `language` returns true for each function, which would place that value in the array. 
diff --git a/react_week2_fixed/11.md b/react_week2_fixed/11.md
@@ -0,0 +1,68 @@
+## Arrow Functions
+
+ES6 introduced "Arrow Functions", which make using functions easier. 
+
+Here's the "Hello World!" as how we did it earlier
+
+``` JavaScript
+document.write("Hello World!");
+```
+
+And here's "Hello World" using an Arrow Function
+
+``` JavaScript
+const hello = () => "Hello World!"
+```
+
+
+Notice that the function got shorter. If the function has one value and has a return function, we can omit the `function` and `return` statement all together. 
+
+This provides compactness and clarity to the code. 
+
+Let's write this function as an arrow function:
+
+```javascript
+let addition = function (x,y){
+  return x+y
+}
+```
+
+This is how they were traditionally written: 
+
+## Functions
+
+A function in JavaScript is a block of code which is designed to do something. When the function is invoked, the code performs a certain task. In the example below, we want to multiply two numbers. 
+
+``` javascript
+  let x = buttonFunction(4, 3);   
+function buttonFunction = (a, b) => {
+  return a * b;            
+}
+```
+
+
+The result will be 12. 
+
+When the code hits the `return`, the code will stop executing. 
+
+The general format for a function is as follows:
+
+`function name(parameter1, parameter2, parameter3...){`
+
+`code to be executed`
+
+}
+
+Functions are usefull because they can be defined according to our needs and can be used however we see fit. 
+
+Make your own function which adds two numbers!
+
+Answer:
+
+```javascript
+let x = buttonAdd(30,50)
+function buttonAdd(a,b){
+  return a+b;
+}
+```
+
diff --git a/react_week2_fixed/12.md b/react_week2_fixed/12.md
@@ -0,0 +1,39 @@
+## Objects
+
+Almost all objects in JavaScript are parts of the keyword `Object`. Objects are usually initialized with the `Object()` method. 
+
+ Objects "inherit" their properties from other objects, often called "object prototypes." This inheritance based on linking prototypes together is known as the "prototype chain." Prototypes are defined by `Object.prototype`
+
+Objects can be thought of as a variable that holds many data types in **name:value** pairs. We can access the data stored in objects by calling the name. 
+
+```JavaScript
+let button = {
+ 	name: "color changer",
+  text: "this changes colors",
+  buttonWords: () => this.name + " " + this.text
+  }
+};
+```
+
+We can call the properties in this object in two ways: 
+
+```JavaScript
+object.name
+// or 
+object['name']
+```
+
+We could call the first name of the `person` variable like this:
+
+```JavaScript
+let name = button.name;
+// or
+let name = button['name'];
+```
+
+We've been using objects and their methods this whole time! 
+
+```JavaScript
+console.log("Hello World!")
+```
+