<body>
  <h1>LED Number Display</h1>
  <div id="container">

    <div id="top-box"></div>
    <div id="bottom-box"></div>

  </div>

</body>
html {
  font-size: 62.5%;
  color: Navy;
  text-shadow: 1px 1px 2px #000;
  font-family: sans-serif;
}

@media (max-width: 75em) {
  html {
    font-size: 60%;
  }
}

@media (max-width: 61.25em) {
  html {
    font-size: 58%;
  }
}

@media (max-width: 28.75em) {
  html {
    font-size: 55%;
  }
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  padding: 3rem;
  background: DarkSeaGreen;
}

#container {
  margin-top: 3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 500px;
  height: 300px;
  background: #555;
  border: ridge 8px BurlyWood;
  border-radius: 30px;
  box-shadow: 0 0.6rem 0.6rem rgba(0, 0, 0, 0.33);
}

#top-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
  background: #555;
  border-left: 10px ridge transparent;
  border-right: 10px ridge transparent;
  border-top: 10px ridge transparent;
  border-bottom: 5px inset transparent;
  border-radius: 10px;
}

#bottom-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
  background: #555;
  border-left: 10px ridge transparent;
  border-right: 10px ridge transparent;
  border-top: 5px inset transparent;
  border-bottom: 10px ridge transparent;
  border-radius: 10px;
}
let topBox = document.querySelector("#top-box");

let bottomBox = document.querySelector("#bottom-box");

let on = "Snow";
let off = "transparent";

let zero = () => {
  topBox.style.borderTopColor = on;
  topBox.style.borderLeftColor = on;
  topBox.style.borderRightColor = on;
  topBox.style.borderBottomColor = off;

  bottomBox.style.borderTopColor = off;
  bottomBox.style.borderLeftColor = on;
  bottomBox.style.borderRightColor = on;
  bottomBox.style.borderBottomColor = on;
};

let one = () => {
  topBox.style.borderTopColor = off;
  topBox.style.borderLeftColor = off;
  topBox.style.borderRightColor = on;
  topBox.style.borderBottomColor = off;
  topBox.style.borderBottomColor = off;

  bottomBox.style.borderTopColor = off;
  bottomBox.style.borderLeftColor = off;
  bottomBox.style.borderRightColor = on;
  bottomBox.style.borderBottomColor = off;
};

let two = () => {
  topBox.style.borderTopColor = on;
  topBox.style.borderLeftColor = off;
  topBox.style.borderRightColor = on;
  topBox.style.borderBottomColor = on;

  bottomBox.style.borderTopColor = on;
  bottomBox.style.borderLeftColor = on;
  bottomBox.style.borderRightColor = off;
  bottomBox.style.borderBottomColor = on;
};

let three = () => {
  topBox.style.borderTopColor = on;
  topBox.style.borderLeftColor = off;
  topBox.style.borderRightColor = on;
  topBox.style.borderBottomColor = on;

  bottomBox.style.borderTopColor = on;
  bottomBox.style.borderLeftColor = off;
  bottomBox.style.borderRightColor = on;
  bottomBox.style.borderBottomColor = on;
};

let four = () => {
  topBox.style.borderTopColor = off;
  topBox.style.borderLeftColor = on;
  topBox.style.borderRightColor = on;
  topBox.style.borderBottomColor = on;

  bottomBox.style.borderTopColor = on;
  bottomBox.style.borderLeftColor = off;
  bottomBox.style.borderRightColor = on;
  bottomBox.style.borderBottomColor = off;
};

let five = () => {
  topBox.style.borderTopColor = on;
  topBox.style.borderLeftColor = on;
  topBox.style.borderRightColor = off;
  topBox.style.borderBottomColor = on;

  bottomBox.style.borderTopColor = on;
  bottomBox.style.borderLeftColor = off;
  bottomBox.style.borderRightColor = on;
  bottomBox.style.borderBottomColor = on;
};

let six = () => {
  topBox.style.borderTopColor = on;
  topBox.style.borderLeftColor = on;
  topBox.style.borderRightColor = off;
  topBox.style.borderBottomColor = on;

  bottomBox.style.borderTopColor = on;
  bottomBox.style.borderLeftColor = on;
  bottomBox.style.borderRightColor = on;
  bottomBox.style.borderBottomColor = on;
};

let seven = () => {
  topBox.style.borderTopColor = on;
  topBox.style.borderLeftColor = on;
  topBox.style.borderRightColor = on;
  topBox.style.borderBottomColor = off;

  bottomBox.style.borderTopColor = off;
  bottomBox.style.borderLeftColor = off;
  bottomBox.style.borderRightColor = on;
  bottomBox.style.borderBottomColor = off;
};

let eight = () => {
  topBox.style.borderTopColor = on;
  topBox.style.borderLeftColor = on;
  topBox.style.borderRightColor = on;
  topBox.style.borderBottomColor = on;

  bottomBox.style.borderTopColor = on;
  bottomBox.style.borderLeftColor = on;
  bottomBox.style.borderRightColor = on;
  bottomBox.style.borderBottomColor = on;
};

let nine = () => {
  topBox.style.borderTopColor = on;
  topBox.style.borderLeftColor = on;
  topBox.style.borderRightColor = on;
  topBox.style.borderBottomColor = on;

  bottomBox.style.borderTopColor = on;
  bottomBox.style.borderLeftColor = off;
  bottomBox.style.borderRightColor = on;
  bottomBox.style.borderBottomColor = on;
};

function playNumbers() {
  setTimeout(zero, 0);
  setTimeout(one, 1000);
  setTimeout(two, 2000);
  setTimeout(three, 3000);
  setTimeout(four, 4000);
  setTimeout(five, 5000);
  setTimeout(six, 6000);
  setTimeout(seven, 7000);
  setTimeout(eight, 8000);
  setTimeout(nine, 9000);
}

playNumbers();
setInterval(playNumbers, 10000);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.