irl-colour-time/puter.html

87 lines
2.7 KiB
HTML
Raw Permalink Normal View History

2021-12-21 16:52:19 +00:00
<html>
<head>
<title>kindrobot</title>
<style type="text/css">
body {
background-color: DarkSlateGray;
color: Gainsboro;
font-family: courier;
max-width: 650px;
margin-left: 100px;
}
a {
color: LightGray;
}
#title {
display: inline;
}
</style>
</head>
<body>
<h1>'puter colour picker</h1>
<em>Help me decorate my office.</em>
<form id="colour-change-form">
<input type="text" placeholder="red (0-255)" id="colour-change-red"/>
<input type="text" placeholder="green (0-255)" id="colour-change-green"/>
<input type="text" placeholder="blue (0-255)" id="colour-change-blue"/>
<input type="text" placeholder="a nice note" id="colour-change-note"/>
<input type="submit" id="colour-change-submit" value="Submit"/>
</form>
<img src="http://home.kindrobot.ca/puter.png" alt="a computer with some colour" id="img-puter"/>
<script>
document.addEventListener("DOMContentLoaded", (event) => {
const theForm = document.getElementById('colour-change-form');
theForm.addEventListener("submit", async (event) => {
event.preventDefault();
const red = parseInt(document.getElementById('colour-change-red').value);
const green = parseInt(document.getElementById('colour-change-green').value);
const blue = parseInt(document.getElementById('colour-change-blue').value);
const note = document.getElementById('colour-change-note').value;
if(isNaN(red) || red < 0 || red > 255){
alert("red needs to be a number between 0 and 255");
return;
}
if(isNaN(blue) || blue < 0 || blue > 255){
alert("blue needs to be a number between 0 and 255");
return;
}
if(isNaN(green) || green < 0 || green > 255){
alert("green needs to be a number between 0 and 255");
return;
}
if(!note || note == ""){
alert("please provide a note");
return;
}
const response = await fetch("https://colour-time-default-rtdb.firebaseio.com/messages.json", {
method: 'POST',
mode: 'cors',
cache: 'no-cache',
headers: {'Content-Type': 'application/json'},
redirect: 'follow',
body: JSON.stringify({
text: note, red, green, blue
})
});
const resultBody = await response.json();
console.log(resultBody);
alert("Thank you so much! Please stick around for about a minute to see your change.");
theForm.reset();
const img = document.getElementById('img-puter');
let count = 0;
const looper = setInterval(() => {
img.src = `http://home.kindrobot.ca/puter.png?t=${new Date().getTime()}`;
if(++count >= 5)
clearInterval(looper);
}, 15000);
});
});
</script>
</body>
</html>