Code Playground

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>cpc-todo-list</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&display=swap');

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

body {
            --add-todo-active: 0;
            min-height: 100vh;
            background-color: #222;
            display: grid;
            font-family: Poppins, sans-serif;
        }

:root {
            --hue: 20;
            --accent: hsl(var(--hue), 80%, 50%);
            --dark-accent: hsl(var(--hue), 100%, 5%);
            --light-accent: hsl(var(--hue), 100%, 95%);
        }

.add-todo {
            --active: 0;
            position: absolute;
            top: 0;
            left: 50%;
            translate: -50% 0;
            width: max(250px, calc(80vmin * var(--active)));
            height: max(50px, calc(150px * var(--active)));
            display: block;
            border: none;
            background-color: transparent;
            overflow: visible;
            transition: top .5s, width .5s, height .5s, translate .5s;
            z-index: 10;
        }

.add-todo::before,
        .add-todo::after {
            content: '';
            position: absolute;
            height: 50px;
            aspect-ratio: 1;
            background-color: var(--accent);
            left: -50px;
            top: 0;
            z-index: 0;
            mask:
                radial-gradient(circle 25px, #0000 24px, #000 25px),
                linear-gradient(45deg, #000 52px, #0000 50px);
            mask-composite: subtract;
            clip-path: inset(0 0 0 25px);
        }

.add-todo::after {
            left: 100%;
            mask:
                radial-gradient(circle 25px, #0000 24px, #000 25px),
                linear-gradient(-45deg, #000 52px, #0000 50px);
            mask-composite: subtract;
            clip-path: inset(0 25px 0 0);
        }

.add-todo .inner {
            position: relative;
            width: 100%;
            height: 100%;
            background-color: var(--accent);
            padding: 1rem 2rem;
            border-radius: 0 0 25px 25px;
            display: grid;
            grid-template-columns: 1fr;
            grid-template-rows: 50px 1fr;
            overflow: hidden;
            transition: border-radius .5s;
            border-bottom: 3px solid black;
        }

.add-todo header {
            display: flex;
            align-items: center;
            justify-content: center;
        }

.add-todo header h1 {
            color: var(--light-accent);
            font-weight: 300;
            display: flex;
            align-items: center;
            justify-content: center;
        }

.add-todo header h1 svg {
            width: 50px;
            aspect-ratio: 1;
            opacity: 1;
        }

.add-todo .todo-input-section {
            display: flex;
        }

.add-todo .todo-input-section .todo-input-wrapper {
            display: flex;
            width: 100%;
            align-items: center;
        }

.add-todo .todo-input-section .todo-input-wrapper .todo-input {
            width: 100%;
            background-color: transparent;
            border: none;
            font-family: Poppins, sans-serif;
            color: var(--dark-accent);
            font-size: 1.3rem;
        }

.add-todo .todo-input-section .todo-input:is(:active, :focus-within) {
            outline: none;
        }

.add-todo .todo-input-section .todo-input::placeholder {
            color: rgba(255 255 255 / .3);
        }

.add-todo .todo-input-section .todo-input-wrapper .add-todo-btn {
            width: 50px;
            height: 50px;
            background-color: transparent;
            border: none;
            cursor: pointer;
            color: var(--dark-accent);
            transition: opacity .3s, scale .1s;
        }

.add-todo-btn:active {
            opacity: .7;
            scale: 1.1;
        }

.add-todo-btn svg {
            width: 100%;
            height: 100%;
        }

.add-todo:popover-open,
        body:has(.add-todo:popover-open) {
            --active: 1;
            --add-todo-active: 1;
        }

.add-todo [popovertarget] {
            position: absolute;
            width: calc(100% * (1 - var(--active)));
            height: calc(100% * (1 - var(--active)));
            top: 50%;
            left: 50%;
            translate: -50% -50%;
            background-color: var(--accent);
            background-clip: padding-box;
            opacity: calc(1 - var(--active));
            border: 3px solid transparent;
            border-radius: 25px;
            overflow: hidden;
            font-family: Poppins, sans-serif;
            font-size: 1.2rem;
            font-weight: 700;
            letter-spacing: -1px;
            word-spacing: 2px;
            color: var(--dark-accent);
            cursor: pointer;
            transition: width .5s, height .5s, translate .5s, opacity .5s;
        }

[popover]:popover-open::backdrop {
            background-color: rgba(0 0 0 / .6);
        }

[popover]::backdrop {
            background-color: transparent;
            transition: background-color .3s allow-discrete;
        }

@starting-style {
            [popover]:popover-open::backdrop {
                background-color: transparent;
            }
        }

.todos {
            --margin-top: 50px;
            --has-todos: 0;
            position: relative;
            width: 100%;
            height: calc(100% - (var(--margin-top) + (var(--add-todo-active) * 100px)));
            margin-top: calc(var(--margin-top) + (var(--add-todo-active) * 100px));
            display: grid;
            transition: margin-top .3s, height .3s;
        }

.todos .todos-list {
            list-style: none;
            gap: 1rem;
            padding: 1rem;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: repeat(4, 1fr);
            align-items: center;
            justify-items: center;
            z-index: 5;
        }

.todos .todos-list .todo-item {
            --completed: 0;
            --removed: 0;
            position: relative;
            background-color: var(--accent);
            padding: 1rem;
            width: max-content;
            border-radius: .6rem;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: -5px 5px 0px var(--dark-accent);
            transform: rotate(var(--rotation)) translateY(var(--top-offset));
        }

.todo-item .task-text {
            margin-right: 15px;
            position: relative;
            white-space: nowrap;
        }

.todo-item .task-text::after {
            content: '';
            position: absolute;
            width: calc(110% * var(--completed));
            height: 3px;
            top: 50%;
            left: 0%;
            translate: 0% -50%;
            background-color: var(--dark-accent);
            transition: width .3s;
        }

.todos .todo-item .todo-item-btn {
            --checked: 0;
            position: relative;
            width: 25px;
            aspect-ratio: 1;
            background-color: var(--accent);
            border: none;
            border-radius: 50%;
            cursor: pointer;
            transition: opacity .3s, filter .3s;
        }

.todo-item .todo-item-btn:hover {
            z-index: 3;
        }

.todo-item:has(.todo-item-btn:hover) .todo-item-btn:not(:hover) {
            opacity: .6;
            filter: blur(2px);
        }

.todo-item .todo-item-btn:nth-of-type(1) {
            margin-right: -6px;
            z-index: 2;
        }

.todo-item .todo-item-btn svg {
            position: absolute;
            inset: 0;
            opacity: calc(1 - var(--checked));
        }

.todo-item .todo-item-btn svg:last-of-type {
            opacity: var(--checked);
        }

.todo-item .todo-item-btn input {
            position: absolute;
            inset: 0;
            appearance: none;
            opacity: 0;
            cursor: pointer;
            clip-path: circle(50%);
        }

.todo-item .todo-item-btn:has(input:checked),
        .todo-item .todo-item-btn:active {
            --checked: 1;
        }

.todo-item:has(.todo-item-btn input:checked) {
            --completed: 1;
        }

.todos-list:not(:has(*))+.no-todos {
            --has-todos: 1;
        }

.todos .no-todos {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: rotate(4deg) translate(-50%, calc(-50% + (var(--add-todo-active) * 50px)));
            width: max-content;
            aspect-ratio: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: Kalam, sans-serif;
            font-size: 3rem;
            color: var(--light-accent);
            opacity: calc(var(--has-todos) * .5);
            pointer-events: none;
            z-index: 0;
            transition: opacity .3s, transform .3s;
        }

.todos .no-todos svg {
            width: 30vmin;
            position: absolute;
            top: -45%;
            left: calc(100% + .2ch);
            transform-origin: 50% 100%;
            transform: rotate(-70deg);
        }

.alien-link {
            --alien-hover: 0;
            color: slategray;
            position: fixed;
            bottom: 1rem;
            left: 1rem;
            width: 48px;
            aspect-ratio: 1;
            display: grid;
            place-items: center;
          z-index: 100;
            opacity: calc(.8 + (.2 * var(--alien-hover)));
            animation: app-start 5s linear 1 -2.5s;
        }

@keyframes app-start {
            to {
                --alien-hover: 1;
            }
        }

.alien-link::after {
            content: 'Click me !';
            position: absolute;
            bottom: calc(100% - 10px);
            left: calc(100% - 10px);
            width: 100px;
            aspect-ratio: 2/1;
            background-color: color-mix(in srgb, slategray, dodgerblue);
            color: rgba(0 0 0 / .8);
            border-radius: 10px 10px 10px 0px;
            transform-origin: 0% 0%;
            transform: rotate(-2deg) translate(calc((1 - var(--alien-hover)) * -10px), calc((1 - var(--alien-hover)) * -10px));
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            white-space: nowrap;
            font-size: 1rem;
            font-weight: 600;
            opacity: var(--alien-hover);
            transition: opacity .3s, transform .5s;
        }

:where(.x-link, .alien-link, ):is(:hover, :focus-visible) {
            --alien-hover: 1;
        }

.alien-link svg {
            width: 75%;
        }
    </style>
</head>

<section class="todos">
        <ul class="todos-list">
        </ul>
        <div class="no-todos">
            No Todos yet!
            <svg fill="currentColor" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg"
                xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 377.114 377.115" xml:space="preserve">
                <g id="SVGRepo_iconCarrier">
                    <g>
                        <g>
                            <path
                                d="M16.808,330.236c-1.836-2.449-4.896-4.285-7.344-6.732c-2.448-2.447-4.284-6.119-6.12-9.18 c-1.224-1.836-4.284-0.611-3.06,1.225c2.448,6.119,6.732,17.135,14.076,17.748C16.808,333.908,18.032,332.072,16.808,330.236z">
                            </path>
                            <path
                                d="M63.932,357.775c-3.672-2.447-7.956-3.059-12.24-4.283c-4.896-1.836-9.792-3.672-13.464-6.732 c-1.224-0.611-2.448,0.613-1.836,1.836c6.12,6.732,16.524,14.076,26.316,14.688C65.156,362.671,65.768,359,63.932,357.775z">
                            </path>
                            <path
                                d="M101.875,332.683c-3.06,3.061-5.508,6.732-9.18,9.18c-3.672,2.449-7.344,3.061-11.628,3.672 c-2.448,0.613-1.224,3.061,0.612,3.674c10.404,1.223,20.196-3.674,24.48-12.854C106.771,333.296,103.711,330.236,101.875,332.683z ">
                            </path>
                            <path
                                d="M111.056,295.351c-0.612-0.611-1.836-0.611-3.06,0c-2.448,2.449-1.836,5.508-1.836,7.957 c0,4.283-0.612,7.955-2.448,11.627c-0.612,2.449,2.448,3.672,3.672,1.836c1.836-3.672,3.06-7.344,3.672-11.016 C112.892,302.695,114.116,297.8,111.056,295.351z">
                            </path>
                            <path
                                d="M98.204,278.828c-3.672-1.836-6.732-4.896-9.792-7.344c-3.06-3.061-5.508-6.121-9.18-8.568 c-2.448-1.225-4.896,1.225-3.672,3.672c2.448,3.672,6.12,6.732,9.792,9.793c3.06,2.447,6.732,4.895,10.404,6.73 C98.815,284.335,101.264,280.664,98.204,278.828z">
                            </path>
                            <path
                                d="M55.976,259.244c-4.284,0-7.956,0.611-11.628,2.447c-3.06,1.836-7.344,5.508-7.344,9.182c0,1.836,2.448,3.672,4.284,2.447 c2.448-1.836,4.284-4.285,6.12-6.121c2.448-1.836,5.508-3.059,7.956-3.059C59.036,264.14,59.647,259.855,55.976,259.244z">
                            </path>
                            <path
                                d="M55.976,303.308c-2.448-3.672-2.448-8.568-1.224-12.24c0.612-1.836-2.448-3.061-3.06-1.225 c-1.836,4.896-3.06,9.18-1.836,14.076c1.224,4.283,4.284,10.404,8.568,11.629c1.836,0.611,3.672-1.225,3.06-3.061 C60.872,308.816,57.812,306.367,55.976,303.308z">
                            </path>
                            <path
                                d="M98.204,325.951c-2.448-1.223-5.508-0.611-8.568-1.836c-3.672-1.223-6.732-3.672-9.792-6.119 c-1.836-1.836-4.284,0.611-2.448,2.447c4.284,4.896,13.464,13.465,20.808,11.018C100.651,330.236,100.651,326.564,98.204,325.951z ">
                            </path>
                            <path
                                d="M155.731,313.099c-7.956,4.896-15.912,9.793-24.48,12.852c-2.448,1.225-1.836,4.896,1.224,4.285 c9.792-2.449,20.808-4.285,26.928-13.465C161.24,314.935,158.18,311.876,155.731,313.099z">
                            </path>
                            <path
                                d="M178.988,273.931c-0.612-2.447-3.672-2.447-4.896-1.223c-3.06,2.447-4.284,7.955-6.732,11.627 c-2.448,3.672-5.508,7.344-8.568,11.016c-1.836,1.836,1.224,4.896,3.06,3.061c4.284-3.672,7.956-7.344,11.628-11.016 C176.54,283.724,180.211,278.828,178.988,273.931z">
                            </path>
                            <path
                                d="M184.496,223.136c-1.224-1.836-4.896-1.225-4.284,1.223c0.612,9.793,4.284,18.973,4.284,28.152 c0,1.836,2.448,1.836,2.448,0C187.556,242.72,190.003,231.703,184.496,223.136z">
                            </path>
                            <path
                                d="M174.704,201.103c-1.836-3.672-3.672-7.344-6.732-10.404c-3.06-3.671-6.12-8.567-10.404-9.791 c-1.836-0.612-4.284,1.224-3.06,3.06c1.224,3.672,4.896,6.12,7.344,8.567c3.06,3.061,6.732,6.732,9.18,10.404 C172.868,205.388,175.928,203.552,174.704,201.103z">
                            </path>
                            <path
                                d="M133.7,165.607c-3.672-3.672-7.956-5.508-12.852-7.344c-5.508-1.224-12.852-2.448-17.748-0.612 c-3.06,1.224-3.06,4.896,0,6.12c9.18,3.672,19.584-1.224,28.152,5.508C133.087,170.503,134.924,167.443,133.7,165.607z">
                            </path>
                            <path
                                d="M95.755,178.459c-8.568,7.344-23.256,23.868-13.464,35.497c1.836,1.836,4.896,0.611,5.508-1.225 c1.224-4.896,0-9.793,1.224-14.076c1.836-6.121,6.12-11.628,9.792-16.524C100.651,179.072,97.592,176.624,95.755,178.459z">
                            </path>
                            <path
                                d="M111.667,241.496c-3.672-3.061-7.344-5.508-11.016-8.568c-3.672-3.672-6.12-7.955-8.568-12.24 c-0.612-1.836-3.672-0.611-3.06,1.225c2.448,9.791,8.568,24.48,20.808,23.867C111.667,245.779,113.503,242.72,111.667,241.496z">
                            </path>
                            <path
                                d="M151.448,256.796c-7.344-1.836-15.3-0.613-21.42-5.51c-1.224-1.223-3.06,0.613-1.836,1.838 c6.12,6.73,15.3,9.18,23.868,7.344C153.284,260.468,153.284,257.408,151.448,256.796z">
                            </path>
                            <path
                                d="M205.916,265.976c-7.956-4.896-20.809-3.672-29.988-2.449c-2.448,0-2.448,3.672,0,4.285 c4.896,0.611,10.404,0.611,15.3,1.836c4.284,0.611,8.568,2.447,12.852,2.447C207.752,271.484,208.363,267.199,205.916,265.976z">
                            </path>
                            <path
                                d="M254.264,243.332c-4.896,1.836-7.956,4.896-12.24,7.955c-4.284,3.674-8.567,6.121-13.464,8.568 c-2.448,1.225-0.612,5.508,1.836,4.896c4.896-1.225,8.568-3.672,12.852-6.119c4.896-3.061,9.793-6.121,14.076-10.404 C259.159,246.392,257.323,242.107,254.264,243.332z">
                            </path>
                            <path
                                d="M279.968,198.044c-0.612-2.449-4.284-2.449-4.896,0c-1.836,6.73-3.672,12.852-7.956,18.359 c-1.224,1.836,0.612,3.672,2.448,2.447C275.684,213.343,281.191,207.224,279.968,198.044z">
                            </path>
                            <path
                                d="M279.355,146.636c-1.836-2.448-5.508-0.612-4.896,1.836c2.447,7.956,3.06,16.524,3.672,24.48c0,2.448,4.284,2.448,4.284,0 C283.64,164.384,284.863,154.592,279.355,146.636z">
                            </path>
                            <path
                                d="M260.384,95.84c-1.836-2.448-4.896,0.612-3.672,3.06c3.672,8.568,9.18,16.524,13.464,25.092 c0.612,1.836,3.672,0.612,3.06-1.224C270.788,112.976,267.115,103.184,260.384,95.84z">
                            </path>
                            <path
                                d="M231.619,80.54c-5.508-5.508-15.911-13.464-24.479-10.404c-2.448,0.612-2.448,4.284,0,4.896 c3.672,1.224,7.344,0.612,11.016,1.836S225.5,80.54,228.56,83.6C230.396,84.824,232.844,82.375,231.619,80.54z">
                            </path>
                            <path
                                d="M188.78,77.479c-5.508,0-10.404,1.224-14.076,5.508c-3.06,3.672-7.956,11.628-4.896,16.524 c1.224,2.448,4.284,1.836,6.12,0c1.224-1.836,1.224-3.06,1.224-4.896s0.612-4.284,1.836-6.12c1.836-3.672,5.508-7.956,9.792-8.568 C190.615,79.928,190.615,77.479,188.78,77.479z">
                            </path>
                            <path
                                d="M201.02,140.516c-3.06-4.284-7.956-7.344-11.017-11.016c-3.671-4.284-6.119-9.18-8.567-14.076 c-1.224-2.448-4.896-0.612-4.284,1.836c2.448,9.792,9.792,24.48,20.196,27.54C199.796,145.412,202.243,142.352,201.02,140.516z">
                            </path>
                            <path
                                d="M250.592,168.056c-4.896-2.448-9.792-3.06-15.3-4.896c-7.345-1.836-13.465-5.508-18.973-10.404 c-2.447-2.448-6.12,1.224-3.672,3.672c8.568,9.18,23.868,17.136,36.72,17.136C251.815,173.563,253.04,169.28,250.592,168.056z">
                            </path>
                            <path
                                d="M300.775,127.052c-3.06,3.06-3.672,7.344-4.896,11.016c-1.836,4.896-4.284,10.404-7.345,14.688 c-2.447,2.448,1.225,6.12,3.673,3.672c3.672-3.672,6.731-7.956,9.18-12.24s5.508-9.792,4.896-14.688 C305.672,127.052,302.611,125.216,300.775,127.052z">
                            </path>
                            <path
                                d="M316.688,82.988c-7.956,6.732-10.404,20.808-9.792,30.6c0,3.06,4.284,3.06,4.896,0c0.611-4.284,1.836-9.18,3.06-13.464 c1.836-4.896,5.508-9.18,6.732-14.076C321.584,82.988,318.523,81.151,316.688,82.988z">
                            </path>
                            <path
                                d="M341.168,50.552c-3.672-0.612-6.732,2.448-9.181,4.284c-3.06,2.448-4.896,6.12-6.12,9.18 c-1.224,3.06,3.061,5.508,4.284,2.448c1.836-2.448,3.061-4.896,5.508-7.344c2.448-1.836,6.12-2.448,7.345-5.508 C343.615,53,343.004,51.164,341.168,50.552z">
                            </path>
                            <path
                                d="M375.439,36.476c-1.224-6.12-3.06-12.852-5.508-18.972c-0.612-1.836-2.448-3.672-4.284-3.672 c-12.24,0.612-23.256,4.284-33.66,11.016c-3.672,2.448-0.611,7.956,3.672,6.12c8.568-4.896,17.137-7.344,26.316-7.344 c1.224,4.284,2.448,8.568,3.672,12.852c1.225,4.896,0.612,9.792,3.672,13.464c1.836,2.448,4.896,1.224,6.12-0.612 C378.5,45.656,376.663,40.147,375.439,36.476z">
                            </path>
                        </g>
                    </g>
                </g>
            </svg>
        </div>
        <script>
            class Todo {
                constructor(id, text, completed, rotation, top_offset) {
                    Object.assign(this, { id, text, completed, rotation, top_offset })
                    this.init()
                }
                init() {
                    const EL = document.createElement("li");
                    EL.id = this.id
                    EL.className = "todo-item"
                    EL.style = `
                        --rotation: ${this.rotation}deg;
                        --top-offset: ${this.top_offset}px;
                    `
                    EL.innerHTML = `
                <span class="task-text">${this.text.trim()}</span>
                <button class="todo-item-btn">
                    <svg viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg"
                        xmlns:xlink="http://www.w3.org/1999/xlink"
                        xmlns:sketch="http://www.bohemiancoding.com/sketch/ns" fill="#000000">
                        <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"
                            sketch:type="MSPage">
                            <g id="Icon-Set" sketch:type="MSLayerGroup" transform="translate(-100.000000, -1139.000000)"
                                fill="#000000">
                                <path
                                    d="M122.027,1148.07 C121.548,1147.79 120.937,1147.96 120.661,1148.43 L114.266,1159.51 L110.688,1156.21 C110.31,1155.81 109.677,1155.79 109.274,1156.17 C108.871,1156.54 108.85,1157.18 109.228,1157.58 L113.8,1161.8 C114.177,1162.2 114.81,1162.22 115.213,1161.84 C115.335,1161.73 122.393,1149.43 122.393,1149.43 C122.669,1148.96 122.505,1148.34 122.027,1148.07 L122.027,1148.07 Z M116,1169 C108.268,1169 102,1162.73 102,1155 C102,1147.27 108.268,1141 116,1141 C123.732,1141 130,1147.27 130,1155 C130,1162.73 123.732,1169 116,1169 L116,1169 Z M116,1139 C107.164,1139 100,1146.16 100,1155 C100,1163.84 107.164,1171 116,1171 C124.836,1171 132,1163.84 132,1155 C132,1146.16 124.836,1139 116,1139 L116,1139 Z"
                                    id="checkmark-circle" sketch:type="MSShapeGroup"> </path>
                            </g>
                        </g>
                    </svg>
                    <svg viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg"
                        xmlns:xlink="http://www.w3.org/1999/xlink"
                        xmlns:sketch="http://www.bohemiancoding.com/sketch/ns" fill="#000000">
                        <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"
                            sketch:type="MSPage">
                            <g id="Icon-Set-Filled" sketch:type="MSLayerGroup"
                                transform="translate(-102.000000, -1141.000000)" fill="#000000">
                                <path
                                    d="M124.393,1151.43 C124.393,1151.43 117.335,1163.73 117.213,1163.84 C116.81,1164.22 116.177,1164.2 115.8,1163.8 L111.228,1159.58 C110.85,1159.18 110.871,1158.54 111.274,1158.17 C111.677,1157.79 112.31,1157.81 112.688,1158.21 L116.266,1161.51 L122.661,1150.43 C122.937,1149.96 123.548,1149.79 124.027,1150.07 C124.505,1150.34 124.669,1150.96 124.393,1151.43 L124.393,1151.43 Z M118,1141 C109.164,1141 102,1148.16 102,1157 C102,1165.84 109.164,1173 118,1173 C126.836,1173 134,1165.84 134,1157 C134,1148.16 126.836,1141 118,1141 L118,1141 Z"
                                    id="checkmark-circle" sketch:type="MSShapeGroup"> </path>
                            </g>
                        </g>
                    </svg>
                    <input type="checkbox" class="complete-todo" ${this.completed ? 'checked' : ''}>
                </button>
                <button class="todo-item-btn delete-todo">
                    <svg viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg"
                        xmlns:xlink="http://www.w3.org/1999/xlink"
                        xmlns:sketch="http://www.bohemiancoding.com/sketch/ns" fill="#000000">
                        <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"
                            sketch:type="MSPage">
                            <g id="Icon-Set" sketch:type="MSLayerGroup" transform="translate(-568.000000, -1087.000000)"
                                fill="#000000">
                                <path
                                    d="M584,1117 C576.268,1117 570,1110.73 570,1103 C570,1095.27 576.268,1089 584,1089 C591.732,1089 598,1095.27 598,1103 C598,1110.73 591.732,1117 584,1117 L584,1117 Z M584,1087 C575.163,1087 568,1094.16 568,1103 C568,1111.84 575.163,1119 584,1119 C592.837,1119 600,1111.84 600,1103 C600,1094.16 592.837,1087 584,1087 L584,1087 Z M589.717,1097.28 C589.323,1096.89 588.686,1096.89 588.292,1097.28 L583.994,1101.58 L579.758,1097.34 C579.367,1096.95 578.733,1096.95 578.344,1097.34 C577.953,1097.73 577.953,1098.37 578.344,1098.76 L582.58,1102.99 L578.314,1107.26 C577.921,1107.65 577.921,1108.29 578.314,1108.69 C578.708,1109.08 579.346,1109.08 579.74,1108.69 L584.006,1104.42 L588.242,1108.66 C588.633,1109.05 589.267,1109.05 589.657,1108.66 C590.048,1108.27 590.048,1107.63 589.657,1107.24 L585.42,1103.01 L589.717,1098.71 C590.11,1098.31 590.11,1097.68 589.717,1097.28 L589.717,1097.28 Z"
                                    id="cross-circle" sketch:type="MSShapeGroup"> </path>
                            </g>
                        </g>
                    </svg>
                    <svg viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg"
                        xmlns:xlink="http://www.w3.org/1999/xlink"
                        xmlns:sketch="http://www.bohemiancoding.com/sketch/ns" fill="#000000">
                        <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"
                            sketch:type="MSPage">
                            <g id="Icon-Set-Filled" sketch:type="MSLayerGroup"
                                transform="translate(-570.000000, -1089.000000)" fill="#000000">
                                <path
                                    d="M591.657,1109.24 C592.048,1109.63 592.048,1110.27 591.657,1110.66 C591.267,1111.05 590.633,1111.05 590.242,1110.66 L586.006,1106.42 L581.74,1110.69 C581.346,1111.08 580.708,1111.08 580.314,1110.69 C579.921,1110.29 579.921,1109.65 580.314,1109.26 L584.58,1104.99 L580.344,1100.76 C579.953,1100.37 579.953,1099.73 580.344,1099.34 C580.733,1098.95 581.367,1098.95 581.758,1099.34 L585.994,1103.58 L590.292,1099.28 C590.686,1098.89 591.323,1098.89 591.717,1099.28 C592.11,1099.68 592.11,1100.31 591.717,1100.71 L587.42,1105.01 L591.657,1109.24 L591.657,1109.24 Z M586,1089 C577.163,1089 570,1096.16 570,1105 C570,1113.84 577.163,1121 586,1121 C594.837,1121 602,1113.84 602,1105 C602,1096.16 594.837,1089 586,1089 L586,1089 Z"
                                    id="cross-circle" sketch:type="MSShapeGroup"> </path>
                            </g>
                        </g>
                    </svg>
                </button>
                `
                    this.HTML = EL.outerHTML
                }
            }
            const
                add_todo_popover = document.querySelector("#add-todo-popover"),
                todo_input = document.querySelector(".todo-input"),
                add_todo_btn = document.querySelector(".add-todo-btn"),
                todos_list = document.querySelector(".todos-list"),
                todos = JSON.parse(localStorage.getItem("todos")) || [];

let index = 0;

if (localStorage.todos) {
                load_todos()
            }

add_todo_btn.addEventListener("click", () => {
                if (todo_input.value.length <= 0) return
                add_todo(new Todo(index++, todo_input.value, false, rand(3, -3), rand(25, 0)))
            })

function add_todo(todo) {
                todos.push(todo)
                save_todos()
                load_todos()
                add_todo_popover.hidePopover()
            }

function load_todos() {
                todos_list.innerHTML = todos.map(todo => new Todo(todo.id, todo.text, todo.completed, todo.rotation, todo.top_offset).HTML).join("")
                todos_list.querySelectorAll(".todo-item").forEach(t => {
                    t.querySelector(".complete-todo").onchange = (e) => {
                        todos[parseInt(t.id)].completed = e.target.checked
                        save_todos()
                    }
                    t.querySelector(".delete-todo").onclick = () => t.animate([
                        { filter: 'grayscale(1) opacity(0) blur(10px)' },
                    ],
                        {
                            duration: 1000,
                            easing: "ease",
                            fill: "forwards",
                        }).addEventListener("finish", () => remove_todo(t))
                })
            }
            function save_todos() {
                localStorage.setItem("todos", JSON.stringify(todos))
            }

function remove_todo(selected_todo) {
                selected_todo.remove()
                todos.forEach(t => {
                    todos.splice(parseInt(selected_todo.id), 1)
                  t.id--
                })
                save_todos()
            }

const rand = (max, min) => Math.floor(Math.random() * (max - min + 1)) + min
        </script>
    </section>
</body>

</html>
</body>
</html>

Frontend Forever App