iamshaunjp · Evelyn-ZYW · Jul 24, 2021 · Jul 27, 2021 · Jul 28, 2021 · Jul 30, 2021
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+  "git.ignoreLimitWarning": true
+}
diff --git a/chapter_10_todos/app.js b/chapter_10_todos/app.js
@@ -0,0 +1,61 @@
+//ADD TODOS
+//1. get a reference to this form, and store it to a variable called addForm
+const addForm = document.querySelector('.add');
+
+//4. since we want to inject the template string into the <ul>, we need to get a reference of it
+const list = document.querySelector('.todos');
+
+//3. create a function to generate a template for the todo in <li> tag, and inject into the DOM.
+const generateTemplate = todo => {
+  const html = `
+    <li class="list-group-item d-flex justify-content-between align-items-center">
+      <span>${todo}</span>
+      <i class="far fa-trash-alt delete"></i>
+    </li>
+  `;
+  //5. inject the template into the list
+  list.innerHTML += html;
+};
+
+//2. attach a submit event listener to the form. We are not listening to the submit event, and we take the event as a parameter into the callback function
+addForm.addEventListener('submit', e => {
+  //below method prevents the web page from reloading
+  e.preventDefault();
+  const todo = addForm.add.value.trim();
+  if (todo.length) {
+    generateTemplate(todo);
+    addForm.reset();
+  }
+});
+
+//DELETE TODOS
+//1. attach event listener to the list (ul)
+//2. when we click on the element, we check whether the target element was 'delete' (the trash can)
+//3. if it was, then remove the parent element of that trash can; if not we do nothing
+list.addEventListener('click', e => {
+  if (e.target.classList.contains('delete')) {
+    e.target.parentElement.remove();
+  }
+});
+
+//SEARCH TODOS
+//1. get a reference of the input field directly (not the form with the class of search), becasue we are listening to a keyup event on the input, not a submit eventon the form.
+const search = document.querySelector('.search input');
+
+//4. create a function that filters out the todos that does not include the term and add a class to them; and filters out the todos that include the term and remove the class from them.
+const filterTodos = term => {
+  Array.from(list.children)
+    .filter(todo => !todo.textContent.toLowerCase().includes(term))
+    .forEach(todo => todo.classList.add('filtered'));
+
+  Array.from(list.children)
+    .filter(todo => todo.textContent.toLowerCase().includes(term))
+    .forEach(todo => todo.classList.remove('filtered'));
+};
+
+//2. attach a keyup event listener to the input
+search.addEventListener('keyup', e => {
+  //3. get the user input, and trim it
+  const term = search.value.trim().toLowerCase();
+  filterTodos(term);
+});
diff --git a/chapter_10_todos/index.html b/chapter_10_todos/index.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <script
+      src="https://kit.fontawesome.com/5bb5e30b62.js"
+      crossorigin="anonymous"
+    ></script>
+    <link
+      href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css"
+      rel="stylesheet"
+      integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We"
+      crossorigin="anonymous"
+    />
+    <link rel="stylesheet" href="styles.css" />
+    <title>Todos</title>
+  </head>
+  <body>
+    <div class="container">
+      <header class="text-center text-light my-4">
+        <h1 class="mb-4">Todo List</h1>
+        <form class="search">
+          <input
+            class="form-control m-auto"
+            type="text"
+            name="search"
+            placeholder="search todos"
+          />
+        </form>
+      </header>
+      <ul class="list-group todos mx-auto text-light">
+        <li
+          class="list-group-item d-flex justify-content-between align-items-center"
+        >
+          <span>play mariokart</span>
+          <i class="far fa-trash-alt delete"></i>
+        </li>
+        <li
+          class="list-group-item d-flex justify-content-between align-items-center"
+        >
+          <span>defeat ganon in zelda</span>
+          <i class="far fa-trash-alt delete"></i>
+        </li>
+        <li
+          class="list-group-item d-flex justify-content-between align-items-center"
+        >
+          <span>make a veggie pie</span>
+          <i class="far fa-trash-alt delete"></i>
+        </li>
+      </ul>
+      <form class="add text-center my-4">
+        <label class="text-light">Add a new todo...</label>
+        <input class="form-control m-auto" type="text" name="add" />
+      </form>
+    </div>
+    <script src="app.js"></script>
+  </body>
+</html>
diff --git a/chapter_10_todos/styles.css b/chapter_10_todos/styles.css
@@ -0,0 +1,25 @@
+
+body{
+  background: #352f5b;
+}
+.container{
+  max-width: 400px;
+}
+/* [attribute] selector, it is used  to select element that have specific attributes or attribute values */
+input[type=text],
+input[type=text]:focus{
+  color: #fff;
+  border: none;
+  background: rgba(0,0,0,0.2);
+  max-width: 400px;
+}
+.todos li{
+  background: #423a6f;
+  color: #fff;
+}
+.delete{
+  cursor: pointer;
+}
+.filtered {
+  display: none !important;
+}
diff --git a/chapter_11/date&time.js b/chapter_11/date&time.js
@@ -0,0 +1,31 @@
+//date & times
+
+//constructor - is going to generally create a new object for us.
+
+const now = new Date();
+
+console.log(now);
+
+//the date and time fall under the object data type
+console.log(typeof now); 
+
+//year, months, day, times
+console.log('getFullYear: ', now.getFullYear());
+console.log('getMonth: ', now.getMonth());
+console.log('getDate: ', now.getDate());
+console.log('getDay: ', now.getDay());
+console.log('getHours ', now.getHours());
+console.log('getMinutes ', now.getMinutes());
+console.log('getSeconds', now.getSeconds());
+
+//timestamps
+console.log('timestamps: ', now.getTime());
+
+//date strings
+console.log('date strings: ', now.toDateString());
+
+//time strings
+console.log('time strings: ', now.toTimeString());
+
+//local date and time strings
+console.log('local date and time strings: ', now.toLocaleString());
diff --git a/chapter_11/datefns.js b/chapter_11/datefns.js
@@ -0,0 +1,17 @@
+//date-fns.org
+const now = new Date();
+
+// console.log(dateFns.isToday(now))
+
+// formatting options
+
+console.log(dateFns.format(now, 'YYYY'));
+console.log(dateFns.format(now, 'MMM'));
+console.log(dateFns.format(now, 'dddd'));
+console.log(dateFns.format(now, 'Do'));
+console.log(dateFns.format(now, 'dddd Do MMMM YYYY'));
+
+//comparing dates
+const before = new Date('February 1 2019 12:00:00');
+
+console.log(dateFns.distanceInWords(now, before, {addSuffix: true}))
diff --git a/chapter_11/digitalclock.js b/chapter_11/digitalclock.js
@@ -0,0 +1,22 @@
+//get a reference of the element by its class
+const clock = document.querySelector('.clock');
+
+//create a function to record the current time and store it in an template string to be injected into the DOM
+const tick = ()=>{
+  const now = new Date();
+
+  const h = now.getHours();
+  const m = now.getMinutes();
+  const s = now.getSeconds();
+
+  // console.log(h, m, s)
+  const html = `
+    <span>${h}</span> :
+    <span>${m}</span> :
+    <span>${s}</span>
+  `;
+  clock.innerHTML = html;
+}
+
+//use the setInterval method to call the function every 1 second
+setInterval(tick, 1000);
diff --git a/chapter_11/index.html b/chapter_11/index.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Array Methods</title>
+    <style>
+      body {
+        background: #333;
+      }
+      .clock {
+        font-size: 4em;
+        text-align: center;
+        margin: 200px auto;
+        color: yellow;
+        font-family: arial;
+      }
+      .clock span {
+        padding: 20px;
+        background: #444;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="clock"></div>
+
+    <script src="http://cdn.date-fns.org/v1.9.0/date_fns.min.js"></script>
+
+    <!-- <script src="date&time.js"></script> -->
+    <!-- <script src="timestamps.js"></script> -->
+    <!-- <script src="digitalclock.js"></script> -->
+    <script src="datefns.js"></script>
+  </body>
+</html>
diff --git a/chapter_11/timestamps.js b/chapter_11/timestamps.js
@@ -0,0 +1,20 @@
+//timestamps
+const before = new Date('February 1 2019 7:30:59');
+const now = new Date();
+
+// console.log(now.getTime(), before.getTime());
+
+const diff = now.getTime() - before.getTime()
+console.log(diff)
+
+const mins = Math.round(diff/1000/60);
+const hours = Math.round(mins/60);
+const days = Math.round(hours/24);
+
+console.log(mins, hours, days);
+
+console.log(`the blog was written ${days} days ago`);
+
+//converting timestamps into date objects
+const timestamp = 1675938474990;
+console.log(new Date(timestamp));
diff --git a/chapter_12_Async/async-await.js b/chapter_12_Async/async-await.js
@@ -0,0 +1,30 @@
+//async & await - set off all of our asynchronous code into a single function (asynchronous function), and then use the await keyword inside to chain promises together in a much more readable and logical way.
+
+//by adding async in front of the parenthesis, we made an asynchronous function. It always return a promise regardless of what's inside.
+const getTodos = async () => {
+  //this await keyword stalls JavaScript right here, it stops it from assigning a value to this variable until the promise has resolved. Once the promise has resolved, we can take the value from the resolve function and assign it to a variable.
+  const response = await fetch('todos/luigi.json');
+  const data = await response.json()
+  return data;
+}
+
+//***This asynchronous function itself is non-blocking. The entire block of code is being handled somewhere else in the browser, so the rest of our code could carry on if it wanted to. So, the await keyword only stalls inside the asynchronous function.
+
+console.log(1);
+console.log(2);
+
+getTodos()
+  .then(data => console.log('resolved', data))
+
+console.log(3);
+console.log(4);
+
+// fetch('todos/luigi.json').then(response => {
+//     console.log('resolved', response)
+//     return response.json()
+// }).then(data => {
+//   console.log(data)
+// }).catch(err => {
+//   console.log('rejected', err)
+// })
+
diff --git a/chapter_12_Async/custom-errors.js b/chapter_12_Async/custom-errors.js
@@ -0,0 +1,22 @@
+//throwing & catching errors
+
+const getTodos = async () => {
+
+  const response = await fetch('todos/luigis.json');
+
+  if(response.status !== 200){
+    //when we through an error inside an asynchronous function, the promise returned by this asynchronous function is rejected. Therefore, if it is rejected, we are going to catch it one line 19. As a result, we get the custom error instead of the error given by the response.json() on line 12.
+    throw new Error('cannot fetch the data');
+  }
+
+  const data = await response.json();
+
+  return data;
+}
+
+getTodos()
+  .then(data => console.log('resolved: ', data))
+  .catch(err => console.log('rejected: ', err.message));
+
+
+
diff --git a/chapter_12_Async/fetch-api.js b/chapter_12_Async/fetch-api.js
@@ -0,0 +1,15 @@
+//fetch api
+
+//fetch('todos/luigi.json) returns towards a promise. A promise is basically saying, at some point I will either resolve if we have a success or reject if there's an error.
+fetch('todos/luigi.json').then(response => {
+  if(response.status === 200) {
+    console.log('resolved', response)
+    return response.json()
+  }
+}).then(data => {
+  console.log(data)
+}).catch(err => {
+  console.log('rejected', err)
+})
+
+//the way the Fetch API works is that the promise is only ever rejected when we get some kind of network error. For example, if we're offlice or we can't reach the API for some reason.
diff --git a/chapter_12_Async/http-request-1.js b/chapter_12_Async/http-request-1.js
@@ -0,0 +1,24 @@
+
+// step 1: create a request object.
+
+//This is a JavaScript build-in method to create a request object.
+
+//XML represents an old data format we used to work with much before JASON arrived on the scene.
+
+//This request object can work with any kind of data: XML, JSON, plain text, etc.
+
+const request = new XMLHttpRequest();
+
+//step 4: attached an event listener to the request itself. The callback fires whenever there is a state change. And there are 4 state changes in total.
+request.addEventListener('readystatechange', ()=>{
+  // console.log(request, request.readyState);
+  if(request.readyState === 4){
+    console.log(request.responseText);
+  }
+})
+
+//step 2 : make a GET request from the designated API endpoint (where to send the request to)
+request.open('GET', 'https://jsonplaceholder.typicode.com/todos/')
+
+//step 3: to actually send the request. If we open the browser and look at Network, we should be able to see the request and the data. 
+request.send();