365JS - Todolist

Developer
Kévin Barfleur
Size
4,506 Kb
Views
2,024
  1. 365JS - Todolist Previews
  2. 365JS - Todolist HTML Codes
  3. 365JS - Todolist CSS Codes
  4. 365JS - Todolist JS Codes

How do I make an 365js - todolist?

What is a 365js - todolist? How do you make a 365js - todolist? This script and codes were developed by Kévin Barfleur on 30 January 2023, Monday.

365JS - Todolist Previews
IQ Test

365JS - Todolist - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>365JS - Todolist</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container">	<h1 class="title">Todolist</h1>	<form>	<input type="text" placeholder="add a task" />	</form>	<div class="container-task">	</div>
</div> <script src="js/index.js"></script>
</body>
</html>

365JS - Todolist - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Josefin+Sans);
@import url(https://fonts.googleapis.com/css?family=Anton);
* { padding: 0; margin: 0; font-family: 'Josefin Sans', sans-serif; outline: none;
}
.title { font-family: 'Anton', sans-serif; color: transparent; letter-spacing: 20px; font-size: 3em; text-align: center; padding: 50px; text-shadow: 1px 1px 0px black, 15px 0px 5px rgba(255, 132, 132, 0.5), -15px 0px 5px rgba(117, 117, 255, 0.5);
}
.subtitle { text-align: center;
}
form { width: 100vw; text-align: center; margin: 5% auto;
}
form input { text-align: center; width: 100px; height: 20px; border: none; border-bottom: 1px solid rgba(255, 132, 132, 0.5); transition: .3s;
}
form input:focus { border-bottom: 2px solid rgba(255, 132, 132, 0.5); transition: .3s; transform: scale(1.1); width: 200px;
}
.container-task { width: 50vw; height: 50vh; margin: 10% auto;
}
.container-task .task { width: 100%; padding: 5px; text-align: center; position: relative; border-radius: 15px; transition: all .5s;
}
.container-task .task.check { background-color: rgba(211, 255, 206, 0.5); text-decoration: line-through;
}
.container-task .task .done { opacity: 0; position: absolute; left: 7px; top: 0px; width: 12px; height: 12px; font-size: 1.2em; border: none; background-color: transparent; color: #7575ff; transform: translateX(50px); transition: all .5s;
}
.container-task .task .delete { opacity: 0; position: absolute; right: 7px; top: 0px; width: 12px; height: 12px; font-size: 1.2em; border: none; background-color: transparent; color: #ff8484; transform: translateX(-50px); transition: all .5s;
}
.container-task .task button:hover { cursor: pointer;
}
.container-task .task:hover { cursor: pointer; transform: scale(1.2); transition: all .5s;
}
.container-task .task:hover button { opacity: 1; transform: translateX(0); transition: all .5s;
}
.container-task .task.taskDone { text-decoration: line-through; background-color: lightgray;
}

365JS - Todolist - Script Codes JS Codes

'use strict';
/* Shadow Effect */
var container = document.querySelector('.container');
var title = container.querySelector('.title');
var walk = 20;
var shadow = function shadow(event) {	var width = container.offsetWidth;	var x = event.offsetX;	if (undefined !== event.target) {	x = x + event.target.offsetLeft;	}	var xWalk = Math.round(x / width * walk - walk / 2);	title.style.textShadow = '1px 1px 0px rgba(0, 0, 0, 1),\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t' + xWalk + 'px 0px 5px rgba(255, 132, 132, .5),\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t' + -xWalk + 'px 0px 5px rgba(117, 117, 255, .5)';
};
document.addEventListener('mousemove', shadow);
/* Todolist */
var containerTask = document.querySelector('.container-task');
var form = document.querySelector('form');
var input = document.querySelector('input');
var tasksButtons = Array.from(document.querySelectorAll('.task>button'));
var addTask = function addTask(event) {	event.preventDefault();	var taskInput = input.value;	if (taskInput.length > 0) {	var taskHTML = '<button class=\'done\'>&#10003;</button><h4>' + taskInput + '</h4><button class=\'delete\'>&#10007;</button>';	var div = document.createElement('div');	div.classList.add('task');	div.innerHTML = taskHTML;	containerTask.appendChild(div);	}	form.reset();	tasksButtons = Array.from(document.querySelectorAll('.task>button'));	tasksButtons.forEach(function (button) {	button.addEventListener('click', function () {	if (button.classList.contains('done')) {	if (button.parentNode.classList.contains('check')) {	button.parentNode.classList = 'task';	} else {	button.parentNode.classList = 'task check';	}	} else if (button.classList.contains('delete')) {	containerTask.removeChild(button.parentNode);	tasksButtons = Array.from(document.querySelectorAll('.task>button'));	}	});	});
};
form.addEventListener('submit', addTask);
365JS - Todolist - Script Codes
365JS - Todolist - Script Codes
Home Page Home
Developer Kévin Barfleur
Username kevin_barfleur
Uploaded January 30, 2023
Rating 3
Size 4,506 Kb
Views 2,024
Do you need developer help for 365JS - Todolist?

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!

Kévin Barfleur (kevin_barfleur) Script Codes
Name
ReactMeteoApp
365JS - Clavier
Stylexemple
ReactJS - Todolist
ReactJS - Camper Leaderboard
365JS - 1 - Snake
ReactJS - Markdown Previewer
ReactJS - Portfolio
Create amazing Facebook ads 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!