JSFiddle - React, Tailwind, and code Playground

by batcave

HTML

<div class="body-container flex margin-top">
  <aside>
    <div class="date-and-time border-radius">
      <p>date and time</p>
    </div>

    <div class="planning-container border-radius">
      <div class="container">
        <div class="aside-container">
          <!-- Lägg till TODO startar här -->
          <div class="todo-list">
            <h3 class="planing-header">Planering</h3>
            <div class="planing-options-today-all-container">
              <div id="todayAndChoosenDayTodo" class="todays-date-todo-option">
                <button onclick="showTodayTodo()">Vald dag</button>
              </div>

              <div class="line-between-h4"></div>

              <div id="allTodo" class="all-dates-todo-option">

                <!-- TODO: this is not valid html-->
                <a href="#0">
                  <button onclick="showAllTodo()">Alla Todo</button>
                </a>
                <!-- TODO: end-->
              </div>

            </div>

            <!-- lägg till todo startar här -->

            <!-- Lägg till slutar här -->

            <!-- Tilllagda todo startar här -->
            <div class="todo-content-container">
              <div id="todayTodoContent" class="todo-content-today">
                <div class="todo-input-container">
                  <div class="today">
                    <ul class="list listActive " id="todayInput">
                      <li></li>
                    </ul>
                  </div>
                </div>
              </div>


              <!-- Tillagda todo alla todos -->
              <div id="allTodoContent" class="todo-content-container-all">
                <div class="todo-input-container">
                  <div class="tomorrow">
                    <ul class="list" id="tomorrow">
                      <li></li>
                    </ul>
                  </div>
                </div>
              </div>

              <!-- lägg till todo startar här -->
              <div...

CSS

:root {
    --primary-color: #B0C7BD;
    --second-color: #B5BED4;
    --accent-color: #DE9BA7;
}

body {
    margin: 0;
    background-color: var(--primary-color);
}

.body-container {
    width: 100%;
    justify-content: center;
    gap: 1rem;
}

aside {
    display: flex;
    flex-direction: column;
    width: 27rem;
}

.date-and-time {
    background-color: #9d9db8;
    height: 5rem;
    margin-left: 0.5rem;
}

.date-and-time-mobile {
    display: none;
}
/* planing todo aside start here */
.planning-container {
    background-color: #ffffffbe;
    margin-top: 1.5rem;
    height: 33rem;
    margin-left: 0.5rem;
    /* background-image: linear-gradient( 
        45deg, 
        #dcfcfcc6, 
        #d6dbe9 
        )*/
}

.container {
    display: flex;
    width: 100%;
    justify-content: center;
}


.todo-list {
    display: grid;
    width: 25rem;
    gap: 1rem;
}

.planing-header {
    justify-content: center;
    display: inline-flex;
    border-bottom: 1px solid #B0C7BD;
    margin: 1rem;

}

.planing-options-today-all-container {
    display: inline-flex;
    justify-content: center;
    flex-direction: row;
    gap: inherit;

}


.line-between-h4 {
    border-right: 1px solid var(--primary-color);
}

.get-choosen-day-from-calender {
    display: inline-flex;
    justify-content: center;
}

.todo-input-container-add-todo {
    display: inline-flex;
    justify-content: center;
    gap: 5px;
    flex-direction: column;
    margin: 1rem;
}

.todo-input-container {
    justify-content: center;
    gap: 5px;
}

.todo-content-container {
    display: grid;
    justify-content: center;
}

.todo-content-container-all {
    display: grid;
    justify-content: center;
    gap: 10px;
    display: none;
}

.todo-content-today {
    display: inline-grid;
    gap: 10px;
}

li {
    list-style: none;
    background-color: var(--second-color);
    margin: inherit;
        
}

ul li:nth-child(odd) {
    background: var(--primary-color);
  }
/* some code for delete a...

JavaScript

document.addEventListener("DOMContentLoaded", main);

/**
 * skapa möjlighet att lägga till todo
 * se till att tillagd todo hamnar i localstorage
 * sorteras rätt
 * komma in i kalender
 * 
 */

function main() {
    
}

/**
 * start for showing todos today-all todo
 */

function showTodayTodo() {
    const showTodaysTodos = document.getElementById('todayTodoContent');
    if (showTodaysTodos.style.display === "none") {
        showTodaysTodos.style.display = "grid";
    }

    else {
        showTodaysTodos.style.display = "none";
    }
}


function showAllTodo() {
    const showAllTodos = document.getElementById('allTodoContent');
    if(showAllTodos.style.display === "none") {
        showAllTodos.style.display = "grid";
        
    }

    else {
        showAllTodos.style.display = "none";
    }
}

/**
 * start for adding todo and remove
 */

// close button remove list todo
const myTodolist = document.getElementsByTagName ("li");

for (let i = 0; i < myTodolist.length; i++) {
    const span = document.createElement("SPAN");
    const txt = document.createTextNode("\u00D7");
    span.className = "close";
    span.appendChild(txt);
    myTodolist[i].appendChild(span);
}

const close = document.getElementsByClassName("close");

for (let i = 0; i <close.length; i++) {
    close[i].onclick = function() {
        const div = this.parentElement;
        div.style.display = "none";
    }
}

const checkedList = document.querySelector('ul');
checkedList.addEventListener("click", function(ev) {
    
    if (ev.target.tagName === "li") {
        ev.target.classList.toggle('checked');
    }
}, 
false);



function newTodo() {
    const inputValue = document.getElementById("item").value;
    const inputDate = document.getElementById("date").value;
  
    if (inputValue === '') {
      alert("Du måste skriva en todo");
    }
  
    if (inputDate === '') {
      alert("du måste välja ett datum");
    } else {
  
    }
    
    /* print to current html */
    const test =...