I thought it would be about time I took a crack at an IoT device and they do say that smart phones are the major IoT device.
For this project I had some simple goals to:
- Have a bedside clock
- Stop using my normal phone for rainforest music at night
- Keep on top of the day's weather
This "app" is just a simple website that I created with standard HTML, CSS and JS, no framework or build tooling. I wanted to keep it simple and straightforward.
A basic clock on a page
I started with a simple file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Sidebed Clock</title>
</head>
<body>
<!-- Clock -->
<div id="clock"></div>
<script>
// Every second, update the clock
setInterval(
() => {
// AM/PM Style hours - 2pm is 2:00 not 14:00
const hour = new Date().getHours() - (new Date().getHours() > 12 ? 12 : 0)
// Minutes have padding of zeros (i.e. 3 minutes is 03)
const min = ((new Date().getMinutes() < 10) ? "0" : "") + new Date().getMinutes()
// Set the clock - e.g. 2:03
document.querySelector("#clock").innerHTML = `${hour}:${min}`
},
1000
)
</script>
</body>
</html>
At this point we don't really have much but technically it's a clock! :P Now to add some styling....
<!-- Added a wrapper container for styling purposes -->
<div id="container">
<div id="clock"></div>
</div>
<style>
/* Custom font for the clock */
@font-face {
font-family: "Cascadia";
src: url("Cascadia.ttf");
}
body {
/* Smoked Black Background */
background-color: #0A0908;
/* Clock font */
font-family: "Cascadia";
/* Remove the weird margin that is always there by default */
margin: 0;
}
#container {
/* Using CSS grid to space out UI */
display: grid;
/* Make sure the container is the full height and width */
height: 100vh;
width: 100vw;
/* Setup the grid for all the elements */
/* Grid is 4 wide and 3 high */
/* fr is fractional unit: 3fr below is 3 of 6 */
grid-template-columns: 1fr 3fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
}
#clock {
/* Center the clock in the grid element */
margin: auto;
/* Put the clock in the center left */
grid-column: 2;
grid-row: 2;
font-size: 120px;
color: #18505A;
}
</style>
It may look cool, but it's not fullscreen!!!
Yeah ok, so far we have the basic website setup but if you were to open this on your mobile you would find it would still have the navbar of your mobile browser.. Not the prettiest.
Adding fullscreen mode
In order to make it fullscreen I need some sort of trigger on the page to touch that will tell the site to go fullscreen. In this situation I chose the actual clock text to make it fullscreen, adding a onclick handle to then go into fullscreen.
<!-- Clock -->
<div id="clock" onclick="openFullscreen()"></div>
and the function to do the fullscreen:
<script>
// Fullscreen
function openFullscreen() {
if (!window.fullscreen) {
// Pick the body element to make fullscreen
var body = document.getElementsByTagName("BODY")[0];
// Pick the method that matches your browser
// My phone was chrome so I picked on that worked for that
body.webkitRequestFullscreen(); /* Chrome, Safari and Opera */
}
}
</script>
Also to make sure the background doesn't go white when fullscreen:
<style>
body:-webkit-full-screen::backdrop {
background-color: #0A0908;
}
</style>
Finished, for now...
So far we now have a clock on a website that we could host somewhere and open on our phone (maybe on codepen?). I will follow this up with a part 2, adding weather and rain noise in the background and putting up all the code onto codepen.
If you have any questions or spot any mistakes let me know :) this is my first post ever so hopefully I don't have too many mistakes.
Top comments (0)