ToDo With Strikethrough

Developer
Andy Hoffman
Size
3,821 Kb
Views
32,384
  1. ToDo With Strikethrough Previews
  2. ToDo With Strikethrough HTML Codes
  3. ToDo With Strikethrough CSS Codes
  4. ToDo With Strikethrough JS Codes

How do I make an todo with strikethrough?

I wanted to transition a strikethrough effect on "completed" list items. After the last item transition is complete, the list itself skews and translates away.. What is a todo with strikethrough? How do you make a todo with strikethrough? This script and codes were developed by Andy Hoffman on 24 August 2022, Wednesday.

ToDo With Strikethrough Previews
IQ Test

ToDo With Strikethrough - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>ToDo With Strikethrough</title> <meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, width=device-width"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <ul> <li>Walk the dog</li> <li>Find that song</li> <li>Right a wrong</li> </ul> <button>Mark All Completed</button>
</div> <script src="js/index.js"></script>
</body>
</html>

ToDo With Strikethrough - Script Codes CSS Codes

@-webkit-keyframes remove_list { 50% { -webkit-transform: skewX(-25deg); transform: skewX(-25deg); } 80% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translateX(-25em); transform: translateX(-25em); }
}
@keyframes remove_list { 50% { -webkit-transform: skewX(-25deg); transform: skewX(-25deg); } 80% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translateX(-25em); transform: translateX(-25em); }
}
@-webkit-keyframes reset_list { 0% { opacity: 0; -webkit-transform: translateX(25em); transform: translateX(25em); } 50% { -webkit-transform: skewX(-25deg); transform: skewX(-25deg); } 100% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; }
}
@keyframes reset_list { 0% { opacity: 0; -webkit-transform: translateX(25em); transform: translateX(25em); } 50% { -webkit-transform: skewX(-25deg); transform: skewX(-25deg); } 100% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; }
}
body { line-height: 1.3em; font-family: 'helvetica neue'; font-size: 62.5%; overflow: hidden;
}
body.stop_movement * { -webkit-animation: none; animation: none; -webkit-transition: none; transition: none;
}
ul { margin: 0 0 3em; padding: 0; width: 20em;
}
.remove_list ul { -webkit-animation: remove_list 1s forwards; animation: remove_list 1s forwards;
}
.reset_list ul { -webkit-animation: reset_list 1s forwards; animation: reset_list 1s forwards;
}
li { list-style: none; padding: 0.75em 1em; font-size: 1.25rem; text-align: center; background: lightgray; border-top: 1px solid gray; letter-spacing: 1px; position: relative; -webkit-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translate(0, 0); transform: translate(0, 0); white-space: nowrap;
}
.completed li { color: gray;
}
li:nth-of-type(2) { -webkit-transition-delay: 0.5s; transition-delay: 0.5s;
}
li:nth-of-type(2):before { -webkit-transition-delay: 0.5s; transition-delay: 0.5s;
}
li:nth-of-type(3) { -webkit-transition-delay: 1s; transition-delay: 1s;
}
li:nth-of-type(3):before { -webkit-transition-delay: 1s; transition-delay: 1s;
}
li:before { content: ""; position: absolute; width: 100%; height: 1px; top: 50%; left: 0; background-color: #fff; visibility: hidden; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; -webkit-transform-origin: 0 0; transform-origin: 0 0;
}
.completed li:before { visibility: visible; -webkit-transform: scaleX(1); transform: scaleX(1);
}
.reset_list li:before { display: none;
}
button { width: 12.5em; font-size: 1rem; padding: 0.75em 1em; background: #663399; color: white; border: none; cursor: pointer; -webkit-transition: opacity 0.25s ease-in-out; transition: opacity 0.25s ease-in-out;
}
button[disabled] { opacity: 0.5;
}

ToDo With Strikethrough - Script Codes JS Codes

var btn = document.querySelector("button"), container = document.querySelector(".container"), ul = document.querySelector("ul"), last_item = document.querySelector("li:nth-of-type(3)"), transitionEnd = transitionEndEventName(), animationEnd = animationEndEventName(), completeTask = function() { btn.setAttribute("disabled", "disabled"); container.classList.add("completed"); }, removeList = function(e) { if (e.propertyName === "color") { container.classList.add("remove_list"); } }, animationDone = function(e) { if (e.animationName === "remove_list") { container.classList.add("reset_list"); } else if (e.animationName === "reset_list") { document.body.classList.add("stop_movement"); container.className = "container"; btn.removeAttribute("disabled"); setTimeout(function() { document.body.classList.remove("stop_movement"); document.body.offsetWidth = document.body.offsetWidth; }); } };
function transitionEndEventName() { var i, undefined, el = document.createElement('div'), transitions = { 'transition':'transitionend', 'OTransition':'otransitionend', 'MozTransition':'transitionend', 'WebkitTransition':'webkitTransitionEnd' }; for (i in transitions) { if (transitions.hasOwnProperty(i) && el.style[i] !== undefined) { return transitions[i]; } }
}
function animationEndEventName() { var i, undefined, el = document.createElement('div'), animations = { 'animation':'animationend', 'OAnimation':'oanimationend', 'MozAnimation':'animationend', 'WebkitAnimation':'webkitAnimationEnd' }; for (i in animations) { if (animations.hasOwnProperty(i) && el.style[i] !== undefined) { return animations[i]; } }
}
btn.addEventListener("click", completeTask, false);
last_item.addEventListener(transitionEnd, removeList, false);
ul.addEventListener("animationend", animationDone, false);
ToDo With Strikethrough - Script Codes
ToDo With Strikethrough - Script Codes
Home Page Home
Developer Andy Hoffman
Username antibland
Uploaded August 24, 2022
Rating 3
Size 3,821 Kb
Views 32,384
Do you need developer help for ToDo With Strikethrough?

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!

Andy Hoffman (antibland) Script Codes
Name
Page Switching Using CSS Negation
Active Buttons
Accessible Tooltip
Pure CSS Flexbox Navigation
Battle Donald J. Trump
SVG With Pure CSS Tooltip
Plain Text Contenteditable
Animated Stacked Pages
A Pen by Andy Hoffman
Simple HTML Canvas with Arrow Key Controls
Create amazing marketing copy 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!