Skip to content

Added ICON to Weather App, Hover effects & Updated README #10

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Added ICON to Weather App, Hover effects & Updated README #10

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
269db91
Added icon, Hover effects & Updated README file
shannuvision Jul 22, 2025
731c29c
Update README.md
shannuvision Jul 22, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 28 additions & 2 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,40 @@
# 🌤️ Weather App
A responsive weather dashboard that lets users search for current weather and a 5-day forecast by city name or use their current location. Built with HTML, CSS, and JavaScript using the OpenWeatherMap API.




Added an icon to the weather application

![alt text](image.png)

Taking input city from user --

![alt text](image-1.png)

Preview

![alt text](image-5.png)

Hover effect --

![alt text](image-2.png)




Hover effect for weather cards(5-days forecast)





## 🚀 Features
- 🔍 Search by City: Type in any city to get its current weather and forecast.
- 📍 Use Current Location: Automatically fetches weather for your current location using geolocation.
- 🕔 5-Day Forecast: Displays upcoming weather including temperature, wind speed, and humidity.
- 🎨 Responsive Design: Fully responsive layout optimized for desktops and mobile devices.

## 🖼️ Preview
<img width="1852" height="929" alt="image" src="https://github.com/user-attachments/assets/5f499971-2ed9-4135-95a2-b00f1e44dcd2" />

## 🛠️ Technologies Used
- HTML5
Expand Down
Binary file added icon.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added image-1.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added image-2.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added image-5.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added image.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
15 changes: 8 additions & 7 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,11 @@
<script src="script.js" defer></script> <!-- links the JavaScript file, scripts.js,and defer loading until HTML is parsed -->
<title>Weather App</title>
<link rel="stylesheet" href="style.css"> <!-- links the CSS file, style.css, for styling -->
<link rel="icon" href="icon.jpg">
</head>
<body>
<!-- main heading of the page -->
<h1>Weather Dashboard</h1>
<h1>WEATHER DASHBOARD</h1>
<!-- main container to hold all the weather input and display components -->
<div class="container">
<!-- section for user input to search by city or use current location -->
Expand All @@ -33,7 +34,7 @@ <h3>Enter a City Name</h3>
<!-- Placeholder headings for displaying current city, temperature, wind speed, and humidity -->
<h2>_______ ( _______ )</h2>
<h4>Temp: ___°𝐂</h4>
<h4>Wind: __M/S</h4>
<h4>Wind: __m/s</h4>
<h4>Humidity: __%</h4>
</div>
</div>
Expand All @@ -47,32 +48,32 @@ <h2>5-Days Forecast</h2>
<h3>( _______ )</h3>
<!-- placeholder for date or day -->
<h4>Temp: ___°𝐂</h4>
<h4>Wind: __M/S</h4>
<h4>Wind: __m/s</h4>
<h4>Humidity: __%</h4>
</li>
<!-- repeat structure for remaining days -->
<li class="card">
<h3>( _______ )</h3>
<h4>Temp: ___°𝐂</h4>
<h4>Wind: __M/S</h4>
<h4>Wind: __m/s</h4>
<h4>Humidity: __%</h4>
</li>
<li class="card">
<h3>( _______ )</h3>
<h4>Temp: ___°𝐂</h4>
<h4>Wind: __M/S</h4>
<h4>Wind: __m/s</h4>
<h4>Humidity: __%</h4>
</li>
<li class="card">
<h3>( _______ )</h3>
<h4>Temp: ___°𝐂</h4>
<h4>Wind: __M/S</h4>
<h4>Wind: __m/s</h4>
<h4>Humidity: __%</h4>
</li>
<li class="card">
<h3>( _______ )</h3>
<h4>Temp: ___°𝐂</h4>
<h4>Wind: __M/S</h4>
<h4>Wind: __m/s</h4>
<h4>Humidity: __%</h4>
</li>
</ul>
Expand Down
92 changes: 76 additions & 16 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
padding: 0;
box-sizing: border-box;
font-family: "Open Sans", sans-serif;
font-size : 15px;
}
/* Styling for the body background image */
body{
Expand All @@ -20,14 +21,14 @@ h1 {
padding: 18px 0;
text-align: center;
font-size: 1.75rem;
background: #000; /* Background color for the header */
background:hsl(246, 92%, 14%);/* Background color for the header */

}
.container{
display: flex; /* Creates a flex container */
gap: 35px; /* Adds space between items */
padding: 30px; /* Padding around the container */
color: #000; /* Text color */
color: hsl(0, 0%, 100%); /* Text color */
font-size: x-large; /* Text size */
}
.weather-input{
Expand All @@ -47,18 +48,30 @@ h1 {
height:1px; /* Sets separator height */
width: 100%; /* Full width separator */
margin: 25px 0; /* Spacing around separator */
background: #D8BFD8; /* Light color for the line */
background: #e4dee4; /* Light color for the line */
display: flex; /* Flexbox for centering */
align-items: center; /* Centers items vertically */
justify-content: center; /* Centers items horizontally */
}

.weather-input input:hover {
transform: scale(1.00);
box-shadow: 0 0 30px rgba(255, 255, 255, 0.837);

}

.weather-input input:hover::before {
opacity: 1;
transform: rotate(-45deg) translateY(100%);
}

.weather-input .separator::before{
content: "or"; /* Displays 'or' text in the separator */
color: #fff; /* Text color */
color: #000000;/* Text color */
font-size: 1.18rem; /* Font size for the text */
padding: 0 15px; /* Spacing around text */
margin-top: -4px; /* Adjusts position */
background: #4c056a; /* Background color for the text */
background:hsl(0, 0%, 100%); /* Background color for the text */
}
.weather-input button {
width: 100%; /* Full-width button */
Expand All @@ -69,22 +82,58 @@ h1 {
color: #fff; /* White text */
font-size: 1rem; /* Font size */
border-radius: 4px; /* Rounded corners */
background: #4c056a; /* Background color for the button */
background: hsl(212, 91%, 48%); /* Background color for the button */
}

.weather-input button:hover {
transform: scale(1.00);
box-shadow: 0 0 30px rgba(238, 237, 242, 0.837);
background:hsl(245, 82%, 22%);
}

.weather-input button:hover::before {
opacity: 1;
transform: rotate(-45deg) translateY(100%);
}
.weather-input .location-btn:hover {
transform: scale(1.00);
box-shadow: 0 0 30px rgba(238, 237, 242, 0.837);
background:hsl(246, 92%, 14%);
}

.weather-input .location-btn:hover::before {
opacity: 1;
transform: rotate(-45deg) translateY(100%);
}


.weather-input .location-btn {
background: #4c056a; /* Same background as the search button */
background: hsl(212, 91%, 48%); /* Same background as the search button */
}
.weather-data{
width: 100%; /* Full width for the weather data section */
}
.current-weather {
color: #fff; /* White text */
color: #000000; /* White text */
display: flex; /* Flexbox layout */
border-radius: 5px; /* Rounded corners */
padding: 20px 70px 20px 20px; /* Padding on all sides */
background: #4c056a; /* Background color for weather details */
background: hsla(0, 2%, 67%, 0.704); /* Background color for weather details */
justify-content: space-between; /* Space between items */
}
.current-weather:hover {
transform: scale(1.00);
box-shadow: 0 0 30px rgba(238, 237, 242, 0.837);
background:hsl(245, 82%, 22%);
color: white;
}

.current-weather:hover::before {
opacity: 1;
transform: rotate(-45deg) translateY(100%);
}


.current-weather h2 {
font-size: 1.7rem; /* Heading font size */
}
Expand All @@ -105,27 +154,38 @@ h1 {
text-transform: capitalize; /* Capitalizes text */
}
.days-forecast h2 {
font-size: 1.5rem; /* Font size for 5-days forecast heading */
font-size: 1.0rem; /* Font size for 5-days forecast heading */
margin: 20px 0; /* Margin above and below */
color: #000; /* Text color */
color: white; /* Text color */
font-size: xx-large; /* Font size */
}
.weather-cards {
display: flex; /* Flexbox for weather cards */
gap: 20px; /* Space between cards */
gap: 10px; /* Space between cards */
}
.weather-cards .card {
list-style: none; /* Removes bullet points */
color: #fff; /* Text color */
padding: 18px 16px; /* Padding inside cards */
border-radius: 5px; /* Rounded corners */
background: #4c056a; /* Background color for cards */
color: black; /* Text color */
padding: 10px 8px; /* Padding inside cards */
border-radius: 7px; /* Rounded corners */
background:hsla(0, 1%, 35%, 0.367);/* Background color for cards */
width: calc(100% / 5); /* Responsive width */
}
.weather-cards .card img {
max-width: 70px; /* Max width for images in cards */
margin: 5px 0 -12px 0; /* Adjusts image spacing */
}
.weather-cards .card:hover {
transform: scale(1.00);
box-shadow: 0 0 40px rgba(238, 237, 242, 0.837);
background:hsl(245, 82%, 22%);
color: white;
}

.weather-cards .card:hover::before {
opacity: 1;
transform: rotate(-45deg) translateY(100%);
}

@media (max-width:1400px) {
.weather-data .current-weather {
Expand Down