JSFiddle - React, Tailwind, and code Playground

by landau

CSS

body {
  font-size: 25px
}

JavaScript

let id = 0;

const todos = [
  createTodo('Fantastic'),
  createTodo('Have fun'),
  createTodo('already done', true)
];

printTodos(todos);

const colors = [
  '#9400D3',
  '#4B0082',
  '#0000FF',
  '#00FF00',
  '#FFFF00',
  '#FF7F00',
  '#FF0000'
];

function toText(todo) {
  const color = todo.done ? 'grey' : 'red';
  return `<span style="color:${color}">${todo.text}</span>`;
}

function printTodos(todos) {
  document.body.appendChild(
    todos.reduce((ul, todo) => {
      const li = document.createElement('li');
      const [_, time] = new Date(todo.modifiedAt).toISOString().split('T');

      li.innerHTML = `${toText(todo)} (${time})`;

      ul.appendChild(li);
      return ul;
    }, document.createElement('ul'))
  );
}

// --- Helpers Don't change
function createTodo(text, done = false, modifiedAt = Date.now()) {
  id++;

  return {
    id: id,
    text,
    done,
    modifiedAt
  };
}

function changeTodoDoneState(todo) {
  todo.done = !todo.done;
  todo.modifiedAt = Date.now();
  return todo;
}