-
Notifications
You must be signed in to change notification settings - Fork 30
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Initial commit for Local Weather App tutorial
- Loading branch information
Showing
14 changed files
with
780 additions
and
0 deletions.
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
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
BIN
+191 KB
projects/view-weather-with-html-css-js/new_open_weather_account_form.png
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
BIN
+385 KB
projects/view-weather-with-html-css-js/open_weather_account_prompt.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
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
BIN
+12 KB
projects/view-weather-with-html-css-js/rendered_weather_app_html_only.png
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
BIN
+2.03 MB
projects/view-weather-with-html-css-js/rendered_weather_app_with_css_1.png
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
BIN
+7.17 MB
projects/view-weather-with-html-css-js/rendered_weather_app_with_css_2.png
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
BIN
+7.05 MB
projects/view-weather-with-html-css-js/rendered_weather_app_with_css_3.png
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
BIN
+6.87 MB
projects/view-weather-with-html-css-js/rendered_weather_app_with_css_4.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
607 changes: 607 additions & 0 deletions
607
projects/view-weather-with-html-css-js/view-weather-with-html-css-js.mdx
Large diffs are not rendered by default.
Oops, something went wrong.
22 changes: 22 additions & 0 deletions
22
projects/view-weather-with-html-css-js/weather-app/index.html
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,22 @@ | ||
<!DOCTYPE html> | ||
<html lang="en"> | ||
<head> | ||
<meta charset="UTF-8"> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
<link href="styles.css" rel="stylesheet" /> | ||
<title>Weather App</title> | ||
</head> | ||
<body> | ||
<main> | ||
<section id="weather-wrapper"> | ||
<h1>Weather App</h2> | ||
<div id="weather-search"> | ||
<input id="search" type="text" placeholder="Search by city" /> | ||
<input id="submit" type="submit" onclick="fetchWeather()" value="Search" /> | ||
</div> | ||
<div id="weather-data" style="display: none;"></div> | ||
</section> | ||
</main> | ||
<script src="script.js"></script> | ||
</body> | ||
</html> |
69 changes: 69 additions & 0 deletions
69
projects/view-weather-with-html-css-js/weather-app/script.js
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,69 @@ | ||
async function fetchWeather() { | ||
// Step a. Create global variables and start inner functions | ||
let searchInput = document.getElementById('search').value; | ||
const weatherDataSection = document.getElementById("weather-data"); | ||
weatherDataSection.style.display = "block"; | ||
|
||
const apiKey = '26571981230f1dd6b72e6b2c6548535f' | ||
// const apiKey = "REPLACE WITH YOUR API KEY" | ||
|
||
|
||
if(searchInput == "") { | ||
weatherDataSection.innerHTML = ` | ||
<div> | ||
<h2>Empty Input!</h2> | ||
<p>Please try again with a valid <u>city name</u>.</p> | ||
</div> | ||
`; | ||
return; | ||
} | ||
|
||
// Step b. Get lat and lon coordinates via Geocoding API | ||
async function getLonAndLat() { | ||
const countryCode = 1 | ||
geocodeURL = `http://api.openweathermap.org/geo/1.0/direct?q=${searchInput.replace(" ", "%20")},${countryCode}&limit=1&appid=${apiKey}` | ||
|
||
const response = await fetch(geocodeURL); | ||
if(!response.ok) { | ||
console.log("Bad response! ", response.status); | ||
return; | ||
} | ||
|
||
const data = await response.json(); | ||
if(data.length == 0) { | ||
console.log("Something went wrong here."); | ||
weatherDataSection.innerHTML = ` | ||
<div> | ||
<h2>Invalid Input: "${searchInput}"</h2> | ||
<p>Please try again with a valid <u>city name</u>.</p> | ||
</div> | ||
`; | ||
return; | ||
} else { | ||
return data[0]; | ||
} | ||
} | ||
|
||
async function getWeatherData(lon, lat) { | ||
// Step c. Get weather information via Current Weather API | ||
const weatherURL = `https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&appid=${apiKey}` | ||
const response = await fetch(weatherURL); | ||
|
||
// Step d. Display the weather data | ||
const data = await response.json(); | ||
weatherDataSection.style.display = "flex"; | ||
weatherDataSection.innerHTML = ` | ||
<img src="https://openweathermap.org/img/wn/${data.weather[0].icon}.png" alt="${data.weather[0].description}" width="100" /> | ||
<div> | ||
<h2>${data.name}</h2> | ||
<p><strong>Temperature:</strong> ${Math.round(data.main.temp - 273.15)}°C</p> | ||
<p><strong>Description:</strong> ${data.weather[0].description}</p> | ||
</div> | ||
` | ||
} | ||
|
||
// These are part of Step d. | ||
document.getElementById("search").value = ""; | ||
const geocodeData = await getLonAndLat(); | ||
getWeatherData(geocodeData.lon, geocodeData.lat); | ||
} |
82 changes: 82 additions & 0 deletions
82
projects/view-weather-with-html-css-js/weather-app/styles.css
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,82 @@ | ||
* { | ||
margin: 0; | ||
padding: 0; | ||
box-sizing: border-box; | ||
} | ||
|
||
|
||
body { | ||
background-image: url(https://www.travellens.co/content/images/size/w2000/format/webp/2022/06/Dumbo-NYC.jpg); | ||
background-repeat: no-repeat; | ||
background-size: cover; | ||
font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; | ||
height: 100vh; | ||
} | ||
|
||
|
||
main { | ||
background-color: rgba(227, 193, 173, 0.85); | ||
position: relative; | ||
top: 30%; | ||
border: 1px solid; | ||
border-radius: 5px; | ||
width: 45%; | ||
margin: auto; | ||
padding: 2em; | ||
} | ||
|
||
|
||
h1 { | ||
margin-bottom: 20px; | ||
} | ||
|
||
|
||
#search { | ||
border-radius: 5px 0 0 5px; | ||
border: none; | ||
padding: 10px; | ||
font-size: 16px; | ||
width: 70%; | ||
height: 48px; | ||
} | ||
|
||
|
||
#submit { | ||
border-radius: 0 5px 5px 0; | ||
padding: 10px; | ||
font-size: 16px; | ||
width: 5em; | ||
cursor: pointer; | ||
} | ||
|
||
#weather-wrapper { | ||
display: flex; | ||
flex-direction: column; | ||
place-items: center; | ||
height: 250px; | ||
} | ||
|
||
#weather-search { | ||
display: flex; | ||
width: 50%; | ||
gap: 5px; | ||
} | ||
|
||
|
||
/* #weather-data { | ||
background-color: rgba(255, 255, 255, 0.85); | ||
border-radius: 5px; | ||
padding: 1.5em; | ||
margin-top: 20px; | ||
text-align: center; | ||
align-items: center; | ||
gap: 12px; | ||
} | ||
#weather-data > img { | ||
border-radius: 50%; | ||
background-color: lightskyblue; | ||
}*/ |