Modul 4
Project 1
<!DOCTYPE html>
<html>
<head>
<title>Ubah Item List Genap</title>
<style>
.bold-blue {
font-weight: bold;
color: blue;
}
</style>
<script>
function ubahItemList() {
var listItems = document.getElementsByTagName("li");
for (var i = 0; i < listItems.length; i++) {
if ((i + 1) % 2 === 0) {
// Cek jika nomor item list genap
listItems[i].classList.add("bold-blue");
}
}
}
</script>
</head>
<body>
<h1>Ubah Item List Genap</h1>
<ul>
<li>biru 1</li>
<li>biru 2</li>
<li>biru 3</li>
<li>biru 4</li>
<li>biru 5</li>
</ul>
<button onclick="ubahItemList()">Ubah Item Genap</button>
</body>
</html>
Hasil :
.png)
Project 2
<!DOCTYPE html>
<html>
<head>
<title>Konversi Suhu</title>
<script>
function konversiFahrenheitKeCelsius() {
var fahrenheit = parseFloat(document.getElementById("inputFahrenheit").value);
var celsius = (fahrenheit - 32) * 5 / 9;
document.getElementById("hasilCelsius").innerHTML = celsius.toFixed(2) + "°C";
}
</script>
</head>
<body>
<h1>Konversi Fahrenheit ke Celsius</h1>
<label for="inputFahrenheit">Masukkan suhu dalam Fahrenheit: </label>
<input type="number" id="inputFahrenheit">
<button onclick="konversiFahrenheitKeCelsius()">Konversi</button>
<p id="hasilCelsius"></p>
</body>
</html>
Hasil :
.png)
Project 3
<!DOCTYPE html>
<html>
<head>
<title>Jam Digital</title>
<style>
#jam {
font-size: 36px;
padding: 10px;
border: 2px solid black;
display: inline-block;
}
</style>
<script>
function perbaruiJam() {
var jamElement = document.getElementById("jam");
var sekarang = new Date();
var jam = sekarang.getHours();
var menit = sekarang.getMinutes();
var detik = sekarang.getSeconds();
var detikBorder = detik % 2 === 0 ? "red" : "blue";
jamElement.style.border = "2px solid " + detikBorder;
jamElement.textContent = jam + ":" + menit + ":" + detik;
}
setInterval(perbaruiJam, 1000); // Perbarui setiap detik
</script>
</head>
<body>
<h1>Jam Digital</h1>
<div id="jam"></div>
</body>
</html>
Hasil :
.png)
.png)
Komentar
Posting Komentar