Starwars Trivia Clock.

index.html

<div class="main">
  <h1 id="title"> Star Clock Trivia</h1>
  <h1 id="clock"></h1>
  <div class='info'>
    <h2 id="trivia"><span id="name"></span><span id="eyes"></span></h2>
  </div>
</div>

script.js

function update() {
  var date = new Date();
  document.getElementById("clock").innerHTML = date.toLocaleTimeString();
}
setInterval(update, 1000);

function trivia() {
  let rand = Math.floor(Math.random() * 100 + 1);
  axios
    .get("https://swapi.dev/api/people/" + rand + "/")
    .then(res => updateInfo(res.data))
    .catch(error => console.log(error));
}
setInterval(trivia, 3000);

function updateInfo(data) {
  let name = document.getElementById("name");
  let eyes = document.getElementById("eyes");

  let eye_color = data.eye_color;
  let str = data.name + " has ";

  eyes.style.color = eye_color;
  eyes.innerHTML = eye_color + " eyes";

  name.innerHTML = str;
}

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.min.js"></script>

starwars-trivia-clock.markdown

Starwars Trivia Clock.

A Pen by Samuel Nittala on CodePen.

License.

style.css

@import url("https://fonts.googleapis.com/css?family=Russo+One&display=swap");

body {
  background-color: #f5425a;
}
.info {
  padding: 10x;
  margin-left: 80px;
  margin-top: 50px;
  color: white;
  font-size: 25px;
  font-family: "Russo One", sans-serif;
}
#title {
  text-align: center;
  margin-top: 100px;
  font-size: 70px;
  color: orange;
  font-family: "Russo One", sans-serif;
}
#clock {
  font-family: "Russo One", sans-serif;
  text-align: center;
  font-size: 50px;
}