Merge branch 'PranavBarthwal:main' into branch-1

PranavBarthwal · May 14, 2024 · 914405f · 914405f
2 parents d972900 + 434afa7
commit 914405f
Show file tree

Hide file tree

Showing 16 changed files with 580 additions and 12 deletions.
diff --git a/Pages/asteroid-info/assets/64e4e4aabd98a600197c0ca3.webp b/Pages/asteroid-info/assets/64e4e4aabd98a600197c0ca3.webp
diff --git a/Pages/asteroid-info/assets/A letter tech logo.png b/Pages/asteroid-info/assets/A letter tech logo.png
diff --git a/Pages/asteroid-info/assets/favicon.png b/Pages/asteroid-info/assets/favicon.png
diff --git a/Pages/asteroid-info/assets/feel the fear and do it anyway.png b/Pages/asteroid-info/assets/feel the fear and do it anyway.png
diff --git a/Pages/asteroid-info/assets/jb1p0zcvmgrdx7yq9sur.png b/Pages/asteroid-info/assets/jb1p0zcvmgrdx7yq9sur.png
diff --git a/Pages/asteroid-info/assets/logo_black.png b/Pages/asteroid-info/assets/logo_black.png
diff --git a/Pages/asteroid-info/assets/logo_white.png b/Pages/asteroid-info/assets/logo_white.png
diff --git a/Pages/asteroid-info/assets/mars.png b/Pages/asteroid-info/assets/mars.png
diff --git a/Pages/asteroid-info/assets/original-5fcdc62f8266e353ea97ca56731ad804.png b/Pages/asteroid-info/assets/original-5fcdc62f8266e353ea97ca56731ad804.png
diff --git a/Pages/asteroid-info/index.html b/Pages/asteroid-info/index.html
@@ -0,0 +1,134 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Asteroids - Near Earth Object Web Service</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
+        integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
+        crossorigin="anonymous" referrerpolicy="no-referrer" />
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
+        integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
+
+    <link rel="stylesheet" href="style.css">
+
+    <link rel="shortcut icon" href="../../assets/favicon.png" type="image/x-icon">
+</head>
+
+<body>
+
+    <div id="bg-ast"></div>
+
+    <!-- NAVBAR -->
+    <nav class="navbar navbar-expand-lg fixed-top navbar_background">
+        <div class="container-fluid">
+            <a class="navbar-brand" href="#">
+                <img src="./assets/logo_white.png" alt="Bootstrap" width="370">
+            </a>
+            <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
+                data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
+                aria-label="Toggle navigation">
+                <span class="navbar-toggler-icon "></span>
+            </button>
+            <div class="collapse navbar-collapse pe-5" id="navbarSupportedContent">
+                <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
+                    <li class="nav-item">
+                        <a class="nav-link text-light decorate-text" href="../../index.html">Home</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link text-light decorate-text" href="../../index.html#apod">APoD</a>
+                    </li>
+                    <li class="nav-item ">
+                        <a class="nav-link text-light decorate-text" href="../../index.html#mars">MartianImagery</a>
+                    </li>
+                    <li class="nav-item ">
+                        <a class="nav-link text-light decorate-text" href="#">NeoWs</a>
+                    </li>
+                    <li class="nav-item">
+                        <a href="#contact"> <button class="btn btn-outline-light rounded-pill decorate-text"
+                                type="submit">Contact Us</button></a>
+                    </li>
+            </div>
+        </div>
+    </nav>
+
+
+    <!-- HERO SECTION -->
+    <div class="container">
+        <div class="input-field">
+            <h2 id="input-heading">Near Earth Objects</h2>
+
+            <div class="startDate date-input-fields-div">
+                <input type="date" id="starting-date" class="date-inputs start-date">
+                <label for="start-date">Starting date for Asteroid search</label>
+            </div>
+
+            <div class="endDate date-input-fields-div">
+                <input class="date-inputs end-date" type="date" id="ending-date">
+                <label for="end-date">End date for Asteroid search</label>
+            </div>
+
+            <div class="note">
+
+
+                <div class="note-heading">
+                    <h5 id="dateNote"><span id="exclamation-icon"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
+                        class="bi bi-exclamation-circle" viewBox="0 0 16 16">
+                        <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16" />
+                        <path
+                            d="M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0M7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0z" />
+                    </svg></span>The ending date should not be more than 7 than the Starting date</h5>
+                </div>
+            </div>
+
+            <button type="submit" id="dates-submit-btn">Search</button>
+        </div>
+
+        <div class="asteroid-info astInfoHidden">
+            <h3 id="name-of-asteroid">Name of the Asteroid: <span id="asteroid-name">X6969</span></h3>
+
+            <div class="asteroid-grid">
+
+                <div class="asteroid-info-card">
+                    <h4>Estimated diameter (km)</h4>
+                    <p>Min: <span id="estDiaMin">X</span></p>
+                    <p>Max: <span id="estDiaMax">X</span></p>
+                </div>
+
+                <div class="asteroid-info-card">
+                    <h4>Potential hazardous?</h4>
+                    <p id="potentialHazardVal">Yes</p>
+                </div>
+
+                <div class="asteroid-info-card">
+                    <h4>Close approach Date <span>(YYYY-MM-DD)</span></h4>
+                    <p id="closeApproachDate">2024-05-12</p>
+                </div>
+
+                <div class="asteroid-info-card">
+                    <h4>Relative Velocity</h4>
+                    <p>km/sec: <span id="relVelocitySec">X</span></p>
+                    <p>km/hr: <span id="relVelocityHr">X</span></p>
+                </div>
+
+                <div class="asteroid-info-card">
+                    <h4>Orbiting body</h4>
+                    <span id="orbitingBodyVal">Earth</span>
+                </div>
+
+                <div class="asteroid-info-card">
+                    <h4>Sentry object</h4>
+                    <span id="sentryObjectVal">No</span>
+                </div>
+
+            </div>
+        </div>
+    </div>
+
+    <script src="./particles.min.js"></script>
+    <script src="script.js"></script>
+    <!-- AtharvKasar04 -->
+</body>
+
+</html>
diff --git a/Pages/asteroid-info/particles.min.js b/Pages/asteroid-info/particles.min.js
diff --git a/Pages/asteroid-info/script.js b/Pages/asteroid-info/script.js
@@ -0,0 +1,215 @@
+// PARTICLES BACKGROUND
+
+particlesJS("bg-ast", {
+    "particles": {
+        "number": {
+            "value": 650,
+            "density": {
+                "enable": true,
+                "value_area": 789.1476416322727
+            }
+        },
+        "color": {
+            "value": "#ffffff"
+        },
+        "shape": {
+            "type": "circle",
+            "stroke": {
+                "width": 0,
+                "color": "#000000"
+            },
+            "polygon": {
+                "nb_sides": 5
+            },
+            "image": {
+                "src": "img/github.svg",
+                "width": 100,
+                "height": 100
+            }
+        },
+        "opacity": {
+            "value": 0.48927153781200905,
+            "random": false,
+            "anim": {
+                "enable": true,
+                "speed": 1.5,
+                "opacity_min": 0,
+                "sync": false
+            }
+        },
+        "size": {
+            "value": 3,
+            "random": true,
+            "anim": {
+                "enable": true,
+                "speed": 2,
+                "size_min": 0,
+                "sync": false
+            }
+        },
+        "line_linked": {
+            "enable": false,
+            "distance": 150,
+            "color": "#ffffff",
+            "opacity": 0.4,
+            "width": 1
+        },
+        "move": {
+            "enable": true,
+            "speed": 0.2,
+            "direction": "none",
+            "random": true,
+            "straight": false,
+            "out_mode": "out",
+            "bounce": false,
+            "attract": {
+                "enable": false,
+                "rotateX": 600,
+                "rotateY": 1200
+            }
+        }
+    },
+    "interactivity": {
+        "detect_on": "canvas",
+        "events": {
+            "onhover": {
+                "enable": true,
+                "mode": "bubble"
+            },
+            "onclick": {
+                "enable": true,
+                "mode": "push"
+            },
+            "resize": true
+        },
+        "modes": {
+            "grab": {
+                "distance": 400,
+                "line_linked": {
+                    "opacity": 1
+                }
+            },
+            "bubble": {
+                "distance": 83.91608391608392,
+                "size": 1,
+                "duration": 3,
+                "opacity": 1,
+                "speed": 3
+            },
+            "repulse": {
+                "distance": 200,
+                "duration": 0.4
+            },
+            "push": {
+                "particles_nb": 4
+            },
+            "remove": {
+                "particles_nb": 2
+            }
+        }
+    },
+    "retina_detect": true
+});
+
+// Rest of the logic
+
+// Search button and the asteroid-info-div
+let searchBtn = document.querySelector("#dates-submit-btn");
+let asteroidInfoDiv = document.querySelector(".asteroid-info");
+
+// Variables for constructing the URL
+var startDateInput;
+var endDateInput;
+
+// Function to construct the URL
+function constructURL(startDate, endDate) {
+    return `https://api.nasa.gov/neo/rest/v1/feed?start_date=${startDate}&end_date=${endDate}&api_key=eISHzmGbQk7EMWv9NTlVtvzZVmeLKPUoL3uKMSPJ`; 
+}
+
+// Checks for change event in the starting date input
+document.getElementById("starting-date").addEventListener("change", function() {
+    startDateInput = this.value; 
+
+    if (startDateInput && endDateInput) {
+        var url = constructURL(startDateInput, endDateInput);
+    }
+});
+
+// Checks for change is ending date input
+document.getElementById("ending-date").addEventListener("change", function() {
+    endDateInput = this.value; 
+
+    if (startDateInput && endDateInput) {
+        var url = constructURL(startDateInput, endDateInput);
+    }
+});
+
+// Function for the API call and putting all the values into the DOM elements
+function neows(inputUrl, sdi) {
+    fetch(inputUrl).then((response) => {
+        return response.json()
+    }).then((data) => {
+        let asteroidName = data.near_earth_objects[sdi][0].name;
+        let estDiameterMinimum = data.near_earth_objects[sdi][0].estimated_diameter.kilometers.estimated_diameter_min;
+        let estDiameterMaximum = data.near_earth_objects[sdi][0].estimated_diameter.kilometers.estimated_diameter_max;
+        let potentialHazard = data.near_earth_objects[sdi][0].is_potentially_hazardous_asteroid;
+        let closeApproachDate = data.near_earth_objects[sdi][0].close_approach_data[0].close_approach_date;
+        let relativeVelocitySec = data.near_earth_objects[sdi][0].close_approach_data[0].relative_velocity.kilometers_per_second;
+        let relativeVelocityHr = data.near_earth_objects[sdi][0].close_approach_data[0].relative_velocity.kilometers_per_hour;
+        let orbitingBody = data.near_earth_objects[sdi][0].close_approach_data[0].orbiting_body;
+        let isSentryObject = data.near_earth_objects[sdi][0].is_sentry_object;
+
+        let sentryVal;
+        if (isSentryObject){
+            sentryVal = "Yes";
+        } else {
+            sentryVal = "No";
+        }
+
+        let hazardVal;
+        if (potentialHazard) {
+            hazardVal = "Yes";
+        } else {
+            hazardVal = "No";
+        }
+
+        document.querySelector("#asteroid-name").innerHTML = asteroidName;
+
+        document.querySelector("#estDiaMin").innerHTML = estDiameterMinimum.toFixed(3);
+        document.querySelector("#estDiaMax").innerHTML = estDiameterMaximum.toFixed(3);
+
+        document.querySelector("#potentialHazardVal").innerHTML = hazardVal;
+
+        document.querySelector("#closeApproachDate").innerHTML = closeApproachDate;
+
+        document.querySelector("#relVelocitySec").innerHTML = relativeVelocitySec;
+        document.querySelector("#relVelocityHr").innerHTML = relativeVelocityHr;
+
+        document.querySelector("#orbitingBodyVal").innerHTML = orbitingBody;
+
+        document.querySelector("#sentryObjectVal").innerHTML = sentryVal;
+
+        asteroidInfoDiv.style.display = "block"
+    })
+
+}
+
+// Event listener for the Search Button
+searchBtn.addEventListener("click", () => {
+    if (startDateInput && endDateInput) {
+
+        let milStartDate = new Date(startDateInput);
+        let milEndDate = new Date(endDateInput);
+        let differenceInMilliseconds = milEndDate - milStartDate;
+        let differenceInDays = (differenceInMilliseconds / (1000 * 60 * 60 * 24))
+
+        if (differenceInDays < 7) {
+            var url = constructURL(startDateInput, endDateInput);
+            neows(url, startDateInput);
+        } else {
+            alert("Date range should not exceed 7")
+        }
+    } else [
+        alert("Date input cannot be empty")
+    ]
+})