ミ★ ANGELiCA'S SiTE ★彡

Clock Script

This is how you can make rainbow text ~easily~

Example

The HTML

This going into the BODY of your webpage (in between <body> and </body> tags)

<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

This going into the HEAD of your webpage (in between <head> and </head> tags)

@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;
}

The JavaScript

This going into the BODY or HEAD of your webpage (as long as it's in between <script> and </script> tags)

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);