JSFiddle - React, Tailwind, and code Playground

by thelifeisyours

HTML

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="style.css" type="text/css">
  </head>

  <body>
    <div class="container">
      <div class="header">
        <div class="clear">
          <i class="refresh"></i>
        </div>
        <div id="date"></div>
      </div>
      <div class="grid-container">

        <div class="task">
          <div class="text status">
            <h3>Task</h3>
          </div>
          <div class="content toDo">
            <div id="list">
            </div>
          </div>
          <div class="add">
            <i class="add-task-icon"></i>
            <input type="text" id="task-name" class="add-name" placeholder="Task name">
            <textarea id="task-description" placeholder="Description" style="resize: none;" cols="15" rows="7"></textarea>
          </div>
        </div>
        <!--/task-->

        <div class="progress">
          <div class="text status">
            <h3>In progress</h3>
          </div>
          <div class="content inProgress">
            <ul id="list">
              <li class="text">Something cool</li>
            </ul>
          </div>
          <div class="add">
            <i class="add-task-icon"></i>
            <input type="text" id="progress-name" class="add-name" placeholder="Add a task">
          </div>
        </div>
        <!--/progress-->

        <div class="done">
          <div class="text status">
            <h3>Done</h3>
          </div>
          <div class="content done">
            <ul id="list">
              <li class="text">Something cool</li>
            </ul>
          </div>
          <div class="add">
            <i class="add-task-icon"></i>
            <input type="text" id="done-name" class="add-name" placeholder="Add a task">
          </div>
        </div>
        <!--/done-->

        <div class="filler"></div>

        <div class="members">
          <div class="text status">
...

CSS

@font-face {
  font-family: 'Titillium Web';
  src: url("fonts/TitilliumWeb-Bold.ttf");
}

body {
  padding: 0;
  margin: 0;
  font-family: 'Titillium Web';
}

.container {
  width: 1200px;
  height: 800px;
  position: absolute;
  border: 2px solid purple;
  margin: 5% 10%;
}

.header {
  width: auto;
  height: 250px;
  position: relative;
  background: url("images/Northern_lights_header.jpg");
  background-size: cover;
}

.clear {
  width: 50px;
  height: 50px;
  position: absolute;
  right: 0px;
  background-image: url("icons/arrows.png");
  background-size: 100%;
  border: 1px solid purple;
}

.clear:hover {
  cursor: pointer;
  text-shadow: 1px 3px 5px #000;
  transform: rotate(45deg);
}

#date {
  position: absolute;
  bottom: 10px;
  left: 10px;
  color: #FFF;
  font-size: 25px;
  font-family: 'Titillium Web', sans-serif;
}

.text {
  font-family: 'Titillium Web';
  font: 20px;
  color: rgb(17, 13, 241);
}

.grid-container {
  padding: 10px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 20px;
}

.content {
  position: relative;
  height: auto;
  border: 2px solid blue;
}

#list {
  position: relative;
}

.add {
  position: relative;
  height: auto;
  border: 2px solid blue;
  padding: 0;
}

.add i {
  position: absolute;
  width: 30px;
  height: 30px;
  margin: 9px 0px 0px 5px;
  bottom: 5px;
}

.add-task-icon {
  background-image: url("icons/add.png");
  background-size: cover;
  border: 1px solid purple;
}

.add-task-icon:hover {
  cursor: pointer;
}

.add-member-icon {
  background-image: url("icons/add-user.png");
  background-size: cover;
  border: 1px solid purple;
}

.add-member-icon:hover {
  cursor: pointer;
}

.add input {
  width: 150px;
  height: 30px;
  font-size: 20px;
  position: relative;
  left: 45px;
  margin: 5px 0px 5px 0px;
  padding-left: 10px;
  border: none;
}

.add-name::-webkit-input-placeholder {
  color: rgb(17, 13, 241);
  font-family: 'Titillium Web';
  font-size:...

JavaScript

const clear = document.querySelector(".clear");
const dataElement = document.getElementById("date");
const addTaskClicker = document.querySelector(".add-task-icon");
const addMemberClicker = document.querySelector(".add-member-icon");
const list = document.getElementById("list");
const taskName = document.getElementById("task-name");
const taskDescription = document.getElementById("task-description");


// variables
let LIST, id;

// get data from localstorage
let data = localStorage.getItem("TODO");

// check if data is empty or not
if (data) {
  LIST = JSON.parse(data);
  id = LIST.length; // set id to the last one in the list
  loadList(LIST); // load the list to user interface
} else {
  // if data is empty
  LIST = [];
  id = 0;
}

// load items to the user's interface
function loadList(array) {
  array.forEach(function(item) {
    addToDo(item.name, item.id, item.description, item.trash);
  });
}

// show todays date
const options = {
  weekday: "long",
  month: "short",
  day: "numeric"
};
const today = new Date();
dataElement.innerHTML = today.toLocaleDateString("no-NO", options);

// clear the local storage
clear.addEventListener("click", function() {
  localStorage.clear();
  location.reload();
});

function addToDo(toDo, id, description, trash) {

  if (trash) {
    return;
  }

  const item =
    `
        <div>
            <input type="checkbox" id="${id}" name="toDo" value="task" class="item">
            <label for="toDO" class="text taskHeader">${toDo}</label>
            <ul>
                <li class="description">${description}</li>
            </ul>
            <i class="trashcan" job="delete" id="${id}"></i>
        </div>
        `;
  const position = "beforeend";

  list.insertAdjacentHTML(position, item);
}

addTaskClicker.addEventListener("click", function() {

  const toDo = taskName.value;
  const description = taskDescription.value;

  // if the input isn't empty
  if (toDo) {
    addToDo(toDo, id, description, false);

   ...