Skip to content

Commit 13463da

Browse files
TusharKesarwaniTusharKesarwani
authored
Merge pull request #1877 from 0plaze0/main
dailyforcast
2 parents f4cb04e + b06c60e commit 13463da

7 files changed

Lines changed: 472 additions & 0 deletions

File tree

‎Projects/Weather APP/index.html‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Weather App</title>
8+
<link rel="stylesheet" href="style/style.css" />
9+
<link
10+
rel="stylesheet"
11+
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
12+
/>
13+
<link rel="preconnect" href="https://fonts.googleapis.com" />
14+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
15+
<link
16+
href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap"
17+
rel="stylesheet"
18+
/>
19+
<link rel="stylesheet" href="style/fadeIn.css" />
20+
<script src="script/main.js" type="module"></script>
21+
<script
22+
src="https://kit.fontawesome.com/8b37be8fdd.js"
23+
crossorigin="anonymous"
24+
></script>
25+
</head>
26+
<body>
27+
<div class="container">
28+
<header class="fade-in">
29+
<div class="search">
30+
<form id="search__form">
31+
<input
32+
type="text"
33+
id="search__bar"
34+
class="search__bar"
35+
placeholder="City, State or Country"
36+
/>
37+
<button id="search__button" class="search__button">
38+
<i class="fa fa-search"></i>
39+
</button>
40+
</form>
41+
</div>
42+
</header>
43+
<main id="main" class="fade-in">
44+
<!-- <div id="temp" class="temp">
45+
<h1>53°</h1>
46+
<p>C</p>
47+
</div>
48+
<div class="weather-icon" id="weather-icon">
49+
<i class="fa fa-sun-o"></i>
50+
</div>
51+
<div class="location" id="location"><p>New York</p></div> -->
52+
</main>
53+
<footer id="footer" class="fade-in">
54+
<!-- <div class="humidity" id="humidity">
55+
<h2>58%</h2>
56+
<p>humidity</p>
57+
</div>
58+
<div class="wind" id="wind">
59+
<h2>52mph</h2>
60+
<p>wind-speed</p>
61+
</div> -->
62+
</footer>
63+
</div>
64+
</body>
65+
</html>

‎Projects/Weather APP/script/DataFunction.js‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
const WEATHER_API = "be43bb35b1dde85b62d0f3f123cb751f";
2+
3+
const getData = async (url) => {
4+
const dataJson = await fetch(url);
5+
const data = await dataJson.json();
6+
return data;
7+
};
8+
9+
export const getDataFromApi = async (WeatherObj) => {
10+
const url = `https://api.openweathermap.org/data/2.5/weather?q=${
11+
WeatherObj.location || "Mumbai"
12+
}&units=metric&appid=${WEATHER_API}`;
13+
const locationObj = await getData(url);
14+
WeatherObj.temp = locationObj.main.temp;
15+
WeatherObj.humidity = locationObj.main.humidity;
16+
WeatherObj.wind = locationObj.wind.speed;
17+
WeatherObj.icon = locationObj.weather[0].icon;
18+
// console.log(WeatherObj.temp);
19+
// console.log(WeatherObj.humidity);
20+
// console.log(WeatherObj.wind);
21+
// console.log(WeatherObj.icon);
22+
// console.log(locationObj);
23+
};
24+
25+
// await (await fetch("https://api.openweathermap.org/data/2.5/weather?q=London&units=metric&appid=be43bb35b1dde85b62d0f3f123cb751f")).json();

‎Projects/Weather APP/script/currentLocation.js‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
export default class CurrentLocation {
2+
#location;
3+
#temp;
4+
#humidity;
5+
#wind;
6+
#icon;
7+
constructor() {
8+
this.#location = null;
9+
this.#temp = null;
10+
this.#humidity = null;
11+
this.#wind = null;
12+
this.#icon = null;
13+
}
14+
get location() {
15+
return this.#location;
16+
}
17+
set location(location) {
18+
this.#location = location;
19+
}
20+
get temp() {
21+
return this.#temp;
22+
}
23+
set temp(temp) {
24+
this.#temp = temp;
25+
}
26+
get humidity() {
27+
return this.#humidity;
28+
}
29+
set humidity(humidity) {
30+
this.#humidity = humidity;
31+
}
32+
get wind() {
33+
return this.#wind;
34+
}
35+
set wind(wind) {
36+
this.#wind = wind;
37+
}
38+
get icon() {
39+
return this.#icon;
40+
}
41+
set icon(icon) {
42+
this.#icon = icon;
43+
}
44+
}

‎Projects/Weather APP/script/domFunction.js‎

Lines changed: 163 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,163 @@
1+
export const getDataFromSearch = () => {
2+
const searchBar = document.getElementById("search__bar");
3+
const properText = toProperText(searchBar.value);
4+
return properText;
5+
};
6+
const toProperText = (text) => {
7+
const improperText = text;
8+
const properText = text[0].toUpperCase() + text.slice(1).toLowerCase();
9+
return properText;
10+
};
11+
12+
// Dom Element
13+
14+
export const DisplayDataInApp = (weatherObj) => {
15+
const main = document.getElementById("main");
16+
const footer = document.getElementById("footer");
17+
// console.log(main);
18+
19+
//temp data
20+
clearDisplay(main);
21+
const temp = createElem("div", "temp");
22+
const tempValue = createElem("h1");
23+
const unit = createElem("p");
24+
content(tempValue, `${Math.round(weatherObj.temp) || "0"}°`);
25+
content(unit, "C");
26+
const Location = createElem("div", "location");
27+
const LocationText = createElem("p");
28+
content(LocationText, weatherObj.location);
29+
30+
const icon = createElem("div", "weather-icon");
31+
const i = createElem("i");
32+
const iClass = transformWeatherIcon(i, weatherObj.icon || "01d");
33+
34+
addChild(temp, tempValue, unit);
35+
addChild(Location, LocationText);
36+
addChild(icon, i);
37+
addChild(main, temp, Location, icon);
38+
39+
//footer data
40+
clearDisplay(footer);
41+
const humidity = createElem("div", "humdity");
42+
const humidityValue = createElem("h2");
43+
const humidityText = createElem("p");
44+
content(humidityValue, `${weatherObj.humidity || "0"} %`);
45+
content(humidityText, "Humidity");
46+
addChild(humidity, humidityValue, humidityText);
47+
48+
const wind = createElem("div", "wind");
49+
const windValue = createElem("h2");
50+
const windText = createElem("p");
51+
content(windValue, `${weatherObj.wind || "0"} m/s`);
52+
content(windText, "wind-speed");
53+
addChild(wind, windValue, windText);
54+
55+
addChild(footer, humidity, wind);
56+
fadeIn();
57+
};
58+
/*
59+
<footer id="footer">
60+
<div class="humidity" id="humidity">
61+
<h2>58%</h2>
62+
<p>humidity</p>
63+
</div>
64+
<div class="wind" id="wind">
65+
<h2>52mph</h2>
66+
<p>wind-speed</p>
67+
</div>
68+
</footer>
69+
*/
70+
const fadeIn = () => {
71+
const main = document.getElementById("main");
72+
main.classList.toggle("zero-vis");
73+
main.classList.toggle("fade-in");
74+
const footer = document.getElementById("footer");
75+
footer.classList.toggle("zero-vis");
76+
footer.classList.toggle("fade-in");
77+
};
78+
79+
const createElem = (tag, className) => {
80+
const Elem = document.createElement(tag);
81+
if (className) {
82+
Elem.classList.add(className);
83+
}
84+
return Elem;
85+
};
86+
87+
const content = (elem, text) => {
88+
elem.textContent = text;
89+
};
90+
91+
function addChild(value, ...args) {
92+
return args.forEach((args) => {
93+
value.appendChild(args);
94+
});
95+
}
96+
97+
const clearDisplay = (tag) => {
98+
let lastChild = tag.lastElementChild;
99+
while (lastChild) {
100+
tag.removeChild(lastChild);
101+
lastChild = tag.lastElementChild;
102+
}
103+
};
104+
105+
const transformWeatherIcon = (i, icon) => {
106+
const firstTwoChars = icon.slice(0, 2);
107+
const lastChar = icon.slice(2);
108+
// console.log(firstTwoChars);
109+
switch (firstTwoChars) {
110+
case "01":
111+
if (lastChar === "d") {
112+
i.classList.add("fa", "fa-sun-o");
113+
} else {
114+
i.classList.add("fa", "fa-moon");
115+
}
116+
break;
117+
case "02":
118+
if (lastChar === "d") {
119+
i.classList.add("fa", "fa-cloud-sun");
120+
} else {
121+
i.classList.add("fa", "fa-cloud-moon");
122+
}
123+
break;
124+
case "03":
125+
i.classList.add("fa-solid", "fa-cloud");
126+
break;
127+
case "04":
128+
i.classList.add("fa-brands", "fa-soundcloud");
129+
break;
130+
case "09":
131+
i.classList.add("fa-solid", "fa-cloud-showers-water");
132+
break;
133+
case "10":
134+
if (lastChar === "d") {
135+
i.classList.add("fa-solid", "fa-cloud-sun-rain");
136+
} else {
137+
i.classList.add("fa-solid", "fa-cloud-moon-rain");
138+
}
139+
break;
140+
case "11":
141+
i.classList.add("fa-solid", "fa-cloud-bolt");
142+
break;
143+
case "13":
144+
i.classList.add("fa-solid", "fa-snowflake");
145+
break;
146+
case "50":
147+
i.classList.add("fa-solid", "fa-bars-staggered");
148+
break;
149+
default:
150+
i.classList.add("far", "fa-question");
151+
}
152+
};
153+
154+
// const div = document.createElement("div");
155+
// const h1 = document.createElement("h1");
156+
// const p = document.createElement("p");
157+
// h1.textContent = "hello";
158+
// p.textContent = "no";
159+
// div.appendChild(h1);
160+
// div.appendChild(p);
161+
// div.classList.add("temp");
162+
// main.appendChild(div);
163+
// main.appendChild(div);

‎Projects/Weather APP/script/main.js‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import CurrentLocation from "./currentLocation.js";
2+
import { getDataFromApi } from "./DataFunction.js";
3+
import { getDataFromSearch, DisplayDataInApp } from "./domFunction.js";
4+
5+
const currentLoc = new CurrentLocation();
6+
7+
const initApp = () => {
8+
const searchBar = document.getElementById("search__form");
9+
searchBar.addEventListener("submit", getDataFromUser);
10+
getDataFromApi(currentLoc);
11+
DisplayDataInApp(currentLoc);
12+
};
13+
14+
const getDataFromUser = (event) => {
15+
event.preventDefault();
16+
const location = getDataFromSearch();
17+
currentLoc.location = location;
18+
initApp();
19+
};
20+
initApp();

‎Projects/Weather APP/style/fadeIn.css‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
.zero-vis {
2+
visibility: hidden;
3+
opacity: 0;
4+
}
5+
.fade-in {
6+
visibility: visible;
7+
opacity: 1;
8+
animation-name: fadeInOpacity;
9+
animation-iteration-count: 1;
10+
animation-timing-function: ease-in;
11+
animation-duration: 1.5s;
12+
}
13+
@keyframes fadeInOpacity {
14+
0% {
15+
opacity: 0;
16+
}
17+
50% {
18+
opacity: 0.5;
19+
}
20+
100% {
21+
opacity: 1;
22+
}
23+
}

0 commit comments

Comments
 (0)