Skip to content

Commit

Permalink
update
Browse files Browse the repository at this point in the history
  • Loading branch information
lolyparty committed Nov 2, 2020
1 parent 3b54471 commit aef7f19
Show file tree
Hide file tree
Showing 16 changed files with 228 additions and 54 deletions.
4 changes: 3 additions & 1 deletion .gitignore
Original file line number Diff line number Diff line change
@@ -1,2 +1,4 @@
.vscode/
config.js
config.js
# Local Netlify folder
.netlify
Binary file added icons/weatherIcon-120x120.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added icons/weatherIcon-144x144.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added icons/weatherIcon-152x152.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added icons/weatherIcon-167x167.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added icons/weatherIcon-180x180.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added icons/weatherIcon-192x192.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added icons/weatherIcon-48x48.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added icons/weatherIcon-512x512.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added icons/weatherIcon-72x72.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added icons/weatherIcon-96x96.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
144 changes: 92 additions & 52 deletions index.html
Original file line number Diff line number Diff line change
@@ -1,27 +1,48 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="img/weatherIcon.webp">
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@400&display=swap" rel="stylesheet">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="theme-color" content="#d4d4d4" />
<meta
name="apple-mobile-web-app-status-bar"
content="rgba(100, 100, 100,0.9)"
/>
<link rel="icon" href="img/weatherIcon.webp" />
<link rel="apple-touch-icon" href="icons/weatherIcon-512x512.png" />
<link rel="apple-touch-icon" href="icons/weatherIcon-192x192.png" />
<link rel="apple-touch-icon" href="icons/weatherIcon-180x180.png" />
<link rel="apple-touch-icon" href="icons/weatherIcon-167x167.png" />
<link rel="apple-touch-icon" href="icons/weatherIcon-152x152.png" />
<link rel="apple-touch-icon" href="icons/weatherIcon-144x144.png" />
<link rel="apple-touch-icon" href="icons/weatherIcon-120x120.png" />
<link rel="apple-touch-icon" href="icons/weatherIcon-96x96.png" />
<link rel="apple-touch-icon" href="icons/weatherIcon-72x72.png" />
<link rel="apple-touch-icon" href="icons/weatherIcon-48x48.png" />
<link rel="stylesheet" href="style.css" />
<link
href="https://fonts.googleapis.com/css2?family=Roboto&display=swap"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css2?family=Lato:wght@400&display=swap"
rel="stylesheet"
/>
<link rel="manifest" href="manifest.json" />

<title>WeatherNow</title>
</head>
<body>
</head>
<body>
<div class="container">

<div class="left">
<div class="currentdate">
<h3 class="date">WeatherNow</h3>
</div>
<div class="currenticon">
<!-- <img class="currentweathericon" src="" alt="Current Weather"> -->
</div>
<div class="weatherstat">

<!-- <div>
<div class="left">
<div class="currentdate">
<h3 class="date">WeatherNow</h3>
</div>
<div class="currenticon">
<!-- <img class="currentweathericon" src="" alt="Current Weather"> -->
</div>
<div class="weatherstat">
<!-- <div>
<h4 class="temp">23&deg;</h4>
</div>
<div class="locdate">
Expand All @@ -35,32 +56,31 @@ <h2>Ibadan</h1>
<div>
<p class="cloud">Broken clouds</p>
</div> -->

</div>
</div>
<div class="right">
<div class="weather_conditions">
<!-- <h4 class="conditions_head">Weather conditions</h4> -->
<!-- <div>
</div>
<div class="right">
<div class="weather_conditions">
<!-- <h4 class="conditions_head">Weather conditions</h4> -->
<!-- <div>
<div class="condition wind">Wind</div>
<div class="condition Precipitation">Pressure</div>
<div class="condition Humidity">Humidity</div>
<div class="condition wind">Max Temperature</div>
<div class="condition wind">Min Temperature</div>
</div> -->
</div>
<div class="weather_forecast">
<canvas id="myChart">
<!-- <div class="forecasthours">11:00</div>
</div>
<div class="weather_forecast">
<canvas id="myChart">
<!-- <div class="forecasthours">11:00</div>
<div class="forecasthours">12:00</div>
<div class="forecasthours">13:00</div>
<div class="forecasthours">14:00</div>
<div class="forecasthours">15:00</div>
<div class="forecasthours">16:00</div> -->
</canvas>
</div>
<div class="days_forecast">
<!-- <div class="day">
</canvas>
</div>
<div class="days_forecast">
<!-- <div class="day">
<div class="">Monday</div>
<div class="dayCondition">
<img src="" class="dayIcon">
Expand Down Expand Up @@ -105,27 +125,47 @@ <h2>Ibadan</h1>
</div>
<div class="daytemp">23&deg;/24&deg;</div>
</div>-->
</div>
</div>
</div>

<div class="search">
<div class="currentlocation">
<img class="locationweather" src="img/pin (1).svg" alt="weather of current location" />
</div>
<label for="city">Search city weather</label>
<input type="text" id="city" name="city" placeholder="Search City" class="searchinput"><button aria-label="Search" class="searchbtn" type="submit"><img class="searchweather" alt="search weather of a city" src="img/icons8-search.svg"/></button>
<div class="search">
<div class="currentlocation">
<img
class="locationweather"
src="img/pin (1).svg"
alt="weather of current location"
/>
</div>
<label for="city">Search city weather</label>
<input
type="text"
id="city"
name="city"
placeholder="Search City"
class="searchinput"
/><button aria-label="Search" class="searchbtn" type="submit">
<img
class="searchweather"
alt="search weather of a city"
src="img/icons8-search.svg"
/>
</button>
</div>

<div class="loader">
<span class="circle round1"></span>
<span class="circle round2"></span>
<span class="circle round3"></span>
<span class="circle round4"></span>
</div>
<div class="loader">
<span class="circle round1"></span>
<span class="circle round2"></span>
<span class="circle round3"></span>
<span class="circle round4"></span>
</div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js" integrity="sha512-s+xg36jbIujB2S2VKfpGmlC3T5V2TF3lY48DX7u2r9XzGzgPsa6wTpOQA7J9iffvdeBN0q9tKzRxVxw1JviZPg==" crossorigin="anonymous"></script>

<script
src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"
integrity="sha512-s+xg36jbIujB2S2VKfpGmlC3T5V2TF3lY48DX7u2r9XzGzgPsa6wTpOQA7J9iffvdeBN0q9tKzRxVxw1JviZPg=="
crossorigin="anonymous"
></script>
<script type="module" src="index.js"></script>

</body>
</html>
<script src="sw.js"></script>
</body>
</html>
9 changes: 8 additions & 1 deletion index.js
Original file line number Diff line number Diff line change
Expand Up @@ -475,4 +475,11 @@ domClasses.searchLocation.addEventListener('click',(e)=>{
window.addEventListener('load', callLocation);

/**************************************** present location weather **********************************************/
domClasses.currentLocationWeather.addEventListener('click',callLocation);
domClasses.currentLocationWeather.addEventListener('click',callLocation);

//service worker
if('serviceWorker' in navigator){
navigator.serviceWorker.register('sw.js')
.then(()=>console.log('service worker registered'))
.catch(()=>'error registering sesrvice worker')
}
74 changes: 74 additions & 0 deletions manifest.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,74 @@
{
"name":"WeatherNow",
"short_name":"WeatherNow",
"description":"A simple weather forecast appthat shows current weather condition of your location or a place",
"display":"standalone",
"theme_color":"#d4d4d4",
"background_color":"#ffffff",
"start_url":"index.html",
"orientation":"portrait",
"icons":[
{
"src":"/icons/weatherIcon-48x48.png",
"sizes":"48x48",
"type":"image/png",
"purpose":"any maskable"
},
{
"src":"/icons/weatherIcon-72x72.png",
"sizes":"72x72",
"type":"image/png",
"purpose":"any maskable"
},
{
"src":"/icons/weatherIcon-96x96.png",
"sizes":"96x96",
"type":"image/png",
"purpose":"any maskable"
},
{
"src":"/icons/weatherIcon-120x120.png",
"sizes":"120x120",
"type":"image/png",
"purpose":"any maskable"
},
{
"src":"/icons/weatherIcon-144x144.png",
"sizes":"144x144",
"type":"image/png",
"purpose":"any maskable"
},
{
"src":"/icons/weatherIcon-152x152.png",
"sizes":"152x152",
"type":"image/png",
"purpose":"any maskable"
},
{
"src":"/icons/weatherIcon-167x167.png",
"sizes":"167x167",
"type":"image/png",
"purpose":"any maskable"
},
{
"src":"/icons/weatherIcon-180x180.png",
"sizes":"180x180",
"type":"image/png",
"purpose":"any maskable"
},
{
"src":"/icons/weatherIcon-192x192.png",
"sizes":"192x192",
"type":"image/png",
"purpose":"any maskable"
},
{
"src":"/icons/weatherIcon-512x512.png",
"sizes":"512x512",
"type":"image/png",
"purpose":"any maskable"
}

]

}
2 changes: 2 additions & 0 deletions style.css
Original file line number Diff line number Diff line change
Expand Up @@ -360,3 +360,5 @@ label{
}
}



49 changes: 49 additions & 0 deletions sw.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
const cacheName = 'watheranowCache-v1';
const cachedAssets = [
'/',
'index.js',
'/index.html',
'style.css',
'https://fonts.googleapis.com/css2?family=Roboto&display=swap',
'https://fonts.googleapis.com/css2?family=Lato:wght@400&display=swap',
'https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu72xKKTU1Kvnz.woff2',
'https://fonts.gstatic.com/s/lato/v17/S6uyw4BMUTPHjxAwXiWtFCfQ7A.woff2',
'img/day.webp',
'img/barometer.svg',
'img/humidity.svg',
'img/icons8-search.svg',
'img/pin (1).svg',
'img/uv-protection.svg',
'img/wind.svg'
]

//install event
self.addEventListener('install',(evt)=>{
// console.log('service worker installed')
evt.waitUntil(caches.open(cacheName)
.then(cache=>{
cache.addAll(cachedAssets)
}))
})

// activate event
self.addEventListener('activate',evt=>{
// console.log('service worker activated')
evt.waitUntil(
caches.keys().then(keys=>{
return Promise.all(keys
.filter(key => key !== cacheName)
.map(key=>caches.delete(key)))
})
)
})

self.addEventListener('fetch',evt=>{
// console.log('fetch request successful')
evt.respondWith(
caches.match(evt.request)
.then(cacheRes=>{
return cacheRes || fetch(evt.request)
})
)
})

0 comments on commit aef7f19

Please sign in to comment.