API tools faq
paste
Advertisement
metalx1000

HTML CSS Shopping List

metalx1000
Aug 29th, 2022
1,502
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 9.91 KB | Source Code | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en" >
  3.   <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1">
  6.     <title>Checklist animation</title>
  7.     <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Varela+Round&amp;display=swap'>
  8.     <style>
  9.  
  10.       html *{
  11.         font-size: 35px !important;
  12.         margin: 2px;
  13.       }
  14.  
  15.       @media only screen and (min-width: 600px) {
  16.         body {
  17.           margin-right:200px;
  18.           margin-left:200px;
  19.           margin-top: 0;
  20.         }
  21.       }
  22.       .flex{
  23.         display: grid;
  24.         grid-row-gap: 1rem;
  25.         grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  26.       }
  27.  
  28.       input, button {
  29.         font-size: 32px;
  30.         width: 80%;
  31.       }
  32.  
  33.       #checklist {
  34.         --background: #ffffff;
  35.         --text: #414856;
  36.         --check: #4F29F0;
  37.         --disabled: #C3C8DE;
  38.         --width: 70%;
  39.         --border-radius: 10px;
  40.         background: var(--background);
  41.         width: var(--width);
  42.         border-radius: var(--border-radius);
  43.         position: relative;
  44.         box-shadow: 0 10px 30px rgba(65, 72, 86, 0.05);
  45.         padding: 30px 45px;
  46.         display: grid;
  47.         grid-template-columns: 30px auto;
  48.         align-items: center;
  49.       }
  50.       #checklist label {
  51.         color: var(--text);
  52.         position: relative;
  53.         cursor: pointer;
  54.         display: grid;
  55.         align-items: center;
  56.         width: -webkit-fit-content;
  57.         width: -moz-fit-content;
  58.         width: fit-content;
  59.         transition: color 0.3s ease;
  60.       }
  61.       #checklist label::before, #checklist label::after {
  62.         content: "";
  63.         position: absolute;
  64.       }
  65.       #checklist label::before {
  66.         height: 2px;
  67.         width: 8px;
  68.         left: -27px;
  69.         background: var(--check);
  70.         border-radius: 2px;
  71.         transition: background 0.3s ease;
  72.       }
  73.       #checklist label:after {
  74.         height: 4px;
  75.         width: 4px;
  76.         top: 8px;
  77.         left: -25px;
  78.         border-radius: 50%;
  79.       }
  80.       #checklist input[type=checkbox] {
  81.         -webkit-appearance: none;
  82.         -moz-appearance: none;
  83.         position: relative;
  84.         height: 15px;
  85.         width: 15px;
  86.         outline: none;
  87.         border: 0;
  88.         margin: 0 15px 0 0;
  89.         cursor: pointer;
  90.         background: var(--background);
  91.         display: grid;
  92.         align-items: center;
  93.       }
  94.       #checklist input[type=checkbox]::before, #checklist input[type=checkbox]::after {
  95.         content: "";
  96.         position: absolute;
  97.         height: 2px;
  98.         top: auto;
  99.         background: var(--check);
  100.         border-radius: 2px;
  101.       }
  102.       #checklist input[type=checkbox]::before {
  103.         width: 0px;
  104.         right: 60%;
  105.         transform-origin: right bottom;
  106.       }
  107.       #checklist input[type=checkbox]::after {
  108.         width: 0px;
  109.         left: 40%;
  110.         transform-origin: left bottom;
  111.       }
  112.       #checklist input[type=checkbox]:checked::before {
  113.         -webkit-animation: check-01 0.4s ease forwards;
  114.         animation: check-01 0.4s ease forwards;
  115.       }
  116.       #checklist input[type=checkbox]:checked::after {
  117.         -webkit-animation: check-02 0.4s ease forwards;
  118.         animation: check-02 0.4s ease forwards;
  119.       }
  120.       #checklist input[type=checkbox]:checked + label {
  121.         color: var(--disabled);
  122.         -webkit-animation: move 0.3s ease 0.1s forwards;
  123.         animation: move 0.3s ease 0.1s forwards;
  124.       }
  125.       #checklist input[type=checkbox]:checked + label::before {
  126.         background: var(--disabled);
  127.         -webkit-animation: slice 0.4s ease forwards;
  128.         animation: slice 0.4s ease forwards;
  129.       }
  130.       #checklist input[type=checkbox]:checked + label::after {
  131.         -webkit-animation: firework 0.5s ease forwards 0.1s;
  132.         animation: firework 0.5s ease forwards 0.1s;
  133.       }
  134.  
  135.       @-webkit-keyframes move {
  136.         50% {
  137.           padding-left: 8px;
  138.           padding-right: 0px;
  139.         }
  140.         100% {
  141.           padding-right: 4px;
  142.         }
  143.       }
  144.  
  145.       @keyframes move {
  146.         50% {
  147.           padding-left: 8px;
  148.           padding-right: 0px;
  149.         }
  150.         100% {
  151.           padding-right: 4px;
  152.         }
  153.       }
  154.       @-webkit-keyframes slice {
  155.         60% {
  156.           width: 100%;
  157.           left: 4px;
  158.         }
  159.         100% {
  160.           width: 100%;
  161.           left: -2px;
  162.           padding-left: 0;
  163.         }
  164.       }
  165.       @keyframes slice {
  166.         60% {
  167.           width: 100%;
  168.           left: 4px;
  169.         }
  170.         100% {
  171.           width: 100%;
  172.           left: -2px;
  173.           padding-left: 0;
  174.         }
  175.       }
  176.       @-webkit-keyframes check-01 {
  177.         0% {
  178.           width: 4px;
  179.           top: auto;
  180.           transform: rotate(0);
  181.         }
  182.         50% {
  183.           width: 0px;
  184.           top: auto;
  185.           transform: rotate(0);
  186.         }
  187.         51% {
  188.           width: 0px;
  189.           top: 8px;
  190.           transform: rotate(45deg);
  191.         }
  192.         100% {
  193.           width: 5px;
  194.           top: 8px;
  195.           transform: rotate(45deg);
  196.         }
  197.       }
  198.       @keyframes check-01 {
  199.         0% {
  200.           width: 4px;
  201.           top: auto;
  202.           transform: rotate(0);
  203.         }
  204.         50% {
  205.           width: 0px;
  206.           top: auto;
  207.           transform: rotate(0);
  208.         }
  209.         51% {
  210.           width: 0px;
  211.           top: 8px;
  212.           transform: rotate(45deg);
  213.         }
  214.         100% {
  215.           width: 5px;
  216.           top: 8px;
  217.           transform: rotate(45deg);
  218.         }
  219.       }
  220.       @-webkit-keyframes check-02 {
  221.         0% {
  222.           width: 4px;
  223.           top: auto;
  224.           transform: rotate(0);
  225.         }
  226.         50% {
  227.           width: 0px;
  228.           top: auto;
  229.           transform: rotate(0);
  230.         }
  231.         51% {
  232.           width: 0px;
  233.           top: 8px;
  234.           transform: rotate(-45deg);
  235.         }
  236.         100% {
  237.           width: 10px;
  238.           top: 8px;
  239.           transform: rotate(-45deg);
  240.         }
  241.       }
  242.       @keyframes check-02 {
  243.         0% {
  244.           width: 4px;
  245.           top: auto;
  246.           transform: rotate(0);
  247.         }
  248.         50% {
  249.           width: 0px;
  250.           top: auto;
  251.           transform: rotate(0);
  252.         }
  253.         51% {
  254.           width: 0px;
  255.           top: 8px;
  256.           transform: rotate(-45deg);
  257.         }
  258.         100% {
  259.           width: 10px;
  260.           top: 8px;
  261.           transform: rotate(-45deg);
  262.         }
  263.       }
  264.       @-webkit-keyframes firework {
  265.         0% {
  266.           opacity: 1;
  267.           box-shadow: 0 0 0 -2px #4F29F0, 0 0 0 -2px #4F29F0, 0 0 0 -2px #4F29F0, 0 0 0 -2px #4F29F0, 0 0 0 -2px #4F29F0, 0 0 0 -2px #4F29F0;
  268.         }
  269.         30% {
  270.           opacity: 1;
  271.         }
  272.         100% {
  273.           opacity: 0;
  274.           box-shadow: 0 -15px 0 0px #4F29F0, 14px -8px 0 0px #4F29F0, 14px 8px 0 0px #4F29F0, 0 15px 0 0px #4F29F0, -14px 8px 0 0px #4F29F0, -14px -8px 0 0px #4F29F0;
  275.         }
  276.       }
  277.       @keyframes firework {
  278.         0% {
  279.           opacity: 1;
  280.           box-shadow: 0 0 0 -2px #4F29F0, 0 0 0 -2px #4F29F0, 0 0 0 -2px #4F29F0, 0 0 0 -2px #4F29F0, 0 0 0 -2px #4F29F0, 0 0 0 -2px #4F29F0;
  281.         }
  282.         30% {
  283.           opacity: 1;
  284.         }
  285.         100% {
  286.           opacity: 0;
  287.           box-shadow: 0 -15px 0 0px #4F29F0, 14px -8px 0 0px #4F29F0, 14px 8px 0 0px #4F29F0, 0 15px 0 0px #4F29F0, -14px 8px 0 0px #4F29F0, -14px -8px 0 0px #4F29F0;
  288.         }
  289.       }
  290.       body {
  291.         background: #E8EBF3;
  292.         height: 100vh;
  293.         font: 400 32px "Varela Round", sans-serif;
  294.         display: flex;
  295.         flex-direction: column;
  296.         justify-content: center;
  297.         align-items: center;
  298.       }
  299.       body .socials {
  300.         position: fixed;
  301.         display: block;
  302.         left: 20px;
  303.         bottom: 20px;
  304.       }
  305.       body .socials > a {
  306.         display: block;
  307.         width: 30px;
  308.         opacity: 0.2;
  309.         transform: scale(var(--scale, 0.8));
  310.         transition: transform 0.3s cubic-bezier(0.38, -0.12, 0.24, 1.91);
  311.       }
  312.       body .socials > a:hover {
  313.         --scale: 1;
  314.       }
  315.  
  316.     </style>
  317.   </head>
  318.   <body>
  319.     <input id="input" type="text" placeholder="Enter List Sperated by Commas">
  320.     <button onclick="add_items()">Add Items</button>
  321.     <!-- partial:index.partial.html -->
  322.     <div id="checklist">
  323.     </div>
  324.  
  325.     <button onclick="submit()" onchange="submit()">Submit</button>
  326.   </body>
  327.   <script>
  328.     add_item_on_enter();
  329.  
  330.     function add_items(){
  331.       var list = document.getElementById("checklist");
  332.       var input = document.getElementById("input");
  333.       var items = input.value.split(",");
  334.       input.value = "";
  335.       for(i of items){
  336.         var elementExists = document.getElementById(i);
  337.         if( !elementExists ){
  338.           var id = (Math.random() + 1).toString(36).substring(2);
  339.           list.innerHTML += `
  340.           <input id="${i}" class="items" type="checkbox" name="r" value="${i}">
  341.           <label for="${i}">${i}</label>
  342.           `;
  343.         }
  344.       }
  345.     }
  346.  
  347.     function submit(){
  348.       var items = document.querySelectorAll(".items");
  349.       var submit_string = "";
  350.  
  351.       for ( i of items ){
  352.         var checked = i.checked;
  353.         var item = i.value;
  354.         submit_string += `${item}:${checked}|`
  355.       }
  356.  
  357.       console.log(submit_string);
  358.     }
  359.  
  360.     function add_item_on_enter(){
  361.       // Get the input field
  362.       var input = document.getElementById("input");
  363.  
  364.       // Execute a function when the user presses a key on the keyboard
  365.       input.addEventListener("keypress", function(event) {
  366.         // If the user presses the "Enter" key on the keyboard
  367.         if (event.key === "Enter") {
  368.           // Cancel the default action, if needed
  369.           event.preventDefault();
  370.           // Trigger the button element with a click
  371.           add_items();
  372.         }
  373.       });
  374.     }
  375.   </script>
  376. </html>
  377.  
  378.  
Tags: html CSS lists
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!