fix

index.html

@@ -45,7 +45,7 @@ <h2>Birth Date</h2>
 
     <div style="display: none;" id="states" class="wrapper">
       <div class="graphic">
-        <div id="img1" class="active calender image">
+        <div id="img1" class="calender image active">
           <p data-day></p>
           <h1 data-date> </h1>
           <p data-style> <span data-mn></span> <span data-year></span></p>
@@ -106,8 +106,13 @@ <h1 data-date> </h1>
        <iframe id="img15" class="image" src="https://lottie.host/embed/319992a3-f568-4ae6-92a5-c6f1dd0961b5/vaEc80e5aZ.json"></iframe>
 
        <iframe id="img16" class="image" src="https://lottie.host/embed/87ed780b-ef5c-47e0-8417-7039be79bc16/yXVHVvQuPJ.json"></iframe>
-       <iframe id="img17" class="image" src="https://lottie.host/embed/85b967f7-7a95-40b3-b8b9-4986f3c92efd/Ntzwj1mbX3.json"></iframe>
-<div style="border: none;" id="img18" class="image ranjan">
+       <iframe
+       id="img17"
+       class="image"
+       src="https://lottie.host/embed/ebd93ecc-b8f7-45a1-bd26-d2fb07ba2bec/khcTbBze50.json"
+     ></iframe>
+     <iframe id="img18" class="image" src="https://lottie.host/embed/5724dc31-98b6-43b6-be91-5880080f805c/pfDbx87YsN.json"></iframe>
+<div style="border: none;" id="img19" class="image ranjan">
   <img src="./images/ranjan.jpg" alt="ranjan">
 </div>
 
@@ -149,8 +154,12 @@ <h1 data-date> </h1>
         <p data-image="img15" class="text">चंद्रमा धीरे-धीरे हमसे दूर खिसक रहा है। जब आप इस दुनिया में आए थे, तब से वह   <span data-moonaway></span> सेंटीमीटर और दूर हो चुका है...</p>
 
         <p data-image="img16" class="text"> मोमबत्तियों को फिर से जलाने का समय लगभग <span data-bday></span>दिन दूर है, इससे पहले हर एक क्षण का आनंद लें...</p>
-        <p data-image="img17" class="text"><span data-advice></span></p>
-        <p data-image="img18" class="text"> Made With❤️ by Ranjan</p>
+        <p data-image="img17" class="text"> और आपको अभी भी एक लंबा रास्ता तय करना है...</p>
+        <p data-image="img18" class="text">कौन जानता है कि आपके जीवनकाल में और क्या होगा?</p>
+        <p data-image="img19" class="text"> Made With❤️ by Ranjan
+          <br>
+          <a onclick="restart()" href="#">Restart</a>
+        </p>
 
       </div>
     </div>

script.js

@@ -26,7 +26,6 @@ let dataSunTravel = document.querySelector("[data-sunTravel]");
 let dataMoonOrbit = document.querySelector("[data-moonOrbit]");
 let dataMoonAway = document.querySelector("[data-moonaway]");
 let dataNxtBday = document.querySelector("[data-bday]");
-let dataAdvice = document.querySelector("[data-advice]");
 
 document.querySelectorAll("input").forEach((elem) => {
   elem.addEventListener("keyup", () => {
@@ -185,8 +184,16 @@ function go() {
   states.style.display = "flex";
   box.style.display = "none";
   document.body.style.background = "white";
+  document.querySelector('.border').style.display = "none"
+}
+function restart(){
+  states.style.display = "none";
+  box.style.display = "flex";
+  document.querySelector('.border').style.display = "block"
+  document.querySelectorAll('input').forEach(e=>{
+    e.value = null
+  })
 }
-
 //Helper Functions
 
 function formattedNumberIn(number) {
@@ -209,21 +216,9 @@ function daysUntilNextBirthday(dobString) {
   return diffDays;
 }
 
-async function fetchData(url) {
-  try {
-    let response = await fetch(url);
-    return response.ok ? await response.json() : null;
-  } catch (error) {
-    console.error("Fetch error:", error);
-    return null;
-  }
-}
 
-// Example usage:
 
-fetchData("https://api.adviceslip.com/advice").then((data) => {
-  dataAdvice.innerHTML = data.slip.advice;
-});
+
 
 document
   .querySelector("form")

style.css

@@ -90,7 +90,7 @@ header {
   p {
     padding: 10px 20px;
     font-family: "Playwrite AR", cursive;
-    font-size: clamp(1rem, 2.5vw, 1.8rem) !important;
+    font-size: clamp(1rem, 2.5vw, 1.3rem) !important;
   }
 }
 .border {
@@ -225,6 +225,7 @@ button:disabled {
   border: 3px solid var(--primaryClr);
   text-align: center;
   display: flex;
+  display: none;
   flex-direction: column;
   justify-content: space-between;
   overflow: hidden;
@@ -321,3 +322,10 @@ button:disabled {
     left: unset;
   }
 }
+
+
+@media(width<=490px){
+.border{
+  display: none;
+}
+}