Samuelpasaribu/index.html Secret

## index.html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tabel Dinamis dengan Navigasi Menggunakan JavaScript</title>

    <style>
        * {
            box-sizing: border-box;
        }

        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
        }

        h1 {
            text-align: center;
            margin-bottom: 30px;
        }

        .search-container {
            display: flex;
            justify-content: center;
            margin-bottom: 20px;
        }

        .search-input {
            width: 300px;
            padding: 10px;
            font-size: 14px;
        }

        #table-container {
            max-width: 800px;
            margin: 0 auto;
        }

        #table-container table {
            width: 100%;
            border-collapse: collapse;
        }

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

        #table-container th {
            background-color: #f2f2f2;
        }

        #page-info {
            margin-top: 10px;
        }

        @media (max-width: 600px) {
            .search-container {
                flex-direction: column;
            }

            .search-input {
                width: 100%;
                margin-bottom: 10px;
            }
        }
    </style>
</head>

<body>
    <h1>Tabel Dinamis dengan Navigasi Menggunakan JavaScript</h1>

    <div class="search-container">
        <input type="text" id="search-input" class="search-input" placeholder="Cari berdasarkan nama, usia, atau alamat">
    </div>

    <div id="table-container">
        <table>
            <thead>
                <tr>
                    <th>Nama</th>
                    <th>Usia</th>
                    <th>Alamat</th>
                </tr>
            </thead>
            <tbody id="table-body"></tbody>
        </table>
        <div id="page-info"></div>
    </div>

    <script>
        const data = [{
                nama: "John Doe",
                usia: 25,
                alamat: "Jakarta"
            },
            {
                nama: "Jane Smith",
                usia: 30,
                alamat: "Surabaya"
            },
            {
                nama: "David Johnson",
                usia: 35,
                alamat: "Bandung"
            },
            {
                nama: "Emily Davis",
                usia: 28,
                alamat: "Medan"
            },
            {
                nama: "Michael Wilson",
                usia: 32,
                alamat: "Yogyakarta"
            },
        ];

        const searchInput = document.getElementById("search-input");
        searchInput.addEventListener("input", handleSearch);

        renderTable(data);

        function renderTable(data) {
            const tableBody = document.getElementById("table-body");
            tableBody.innerHTML = "";

            data.forEach(item => {
                const row = document.createElement("tr");

                const namaCell = document.createElement("td");
                namaCell.textContent = item.nama;
                row.appendChild(namaCell);

                const usiaCell = document.createElement("td");
                usiaCell.textContent = item.usia;
                row.appendChild(usiaCell);

                const alamatCell = document.createElement("td");
                alamatCell.textContent = item.alamat;
                row.appendChild(alamatCell);

                tableBody.appendChild(row);
            });
        }

        function handleSearch() {
            const searchText = searchInput.value.toLowerCase();
            const filteredData = data.filter(item => {
                return (
                    item.nama.toLowerCase().includes(searchText) ||
                    item.usia.toString().includes(searchText) ||
                    item.alamat.toLowerCase().includes(searchText)
                );
            });

            renderTable(filteredData);
        }
    </script>
</body>

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

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Tabel Dinamis dengan Navigasi Menggunakan JavaScript</title>

	<style>
	* {
	box-sizing: border-box;
	}

	body {
	font-family: Arial, sans-serif;
	margin: 0;
	padding: 20px;
	}

	h1 {
	text-align: center;
	margin-bottom: 30px;
	}

	.search-container {
	display: flex;
	justify-content: center;
	margin-bottom: 20px;
	}

	.search-input {
	width: 300px;
	padding: 10px;
	font-size: 14px;
	}

	#table-container {
	max-width: 800px;
	margin: 0 auto;
	}

	#table-container table {
	width: 100%;
	border-collapse: collapse;
	}

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

	#table-container th {
	background-color: #f2f2f2;
	}

	#page-info {
	margin-top: 10px;
	}

	@media (max-width: 600px) {
	.search-container {
	flex-direction: column;
	}

	.search-input {
	width: 100%;
	margin-bottom: 10px;
	}
	}
	</style>
	</head>

	<body>
	<h1>Tabel Dinamis dengan Navigasi Menggunakan JavaScript</h1>

	<div class="search-container">
	<input type="text" id="search-input" class="search-input" placeholder="Cari berdasarkan nama, usia, atau alamat">
	</div>

	<div id="table-container">
	<table>
	<thead>
	<tr>
	<th>Nama</th>
	<th>Usia</th>
	<th>Alamat</th>
	</tr>
	</thead>
	<tbody id="table-body"></tbody>
	</table>
	<div id="page-info"></div>
	</div>

	<script>
	const data = [{
	nama: "John Doe",
	usia: 25,
	alamat: "Jakarta"
	},
	{
	nama: "Jane Smith",
	usia: 30,
	alamat: "Surabaya"
	},
	{
	nama: "David Johnson",
	usia: 35,
	alamat: "Bandung"
	},
	{
	nama: "Emily Davis",
	usia: 28,
	alamat: "Medan"
	},
	{
	nama: "Michael Wilson",
	usia: 32,
	alamat: "Yogyakarta"
	},
	];

	const searchInput = document.getElementById("search-input");
	searchInput.addEventListener("input", handleSearch);

	renderTable(data);

	function renderTable(data) {
	const tableBody = document.getElementById("table-body");
	tableBody.innerHTML = "";

	data.forEach(item => {
	const row = document.createElement("tr");

	const namaCell = document.createElement("td");
	namaCell.textContent = item.nama;
	row.appendChild(namaCell);

	const usiaCell = document.createElement("td");
	usiaCell.textContent = item.usia;
	row.appendChild(usiaCell);

	const alamatCell = document.createElement("td");
	alamatCell.textContent = item.alamat;
	row.appendChild(alamatCell);

	tableBody.appendChild(row);
	});
	}

	function handleSearch() {
	const searchText = searchInput.value.toLowerCase();
	const filteredData = data.filter(item => {
	return (
	item.nama.toLowerCase().includes(searchText) \|\|
	item.usia.toString().includes(searchText) \|\|
	item.alamat.toLowerCase().includes(searchText)
	);
	});

	renderTable(filteredData);
	}
	</script>
	</body>

	</html>