JSFiddle - React, Tailwind, and code Playground

by Emily Humphrey

HTML

<form>
	<input type="text" required>
	<input type="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$" required>
	<button>Send</button>
</form>

<style>
input, button {
	border: 5px solid #aaa;
}

input:invalid {
	border-color: red;
}
</style>

CSS

input, button {
	border: 5px solid #aaa;
}

input:invalid {
	border-color: red;
}

JavaScript

const url = "https://jsonplaceholder.typicode.com/todos";
const wrap = document.getElementById("wrap");

fetch(url)
  .then((response) => response.json())
  .then((data) => {
		let elements = "";
		for(let i = 0; i < 5; i++){
			elements+= `<div><h2>${data[i].title}</h2><span>${data[i].completed}</span></div>`;
		}
		wrap.innerHTML = elements;
	});