Skip to content

Commit

Permalink
Revert "Set up OpenWeatherMap API"
Browse files Browse the repository at this point in the history 
This reverts commit c75ec65.
  • Loading branch information
@StubberG3
StubberG3 committed Feb 7, 2024
1 parent 7cb4cef commit 7fb433a
Show file tree
Hide file tree
Showing 3 changed files with 136 additions and 123 deletions.
4 changes: 2 additions & 2 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -230,7 +230,6 @@ <h5 class="title">Front-end Web Developer</h5>
</li>
<li><a href="../docs/Gregg_Stubberfield_Resume.pdf" data-hover="Resume"
target="_blank">Resume</a></li>
<li><a href="pages/weather.html" data-hover="Projects" target="_blank">Projects</a></li>
<li><a href="mailto:[email protected]?subject=I have an opportunity for you&body=Hi Gregg,%0A%0AI was looking at your website and..."
data-hover="Contact" title="email">Contact</a></li>
</ul>
Expand Down Expand Up @@ -260,7 +259,8 @@ <h2 class="page-name"><b>About Me</b></h2>
</p>
</div>
<div id="projects" data-page="projects" class="page">
<p>TBD</p>
<p>TBD
</p>
</div>
</div>
<div class="curve"></div>
Expand Down
108 changes: 34 additions & 74 deletions js/weather.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,13 +12,6 @@ const app = {
.addEventListener('click', app.getLocation);
},
fetchWeather: (ev) => {
document
.getElementById('loading')
.classList
.remove('hide');
ev.preventDefault();
ev.stopPropagation();
ev.stopImmediatePropagation();
//use the values from latitude and longitude to fetch the weather
let lat = document.getElementById('latitude').value;
let lon = document.getElementById('longitude').value;
Expand All @@ -36,29 +29,14 @@ const app = {
app.showWeather(data);
})
.catch(console.err);
document
.getElementById('loading')
.classList
.add('hide');
},
getLocation: (ev) => {
document
.getElementById('loading')
.classList
.remove('hide');
ev.preventDefault();
ev.stopPropagation();
ev.stopImmediatePropagation();
let opts = {
enableHighAccuracy: true,
timeout: 1000 * 10, //10 seconds
maximumAge: 1000 * 60 * 5, //5 minutes
};
navigator.geolocation.getCurrentPosition(app.onSuccess, app.onError, opts);
document
.getElementById('loading')
.classList
.add('hide');
},
onSuccess: (position) => {
//got position
Expand All @@ -73,61 +51,43 @@ const app = {
},
showWeather: (resp) => {
console.log(resp);
let today = document.querySelector('.today');
let week = document.querySelector('.week');
function convertCtoF (C) {
return parseInt(C * 9 / 5 + 32);
}
let row = document.querySelector('.weather.row');
//clear out the old weather and add the new
today.innerHTML = resp.daily
.map((day, idx) => {
let dt = new Date(day.dt * 1000); //timestamp * 1000
const weekday = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
if (idx == 0) { // show current day forecast
return `<div class="card col s12 m6 offset-m3 l6 offset-l3 primary-color white-text">
<div class="card-content">
<h6>${resp.timezone}</h6>
<h2 style="margin: 0;"><b>${convertCtoF(day.temp.day)}&deg;F</b></h2>
<img
src="http://openweathermap.org/img/wn/${day.weather[0].icon
}@4x.png"
class="card-image"
alt="${day.weather[0].description}"
/>
<h5 style="margin: 0;">${day.weather[0].main}</h5>
</div>
</div>`;
}
})
.join(' ');
week.innerHTML = resp.daily
// row.innerHTML = '';
row.innerHTML = resp.daily
.map((day, idx) => {
let dt = new Date(day.dt * 1000); //timestamp * 1000
const weekday = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
if (idx <= 7) {
return `<div class="col s6 m3">
<div class="card">
<div class="card-title">
<h5>${weekday[dt.getDay()]}</h5>
<h6>${dt.toLocaleDateString('en-US')}</h6>
<img
src="http://openweathermap.org/img/wn/${day.weather[0].icon
if (idx <= 2) {
let dt = new Date(day.dt * 1000); //timestamp * 1000
let sr = new Date(day.sunrise * 1000).toTimeString();
let ss = new Date(day.sunset * 1000).toTimeString();
return `<div class="col">
<div class="card">
<h5 class="card-title p-2">${dt.toDateString()}</h5>
<img
src="http://openweathermap.org/img/wn/${day.weather[0].icon
}@4x.png"
class="card-image"
alt="${day.weather[0].description}"
/>
<h4>${day.weather[0].main}</h4>
</div>
<div class="card-content">
<p class="card-text">High ${convertCtoF(day.temp.max)}&deg;F Low ${convertCtoF(day.temp.min)
}&deg;F</p>
<p class="card-text">High Feels like ${convertCtoF(day.feels_like.day)
}&deg;F</p>
<p class="card-text">Precipitation ${day.pop * 100}%</p>
</div>
</div>
</div>
</div>`;
class="card-img-top"
alt="${day.weather[0].description}"
/>
<div class="card-body">
<h3 class="card-title">${day.weather[0].main}</h3>
<p class="card-text">High ${day.temp.max}&deg;C Low ${day.temp.min
}&deg;C</p>
<p class="card-text">High Feels like ${day.feels_like.day
}&deg;C</p>
<p class="card-text">Pressure ${day.pressure}mb</p>
<p class="card-text">Humidity ${day.humidity}%</p>
<p class="card-text">UV Index ${day.uvi}</p>
<p class="card-text">Precipitation ${day.pop * 100}%</p>
<p class="card-text">Dewpoint ${day.dew_point}</p>
<p class="card-text">Wind ${day.wind_speed}m/s, ${day.wind_deg
}&deg;</p>
<p class="card-text">Sunrise ${sr}</p>
<p class="card-text">Sunset ${ss}</p>
</div>
</div>
</div>
</div>`;
}
})
.join(' ');
Expand Down
147 changes: 100 additions & 47 deletions pages/weather.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,6 @@
<style>
:root {
--primary-color: #4e406a;
background-color: #efefef;
}

.primary-color {
Expand All @@ -27,56 +26,48 @@
.primary-color-text {
color: var(--primary-color);
}

.weather-container {
background-color: #fff;
margin: 0 auto;
}

.temperature {
font-weight: bold;
}

.weather-details {
color: #2f2f2f;
font-size: 1.2rem;
}

.week img.card-image {
max-width: 100%;
}

.today img.card-image {
max-width: 100px;
}

@media screen and (max-width: 771px) {
.btn {
margin-bottom: 20px;
height: 100%;
}
}
</style>
</head>

<body>
<div id="app">
<nav>
<div class="nav-wrapper">
<a href="#!" class="brand-logo">Logo</a>
<a href="#" data-target="mobile-demo" class="sidenav-trigger"><i class="material-icons">menu</i></a>
<ul class="right hide-on-med-and-down">
<li><a href="#!">Link 1</a></li>
<li><a href="#!">Link 2</a></li>
<li><a href="#!">Link 3</a></li>
<li><a href="#!">Link 4</a></li>
</ul>
</div>
</nav>

<ul class="sidenav" id="mobile-demo">
<li><a href="#!">Link 1</a></li>
<li><a href="#!">Link 2</a></li>
<li><a href="#!">Link 3</a></li>
<li><a href="#!">Link 4</a></li>
</ul>

<main class="container">
<h3>OpenWeatherMap.org API</h3>
<p><a href="../index.html">Back to home</a></p>
<h1>OpenWeatherMap.org API</h1>

<section class="filter">
<div class="row white center-align" style="border-radius: 5px;">
<div class="row center-align">
<div class="input-field col s6">
<i class="fa fa-arrows-left-right prefix"></i>
<input id="latitude" type="number" class="validate" placeholder="Enter Latitude e.g. 39.9526"
aria-label="latitude" aria-describedby="latitude" value="39.9626">
<input id="latitude" type="text" class="validate" inputmode="numeric"
placeholder="Enter Latitude e.g. 42.42" aria-label="latitude" aria-describedby="latitude"
value="42.42">
<label for="latitude">Latitude</label>
</div>
<div class="input-field col s6">
<i class="fa fa-arrows-up-down prefix"></i>
<input id="longitude" type="number" class="validate"
placeholder="Enter Longitude e.g., -75.1652" aria-label="longitude"
aria-describedby="longitude" value="-75.1652">
<input id="longitude" type="text" class="validate" inputmode="numeric"
placeholder="Enter Longitude e.g., 42.42" aria-label="longitude"
aria-describedby="longitude" value="42.42">
<label for="longitude">Longitude</label>
</div>
</div>
Expand All @@ -95,18 +86,80 @@ <h3>OpenWeatherMap.org API</h3>
</div>
</section>

<div id="loading" class="progress hide">
<div class="indeterminate purple"></div>
</div>

<!-- results for weather data -->
<section>
<div class="today row center-align"></div>
</section>
<section>
<div class="week row center-align"></div>
<section class="weather">
<h2>Weather</h2>
<div class="row">
<div class="col s12 m6">
<div class="card-panel primary-color white-text">
<h6>HighFeels like</h6>
<span>80&deg;</span>
</div>
</div>
<div class="col s12 m6">
<div class="card-panel primary-color white-text">
<h6>LowFeels like</h6>
<h6>60&deg;</h6>
</div>
</div>
<div class="col s12 m6">
<div class="card">
<div class="card-image">
<img src="http://openweathermap.org/img/wn/[email protected]" class=""
alt="Weather description" />
</div>
<div class="card-title">Weather Label</div>
<div class="card-content">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cum a
illum
delectus dignissimos quo obcaecati iure, tempore blanditiis ut mollitia veritatis labore
deleniti aliquam cumque aut debitis aperiam veniam similique!</div>
</div>
</div>
<div class="card col s12 m6">
<div class="card-image">
<img src="http://openweathermap.org/img/wn/[email protected]" class="" alt="Weather description" />
</div>
<div class="card-title">Weather Label</div>
<div class="card-content">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cum a illum
delectus dignissimos quo obcaecati iure, tempore blanditiis ut mollitia veritatis labore
deleniti aliquam cumque aut debitis aperiam veniam similique!</div>
</div>
<!-- <div class="card">
<h5 class="card-title">Date</h5>
<div class="card-content">
<h3 class="">Weather Label</h3>
<p class="">High Temp Low Temp</p>
<p class="">HighFeels like</p>
<p class="">Pressure</p>
<p class="">Humidty</p>
<p class="">UV Index</p>
<p class="">Precipitation</p>
<p class="">Dew Point</p>
<p class="">Wind speed and direction</p>
<p class="">Sunrise</p>
<p class="">Sunset</p>
</div>
</div> -->
</div>
</section>
</main>

<footer class="primary-color">
<div class="row align-items-center">
<div class="col">
<img src="http://openweathermap.org/img/wn/10d.png" alt="demo icon" />
<span>10d.png</span>
</div>
<div class="col">
<img src="http://openweathermap.org/img/wn/[email protected]" alt="demo icon" />
<span>[email protected]</span>
</div>
<div class="col">
<img src="http://openweathermap.org/img/wn/[email protected]" alt="demo icon" />
<span>[email protected]</span>
</div>
</div>
</footer>
</div>

<script src=" https://code.jquery.com/jquery-3.7.1.min.js"
Expand Down

0 comments on commit 7fb433a

Please sign in to comment.