JSFiddle - React, Tailwind, and code Playground

by Josh Pullen

HTML

<script src="https://cdn.tailwindcss.com"></script>

JavaScript

import { html, render, useState } from "https://unpkg.com/htm/preact/standalone.module.js";

function App() {
	const habits = [
  	"Make a plan",
    "Friends",
    "Exercise",
    "Shower",
    "Eat veggies",
    "Rocket Spelling",
    "Clown School"
  ];
  
  const [completedHabits, setCompletedHabits] = useState([]);
  
  const habitIsCompleted = (habit) => {
  	return completedHabits.includes(habit);
  }
  
  const setHabitIsCompleted = (habit, completed) => {
    setCompletedHabits(completedHabits => {
      let result = completedHabits.filter(h => h !== habit);
      if (completed) {
      	result.push(habit);
      }
      return result;
    });
  }

	return html`
  	<table class="w-full table-fixed">
    	<thead>
      	<tr>
        	${habits.map(habit => html`
          	<th>${habit}</th>
          `)}
        </tr>
      </thead>
      <tbody>
      	<tr>
        	${habits.map(habit => html`
          	<td class="text-center">
            	<input
              	class="w-8 h-8"
              	type="checkbox"
                checked=${habitIsCompleted(habit)}
                onChange=${(event) => {
                	setHabitIsCompleted(habit, event.target.checked);
                }}
              />
            </td>
          `)}
        </tr>
      </tbody>
    </table>
  `;
}

function useStoredState(name, defaultValue) {
	const getStoredValue = () => {
  	return localStorage.getItem(name) ?? defaultValue;
  }
  
  const setStoredValue = () => {
  	
  }

	const [value, setValue] = useState(defaultValue);
}

render(html`<${App} />`, document.body);