Merge pull request E-Cell-VSSUT#100 from Adyasha28/main

weather app
preritjn · Oct 10, 2022 · e46b819 · e46b819
2 parents b9be74f + a855f35
commit e46b819
Show file tree

Hide file tree

Showing 4 changed files with 473 additions and 0 deletions.
diff --git a/AdyashaS/contactUs-section/index.html b/AdyashaS/contactUs-section/index.html
@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<style>
+body {
+  font-family: Arial, Helvetica, sans-serif;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+input[type=text], select, textarea {
+  width: 100%;
+  padding: 12px;
+  border: 1px solid #ccc;
+  margin-top: 6px;
+  margin-bottom: 16px;
+  resize: vertical;
+}
+
+input[type=submit] {
+  background-color: #04AA6D;
+  color: white;
+  padding: 12px 20px;
+  border: none;
+  cursor: pointer;
+}
+
+input[type=submit]:hover {
+  background-color: #45a049;
+}
+
+.container {
+  border-radius: 5px;
+  background-color: #f2f2f2;
+  padding: 10px;
+}
+
+.column {
+  float: left;
+  width: 50%;
+  margin-top: 6px;
+  padding: 20px;
+}
+
+.row:after {
+  content: "";
+  display: table;
+  clear: both;
+}
+
+@media screen and (max-width: 600px) {
+  .column, input[type=submit] {
+    width: 100%;
+    margin-top: 0;
+  }
+}
+</style>
+</head>
+<body>
+
+<h2>Responsive Contact Section</h2>
+<p>Resize the browser window to see the effect.</p>
+
+<div class="container">
+  <div style="text-align:center">
+    <h2>Contact Us</h2>
+  </div>
+  <div class="row">
+    <div class="column">
+      <img src="https://www.rd.com/wp-content/uploads/2020/04/GettyImages-694542042-e1586274805503.jpg" style="width:100%">
+    </div>
+    <div class="column">
+      <form action="/action_page.php">
+        <label for="fname">First Name</label>
+        <input type="text" id="fname" name="firstname" placeholder="Your name..">
+        <label for="lname">Last Name</label>
+        <input type="text" id="lname" name="lastname" placeholder="Your last name..">
+        <label for="country">Country</label>
+        <select id="country" name="country">
+          <option value="australia">India</option>
+          <option value="canada">bangladesh</option>
+          <option value="usa">USA</option>
+        </select>
+        <label for="subject">Subject</label>
+        <textarea id="subject" name="subject" placeholder="Write something.." style="height:170px"></textarea>
+        <input type="submit" value="Submit">
+      </form>
+    </div>
+  </div>
+</div>
+
+</body>
+</html>
diff --git a/AdyashaS/weather-app/dynamic.js b/AdyashaS/weather-app/dynamic.js
@@ -0,0 +1,25 @@
+var input = document.querySelector('.input_text');
+var main = document.querySelector('#name');
+var temp = document.querySelector('.temp');
+var desc = document.querySelector('.desc');
+var clouds = document.querySelector('.clouds');
+var button= document.querySelector('.submit');
+
+
+button.addEventListener('click', function(name){
+fetch('https://api.openweathermap.org/data/2.5/weather?q='+input.value+'&appid=e0da1068a5cb2799c0e295b37452880d')
+.then(response => response.json())
+.then(data => {
+  var tempValue = data['main']['temp'];
+  var nameValue = data['name'];
+  var descValue = data['weather'][0]['description'];
+
+  main.innerHTML = nameValue;
+  desc.innerHTML = "Desc - "+descValue;
+  temp.innerHTML = "Temp - "+tempValue;
+  input.value ="";
+
+})
+
+.catch(err => alert("Wrong city name!"));
+})
diff --git a/AdyashaS/weather-app/index.html b/AdyashaS/weather-app/index.html
@@ -0,0 +1,108 @@
+
+<!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">
+    <title>Analog Clock</title> 
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
+    <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Poiret+One'>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="grid-container">
+        <div class="grid-child">
+    <div class="weather">
+        <div class="input">
+        <input type="text" placeholder="Enter the city" class="input_text">
+        <input type="submit" value="Submit" class="submit">
+        </div>
+        <div class="container">
+            <div class="card">
+              <h1 class="name" id="name"></h1>
+              <p class="temp"></p>
+              <p class="clouds"></p>
+              <p class="desc"></p>
+            </div>
+            </div>
+    </div>
+    </div>
+    <div class="grid-child">
+    <div class="clock">
+        <div>
+            <div class="date"></div>
+            <div class="day"></div>
+        </div>
+        <div class="dot">
+            <div class="dot1"></div>
+        </div>
+        <div>
+        <div class="hour-hand"></div>
+        <div class="minute-hand"></div>
+        <div class="second-hand"></div>
+    </div>
+    <div>
+        <span class="h3">3</span>
+        <span class="h6">6</span>
+        <span class="h9">9</span>
+        <span class="h12">12</span>
+    </div>
+    <div class="diallines"></div>
+    </div>
+    </div>
+    </div>
+  <script type="text/javascript">
+        var diallines=document.getElementsByClassName('diallines');
+        var clockE1=document.getElementsByClassName('clock')[0];
+        for(var i=1;i<60;i++){
+            clockE1.innerHTML+="<div class='diallines'></div>";
+            diallines[i].style.transform="rotate("+6*i+"deg)";
+        }
+        function clock(){
+            var weekday=new Array(7),
+            d=new Date(),
+            h=d.getHours(),
+            m=d.getMinutes(),
+            s=d.getSeconds(),
+            date=d.getDate(),
+            month=d.getMonth()+1,
+            year=d.getFullYear(),
+
+            hDeg=h * 30 + m/2,
+            mDeg=m * 6,
+            sDeg=s * 6,
+
+            hE1=document.querySelector('.hour-hand'),
+            mE1=document.querySelector('.minute-hand'),
+            sE1=document.querySelector('.second-hand'),
+            dateE1=document.querySelector('.date'),
+            dayE1=document.querySelector('.day');
+
+
+            weekday[0]="Sunday";
+            weekday[1]="Monday";
+            weekday[2]="Tuesday";
+            weekday[3]="Wednesday";
+            weekday[4]="Thursday";
+            weekday[5]="Friday";
+            weekday[6]="Saturday";
+
+
+            var day=weekday[d.getDay()];
+            hE1.style.transform="rotate("+hDeg+"deg)";
+            mE1.style.transform="rotate("+mDeg+"deg)";
+            sE1.style.transform="rotate("+sDeg+"deg)";
+
+            dateE1.innerHTML=date+"/"+month+"/"+year;
+            dayE1.innerHTML=day;
+        }
+        setInterval("clock()",100);
+    </script>
+    <script src="dynamic.js"></script>
+    <footer>
+        <p>Weather and Analog clock</p>
+    </footer>  
+</body>
+</html>