JSFiddle - React, Tailwind, and code Playground

HTML

<div>
  <input type="text" id="inputName" placeholder="Namn">  
  <input type="text" id="inputTime" placeholder="Tid">  
  <button id="buttonAddScore">Lägg till</button>
</div>

<ul id="output"></ul>

JavaScript

(function () {
	var highscore = [];
  var buttonAddScore = document.querySelector('#buttonAddScore');
  var output = document.querySelector('#output');
  var inputName = document.querySelector('#inputName');
  var inputTime = document.querySelector('#inputTime');
  
  function addScore(_name, _time) {
    var score = {
      name: _name,
      time: _time
    };
    
    highscore.push(score);
    
    localStorage.setItem('highscore', JSON.stringify(highscore));
  }

	function listHighScore() {    
    var listItems = [];
    
    highscore = JSON.parse(localStorage.getItem('highscore')) || [];
    
    highscore.sort(function (a, b) {
    	return a.time - b.time;
    });
    
    for (var i = 0; i < highscore.length; i++) {
      var name = highscore[i].name;
      var time = highscore[i].time;
    	listItems.push('<li>' + name +  ' klarade quizet på ' + time + ' sekunder.</li>');
    }
    
    output.innerHTML = listItems.join('');
  }

	function resetForm() {
    inputName.value = '';
    inputTime.value = '';
  }

	buttonAddScore.addEventListener('click', function (e) {
  	if (inputName.value.trim() === '' || inputTime.value.trim() === '') {
    	alert('Name or score is missing');
      return;
    }
    
    addScore(inputName.value, inputTime.value);
    resetForm();
    listHighScore();
  });
  
  listHighScore();
})();