JavaScript Lesson - Todo list

Developer
Mario Duarte
Size
6,014 Kb
Views
40,480
  1. JavaScript Lesson - Todo list Previews
  2. JavaScript Lesson - Todo list HTML Codes
  3. JavaScript Lesson - Todo list CSS Codes
  4. JavaScript Lesson - Todo list JS Codes

How do I make an javascript lesson - todo list?

This pen was used in a JavaScript lesson and can be used by anyone learning JS. What is a javascript lesson - todo list? How do you make a javascript lesson - todo list? This script and codes were developed by Mario Duarte on 04 August 2022, Thursday.

JavaScript Lesson - Todo list Previews
IQ Test

JavaScript Lesson - Todo list - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>JavaScript Lesson - Todo list</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container">	<div class="inner js-todo-list">	<div class="js-list">	<div class="todo js-todo">This is a todo item, with some text, hover me to marke me as done or remove me! <span class="done js-compleated"><i class="fa fa-check" aria-hidden="true"></i></span><span class="remove js-remove"><i class="fa fa-trash" aria-hidden="true"></i></span></div>	<div class="todo js-todo done">This is a todo that has been marked has done. <span class="done js-compleated"><i class="fa fa-check" aria-hidden="true"></i></span><span class="remove js-remove"><i class="fa fa-trash" aria-hidden="true"></i></span></div>	</div>	<textarea name="todo" id="todoText" cols="30" rows="5" placeholder="I need todo..." required></textarea>	<button type="submit" id="submitTodo" class="todo-btn">Add todo</button>	<div id="error" class="error"></div>	</div>
</div> <script src="js/index.js"></script>
</body>
</html>

JavaScript Lesson - Todo list - Script Codes CSS Codes

body { background-color: #eee; height: 100%; font-family: sans-serif;
}
.container { width: 100%; position: relative; margin: 100px 0;
}
.container .inner { width: 100%; max-width: 650px; min-height: 200px; margin: 0 auto; background-color: #fff; border-top: 5px; padding: 20px; box-sizing: border-box; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
}
.container .inner textarea { width: 100%; background-image: none; padding: 10px; box-sizing: border-box; background-color: #f2f2f2; border: none; border-top-left-radius: 3px; border-top-right-radius: 3px; margin: 20px 0 0 0;
}
.container .inner textarea:focus { outline: none;
}
.container .inner .todo-btn { width: 100%; background-image: none; padding: 15px; box-sizing: border-box; background-color: #2980b9; border: none; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; margin: -4px 0 0 0; color: white; text-transform: uppercase; cursor: pointer;
}
.container .inner .todo-btn:focus { outline: none;
}
.container .inner .todo-btn:hover { background-color: #409ad5;
}
.container .inner .error { width: 100%; padding: 10px; box-sizing: border-box; margin-top: 10px; background-color: #e74c3c; border-radius: 3px; color: white; opacity: 0; text-align: center; -webkit-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out;
}
.container .inner .error.open { opacity: 1;
}
div.todo { width: 100%; padding: 10px 60px 10px 10px; margin: 10px 0; box-sizing: border-box; border-radius: 3px; position: relative; overflow: hidden; background-color: #f2f2f2; color: #999999; -webkit-transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out;
}
div.todo.red { background-color: #f5b4ae;
}
div.todo.green { background-color: #75e0a2;
}
div.todo.blue { background-color: #7fbbe3;
}
div.todo.done { text-decoration: line-through; background-color: #75e0a2; color: white;
}
div.todo .done { width: 30px; height: 100%; position: absolute; top: 0; right: 30px; background-color: #27ae60; color: white; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-transform: translateX(60px); transform: translateX(60px); opacity: 0; -webkit-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out;
}
div.todo .done:hover { background-color: #36d278;
}
div.todo .remove { width: 30px; height: 100%; position: absolute; top: 0; right: 0; background-color: #e74c3c; color: white; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-transform: translateX(60px); transform: translateX(60px); opacity: 0; -webkit-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out;
}
div.todo .remove:hover { background-color: #ed7669;
}
div.todo:hover .done, div.todo:hover .remove { -webkit-transform: translateX(0px); transform: translateX(0px); opacity: 1;
}

JavaScript Lesson - Todo list - Script Codes JS Codes

'use strict';
/* \ | _ \ _) |\/ | | | -_) (_-< | _` | \ (_-< _| _| ___/ \___| ___/ _| \__, | _| _| ___/ ____/
*/
// ===========================================
// This pen was used in a JavaScript lesson
// and can be used by anyone learning JS
// ===========================================
// Creating neccessary vars
var listContainer = document.getElementsByClassName('js-list')[0];
var todoElm = document.getElementsByClassName('todo');
var todoElmLength = todoElm.length;
var todoTextArea = document.getElementById('todoText');
var todoSubmit = document.getElementById('submitTodo');
var submitError = document.getElementById('error');
//add eventlistner to the submit btn
todoSubmit.addEventListener("click", function () {	//get new todo	var todoNewContent = todoTextArea.value;	//check if todo is empty	if (todoNewContent === "") {	//if empty give error	submitError.innerHTML = 'Error...you must type something todo!';	submitError.classList = 'error open';	} else {	//remove error if present	if (submitError.classList.contains('open') === true) {	submitError.classList.toggle('open');	submitError.innerHTML = '';	}	//else add new todo to the list	listContainer.innerHTML += '<div class="todo js-todo">' + todoNewContent + '<span class="done js-compleated"><i class="fa fa-check" aria-hidden="true"></i></span><span class="remove js-remove"><i class="fa fa-trash" aria-hidden="true"></i></span></div>';	updateListener();	updateVars();	}
});
//function to update vars
function updateVars() {	todoElm = document.getElementsByClassName('todo');	todoDone = document.getElementsByClassName('js-compleated');	todoRemove = document.getElementsByClassName('js-remove');	todoElmLength = todoElm.length;
}
//loop throught the list items and add the eventlistener to the done and remove btn
function updateListener() {	//get all elements with class js-compleated	var todoDone = document.querySelectorAll('.todo .js-compleated');	for (var i = 0; todoDone.length > i; i++) {	//add event listener to each todoDone element	todoDone[i].addEventListener("click", function () {	//on click tick toogle class done	this.parentNode.classList.toggle('done');	});	}	//get all elements with class js-remove	var todoRemove = document.querySelectorAll('.todo .js-remove');	for (var i = 0; todoRemove.length > i; i++) {	//add event listener to each todoRemove element	todoRemove[i].addEventListener("click", function () {	//on click bin icon remove todo from the list and then update the vars	this.parentNode.remove();	updateVars();	});	}
}
//init updateListener on load
updateListener();
// ===========================================
// (╭☞ ͡ ͡°͜ ʖ ͡ ͡°)╭☞
// Thanks for stoping by, don't forget to like
// and follow to stay up to date with new
// doodles and cools stuff
// Twitter: https://twitter.com/MDesignsuk
// (づ｡◕‿‿◕｡)づ
// ===========================================
JavaScript Lesson - Todo list - Script Codes
JavaScript Lesson - Todo list - Script Codes
Home Page Home
Developer Mario Duarte
Username MarioDesigns
Uploaded August 04, 2022
Rating 3
Size 6,014 Kb
Views 40,480
Do you need developer help for JavaScript Lesson - Todo list?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Mario Duarte (MarioDesigns) Script Codes
Name
Floating Particles
Carbon Atom Animation
Colour Game
Hero Animated Canvas Background
3D Pyramid Animation
Popular Pens with ReactJS
CodePen Logo Animation
Menu Animation - push in
Interactive 3D Video Thumbnail
The Dark - CSS animated background
Create amazing love letters with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!