Skip to content

Commit

Permalink
Fetures and UI
Browse files Browse the repository at this point in the history
  • Loading branch information
@code-with-divyanshu
code-with-divyanshu committed Jul 18, 2024
1 parent 48d2c66 commit a95e662
Show file tree
Hide file tree
Showing 5 changed files with 101 additions and 82 deletions.
79 changes: 41 additions & 38 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,40 +1,43 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Weather App</title>
<link rel="stylesheet" type="text/css" href="weather-app/style.css">
</head>
<body>
<div class="card">
<div class="search">
<input type="text" placeholder="Enter City Name" spellcheck="false">
<button><img src="weather-app/img/search.png" alt="search icon"></button>
</div>
<div class="weather">
<img src="weather-app/rainy.png" alt="rainy" class="weather-icon">
<h1 class="temp">22°C</h1>
<h2 class="city">New York</h2>
<div class="details">
<div class="col">
<img src="weather-app/img/humidity.png">
<div>
<p class="humidity">50%</p>
<p>Humidity</p>
</div>
</div>
<div class="col">
<img src="weather-app/img/wind.png">
<div>
<p class="wind">12 Km/h</p>
<p>Wind Speed</p>
</div>
</div>
</div>
</div>
</div>

<script src="weather-app/script.js"></script>
</body>
</html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Weather App</title>
<link rel="stylesheet" type="text/css" href="weather-app/style.css" />
<link rel="icon" type="image/png+jpj" href="weather-app\img\sun.png" />
</head>
<body>
<div class="card">
<div class="search">
<input type="text" placeholder="Enter City Name" spellcheck="false" />
<button>
<img src="weather-app/img/search.png" alt="search icon" />
</button>
</div>
<div class="weather">
<img src="weather-app/rainy.png" alt="rainy" class="weather-icon" />
<h1 class="temp">22°C</h1>
<h2 class="city">New York</h2>
<div class="details">
<div class="col">
<img src="weather-app/img/humidity.png" />
<div>
<p class="humidity">50%</p>
<p>Humidity</p>
</div>
</div>
<div class="col">
<img src="weather-app/img/wind.png" />
<div>
<p class="wind">12 Km/h</p>
<p>Wind Speed</p>
</div>
</div>
</div>
</div>
</div>

<script src="weather-app/script.js"></script>
</body>
</html>
Binary file added weather-app/img/weather.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
77 changes: 39 additions & 38 deletions weather-app/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,40 +1,41 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Weather App</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="card">
<div class="search">
<input type="text" placeholder="Enter City Name" spellcheck="false">
<button><img src="img/search.png" alt="search icon"></button>
</div>
<div class="weather">
<img src="rainy.png" alt="rainy" class="weather-icon">
<h1 class="temp">22°C</h1>
<h2 class="city">New York</h2>
<div class="details">
<div class="col">
<img src="img/humidity.png">
<div>
<p class="humidity">50%</p>
<p>Humidity</p>
</div>
</div>
<div class="col">
<img src="img/wind.png">
<div>
<p class="wind">12 Km/h</p>
<p>Wind Speed</p>
</div>
</div>
</div>
</div>
</div>

<script src="script.js"></script>
</body>
</html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Weather App</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="icon" type="image/png+jpj" href="img\sun.png" />
</head>
<body>
<div class="card">
<div class="search">
<input type="text" placeholder="Enter City Name" spellcheck="false" />
<button><img src="img/search.png" alt="search icon" /></button>
</div>
<div class="weather">
<img src="rainy.png" alt="rainy" class="weather-icon" />
<h1 class="temp">22°C</h1>
<h2 class="city">New York</h2>
<div class="details">
<div class="col">
<img src="img/humidity.png" />
<div>
<p class="humidity">50%</p>
<p>Humidity</p>
</div>
</div>
<div class="col">
<img src="img/wind.png" />
<div>
<p class="wind">12 Km/h</p>
<p>Wind Speed</p>
</div>
</div>
</div>
</div>
</div>

<script src="script.js"></script>
</body>
</html>
6 changes: 6 additions & 0 deletions weather-app/script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,3 +49,9 @@ async function checkWeather(citys) {
searchbtn.addEventListener("click", () => {
checkWeather(search.value);
});

search.addEventListener("keypress", (e) => {
if (e.key === "Enter") {
checkWeather(e.target.value);
}
});
21 changes: 15 additions & 6 deletions weather-app/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,23 @@
box-sizing: border-box;
}

body {
background: #222;
.card::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url("img/weather.jpg");
background-size: cover;
background-position: center;
filter: grayscale(40%);
z-index: -1; /* Ensure the pseudo-element is behind the content */
}

.card {
width: 90%;
max-width: 470px;
background: linear-gradient(135deg, #00feba, #5b548a);
width: 94%;
max-width: 480px;
background: linear-gradient(135deg, #0962af, #7d14df, #010c20);
color: #fff;
margin: 100px auto 0;
border-radius: 20px;
Expand Down

0 comments on commit a95e662

Please sign in to comment.