JSFiddle - React, Tailwind, and code Playground

by brigand

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;700;800;900&display=swap"
        rel="stylesheet">
    <title>Address Book</title>
</head>

<body>
    <section class="container">
        <h1>Address Book</h1>
        <hr>
        <form>
            <div class="form-group">
                <label>Name <small class="required">(Required)</small></label>
                <input type="text" id="fname" class="form-control" placeholder="Barbara">
                <small class="form-text">Please type your first name.</small>
            </div>
            <div class="form-group">
                <label>Surname</label>
                <input type="text" id="sname" class="form-control " placeholder="Smith">
                <small class="form-text">Please type your last name.</small>

            </div>

            <div class="form-group">
                <label>Phone <small class="required">(Required)</small></label>
                <input type="number" id="phoneNumber" name="phone" required class="form-control "
                    placeholder="+(48) 796 8582">
                <small class="form-text">Please type your phone number.</small>

            </div>
            <div class="form-group">
                <label>Address</label>
                <input type="text" id="homeAddress" class="form-control " placeholder="Apt no, stree, city, country">
                <small class="form-text">Please type your address.</small>

            </div>


            <button class="add" type="button" onclick="add()">Add</button>

            <div id="msgAlert">
                Please fill in the required fileds.
            </div>
        </form>

        <hr>

        <div>
            <div class="form-group">
                <label>Search</label>
                <input type="text"...

CSS

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

body {
  background-color: #343a40;
  color: white;
}

.container {
  width: 800px;
  margin: auto;
  margin-top: 20px;
  margin-bottom: 20px;
  padding: 20px;
}

h1 {
  font-weight: 900;
  font-size: 32px;
}

hr {
  margin-top: 1rem;
  margin-bottom: 1rem;
  border: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.form-text {
  display: block !important;
}

.form-group {
  display: inline-block;
  margin-bottom: 10px;
  margin-right: 100px;
}

.form-control {
  display: block;
  background: #343a40;
  border: solid white 1px;
  border-radius: 2px;
  padding: 10px;
  color: white;
  margin-top: 5px;
}

button {
  padding: 10px;
  background-color: #007bff;
  border-radius: 3px;
  outline: none;
  border: none;
  color: white;
}

#delete {
  padding: 10px;
  background-color: red;
  border-radius: 3px;
  outline: none;
  border: none;
  color: white;
}

label {
  font-size: 16px;
  font-weight: 600 !important;
}

table {
  margin-top: 20px;
}

tr {
  background-color: #ffffff0d;
}

th {
  padding: 10px 40px;
}

td {
  padding: 10px 40px;
  background-color: #0082004d;
}

#msgAlert {
  background-color: #ff9494;
  width: 40%;
  border-radius: 3px;
  padding: 20px;
  margin: 20px 0;
  color: red;
}

.required {
  color: orange;
  font-size: 10px;
}

/*# sourceMappingURL=style.css.map */

JavaScript

let contacts = []
let seachQuery = null

const add = () => {
    const name = document.getElementById('fname').value
    const surname = document.getElementById('sname').value
    const phone = document.getElementById('phoneNumber').value
    const address = document.getElementById('homeAddress').value

    contacts.push({
        name,
        surname,
        phone,
        address
    })

    render()
}

const search = () => {
    searchQuery = document.getElementById('searchQuery').value;
    render()
}

const clearSearch = () => {
    document.getElementById('searchQuery').value = '';
    searchQuery = null;
    render();
}

const deleteContact = (name, surname, phone, address) => {
    contacts = contacts.filter(contact =>
        contact.name !== name ||
        contact.surname !== surname ||
        contact.phone !== phone ||
        contact.address !== address
    )
    render()
}

const render = () => {

    document.getElementById('contacts').innerHTML = contacts
        .filter(contact => !searchQuery
            || contact.name.includes(searchQuery)
            || contact.surname.includes(searchQuery)
            || contact.phone.includes(searchQuery)
            || contact.address.includes(searchQuery)
        )
        .map(contact => `
            <tr id="contact" class="contact">
                <td id="name">${contact.name}</td>
                <td id="surname">${contact.surname}</td>
                <td id="phone">${contact.phone}</td>
                <td id="address">${contact.address}</td>
                <td>
                    <button id="delete" onclick="deleteContact('${contact.name}','${contact.surname}','${contact.phone}', '${contact.address}')">X</button>
                </td>
            </tr>
        `)
        .join('')
}
render()