Halo gais! Meskipun Pemilu 2024 sudah lewat, tidak ada salahnya jika kita membuatnya dalam Kode Program? Kali ini kita akan membuat Program Pemilihan Umum 2024 yang terdiri dari Nama Paslon dan Partai Politik dalam Bahasa JavaScript dan ditampilkan dengan menggunakan HTML.
.png)
Sumber Kode Program : GitHub Inzaghi's Dev (inzaghidev)
Untuk Software-nya, Anda bisa menggunakan Notepad++, Sublime Text, ataupun VS Code, dan ditampilkan melalui Browser Anda. Bahkan Anda juga bisa menggunakan Online Compiler yang ada di Internet seperti Programiz, OneCompiler, OnlineGDB, dll.
Dan inilah Program HTML dan JavaScript untuk menampilkan dan menginput Pasangan Calon Presiden dan Partai Politik Peserta Pemilu 2024 :
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Program Pemilihan Umum 2024</title></head><body><h1>Program Pemilihan Umum 2024</h1><form id="electionForm"><label for="paslon">Pilih Pasangan Calon:</label><select id="paslon"><option value="-1">-- Pilih Pasangan Calon --</option></select><br /><br /><label for="partai">Pilih Partai Politik:</label><select id="partai" disabled><option value="-1">-- Pilih Partai Politik --</option></select><br /><br /><input type="submit" value="Submit" /></form><div id="hasilPilihan" style="display: none;"><h2>PILIHAN ANDA</h2><p id="paslonOutput"></p><p id="partaiOutput"></p></div><script>const paslonPemilu2024 = ["Anies-Muhaimin","Prabowo-Gibran","Ganjar-Mahfud",];const parpolPemilu2024 = ["PKB", "Gerindra", "PDIP", "Golkar", "Nasdem", "Buruh", "Gelora", "PKS", "PKN", "Hanura","Garuda", "PAN", "PBB", "Demokrat", "PSI", "Perindo", "PPP", "Ummat",];const paslonSelect = document.getElementById("paslon");const partaiSelect = document.getElementById("partai");const hasilPilihan = document.getElementById("hasilPilihan");const paslonOutput = document.getElementById("paslonOutput");const partaiOutput = document.getElementById("partaiOutput");// Populate Paslon optionspaslonPemilu2024.forEach((paslon, index) => {const option = document.createElement("option");option.text = paslon;option.value = index;paslonSelect.appendChild(option);});// Event listener for Paslon selectionpaslonSelect.addEventListener("change", () => {const selectedPaslonIndex = paslonSelect.value;partaiSelect.innerHTML = ""; // Clear existing optionsconst option = document.createElement("option");option.text = "-- Pilih Partai Politik --";option.value = "-1";partaiSelect.appendChild(option);if (selectedPaslonIndex !== "-1") {partaiSelect.disabled = false;let allowedParties = [];if (selectedPaslonIndex == 0) {// Anies-MuhaiminallowedParties = ["PKB", "Nasdem", "PKS", "Ummat"];} else if (selectedPaslonIndex == 2) {// Ganjar-MahfudallowedParties = ["PDIP", "Hanura", "Perindo", "PPP"];} else {// Prabowo-GibranallowedParties = parpolPemilu2024.filter((p) => !["PKB", "Nasdem", "PKS", "Ummat", "PDIP", "Hanura", "Perindo", "PPP"].includes(p));}allowedParties.forEach((party, index) => {const option = document.createElement("option");option.text = party;option.value = index;partaiSelect.appendChild(option);});} else {partaiSelect.disabled = true;}});// Event listener for form submissiondocument.getElementById("electionForm").addEventListener("submit", (event) => {event.preventDefault();const paslonIndex = paslonSelect.value;const partaiIndex = partaiSelect.value;if (paslonIndex !== "-1" && partaiIndex !== "-1") {paslonOutput.textContent = `Pasangan Calon : ${paslonPemilu2024[paslonIndex]}`;partaiOutput.textContent = `Partai Politik : ${parpolPemilu2024[partaiIndex]}`;hasilPilihan.style.display = "block";} else {alert("Pilih Paslon dan Partai Politik terlebih dahulu.");}});</script></body></html>
Tampilan Output Awal :
Input dan Output (Memilih Anies-Muhaimin) :
Input dan Output (Memilih Prabowo-Gibran) :
Input dan Output (Memilih Ganjar-Mahfud) :
Mohon maaf apabila ada kesalahan sedikit pun pada Kode Program ini.
Terima Kasih 😀😊😘👌👍 :)