JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>ToDoMvc</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="css/style.css">
<script>
function update(){
$(document.getElementsByClassName('todos')).empty();
$(document).ready(function () {
$.get("/todos", function (data, status) {
var response = data.map(function (item) {
var li = document.createElement("li");
li.innerText = item.task;
if (item.completed == true) {
li.classList.add('done');
$('<input type="checkbox" checked />').prependTo(li);
}
else {
li.classList.remove('done');
$('<input type="checkbox"/>').prependTo(li);
}
return li;
});
function writeToUl(selector, data) {
var ul = document.querySelector(selector);
response.forEach(function (item) {
ul.appendChild(item);
});
}
writeToUl(".todos", response)
});
});
};
</script>
</head>
<body onload="update()">
<ul class="todos" >
</ul>
<div class="newtodo">
<script>
function addToDo () {
var todo = {task: $("#todotext").val()};
var json = JSON.stringify(todo);
$.ajax({
type: "POST",
url: "http://localhost:8080/todos",
data: json,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function...