intro-to-javascript · kchia · Oct 16, 2021 · Oct 16, 2021 · Oct 16, 2021
diff --git a/dom-manipulation/exercise/index.html b/dom-manipulation/exercise/index.html
@@ -0,0 +1,21 @@
+<!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>Document</title>
+  </head>
+  <body>
+    <h1>Countries of the World</h1>
+    <section>
+      <h2>Asia</h2>
+      <ul class="asia"></ul>
+    </section>
+    <section>
+      <h2>Europe</h2>
+      <ul class="europe"></ul>
+    </section>
+    <script src="script.js"></script>
+  </body>
+</html>
diff --git a/dom-manipulation/exercise/script.js b/dom-manipulation/exercise/script.js
@@ -0,0 +1,71 @@
+/** 
+  EXERCISE: DOM MANIPULATION WITH JAVASCRIPT
+*/
+
+const countries = [
+  {
+    name: "South Korea",
+    code: "KR",
+    flagImageUrl: "https://www.countryflags.io/kr/flat/64.png",
+    region: "Asia",
+  },
+  {
+    name: "United Kingdom",
+    code: "GB",
+    flagImageUrl: "https://www.countryflags.io/gb/flat/64.png",
+    region: "Europe",
+  },
+  {
+    name: "Japan",
+    code: "JP",
+    flagImageUrl: "https://www.countryflags.io/jp/flat/64.png",
+    region: "Asia",
+  },
+  {
+    name: "Italy",
+    code: "IT",
+    flagImageUrl: "https://www.countryflags.io/it/flat/64.png",
+    region: "Europe",
+  },
+  {
+    name: "Malaysia",
+    code: "MY",
+    flagImageUrl: "https://www.countryflags.io/my/flat/64.png",
+    region: "Asia",
+  },
+  {
+    name: "Germany",
+    code: "DE",
+    flagImageUrl: "https://www.countryflags.io/de/flat/64.png",
+    region: "Europe",
+  },
+  {
+    name: "Brunei Darussalam",
+    code: "BN",
+    flagImageUrl: "https://www.countryflags.io/bn/flat/64.png",
+    region: "Asia",
+  },
+  {
+    name: "Greece",
+    code: "GR",
+    flagImageUrl: "https://www.countryflags.io/gr/flat/64.png",
+    region: "Europe",
+  },
+  {
+    name: "China",
+    code: "CN",
+    flagImageUrl: "https://www.countryflags.io/cn/flat/64.png",
+    region: "Asia",
+  },
+  {
+    name: "Hungary",
+    code: "HU",
+    flagImageUrl: "https://www.countryflags.io/hu/flat/64.png",
+    region: "Europe",
+  },
+];
+
+// Iterate through the array of countries. For each country,
+// Use a li to display the country.
+// Add an img to each country to display the flag of each country.
+// Append each country to the correct part of the DOM (e.g., Germany should be added to the Europe list since it's part of Europe, whereas Japan should be added to Asia)
diff --git a/dom-manipulation/index.html b/dom-manipulation/index.html
@@ -0,0 +1,36 @@
+<!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>About Me</title>
+    <style>
+      .list-item {
+        color: red;
+      }
+    </style>
+  </head>
+  <body>
+    <h1 id="title">About Me</h1>
+    <ul class="list">
+      <li>Nickname: <span id="nickname"></span></li>
+      <li>Favorites: <span id="favorites"></span></li>
+      <li>Hometown: <span id="hometown"></span></li>
+    </ul>
+    <section>
+      <ol class="list">
+        <li>
+          <a>an anchor tag</a>
+        </li>
+        <li>
+          <a>another anchor tag</a>
+        </li>
+        <li>
+          <a>yet another anchor tag</a>
+        </li>
+      </ol>
+    </section>
+    <script src="script.js"></script>
+  </body>
+</html>
diff --git a/dom-manipulation/script.js b/dom-manipulation/script.js
@@ -0,0 +1,68 @@
+/**
+ *  The DOM
+ *
+ *  Browsers read your HTML and create an object in the computer’s memory
+ *  for each part. That HTML layout is called a “data model” because it
+ *  describes the structure of your webpage. The Document Object Model (DOM)
+ *  is the browser’s JavaScript representation of your HTML elements.
+ */
+
+// Do this: Open Dev Tools and type in the word “document” to see what’s returned.
+
+/**
+ * GETTERS
+ * =================
+ * You can use JS to get objects from the DOM and perform actions on the objects
+ * using special methods called "getters". Vanilla JS gives you various options to interact with the DOM. For a complete list of DOM API methods, see https://www.w3schools.com/Jsref/dom_obj_document.asp
+ */
+
+// Do this: In the Dev Tools console, let's try using getters to retrieve objects from the DOM
+
+console.log(document.getElementById("title")); // returns entire DOM node and whatever is included inside
+
+console.log(document.getElementsByClassName("list")); // returns an array of all dom nodes with that class
+
+// querySelector() is an alternative to getElementById() and getElementsByClassName()
+// You can also use it to target element by id, need hash before id name
+console.log(document.querySelector("#title"));
+
+// You can use it to target element by class name, need dot before class name
+console.log(document.querySelector(".list"));
+
+// querySelectorAll() returns all instances of an element with a certain class name or tag.
+console.log(document.querySelectorAll("a")); // return an array of all anchor tags in a document
+
+/**
+ * SETTERS
+ * =================
+ * Setters are methods that change something on the webpage
+ */
+
+// (In the JavaScript) Change the body tag's style so it has a font-family of "Arial, sans-serif".
+document.body.style.fontFamily = "Arial, sans-serif";
+
+// (In the JavaScript) Replace each of the spans (nickname, favorites, hometown) with your own information.
+// document.getElementById("nickname").textContent = "Hou Chia";
+document.querySelector("#nickname").textContent = "Hou Chia";
+
+// document.getElementById("favorites").textContent = "science, music, my candy subjects";
+document.querySelector("#favorites").textContent =
+  "computer science, Netflix, travel";
+
+document.querySelector("#hometown").textContent = "Seria";
+
+// Iterate through each li and change the class to "list-item".
+const items = document.querySelectorAll("li");
+for (let i = 0; i < items.length; i++) {
+  items[i].classList.add("list-item");
+}
+
+/**
+ * ATTRIBUTE CHANGING
+ */
+// Create a new img element and set its src attribute to a random picture from https://cataas.com/cat. Append that element to the page.
+const myPic = document.createElement("img");
+myPic.setAttribute("src", "https://cataas.com/cat");
+document.body.appendChild(myPic);
+
+// myPic.removeAttribute("src");
diff --git a/event-handling/exercise/index.html b/event-handling/exercise/index.html
@@ -0,0 +1,19 @@
+<!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>Document</title>
+    <link href="style.css" rel="stylesheet" type="text/css" />
+  </head>
+  <body>
+    <section class="container">
+      <button class="red-button" data-color="red">Red</button>
+      <button class="yellow-button" data-color="yellow">Yellow</button>
+      <button class="green-button" data-color="green">Green</button>
+      <button class="purple-button" data-color="purple">Purple</button>
+    </section>
+    <script src="script.js"></script>
+  </body>
+</html>
diff --git a/event-handling/exercise/script.js b/event-handling/exercise/script.js
@@ -0,0 +1,6 @@
+/**
+  EXERCISE: ADDING EVENT LISTENERS
+  In this exercise, implement code so that clicking any of the buttons will set the background of the container to the color contained in the button's data-color attribute. 
+
+  https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset
+*/
diff --git a/event-handling/exercise/style.css b/event-handling/exercise/style.css
@@ -0,0 +1,8 @@
+button {
+  display: block;
+  margin: 20px 0 20px 20px;
+}
+
+.container {
+  padding: 20px 0;
+}
diff --git a/event-handling/index.html b/event-handling/index.html
@@ -0,0 +1,26 @@
+<!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>Document</title>
+    <link href="style.css" rel="stylesheet" type="text/css" />
+  </head>
+  <body>
+    <h1 class="primary-heading">Cats or Dogs</h1>
+    <section>
+      <h2>Click on the image to show a random cat or dog:</h2>
+      <img
+        class="animal-image"
+        src="https://cataas.com/cat"
+        alt="Cute animal"
+      />
+      <ul class="comments"></ul>
+      <button class="add-comment-button">Add comment</button>
+      <button class="change-theme-button">Change theme</button>
+      <button class="toggle-theme-button">Toggle theme</button>
+    </section>
+    <script src="script.js"></script>
+  </body>
+</html>
diff --git a/event-handling/script.js b/event-handling/script.js
@@ -0,0 +1,98 @@
+/** 
+  VARIABLES
+*/
+const dogImages = [
+  "https://images.dog.ceo/breeds/springer-english/n02102040_8463.jpg",
+  "https://images.dog.ceo/breeds/wolfhound-irish/n02090721_1234.jpg",
+  "https://images.dog.ceo/breeds/terrier-westhighland/n02098286_5234.jpg",
+  "https://images.dog.ceo/breeds/spaniel-irish/n02102973_3635.jpg",
+  "https://images.dog.ceo/breeds/germanshepherd/n02106662_16817.jpg",
+  "https://images.dog.ceo/breeds/pointer-german/n02100236_5956.jpg",
+];
+
+const catImageSrc = "https://cataas.com/cat";
+
+/**
+  SELECTORS
+
+  `document.querySelector()`/`document.querySelectorAll()` are the recommended modern approaches, which is convenient because it allows you to select elements using CSS selectors. There are older methods for grabbing element references, such as `document.getElementById()` and `document.getElementsByTagName()`, but are not as convenient
+*/
+
+const html = document.querySelector("html");
+const body = document.querySelector("body");
+const primaryHeading = document.querySelector(".primary-heading");
+
+const animalImage = document.querySelector(".animal-image");
+const commentsList = document.querySelector(".comments");
+
+const addCommentButton = document.querySelector(".add-comment-button");
+const changeThemeButton = document.querySelector(".change-theme-button");
+const toggleThemeButton = document.querySelector(".toggle-theme-button");
+
+/**
+  EVENT HANDLERS
+*/
+
+function handleAnimalImageClick() {
+  let dogImageSrc = dogImages[Math.floor(Math.random() * dogImages.length)];
+
+  animalImage.setAttribute(
+    "src",
+    animalImage.getAttribute("src") === catImageSrc ? dogImageSrc : catImageSrc
+  );
+}
+
+function handleAddCommentButtonClick() {
+  const comment = prompt("Say something about this picture!");
+
+  const commentListItem = document.createElement("li");
+  commentListItem.textContent = comment;
+  commentsList.appendChild(commentListItem);
+}
+
+function handleChangeThemeButtonClick() {
+  // The JavaScript property versions of the CSS styles are written in lower camel case whereas the CSS versions are hyphenated (e.g. backgroundColor versus background-color).
+  html.style.backgroundColor = "#3A3B3C";
+  body.style.backgroundColor = "black";
+  body.style.color = "white";
+  body.style.borderColor = "grey";
+  primaryHeading.style.color = "white";
+}
+
+// function handleToggleThemeButtonClick() {
+//   if (theme === "light") {
+//     theme = "dark";
+//     html.style.backgroundColor = "#3A3B3C";
+//     body.style.backgroundColor = "black";
+//     body.style.color = "white";
+//     body.style.borderColor = "grey";
+//     primaryHeading.style.color = "white";
+//   } else {
+//     theme = "light";
+//     html.style.backgroundColor = "#00539f";
+//     body.style.backgroundColor = "#ff9500";
+//     body.style.color = "#000";
+//     body.style.borderColor = "#000";
+//     primaryHeading.style.color = "#00539f";
+//   }
+// }
+
+// Here is another way to dynamically manipulate styles in your document using classes, which results in cleaner code since there's no mixing of CSS with JS
+function handleToggleThemeButtonClick() {
+  // html.classList.toggle("html-dark");
+  // body.classList.toggle("body-dark");
+  // primaryHeading.classList.toggle("primary-heading-dark");
+  [
+    { element: html, class: "html-dark" },
+    { element: body, class: "body-dark" },
+    { element: primaryHeading, class: "primary-heading-dark" },
+  ].forEach((tag) => tag.element.classList.toggle(tag.class));
+}
+
+/**
+  REGISTER EVENT HANDLERS
+*/
+animalImage.addEventListener("click", handleAnimalImageClick);
+addCommentButton.addEventListener("click", handleAddCommentButtonClick);
+changeThemeButton.addEventListener("click", handleChangeThemeButtonClick);
+toggleThemeButton.addEventListener("click", handleToggleThemeButtonClick);