Puzzle
Implementasi HTML, CSS, dan JavaScript
Implementasi HTML, CSS, dan JavaScript adalah proses penggabungan tiga bahasa tersebut untuk membuat halaman web yang interaktif dan responsif.
Kita akam membuat halaman sederhana dimana pengguna bisa input nama dan menampilkan salam dengan nama tersebut.
HTML Input Nama & Tombol
- HTML dipakai untuk membuat struktur halaman dan form sederhana.
<div class="card">
<h2>Masukkan Nama Anda</h2>
<input type="text" id="nama" placeholder="contoh: Aisyah">
<button>Tampilkan Ucapan</button>
<div id="hasil"></div>
</div>CSS Menata tampilan halaman
body {
font-family: Arial, sans-serif;
background: #f8fbff;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.card {
background: white;
padding: 25px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0,0,0,0.12);
width: 320px;
text-align: center;
}
button {
width: 100%;
margin-top: 15px;
padding: 10px;
border: none;
background: #0077cc;
color: white;
font-size: 16px;
cursor: pointer;
}
#hasil {
margin-top: 20px;
font-weight: bold;
display: none;
}JavaScript, Menampilkan Ucapan salam
function tampilkanUcapan() {
const nama = document.getElementById("nama").value;
if (!nama) {
alert("Nama belum diisi!");
return;
}
const hasil = document.getElementById("hasil");
hasil.style.display = "block";
hasil.innerHTML =
"Assalamu'alaikum " + nama +
". Semoga hari Anda penuh keberkahan dan kemudahan dari Allah.";
}Hasil akhir
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Ucapan Selamat Datang</title>
<style>
body {
font-family: Arial, sans-serif;
background: #f8fbff;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.card {
background: white;
padding: 25px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0,0,0,0.12);
width: 320px;
text-align: center;
}
input {
width: 100%;
padding: 10px;
margin-top: 12px;
}
button {
width: 100%;
margin-top: 15px;
padding: 10px;
border: none;
background: #0077cc;
color: white;
font-size: 16px;
cursor: pointer;
}
#hasil {
margin-top: 20px;
font-weight: bold;
display: none;
}
</style>
</head>
<body>
<div class="card">
<h2>Masukkan Nama Anda</h2>
<input type="text" id="nama" placeholder="contoh: Aisyah">
<button onclick="tampilkanUcapan()">Tampilkan Ucapan</button>
<div id="hasil"></div>
</div>
<script>
function tampilkanUcapan() {
const nama = document.getElementById("nama").value;
if (!nama) {
alert("Nama belum diisi!");
return;
}
const hasil = document.getElementById("hasil");
hasil.style.display = "block";
hasil.innerHTML =
"Assalamu'alaikum " + nama +
". Semoga hari Anda penuh keberkahan dan kemudahan dari Allah.";
}
</script>
</body>
</html>