JSFiddle - React, Tailwind, and code Playground

by diogocosta

HTML

<div class="small-container">
  <h1>Dados</h1>
  <form>
    <input id="item" type="text" placeholder="dado"><br>
    <input id="item2" type="text" placeholder="dado2">
    <button type="button" id="btnCreate">create</button>    
  </form>
  <h2>Items</h2>
  <section></section>
  <button id="btnClear">Limpar</button>
</div>

CSS

.mydiv {
  background-color: green;
}
.mydiv2 {
  background-color: orange;
}

JavaScript

const form = document.querySelector('form');
const section = document.querySelector('section');
const button = document.querySelector('button');
const input = document.getElementById('item');
const input2 = document.getElementById('item2');
let itemsArray = localStorage.getItem('items') ? JSON.parse(localStorage.getItem('items')) : [];

const data = JSON.parse(localStorage.getItem('items'));

const divMaker = (text, className) => {
  const div = document.createElement('div');
  div.setAttribute('class', className)
  div.textContent = text;
  section.appendChild(div);
}

function create() {
  itemsArray.push(input.value);
  itemsArray.push(input2.value);
  localStorage.setItem('items', JSON.stringify(itemsArray));
  divMaker(input.value, 'mydiv');
  divMaker(input2.value, 'mydiv2');
  input.value = input2.value = "";
}

data.forEach((item, index) => {
  divMaker(item, index % 2 === 0 ? 'mydiv' : 'mydiv2');
})

function clear() {
  localStorage.removeItem('items');
  section.innerHTML = '';
  itemsArray = [];
}

window.onload = function() {
	document.getElementById('btnCreate').onclick = create
  document.getElementById('btnClear').onclick = clear
}