cesarherr / to_do_list Goto Github PK

9.0 2.0 0.0 374 KB

"To-do list" is a tool for organizing your day. It allows you to create a simple list of tasks and mark them as complete when done. This particular To-do list is built using modern technologies like ES6 and Webpack. It goes beyond just task management by incorporating functions testing with Jest, making it a comprehensive and robust project.

Home Page: https://cesarherr.github.io/To_do_List/dist/

License: MIT License

JavaScript 92.12% CSS 7.88%

javascript jest-test webpack

to_do_list's People

Contributors

Stargazers

Watchers

to_do_list's Issues

Don't Repeat Yourself

To_do_List/modules/crud.js

Lines 8 to 9 in 042256f

    
           this.displayList(); 
        
           this.enterEvent();

This lines are unnecessary

To_do_List/modules/crud.js

Lines 58 to 72 in 042256f

    
           addRemoveBtnListeners() { 
        
             mainList.addEventListener('click', (event) => { 
        
               if (event.target.classList.contains('remove-btn')) { 
        
                 const index = event.target.dataset.listIndex; 
        
                 this.remove(index); 
        
               } 
        
             }); 
        
             mainList.addEventListener('click', (event) => { 
        
               if (event.target.classList.contains('fa-trash-can')) { 
        
                 const button = event.target.closest('.remove-btn'); 
        
                 button.click(); 
        
               } 
        
             }); 
        
           }

You can work just whit the image, and your code will be shorter.

Html best practice

To_do_List/src/index.html

Lines 9 to 24 in 042256f

    
           <body> 
        
               <div class="container">  
        
                   <div class="header"> 
        
                       <h1>Today´s To Do</h1> 
        
                       <i class="fa-solid fa-arrows-rotate fa-rotate-90"></i> 
        
                   </div> 
        
                   <label for="text" aria-labelledby="text"></label> 
        
                   <input class="add" type="text" name="text" placeholder="Add to your list..."> 
        
                   <ul class="tasks">   
        
                       <!-- To do list here --> 
        
                   </ul> 
        
                   <button class="clear">Clear all completed</button>        
        
               </div> 
        
           </body>

Use the appropriate tags for each element, you can use 'header' and 'section' over div's.

Avoid Unnecessary Variables

To_do_List/src/index.js

Lines 6 to 16 in 042256f

    
           const addToDo = document.querySelector('.add'); 
        
           document.addEventListener('keyup', (event) => { 
        
             const activity = document.querySelector('.add').value; 
        
             if (event.code === 'Enter') { 
        
               if (activity !== '') { 
        
                 toDoList.add(activity); 
        
                 toDoList.displayList(); 
        
                 addToDo.value = ''; 
        
               }

Don't create new variables if you don't plan to save values, you can try: document.querySelector('.add').value = ""

To_do_List/src/index.js

Lines 33 to 34 in 042256f

    
           const taskDescription = document.querySelectorAll('.taskElement'); 
        
           taskDescription[index].classList.toggle('line-through');

Same issue

cesarherr / to_do_list Goto Github PK

to_do_list's People

Contributors

Stargazers

Watchers

to_do_list's Issues

Don't Repeat Yourself

Html best practice

Avoid Unnecessary Variables

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent

	addRemoveBtnListeners() {
	mainList.addEventListener('click', (event) => {
	if (event.target.classList.contains('remove-btn')) {
	const index = event.target.dataset.listIndex;
	this.remove(index);
	}
	});

	mainList.addEventListener('click', (event) => {
	if (event.target.classList.contains('fa-trash-can')) {
	const button = event.target.closest('.remove-btn');
	button.click();
	}
	});
	}

	<body>
	<div class="container">
	<div class="header">
	<h1>Today´s To Do</h1>
	<i class="fa-solid fa-arrows-rotate fa-rotate-90"></i>
	</div>
	<label for="text" aria-labelledby="text"></label>
	<input class="add" type="text" name="text" placeholder="Add to your list...">
	<ul class="tasks">

	<!-- To do list here -->

	</ul>
	<button class="clear">Clear all completed</button>
	</div>
	</body>

	const addToDo = document.querySelector('.add');

	document.addEventListener('keyup', (event) => {
	const activity = document.querySelector('.add').value;

	if (event.code === 'Enter') {
	if (activity !== '') {
	toDoList.add(activity);
	toDoList.displayList();
	addToDo.value = '';
	}

	const taskDescription = document.querySelectorAll('.taskElement');
	taskDescription[index].classList.toggle('line-through');