Skip to content

Commit

Permalink
spacing, forecast
Browse files Browse the repository at this point in the history 
Changed bootstrap spacing, added empty div for forecast, added functionality for forecast but it's broken
  • Loading branch information
@citroenboter
citroenboter committed Nov 14, 2022
1 parent ba76aa5 commit 649ecb8
Show file tree
Hide file tree
Showing 3 changed files with 69 additions and 120 deletions.
101 changes: 7 additions & 94 deletions Plus/Final Project/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta https-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="src/style.css" />
Expand Down Expand Up @@ -32,7 +32,7 @@
<div class="card border border-0 rounded-5">
<div class="card-body">
<div class="row">
<div class="col-6">
<div class="col-7">
<!--City name and search engine-->
<h2 class="card-title" id="city-header">Rat</h2>
<p class="display-date">Fetching date and time...</p>
Expand Down Expand Up @@ -64,9 +64,10 @@ <h2 class="card-title" id="city-header">Rat</h2>
>&ensp;|&ensp;
<span id="get-location">Get Location</span>
</div>
<div class="col-2"></div>
<!--Current temperature-->
<div
class="col-6 mb-2 d-flex align-items-end justify-content-center"
class="col-3 mb-2 d-flex align-items-start justify-content-start"
>
<div class="current-weather">
<img
Expand Down Expand Up @@ -106,100 +107,12 @@ <h2 class="card-title" id="city-header">Rat</h2>
</div>
</div>
<!--5 day prediction-->
<div class="row mt-5">
<!--Day 1-->
<div class="col">
<div class="card-body">
<img
id="icon-day1"
src="http://shecodes-assets.s3.amazonaws.com/api/weather/icons/few-clouds-day.png"
/>
<h3 class="card-subtitle">Day 1</h3>
<div class="card-text">
<strong
><span class="temperature">36</span
><span class="temp-unit">°C</span></strong
>
/ <span class="temperature">24</span
><span class="temp-unit">°C</span>
</div>
</div>
</div>
<div class="col">
<div class="card-body">
<img
id="icon-day2"
src="http://shecodes-assets.s3.amazonaws.com/api/weather/icons/few-clouds-day.png"
/>
<h3 class="card-subtitle">Day 2</h3>
<div class="card-text">
<strong
><span class="temperature">30</span
><span class="temp-unit">°C</span></strong
>
/ <span class="temperature">17</span
><span class="temp-unit">°C</span>
</div>
</div>
</div>
<div class="col">
<div class="card-body">
<img
id="icon-day3"
src="http://shecodes-assets.s3.amazonaws.com/api/weather/icons/few-clouds-day.png"
/>
<h3 class="card-subtitle">Day 3</h3>
<div class="card-text">
<strong
><span class="temperature">23</span
><span class="temp-unit">°C</span></strong
>
/ <span class="temperature">19</span
><span class="temp-unit">°C</span>
</div>
</div>
</div>
<div class="col">
<div class="card-body">
<img
id="icon-day4"
src="http://shecodes-assets.s3.amazonaws.com/api/weather/icons/few-clouds-day.png"
/>
<h3 class="card-subtitle">Day 4</h3>
<div class="card-text">
<strong
><span class="temperature">22</span
><span class="temp-unit">°C</span></strong
>
/ <span class="temperature">18</span
><span class="temp-unit">°C</span>
</div>
</div>
</div>
<div class="col">
<div class="card-body">
<img
id="icon-day5"
src="http://shecodes-assets.s3.amazonaws.com/api/weather/icons/few-clouds-day.png"
/>
<h3 class="card-subtitle">Day 5</h3>
<div class="card-text">
<strong
><span class="temperature">28</span
><span class="temp-unit">°C</span></strong
>
/ <span class="temperature">20</span
><span class="temp-unit">°C</span>
</div>
</div>
</div>
</div>
</div>
<div class="w-50 mx-auto text-center">
<div class="row mt-5" id="forecast-container"></div>
<div class="w-50 mx-auto text-center" id="footer">
<span
><a
href="https://github.com/citroenboter/SheCodes/tree/main/Plus/Final%20Project"
target="_blank"
target="_blank"
>GitHub</a
>
- Marije Hammel</span
Expand Down
71 changes: 56 additions & 15 deletions Plus/Final Project/src/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,8 @@ let dayNames = [
"Friday",
"Saturday",
];
displayDate.innerHTML = `${dayNames[currentDate.getDay()]} ${hrs}:${mins}`;
let today = dayNames[currentDate.getDay()];
displayDate.innerHTML = `${today} ${hrs}:${mins}`;

// >> Fetch Weather
function displayCurrentWeather(response) {
Expand All @@ -31,48 +32,83 @@ function displayCurrentWeather(response) {
document
.querySelector("#icon-current")
.setAttribute("src", response.data.condition.icon_url);

coords = response.data.coordinates;

getForecast(coords);
}

function displayForecast(response) {}
// function displayForecast(response) {
// let forecast = response.data.daily;
// let forecastContainer = document.querySelector("#forecast-container");
// forecast.forEach(function (forecastDay, index) {
// if (index < 5) {
// forecastContainer.innerHTML += `<div class="forecast col"><img
// src="${forecastDay.condition.icon_url}"
// />
// <h3 class="card-subtitle">${dayNames[index]}</h3>
// <div class="card-text">
// <strong
// ><span class="temperature">${Math.round(
// forecastDay.temperature.maximum
// )}</span
// ><span class="temp-unit">°C</span></strong
// >
// / <span class="temperature">${Math.round(
// forecastDay.temperature.minimum
// )}</span><span class="temp-unit">°C</span>
// </div>
// </div>`;
// }
// if (index > 5) {
// forecastContainer.removeChild(forecastContainer.querySelectorAll());
// }
// });
// }

function getForecast(coordinates) {
let apiKey = "bc8b34dt7ae2e53dfe98ff6od201f7a2";
let apiUrl = `https://api.shecodes.io/weather/v1/forecast?lon=${coordinates.longitude}&lat=${coordinates.latitude}&key=${apiKey}&units=${unit}`;
axios.get(apiUrl).then(displayForecast);
}

// >> Search bar script

function searchCity(city) {
//selects the input from the search bar
let apiKey = "bc8b34dt7ae2e53dfe98ff6od201f7a2";
let apiUrlCurrent = `https://api.shecodes.io/weather/v1/current?query=${city}&key=${apiKey}
&units=${unit}`;
let apiUrlForecast = `https://api.shecodes.io/weather/v1/forecast?query=${city}&key=${apiKey}
&units=${unit}`;
axios.get(apiUrlCurrent).then(displayCurrentWeather);
axios.get(apiUrlForecast).then(displayForecast);
}

function submitHandler(event) {
event.preventDefault();
let city = document.querySelector("#city-search").value;
searchCity(city);
}

let searchForm = document.querySelector("#search-bar");
searchForm.addEventListener("submit", () => {
submitHandler();
});
searchForm.addEventListener("submit", submitHandler);

//Current temp

function fetchCurrentLocation(event) {
event.preventDefault();
navigator.geolocation.getCurrentPosition(localWeather);
}

let getLocation = document.querySelector("#get-location");
getLocation.addEventListener("click", () => {
fetchCurrentLocation();
});
getLocation.addEventListener("click", fetchCurrentLocation);

function localWeather(location) {
let latitude = location.coords.latitude;
let longitude = location.coords.longitude;

searchByCoords(latitude, longitude);
}

function searchByCoords(latitude, longitude) {
let apiKey = "bc8b34dt7ae2e53dfe98ff6od201f7a2";
let apiUrlCurrent = `https://api.shecodes.io/weather/v1/current?lon=${longitude}&lat=${latitude}&key=${apiKey}&units=${unit}`;
axios.get(apiUrlCurrent).then(displayCurrentWeather);
Expand All @@ -81,32 +117,37 @@ function localWeather(location) {
//Freedom units

let unit = "metric";
let coords = {};

function convertFreedom(event) {
function convertFreedom() {
document
.querySelectorAll(".temp-unit")
.forEach((node) => (node.innerHTML = "°F"));
document
.querySelectorAll(".speed-unit")
.forEach((node) => (node.innerHTML = "mph"));
unit = "imperial";
}
let freedomUnits = document.querySelector("#freedom-units");
freedomUnits.addEventListener("click", () => {
unit = "imperial";
convertFreedom();
searchByCoords(coords.latitude, coords.longitude);
});

function convertNormal(event) {
function convertNormal() {
document
.querySelectorAll(".temp-unit")
.forEach((node) => (node.innerHTML = "°C"));
document
.querySelectorAll(".speed-unit")
.forEach((node) => (node.innerHTML = "km/h"));
unit = "metric";
}

let normalUnits = document.querySelector("#normal-units");
normalUnits.addEventListener("click", () => {
unit = "metric";
convertNormal();
searchByCoords(coords.latitude, coords.longitude);
});

searchCity("Weed");
17 changes: 6 additions & 11 deletions Plus/Final Project/src/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,15 +43,11 @@ p {
font-size: 46px;
}

#freedom-units:hover, #normal-units:hover {
#freedom-units:hover, #normal-units:hover, #get-location:hover {
cursor: pointer;
text-decoration: underline;
}

#get-location:hover {
cursor: pointer;
text-decoration: underline;
}

#search-button {
border: var(--body-text-dark);
Expand Down Expand Up @@ -88,16 +84,15 @@ p {

#current-temperature {
font-family: var(--font-body);
font-size: 40px;

}

#icon-current {
padding-bottom: 2em;
font-size: 30px;
}

.weekday-icon {
font-size: 40px;
text-align: center;
color: var(--main);
}

#footer {
margin-top: 3em;
}

0 comments on commit 649ecb8

Please sign in to comment.