Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Implemented 5-day forecast #7

Open
wants to merge 7 commits into
base: master
Choose a base branch
from
Open

Implemented 5-day forecast #7

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
167a007
Implemented weather forecast page
ThePredatorBG Aug 19, 2022
7c45f19
Made changes requested in the review
ThePredatorBG Aug 25, 2022
f15f4a8
Implemented 5-day forecast. Solves #6
ThePredatorBG Aug 26, 2022
7096e53
Removed console.logs, merged loops and moved the .js file.
ThePredatorBG Aug 30, 2022
586ee15
Fixed outdated .js path references and degree symbol being displayed …
ThePredatorBG Sep 8, 2022
2eb62ef
Delete .idea directory
ThePredatorBG Sep 8, 2022
bc24758
Create .gitignore
ThePredatorBG Sep 8, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
.idea/
15 changes: 8 additions & 7 deletions about.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,6 @@
<title>Andrew Harris | About</title>
<meta name="viewport" content="width=device-width initial-scale=1">
<link rel="stylesheet" href="style.css">
<style>
.nav-branding{text-align:center;}
</style>
</head>
<body>

Expand All @@ -20,6 +17,9 @@
<li class="nav-item">
<a href="#" class="nav-link">About me</a>
</li>
<li class="nav-item">
<a href="forecast.html" class="nav-link">Forecast</a>
</li>
</ul>
<div class="hamburger">
<span class="bar"></span>
Expand All @@ -30,13 +30,14 @@
</header>

<div class="content">
<div>
<div class="row1">
<h2>About me</h2>
<div class="two-cols">
<div id="left-col">
<img class="imgBorder" src="img/stock-photo-cheerful-young-man-over-white.png" alt="Andrew Harris" style="vertical-align:middle;">
</div>
<div id="right-col">
<p id="font-size-18">I am a Master of Science at Computer Engineering from the University of Oxford.<br>
<p>I am a Master of Science at Computer Engineering from the University of Oxford.<br>
I have experience in the following languages:</p>
<p style="text-align:left;">C++</p>
<div class="w3-light-grey w3-round">
Expand Down Expand Up @@ -73,14 +74,14 @@
</div>
</div>
<div>
<h1>Contact</h1>
<h2>Contact</h2>
<address class="contact-link">
<a class="contact-link" href="mailto:[email protected]">[email protected]</a>
</address>
</div>
</div>
</div>

<script src="script.js"></script>
<script src="assets/scripts/script.js"></script>
</body>
</html>
62 changes: 62 additions & 0 deletions assets/scripts/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
const hamburger = document.querySelector(".hamburger");
const navMenu = document.querySelector(".nav-menu");

hamburger.addEventListener("click", () => {
hamburger.classList.toggle("active");
navMenu.classList.toggle("active");
})

document.querySelectorAll(".nav-link").forEach(n => n.addEventListener("click", () => {
hamburger.classList.remove("active");
navMenu.classList.remove("active");
}))

var inputField = document.querySelector('.inputField')
var button = document.querySelector('.button')

button.addEventListener('click', function()
{
document.querySelector(".hideShow").style.visibility="visible";

fetch('https://api.openweathermap.org/data/2.5/weather?q='+inputField.value+'&units=metric&appid=5f7edfcf5d7bb904e231e538fb098ad4')
.then(response => response.json())
.then(data =>
{
document.querySelector("#day0Min").innerHTML = "Min: " + data.main.temp_min + "&deg;C";
document.querySelector("#day0Max").innerHTML = "Max: " + data.main.temp_max + "&deg;C";
document.querySelector("#img0").src = "http://openweathermap.org/img/wn/" + data.weather[0].icon+"@2x.png";
})

fetch('https://api.openweathermap.org/data/2.5/forecast?q='+inputField.value+'&units=metric&appid=5f7edfcf5d7bb904e231e538fb098ad4')
.then(response => response.json())
.then(data =>
{
for(i=0;i<5;i++)
{
document.querySelector("#day" + (i+1) + "Min").innerHTML = "Min: " + data.list[i].main.temp_min + "&deg;C";
document.querySelector("#day" + (i+1) + "Max").innerHTML = "Max: " + data.list[i].main.temp_max + "&deg;C";
document.querySelector("#img" + (i+1)).src = "http://openweathermap.org/img/wn/" + data.list[i].weather[0].icon+"@2x.png";
}
})

const d = new Date();
const weekday = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];

function CheckDay(day)
{
if (day +d.getDay() > 6)
{
return day +d.getDay()-7;
}
else
{
return day + d.getDay();
}
}

document.querySelector("#day0").innerHTML = weekday[CheckDay(0)];
for(i=0;i<5;i++)
{
document.querySelector("#day"+(i+1)).innerHTML = weekday[CheckDay(i)];
}
})
83 changes: 83 additions & 0 deletions forecast.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,83 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Andrew Harris | About</title>
<meta name="viewport" content="width=device-width initial-scale=1">
<link rel="stylesheet" href="style.css">
</head>
<body>

<header>
<nav class="navbar">
<a href="index.html" class="nav-branding">Andrew Harris</a>
<ul class="nav-menu">
<li class="nav-item">
<a href="index.html" class="nav-link">Home</a>
</li>
<li class="nav-item">
<a href="about.html" class="nav-link">About me</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Forecast</a>
</li>
</ul>
<div class="hamburger">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
</nav>
</header>

<div class="content">
<div class="row1">
<h2><strong>Weather forecast</strong></h2>
<input class="inputField" type="text" placeholder="Enter city name">
<input class="button" type="submit" value="Get forecast">
<div class="hideShow" style="visibility:hidden">
<h3><strong>Current forecast</strong></h3>
<div class="icons">
<p class="weather" id="day0"></p>
<div class="image"><img src="#" class="imgClass" id="img0" alt=""></div>
<p class="tempValues" id="day0Min">Loading...</p>
<p class="tempValues" id="day0Max">Loading...</p>
</div>

<h3><strong>5-day forecast</strong></h3>
<div class="icons">
<p class="weather" id="day1"></p>
<div class="image"><img src="#" class="imgClass" id="img1" alt=""></div>
<p class="tempValues" id="day1Min">Loading...</p>
<p class="tempValues" id="day1Max">Loading...</p>
</div>
<div class="icons">
<p class="weather" id="day2"></p>
<div class="image"><img src="#" class="imgClass" id="img2" alt=""></div>
<p class="tempValues" id="day2Min">Loading...</p>
<p class="tempValues" id="day2Max">Loading...</p>
</div>
<div class="icons">
<p class="weather" id="day3"></p>
<div class="image"><img src="#" class="imgClass" id="img3" alt=""></div>
<p class="tempValues" id="day3Min">Loading...</p>
<p class="tempValues" id="day3Max">Loading...</p>
</div>
<div class="icons">
<p class="weather" id="day4"></p>
<div class="image"><img src="#" class="imgClass" id="img4" alt=""></div>
<p class="tempValues" id="day4Min">Loading...</p>
<p class="tempValues" id="day4Max">Loading...</p>
</div>
<div class="icons">
<p class="weather" id="day5"></p>
<div class="image"><img src="#" class="imgClass" id="img5" alt=""></div>
<p class="tempValues" id="day5Min">Loading...</p>
<p class="tempValues" id="day5Max">Loading...</p>
</div>
</div>
</div>
</div>

<script src="assets/scripts/script.js"></script>
</body>
</html>
17 changes: 10 additions & 7 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,9 @@
<li class="nav-item">
<a href="about.html" class="nav-link">About me</a>
</li>
<li class="nav-item">
<a href="forecast.html" class="nav-link">Forecast</a>
</li>
</ul>
<div class="hamburger">
<span class="bar"></span>
Expand All @@ -29,8 +32,8 @@
<div class="content">

<div class="row1">
<h1><strong>Who am I?</strong></h1>
<p id="font-size-18">Greetings! My name is Andrew Harris. I am a passionate developer and I work as a freelancer.</p>
<h2><strong>Who am I?</strong></h2>
<p>Greetings! My name is Andrew Harris. I am a passionate developer and I work as a freelancer.</p>
</div>
<div class="row1">
<h2><strong>Selected work</strong></h2>
Expand All @@ -40,31 +43,31 @@ <h2><strong>Selected work</strong></h2>
<div class='row'>
<div class='column'>
<div class='hover01 column'>
<figure><img src="img/example_website_1.jpg" alt="Example website" style="vertical-align:middle;"></figure>
<figure><img class="bigImg" src="img/example_website_1.jpg" alt="Example website" style="vertical-align:middle;"></figure>
</div>
</div>
<div class='column'>
<div class='hover01 column'>
<figure><img src="img/68747470733a2f2f692e6779617a6f2e636f6d2f35666536333439333661633264323634393964353138373830393739646533362e706e67.png" alt="Weather app" style="vertical-align:middle;"></figure>
<figure><img class="bigImg" src="img/68747470733a2f2f692e6779617a6f2e636f6d2f35666536333439333661633264323634393964353138373830393739646533362e706e67.png" alt="Weather app" style="vertical-align:middle;"></figure>
</div>
</div>
</div>
<div class='row'>
<div class='column'>
<div class='hover01 column'>
<figure><img src="img/Callista-Currency-Converter.png" alt="Currency converter app" style="vertical-align:middle;"></figure>
<figure><img class="bigImg" src="img/Callista-Currency-Converter.png" alt="Currency converter app" style="vertical-align:middle;"></figure>
</div>
</div>
<div class='column'>
<div class='hover01 column'>
<figure><img src="img/image_processing20200328-24228-kliqro.png" alt="Parking app" style="vertical-align:middle;"></figure>
<figure><img class="bigImg" src="img/image_processing20200328-24228-kliqro.png" alt="Parking app" style="vertical-align:middle;"></figure>
</div>
</div>
</div>
</div>

</div>

<script src="script.js"></script>
<script src="assets/scripts/script.js"></script>
</body>
</html>
12 changes: 0 additions & 12 deletions script.js
View file
Open in desktop

This file was deleted.

Loading