init commit

treehouse · May 2, 2024 · 17dcad5 · 17dcad5
1 parent 98cbbb9
commit 17dcad5
Show file tree

Hide file tree

Showing 4 changed files with 140 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -1,2 +1,6 @@
 # cat-a-log
+
 A cat....alog hehehe
+
+GET YOUR API KEY HERE:
+https://thecatapi.com/
diff --git a/app.css b/app.css
@@ -0,0 +1,83 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: sans-serif;
+}
+
+body {
+    background-color: #333;
+    min-height: 100vh;
+    display: grid;
+    place-items: center;
+    padding: 2rem;
+}
+.container {
+    background-color: white;
+    border-radius: .5rem;
+    padding: 2rem;
+    width: 100%;
+    max-width: 600px;
+}
+
+.header {
+
+}
+
+.header .group {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 1rem;
+}
+select {
+    padding: .25rem;
+}
+button, select {
+    height: 2rem;
+}
+
+button {
+    width: 5rem;
+    border: none;
+    background-color: rgb(68, 174, 255);
+    border-radius: .5rem;
+    color: white;
+    transition: .2s ease;
+    cursor: pointer;
+}
+
+button:hover {
+    background-color: rgb(49, 147, 222);
+}
+
+.container ul {
+    list-style: none;
+    display: none;
+    max-height: 50vh;
+    overflow: auto;
+    margin-top: 2rem;
+    padding: 1rem;
+    padding-top: 0;
+}
+
+.container ul.show {
+    display: block;
+}
+
+.container ul li {
+    width: 100%;
+    min-height: 100px;
+    background-color: #eee;
+    overflow: none;
+    border-radius: .5rem;
+    margin-top: 1rem;
+    overflow: hidden;
+    padding: .5rem;
+}
+
+.container ul li img {
+    width: 100%;
+    border-radius: .3rem;
+    border: 5px solid rgb(255, 255, 255);
+}
diff --git a/app.js b/app.js
@@ -0,0 +1,22 @@
+const btn = document.querySelector("button");
+const list = document.querySelector("#images");
+
+async function getCats(numOfItems) {
+  const res = await fetch(` `);
+  const data = await res.json();
+
+  data.forEach((item) => {
+    let li = document.createElement("li");
+    let img = document.createElement("img");
+    img.src = item.url;
+
+    li.appendChild(img);
+    list.appendChild(li);
+  });
+}
+
+btn.addEventListener("click", () => {
+  const select = document.querySelector("select");
+  getCats(select.value);
+  list.classList.add("show");
+});
diff --git a/index.html b/index.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./app.css" />
+    <title>Cat-A-Log</title>
+  </head>
+  <body>
+    <div class="container">
+      <div class="header">
+        <div class="group">
+          <p>How many cats to show?</p>
+          <select name="" id="">
+            <option value="5">5</option>
+            <option value="10">10</option>
+            <option value="15">15</option>
+            <option value="20">20</option>
+          </select>
+          <button>GO</button>
+        </div>
+      </div>
+
+      <!-- cat-a-log -->
+      <ul id="images">
+        <!-- dynamic -->
+      </ul>
+    </div>
+    <script type="module" src="./app.js"></script>
+  </body>
+</html>