<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>David Lagou - Web Developer</title>
<link rel="shortcut icon" href="img/favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css" />
<!-- Fonts -->
<link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/css2?family=Rubik+Mono+One&family=Rubik:wght@400;600;900&display=swap"
rel="stylesheet">
<!-- Animation css -->
<link rel="stylesheet" href="css/aos.css">
</head>
<body>
<section>
<nav>
<div class="logo">
<a href="index.html">
<img src="img/davidlagouLogo.svg" alt="Logo Image">
</a>
</div>
<div class="hamburger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
<ul class="navLinks">
<li><a href="index.html">Home</a></li>
<li><a href="webdev.html">Web Development</a></li>
<li><a href="uiux.html">UI/UX</a></li>
<li><a href="graphicdesign.html">Graphic Design</a></li>
<li><a href="about.html">About Me</a></li>
</ul>
</nav>
</section>
<header>
<div class="projectImgHeader weatherapi">
<div class="headertxt">
</div>
</div>
<div class="projectPageHeader">
<h1> Weather Api</h1>
<p> Website Design | 2020</p>
<a class="buttonCTA" href="https://forecastappdavid.netlify.app/" target="_blank">LIVE WEBSITE </a>
<div class="gitLink">
<a class="buttonCTA gitLink" target="_blank" href="https://github.com/DavidLagou/weather-app"> VIEW ON GITHUB
</a>
</div>
</div>
</header>
<div class="homeFeatureTxt">
<h2> PROJECT OVERVIEW</h2>
</div>
<section class="projectPageDetails">
<div class="projectCat">
<h3> What</h3>
<p> Weather Application that allows users to search for a city.
</p>
</div>
<div class="projectCat">
<h3> Why</h3>
<p> The goal of this project was to familiarize myself with fetching data from an API and displaying the
results
</p>
</div>
<div class="projectCat">
<h3> Who</h3>
<p> The project was designed and coded by myself.</p>
</div>
<div class="projectCat">
<h3> Tool</h3>
<p>
HTML, CSS, Javascript, API, JSON</p>
</div>
<div class="projectCat">
<h3> When</h3>
<p> Febuary 2020</p>
</div>
</section>
<div class="homeFeatureTxt">
<h2> PROCESS </h2>
</div>
<section class="projectFeature" data-aos="zoom-in">
<div class="projectInfo">
<h3> PHASE ONE</h3>
<h2> Planning</h2>
<p class="projectInfoP"> Having this been my first time using an API, I spent a few days reading
documentation on how to properly grab data from an API and display it on screen. After spending a while
working with JSON and objects, the learning curve on how to use an API was not as steep as I thought it
to be. Now that I had some knowledge on how to make API calls and how to display its data on the front
end, I needed to find a web server that would allow me to request. After browsing around the web I
landed on Open Weather Api. This API focused on sending back weather data data in your local area.
</p>
</div>
</section>
<section class="projectFeature two" data-aos="zoom-in">
<div class="projectImg process">
<img src="./img/weather_code.jpg" alt="Weather App code snippet">
</div>
<div class="projectInfo">
<h3> PHASE TWO</h3>
<h2> Execution : endpoints
</h2>
<p class="projectInfoP"> I wanted to add a little more personalization so I decided to have users type in
the specific locations that they wanted to see. With that in mind my biggest challenge was creating the
function capable of doing so. However, I realized that In order to do so I would need to concatenate the
user input inside the fetch request and check to see if the city name is valid.
</p>
</div>
</section>
<section class="projectFeature two" data-aos="zoom-in">
<div class="projectInfo">
<h3> PHASE THREE</h3>
<h2> Code</h2>
<p class="projectInfoP">After successfully receiving the JSON data, my next task was to sort out the
information and display the most important data to the user. Having done a competitive analysis on
weather apps around the web, I noticed a trend on displaying the : current temp, Highs and Lows and the
weather description. Luckily , this information was also supplied in the API
</p>
</div>
<div class="projectImg process">
<img src="./img/weather_api_response.jpg" alt="Weather app endpoint response">
</div>
</section>
<section class="projectFeature two" data-aos="zoom-in">
<div class="projectInfo">
<h3> PHASE FOUR</h3>
<h2> REFLECTION</h2>
<p class="projectInfoP"> After working with fetching an api and displaying the results I now have a greater
appreciation for its usage. I found myself thinking of all the interesting possibilities that can be
done with apis. In addition, coding with javascript is always a good time and gaining more experience in
javascript is always something I try and strive for.
</p>
</div>
</section>
<div class="footerCTA">
<a class="buttonCTA" target="_blank" href="https://forecastappdavid.netlify.app/"> LIVE WEBSITE </a>
</div>
<button onclick="topFunction()" id="top"> Top</button>
<footer>
<section class="container">
<section class="footerInfo">
<h2> Interested in working together ?</h2>
<div class="contactInfo">
<div class="contactItem">
<a target="_blank" href="mailto:dlagou18@gmail.com">
<img src="img/email_icon.svg" alt="email icon">
</a>
</div>
<div class="contactItem">
<a href="https://www.linkedin.com/in/david-lagou-988b66175/" target="_blank">
<img src="img/linkedin_icon.svg" alt="linkedin icon"> </a>
</div>
<div class="contactItem">
<a target="_blank" href="https://github.com/DavidLagou">
<img src="img/github_icon.svg" alt="github icon"></a>
</div>
<div class="contactItem">
<a target="_blank" href="https://www.instagram.com/dizzydezign/">
<img src="img/instagram-icon.svg" alt="Instagram Icon"></a>
</div>
</div>
<h3> © David Lagou Portfolio 2020</h3>
</section>
</section>
</footer>
<script type='text/javascript' src="js/navbar.js"></script>
<script src="js/aos.js"></script>
<script>
AOS.init({
easing: 'ease-in-out-sine',
once: true,
});
</script>
</body>
</html>