To-Do-List-1.37

by velo_ninja

HTML

<!---
 - generate_sections(data, sectionType, targetSection) -> capable to generate sections (Rows or Columns).
 - create_div(id, title, width, color)                 -> capable to generate DIVs including ID, LABEL, COLOR and WIDTH.
 - create_repeatedBlock(data1, data2)                 -> capable to create repeated DIV-Blocks (repeater-function) for DATA.
--->

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dynamic Divs</title>   
    <style>   
      .button {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 5px;
        padding: 5px;
        height: 20px;
        font-size: 15px;
        background: #fff;
        border: none;
        border-radius: 50px;
        color: #000;
        outline: none;
        cursor: pointer;
        transition: all 0.4s;
      }
      .button:hover {
        box-shadow: inset 0 0 0 5px rgba(75,150,255,0.5);
        background: rgba(25,150,255,0.5);
        color: #fff;
      }    
    </style>     
        <script>
            let arrayNotes=[];
            let mapTasks = new Map(); //console.log(mapTasks);
            let generalShader = '0 3px 5px rgba(0, 0, 0, 0.4)';
            let sectionColor = 'lightgrey';
            let generalBackground = ''//'linear-gradient(to right, rgba(200,100,255,0.5), rgba(25,150,255,0.5), rgba(255,200,255,0.5))';
            //--------------
            let counterRows = 0;
            let counterNote = 0;        
            let iconSizeX = 25;
            let iconSizeY = 25;

            //-------------------------------------
            function create_div(id, title, width, color) {
              const div = document.createElement('div');
              			div.id = id;
              			div.classList.add(id);              
              			div.style.width = `${width}px`;
                    div.style.display = 'flex';
                  ...