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 setHabitCompleted = (habit, completed) => {
    setCompletedHabits(completedHabits => {
    	const without = completedHabits.filter(h => h !== habit);
      let result = without;
      if ()
    })
  }

	return html`
  	<table>
    	<thead>
      	<tr>
        	${habits.map(habit => html`
          	<th>${habit}</th>
          `)}
        </tr>
      </thead>
      <tbody>
      	<tr>
        	${habits.map(habit => html`
          	<td><input type="checkbox" /></td>
          `)}
        </tr>
      </tbody>
    </table>
  `;
}

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