Skip to content

Commit b285877

Browse files
tajulafreentajulafreen
committed
add styles
1 parent 1168a90 commit b285877

File tree

3 files changed

+249
-39
lines changed

3 files changed

+249
-39
lines changed

‎Source-Code/WeatherApp/index.html‎

Lines changed: 53 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -4,20 +4,61 @@
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<title>Weather App</title>
7+
<link rel="stylesheet" href="style.css">
8+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
79
</head>
810
<body>
9-
<div>
10-
<h1>Weather App</h1>
11-
<div>
12-
<input id="input" type="text" placeholder="Enter city name">
13-
<button id="btn">Search</button>
14-
</div>
15-
<h6 id="country"></h6>
16-
<h6 id="city-name"></h6>
17-
<p id="date-time"></p>
18-
<div id="weather-icon"></div>
19-
<p id="temp"></p>
20-
<button id="getlocation">get the location</button>
11+
<div class="weather-app">
12+
<div class="weather-container">
13+
14+
<ul class="weather-information">
15+
<!-- <h2 class="heading">Check Weather</h2>
16+
-->
17+
<h1 id="temp" class="temp">23°C</h1>
18+
<li class="column">
19+
<h1 id="city-name" class="city">Kadapa</h1>
20+
<h4 id="date-time" class="time">2024-02-06 3:59</h4>
21+
</li>
22+
<li class="column">
23+
<img id="weather-icon" class="icon" src="./icons/night/113.png" class="icon" alt="icon" />
24+
<span id="condition" class="condition">Clear</span>
25+
</li>
26+
27+
</ul>
28+
<ul class="weather-suggestions">
29+
<form>
30+
<input class="input" id="input" type="text" placeholder="Enter city name">
31+
<button class="search" id="btn"><i class="fa fa-search"></i></button>
32+
</form>
33+
<ul>
34+
<li>
35+
<a class="location" id="getlocation"><i class="fa fa-location-arrow "> Get Weather of your city</i></a>
36+
</li>
37+
<li class="city">London</li>
38+
<li class="city">Delhi</li>
39+
<li class="city">Canada</li>
40+
<li class="city">Morocco</li>
41+
</ul>
42+
<h3 class="weather-details">Weather details</h3>
43+
<li class="row">
44+
<h3 class="country">Country</h3>
45+
<h3 id="country" class="country">India</h3>
46+
47+
</li>
48+
<li class="row">
49+
<p class="condition">Condition</p>
50+
<span id="condition" class="condition">Clear</span>
51+
52+
</li>
53+
<li class="row">
54+
<p class="humidity">Humidity</p>
55+
<span id="humidity" class="humidity">humidity</span>
56+
57+
</li>
58+
</ul>
59+
</div>
60+
61+
2162
<script src="script.js"></script>
2263
</div>
2364
</body>

‎Source-Code/WeatherApp/script.js‎

Lines changed: 36 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,15 @@
1-
const input = document.getElementById('input');
2-
const btn = document.getElementById('btn');
3-
const apiKey = 'e3a46268fdc2475cb63214712240202';
4-
const cityName = document.getElementById('city-name');
5-
const dateTime = document.getElementById('date-time');
6-
// const icon = document.getElementById('icon');
7-
const temp = document.getElementById('temp');
8-
const country = document.getElementById('country');
9-
const locat = document.getElementById('getlocation');
1+
const input = document.getElementById("input");
2+
const btn = document.getElementById("btn");
3+
const apiKey = "e3a46268fdc2475cb63214712240202";
4+
const cityName = document.getElementById("city-name");
5+
const dateTime = document.getElementById("date-time");
6+
const condition = document.getElementById("condition");
7+
const temp = document.getElementById("temp");
8+
const humidity = document.getElementById("humidity");
9+
const country = document.getElementById("country");
10+
const locat = document.getElementById("getlocation");
11+
const cities = document.getElementsByClassName("city");
12+
const icon = document.getElementById("icon");
1013

1114
const fetchData = async (url) => {
1215
try {
@@ -26,35 +29,47 @@ const updateWeatherInfo = (result) => {
2629
dateTime.innerText = `${result.location.localtime}`;
2730
temp.innerText = `${result.current.temp_c} °C`;
2831
};
29-
const getData = async (cityName) => fetchData(
30-
`http://api.weatherapi.com/v1/current.json?key=${apiKey}&q=${cityName}&aqi=no`,
31-
);
32+
const getData = async (cityName) =>
33+
fetchData(
34+
`http://api.weatherapi.com/v1/current.json?key=${apiKey}&q=${cityName}&aqi=no`
35+
);
3236

33-
const getlocation = async (lat, long) => fetchData(
34-
`http://api.weatherapi.com/v1/current.json?key=${apiKey}&q=${lat},${long}&aqi=no`,
35-
);
37+
const getlocation = async (lat, long) =>
38+
fetchData(
39+
`http://api.weatherapi.com/v1/current.json?key=${apiKey}&q=${lat},${long}&aqi=no`
40+
);
3641

3742
const gotlocation = async (position) => {
3843
try {
3944
const result = await getlocation(
4045
position.coords.latitude,
41-
position.coords.longitude,
46+
position.coords.longitude
4247
);
4348
updateWeatherInfo(result);
4449
} catch (error) {
45-
cityName.innerText = 'Error fetching weather based on location';
50+
cityName.innerText = "Error fetching weather based on location";
4651
}
4752
};
48-
const failedlocation = () => console.log('failed to locate location');
53+
const failedlocation = () => console.log("failed to locate location");
4954

50-
btn.addEventListener('click', async () => {
55+
btn.addEventListener("click", async () => {
5156
try {
5257
const { value } = input;
5358
const result = await getData(value);
5459
updateWeatherInfo(result);
5560
} catch (error) {
56-
cityName.innerText = 'Error to fetch weather';
61+
cityName.innerText = "Error to fetch weather";
5762
}
5863
});
5964

60-
locat.addEventListener('click', () => navigator.geolocation.getCurrentPosition(gotlocation, failedlocation));
65+
locat.addEventListener("click", () =>
66+
navigator.geolocation.getCurrentPosition(gotlocation, failedlocation)
67+
);
68+
const citiesArray = [...cities];
69+
// citiesArray.forEach((element) => {
70+
// element.addEventListener("click", async () => {
71+
// const cityName = element.innerText; // Extract city name from the clicked element
72+
// const result = await getData(cityName); // Pass the city name to getData
73+
// updateWeatherInfo(result);
74+
// });
75+
// });

‎Source-Code/WeatherApp/style.css‎

Lines changed: 160 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,160 @@
1-
body {
2-
font-family: Georgia, 'Times New Roman', Times, serif;
3-
margin: 0;
4-
overflow-x: hidden;
5-
height: 100vh;
6-
}
1+
* {
2+
box-sizing: border-box;
3+
padding: 0;
4+
margin: 0;
5+
}
6+
7+
.weather-app{
8+
min-height: 100vh;
9+
min-width: 100vw;
10+
background-image: url(./images/Night/clear.jpg);
11+
background-position: center;
12+
background-repeat: no-repeat;
13+
background-size: cover;
14+
position: relative;
15+
color: #fff;
16+
transition: 500ms linear;
17+
opacity: 1;
18+
}
19+
.weather-app::before{
20+
content: "";
21+
top: 0;
22+
left: 0;
23+
width: 100%;
24+
height: 100%;
25+
background: rgba(0,0,0,0.3);
26+
z-index: 0;
27+
}
28+
.weather-container{
29+
display: flex;
30+
justify-content: space-between;
31+
}
32+
.heading{
33+
display: flex;
34+
align-items: center;
35+
}
36+
37+
.temp{
38+
font-size: 56px;
39+
font-weight: 700;
40+
}
41+
.city{
42+
font-size: 48px;
43+
font-weight: 700;
44+
45+
}
46+
li{
47+
list-style: none;
48+
}
49+
.weather-information{
50+
display: flex;
51+
flex-direction: row;
52+
align-items: flex-end;
53+
padding: 5% 10%;
54+
gap: 5%;
55+
justify-content: space-between;
56+
57+
}
58+
.column{
59+
display: flex;
60+
flex-direction: column;
61+
justify-content: center;
62+
align-items: center;
63+
}
64+
.row{
65+
display: flex;
66+
justify-content: space-around;
67+
align-items: center;
68+
flex-wrap: wrap;
69+
margin: 25px auto;
70+
}
71+
72+
.weather-suggestions{
73+
width: 40vw;
74+
height: 100vh;
75+
background: rgba(236, 236, 178, 0.104);
76+
box-shadow: 0 8px 32px 0 rgba(0,0,0,0.3);
77+
backdrop-filter: blur(5px);
78+
--webkit-backdrop-filter: blur(5px);
79+
border: 1px solid rgb(236, 236, 178,0);
80+
z-index: 1;
81+
padding: 3em 2em;
82+
}
83+
form {
84+
margin-bottom: 3em;
85+
display: flex;
86+
gap: 10px;
87+
}
88+
.input{
89+
height: 40px;
90+
width: 90%;
91+
border-radius: 9px;
92+
border: inherit;
93+
padding: 15px;
94+
background: none;
95+
color: #fff;
96+
border-bottom: 1px solid #ccc;
97+
}
98+
.input:focus{
99+
outline: none;
100+
}
101+
.search{
102+
height: 40px;
103+
width: 40px;
104+
border-radius: 9px;
105+
border: inherit;
106+
background-color: rgb(129, 180, 231);
107+
}
108+
.fa-search{
109+
color: #fafafa;
110+
}
111+
.weather-suggestions > ul{
112+
display: flex;
113+
flex-direction: column;
114+
width: 90%;
115+
justify-content: center;
116+
margin: auto;
117+
118+
}
119+
.weather-suggestions > ul >li{
120+
margin: 15px auto;
121+
font-size: medium;
122+
height: 30px;
123+
padding: 5px;
124+
display: flex;
125+
justify-content: flex-start;
126+
}
127+
128+
.icon{
129+
height: 70px;
130+
width: 70px;
131+
border-radius: 50%;
132+
}
133+
span{
134+
font-size: medium;
135+
}
136+
.weather-details{
137+
display: flex;
138+
flex-direction: column;
139+
gap: 10px;
140+
margin: 30px auto;
141+
align-items: center;
142+
}
143+
.city, .location{
144+
display: block;
145+
cursor: pointer;
146+
}
147+
.city:hover, .location:hover{
148+
color: #fff;
149+
}
150+
151+
@media (max-width: 768px) {
152+
.weather-container{
153+
display: flex;
154+
flex-direction: column;
155+
width: 100%;
156+
}
157+
.weather-suggestions, .weather-information{
158+
width: 100%;
159+
}
160+
}

0 commit comments

Comments
 (0)