How to make leaderboards saved in LocalStorage, and accessible even after reloading the page. Only the javascript function is needed! //leaderboard selector const backMenBtn = ldrDiv.querySelector('button#backMenBtn') const leaderEasy= ldrDiv.querySelector('#leaderboard-content1'); const leaderHard= ldrDiv.querySelector('#leaderboard-content2'); let leaderboardEasy = [] let leaderboardHard = [] function endGame() { stopTimer(); menuDiv.style.display='none' gameDiv.style.display='none' rulesDiv.style.display='none' ldrDiv.style.display='none' res.style.display='block' constresults=document.querySelector('#results') results.innerHTML="Game Over! "+nameInput.value+" - "+time.innerHTML letdiff=getSelectedDifficulty() if (diff==='easy') { leaderboardEasy.push([nameInput.value, time.innerHTML]) } else if (diff === 'hard') { leaderboardHard.push([nameInput.value, time.innerHTML]) } leaderEasy.innerHTML=''; leaderHard.innerHTML=''; leaderboardEasy.forEach(([name, time]) => { constli=document.createElement('li'); li.innerHTML=`<a>${name} - ${time}</a>`; leaderEasy.appendChild(li); }); leaderboardHard.forEach(([name, time]) => { constli=document.createElement('li'); li.innerHTML=`<a>${name} - ${time}</a>`; leaderHard.appendChild(li); }); }
How to make leaderboards saved in LocalStorage, and accessible even after reloading the page. Only the javascript function is needed! //leaderboard selector const backMenBtn = ldrDiv.querySelector('button#backMenBtn') const leaderEasy= ldrDiv.querySelector('#leaderboard-content1'); const leaderHard= ldrDiv.querySelector('#leaderboard-content2'); let leaderboardEasy = [] let leaderboardHard = [] function endGame() { stopTimer(); menuDiv.style.display='none' gameDiv.style.display='none' rulesDiv.style.display='none' ldrDiv.style.display='none' res.style.display='block' constresults=document.querySelector('#results') results.innerHTML="Game Over! "+nameInput.value+" - "+time.innerHTML letdiff=getSelectedDifficulty() if (diff==='easy') { leaderboardEasy.push([nameInput.value, time.innerHTML]) } else if (diff === 'hard') { leaderboardHard.push([nameInput.value, time.innerHTML]) } leaderEasy.innerHTML=''; leaderHard.innerHTML=''; leaderboardEasy.forEach(([name, time]) => { constli=document.createElement('li'); li.innerHTML=`<a>${name} - ${time}</a>`; leaderEasy.appendChild(li); }); leaderboardHard.forEach(([name, time]) => { constli=document.createElement('li'); li.innerHTML=`<a>${name} - ${time}</a>`; leaderHard.appendChild(li); }); }
New Perspectives on HTML5, CSS3, and JavaScript
6th Edition
ISBN:9781305503922
Author:Patrick M. Carey
Publisher:Patrick M. Carey
Chapter6: Working With Tables And Columns: Creating A Program Schedule For A Radio Station
Section: Chapter Questions
Problem 8CP2
Question
How to make leaderboards saved in LocalStorage, and accessible even after reloading the page. Only the javascript function is needed!
//leaderboard selector
const backMenBtn = ldrDiv.querySelector('button#backMenBtn')
const leaderEasy= ldrDiv.querySelector('#leaderboard-content1');
const leaderHard= ldrDiv.querySelector('#leaderboard-content2');
let leaderboardEasy = []
let leaderboardHard = []
function endGame() {
stopTimer();
menuDiv.style.display='none'
gameDiv.style.display='none'
rulesDiv.style.display='none'
ldrDiv.style.display='none'
res.style.display='block'
constresults=document.querySelector('#results')
results.innerHTML="Game Over! "+nameInput.value+" - "+time.innerHTML
letdiff=getSelectedDifficulty()
if (diff==='easy') {
leaderboardEasy.push([nameInput.value, time.innerHTML])
} else if (diff === 'hard') {
leaderboardHard.push([nameInput.value, time.innerHTML])
}
leaderEasy.innerHTML='';
leaderHard.innerHTML='';
leaderboardEasy.forEach(([name, time]) => {
constli=document.createElement('li');
li.innerHTML=`<a>${name} - ${time}</a>`;
leaderEasy.appendChild(li);
});
leaderboardHard.forEach(([name, time]) => {
constli=document.createElement('li');
li.innerHTML=`<a>${name} - ${time}</a>`;
leaderHard.appendChild(li);
});
}
Expert Solution
This question has been solved!
Explore an expertly crafted, step-by-step solution for a thorough understanding of key concepts.
Step by step
Solved in 2 steps
Knowledge Booster
Learn more about
Need a deep-dive on the concept behind this application? Look no further. Learn more about this topic, computer-science and related others by exploring similar questions and additional content below.Recommended textbooks for you
New Perspectives on HTML5, CSS3, and JavaScript
Computer Science
ISBN:
9781305503922
Author:
Patrick M. Carey
Publisher:
Cengage Learning
EBK JAVA PROGRAMMING
Computer Science
ISBN:
9781337671385
Author:
FARRELL
Publisher:
CENGAGE LEARNING - CONSIGNMENT
Programming with Microsoft Visual Basic 2017
Computer Science
ISBN:
9781337102124
Author:
Diane Zak
Publisher:
Cengage Learning
New Perspectives on HTML5, CSS3, and JavaScript
Computer Science
ISBN:
9781305503922
Author:
Patrick M. Carey
Publisher:
Cengage Learning
EBK JAVA PROGRAMMING
Computer Science
ISBN:
9781337671385
Author:
FARRELL
Publisher:
CENGAGE LEARNING - CONSIGNMENT
Programming with Microsoft Visual Basic 2017
Computer Science
ISBN:
9781337102124
Author:
Diane Zak
Publisher:
Cengage Learning
Np Ms Office 365/Excel 2016 I Ntermed
Computer Science
ISBN:
9781337508841
Author:
Carey
Publisher:
Cengage
COMPREHENSIVE MICROSOFT OFFICE 365 EXCE
Computer Science
ISBN:
9780357392676
Author:
FREUND, Steven
Publisher:
CENGAGE L
Microsoft Visual C#
Computer Science
ISBN:
9781337102100
Author:
Joyce, Farrell.
Publisher:
Cengage Learning,