jdreichmann/info-screen
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Added working datetime display, embedded wttr.in

Browse Source
This commit is contained in:
jreichmann 2018-05-18 13:29:25 +02:00
parent d88782b820
commit eaecb1838f
3 changed files with 42 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
index.html
View File

@ -1,9 +1,15 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<title>News</title>
<link rel="stylesheet" type="text/css" href="layout.css" />
<link rel="stylesheet" type="text/css" href="dark_theme.css" />
<script type="application/javascript" src="index.js"></script>
</head> </head>
<body> <body>
<div id="datetime">2018-04-12 12:34:56.345h UTC+1</div> <div id="datetime">
<iframe id="weather" src="https://wttr.in/Karlsruhe"></iframe> <span>2018-04-12 12:34:56.345h UTC+1</span>
</div>
<img id="weather" src="https://wttr.in/Karlsruhe.png" />
</body> </body>
</html> </html>

17
index.js Normal file
View File

@ -0,0 +1,17 @@
function startDateTimeDisplay() {
const displayNode = document.querySelector('#datetime span')
let dateTime = new Date()
const updateDateTime = () => {
displayNode.innerHTML = dateTime.toString()
dateTime = new Date()
window.requestAnimationFrame(updateDateTime)
}
window.requestAnimationFrame(updateDateTime)
}
window.onload = () => {
startDateTimeDisplay()
}

19
layout.css
View File

@ -5,7 +5,22 @@ html, body {
margin: 0; margin: 0;
} }
#datetime, #weather { #weather {
width: 100%; display: block;
margin: auto; margin: auto;
height: 60vh;
}
#datetime {
display: block;
width: 100%;
height: 15vh;
text-align: center;
line-height: 15vh;
}
#datetime span {
display: inline-block;
vertical-align: middle;
line-height: 8vh;
font-size: 8vh;
} }