kawa/startpage-onedark
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added weather

Browse Source
This commit is contained in:
deepjyoti30
2020-05-15 22:52:13 +05:30
parent 501cb6df47
commit ff8622f185
5 changed files with 78 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
config.json
View File

@@ -34,5 +34,10 @@
"disableMessage": false, "disableMessage": false,
"disableDate": false, "disableDate": false,
"disableSearchBar": false, "disableSearchBar": false,
"disable24Hour": false "disable24Hour": false,
"disableWeather": true,
"weatherConf": {
"location": "Pune India",
"unit": "fah"
}
} }

5
css/main.css
View File

@@ -20,8 +20,11 @@ body {
.main { .main {
width: 100%; width: 100%;
text-align: center; } text-align: center; }
.main #date-text { .main #date h2 {
padding-top: 15px; padding-top: 15px;
display: inline-block;
vertical-align: top; }
.main #date-text, .main #weather-text {
color: #d9d9d9; } color: #d9d9d9; }
.main #message-text { .main #message-text {
font-size: 23px; } font-size: 23px; }

35
index.html
View File

@@ -8,45 +8,14 @@
<link rel="stylesheet" href="css/main.css"> <link rel="stylesheet" href="css/main.css">
</head> </head>
<body> <body>
<div id="settings" class="settings-modal">
<div class="modal-content">
<span class="close">&times;</span>
<h2>Settings</h2>
<div class="settings-container">
<div class="row">
<div class="col">
Username <input type="text" id="username">
</div>
<div class="col">
Search Engine
<select id="search-engine">
<option value="DuckDuckGo">DuckDuckGo</option>
<option value="Google">Google</option>
<option value="Bing">Bing</option>
<option value="Yahoo">Yahoo</option>
</select>
</div>
</div>
<div class="row">
<div class="col">
<b>Hide</b> Welcome Message <input type="checkbox" id="disabel-message">
</div>
<div class="col">
<b>Hide</b> date and time <input type="checkbox" id="disabel-date">
</div>
<div class="col">
<b>Hide</b> Search Bar <input type="checkbox" id="disabel-bar">
</div>
</div>
</div>
</div>
</div>
<div id="main" class="main"> <div id="main" class="main">
<div id="message"> <div id="message">
<h1 id="message-text">Good Morning!</h1> <h1 id="message-text">Good Morning!</h1>
</div> </div>
<div id="date"> <div id="date">
<h2 id="date-text"></h2> <h2 id="date-text"></h2>
<h2 id="line">|</h2>
<h2 id="weather-text">Fetching Weather...</h2>
</div> </div>
<div id="search-bar"> <div id="search-bar">
<input id="search-bar-input"></input> <input id="search-bar-input"></input>

61
js/main.js
View File

@@ -7,10 +7,14 @@ searchBarId = "search-bar-input"
messageDivId = "message" messageDivId = "message"
dateDivId = "date" dateDivId = "date"
dateId = "date-text" dateId = "date-text"
weatherId = "weather-text"
lineId = "line"
messageId = "message-text" messageId = "message-text"
otherContentId = "other-content" otherContentId = "other-content"
userName = "Deepjyoti" userName = ""
disable24Hour = false; disable24Hour = false;
appId = "fd2c04ed7f9802656bd2cc23bddc7ad9"
apiUrl = "http://api.openweathermap.org/data/2.5/weather"
bgClassContainer = [ bgClassContainer = [
"media", "media",
"work", "work",
@@ -28,6 +32,9 @@ searchEngines = {
"Bing": "https://www.bing.com/search?q=", "Bing": "https://www.bing.com/search?q=",
"Yahoo": "https://search.yahoo.com/search?p=" "Yahoo": "https://search.yahoo.com/search?p="
} }
validWeatherUnit = [
"fah", "cel"
]
function initBody() { function initBody() {
/** /**
@@ -115,6 +122,43 @@ function updateTimeHook() {
}, 30 * 1000) }, 30 * 1000)
} }
function getFahrenheit(inCelcius) {
return (inCelcius * 9 / 5) + 32
}
function indexUppercase(unformatted) {
return unformatted.split(" ").map(w => {
return w[0].toUpperCase() + w.substring(1)
}).join(" ")
}
function updateWeather(weatherConfig) {
/**
* Get the weather using the location passed by the user using
* the config and update it in a formatted way according to
* the unit.
*/
userLocation = weatherConfig["location"].replace(/\ /g, ",")
passedUnit = weatherConfig["unit"]
unit = validWeatherUnit.includes(passedUnit.substring(0, 3)) ?
passedUnit : "cel"
fetchUrl = apiUrl + `?q=${userLocation}&appid=${appId}&units=metric`
fetch(fetchUrl)
.then(response => {return response.json()})
.then(jsonData => {
temp = jsonData["main"]["temp"]
weatherType = jsonData["weather"][0]["main"]
console.log(temp, weatherType)
temp = !unit.includes("cel") ?
getFahrenheit(temp) + "&deg;F" : temp + "&deg;C"
weatherText = temp + ", " + indexUppercase(weatherType)
document.getElementById(weatherId).innerHTML = weatherText
})
}
function inRange(number, min, max) { function inRange(number, min, max) {
return (number >= min && number <= max) return (number >= min && number <= max)
} }
@@ -144,16 +188,25 @@ function parseAndCreate(jsonData) {
// Check if welcome message is supposed to be disabled // Check if welcome message is supposed to be disabled
if (jsonData["disableMessage"]) if (jsonData["disableMessage"])
document.getElementById(messageDivId).style.display = "none" document.getElementById(messageDivId).style.display = "none"
if (jsonData["disableDate"]) if (jsonData["disableDate"]) {
document.getElementById(dateDivId).style.display = "none" // Hide the date and the line
document.getElementById(dateId).style.display = "none"
document.getElementById(lineId).style.display = "none"
}
else else
updateTimeHook() updateTimeHook()
if (jsonData["disableWeather"]){
// Hide the date and the line
document.getElementById(weatherId).style.display = "none"
document.getElementById(lineId).style.display = "none"
}
else
updateWeather(jsonData["weatherConf"])
if (jsonData["disableSearchBar"]) if (jsonData["disableSearchBar"])
document.getElementById(searchBarDivId).style.display = "none" document.getElementById(searchBarDivId).style.display = "none"
else else
initSearchBar(jsonData) initSearchBar(jsonData)
sqrs = jsonData["squares"] sqrs = jsonData["squares"]
sqrs.forEach((element, index) => { sqrs.forEach((element, index) => {

11
scss/main.scss
View File

@@ -40,8 +40,15 @@ body {
width: 100%; width: 100%;
text-align: center; text-align: center;
#date-text { #date {
padding-top: 15px; h2 {
padding-top: 15px;
display: inline-block;
vertical-align: top;
}
}
#date-text, #weather-text {
color: darken($foreground, 15); color: darken($foreground, 15);
} }