todo-list-vanilla-js
todo-list-vanilla-js copied to clipboard
expalmer
No New Pages
When you click "Active" or "Completed" it reloads the pages. Just hiding and showing the elements would be easier.
Hi! So I've forked the code and as I'm looking at it realizing I'm not confident enough in the programming style used to be able to implement this feature. I'd love to be able to help out, but at this point I've tried a few things and find myself breaking the entire app in the process. My skill level is just not quite there yet! However, I'll keep my fork open and come back to it if I feel I'm ready to solve this issue. Sorry for the letdown, but I have a feeling anything I come up with will be written badly and take a long time on my part. Great project you have here, though!
Nice, take your time. I'll be waiting your PR, if do you need some help let me know.
Yeah. So basically what I'm trying to do is when the active or completed filters are clicked instead of taking the user to a new page, just display: none the elements that are not under that filter. I was attempting to change the App.fn.onFilter function around line 162 in app.js to do this instead of change and reload the page. The basic concept was to getQuerySelector or getElementsByClassName the filter buttons, then addEventListener them and run a function that would loop through the list of todo items, and add display: none to the items not matching the filter. However, when I go to run it in the browser, the app doesn't let the user create new list items.
As I said before, I think the problem is that I'm just not comfortable enough with the syntax surrounding the rest of the project. Anyway, here's the code I've replaced the App.fn.onFilter function with:
//
//
// Working on this function
//
//
App.fn.onFilter = function() {
let listItems = document.getElementsByClassName('list-item');
const completedButton = document.getElementById('completed-button');
const activeButton = document.getElementById('active-button');
// Hides all un-completed (active) todo items
completedButton.addEventListener('click', function() {
for (let i=0; i<listItems.length; i++) {
if (listItems[i].className == 'active') {
listItems[i].display = 'none';
}
});
// Hides all non-active (completed) todo items
activeButton.addEventListener('click', function() {
for (let i=0; i<listItems.length; i++) {
if (listItems[i].className == 'completed') {
listItems[i].display = 'none';
}
console.log(listItems[i]);
});
};