To-Do-List 1.25

by velo_ninja

HTML

<!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>
    </style>

    <script>
    	let counterItem = 1;
      //-------------------------------------
      function createDiv(id, title, color) {
        const div = document.createElement('div');
        div.id = id;
        div.classList.add('cell');
        div.textContent = title;
        div.style.backgroundColor = color;
        div.style.borderColor = color;
        div.style.borderRadius = '2px';
        div.style.display = 'flex';
        div.style.alignItems = 'center';
        div.style.justifyContent = 'center';
        return div;
      }

      function createRow(basicData, parentElement) {      
        const row = document.createElement('div');
        row.classList.add('row');
        row.style.display = 'flex'; // Make the row a flex container

        for (let i = 0; i < basicData.ids.length; i++) {
          const div = createDiv(basicData.ids[i], basicData.titles[i], basicData.colors[i]);
          
          div.style.flexBasis = `${basicData.percentages[i]}%`;
          if(div.id==='divCounter') {
          	div.textContent = counterItem; counterItem++
            div.style.padding = "10px";
            div.style.color = 'white';
          } 
          
          else if(div.id==='divTitle') {
          	div.textContent = 'Task-Title here...';
            div.style.display = 'flex';
            div.style.alignItems = 'center';
            div.style.justifyContent = 'flex-start';
            div.style.padding = '10px';
          } 
                   
          else if(div.id==='divF' || div.id==='divG' || div.id==='divH' || div.id==='divI') {            
            div.style.display = 'block';
            div.style.padding = '10px';
            div.style.height = '150px';
            div.style.overflowY = 'auto';
          }
         
          if...

CSS

.row {
  border-bottom: 3px solid black !important;
}

#divTask  {  
  bottom: -5px; /* Adjust this value to control the distance of the underline from the text */
  left: 0;
  width: 100%;
  height: 8px; /* Adjust the thickness of the underline */
  background: linear-gradient(to right, rgba(0, 100, 255, 0.5), rgba(100, 250, 55, 0.4)); /* Gradient color */
  border-radius: 5px; /* Rounded corners */
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.8); /* Shadow effect */
}

#divNote  {  
  bottom: -5px; /* Adjust this value to control the distance of the underline from the text */
  left: 0;
  width: 100%;
  height: 8px; /* Adjust the thickness of the underline */
  background: linear-gradient(to right, rgba(0, 100, 255, 0.5), rgba(100, 250, 55, 0.8)); /* Gradient color */
  border-radius: 5px; /* Rounded corners */
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.8); /* Shadow effect */
}