Javascript module 5
JAVASCRIPT MINI PROJECT
PROJECT 1:
*Buatlah sebuah halaman HTML
*Apabila warna teks diganti maka teks li berganti warna
*Apabila warna hover diganti maka warna li menyesuaikan warnanya jika dihover
BERIKUT KIODE HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
</style>
<script src="main2.js"></script>
</head>
<body>
<ul id="myul" style="width: 100px;">
<li>mangga</li>
<li>sirsak</li>
<li>jambu</li>
<li>durian</li>
<li>rambutan</li>
</ul>
<h1>warna teks</h1>
<div id="mydiv">
<input type="radio" onclick="ubahmerah()" name="warna">merah
<input type="radio" onclick="ubahbiru()" name="warna">biru
<input type="radio" onclick="ubahhijau()" name="warna">hijau
</div>
<h1>warna hover</h1>
<div >
<input type="radio" onmouseover="changeBg()" name="warna">kuning
<input type="radio" onmouseover="changebgp()" name="warna">pink
<input type="radio" onmouseover="changebgc()" name="warna">coklat
</div>
DAN INI KODE JAVACRIPT:
function ubahmerah(){
var red=document.getElementById('myul');
red.style.color='red'
}
function ubahbiru(){
var red=document.getElementById('myul');
red.style.color='blue'
}
function ubahhijau(){
var red=document.getElementById('myul');
red.style.color='green'
}
function changeBg(){
var kuning=document.getElementById('myul')
kuning.style.backgroundColor= 'yellow'
}
function removeBg(){
var yellow=document.getElementById('myul')
yellow.style.backgroundColor="white"
}
function changebgp(){
var pink=document.getElementById('myul')
pink.style.backgroundColor="pink"
}
function changebgc(){
var brown=document.getElementById('myul')
brown.style.backgroundColor="brown"
}
DAN INI HASILNYA
Komentar
Posting Komentar