Two buttons counting and storing data in local storage, just trying to make it store as obj in local storage, but I'm a newbie and couldn't make it work can some1 explain how to do it from what I've got? thank you! don't know if I can just add this here or need to do it from scratch?
const wellbtn = document.querySelector('.wellbtn');
const unwellbtn = document.querySelector('.unwellbtn');
const moodwell = document.querySelector('.moodwell')
const moodunwell = document.querySelector('.moodunwell')
let wellcounter = localStorage.getItem('wellcounter');
let unwellcounter = localStorage.getItem('unwellcounter');
moodwell.innerText = `You felt well ${wellcounter} times`;
moodunwell.innerText = `You felt unwell ${unwellcounter} times`;
const addWellCounter = (() => {
moodwell.innerText = `You felt well ${++wellcounter} times`
localStorage.setItem('wellcounter', wellcounter.toString());
})
const addUnwellCounter = (() => {
moodunwell.innerText = `You felt unwell ${++unwellcounter} times`
localStorage.setItem('unwellcounter', unwellcounter.toString());
})
wellbtn.addEventListener('click', () => {
addWellCounter();
})
unwellbtn.addEventListener('click', () => {
addUnwellCounter();
});<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My title</title>
</head>
<body>
<h1>How do you feel ?</h1>
<button class="wellbtn">Well</button>
<button class="unwellbtn">Unwell</button>
<p class="moodwell">You felt well 0 times</p>
<p class="moodunwell">You felt unwell 0 times</p>
</body>
</html>