Merge pull request #84 from Surajit0573/weather_forecast

Added Weather forecast

Weather Forecast/app.js

@@ -0,0 +1,113 @@
+//to-do list
+
+let button = document.querySelector(".task button");
+let input = document.querySelector(".task input");
+let ul = document.querySelector("ul");
+let h3 = document.querySelector("h4");
+let count = 1;
+button.addEventListener("click", function () {
+    if (input.value != "") {
+        count++;
+        h3.innerText = `TOTAL TASK : ${count}`;
+        let li = document.createElement("li");
+        ul.appendChild(li);
+        let div = document.createElement("div");
+        div.innerHTML = ` <div>
+<button class="notify"><span class="material-symbols-outlined"
+        style="font-size: 20px;font-weight: 700; margin: 0px; padding: 0px;">
+        notifications_active
+    </span></button>
+<h2>${input.value}</h2>
+</div>
+<button>Done</button>`;
+        div.setAttribute("class", "task1");
+        li.appendChild(div);
+        let a = Math.floor(Math.random() * 155 + 100);
+        let b = Math.floor(Math.random() * 155 + 100);
+        let c = Math.floor(Math.random() * 155 + 100);
+        div.style.backgroundColor = `rgb(${a},${b},${c})`;
+        input.value = "";
+    }
+});
+
+ul.addEventListener("click", function (event) {
+    if (event.target.innerText == "Done") {
+        ul.removeChild(event.target.parentElement.parentElement);
+        count--;
+        h3.innerText = `TOTAL TASK : ${count}`;
+    }
+});
+
+
+//date time
+let h2 = document.querySelector(".date");
+let h = document.querySelector(".time");
+let arr = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
+const date = new Date();
+h2.innerText = `${arr[date.getDay()]}, ${date.getDate()}-${date.getMonth()}-${date.getFullYear()} `;
+h.innerText = `Time ${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`;
+setInterval(() => {
+    const date = new Date();
+    h.innerText = `Time ${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`;
+}, 1000);
+
+//Alarm
+ul.addEventListener("click", function (event) {
+
+    if (event.target.innerText == "notifications_active") {
+       let time=prompt("Enter Time : hh:mm:ss");
+       const date2 = new Date();
+       let nexthour=Number(time.substring(0,2))-date2.getHours();
+       let nextminit=Number(time.substring(3,5))-date2.getMinutes();
+       let nextsec=Number(time.substring(6,8))-date2.getSeconds();
+       let delay=(nexthour*3600+nextminit*60+nextsec)*1000
+       setTimeout(async function(){
+        event.target.parentElement.parentElement.parentElement.style.backgroundColor="red";
+        let audio=new Audio("asset/Ringtones.mp3");
+        await audio.play();
+        alert(`Its Time to ${event.target.parentElement.parentElement.innerText}`);
+        audio.pause();
+       },delay);
+    }
+});
+
+//Weather API
+let place = document.querySelector(".weather h3");
+let temp = document.querySelector(".temp");
+let img = document.querySelector(".weather-temp img");
+let weat = document.querySelector(".weather h2");
+let p = document.querySelector(".weather p");
+let get = document.querySelector(".get");
+let change = document.getElementById("search");
+
+
+const url = "http://api.weatherapi.com/v1/current.json?key=dd35b36d343049bdad990057232009&q=";
+let q = "jalpaiguri";
+async function Weather(q) {
+    try {
+        let res = await axios(url + q);
+        let data = res.data.current;
+        console.log(data);
+        place.innerText = q;
+        temp.innerHTML = `${data.feelslike_c}&deg;C`;
+        img.src = `https:${data.condition.icon}`;
+        weat.innerText = data.condition.text;
+        p.innerHTML = `pressure: ${data.pressure_mb} millibars
+        <br>
+        Humidity: ${data.humidity} %
+        <br>
+        Wind: ${data.wind_dir} , ${data.wind_kph} kph`;
+    }
+    catch (err) {
+        console.log("Invalid City");
+    }
+}
+Weather(q);
+
+get.addEventListener("click",()=>{
+if(change.value!=""){
+    q=change.value;
+    Weather(q);
+    q="";
+}
+});

Weather Forecast/index.html

@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>ToDo List</title>
+    <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet"
+        href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" />
+</head>
+
+<body>
+    <div class="container">
+        <div class="head">
+            <div>
+                <h1>MY DAY</h1>
+                <h2 class="date"></h2>
+                <h2 class="time" style="line-height: 0px;"></h2>
+            </div>
+            <div style="margin-right: 20px;">
+                <label for="search"><button class="get">Get</button> </label>
+                <input type="text" id="search">
+                <br><br>
+                <div class="weather">
+                    <h3 style="line-height: 0px;">Jalpaiguri</h3>
+                    <div class="weather-temp">
+                        <h1 class="temp" style="line-height: 0px;">26</h1>
+                        <img src="https://cdn.weatherapi.com/weather/64x64/night/308.png" alt="">
+                    </div>
+                    <h2 style="line-height: 0px;">Heavy rain</h2>
+                    <p style="margin: 0px;">
+                        pressure: 1007 millibars
+                        <br>
+                        Humidity: 97 %
+                        <br>
+                        Wind: SE , 11.2 kph
+                    </p>
+
+
+                </div>
+            </div>
+        </div>
+        <ul>
+            <li>
+                <div class="task1">
+                    <div>
+                        <button class="notify"><span class="material-symbols-outlined"
+                                style="font-size: 20px;font-weight: 700; margin: 0px; padding: 0px;">
+                                notifications_active
+                            </span></button>
+                        <h2>Wake Up</h2>
+                    </div>
+                    <button>Done</button>
+
+                </div>
+            </li>
+        </ul>
+        <br><br><br>
+
+        <div class="task">
+            <input type="text" id="do" placeholder="Add Your Task">
+            <label for="do"><button>Add Task</button></label>
+            <br>
+            <div class="count">
+                <h4>TOTAL TASK : 1</h4>
+            </div>
+        </div>
+    </div>
+    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
+    <Script src="app.js"></Script>
+
+</body>
+
+</html>

Weather Forecast/style.css

@@ -0,0 +1,102 @@
+.container{
+    margin: auto;
+    height: 600px;
+    width: 600px;
+    border: 2px solid black;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    background-color: rgb(216, 237, 255);
+    box-shadow: 10px 10px rgba(0, 0, 0, 0.513);
+    overflow: scroll;
+}
+ul {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+  }
+li .task1{
+    height: 50px;
+    width: 500px;
+    border: 2px solid black;
+    display:flex ;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 20px;
+}
+.task1 div{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-left: 20px;
+}
+.notify{
+    margin-left: 20px;
+    margin-left: 10px;
+    height: 25px;
+    width: 35px;
+}
+
+li div button{
+    position: relative;
+    right: 20px;
+}
+.task1{
+    background-color:yellow;
+}
+.count{
+    margin: auto;
+}
+h1{
+    font-weight: 900;
+}
+.head h2{
+    font-weight: 500;
+}
+.head{
+    width: 579px;
+    height: 250px;
+    position: sticky;
+    top: 0px;
+    z-index: 10;
+   background-image: url(Asset/nuture.jpg);
+   background-size: cover;
+   display: flex;
+   justify-content: space-between;
+}
+.task{
+    background-color: white;
+    display: flex;
+    align-items: center;
+    width: 500px;
+    padding-left: 20px;
+    padding-right: 20px;
+    position: sticky;
+    bottom: 0px;
+    z-index: 10;
+}
+.task input{
+    width: 200px;
+    height: 30px;
+}
+.task button{
+    height: 30px;
+    margin-left: 10px;
+}
+.weather{
+    background-color: white;
+   display: flex;
+   flex-direction: column;
+   justify-content: center;
+   align-items: center;
+   height: 200px;
+}
+.weather-temp{
+    display: flex;
+    justify-content: space-around;
+}
+.weather img{
+    height: 50px;
+    width: 50px;
+    margin-left: 20px;
+}

index.html

@@ -180,7 +180,27 @@ <h2>Playable Piano</h2>
         <button onclick="window.location.href='./Assets/games/piano/index.html'">Go!</button><br>
     </div>
 
-
+  <div class="card">
+    <img src="./QR Code Generator/Display-img.png">
+    <h2>QR Code Generator</h2>
+    <!-- Button to navigate to page1.html -->
+    <button onclick="window.location.href='QR Code Generator/index.html'">Go!</button><br>
+  </div>
+
+  <div class="card">
+    <img src="./Weather Forecast/Asset/Preview.jpg">
+    <h2>Advance Weather Forecast</h2>
+    <!-- Button to navigate to page1.html -->
+    <button onclick="window.location.href='Weather Forecast/index.html'">Go!</button><br>
+  </div>
+
+  <div class="card">
+    <img src="./Simon Game/m0pi9hn9.png">
+    <h2>Simon Game</h2>
+    <!-- Button to navigate to page1.html -->
+    <button onclick="window.location.href='Simon Game/index.html'">Go!</button><br>
+  </div>
+
     <div class="card">
         <img src="./Assets/games//QR Code Generator/Display-img.png">
         <h2>QR Code Generator</h2>