20-width-height

john-smilga · Jun 26, 2021 · 73c9b49 · 73c9b49
1 parent c5829e5
commit 73c9b49
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 6 deletions.
diff --git a/19-fetch-errors/app.js b/19-fetch-errors/app.js
@@ -8,16 +8,17 @@ const url = 'https://www.course-api.com/react-tours-projects'
 const getTours = async () => {
   try {
     const resp = await fetch(url)
-    console.log(resp)
     if (!resp.ok) {
-      const msg = `There was an error : "${resp.status} ${resp.statusText}"`
+      const msg = `There was an error "${resp.status} ${resp.statusText}"`
       throw new Error(msg)
     }
-    const data = await resp.json()
-    console.log(data)
+
+    const tours = await resp.json()
+    console.log(tours)
   } catch (error) {
     console.log(error)
   }
 }
 
-getTours()
+const btn = document.querySelector('.btn')
+btn.addEventListener('click', getTours)
diff --git a/19-fetch-errors/index.html b/19-fetch-errors/index.html
@@ -9,11 +9,17 @@
       h1 {
         text-align: center;
       }
+      .btn {
+        display: block;
+        width: 200px;
+        margin: 0 auto;
+        margin-top: 3rem;
+      }
     </style>
   </head>
   <body>
     <h1>Fetch Errors</h1>
-
+    <button class="btn">Fetch Tours</button>
     <script src="./app.js"></script>
   </body>
 </html>
diff --git a/20-width-height/app.js b/20-width-height/app.js
@@ -0,0 +1,16 @@
+// Javascript Nuggets
+// Width/Height - window, any element
+// innerHeight
+// innnerWidth
+// getBoundingClientRect
+
+console.log('height', window.innerHeight)
+console.log('width', window.innerWidth)
+
+const btn = document.querySelector('.btn')
+const box = document.querySelector('.box')
+
+btn.addEventListener('click', () => {
+  const dimensions = box.getBoundingClientRect()
+  console.log(dimensions)
+})
diff --git a/20-width-height/index.html b/20-width-height/index.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Javascript Nuggets</title>
+    <link rel="stylesheet" href="../global.css" />
+    <style>
+      body {
+        min-height: 130vh;
+      }
+      h1 {
+        text-align: center;
+      }
+      .btn {
+        display: block;
+        width: 200px;
+        margin: 0 auto;
+        margin-top: 3rem;
+      }
+      .box {
+        width: 150px;
+        height: 150px;
+        background: grey;
+        margin: 0 auto;
+        margin-top: 4rem;
+        margin-left: -1rem;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>Width/Height</h1>
+    <button class="btn">Get Dimensions</button>
+    <div class="box"></div>
+    <script src="./app.js"></script>
+  </body>
+</html>