JSFiddle - React, Tailwind, and code Playground

by DupontTD

HTML

<section id="calendar" class="calendar" style="display: block; font-family: Times;">

  <h1>Tâches</h1>

  <input type="text" placeholder="add task">

  <ol class="events">
  </ol>

</section>

CSS

body {
  display: flex;
  justify-content: center;
  font-family: 'Reenie Beanie', serif;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  text-shadow: 6px 6px 6px #ccc;
}

html {
  font-size: 16px;
}

.calendar {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  display: none;
  background: white;
  border: 1px solid #dedede;
  font-family: "Reenie Beanie";
  margin: 20px 40px 10px;
  padding: 15px 15px 35px 15px;
  position: static;
  z-index: 1;
}

header {
  position: relative;
  text-align: center;
}

header .date {
  color: #bebebe;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 2em;
  letter-spacing: -0.1em;
  line-height: 1.4em;
  margin: 0;
  text-transform: uppercase;
}

header .date b {
  display: block;
  font: bold 1em/0.8em Helvetica, Arial, sans-serif;
  letter-spacing: 0;
}

header a {
  border-bottom: 1px solid #edb330;
  color: #777777;
  font-size: 1.6em;
  padding-bottom: 2px;
  position: absolute;
  text-decoration: none;
  top: 10px;
}

h1 img {
  margin-right: 10px;
  position: relative;
  top: 5px;
  width: 35px;
  height: 35px;
}

.calendar {
  width: 300px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background: white;
  border: 1px solid #dedede;
  font-family: "Reenie Beanie";
  margin: 20px 40px 10px;
  padding: 15px 15px 35px 15px;
  position: absolute; //  left : 200px;
  z-index: 1;
}

section form {
  //  visibility: hidden; 
  position: relative;
  width: 100%;
}

section form input {
  display: block;
}

section form input[type=submit] {
  position: absolute;
  width: 100px;
  right: 0px;
  top: 0px;
}

JavaScript

class Taches {

  constructor() {
    this.$todoList = document.querySelector('section ol.events');
    this.$newTodo = document.querySelector('input');    
  }

  getEvents() {
    Taches.events = localStorage.getItem('taches') ? JSON.parse(localStorage.getItem('taches')) : [];
    if (this.$newTodo.value !== "") {
      Taches.events.push({name: this.$newTodo.value});
    }
    localStorage.setItem('taches', JSON.stringify(Taches.events));
    return this;
  }

  displayEvents() {
    this.$todoList.innerHTML = Taches.events.reduce((a, item) => a + `<li>${item.name}</li>`, '');
    return this;
  }

  setUp() {
    this.getEvents().displayEvents().$newTodo.addEventListener("change", (event) => {
      this.getEvents().displayEvents().$newTodo.value = "add task";
    });
  }
};


new Taches().setUp();