In my current setup, I have a list of words that users can interact with by clicking on a heart icon to store the word in localStorage. Once the first word is added, a red button at the top of the page becomes active, which will eventually link to the favorites page.
For those interested, here is the working code:
https://codepen.io/20201015/pen/LYZGKNv
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container" style="margin:20px;">
<a class="btn btn-sm btn-danger" id="success" href="#" disabled="disabled" style="pointer-events: none;"><i class="fa fa-heart"></i> View</a>
<div class="scrollbox list" style="background:#000;">
<ul class="list-unstyled">
<li id="fairunmuzzled">fairunmuzzled</li>
<li id="illusionpat">illusionpat</li>
<li id="impureblossom">impureblossom</li>
<li id="arousedsolemn">arousedsolemn</li>
<li id="bamboopeeves">bamboopeeves</li>
<li id="mudrubbish">mudrubbish</li>
<li id="rickshawobject">rickshawobject</li>
</ul>
</div>
<a href="#" onclick="localStorage.removeItem('jpxun');" class="btn btn-warning"><i class="fa fa-trash"></i> Delete Local Storage</a>
<p>If delete all, refresh page to see that the red button is inactive again.</p>
</div>
Javascript
var ct = 0;
var jpxun = JSON.parse(localStorage.getItem('jpxun')) || [];
// Checking if usernames local storage item is populated
var MyUsernames = JSON.parse(localStorage.getItem('jpxun'));
// If it's populated, make the red button active
if (MyUsernames) {
var elem = document.getElementById('success');
if (elem) {
elem.removeAttribute('disabled');
elem.removeAttribute('style');
}
}
// Counting elements
if (jpxun) { // Counting elements
for (var i = 0; i < jpxun.length; i++) {
ct ++;
}
} else {
ct = 0;
}
var lists = document.querySelectorAll('.list');
if (lists.length) {
lists.forEach(list => {
list.addEventListener('click', e => {
if (!e.target.id) return;
var id = e.target.id;
var item = e.target;
var temp = ct++;
var newCt = "" + temp + ""; // ID must be wrapped in speech marks for deletion functionality to work
var findme = jpxun.findIndex(e => e.name == id);
// Adding word to localStorage
if (findme == -1) {
jpxun.push({ id: newCt, name: id });
item.className = 'fav';
var elem = document.getElementById('success');
elem.removeAttribute('disabled');
elem.removeAttribute('style');
// Removing word from localStorage
} else {
jpxun.splice(findme, 1)
item.className = 'nofav';
}
localStorage.setItem('jpxun', JSON.stringify(jpxun));
});
});
}
The code works fine despite any errors or bad practices present within it.
I am currently trying to figure out how to disable the red button in the JavaScript section when localStorage is empty:
// Removing word from localStorage
} else {
jpxun.splice(findme, 1)
item.className = 'nofav';
}
I understand that in order to delete the entire localStorage and deactivate the red button if no items are left, I need to:
- Count the remaining elements after deleting a word.
- If there are no items left, delete the entire localStorage using
and change the CSS of the red button to make it inactive.localStorage.removeItem('jpxun');
I've attempted various solutions without success, so I would appreciate any advice or suggestions from the community on how to achieve this goal.