-
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.
Adding API functionality as well as mobile responsiveness
- Loading branch information
Showing
3 changed files
with
149 additions
and
36 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
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,106 @@ | ||
const APIkey = 'f760f3e64dd745e65cce1374291ab7bd'; | ||
const formInputEl = document.getElementById('search-input'); | ||
const currentWeatherEl = document.getElementById('current-weather'); | ||
const forecastEl = document.getElementById('forecast'); | ||
const searchHistoryEl = document.getElementById('search-history'); | ||
let searchHistoryButtons; | ||
const dates = [dayjs().format('MMM/D/YYYY'),dayjs().add(1, 'day').format('MMM/D/YYYY'), dayjs().add(2, 'day').format('MMM/D/YYYY'), dayjs().add(3, 'day').format('MMM/D/YYYY'), dayjs().add(4, 'day').format('MMM/D/YYYY'), dayjs().add(5, 'day').format('MMM/D/YYYY')]; | ||
let searchHistory = []; | ||
let lat; | ||
let long; | ||
|
||
if (localStorage.getItem('searchHistory')) { // Checks if search history exists and adds it if so. | ||
searchHistory = JSON.parse(localStorage.getItem('searchHistory')); | ||
for (let i = 0; i < searchHistory.length; i++) { | ||
const button = document.createElement('button'); | ||
button.classList.add('btn', 'rounded-lg', 'my-4', 'search'); | ||
button.textContent = `${searchHistory[i].city.name}`; | ||
searchHistoryEl.append(button); | ||
searchHistoryButtons = document.getElementsByClassName('search'); | ||
button.addEventListener('click', function() { | ||
displayToday(searchHistory[[...searchHistoryButtons].indexOf(button)]); | ||
displayForecast(searchHistory[[...searchHistoryButtons].indexOf(button)]); | ||
}) | ||
} | ||
|
||
} | ||
|
||
if (localStorage.getItem('currentCity')) { // Checks if any weather data is in local storage and sets it if so. | ||
let currentCity = JSON.parse(localStorage.getItem('currentCity')); | ||
displayToday(currentCity); | ||
displayForecast(currentCity); | ||
} | ||
|
||
document.getElementById('clear-history').addEventListener('click', function() { // Adds clear search history function to bottom left button. | ||
searchHistoryEl.innerHTML = ''; | ||
searchHistory = []; | ||
localStorage.setItem('searchHistory', JSON.stringify(searchHistory)); | ||
}) | ||
|
||
document.getElementById('search-form').addEventListener('submit', function(event) { | ||
event.preventDefault(); | ||
const city = formInputEl.value; | ||
formInputEl.value = ''; | ||
fetch(`http://api.openweathermap.org/geo/1.0/direct?q=${city}&limit=1&appid=${APIkey}`) // First we perform a fetch to retrieve the lat and long based on city. | ||
.then(function (response) { | ||
return response.json(); | ||
}) | ||
.then(function (data) { | ||
lat = data[0].lat.toFixed(2); // Converting coordinates to two decimal points to follow documentation format. | ||
long = data[0].lon.toFixed(2); | ||
fetch(`http://api.openweathermap.org/data/2.5/forecast?lat=${lat}&lon=${long}&appid=${APIkey}`) // Then we have to perform another fetch using the coordinate variables to receive weather data. | ||
.then(function (response) { | ||
return response.json(); | ||
}) | ||
.then(function (data) { | ||
displayToday(data); | ||
displayForecast(data); | ||
addSearchHistory(data); | ||
localStorage.setItem('currentCity', JSON.stringify(data)); | ||
}); | ||
}); | ||
}) | ||
|
||
function temperatureConverter(num) { // API data returns Kelvin, function to convert to Fahrenheit. | ||
return ((num-273.15)*1.8)+32; | ||
} | ||
|
||
function speedConverter(num) { // API data returns meters per second, function converts to miles. | ||
return (num*0.00062137); | ||
} | ||
|
||
function displayToday(data) { // Function that sets the HTML content of the current day forecast. | ||
currentWeatherEl.innerHTML = `<div class = 'flex'><h2 class = 'font-bold text-2xl'>${data.city.name} (${dates[0]})</h2><img class = 'weather-icon-main' src = 'https://openweathermap.org/img/wn/${data.list[0].weather[0].icon}@2x.png'></div> | ||
<h3 class = 'text-lg font-medium'>Temp: ${temperatureConverter(data.list[0].main.temp).toFixed(2)}°F</h3> | ||
<h3 class = 'text-lg font-medium'>Wind: ${(speedConverter(data.list[0].wind.speed)*3600).toFixed(2)} MPH</h3> | ||
<h3 class = 'text-lg font-medium'>Humidity: ${data.list[0].main.humidity} %</h3>` | ||
} | ||
|
||
function displayForecast(data) { // Generates the five cards that contain the future 5-day forecast. | ||
forecastEl.innerHTML = ''; | ||
for (let i = 1; i < 6; i++) { | ||
let card = document.createElement('div'); | ||
card.classList.add('bg-gray-500', 'mt-4', 'w-full', 'md:w-1/6', 'h-1/4', 'flex', 'flex-col', 'justify-evenly', 'p-4') | ||
card.innerHTML += `<h3 class = 'text-white font-bold text-lg'>${dates[i]}</h3> | ||
<img class = 'weather-icon-main' src = 'https://openweathermap.org/img/wn/${data.list[i].weather[0].icon}@2x.png'> | ||
<h3 class = 'text-white'>Temp: ${temperatureConverter(data.list[i].main.temp).toFixed(2)}°F</h3> | ||
<h3 class = 'text-white'>Wind: ${(speedConverter(data.list[i].wind.speed)*3600).toFixed(2)} MPH</h3> | ||
<h3 class = 'text-white'>Humidity: ${data.list[i].main.humidity} %</h3>` | ||
forecastEl.append(card); | ||
} | ||
} | ||
|
||
function addSearchHistory(data) { // Generates a new button with every search. | ||
searchHistory.push(data); | ||
localStorage.setItem('searchHistory', JSON.stringify(searchHistory)); | ||
const button = document.createElement('button'); | ||
button.classList.add('btn', 'rounded-lg', 'mt-6', 'search'); | ||
button.textContent = `${data.city.name}`; | ||
searchHistoryEl.append(button); | ||
searchHistoryButtons = document.getElementsByClassName('search'); | ||
button.addEventListener('click', function() { | ||
displayToday(searchHistory[[...searchHistoryButtons].indexOf(button)]); | ||
displayForecast(searchHistory[[...searchHistoryButtons].indexOf(button)]); | ||
}) | ||
} | ||
|
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 |
---|---|---|
|
@@ -8,48 +8,49 @@ | |
<link rel="stylesheet" href="./assets/css/style.css" /> | ||
</head> | ||
<body> | ||
<header class = 'p-6 text-center bg-black text-2xl font-bold'><h1>Weather Dashboard</h1></header> | ||
|
||
<div class = 'flex h-screen w-full'> | ||
|
||
<section class = 'bg-gray-200 w-1/5 h-full p-4 flex flex-col'id = 'left-form'> | ||
<form class = 'flex flex-col justify-evenly h-1/6 bottom-border' id = 'search-form'> | ||
<h2 class = 'text-2xl font-bold'>Search for a City:</h2> | ||
<input class = 'input-border rounded-lg' placeholder = 'San Diego'> | ||
<button class="btn rounded-lg">Search</button> | ||
</form> | ||
|
||
<div class = 'flex flex-col justify-start grow' id = 'search-history'> | ||
<button class="btn rounded-lg my-4">Search</button> | ||
</div> | ||
</section> | ||
|
||
<section class = 'grow p-4 pr-8' id = 'search-results'> | ||
<div class = 'h-1/5 w-full border-1 flex flex-col justify-evenly p-2' id = 'current-weather'> | ||
<h2 class = 'font-bold text-2xl'>Atlanta(9/14/2022)☀️</h2> | ||
<h3 class = 'text-lg font-medium'>Temp:</h3> | ||
<h3 class = 'text-lg font-medium'>Wind:</h3> | ||
<h3 class = 'text-lg font-medium'>Humidity:</h3> | ||
</div> | ||
|
||
<div class = 'mt-2 h-full'> | ||
<h2 class= 'font-bold text-xl'>Five-Day Forecast:</h2> | ||
<div class = 'flex justify-evenly h-full' id = 'forecast'> | ||
<div class = 'bg-gray-500 mt-4 w-1/6 h-1/4 flex flex-col justify-evenly p-4'> | ||
<h3 class = 'text-white font-bold text-lg'>9/14/2022</h3> | ||
<h3>☀️</h3> | ||
<h3 class = 'text-white'>Temp:</h3> | ||
<h3 class = 'text-white'>Wind:</h3> | ||
<h3 class = 'text-white'>Humidity:</h3> | ||
</div> | ||
<div id = 'wrapper' class = 'h-screen w-full flex flex-col'> | ||
<header class = 'p-6 text-center bg-black text-2xl font-bold'><h1>Weather Dashboard</h1></header> | ||
|
||
<div class = 'flex grow w-full flex-col md:flex-row'> | ||
|
||
<section class = 'bg-gray-200 w-full md:w-1/5 p-4 flex flex-col h-auto' id = 'left-form'> | ||
<form class = 'flex flex-col justify-evenly h-auto md:h-1/6 bottom-border' id = 'search-form'> | ||
<h2 class = 'text-2xl font-bold'>Search for a City:</h2> | ||
<input class = 'input-border rounded-lg' placeholder = 'San Diego' id = 'search-input'> | ||
<button class="btn rounded-lg my-6 md:m-0">Search</button> | ||
</form> | ||
|
||
<div class = 'flex flex-col justify-start grow' id = 'search-history'> | ||
</div> | ||
|
||
<div class = 'w-full'> | ||
<button class="btn rounded-lg w-full mt-6 md:m-0" id = 'clear-history'>Clear History</button> | ||
</div> | ||
</section> | ||
|
||
<section class = 'grow p-4 pr-8 flex flex-col h-auto' id = 'search-results'> | ||
<div class = 'h-1/5 w-full border-1 flex flex-col justify-evenly p-2' id = 'current-weather'> | ||
</div> | ||
|
||
<div class = 'mt-2 grow'> | ||
<h2 class= 'font-bold text-xl'>Five-Day Forecast:</h2> | ||
<div class = 'flex justify-evenly flex-col md:flex-row' id = 'forecast'> | ||
|
||
|
||
|
||
</div> | ||
</div> | ||
</div> | ||
</section> | ||
</section> | ||
|
||
</div> | ||
</div> | ||
|
||
|
||
<script | ||
src="https://cdn.jsdelivr.net/npm/[email protected]/dayjs.min.js" | ||
integrity="sha256-iu/zLUB+QgISXBLCW/mcDi/rnf4m4uEDO0wauy76x7U=" | ||
crossorigin="anonymous" | ||
></script> | ||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> | ||
<script src="./assets/js/script.js"></script> | ||
</body> | ||
|