Skip to content

Commit

Permalink
Merge pull request #4 from citroenboter/dev
Browse files Browse the repository at this point in the history 
spacing, forecast
  • Loading branch information
@citroenboter
citroenboter committed Nov 14, 2022
2 parents ff0d8d3 + 9bd69cc commit 25b24e0
Show file tree
Hide file tree
Showing 3 changed files with 71 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
73 changes: 58 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,85 @@ function displayCurrentWeather(response) {
document
.querySelector("#icon-current")
.setAttribute("src", response.data.condition.icon_url);

coords = response.data.coordinates;

getForecast(coords);
}

function displayForecast(response) {}
//forecast gives a weird bug. I need to deliver so I'll add this later even after I'm already done ;)

// 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 +119,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 25b24e0

Please sign in to comment.