JSFiddle - React, Tailwind, and code Playground

HTML

<html>

<head>
  <meta charset="UTF-8">
  <title>Quiz</title>
</head>

<body>
  <div class="grid">
    <div id="quiz">
      <h1>Quiz</h1>
      ditt smeknamn:
     <b> <div id="displayedName">
      
      </div></b>
    <p>
    Du har <b><span id="countdowntimer">20 </span></b> sekunder på dig att svara </p>
    <form>
 
  <input type="text" id="nameInput" placeholder="Smeknamn"><br>
  <input type="button" id="nameButton" value="Välj">
</form>
      <hr id="hr-top">

      <p id="question"></p>

      <div class="buttons">
        <button id="btn0"><span id="choice0"></span></button>
        <button id="btn1"><span id="choice1"></span></button>
        <button id="btn2"><span id="choice2"></span></button>
        <button id="btn3"><span id="choice3"></span></button>
      </div>

      <hr id="hr-bottom">

      <footer>
        <p id="progress">Fotbollquiz</p>
      </footer>
    </div>
  </div>
<script src="build.js"></script>
</body>
</html>

CSS

body {
  background-color: #eeeeee;
}

.grid {
  width: 600px;
  height: 500px;
  margin: 0 auto;
  background-color: #fff;
  padding: 10px 50px 50px 50px;
  border-radius: 50px;
  border: 2px solid #cbcbcb;
  box-shadow: 10px 15px 5px #cbcbcb;
}

.grid h1 {
  font-familyh: sans-serif;
  background-color: #57636a;
  font-size: 60px;
  text-align: center;
  color: #fff;
  padding: 2px 0px;
  border-radius: 50px;
}

.grid #question {
  font-family: sans-serif;
  font-size: 20px;
  color: #5a6772;
}

.buttons {
  margin-top: 30px;
}

#btn0, #btn1, #btn2, #btn3 {
  background-color: #;
  width: 250px;
  font-size: 20px;
  color: #fff;
  border: 1px solid #1d3c6a;
  border-radius: 50px;
  margin: 10px 40px 10px 0px;
  padding: 10px 10px;
}

#hr-top {
  margin-top: 20px;
}

#hr-bottom {
  margin-top: 60px;
}

#progress {
  color: #2b2b2b;
  font-size: 10px;
}

#btn0:hover, #btn1:hover, #btn2:hover, #btn3:hover {
  cursor: pointer;
  background-color: #57636e;
}

#btn0:focus, #btn1:focus, #btn2:focus, #btn3:focus {
  outline: 0;
}

JavaScript

//Question.js

function Question(text, choices, answer) {
  this.text = text;
  this.choices = choices;
  this.answer = answer;
}

Question.prototype.correctAnswer = function(choice) {
  return choice === this.answer;
};

var timeleft = 20;
var downloadTimer;
    
function intervalTick() {
	timeleft--;
  document.getElementById("countdowntimer").textContent = timeleft;
if(timeleft <= 0) {
clearInterval(downloadTimer);
alert( "Tiden tog slut! Du förlorade!" );
}           
}
var name = ''; // Empty string
var input = document.getElementById('nameInput');
var nameBtn = document.getElementById('nameButton');
var txt = document.querySelector('p');

nameBtn.addEventListener('click', updateBtn);

function updateBtn () {
 name = input.value
 document.getElementById("displayedName").innerHTML = name
 input.value = '' // clear input field
 downloadTimer = setInterval(intervalTick,1000);
}


function Quiz(questions) {
  this.score = 0;
  this.questions = questions;
  this.questionIndex = 0;
}

Quiz.prototype.getQuestionIndex = function() {
  return this.questions[this.questionIndex];
};

Quiz.prototype.isEnded = function() {
  return this.questions.length === this.questionIndex;
};

Quiz.prototype.guess = function(answer) {
  if (this.getQuestionIndex().correctAnswer(answer)) {
    this.score++;
  }

  this.questionIndex++;
};


function populate() {
  if (quiz.isEnded()) {
    showScores();
  } else {
    //show question
    let element = document.getElementById("question");
    element.innerHTML = quiz.getQuestionIndex().text;

    // show choices
    let choices = quiz.getQuestionIndex().choices;
    for (var i = 0; i < choices.length; i++) {
      let element = document.getElementById("choice" + i);
      element.innerHTML = choices[i];
      guess("btn" + i, choices[i]);
    }

    showProgress();
  }
}

function guess(id, guess) {
  let button = document.getElementById(id);
  button.onclick = function() {
    quiz.guess(guess);
    clearInterval(downloadTimer);
   ...