inn comit

TMatis · Oct 2, 2024 · 4e0f6df · 4e0f6df
commit 4e0f6df
Show file tree

Hide file tree

Showing 9 changed files with 111 additions and 0 deletions.
diff --git a/animals.js b/animals.js
@@ -0,0 +1,84 @@
+const petsData = [
+    {
+        petName: "Stella",
+        age: 7,
+        weightInKilos: 24,
+        breed: "Dalmation",
+        pic: "animals\\stella.png"
+    },
+    {
+        petName: "Cody",
+        age: 8,
+        weightInKilos: 22,
+        breed: "Corgi",
+        pic: "animals\\cody.png"
+    },
+    {
+        petName: "Mango",
+        age: 2,
+        weightInKilos: 11,
+        breed: "Persian",
+        pic: "animals\\mango.png"
+    },
+    {
+        petName: "Lucy",
+        age: 4,
+        weightInKilos: 35,
+        breed: "Ball Python",
+        pic: "animals\\lucy.png"
+    },
+    {
+        petName: "Buhmie",
+        age: 1,
+        weightInKilos: 28,
+        breed: "Bull-dog",
+        pic: "animals\\buhmie.png"
+    },
+    {
+        petName: "Domino",
+        age: 8,
+        weightInKilos: .23,
+        breed: "Unknown",
+        pic: "animals\\domino.png"
+    },
+];
+
+const showInfo = () => {
+    // get a handle to the input field and get the value
+    let petNumber = document.querySelector("#petNum").value;
+
+    // the array is zero-based, so subtract 1
+    petNumber = parseInt(petNumber) - 1;
+
+    // get a handle to the paragraph
+    let selectedPetInfo = document.querySelector(".selectedPetInfo");
+
+    // get the correspoding petsData object
+    let pet = petsData[petNumber];
+
+    // set the information
+    selectedPetInfo.textContent = `${pet.petName} is a ${pet.breed} and is ${pet.age} years old.`;
+    let petPic = document.querySelector(".selectedPetPic");
+
+    // set the image
+    petPic.src = pet.pic;
+}
+
+
+// ------------------------------------------------------
+// JAVASCRIPT
+// Get a handle to the petsInfo paragraph
+let petsInfo = document.querySelector(".petsInfo");
+
+// Add content by modifying the textContent property
+petsInfo.textContent = `Welcome to our newist pet, $${petsData[petsData.length - 1].petName} the ${petsData[petsData.length - 1].breed}`;
+
+let petsList = document.querySelector(".petsList");
+
+let allPetsList = `<ol>`;
+petsData.forEach((pet) => {
+    allPetsList += `<li> ${pet.petName} the ${pet.breed}</li>`;
+});
+allPetsList += `</ol>`;
+
+petsList.innerHTML = allPetsList;
diff --git a/animals/buhmie.png b/animals/buhmie.png
diff --git a/animals/carmie.png b/animals/carmie.png
diff --git a/animals/cody.png b/animals/cody.png
diff --git a/animals/copper.png b/animals/copper.png
diff --git a/animals/lucy.png b/animals/lucy.png
diff --git a/animals/mango.png b/animals/mango.png
diff --git a/animals/stella.png b/animals/stella.png
diff --git a/index.html b/index.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <script src="animals.js" defer></script>
+</head>
+<body>
+
+    <div class="wrapper"></div>
+        <p class="petsInfo"></p>
+        <div class="petsList"></div>
+        <div class="selectPet">
+            <label for="petNum">Pet Number:</label>
+            <input type="text" id="petNum" name="petNum" maxlength="4" size="4"></input>
+            <button onclick="showInfo()">Click for information!</button>
+            <p class="selectedPetInfo"></p>
+            <img class="selectedPetPic" alt="Pet" />
+        </div>
+    </div>
+
+
+<p class = "selectedPetInfo"></p>
+
+</body>
+</html>