+
+```
+
+```
+var app6 = new Vue({
+ el: '#app-6',
+ data: {
+ message: 'Hello Vue!'
+ }
+})
+```
diff --git a/3 JavaScript/docs/14 - Ajax.md b/3 JavaScript/docs/14 - Ajax.md
new file mode 100644
index 00000000..d0593c58
--- /dev/null
+++ b/3 JavaScript/docs/14 - Ajax.md
@@ -0,0 +1,180 @@
+
+# AJAX
+
+AJAX stands for "asynchronous javascript and XML", and allows you to execute HTTP requests from JavaScript. You can read more about AJAX [here](https://developer.mozilla.org/en-US/docs/AJAX/Getting_Started), [here](https://developer.mozilla.org/en-US/docs/AJAX) and [here](https://www.w3schools.com/xml/ajax_intro.asp).
+
+
+- [AJAX in Axios](#ajax-in-axios)
+ - [Setting Query Parameters](#setting-query-parameters)
+ - [Setting Custom Request Headers](#setting-custom-request-headers)
+ - [Sending Data](#sending-data)
+- [AJAX in Vanilla JavaScript](#ajax-in-vanilla-javascript)
+- [AJAX in jQuery](#ajax-in-jquery)
+- [CORS](#cors)
+- [JSONP](#jsonp)
+
+
+
+## AJAX in Axios
+
+[Axios](https://github.com/axios/axios) is a JavaScript library which handles AJAX more succinctly. Ultimately it's built upon vanilla JavaScript, so it doesn't offer anything you can't otherwise do with vanilla JS.
+
+```es6
+axios({
+ method: 'get',
+ url: 'https://favqs.com/api/qotd'
+}).then((response) => {
+ console.log(response.data)
+})
+```
+
+### Setting Query Parameters
+
+You can set query parameters using string concatenation or by setting the `params` property. Just remember that if you use string concatenation, you may have to use `encodeURIComponent` if the value has special characters in it. If you use `params` with Axios, it will automatically encode your parameters for you.
+
+```javascript
+let business_name = 'Schmitt & Associates'
+let url1 = "http://example.com/?business=" + business_name
+let url2 = "http://example.com/?business=" + encodeURIComponent(business_name)
+console.log(url1) // INVALID: http://example.com/?business=Schmitt & Associates
+console.log(url2) // VALID: http://example.com/?business=Schmitt%20%26%20Associates
+```
+
+The code below sends the request to `https://opentdb.com/api.php?amount=10&category=18&difficulty=easy`
+
+```javascript
+axios({
+ method: 'get',
+ url: 'https://opentdb.com/api.php',
+ params: {
+ amount: 10,
+ category: 18,
+ difficulty: 'easy'
+ }
+}).then((response) => {
+ this.questions = response.data.results
+})
+```
+
+### Setting Custom Request Headers
+
+Depending on the API specification, you may need to put an API key inside the headers of the request.
+
+```javascript
+axios({
+ method: 'get',
+ url: 'https://favqs.com/api/qotd',
+ headers: {
+ 'x-api-key': 'api_key'
+ }
+}).then((response) => {
+ console.log(response.data)
+})
+```
+
+### Sending Data
+
+```javascript
+axios({
+ method: 'post',
+ url: 'https://favqs.com/api/qotd',
+ data: {
+ name: 'joe',
+ age: '34'
+ }
+}).then((response) => {
+ console.log(response.data)
+})
+```
+
+## AJAX in Vanilla JavaScript
+
+Here's how to execute an AJAX request in native JavaScript. You can read more about XMLHttpRequest [here](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest). If you have many query parameters, consider using a function to [convert an object](https://stackoverflow.com/questions/111529/how-to-create-query-parameters-in-javascript). Remember status 200 means 'success'.
+
+```javascript
+let xhttp = new XMLHttpRequest();
+xhttp.onreadystatechange = function() {
+ if (this.readyState === 4 && this.status === 200) {
+ console.log(this.responseText);
+ }
+};
+xhttp.open("GET", 'https://api.iify.org/?format=json');
+xhttp.send();
+```
+
+The possible values for `readyState` are shown below, you can find more info [here](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/readyState)
+- 0 UNSENT: the request has not yet been sent
+- 1 OPENED: the connection has been opened
+- 2 HEADERS_RECEIVED: the response headers have been received
+- 3 LOADING: the response body is loading
+- 4 DONE: the request has been completed
+
+
+Adding a key-value pair to the request header is done by invoking `setRequestHeader` when the connection is open.
+
+```javascript
+let xhttp = new XMLHttpRequest();
+xhttp.onreadystatechange = function() {
+ if (this.readyState === 1) {
+ xhttp.setRequestHeader('Authorization', 'Token token="a1b2c3"')
+ } else if (this.readyState === 4 && this.status === 200) {
+ let data = JSON.parse(xhttp.responseText);
+ // do something with data
+ } else if (this.readyState === 4 && this.status === 404) {
+ // handle 404
+ }
+};
+xhttp.open("GET", url);
+xhttp.send();
+```
+
+
+It's possible to hide the messiness inside a function by passing a callback function.
+
+```javascript
+function http_get(url, success) {
+ let xhttp = new XMLHttpRequest();
+ xhttp.onreadystatechange = function() {
+ if (this.readyState === 4 && this.status === 200) {
+ let data = JSON.parse(xhttp.responseText);
+ success(data);
+ }
+ };
+ xhttp.open("GET", url);
+ xhttp.send();
+}
+
+http_get("https://api.ipify.org/?format=json", function(data) {
+ console.log(data);
+});
+```
+
+
+## AJAX in jQuery
+
+```javascript
+$.ajax({
+ method: "GET", // specify the HTTP Verb
+ url: 'https://api.iify.org/?format=json' // specify the URL
+}).done(function(data) {
+ console.log(data); // log the data we get in response
+}).fail(function() {
+ alert("error"); // indicate that an error has occurred
+});
+```
+
+
+
+
+
+## CORS
+
+CORS stands for 'cross-origin resources sharing', and represents a relaxation of the [same origin policy](https://en.wikipedia.org/wiki/Same-origin_policy). You can read more about CORS on the [MDN](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS).
+
+If you receive the response "No 'Access-Control-Allow-Origin' header is present on the requested resource", it's because the remote server you're sending to the request from has security controls in place that prevent access from a client. You can read more about CORS [here](https://stackoverflow.com/questions/43871637/no-access-control-allow-origin-header-is-present-on-the-requested-resource-whe) and [here](https://security.stackexchange.com/questions/108835/how-does-cors-prevent-xss).
+
+
+## JSONP
+
+JSONP (short for "JSON with Padding") is an additional security feature some APIs offer or require. You can read more about JSONP [here](https://stackoverflow.com/questions/3839966/can-anyone-explain-what-jsonp-is-in-layman-terms) and [here](https://stackoverflow.com/questions/16097763/jsonp-callback-function).
+
diff --git a/3 JavaScript/docs/More Ajax.md b/3 JavaScript/docs/More Ajax.md
new file mode 100644
index 00000000..4d044777
--- /dev/null
+++ b/3 JavaScript/docs/More Ajax.md
@@ -0,0 +1,523 @@
+
+# More ways to make an Ajax request
+
+## API
+
+API stands for "application programming interface", it's a standardized way to send and receive data from a web service via HTTP requests (GET, POST, PUT, DELETE). For example, try executing this url in your browser `http://api.forismatic.com/api/1.0/?method=getQuote&key=457653&format=json&lang=en`. This is an api for random inspiration quotes. Note the query parameters which specify a key, format, and language. When you enter it in your browser, you execute an HTTP GET request. You can do the same thing from JavaScript, then process the result and control how it's displayed to the user. Websites are for people, APIs are for programs.
+
+There are many free and open APIs available on the internet that can provide many different forms of data. You can find some public APIs [here](https://github.com/toddmotto/public-apis) and [here](https://catalog.data.gov/dataset?q=-aapi+api+OR++res_format%3Aapi#topic=developers_navigation). When trying to access a url, remember the [parts of a url](https://doepud.co.uk/images/blogs/complex_url.png). APIs can receive parameters through query parameters and headers. You can see query parameters in the example url. Adding parameters to the request header is done through the `setRequestHeader` function on the `XMLHttpRequest` object.
+
+
+
+### HTTP Methods
+
+HTTP requests include a **method**, which indicates what the intention of the request is. These methods are conventional. You could use `GET` to delete an entry in the database, but you shouldn't. You can find more info [here](https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods), [here](https://en.wikipedia.org/wiki/Hypertext_Transfer_Protocol#Request_methods). The most common HTTP methods parallel the CRUD operations we discussed in Python.
+
+| Method | Equivalent |
+| --- | --- |
+| POST | Create |
+| GET | Retrieve |
+| PUT | Update |
+| DELETE | DELETE |
+
+
+### HTTP Status Codes
+
+The response to an HTTP request will have a **status code** which indicates whether the request was successful or not, and what the error was. You can find a more thorough list of status codes [here](https://en.wikipedia.org/wiki/List_of_HTTP_status_codes).
+
+| Code | Description |
+| --- | --- |
+| 1XX | information |
+| 2XX | success |
+| 3XX | redirection |
+| 4XX | client error |
+| 5XX | server error |
+
+
+## AJAX
+
+AJAX stands for "asynchronous javascript and XML", and allows you to execute HTTP requests from JavaScript, without reloading the page. You can read more about AJAX [here](https://developer.mozilla.org/en-US/docs/AJAX/Getting_Started), [here](https://developer.mozilla.org/en-US/docs/AJAX) and [here](https://www.w3schools.com/xml/ajax_intro.asp).
+
+Here's how to execute an AJAX request in native JavaScript. You can read more about XMLHttpRequest [here](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest). If you have many query parameters, consider using a function to [convert an object](https://stackoverflow.com/questions/111529/how-to-create-query-parameters-in-javascript).
+
+## Make a request
+
+### 1. Create a new XMLHttpRequest
+
+```javascript
+let req = new XMLHttpRequest();
+```
+
+### 2. Define event listeners
+
+Next, define your event listeners. There are four possible events to listen for: `progress`, `load`, `error`, and `abort`.
+
+- You will want to define a `load` listener, which will call some code when your response successfully loads. We will go over how to use the response data later in a callback later.
+- `progress` events happen while you request is pending and waiting to receieve the entire response. This is useful for giving the user a "loading" or "please wait" message.
+- `error` events happen if your request was not successful.
+- `abort` events happen if your request is aborted before it has a chance to finish or error.
+
+```javascript
+let req = new XMLHttpRequest();
+
+req.addEventListener("progress", function(e) {
+ console.log(e.loaded);
+});
+req.addEventListener("error", function(e) {
+ console.log(e.status);
+});
+req.addEventListener("load", function(e) {
+ console.log(req.responseText);
+});
+```
+
+### 3. Open the request
+
+Next, we need to define the method (GET/POST/PUT/DELETE) of our request, and the URL to send our request to.
+
+Keep in mind that when working with an API, the exact URL used is how we define the data we're looking for. While you can pass a simple string of a URL in here, you may want to use either a template string to create a custom URL based on the values a user selects in some input field, or a function to transform an object into a URL query string. Be sure to review [parts of a url](https://doepud.co.uk/images/blogs/complex_url.png) and [converting an object into query paramters](https://stackoverflow.com/questions/111529/how-to-create-query-parameters-in-javascript).
+
+```javascript
+let req = new XMLHttpRequest();
+req.addEventListener("progress", function(e) {
+ console.log(e.loaded);
+});
+req.addEventListener("error", function(e) {
+ console.log(e.status);
+});
+req.addEventListener("load", function(e) {
+ console.log(req.responseText);
+});
+
+req.open("GET", "https://favqs.com/api/qotd");
+```
+
+### 4. Set any request headers
+
+Some APIs expect you to include some information encoded not as a URL, but as request headers. This can be more secure, as it hides things like authentication keys from the user. Most of the time this step is not required, but check the documentation of the API you want to use. For more details, check the [MDN](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/setRequestHeader).
+
+```javascript
+let req = new XMLHttpRequest();
+req.addEventListener("progress", function(e) {
+ console.log(e.loaded);
+});
+req.addEventListener("error", function(e) {
+ console.log(e.status);
+});
+req.addEventListener("load", function(e) {
+ console.log(req.responseText);
+});
+req.open("GET", "https://favqs.com/api/qotd");
+
+req.setRequestHeader("Authorization", 'Token token="YOUR_TOKEN_GOES_HERE"');
+```
+
+### 5. Send the request
+
+This is the final step to make a request. Once the request is sent, the `progress`, `load`, `error`, and `abort` events will happen as the response is receieved and run their callback functions.
+
+Order matters! Make sure your request is in the following order, or you won't get the results you expect:
+1. Create a new response
+2. Add event listeners
+3. Open the request
+4. Set headers
+5. Send the request
+
+```javascript
+let req = new XMLHttpRequest();
+req.addEventListener("progress", function(e) {
+ console.log(e.loaded);
+});
+req.addEventListener("error", function(e) {
+ console.log(e.status);
+});
+req.addEventListener("load", function(e) {
+ console.log(req.responseText);
+});
+req.open("GET", "https://favqs.com/api/qotd");
+req.setRequestHeader("Authorization", 'Token token="YOUR_TOKEN_GOES_HERE"');
+req.send()
+```
+
+## Handle the response
+
+Now that we've created a request successfully, we need to expand our callback functions to work with our new data, instead of just `console.log`-ing the response.
+
+### 1. JSON and XML
+
+JSON and XML are two popular ways of formatting data. Most APIs either return information in JSON or XML.
+
+[JSON](http://www.json.org/) is very similar to javascript object declarations, but the major difference is that the names are strings, and the values can only be numbers, strings, arrays, booleans, null, or objects. You can read more about the differences between JSON and JavaScript objects [here](https://stackoverflow.com/questions/8294088/javascript-object-vs-json).
+
+```json
+{"employees":[
+ { "firstName":"John", "lastName":"Doe" },
+ { "firstName":"Anna", "lastName":"Smith" },
+ { "firstName":"Peter", "lastName":"Jones" }
+]}
+```
+
+[XML](https://developer.mozilla.org/en-US/docs/XML_Introduction) resembles HTML, it has tags, and attributes, and inner text.
+
+```xml
+{{ message }}
+ +${response.quote.body}
+ + ` + textTarget.innerHTML = resultHTML; +}); + +... +``` + +### 4. Update the other listeners too + +```javascript +... + +req.addEventListener("progress", function(e) { + console.log(e.loaded); + target.innerText = "Loading..."; +}); +req.addEventListener("error", function(e) { + console.log(e.status); + target.innerText = "Cannot load quote. Try again later!"; +}); +req.addEventListener("load", function(e) { + ... +}); + +... +``` + +### 5. Use an event to fire the request + +Here's our code so far: + +```javascript +let target = document.getElementById("target"); + +let req = new XMLHttpRequest(); +req.addEventListener("progress", function(e) { + console.log(e.loaded); + target.innerText = "Loading..."; +}); +req.addEventListener("error", function(e) { + console.log(e.status); + target.innerText = "Cannot load quote. Try again later!"; +}); +req.addEventListener("load", function(e) { + console.log(req.responseText); + let response = JSON.parse(req.responseText); + console.log(response); + + let resultHTML = ` +${response.quote.body}
+ + ` + textTarget.innerHTML = resultHTML; +}); +req.open("GET", "https://favqs.com/api/qotd"); +req.setRequestHeader("Authorization", 'Token token="YOUR_TOKEN_GOES_HERE"'); +req.send() +``` + +Right now, our Ajax request is sent immediately as the page loads. This usually isn't the desired behavior. Most of the time an Ajax request is sent as the result of some sort of user input. I have a "get quote" button on my page, and I'm going to make this Ajax request send when the "get quote" button is pressed by the user. First, select the element and add an event listener. + +```javascript +let target = document.getElementById("target"); +let getQuoteButton = document.getElementById("quote-button"); + +getQuoteButton.addEventListener("click", function(e) { + // code goes here +}); +``` + +Next, put the entire body of code for making, parsing, and using a request inside the event listener. Now the page will only make the request and update the DOM using the response when the "get quote" button is clicked. + +```javascript +let target = document.getElementById("target"); +let getQuoteButton = document.getElementById("quote-button"); + +getQuoteButton.addEventListener("click", function(e) { + let req = new XMLHttpRequest(); + req.addEventListener("progress", function(e) { + console.log(e.loaded); + target.innerText = "Loading..."; + }); + req.addEventListener("error", function(e) { + console.log(e.status); + target.innerText = "Cannot load quote. Try again later!"; + }); + req.addEventListener("load", function(e) { + console.log(req.responseText); + let response = JSON.parse(req.responseText); + console.log(response); + let resultHTML = ` +${response.quote.body}
+ + ` + textTarget.innerHTML = resultHTML; + }); + req.open("GET", "https://favqs.com/api/qotd"); + req.setRequestHeader("Authorization", 'Token token="YOUR_TOKEN_GOES_HERE"'); + req.send() +}); +``` + +## Advanced + +### Fetch and ES6 Promises +[Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch) provides a newer, easier-to-use method to send HTTP requests and process their responses compared to `XMLHttpRequest`. + +Here's how to send a `GET` request and process it into JSON: +```js +fetch('https://api.ipify.org/?format=json') + .then(function(response) { + return response.json(); + }) + .then(function(myJson) { + console.log(myJson); + }) + .catch(error => console.error(error)); +``` +This is a basic `GET` request sent to `https://api.ipify.org/?format=json`. `fetch()` uses JS **Promises** to handle processing the request asynchronously. Any `.then(callback)` calls make sure to only process the callback after the previous function has been completed. `.catch(callback)` handles any errors returned from the request. The simplest use of `fetch()` takes one argument — the path to the resource you want to fetch — and returns a Promise containing the response (a Response object). + +#### Request options +The fetch() method can optionally accept a second parameter, an object that allows you to control a number of different settings. Some common parameters are below with their optional values. You can read more about others [**here**](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch). + +- method: [\*GET, POST, PUT, DELETE, etc.] +- mode: [no-cors, cors, \*same-origin] +- cache: [\*default, no-cache, reload, force-cache, only-if-cached] +- credentials: "same-origin", [include, same-origin, \*omit] +- redirect: [manual, \*follow, error] +- referrer: "no-referrer", // no-referrer, *client +- body: The body you want to add to your request (not available for GET or HEAD requests) +\*Note: Starred options are the default setting. + +This example is sending a `POST` request with some form data. +```js +let header = new Headers() +header.append('Authorization', 'Token token="hello world!
`
+
+**Vanilla**
+```html
+
+
+```
+
+**Vue**
+```html
+
+
+
+```
+
+## Setting Inner HTML
+
+Both of these result in `{{message}}
+hello world!
`
+
+**Vanilla**
+```html
+
+
+```
+
+**Vue**
+```html
+
+
+
+
+```
+
+## Setting Attributes
+
+Both of these result in `hover over me
`
+
+
+**Vanilla**
+```html
+hover over me
+
+```
+
+**Vue**
+```html
+
+
+
+```
+
+
+## Handling Events
+
+Both these result in a button that alerts 'hello world!'.
+
+**Vanilla**
+```html
+
+
+```
+
+**Vue**
+```html
+hover over me
+
+
+
+
+```
+
+## Getting Input
+
+Both these result in a button that alerts whatever text typed into the text field.
+
+**Vanilla**
+```html
+
+
+
+```
+
+**Vue**
+```html
+
+
+
+
+
+```
+
+## Generating Elements
+
+
+**Vanilla**
+```html
+
+
+
+```
diff --git a/3 JavaScript/labs/Lab 04 Vue Todos.md b/3 JavaScript/labs/Lab 04 Vue Todos.md
new file mode 100644
index 00000000..c9c91f3e
--- /dev/null
+++ b/3 JavaScript/labs/Lab 04 Vue Todos.md
@@ -0,0 +1,70 @@
+# Lab 4: Vue Todos
+
+Use Vue to create a simple todo list in the browser.
+
+Your Vue app will need to do a few things:
+ * Store an array of objects (the todos themselves)
+ * List each todo
+ * Allow the user to add and remove todos
+ * Allow a user to toggle if a task is complete or not
+
+ Reference the Vue.js [Introduction Guide](https://vuejs.org/v2/guide/).
+
+## How to get started
+
+* Create a simple local HTML project with the following structure:
+```
+todos
+├── css
+│ └── site.css
+├── index.html
+└── js
+ └── site.js`
+```
+
+## How to serve your application
+
+* Install this plug-in for VSCode: `https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer`
+* Make sure VSCode is open to the same folder as your `index.html`
+* On the bottom bar in VSCode you should see an icon that says `Go Live`
+* Click it and you're serving up a local version of your html file. It also auto-reloads everytime you make a change, neat right?
+
+## How to structure your `index.html`
+
+Example: `index.html`
+```html
+
+
+
+
+
+
+ -
+
- {{fruit}} +
+ {{ message }}
+
+
+
+
+
+
+
+
+```
+
+### How to start a simple Vue app:
+```js
+new Vue({
+ el: '#app',
+ data: {
+ message: 'Hello world!'
+ }
+})
+```
+
+**Now if you check your browser you should see the message `Hello world!`**
+**That means everything is working**
diff --git a/3 JavaScript/labs/Lab 05 Quotes in Vue.md b/3 JavaScript/labs/Lab 05 Quotes in Vue.md
new file mode 100644
index 00000000..1293d304
--- /dev/null
+++ b/3 JavaScript/labs/Lab 05 Quotes in Vue.md
@@ -0,0 +1,22 @@
+# Lab 5: FavQs in Vue
+
+
+Build a Vue application that allows a user to search for quotes on FavQs.
+
+Requirements:
+- Your app must use Vue to fetch data and interact with the results.
+- Let the user enter a search term and select whether to search by keyword, author, or tag.
+- Implement pagination buttons when the search returns more than 25 quotes.
+- When the page first loads, show the user a set of completely random quotes.
+- You must have at least one Vue component in your app.
+
+Resources:
+- [FavQs API](https://favqs.com/api)
+- [Vue documentation](https://vuejs.org/v2/guide/)
+- [Using Axios to Consume APIs](https://vuejs.org/v2/cookbook/using-axios-to-consume-apis.html)
+- [Axios documentation](https://github.com/axios/axios)
+
+Hints:
+- Read the API documentation!
+- Remember to use your Vue app `data` as your single source of truth.
+- You'll need to set the `Authorization` header for the FavQs API to work.
\ No newline at end of file
diff --git a/3 JavaScript/labs/Lab 06 Mini-Capstone.md b/3 JavaScript/labs/Lab 06 Mini-Capstone.md
new file mode 100644
index 00000000..6ebe5614
--- /dev/null
+++ b/3 JavaScript/labs/Lab 06 Mini-Capstone.md
@@ -0,0 +1,27 @@
+# Lab 6: Mini-Capstone: Any API in Vue
+
+Choose any API and write a page to interact with it. Be warned: some have particular security restrictions, and some return results in XML (which makes data more difficult to parse).
+
+Your page should take in some sort of user input and return different results based on that input, and your page should offer some sort of interactivity in the results. You should also apply some sort of basic professional styling -- using a CSS framework is totally fine. Your webpage should utilize Vue to build the interface and Axios for making ajax requests.
+
+https://vuejs.org/v2/cookbook/using-axios-to-consume-apis.html
+
+## Example APIs
+
+You can view long lists of public APIs [here](https://github.com/toddmotto/public-apis), [here](https://github.com/abhishekbanthia/Public-APIs), and [here](https://apilist.fun/).
+
+### User API
+
+There are several APIs to get fake user data which can be used to develop and test front-ends. Show a list of users with their attributes. You may also add a user detail page and pagination.
+
+- [randomuser.me](https://randomuser.me/documentation)
+- [reques.in](https://reqres.in/)
+- [jsonplaceholder](https://jsonplaceholder.typicode.com/)
+
+### Other APIs
+
+- Weather: [openweathermap.org](http://openweathermap.org/api)
+- Number Facts: [numbersapi.com](http://numbersapi.com/#42)
+- Photos: [flickr.com](https://www.flickr.com/services/api/) (requires key)
+- Astronomical Data: [api.nasa.gov](https://api.nasa.gov/#live_example)
+- USA Population Data: [datausa.io](https://datausa.io/about/api/)
diff --git a/4 Django/__init__.py b/4 Django/__init__.py
new file mode 100644
index 00000000..e69de29b
diff --git a/4 Django/docs/01 Django Overview.md b/4 Django/docs/01 Django Overview.md
new file mode 100644
index 00000000..14b0e4d1
--- /dev/null
+++ b/4 Django/docs/01 Django Overview.md
@@ -0,0 +1,112 @@
+
+# Django Overview
+
+- [Overview](#overview)
+- [Management Commands](#management-commands)
+ - [Custom Management Commands](#custom-management-commands)
+- [Resources](#resources)
+ - [General](#general)
+ - [Tutorials](#tutorials)
+ - [Videos](#videos)
+ - [Forums](#forums)
+ - [Libraries](#libraries)
+ - [Tools](#tools)
+
+
+
+## Overview
+
+Django is a back-end framework written in Python. Django is a **high-level framework** meaning that it provides a great deal of functionality for you, but you have to connect the pieces together. You have to learn things the 'django way'. This also means that isn't necessarily any deeper intuition behind things, the only answer may be "that's just how Django does things".
+
+For comparison, [Flask](http://flask.pocoo.org/) is also a Python-based back-end framework, but whereas Django is high-level, Flask is low-level, meaning you're only given the most barebones functionality and have to do everything else yourself. Again, it's a balance of convenience and control.
+
+The core of Django is the [request-response cycle](django_diagram.png). A request is received by the server, it follows a **route**, actives a **view**, which then uses **models** and a **template** to generate a **response**, which is then rendered in the user's browser. The following docs will cover each of these topics in turn, but bear in mind that they're all interdependent.
+
+- Route: a mapping between a URL and a view
+- View: a Python function which receives a request (url) and creates a response (html+css+js)
+- Template: an HTML file with special syntax for filling in data
+- Model: a Python class that parallels a database table
+
+Django applications are contained in a **project** which can have multiple **apps**. Each app has its own routes, views, templates, and models. How you divide up the functionality of the application is up to your discretion, what's important is that it makes sense to you.
+
+
+
+## Management Commands
+
+Management commands are executed in a terminal to perform operations on a django project. You can view a full list of the management commands [here](https://docs.djangoproject.com/en/3.2/ref/django-admin/)
+
+| Command | Description |
+| --- | --- |
+| `django-admin startproject myproject` | create a Django project |
+| `python manage.py startapp myapp` | create an app |
+| `python manage.py runserver` | run the server |
+| `python manage.py makemigrations` | stage changes to the database |
+| `python manage.py migrate` | apply changes to the database |
+| `python manage.py createsuperuser` | create an admin (which has access to the admin panel) |
+| `python manage.py collectstatic` | collects static files from each app and puts them into one folder, used for deployment |
+| `python manage.py shell` | open an interactive session, often used to do database operations |
+
+### Custom Management Commands
+
+If you need to execute some Python code to perform administrative operations (load data into a database from a file or API, erase saved files, etc), you can write a custom management command. These are executed just like other management commands (`runserver`, `startapp`, `migrate`, etc). To create a custom management command, first create a `management` folder inside your app. Inside of that, create a `commands` folder. Inside of that, create a `mycommand.py`. \
+
+- myproject
+ - myproject
+ - myapp
+ - management
+ - commands
+ - mycommand.py
+
+
+Inside your `mycommand.py`, write the following.
+
+```python
+from django.core.management.base import BaseCommand
+
+class Command(BaseCommand):
+
+ def handle(self, *args, **options):
+ # write the code here
+ print('hello!')
+```
+
+Now you can execute this function using `python manage.py - '
+ for fruit in fruits:
+ html += '
- ' + fruit + ' ' + html += '
-
+ {% for fruit in fruits %}
+
- {{ fruit }} + {% endfor %} +
+```
+
+## Template Inheritance: `block` and `extend`
+
+You can have one template 'inherit' from another, meaning the child template's content will be included inside the parent. You can accomplish this by putting a `{% block content %} / {% endblock %}` in the parent and an `{% extends '{% block title %}{% endblock %}
+this is the page content for the index page
+{% endblock %} +``` + +**detail.html** +````html +{% extends 'myapp/base.html' %} +{% block title %}Details{% endblock %} +{% block content %} +this is content for the detail page
+{% endblock %} +```` + +## Filters + +Filters allow you to change how values are rendered in the template. + + diff --git a/4 Django/docs/05 Forms.md b/4 Django/docs/05 Forms.md new file mode 100644 index 00000000..fc17ba48 --- /dev/null +++ b/4 Django/docs/05 Forms.md @@ -0,0 +1,149 @@ + + +# Forms + +- [Overview](#overview) +- [Django Forms](#django-forms) + - [The ModelForm Class](#the-modelform-class) + - [Using Forms with CSS Frameworks](#using-forms-with-css-frameworks) + + + +## Overview + +A `form` is an HTML element that can transmit data from the front-end (client) to the back-end (server). Read more about forms [here](../../2%20Flask%20+%20HTML%20+%20CSS/docs/11%20HTML%20Forms.md). There are 5 important parts to a form: + +1. The `action` is the path or url to which the form's data will be submitted. +2. The `method` is the HTTP method to send the request in (POST, GET). +3. The `input` elements inside a form need name attributes, which will be used to retreive the data on the back-end. +4. The `