JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<button onclick="myFunction()">Try it</button>
<p id="demo" style="text-align: center; color: blue; font-size: 40px;"></p>
<script>
function myFunction() {
switch (new Date().getDay()) {
case 0:
day = "Sunday";
document.body.style.backgroundImage = "url('http://lorempixel.com/400/200/sports/1/')";
break;
case 1:
day = "Monday";
document.body.style.backgroundImage = "url('http://lorempixel.com/400/200/sports/1/')";
break;
case 2:
day = "Tuesday";
document.body.style.backgroundImage = "url('http://lorempixel.com/400/200/sports/1/')";
break;
case 3:
day = "Wednesday";
document.body.style.backgroundImage = "url('http://lorempixel.com/400/200/sports/1/')";
break;
case 4:
day = "Thursday";
document.body.style.backgroundImage = "url('http://lorempixel.com/400/200/sports/1/')";
break;
case 5:
day = "Friday";
document.body.style.backgroundImage = "url('http://lorempixel.com/400/200/sports/1/')";
break;
case 6:
day = "Saturday";
document.body.style.backgroundImage = "url('http://lorempixel.com/400/200/sports/1/')";
break;
}
document.getElementById("demo").innerHTML = "Today is " + day;
}
</script>