Skip to content

Commit

Permalink
Adding API functionality as well as mobile responsiveness
Browse files Browse the repository at this point in the history
  • Loading branch information
Fy50167 committed Jul 25, 2023
1 parent edeb98b commit fb01e18
Show file tree
Hide file tree
Showing 3 changed files with 149 additions and 36 deletions.
6 changes: 6 additions & 0 deletions assets/css/style.css
Original file line number Diff line number Diff line change
Expand Up @@ -35,4 +35,10 @@ header {

.border-1 {
border: 1px solid black;
}

.weather-icon-main {
width: 40px;
height: 40px;
display: inline;
}
106 changes: 106 additions & 0 deletions assets/js/script.js
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)]);
})
}

73 changes: 37 additions & 36 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down

0 comments on commit fb01e18

Please sign in to comment.