JSFiddle - React, Tailwind, and code Playground

by Becky Tomino

HTML

<form>
		<label for="name">Name:</label> 
		<input id='input' placeholder="President Name" type="text"> 
		<button onclick="loadPresidents()" type="button">Search for Presidents</button> <button type="button" onclick="clearTable()">Clear</button>
		<div id="presidentialTable"></div>
	</form>

CSS

body {
  font-family: 'Open Sans', sans-serif;
  padding: 20px 12px 10px 20px;
}

label {
    display: block;
    margin: 15px 0px 0px 0px;
    font-weight: 600;
    color: #1C2238;
}
label > span{
    width: 100px;
    font-weight: bold;
    float: left;
    padding-top: 8px;
    padding-right: 5px;
}

input {
    box-sizing: border-box;
    border: 1px solid #C2C2C2;
    box-shadow: 1px 1px 4px #EBEBEB;
    border-radius: 3px;
    padding: 7px;
    outline: none;
    margin: 10px 0;
	width: 20%;
}
input:focus{
    border: 1px solid #0C0;
}

button {
    border: none;
    padding: 8px 15px 8px 15px;
    background: #88EF5E;
    color: #1C2238;
    box-shadow: 1px 1px 4px #DADADA;
    border-radius: 3px;
    margin: 15px 0;
    font-size: 1em;
}
button:hover{
    background: #EA7B00;
    color: #fff;
}

table
{
    border-collapse: collapse;
}

td {
    padding: .5em;
}

JavaScript

function loadPresidents() {
    "use strict";
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (this.readyState === 4 && this.status === 200) {
            var data = this.responseText,
                jsonResponse = JSON.parse(data),
                table = document.createElement('table');
			
            table.setAttribute('class', 'history');
            var properties = ['number', 'name', 'date', 'took_office', 'left_office'];
            var capitalize = function(s) {
                return s.charAt(0).toUpperCase() + s.slice(1);
            };

            function filterPresidents(data) {
                var input = document.getElementById('input').value;
                return data.filter(function(historicalData) {
                    return historicalData.name.toLowerCase().indexOf(input.toLowerCase()) != -1;
                });

            }

            var tr = document.createElement('tr');
            for (var i = 0; i < properties.length; i++) {
                var th = document.createElement('th');
                th.appendChild(document.createTextNode(capitalize(properties[i])));
                tr.appendChild(th);
            }

            table.appendChild(tr);

            var tr, row;
            var filtered = filterPresidents(jsonResponse["presidents"].president);
            for (var r = 0; r < filtered.length; r++) {
                tr = document.createElement('tr');
                row = filtered[r];
                for (var i = 0; i < properties.length; i++) {
                    var td = document.createElement('td');
                    td.appendChild(document.createTextNode(row[properties[i]]));
                    tr.appendChild(td);
                }
                table.appendChild(tr);
            }
			
			if (document.getElementById('presidentialTable').innerHTML !== "") {
				document.getElementById("presidentialTable").innerHTML = "";
			} else {
           ...