Clock Script

This is a quick JS snippet for adding a clock to your page…

Example

The HTML

Place where you want your clock to appear

<div id="angiclock">
  <span id="mon"></span><br>
  <span id="result"></span><a href="https://angelicas.neocities.org" target="_blank">&#10084;</a>
</div>

The CSS

Put into the <HEAD> </HEAD> of your document

<style>
@import url('https://fonts.googleapis.com/css2?family=Fira+Sans+Extra+Condensed&display=swap');

body {
  background: url('https://i.postimg.cc/4y1ymJ0w/kitty2-7.png');
}

#angiclock {
  margin: 80px auto;
  font-family: 'Fira Sans Extra Condensed', sans-serif;
  width: 150px;
  padding: 10px;
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  background: Lavender;
  border: 4px solid MediumOrchid;
  border-radius: 10px;
  color: MediumOrchid;
  text-shadow: 1px 1px 0px DimGray;
  box-shadow: 0px 0px 15px DimGray;
}

#angiclock a {
  color: MediumOrchid;
  text-decoration: none;
  font-size: 18px;
}

#angiclock a:hover {
  color: DimGray;
}
</style>

The JavaScript

Place into the <HEAD> </HEAD> of your document

<script>
const month = ["Jan.", "Feb.", "Mar.", "Apr.", "May", "June", "July", "Aug.", "Sept.", "Oct.", "Nov.", "Dec."];
const d = new Date();
let name = month[d.getMonth()];
let day = d.getDate();
let year = d.getFullYear();
document.getElementById("mon").innerHTML = name + " " + +day + ", " + year;

var timer = setInterval(showclock, 100);

function showclock() {
  var d = new Date();
  var time = d.toLocaleTimeString();
  document.getElementById('result').innerHTML = time;
}
var timer = setInterval(showclock, 100);
</script>