keshavgbpecdelhi · SaiShankar93 · Oct 1, 2023 · Oct 3, 2023 · Oct 3, 2023 · Oct 3, 2023
diff --git a/Calculator/images/images (1).jpg b/Calculator/images/images (1).jpg
diff --git a/Calculator/index.html b/Calculator/index.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
+        integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
+        integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe"
+        crossorigin="anonymous"></script>
+    <link rel="stylesheet" href="style.css">
+    <link rel="icon" href="images/images (1).jpg">
+    <title>Calculator</title>
+</head>
+
+<body>
+    <div class="calculator">
+        <h1 class="heading">Calculator</h1>
+        <div class="output">
+            <input type="text" id="result" readonly>
+        </div>
+        <div class="buttons">
+            <table>
+                <tr>
+                    <td> <button onclick="clean()" class="white btn btn-lg btn-secondary ">C</button> </td>
+                    <td> <button onclick="insert('%')" class="white btn btn-lg btn-secondary">%</button></td>
+                    <td><button onclick="calculate()" class="white btn btn-lg btn-secondary">=</button></td>
+                    <td> <button onclick="insert('/')" class="pink btn btn-lg btn-secondary">/</button></td>
+                </tr>
+                <tr>
+                    <td><button onclick="insert('7')" class="gray btn btn-lg btn-secondary">7</button></td>
+                    <td><button onclick="insert('8')" class="gray btn btn-lg btn-secondary">8</button></td>
+                    <td><button onclick="insert('9')" class="gray btn btn-lg btn-secondary">9</button></td>
+                    <td><button onclick="insert('*')" class="pink btn btn-lg btn-secondary">*</button></td>
+                </tr>
+                <tr>
+                    <td><button onclick="insert('4')" class="gray btn btn-lg btn-secondary">4</button></td>
+                    <td><button onclick="insert('5')" class="gray btn btn-lg btn-secondary">5</button></td>
+                    <td><button onclick="insert('6')" class="gray btn btn-lg btn-secondary">6</button></td>
+                    <td><button onclick="insert('-')" class="pink btn btn-lg btn-secondary">-</button></td>
+                </tr>
+                <tr>
+                    <td><button onclick="insert('1')" class="gray btn btn-lg btn-secondary">1</button></td>
+                    <td><button onclick="insert('2')" class="gray btn btn-lg btn-secondary">2</button></td>
+                    <td><button onclick="insert('3')" class="gray btn btn-lg btn-secondary">3</button></td>
+                    <td><button onclick="insert('+')" class="pink btn btn-lg btn-secondary">+</button></td>
+                </tr>
+                <tr>
+                    <td><button onclick="insert('00')" class="gray btn btn-lg btn-secondary">00</button></td>
+                    <td><button onclick="insert('0')" class="gray btn btn-lg btn-secondary">0</button></td>
+                    <td><button onclick="insert('.')" class="gray btn btn-lg btn-secondary">.</button></td>
+                </tr>
+            </table>
+        </div>
+    </div>
+    <p class="para">Made by <span> <b>Sai</b> </span>  ♥</p>
+    <script src="script.js"></script>
+</body>
+
+</html>
diff --git a/Calculator/script.js b/Calculator/script.js
@@ -0,0 +1,79 @@
+let result = document.getElementById("result");
+
+function insert(num){
+    result.value += num;
+}
+function calculate(){
+    result.value = eval(result.value);
+}
+function clean(){
+    result.value = '';
+}
+//function to notice keyPress and perform the neccesary operations
+document.addEventListener("keydown",function(event){
+    switch(event.key){
+        case "c":
+            clean();
+            break;
+        case "=":
+            calculate();
+            break;
+        case "%":
+            insert(event.key);
+            break;
+        case "/":
+            insert(event.key);
+            break;
+        case "*":
+            insert(event.key);
+            break;
+        case "7":
+            insert(event.key);
+            break;
+        case "8":
+            insert(event.key);
+            break;
+        case "9":
+            insert(event.key);
+            break;
+        case "4":
+            insert(event.key);
+            break;
+        case "5":
+            insert(event.key);
+            break;
+        case "6":
+            insert(event.key);
+            break;
+        case "-":
+            insert(event.key);
+            break;
+        case "1":
+            insert(event.key);
+            break;
+        case "2":
+            insert(event.key);
+            break;
+        case "2":
+            insert(event.key);
+            break;
+        case "3":
+            insert(event.key);
+            break;
+        case "+":
+            insert(event.key);
+            break;
+        case "00":
+            insert(event.key);
+            break;
+        case "0":
+            insert(event.key);
+            break;
+        case ".":
+            insert(event.key);
+            break;
+        default:
+            console.log(event.key);
+            break;  
+    }
+});
diff --git a/Calculator/style.css b/Calculator/style.css
@@ -0,0 +1,69 @@
+html,body{
+    background-color: rgb(104, 94, 94);
+}
+.calculator {
+    position: relative;
+    left: 38% ;
+    right: 50%;
+    top: 50px;
+    background-color: #1A1A1D;
+    height: 500px;
+    width: 300px;
+    align-items: center;
+    text-align: center;
+    border-radius: 30px;
+    box-shadow: 5px 10px 20px 10px rgb(29 25 25);
+}
+.btn{
+    margin: 6px;
+    padding: 8px;
+    border-radius: 30px;
+    width: 62px;
+    background-color: #C3073F;
+}
+input {
+    border: 3px solid rgb(150, 146, 146);
+    padding: 10px;
+    background-color: rgb(187, 181, 181);
+    font-size: 40px;
+    border-radius: 25px;
+    height: 100px;
+    width: 280px;
+    text-align: right;
+    font-family: digital-clock-font;
+}
+.buttons{
+    align-items: center;
+    text-align: center;
+    width: 50px;
+}
+.heading{
+    font-size: 40px;
+    color: rgb(219, 215, 215);
+    padding-top: 10px;
+    padding-bottom: 10px;
+}
+.gray{
+    background-color: #4E4E50;
+}
+.white{
+    background-color: #9f9fa1;
+}
+.gray:hover{
+    background-color: #9f9fa1;
+}
+.white:hover{
+    background-color:  #4E4E50;
+}
+.pink:hover{
+    background-color: rgb(204, 51, 84);
+}
+.para{
+    position: relative;
+    text-align: center;
+    top: 80px;
+    color: rgb(207, 194, 194);
+}
+span{
+    color: #1A1A1D;
+}
diff --git a/weather application/app.js b/weather application/app.js
@@ -0,0 +1,131 @@
+const apiKey = "57bf1cf1da91d697a649254e4cb64cba";
+
+// Displaying date
+let today = new Date();
+let options = {
+  day: "numeric",
+  month: "long",
+  year: "numeric",
+  weekday: "long",
+};
+let day = today.toLocaleDateString("en-US", options);
+// console.log(day);
+
+
+const displayDay = document.getElementById("date");
+displayDay.innerHTML = day;
+
+//function to get input from the user and checking if location is found.
+function getWeather() {
+  const locationInput = document.getElementById("locationInput");
+  const location = locationInput.value.trim();
+
+  if (!location) {
+    alert(
+      "Sorry, we could not able to find Your location right now. Please retry later ;)."
+    );
+    return;
+  }
+  const apiUrl = `https://api.openweathermap.org/data/2.5/weather?q=${location}&appid=${apiKey}&units=metric`;
+  //function to get weather info
+  getWeatherDetails(apiUrl);
+}
+
+//display weather by using auto detecting the user location
+function currentLocationweather() {
+  if ("geolocation" in navigator) {
+    navigator.geolocation.getCurrentPosition(
+      function (position) {
+        const latitude = position.coords.latitude;
+        const longitude = position.coords.longitude;
+
+        // Constructing the API URL
+        const apiUrl = `https://api.openweathermap.org/data/2.5/weather?lat=${latitude}&lon=${longitude}&appid=${apiKey}&units=metric`;
+        getWeatherDetails(apiUrl);
+      },
+      function (error) {
+        console.error("Error getting location:", error);
+      }
+    );
+  } else {
+    console.log("Geolocation is not supported by this browser.");
+  }
+}
+function getWeatherDetails(apiUrl) {
+  fetch(apiUrl)
+    //parsing the json
+    .then((response) => response.json())
+    .then(function (data) {
+      //function  to display the weather in the weatherinfo div
+      displayWeather(data);
+    })
+    //handling the errors
+    .catch((error) => {
+      console.error("Error fetching weather data:", error);
+      alert(
+        "Sorry, we could not able to find Your location right now. Please retry later ;)"
+      );
+    });
+}
+
+//sends the weahter data to the weahterInfo div  using the data from the json
+function displayWeather(data) {
+  const weatherInfoDiv = document.getElementById("weatherInfo");
+  weatherInfoDiv.innerHTML = `
+    <h2>${data.name}, ${data.sys.country}</h2>
+    <h3>Temperature: ${data.main.temp}°C</h3>
+    <p>Max temperature : ${data.main.temp_max}</p>
+    <p>Min temperature : ${data.main.temp_min}</p>
+    <p>Description: ${data.weather[0].description}</p>
+    <p>Humidity: ${data.main.humidity}%</p>
+    <p>Wind Speed: ${data.wind.speed} m/s</p>
+  `;
+}
+
+//code for displaying random quotes
+
+let quotes = [`Anyone who says sunshine brings happiness has never danced in the rain.`,
+`Life isn’t about waiting for the storm to pass — it’s about learning to dance in the rain.`,
+`The rain cools the air, calms the soul and replenishes life. – Mike Dolan`,
+`I like people who smile when it’s raining.`,
+`Tears of joy are like the summer rain drops pierced by sunbeams. – Hosea Ballou`,
+`Some people feel the rain — others just get wet. – Roger Miller`,
+`It’s better to go out and dance in the rain than to stay inside under a leaky roof. – Vance L. Wisen`,
+`Kindness is like snow. It beautifies everything it covers. – Kahlil Gibran`,
+`Dark clouds become heaven’s flowers when kissed by light. – Rabindranath Tagore`,
+`There’s no such thing as good weather, or bad weather. There’s just weather and your attitude towards it. – Louise Hay`,
+`Rise above the storm and you will find the sunshine. – Mario Fernández`]
+
+let randomQuote = quotes[Math.floor(Math.random()*quotes.length)];
+document.querySelector('#quote').innerText=randomQuote
+
+
+
+
+
+
+
+
+
+
+
+
+
+// const backgroundAudio = document.getElementById("backgroundAudio");
+// const playPauseButton = document.getElementById("playPauseButton");
+
+// // Event listener for the button click
+// playPauseButton.addEventListener("click", togglePlayPause);
+
+// // Function to toggle play and pause
+// function togglePlayPause() {
+//   if (backgroundAudio.paused) {
+//     backgroundAudio.play();
+//     playPauseButton.innerHTML = "<i class='fa-solid fa-pause'></i>";
+//   } else {
+//     backgroundAudio.pause();
+//     playPauseButton.innerHTML = "<i class='fa-solid fa-play'></i>";
+//   }
+// }
+
+
diff --git a/weather application/images/images.jpg b/weather application/images/images.jpg
diff --git a/weather application/images/nat.jpg b/weather application/images/nat.jpg
diff --git a/weather application/index.html b/weather application/index.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>SkyCast</title>
+    <link rel="icon" href="images/images.jpg">
+    <script src="https://kit.fontawesome.com/197a31d41e.js" crossorigin="anonymous"></script>
+    <link rel="stylesheet" href="styles.css">
+</head>
+
+<body>
+    <button id="playPauseButton"> </button>
+    <div class="weather-container">
+        <h3 id="date"></h3>
+        <h1>SkyCast - Weather Application</h1>
+        <label for="locationInput"><b>Please Enter the Location :</b></label>
+        <input type="text" id="locationInput" name="locationInput" placeholder="Enter City Name"> <br>
+        <button class="btn" onclick="getWeather()"><i class="fa-solid fa-cloud"></i> Get Weather</button>
+        <button class="btn" onclick="currentLocationweather()"><i class="fa-solid fa-location-crosshairs fa-lg"></i>
+            Current-Location</button>
+        <div id="weatherInfo"></div>
+        <p id="quote"></p>
+        <p class="footer">Made by : <a href="https://linktr.ee/SaiShankarPunna" target="_blank"><i>Sai Shankar</i></a>
+        </p>
+
+        <audio id="backgroundAudio" autoplay loop>
+            <source src="audio/relaxing-rain-8228.mp3" type="audio/mp3">
+            <source src="audio/relaxing-rain-8228.mp3" type="audio/mp3">
+        </audio>
+
+
+    </div>
+    <script src="app.js"></script>
+</body>
+
+</html>