keshavgbpecdelhi · Olubakinde · Aug 8, 2024 · Aug 8, 2024
diff --git a/404-error/1-simple-error.html b/404-error/1-simple-error.html
@@ -24,7 +24,7 @@
     <h3 class="text-2xl font-medium">404</h3>
     <span aria-hidden="true" class="block w-px h-12 bg-gray-600 "></span>
     <h5>This page could not be found.</h5>
-     <a class="text-sm text-indigo-600 underline hover:text-purple-900 tet-center" href="#">Go Back to Home Page</a>
+     <a class="text-sm text-indigo-600 underline hover:text-purple-900 tet-center" href="./index.html">Go Back to Home Page</a>
   </div>
 
 </body>

diff --git a/404-error/2-404-with-footer.html b/404-error/2-404-with-footer.html
@@ -30,7 +30,7 @@
     <h3 class="text-lg font-medium text-indigo-700">404 Error</h3>
    <h1 class="pb-2 text-2xl font-extrabold sm:text-5xl">Page not found</h1>
     <h5 class="pb-4 font-medium text-center opacity-50">Sorry, we couldn't find the page you're looking for.</h5>
-     <a class="text-sm font-medium text-center text-indigo-600 underline hover:text-purple-900" href="#">Go Back to Home Page</a>
+     <a class="text-sm font-medium text-center text-indigo-600 underline hover:text-purple-900" href="./index.html">Go Back to Home Page</a>
      <footer class="flex justify-center pt-48 space-x-2 sm:space-x-8">
        <a href="#">
          Contact Support

diff --git a/404-error/3-404-center.html b/404-error/3-404-center.html
@@ -26,6 +26,6 @@
         <h3 class="text-5xl font-medium text-indigo-700 pb-8">Error</h3>
        <h1 class="pb-2 text-2xl font-bold sm:text-5xl">Oops… You just found an error page</h1>
         <h5 class="pb-4 font-medium text-center opacity-50">We are sorry but the page you are looking for was not found!.</h5>
-         <a class="text-lg inline-flex bg-indigo-900 no-underline rounded-md  font-medium text-center text-white underline py-2 px-2" href="#">Go to Homepage</a>
+         <a class="text-lg inline-flex bg-indigo-900 no-underline rounded-md  font-medium text-center text-white underline py-2 px-2" href="./index.html">Go to Homepage</a>
 </body>
 </html>
diff --git a/Moon-Quality/README.md b/Moon-Quality/README.md
@@ -0,0 +1,8 @@
+# Moon-Quality
+
+Moon-Quality is a simple web application that displays images of the moon at different resolutions. Users can select the desired resolution from a dropdown menu to view the corresponding image.
+
+## Features
+
+- Display images of the moon in various resolutions (144p, 240p, 480p, 720p, 1080p).
+- Dropdown menu allows users to switch between different image resolutions.
diff --git a/Moon-Quality/index.html b/Moon-Quality/index.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Moon-Quality</title>
+    <link rel="stylesheet" href="styles.css">
+    <script src="script.js" defer></script>
+</head>
+<body>
+    <div class="img-container">
+        <img id="img-144p" src="moon144.png" alt="144p" width="500px">
+        <img id="img-240p" src="moon240.png" alt="240p" width="400px">
+        <img id="img-480p" src="moon480.png" alt="480p" width="400px">
+        <img id="img-720p" src="moon.png" alt="720p" width="300px">
+        <img id="img-1080p" src="moon...png" alt="1080p" width="400px">
+        <select id="options" name="options">
+            <option value="144p" selected>144p</option>
+            <option value="240p">240p</option>
+            <option value="480p">480p</option>
+            <option value="720p">720p</option>
+            <option value="1080p">1080p</option>
+        </select>
+    </div>
+</body>
+</html>
diff --git a/Moon-Quality/moon...png b/Moon-Quality/moon...png
diff --git a/Moon-Quality/moon.png b/Moon-Quality/moon.png
diff --git a/Moon-Quality/moon144.png b/Moon-Quality/moon144.png
diff --git a/Moon-Quality/moon240.png b/Moon-Quality/moon240.png
diff --git a/Moon-Quality/moon480.png b/Moon-Quality/moon480.png
diff --git a/Moon-Quality/script.js b/Moon-Quality/script.js
@@ -0,0 +1,21 @@
+document.addEventListener("DOMContentLoaded", () => {
+    const selectElement = document.getElementById("options");
+    const images = document.querySelectorAll(".img-container img");
+
+    // Function to hide all images
+    function hideAllImages() {
+        images.forEach(img => {
+            img.style.display = "none";
+        });
+    }
+
+    // Event listener for the select element
+    selectElement.addEventListener("change", (event) => {
+        hideAllImages();
+        const selectedValue = event.target.value;
+        const selectedImage = document.getElementById(`img-${selectedValue}`);
+        if (selectedImage) {
+            selectedImage.style.display = "block";
+        }
+    });
+});
diff --git a/Moon-Quality/styles.css b/Moon-Quality/styles.css
@@ -0,0 +1,25 @@
+body {
+    background-color: black;
+}
+
+.img-container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+}
+
+.img-container img {
+    max-width: 100%;
+    height: auto;
+    display: none; /* Hide all images by default */
+}
+
+#img-144p {
+    display: block; /* Show the 144p image by default */
+}
+
+.img-container select {
+    margin-top: 20px;
+}