diff --git a/animals.js b/animals.js
new file mode 100644
index 0000000..576c8e2
--- /dev/null
+++ 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 = ``;
+petsData.forEach((pet) => {
+ allPetsList += `- ${pet.petName} the ${pet.breed}
`;
+});
+allPetsList += `
`;
+
+petsList.innerHTML = allPetsList;
\ No newline at end of file
diff --git a/animals/buhmie.png b/animals/buhmie.png
new file mode 100644
index 0000000..070074f
Binary files /dev/null and b/animals/buhmie.png differ
diff --git a/animals/carmie.png b/animals/carmie.png
new file mode 100644
index 0000000..e3f6ac8
Binary files /dev/null and b/animals/carmie.png differ
diff --git a/animals/cody.png b/animals/cody.png
new file mode 100644
index 0000000..82a3fa9
Binary files /dev/null and b/animals/cody.png differ
diff --git a/animals/copper.png b/animals/copper.png
new file mode 100644
index 0000000..a24d614
Binary files /dev/null and b/animals/copper.png differ
diff --git a/animals/lucy.png b/animals/lucy.png
new file mode 100644
index 0000000..127cd6a
Binary files /dev/null and b/animals/lucy.png differ
diff --git a/animals/mango.png b/animals/mango.png
new file mode 100644
index 0000000..2b2ff02
Binary files /dev/null and b/animals/mango.png differ
diff --git a/animals/stella.png b/animals/stella.png
new file mode 100644
index 0000000..fe1311f
Binary files /dev/null and b/animals/stella.png differ
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..8a65d8f
--- /dev/null
+++ b/index.html
@@ -0,0 +1,27 @@
+
+
+
+
+
+ Document
+
+
+
+
+
+
+
+
+
+
+
+
+
![Pet]()
+