JSFiddle - React, Tailwind, and code Playground

by Prathameshsb

HTML

<!DOCTYPE html>
<html lang="en-US">
  <head>
      <title>Phone Directory</title>
    <link href="./css/style.css"  rel="stylesheet" type="text/css"/>
  </head>
  <body>
    <main>
    <h1 class="margin20 textCenter fs20">Phone Directory</h1>
    <div class="textCenter">
      <div class="textCenter inputContent">
        <div class="txtLeft marginTB40 fb">
          <form class="txtLeft" onSubmit="event.preventDefault();">
          <input type="text" id="name" value="" aria-label="Contact Name" placeholder="Contact Name"/>
          <input type="number" maxlength="10" id="mobile" value="" aria-label="Mobile Number" placeholder="Mobile Number"/>
          <input type="email" id="email" value="" aria-label="Email" placeholder="Email"/>
          <input type="submit" class="btn" id="submit" value="Add Vendor"/>
          <div id="error" class="dn error padT10 textCenter">Invalid Input!</div>
          </form>
        </div>
      </div>
      <form class="marginT40" onSubmit="event.preventDefault();">
        <label for="search">Search contact by Mobile No:</label>
        <input type="text" id="search" value=""/>
      </form>
      <div class="marginT40 padL10 tab cursorPtr" id="contactsSummary">Contacts Summary</div>
      <div id="contactSummary" class="contactSummary">
        <table aria-labelledby="contactsSummary" id="summaryTable">
          <thead>
            <tr>
              <th><button id="nameColumn">Name</button></th>
              <th>Mobile</th> 
              <th>Email</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>Admin</td>
              <td>9999999999</td> 
              <td>[email protected]</td>
            </tr>
          </tbody>
        </table>
        <div id="noResult" class="noResult dn">No Results Found</div>
      </div>
    </div>
  </main>
  <script>
    window.contactsList = [{
      name: 'Admin',
      mobile: '9999999999',
      email: '[email protected]'
    }];
 ...

CSS

input {
  padding: 5px;
  font-size: 12px;
}
li {
  list-style: none;
}
.cursorPtr {
  cursor: pointer;
}
.dn {
  display: none;
}

.error {
  color: red;
}

.padB10 {
  padding-bottom: 10px;
}
.marginT10 {
  margin-top: 10px;
}
.marginB20 {
  margin-bottom: 20px;
}
.btn {
  padding: 5px;
  border-radius: 5px;
  background: white;
}
.btn:hover {
  cursor: pointer;
}
button:active {
  outline: none;
  border: none;
}

.fs20 {
  font-size: 20px;
  font-weight: bold;
}
.fb {
  font-weight: bold;
}
input:focus {
  outline: none !important;
}
.d-inbl {
  display: inline-block;
}
.padL10  {
  padding-left: 10px;
}
.marginT40 {
  margin-top: 40px;
}
.textCenter {
  text-align: center;
}
.margin20 {
  margin: 20px;
}
.marginT10 {
  margin-top: 10px;
}
.padT5 {
  padding-top: 5px;
}
.padT10 {
  padding-top: 5px;
}
.padL10 {
  padding-left: 10px;
}
.marginT5 {
  margin-top: 5px;
}
.marginTB40 {
  margin: 40px 0;
}
.marginT30 {
  margin-top: 30px;
}
.marginT20 {
  margin-top: 20px;
}
.txtLeft {
  text-align: left;
}
.padT10 {
  padding-top: 10px;
}
.activeTab {
  background: #4cb5f3;
  border-radius: 10px;
}
.tab {
  font-weight: bold;
  padding: 5px 25px;
}

.inputContent {
  background: #ff9900;
  border: 2px solid #232F3E;;
  padding: 0px 20px;
  display: inline-block;
  border-radius: 12px;
}

.noResult {
  color: red;
  padding-top: 10px;
}

.contactSummary {
  width: 40%;
  margin: auto;
}
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
th, td {
  padding: 10px;
  min-width: 150px;
  text-align: left;    
}
tr:nth-child(odd) {
  background-color: #f2f2f2;
}

#nameColumn {
    background-color: transparent;
    border: none;
    font-weight: inherit;
    font-family: inherit;
    font-size: inherit;
    padding: 0;
}

JavaScript

function validateName() {
  const nameInput = document.getElementById('name');
  const nameError = document.getElementById('error');
  console.log(nameError);
  const name = nameInput.value.trim();
  const nameRegex = /^[A-Za-z ]{1,20}$/;

  if (!name) {
    // nameError.style.display = 'block';
    return;
  } else if (!nameRegex.test(name)) {
    nameError.style.display = 'block';
    return;
  } else {
    nameError.style.display = 'none';
    return name;
  }

}

function validateMobile() {
  const mobileInput = document.getElementById('mobile');
  const mobileError = document.getElementById('error');
  const mobile = mobileInput.value.trim();
  const mobileRegex = /^[0-9]{10}$/;

  if (!mobile) {
    // mobileError.style.display = 'block';
    return;
  } else if (!mobileRegex.test(mobile)) {
    mobileError.style.display = 'block';
    return;
  } else {
    mobileError.style.display = 'none';
    return mobile;
  }
}

function validateEmail() {
  const emailInput = document.getElementById('email');
  const emailError = document.getElementById('error');
  const email = emailInput.value.trim();
  const emailRegex = /^[a-zA-Z][a-zA-Z0-9.]{1,10}@[a-zA-Z]{2,20}\.[a-zA-Z]{2,10}$/;

  if (!email) {
    // emailError.style.display = 'block';
    return;
  } else if (!emailRegex.test(email)) {
    emailError.style.display = 'block';
    return;
  } else {
    emailError.style.display = 'none';
    return email;
   } 
}

const submitBtn = document.getElementById('submit');
const errorBlock = document.getElementById('error');
submitBtn.addEventListener('click', handleSubmit);
function handleSubmit() {
  event.preventDefault(); // Prevent form submission if there are validation errors
  const name = validateName();
  const number = validateMobile();
  const email = validateEmail();
  console.log('hello')

  if(!name || !email || !number){
    errorBlock.style.display = 'block';
     return;
  } else {
    window.contactsList.push({
      name: name,
      mobile:...