JSFiddle - React, Tailwind, and code Playground

by rami7250

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
  </head>
  <body>
    <h2>My Phonebook</h2>

    <input
      type="text"
      id="myInput"
      onkeyup="myFunction()"
      placeholder="Search for names.."
      title="Type in a name"
    />

    <ul id="myUL"></ul>

CSS

body {direction:rtl;}
      * {
        box-sizing: border-box;
      }

      #myInput {
        background-image: url('/css/searchicon.png');
        background-position: 10px 12px;
        background-repeat: no-repeat;
        width: 100%;
        font-size: 16px;
        padding: 12px 20px 12px 40px;
        border: 1px solid #ddd;
        margin-bottom: 12px;
      }

      
      #myUL {
        list-style-type: none;
        padding: 0;
        margin: 0;
      }
      
      #mytopbar {
        background-position: 10px 12px;
        width: 100%;
        font: 18px Arial, sans-serif;
        padding: 10px;
        border: 1px solid #000;
        background:#114559;
        margin-bottom: 12px;
        color:white;
        font-weight:bold;
      }

      #myUL li a {
        border: 1px solid #ddd;
        margin-top: -1px; /* Prevent double borders */
        background-color: #f6f6f6;
        padding: 12px;
        text-decoration: none;
        font-size: 18px;
        color: black;
        display: block;
      }
td {padding-left:40px;}
td.rt {padding-right:10px;}
        
      #myUL li a:hover:not(.header) {
        background-color: #eee;
      }

JavaScript

function myFunction() {
        var items = ['Adelle', 'David', 'Billy', 'Bob', 'Calvin', 'Christina', 'Cindy'];
        var input, filter, ul, li, a, i, txtValue;
        input = document.getElementById('myInput');
        filter = input.value.toUpperCase();

        ul = document.getElementById('myUL');
        ul.innerHTML = '';
        for (let i = 0; i < items.length; i++) {
          const item = items[i];
          if (filter && item.toUpperCase().includes(filter.toUpperCase())) { 
            ul.innerHTML += `<div id="mytopbar"><table><td class="rt">Name</td><td>Class</td><td>Year</td></table></div>
            <br><li><a href="#">${item}</a></li>`;
          }
        }
      }