Merge pull request #105 from Aswathi093/main

issue #46 resolved
E-Cell-VSSUT · Oct 10, 2022 · 2bcae69 · 2bcae69
2 parents 9c425f9 + 1499864
commit 2bcae69
Show file tree

Hide file tree

Showing 50 changed files with 1,069 additions and 0 deletions.
diff --git a/Aswathi M/image.jpg b/Aswathi M/image.jpg
diff --git a/Aswathi M/index.html b/Aswathi M/index.html
@@ -0,0 +1,43 @@
+<!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>Login Form</title>
+    <link href="style.css" rel="stylesheet" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&family=Rubik:wght@400;500;600;700&display=swap"
+      rel="stylesheet"
+    />
+
+
+  </head>
+  <body>
+    <div class="bg-container">
+    </div>
+    <div class="container">
+      <div class="heading">Login Form</div>
+      <form>
+        <div class="user-details">
+          <div class="input-box">
+            <div class="details"> Username </div>
+            <input type="text" placeholder="Take a username" />
+          </div>
+          <div class="input-box">
+            <div class="details"> Email </div>
+            <input type="email" placeholder="Enter your Email address" />
+          </div>
+          <div class="input-box">
+            <div class="details"> Password </div>
+            <input type="password" placeholder="Enter Your Password" />
+          </div>
+
+        </div>
+        <a href="#" class="btn">LOGIN</a>
+      </form>
+    </div>
+  </body>
+</html>
diff --git a/Aswathi M/style.css b/Aswathi M/style.css
@@ -0,0 +1,144 @@
+* {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+}
+html {
+  font-size: 10px;
+}
+body {
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-family: "Rubik", sans-serif;
+  background-image: url(/image.jpg); 
+  background-repeat:no-repeat;
+  background-size: cover;
+  background-position: center center;
+  max-width: 140rem;
+  margin: 0 auto;
+  background-image: linear-gradient(
+      rgba(34, 34, 34, 0.6),
+      rgba(34, 34, 34, 0.6)
+    ),
+    url(image.jpg);
+}
+
+.container {
+  padding: 5rem;
+  background-color: #f8f9fa6e;
+  box-shadow: 0 0 8px 2px rgba(136,136,136,0.385);
+}
+.heading {
+  font-size: 3.2rem;
+  font-weight: 600;
+  color: rgb(58, 56, 56);
+}
+.details {
+  font-size: 2rem;
+  color: #444;
+  margin-bottom: 20px;
+}
+form .user-details {
+  display:inline-block;
+   flex-wrap:wrap;
+  justify-content: space-between;
+}  
+form .user-details .input-box {
+  margin: 2rem 0 1.2rem 0;
+  /* width: calc(100% / 2 - 2rem); */
+  margin-bottom: 1.5rem;
+}
+form .user-details .input-box input {
+  height: 4.5rem;
+  width: 100%;
+  outline: none;
+  border-radius: 5px;
+  border: 1px solid #ccc;
+  font-size: 1.6rem;
+  padding-left: 1.5rem;
+  border-bottom-width: 2px;
+  transition: all 0.2sec ease;
+}
+.user-details .input-box details {
+  font-weight: 500;
+  margin-bottom: 1rem;
+  display: block;
+}
+.btn:link,
+.btn:visited {
+  display: flex;
+  justify-content: center;
+  font-size: 1.6rem;
+  text-decoration: none;
+  padding: 8px;
+  background-color: #099268;
+  color: #fff;
+  border-radius: 5px;
+}
+.btn:hover,
+.btn:active {
+  background-color: #087f5b;
+  transition: all 0.3s;
+}
+@MEDIA(min-width:900px) {
+  .container{
+    max-width:88rem;
+  }
+
+}
+@MEDIA(min-width:700px) and (max-width:900px){
+  .container{
+    max-width:69rem;
+  }
+}
+@MEDIA(min-width:500px) and (max-width:700px){
+  .container{
+    max-width:58rem;
+  }
+}
+@MEDIA(min-width:400px) and (max-width:500px){
+  .container{
+    max-width:40rem;
+  }
+  .details{
+    font-size:16px;
+  }
+  form .user-details .input-box input {
+    height: 4rem;
+    font-size:1.2rem;
+    width:17rem;
+  }
+
+}
+@MEDIA(min-width:350px) and (max-width:400px){
+  .container{
+    max-width:38rem;
+  }
+  .details{
+    font-size:15px;
+  }
+  form .user-details .input-box input {
+    height: 3rem;
+    font-size:1rem;
+    width:15rem;
+  }
+
+}
+@MEDIA(min-width:300px) and (max-width:350px){
+  .container{
+    max-width:39rem;
+    padding:1.1rem;
+  }
+  .details{
+    font-size:15px;
+  }
+  form .user-details .input-box input {
+    height: 3rem;
+    font-size:1rem;
+    width:13rem;
+    padding-left:0.2rem;
+  }
+
+}
diff --git a/AswathiM/app.js b/AswathiM/app.js
@@ -0,0 +1,63 @@
+const cityForm = document.querySelector('form');
+const card = document.querySelector('.card');
+const details = document.querySelector('.details');
+const time = document.querySelector('img.time');
+const icon = document.querySelector('.icon img');
+
+const updateUI = (data) => {
+
+    // const cityDets = data.cityDets;
+    // const weather = data.weather;
+
+    // destructuring properties
+    const { cityDets, weather } = data;
+
+    // updating details template
+
+    details.innerHTML = `
+<h5 class="my-3">${cityDets.EnglishName}</h5>
+            <div class="my-3">${weather.WeatherText}</div>
+            <div class="display-4 my-4">
+                <span>${weather.Temperature.Metric.Value}</span>
+                <span>&deg;C</span>
+            </div>`;
+
+    // update day and night images
+
+    const iconSrc=`img/icons/${weather.WeatherIcon}.svg`;
+    icon.setAttribute('src',iconSrc);
+
+    // let timeSrc = 'weather.IsDayTime' ? 'img/day.svg' : 'img/night.svg';
+
+    let timeSrc = null;
+    if (weather.IsDayTime) {
+        timeSrc = 'img/day.svg';
+    }
+    else {
+        timeSrc = 'img/night.svg';
+    }
+    time.setAttribute('src', timeSrc);
+
+    // remove the d-none class if present
+    if (card.classList.contains('d-none')) {
+        card.classList.remove('d-none');
+    }
+};
+
+
+const updateCity = async (city) => {
+    const cityDets = await getCity(city);
+    const weather = await getWeather(cityDets.Key);
+
+    return { cityDets, weather };
+};
+
+cityForm.addEventListener('submit', e => {
+    e.preventDefault();
+    const city = cityForm.city.value.trim();
+    cityForm.reset();
+
+    updateCity(city)
+        .then(data => updateUI(data))
+        .catch(err => console.log(err));
+});
diff --git a/AswathiM/forecast.js b/AswathiM/forecast.js
@@ -0,0 +1,30 @@
+const key="ZWfGxQJ9crztTItIxx4RrlGu8KdwBljv";
+
+// get weather info
+const getWeather = async(id) =>{
+const base= 'http://dataservice.accuweather.com/currentconditions/v1/';
+const query=`${id}?apikey=${key}`;
+
+const response = await fetch(base + query);
+const data = await response.json();
+return data[0];
+};
+
+
+// get city info
+const getCity=async(city)=>{
+    const base="http://dataservice.accuweather.com/locations/v1/cities/search";
+    const query=`?apikey=${key}&q=${city}`;
+
+    const response=await fetch(base+query);
+    const data = await response.json();
+
+    return data[0];
+};
+getCity('kolkata')
+.then(data => {
+    return getWeather(data.Key)
+}).then(data =>{
+
+})
+.catch(err => console.log(err));
diff --git a/AswathiM/img/day.svg b/AswathiM/img/day.svg
diff --git a/AswathiM/img/icons/1.svg b/AswathiM/img/icons/1.svg
diff --git a/AswathiM/img/icons/11.svg b/AswathiM/img/icons/11.svg
diff --git a/AswathiM/img/icons/12.svg b/AswathiM/img/icons/12.svg
diff --git a/AswathiM/img/icons/13.svg b/AswathiM/img/icons/13.svg
diff --git a/AswathiM/img/icons/14.svg b/AswathiM/img/icons/14.svg