Assignment-Submission/Assignment03.html at main · Moon1Knight/Assignment-Submission · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<!DOCTYPE html>
<html>
<head>
	<title>Search Results</title>
	<style>
		table {
			border-collapse: collapse;
			width: 100%;
		}

		th, td {
			text-align: left;
			padding: 8px;
			border: 1px solid #ddd;
		}

		th {
			background-color: #f2f2f2;
		}
	</style>
</head>
<body>
	<h1>Search Results</h1>
	<form>
		<label for="searchTerm">Search:</label>
		<input type="text" id="searchTerm" name="searchTerm">
		<button type="submit" onclick="search(event)">Submit</button>
	</form>
	<table id="resultsTable">
		<thead>
			<tr>
				<th>Title</th>
				<th>Description</th>
			</tr>
		</thead>
		<tbody>
		</tbody>
	</table>

	<script>
		var data = [
			{
				"title": "Lorem ipsum",
				"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
			},
			{
				"title": "Dolor sit amet",
				"description": "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium."
			},
			{
				"title": "Consectetur adipiscing elit",
				"description": "Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt."
			}
		];

		function search(event) {
			event.preventDefault();
			var searchTerm = document.getElementById("searchTerm").value;
			var results = [];
			for (var i = 0; i < data.length; i++) {
				if (data[i].title.toLowerCase().includes(searchTerm.toLowerCase()) || data[i].description.toLowerCase().includes(searchTerm.toLowerCase())) {
					results.push(data[i]);
				}
			}
			displayResults(results);
		}

		function displayResults(results) {
			var tableBody = document.getElementById("resultsTable").getElementsByTagName("tbody")[0];
			tableBody.innerHTML = "";
			if (results.length === 0) {
				var row = tableBody.insertRow();
				var cell = row.insertCell();
				cell.colSpan = 2;
				cell.innerHTML = "No results found.";
			} else {
				for (var i = 0; i < results.length; i++) {
					var row = tableBody.insertRow();
					var titleCell = row.insertCell();
					titleCell.innerHTML = results[i].title;
					var descriptionCell = row.insertCell();
					descriptionCell.innerHTML = results[i].description;
				}
			}
		}
	</script>
</body>
</html>