Skip to content

Commit

Permalink
issue no. E-Cell-VSSUT#46 resolved
Browse files Browse the repository at this point in the history
  • Loading branch information
@narendercoder
narendercoder committed Oct 8, 2022
1 parent be41ca5 commit 1092a15
Show file tree
Hide file tree
Showing 4 changed files with 575 additions and 0 deletions.
1 change: 1 addition & 0 deletions NarenderSinghBisht/.env.local
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
REACT_APP_WEATHER_API="df46ab06550bc5f6c8ec265ed2cddfbd"
97 changes: 97 additions & 0 deletions NarenderSinghBisht/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,97 @@
<!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>Document</title>
<link rel="stylesheet" href="style.css">
<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=Open+Sans:wght@300;400;600;700;800&display=swap" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="box">
<h1 class="heading" id="time"></span></h1>
<h3 class="date" id="date"></h3>
<div class="search" id="search-form">
<input
class="searchTerm"
autoFocus
id="search-input"
placeholder="Search"
autocomplete="off"
required
></input>
<button class="search-button" id="search-button" type="button" >
search
</button>
</div>
<div class="widget">
<div class="wrapper">
<div class="weatherInfo">
<span class="place" >
<i class="fa fa-location-dot"></i>
<span id="location">-----</span>,
<span id="country">------</span>
</span>
<br />
<div class="weatherIcon">
<i class="wi" id="temp-icon"></i>
</div>
<h1 class="temperature"><span id="temp-value"></span>°C</h1>
<span class="weathercondition" id="climate"></span>
</div>
</div>
<div class="detail">
<span class="span">Weather details</span>
</div>
<div class="extra-temp">
<div class="temp-info-minmax">
<div class="two-sided-section">
<p>
<i class="wi wi-sunset"></i>
</p>
<p class="extra-info-leftside">
<span id="sunset"></span> PM<br />
Sunset
</p>
</div>
<div class="two-sided-section">
<p>
<i class="wi wi-humidity"></i>
</p>
<p class="extra-info-leftside">
<span id="humidity">------</span>%<br />
Humidity
</p>
</div>
</div>
<div class="weather-extra-info">
<div class="two-sided-section">
<p>
<i class="wi wi-rain"></i>
</p>
<p class="extra-info-leftside">
<span id="pressure"></span> hpa <br />
Pressure
</p>
</div>
<div class="two-sided-section">
<p>
<i class="wi wi-strong-wind"></i>
</p>
<p class="extra-info-leftside" >
<span id="wind-speed"></span> km/h<br />
Speed
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="index.js"></script>
</body>
</html>
189 changes: 189 additions & 0 deletions NarenderSinghBisht/index.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,189 @@
let loc = document.getElementById("location");
let country = document.getElementById("country");
let tempIcon = document.getElementById("temp-icon");
let tempValue = document.getElementById("temp-value");
let climate = document.getElementById("climate");
let sunset = document.getElementById("sunset");
let pressure = document.getElementById("pressure");
let WindSpeed = document.getElementById("wind-speed");
let humidity = document.getElementById("humidity");
let time = document.getElementById("time");
let date = document.getElementById("date");

const searchInput = document.getElementById("search-input");
const searchButton = document.getElementById("search-button");

searchButton.addEventListener("click", (e) => {
e.preventDefault();
weather(searchInput.value);
searchInput.value = "";
});
const weather = async (city) => {
const res = await fetch(
`https://api.openweathermap.org/data/2.5/weather?q=${city}&units=metric&appid=4fbc4d95b3003819a0db75cbfef6c60f`
);
const weatherData = await res.json();
getWeather(weatherData);
};
const getWeather = async (weatherData) => {
try {
const { name } = weatherData;
const { temp } = weatherData.main;
const { main } = weatherData.weather[0];

country.textContent = weatherData.sys.country;
pressure.textContent = weatherData.main.pressure;
humidity.textContent = weatherData.main.humidity;
WindSpeed.textContent = weatherData.wind.speed;

loc.textContent = name;
climate.textContent = main;
tempValue.textContent = temp.toFixed(0);

let sec = weatherData.sys.sunset;
let date = new Date(sec * 1000);
let timeStr = `${date.getHours()}:${date.getMinutes()}`;
sunset.textContent = timeStr;

if (weatherData.weather[0].main) {
switch (weatherData.weather[0].main) {
case "Clouds":
tempIcon.classList.add("wi-day-cloudy");
tempIcon.classList.remove(
"wi-fog",
"wi-day-sunny",
"wi-dust",
"wi-day-thunderstorm"
);
break;
case "Haze":
tempIcon.classList.add("wi-fog");
tempIcon.classList.remove(
"wi-day-cloudy",
"wi-day-sunny",
"wi-dust",
"wi-day-thunderstorm"
);
break;
case "Clear":
tempIcon.classList.add("wi-day-sunny");
tempIcon.classList.remove(
"wi-fog",
"wi-day-cloudy",
"wi-dust",
"wi-day-thunderstorm"
);
break;
case "Mist":
tempIcon.classList.add("wi-dust");
tempIcon.classList.remove(
"wi-fog",
"wi-day-cloudy",
"wi-day-sunny",
"wi-day-thunderstorm"
);
break;
case "Dust":
tempIcon.classList.add("wi-dust");
tempIcon.classList.remove(
"wi-fog",
"wi-day-cloudy",
"wi-day-sunny",
"wi-day-thunderstorm"
);
break;
case "Thunderstorm":
tempIcon.classList.add("wi-day-thunderstorm");
tempIcon.classList.remove(
"wi-fog",
"wi-day-cloudy",
"wi-day-sunny",
"wi-dust"
);
break;
case "Rain":
tempIcon.classList.add("wi-day-thunderstorm");
tempIcon.classList.remove(
"wi-fog",
"wi-day-cloudy",
"wi-day-sunny",
"wi-dust"
);
break;
default:
case "Clear":
tempIcon.classList.add("wi-day-sunny");
tempIcon.classList.remove(
"wi-fog",
"wi-day-cloudy",
"wi-day-thunderstorm",
"wi-dust"
);
break;
}
}
} catch (error) {
alert("city not found");
console.log(error);
}
};

window.addEventListener("load", () => {
let hour = new Date().getHours();
let minute = new Date().getMinutes();
let am = "AM";

const month = [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec",
];
const d = new Date();
let monthName = month[d.getMonth()];

let day = new Date().getDate();
const weekday = ["Sun", "Mon", "Tues", "Wed", "Thurs", "Fri", "Sat"];

const week = new Date();
let weekDay = weekday[week.getDay()];

const updateTime = () => {
am = "AM";
hour = new Date().getHours();
minute = new Date().getMinutes();
am = hour > 12 ? ((hour = hour - 12), (am = "PM")) : am;
hour = hour < 10 ? `0${hour}` : hour;
minute = minute < 10 ? `0${minute}` : minute;

time.textContent = `${hour}:${minute} ${am}`;
date.textContent = `${monthName} ${day} ${weekDay}`;
};
setInterval(updateTime, 1000);

let long;
let lat;
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition((pos) => {
long = pos.coords.longitude;
lat = pos.coords.latitude;

const api = `https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${long}&units=metric&appid=4fbc4d95b3003819a0db75cbfef6c60f`;
fetch(api)
.then((res) => {
return res.json();
})
.then((data) => {
getWeather(data);
});
});
}
});
Loading

0 comments on commit 1092a15

Please sign in to comment.