Sesuai judul artikel saya akan membuat kode kode html untuk nge gombal sang pacar kamu nah ini ada sedikit gabungan script atau kode javascript dan css. Kode yang saya buat tidak perlu sangat di pahami cukup nanti kamu copy dan paste aja lalu berikan nama index.html.
1. Pesan Untuk Pacar Ketika Tombol Klik Aku Di Tekan
Kode html dan javascript ketika pacar kamu menekan tombol klik aku :
<!doctype html>
<html>
<head>
<title>Sayang</title>
</head>
<body>
<form>
<center>
<h1></h1>
<button type="button">Klik Aku</button>
</center>
</form>
<script>
let btn = document.getElementsByTagName('button')[0];
let h1 = document.getElementsByTagName('h1')[0];
btn.addEventListener('click', function(){
setTimeout(function(){
h1.innerHTML = "Halo sayang :D";
}, 100);
setTimeout(function(){
h1.innerHTML = " Aku mencintaimu :D";
}, 1500);
setTimeout(function(){
h1.innerHTML = " Jangan pernah tinggalin aku yah :)";
}, 3000);
});
</script>
</body>
</html>Nah hasil tersebut bisa di lihat di sini.
2. Menampilkan 5 Peringatan Khusus Untuk Pacar
Menampilkan 5 peringatan khusus untuk pacar ketika tombol klik dong di tekan :
<!doctype html>
<html>
<head>
<title>Sayang</title>
</head>
<body>
<form>
<center><button type="button">Klik Dong</button></center>
</form>
<script>
let btn = document.getElementsByTagName('button')[0];
btn.addEventListener('click', function(){
alert('Hai manis :)');
alert('Mau bilang sesuatu buat kamu :)');
alert('Jaga kesehatan ya :)');
alert('Jangan lupa makan :)');
alert('I love you :)');
});
</script>
</body>
</html>Hasil tersebut bisa di lihat di sini.
3. Membuat Simbol Hati Untuk Pacar
Saya akan membuat simbol hati dan ini akan memberikan kode tambahan yaitu kode css nanti kamu cukup ganti h1 nya dengan nama kamu dan nama pacar kamu. Bisa lihat di bawah ini :
<!doctype html>
<html>
<head>
<title>Sayang</title>
<style>
.hati{
position: relative;
height: 160px;
width: 100px;
background: #d16ba5;
border-radius: 200px 200px 0 0;
transform: rotate(45deg)
}
.hati::before{
content: "";
position: absolute;
background: #d16ba5;
height: 160px;
width: 100px;
transform: rotate(-90deg);
border-radius: 200px 200px 0 0;
left: -30px;
top: 30px;
}
</style>
</head>
<body>
<center>
<h1>Nama kamu</h1>
<div class="hati"></div>
<h1>Nama pacar kamu</h1>
</center>
</body>
</html>Hasil tersebut bisa di lihat di sini.
4. Membuat Penulisan Text Effect Untuk Pacar
Maksud saya program yang saya buat tersebut ketika tombol di klik maka akan muncul text animasi menulis yang bergerak untuk pacar kamu. Jika masih bingung nanti saya akan bagikan hasil nya kamu cukup lihat kode di bawah ini :
<!doctype html>
<html>
<head>
<title>Sayang</title>
</head>
<body>
<form>
<center>
<button type="button">Klik Aku</button>
<h1><span class="typed-text"></span><span class="cursor"></span></h1>
</center>
</form>
<script>
let btn = document.getElementsByTagName('button')[0];
btn.addEventListener('click', function(){
btn.style.display = 'none';
const typedTextSpan = document.querySelector(".typed-text");
const cursorSpan = document.querySelector(".cursor");
const textArray = ["Halo Sayang :)", "Jangan Lupa Makan :)", "I Love You :)"]; // ganti isi di dalam kode tersebut ataupun tambahkan dengan di awali koma
const typingDelay = 85;
const erasingDelay = 50;
const newTextDelay = 1200;
let textArrayIndex = 0;
let charIndex = 0;
function type() {
if (charIndex < textArray[textArrayIndex].length) {
if(!cursorSpan.classList.contains("typing")) cursorSpan.classList.add("typing");
typedTextSpan.textContent += textArray[textArrayIndex].charAt(charIndex);
charIndex++;
setTimeout(type, typingDelay);
}
else {
cursorSpan.classList.remove("typing");
setTimeout(erase, newTextDelay);
}
}
function erase() {
if (charIndex > 0) {
if(!cursorSpan.classList.contains("typing")) cursorSpan.classList.add("typing");
typedTextSpan.textContent = textArray[textArrayIndex].substring(0, charIndex-1);
charIndex--;
setTimeout(erase, erasingDelay);
}
else {
cursorSpan.classList.remove("typing");
textArrayIndex++;
if(textArrayIndex>=textArray.length) textArrayIndex=0;
setTimeout(type, typingDelay + 1100);
}
}
if(textArray.length) setTimeout(type, newTextDelay + 250);
});
</script>
</body>
</html>Hasil tersebut bisa di lihat di sini.
5. Memberikan Tombol Pilihan 1 Dan 2 Untuk Pacar
Membuat program tombol pilihan 1 dan 2. Ketika pacar kamu menekan tombol pilihan 1 atau 2 maka akan memberikan peringatan untuk pacar kamu. Bisa di lihat di bawah ini :
<!doctype html>
<html>
<head>
<title>Sayang</title>
</head>
<body>
<form>
<center>
<h2>Tekan ya pilih 1 atau 2</h2>
<button type="button">1</button>
<button type="button">2</button>
</center>
</form>
<script>
let btn1 = document.getElementsByTagName('button')[0];
let btn2 = document.getElementsByTagName('button')[1];
btn1.addEventListener('click', function(){
alert('Zonk!');
});
btn2.addEventListener('click', function(){
alert('Cie nekan tombol nomor 2');
alert('I LOVE YOU :) ');
});
</script>
</body>
</html>Hasil tersebut bisa di lihat di sini.
Penutup
Nah itulah beberapa kumpulan kode html, kode tersebut bisa di ubah lagi jika kamu paham dengan teknologi web seperti html, css dan javascript. Semoga bermanfaat :D
0 Komentar