<!doctype html>
<html lang="en-US">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Phone Directory</title>
<link href="./styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<main>
<div class="app-container">
<h1>Phone Directory</h1>
<form>
<input type="text" id="name" placeholder="Contact Name" />
<input type="number" id="mobile" placeholder="Mobile Number" />
<input type="email" id="email" placeholder="Email" />
<input type="submit" id="submit" value="Add Vendor" />
<div id="error" class="error">Invalid email address.</div>
</form>
<form>
<label for="search">Search contact by Mobile No:</label>
<input type="text" id="search" />
</form>
<h2>Contacts Summary</h2>
<table id="summaryTable">
<thead>
<tr>
<th><button id="nameColumn">Name</button></th>
<th>Mobile</th>
<th>Email</th>
</tr>
</thead>
<tbody></tbody>
</table>
<div id="noResult" class="noResult dn">No Results Found</div>
</div>
</main>
<script src="./script.js"></script>
</body>
</html>
