JSFiddle - React, Tailwind, and code Playground

by TheOne_TheMany

HTML

<h1>Header</h1>
     <ul id="myShoppingList">
        <li>Bannana<div class="container"><div class="deleteMe">Delete</div></div></li>
        <li>Dog Food<div class="container"><div class="deleteMe">Delete</div></li>
        <li>Tomatoes<div class="container"><div class="deleteMe">Delete</div></li>
        <li>Bread<div class="container"><div class="deleteMe">Delete</div></li>
        <div id="btnSend" class="btnSend">Add more</div>
    </ul>

CSS

body {
      font-family: arial, sans-serif;
    }

    .container {
      z-index: 1;
      position: relative;
      top: -10px;
      right: -10px;
      overflow: hidden;
      float: right;
      width: 0px;
      height: 39px;
      float: right;
      background-color: darkviolet;
      -webkit-transition-duration: 0.3s;
      transition-duration: 0.3s;
    }

    .containerDelete {
      width: 55px;
      -webkit-transition-duration: 0.3s;
      transition-duration: 0.3s;
    }

    .deleteMe {
      width: 30px;
      overflow: hidden;
      background-color: rgb(194, 54, 54);
      color: white;
      font-size: 10px;
      margin-left: 0px;
      padding: 14px;
    }

    li {
      z-index: 10;
      color: grey;
      text-align: center;
      padding: 10px;
      margin: 10px 0px 10px 0px;
      background-color: rgb(211, 211, 211);
      list-style: none;
      width: 200px;
      vertical-align: middle;
      -webkit-transform: perspective(1px) translateZ(0);
      transform: perspective(1px) translateZ(0);
      box-shadow: 0 0 1px rgba(0, 0, 0, 0);
      -webkit-transition-duration: 0.3s;
      transition-duration: 0.3s;
      -webkit-transition-property: box-shadow, transform;
      transition-property: box-shadow, transform;
    }

    .activeLi,
    .onLi {
      background-color: aquamarine;
      color: cadetblue;
      box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5);
      -webkit-transform: scale(1.05);
      transform: scale(1.05);
    }

    .btnSend {
      color: white;
      text-align: center;
      font-size: 12px;
      background-color: cornflowerblue;
      width: 100px;
      padding: 10px;
      margin-top: 30px;
      display: inline-block;
      vertical-align: middle;
      -webkit-transform: perspective(1px) translateZ(0);
      transform: perspective(1px) translateZ(0);
      box-shadow: 0 0 1px rgba(0, 0, 0, 0);
      -webkit-transition-duration: 0.3s;
      transition-duration: 0.3s;
      -webkit-transition-property:...

JavaScript

const myShoppingList = document.querySelector('#myShoppingList');
const btnSends = document.querySelector('#btnSend');



// -------------------- Mouse ove action -------------------- //

const mouseClick = function(item){
    //console.log(item.target);

    // Li - animation
    if(item.target.tagName === 'LI'){

        item.target.classList.toggle('activeLi');
    }

    item.stopPropagation;

}


// -------------------- Mouse ove action -------------------- //

const mouseOver = function(item){
    
    //console.log(item.target.nodeName);

    // Btn animation'
    if(item.target === btnSend){
        item.target.classList.add('btnOver');
    }

    // Li animation
    if(item.target.matches('LI')){
        item.target.classList.add('onLi');
        item.target.lastChild.classList.add('containerDelete');
    }

    item.stopPropagation;

}

// -------------------- Mouse leave action -------------------- //

const mouseLeave = function(item){

    console.log(item.target);
    

    // Btn animation   
    if(item.target === btnSend){
        item.target.classList.remove('btnOver');
    }

     // Li animation
     if(item.target.tagName === 'LI'){
        item.target.classList.remove('onLi');
        item.target.lastChild.classList.remove('containerDelete');
        //console.log('li removing class');


    }
}

myShoppingList.addEventListener('click', mouseClick, false);
myShoppingList.addEventListener('mouseover', mouseOver, false);
myShoppingList.addEventListener('mouseout', mouseLeave, false);