Skip to content

Refactored weather app with new structure, assets and scripts #26

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
Richa9693 wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Refactored weather app with new structure, assets and scripts #26

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
3 changes: 3 additions & 0 deletions .vscode/settings.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"liveServer.settings.port": 5501
}
37 changes: 0 additions & 37 deletions weatherjs/app.js
View file
Open in desktop

This file was deleted.

Binary file added weatherjs/assets/404.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 weatherjs/assets/clear.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 weatherjs/assets/cloud.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 weatherjs/assets/mist.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 weatherjs/assets/rain.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 weatherjs/assets/snow.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.
99 changes: 39 additions & 60 deletions weatherjs/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,71 +1,50 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://bootswatch.com/4/cerulean/bootstrap.min.css">
<title>WeatherJS</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Weather App With JavaScript</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6 mx-auto text-center bg-primary mt-5 p-5 rounded">
<h1 id="w-location"></h1>
<h3 class="text-dark" id="w-desc"></h3>
<h3 id="w-string"></h3>
<img id="w-icon">
<ul id="w-details" class="list-group mt-3">
<li class="list-group-item" id="w-humidity"></li>
<li class="list-group-item" id="w-dewpoint"></li>
<li class="list-group-item" id="w-feels-like"></li>
<li class="list-group-item" id="w-wind"></li>
</ul>
<hr>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#locModal">
Change Location
</button>
</div>
</div>
</div>

<!-- Modal -->
<div class="modal fade" id="locModal" tabindex="-1" role="dialog" aria-labelledby="locModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="locModalLabel">Choose Location</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<div class="container">
<div class="header">
<div class="search-box">
<input type="text" placeholder="Enter your location" class="input-box">
<button class="fa-solid fa-magnifying-glass" id="searchBtn"></button>
</div>
</div>
<div class="modal-body">
<form id="w-form">
<div class="form-group">
<label for="city">City</label>
<input type="text" id="city" class="form-control">
</div>
<div class="form-group">
<label for="state">State</label>
<input type="text" id="state" class="form-control">
</div>
</form>
<div class="location-not-found">
<h1>Sorry,Location not found !!!</h1>
<img src="/assets/404.png" alt="404 Error">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button id="w-change-btn" type="button" class="btn btn-primary">Save changes</button>
<div class="weather-body">
<img src="/assets/cloud.png" alt="Weather Image" class="weather-img">

<div class="weather-box">
<p class="temperature">0 <sup>°C</sup></p>
<p class="description">light rain</p>
</div>

<div class="weather-details">
<div class="humidity">
<i class="fa-sharp fa-solid fa-droplet"></i>
<div class="text">
<span id="humidity">45%</span>
<p>Humidity</p>
</div>
</div>
<div class="wind">
<i class="fa-solid fa-wind"></i>
<div class="text">
<span id="wind-speed">12Km/H</span>
<p>Wind Speed</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>

<script src="storage.js"></script>
<script src="weather.js"></script>
<script src="ui.js"></script>
<script src="app.js"></script>
<script src="script.js"></script>
</body>
</html>
53 changes: 53 additions & 0 deletions weatherjs/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
const inputBox=document.querySelector('.input-box');
const searchBtn=document.getElementById('searchBtn');
const weather_img=document.querySelector('.weather-img');
const temperature=document.querySelector('.temperature');
const description=document.querySelector('.description');
const humidity=document.getElementById('humidity');
const wind_speed=document.getElementById('wind-speed');
const location_not_found=document.querySelector('.location-not-found');
const weather_body=document.querySelector('.weather-body');


async function checkWeather(city){
const api_key = "c383ca63d09d7b4206556393a0aed0be";
const url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${api_key}`;

const weather_data= await fetch(`${url}`).then(response=>response.json());

if(weather_data.cod==`404`){
location_not_found.style.display="flex";
weather_body.style.display="none";
console.log("error");
return;
}
location_not_found.style.display="none";
weather_body.style.display="flex";

temperature.innerHTML=`${Math.round(weather_data.main.temp - 273.15)}°C`;
description.innerHTML=`${weather_data.weather[0].description}`;
humidity.innerHTML=`${weather_data.main.humidity}%`;
wind_speed.innerHTML=`${weather_data.wind.speed}Km/H`;

switch(weather_data.weather[0].main){
case 'Clouds':
weather_img.src="/assets/cloud.png";
break;
case 'Clear':
weather_img.src="/assets/clear.png";
break;
case 'Rain':
weather_img.src="/assets/rain.png";
break;
case 'Mist':
weather_img.src="/assets/mist.png";
break;
case 'Snow':
weather_img.src="/assets/snow.png";
break;
}

}
searchBtn.addEventListener('click',()=>{
checkWeather(inputBox.value)
})
32 changes: 0 additions & 32 deletions weatherjs/storage.js
View file
Open in desktop

This file was deleted.

127 changes: 127 additions & 0 deletions weatherjs/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,127 @@
*{
margin: 0;
padding: 0;
box-sizing: border-box;
border: none;
outline: none;
font-family: sans-serif;
}
body{
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: black;

}
.container{
width: 400px;
height: min-content;
background-color:#fff ;
border-radius: 12px;
padding: 28px;
}
.search-box{
width: 100%;
height: min-content;
display: flex;
justify-content: space-between;
align-items: center;

}
.search-box input{
width: 84%;
font-size: 20px;
text-transform: capitalize;
color: black;
background-color: #e6f5fb;
padding: 12px 16px;
border-radius: 14px;
}
.search-box input::placeholder{
color: #000;
}
.search-box button{
width: 46px;
height: 46px;
background-color: #e6f5fb;
border-radius: 50%;
cursor: pointer;
font-size: 20px;
}
.search-box button:hover{
color: #fff;
background-color: #ababab;
}
.weather-body{
display: none;
justify-content: center;
align-items: center;
flex-direction: column;
margin-block: 20px;
}
.weather-body img{
width: 60%;
}
.weather-box{
margin-block: 20px;
text-align: center;
}
.weather-box .temperature{
font-size: 40px;
font-weight: 800;
position: relative;
}
.weather-box .temperature sup{
font-size: 20px;
position: absolute;
font-weight: 600;

}
.weather-box .description{
font-size: 20px;
font-weight: 700;
text-transform: capitalize;
}
.weather-details{
width: 100%;
display: flex;
justify-content: space-between;
margin-top: 30px;
}
.humidity,.wind{
display: flex;
align-items: center;
}
.humidity{
margin-left: 20px;
}
.wind{
margin-right: 20px;
}
.weather-details i{
font-size: 36px;
}
.weather-details .text{
margin-left: 10px;
font-size: 16px;
}
.text span{
font-size: 20px;
font-weight: 700;
}
.location-not-found{
margin-top: 20px;
display: none;
align-items: center;
justify-content: center;
flex-direction: column;
}
.location-not-found h1{
font-size: 20px;
color: #6b6b6b;
margin-block-end: 15px;
}
.location-not-found img{
width: 80%;
}
24 changes: 0 additions & 24 deletions weatherjs/ui.js
View file
Open in desktop

This file was deleted.

Loading