Membuat Tombol Ubah Font dengan Javascript

Halko teman teman kembali lagi di tutorial tutorial dumet school, tentunya di sini kita akan selalu membahas seputar dunia website. Nah kali ini kita akan Membuat Tombol Ubah Font dengan Javascript, yuk kita praktekan yah teman teman.

Kalian bisa buka text editor kalian dan ketikan struktur HTML berikut, oh ya kita juga menggunakan googleFont yah teman teman dalam praktek kali ini.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Ubah Font JS</title>
	<link href="https://fonts.googleapis.com/css?family=Gaegu|Titan+One" rel="stylesheet"> 

</head>
<body>
	<button>Gaegu</button>
	<button>Titan One</button>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus delectus autem error esse suscipit iure vel, blanditiis, sint quaerat. Et modi perferendis impedit ullam quisquam nemo soluta Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum sit maxime numquam perferendis, deleniti unde corporis nisi quia iste, eum dolore, obcaecati debitis quaerat ullam officia temporibus libero soluta cumque.ea ratione saepe Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et ipsa sequi, impedit culpa perspiciatis, non, consequuntur quisquam quis sed aut facilis neque obcaecati, maxime tempora. Eum ut repellendus, sapiente consequuntur?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae sed, ullam, cumque repudiandae quis nemo? Ducimus voluptates aspernatur quas excepturi, distinctio modi! Voluptas perferendis odit quibusdam repudiandae porro non sunt..</p>
</body>
</html>

Tampilan nya sederhana saja yah teman teman seperti berikut ini tampilannya, hanya ada 2 button dan 1 paragraf saja.

nah setelah itu kalian bisa ketikan script javascript berikut yah temn teman.

document.querySelectorAll(‘button’),
document.querySelector(‘p’)

];

button.forEach( btn => {
btn.onclick = () => {
if(btn.innerHTML==’Gaegu’){
p.style.fontFamily = ‘Gaegu’
}else if(btn.innerHTML==’Titan One’){
p.style.fontFamily = ‘Titan One’
}
}
});

</script>

atau sepeti ini gambar nya biar lebih jelas.

nah coba kita buka di webbrowser nya, dan jalankan aplikasi sederhana ini.

nah ketika salah satu tombol tersebut kita klik maka font di paragraf atau di tag p akan berubah teman teman, mudah bukan tutorial nya,

sekian tutorial Membuat Tombol Ubah Font dengan Javascript , semoga bermanfaat yah teman teman, jangan lupa di praktekan.

Membuat Tombol Ubah Font dengan Javascript

Kategori