-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
9842ea9
commit a51dafa
Showing
8 changed files
with
187 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| { | ||
| "short_name": "PWA News", | ||
| "name": "PWA News", | ||
| "icons": [ | ||
| { | ||
| "src": "icons/android-icon-192x192.png", | ||
| "sizes": "192x192", | ||
| "type": "image/png" | ||
| }, | ||
| { | ||
| "src": "icons/android-icon-512x512.png", | ||
| "sizes": "512x512", | ||
| "type": "image/png" | ||
| } | ||
| ], | ||
| "start_url": "index.html?source=pwa", | ||
| "display": "standalone", | ||
| "background_color": "#c09f80", | ||
| "theme_color": "#76323f" | ||
| } |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,72 @@ | ||
| <!DOCTYPE html> | ||
|
|
||
| <html lang="en"> | ||
|
|
||
| <head> | ||
| <meta content="width=device-width, initial-scale=1.0" name="viewport"> | ||
| <meta charset="utf-8"> | ||
|
|
||
|
|
||
| <title>Weather App</title> | ||
| <link href="style.css" rel="stylesheet"> | ||
| </head> | ||
|
|
||
| <body> | ||
| <div class="card"> | ||
| <div class="search"> | ||
| <input type="text" placeholder="enter city name" spellchecker="false" class="search-input"> | ||
| <button><img src="images/search.png" alt=""></button> | ||
| </div> | ||
| <div class="weather"> | ||
| <img src="images/rain.png" class="weather-icon.png"> | ||
|
|
||
| <h1 class="temp">22°f</h1> | ||
| <h2 class="city">New York</h2> | ||
|
|
||
|
|
||
| <div class="details"> | ||
| <div class="col"> | ||
| <img src="images/humidity.png"> | ||
| <div> | ||
|
|
||
| <p class="humidity">50%</p> | ||
|
|
||
|
|
||
| <p>Humidity</p> | ||
| </div> | ||
| </div> | ||
| <div class="col"> | ||
| <img src="images/wind.png"> | ||
| <div> | ||
| <p class="wind">15 mps/hr</p> | ||
| <p>Wind Speed</p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <script> | ||
| const apiKey = "a3753b23cbafefc889307c508ccc5447" | ||
| const apiUrl = "https://api.openweathermap.org/data/2.5/weather?&units=imperial&q="; | ||
|
|
||
| const searchBox = document.querySelector(".search input"); | ||
| const searchBtn = document.querySelector(".search button"); | ||
|
|
||
| async function checkWeather(city) { | ||
| const response = await fetch(apiUrl + city + '&appid=' + apiKey); | ||
| var data = await response.json(); | ||
| console.log(data); | ||
|
|
||
| document.querySelector(".city").innerHTML = data.name; | ||
| document.querySelector(".temp").innerHTML = Math.round(data.main.temp) + "°f"; | ||
| document.querySelector(".humidity").innerHTML = data.main.humidity + "%"; | ||
| document.querySelector(".wind").innerHTML = Math.round(data.wind.speed) + " mph"; | ||
|
|
||
| } | ||
| searchBtn.addEventListener("click", () => { | ||
| checkWeather(searchBox.value); | ||
| }) | ||
| </script> | ||
| </body> | ||
|
|
||
| </html> |
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,89 @@ | ||
| *{ | ||
| margin: 0; | ||
| padding: 0; | ||
| font-family: 'Poppins', sans-serif; | ||
| box-sizing: border-box; | ||
| } | ||
| body { | ||
| background: #222; | ||
| padding-bottom: 5px; | ||
| } | ||
| .card { | ||
| width: 90%; | ||
| max-width: 470px; | ||
| background: linear-gradient(135deg, #00feba, #5b548a); | ||
| color: #fff; | ||
| margin: 100px auto 0; | ||
| border-radius: 20px ; | ||
| padding: 40px 35px; | ||
| text-align: center; | ||
| } | ||
| .search { | ||
| width: 100%; | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: space-between; | ||
| } | ||
|
|
||
| .search-input { | ||
| border: 0; | ||
| outline: 0; | ||
| background: #ebfffc; | ||
| color: #555; | ||
| padding: 10px 25px; | ||
| height: 60px; | ||
| border-radius: 30px; | ||
| flex: 1; | ||
| margin-right: 16px; | ||
| font-size: 18px; | ||
| } | ||
|
|
||
| .search button { | ||
| border: 0; | ||
| outline: 0; | ||
| background: #ebfffc; | ||
| border-radius: 30px; | ||
| width: 60px; | ||
| height: 60px; | ||
| cursor: pointer; | ||
| } | ||
|
|
||
| .search button img { | ||
| width: 16px; | ||
| } | ||
|
|
||
| .weather-icon{ | ||
| width: 170px; | ||
| } | ||
|
|
||
| .weather h1{ | ||
| font-size: 45px; | ||
| font-weight: 400; | ||
| } | ||
|
|
||
| .weather h2{ | ||
| font-size: 45px; | ||
| font-weight: 400; | ||
| margin-top: -10px; | ||
| } | ||
|
|
||
| .details{ | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: space-between; | ||
| padding: 0 20px; | ||
| margin-top: 50px; | ||
| } | ||
|
|
||
|
|
||
| .col{ | ||
| display: flex; | ||
| align-items: center; | ||
| text-align: left; | ||
| } | ||
|
|
||
| .col img{ | ||
| width: 40px; | ||
| margin-right: 10px; | ||
| } | ||
|
|
