Membuat Tombol Ubah Font dengan Javascript
Halko teman teman kembali lagi di panduan panduan Source Code Aplikasi, pastinya di sini kita akan selalu membahas seputar dunia situs. Nah kali ini kita akan Membangun Tombol Ubah Font dengan Javascript, yuk kita praktekan yah teman teman.
Kalian dapat buka text editor kalian dan ketikan struktur HTML berikut, oh ya kita pun menggunakan googleFont yah teman teman pada 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 dapat ketikan script javascript berikut yah temn teman.
<script>
let [button, p] = [
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 program sederhana ini.
nah ketika diantara tombol tersebut kita klik karenanya font di paragraf atau di tag p akan berubah teman teman, gampang bukan panduan nya,
demikianlah panduan Membangun Tombol Ubah Font dengan Javascript , semoga bermanfaat yah teman teman, jangan lupa di praktekan.
Sumber https://kursuswebsite.org
