I've managed to save the runners at the local Storage, however, I want, on another page, to compare the athletes over time and display a leaderboard with the competitors' name and time, how can I do that? Here's the code you've done so far:
window.addEventListener("load", showCorredores(JSON.parse(localStorage.getItem('Corredores'))), false)
document.getElementById("curriculo").addEventListener("submit", enviar,
false)
function enviar(e) {
var alt = document.getElementById('enviar').alt
if (alt != undefined) {
updateCorredor()
} else {
addCorredor()
window.location.reload()
}
e.preventDefault()
}
function addCorredor(e) {
// Obtém valores do formulário
var nomeCorredor = document.getElementById("nome").value
var idadeCorredor = document.getElementById("idade").value
var tempoCorredor = document.getElementById("tempo").value
var raiaCorredor = document.getElementById("raia").value
// Define um objeto com os valores obtidos do formulário
var corredor = {
id: gerarIDCorredor(), // Adicionar
nome: nomeCorredor,
idade: idadeCorredor,
tempo: tempoCorredor,
raia: raiaCorredor
}
// Testa se a chave 'corredor' é nula (vazia)
if (localStorage.getItem('Corredores') === null) {
// Inicia o vetor (array)
var corredores = []
// Adiciona objeto no array
corredores.push(corredor)
// Armazena no localStorage - JSON.stringify = converte o JavaScript em
nota JSON
localStorage.setItem('Corredores', JSON.stringify(corredores))
} else {
// Define uma nova variável e coloca o conteúdo de localStorage nela -
JSON.parse = converte a notação JSON em JavaScript
var corredores = JSON.parse(localStorage.getItem('Corredores'))
// Adiciona objeto no array
corredores.push(corredor)
// Re-armazena no localStorage - JSON.stringify = converte o JavaScript
em nota JSON
localStorage.setItem('Corredores', JSON.stringify(corredores))
}
showCorredores(corredores)
e.preventDefault()
}
function gerarIDCorredor() {
var id = JSON.parse(localStorage.getItem('idCorredor'))
if (id === null) {
localStorage.setItem('idCorredor', 1)
} else {
id += 1
localStorage.setItem('idCorredor', id)
}
return JSON.parse(localStorage.getItem('idCorredor'))
}
function setCorredor(i) {
var corredores = JSON.parse(localStorage.getItem('Corredores'))
document.getElementById('nome').value = corredores[i].nome
document.getElementById('idade').value = corredores[i].idade
document.getElementById('tempo').value = corredores[i].tempo
document.getElementById('raia').value = corredores[i].raia
document.getElementById('enviar').alt = i
}
function updateCorredor(posicao) {
var corredores = JSON.parse(localStorage.getItem('Corredor'))
var posicao = document.getElementById('enviar').alt
corredores[posicao].nome = document.getElementById('nome').value
corredores[posicao].idade = document.getElementById('idade').value
corredores[posicao].tempo = document.getElementById('tempo').value
corredores[posicao].raia = document.getElementById('raia').value
localStorage.setItem('Corredores', JSON.stringify(corredores))
document.getElementById('enviar').alt = ""
showCorredores(corredores)
}
function deleteCorredor(i) {
var corredores = JSON.parse(localStorage.getItem('Corredores'))
// O método splice retira itens do Array, o argumento (i) é a posição em
// que o item está no array e o segundo argumento indica a quantidade de
itens
// que serão removidos.
corredores.splice(i, 1)
localStorage.setItem('Corredores', JSON.stringify(corredores))
showCorredores(corredores)
}
function showCorredores(corredores) {
// Pegar id (elemento HTML) de onde quero mostrar os corredores: "mostrar"
var listarCorredores = document.getElementById('mostrar')
// Construir a saída
listarCorredores.innerHTML = ''
if (corredores === null || corredores.length === 0) {
listarCorredores.innerHTML = '<h3>Nenhum registro localizado</h3>'
} else {
for (var i = 0; i < corredores.length; i++) {
listarCorredores.innerHTML += '<h4>' + corredores[i].nome + ' ' +
corredores[i].idade + ' ' + corredores[i].tempo + ' ' +
corredores[i].raia + '</h4>' +
'<button onclick="deleteCorredor(' + i + ')">Excluir</button>' //
Adicionar
+
'<button onclick="setCorredor(' + i + ')">Editar</button>' //
Adicionar
}
}
}