From 4eadc47e7790ce50595346dc801339d9e1e02858 Mon Sep 17 00:00:00 2001
From: changicho <changicho29@gmail.com>
Date: Sun, 7 Jun 2020 11:59:21 +0900
Subject: [PATCH] Feat: Add 09 - Dev Tools Domination
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

?: console의 다양한 기능들 확인
---
 09 - Dev Tools Domination/changi.html | 92 +++++++++++++++++++++++++++
 1 file changed, 92 insertions(+)
 create mode 100644 09 - Dev Tools Domination/changi.html
diff --git a/09 - Dev Tools Domination/changi.html b/09 - Dev Tools Domination/changi.html
new file mode 100644
index 0000000..61d3208
--- /dev/null
+++ b/09 - Dev Tools Domination/changi.html	
@@ -0,0 +1,92 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Console Tricks!</title>
+  </head>
+  <body>
+    <p onClick="makeGreen()">×BREAK×DOWN×</p>
+
+    <script>
+      const dogs = [
+        { name: "Snickers", age: 2 },
+        { name: "hugo", age: 8 },
+      ];
+
+      function makeGreen() {
+        const p = document.querySelector("p");
+        p.style.color = "#BADA55";
+        p.style.fontSize = "50px";
+      }
+
+      // Regular
+      console.log("hello");
+
+      // Interpolated
+      console.log("i am %s haha", "👏👏");
+
+      // Styled
+      console.log(
+        "%c i am superman",
+        "font-size:15px; background-color : blue;"
+      );
+
+      // warning!
+      console.warn("oh no!");
+
+      // Error :|
+      console.error("SHIT");
+
+      // Info
+      console.info("crocodile eat 3-4 people per year");
+
+      // Testing
+      console.assert(1 + 1 === 2, "that was wrong");
+      console.assert(1 + 1 === 3, "that was wrong");
+
+      const p = document.querySelector("p");
+      // console.assert(p.classList.contains("ouch"), "That is wrong!");
+
+      // clearing
+      console.clear();
+
+      // Viewing DOM Elements
+      console.log(p);
+      console.dir(p);
+
+      // Grouping together
+      dogs.forEach((dog) => {
+        console.groupCollapsed(`${dog.name}`);
+        console.log(`This is ${dog.name}`);
+        console.log(`${dog.name} is ${dog.age} years old`);
+        console.log(`${dog.name} is ${dog.age * 7} dog years old`);
+        console.groupEnd(`${dog.name}`);
+      });
+
+      // counting
+      console.count("Wes");
+      console.count("Wes");
+      console.count("Steve");
+      console.count("Steve");
+      console.count("Wes");
+      console.count("Steve");
+      console.count("Wes");
+      console.count("Steve");
+      console.count("Steve");
+      console.count("Steve");
+      console.count("Steve");
+      console.count("Steve");
+
+      // timing
+      console.time("fetching data");
+      fetch("https://api.github.com/users/wesbos")
+        .then((data) => data.json())
+        .then((data) => {
+          console.timeEnd("fetching data");
+          console.log(data);
+        });
+
+      console.table(dogs);
+    </script>
+  </body>
+</html>
