Tugas Modul 4, 5, 7, 8
Modul 4
Mini project dengan menggunakan javascript:
1. Konversi celscius ke derajat
<body>
<script src="script.js"></script>
<h2>Project 1</h2>
<button onclick="suhu()">Convert</button>
<p id="total"></p>
</body>
<script>
function suhu(){
var cel = prompt("Masukan suhu farenheit")
var far = (cel - 32)*5/9
if (isNaN(far)){
alert("tidak valid")
}else{
document.getElementById("total").innerHTML = "jadi " + cel +
" derajat farenheit adalah " + far.toFixed(2) + " derajat celcius"
}
}
</script>
Hasil dari kode tersebut adalah
2. Membuat sebuah list, dan sebuah button.
Jika button diklik, setiap item list yang
genap akan berubah menjadi biru dan
tebal.
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>6</li>
<li>6</li>
<li>6</li>
<li>6</li>
<li>6</li>
<li>6</li>
<li>6</li>
</ul>
<button onclick="ubah()">ubah warna</button>
ini kode javascriptnya
function ubah() {
var listItem = document.getElementsByTagName("li")
for (var i = 0; i < listItem.length; i++){
if((i + 1)% 2 === 0)
listItem[i].classList.add("warna")
}
}
3. Membuat jam digital yang berubah warna bordernya di setiap detik
html:
<div id="clock"></div>
css:
#clock {
width: 120px;
font-family: 'Arial', sans-serif;
font-size: 2em;
padding: 10px;
border: 5px solid red; /* Warna default saat detik genap */
}
.blue-border {
border-color: blue !important;
}
JS:
function updateClock() {
var now = new Date();
var hours = now.getHours();
var minutes = now.getMinutes();
var seconds = now.getSeconds();
var clockElement = document.getElementById('clock');
clockElement.innerHTML = `${hours}:${minutes < 10 ? '0' : ''}${minutes}:${seconds
< 10 ? '0' : ''}${seconds}`;
// Ganti warna border sesuai dengan detik (ganjil: biru, genap: merah)
if (seconds % 2 === 0) {
clockElement.classList.remove('blue-border');
} else {
clockElement.classList.add('blue-border');
}
}
setInterval(updateClock, 1000); // Perbarui setiap detik
updateClock(); // Pembaruan pertama kali saat halaman dimuat
OUTPU:
Modul 5
Mini project 1
Membuat sebuah halaman HTML (lihat halaman berikut). Apabila warna teks diganti, maka semua teks li berganti warna.
Berikut kode html nya
<body>
<ul id="UbahWarna">
<li>mangga</li>
<li>jeruk</li>
<li>pisang</li>
<li>kentang</li>
<li>bayem</li>
</ul>
<input onclick="ubahBiru()" type="radio" name="warna" id="biru">biru
<input onclick="ubahHijau()" type="radio" name="warna" id="hijau">hijau
<input onclick="ubahKuning()" type="radio" name="warna" id="kuning">kuning
</body>
Berikut kode js nya
function ubahBiru() {
var biru = document.getElementById("UbahWarna")
biru.style.color="blue"
}
function ubahHijau() {
var biru = document.getElementById("UbahWarna")
biru.style.color="green"
}
function ubahKuning() {
var biru = document.getElementById("UbahWarna")
biru.style.color="yellow"
}
Berikut adalah outputnya
Mini project 2
Membuat sebuah list, dan sebuah button.
Jika button diklik, setiap item list yang
genap akan berubah menjadi biru dan
tebal.
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>6</li>
<li>6</li>
<li>6</li>
<li>6</li>
<li>6</li>
<li>6</li>
<li>6</li>
</ul>
<button onclick="ubah()">ubah warna</button>
ini kode javascriptnya
function ubah() {
var listItem = document.getElementsByTagName("li")
for (var i = 0; i < listItem.length; i++){
if((i + 1)% 2 === 0)
listItem[i].classList.add("warna")
}
}
Mini project 3
Kode html-nya:
<ul id="myList">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
</ul>
<label for="colorSelector">warna angka genap</label>
<select id="colorSelector" onchange="ubahWarna()">
<option value="blue">Blue</option>
<option value="green">Green</option>
<option value="yellow">Yellow</option>
</select>
<br>
<label for="colorList">Pilih Warna untuk List Ganjil</label>
<select id="colorList" onchange="changeColor()">
<option value="red">Merah</option>
<option value="purple">Ungu</option>
<option value="grey">Abu-abu</option>
</select>
Berikut adalah kode pada js:
function ubahWarna() {
var selectElement = document.getElementById("colorSelector");
var selectedColor = selectElement.value;
var listItems = document.querySelectorAll("#myList li");
var i = 1;
while (i < listItems.length) {
listItems[i].style.color = selectedColor;
listItems[i].style.fontWeight = "bold";
i += 2
}
}
function changeColor() {
var selectElement = document.getElementById("colorList");
var selectedColor = selectElement.value;
var listItems = document.querySelectorAll("#myList li");
var j = 0;
do {
listItems[j].style.color = selectedColor;
listItems[j].style.fontWeight = "bold";
j += 2;
}
while (j < listItems.length);
}
Kode di atas menciptakan sebuah halaman web dengan sebuah daftar tak terurut (unordered list) dan dua dropdown. Setiap dropdown memungkinkan pengguna memilih warna untuk angka genap dan ganjil dalam daftar, dan terdapat dua fungsi JavaScript (
ubahWarna() dan changeColor()) yang disertakan untuk mengubah warna dan memberikan efek teks pada item-item tertentu dalam daftar berdasarkan pilihan pengguna di dropdown.output dari kode tersebut
Mini project 4
Berikut adalah kode html nya:
<label for="text">Input Teks:</label>
<input type="text" id="text" placeholder="Masukkan teks">
<label for="quantity">Input Jumlah:</label>
<input type="number" id="quantity" placeholder="Masukkan jumlah" min="1" value="1">
<button onclick="generateListItem()">Generate Item</button>
<br>
<ul id="myList2"></ul>
<input onclick="ChangeBlue()" type="radio" name="color" id="blue">biru
<input onclick="ChangeRed()" type="radio" name="color" id="red">merah
<input onclick="ChangeGreen()" type="radio" name="color" id="green">hijau
<h3>Warna Hover</h3>
<input onmouseover="changeHoverColor('teal')" type="radio" name="hoverColor"
id="hoverBlue">Teal
<input onmouseover="changeHoverColor('gold')" type="radio" name="hoverColor"
id="hoverRed">Gold
<input onmouseover="changeHoverColor('lightgreen')" type="radio" name="hoverColor"
id="hoverGreen">Lightgreen
Berikut adalah kode java scriptnya
function generateListItem() {
var textInput = document.getElementById("text").value;
var quantityInput = document.getElementById("quantity").value;
if (textInput && quantityInput > 0) {
var myList = document.getElementById("myList2");
// Menghapus semua elemen anak sebelum menambahkan yang baru
while (myList.firstChild) {
myList.removeChild(myList.firstChild);
}
// Membuat elemen-elemen list sesuai dengan input
for (var i = 1; i <= quantityInput; i++) {
var listItem = document.createElement("li");
listItem.textContent = textInput + " " + i;
myList.appendChild(listItem);
}
}
}
}
function ChangeBlue() {
var blue = document.getElementById("myList2")
blue.style.color=('blue')
}
function ChangeRed() {
var blue = document.getElementById("myList2")
blue.style.color=('red')
}
function ChangeGreen() {
var blue = document.getElementById("myList2")
blue.style.color=('green')
}
function changeHoverColor(color) {
var listItems = document.querySelectorAll("#myList2 li");
listItems.forEach(function (item) {
item.addEventListener("mouseover", function () {
item.style.color = color;
});
item.addEventListener("mouseout", function () {
item.style.color = ""; // Reset to default color on mouseout
});
});
}
Berikut adalah output nya;
Mini project 5
Kode html:
<form id="dataForm">
<label for="itemName">Nama Buah:</label>
<input type="text" id="itemName" name="itemName" required>
<label for="itemWeight">Berat:</label>
<input type="number" id="itemWeight" name="itemWeight" min="0" required>
<button type="button" onclick="addData()">Tambah Data</button>
</form>
<!-- Table untuk menampilkan data -->
<table id="dataTable">
<thead>
<tr>
<th>No</th>
<th>Nama Buah</th>
<th>Berat (kg)</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<!-- Data akan ditambahkan di sini -->
</tbody>
</table>
Kode pada JS:
function addData() {
// Mendapatkan nilai input dari form
var itemName = document.getElementById('itemName').value;
var itemWeight = parseInt(document.getElementById('itemWeight').value);
// Mendapatkan elemen tbody dari tabel
var tableBody = document.querySelector('#dataTable tbody');
// Membuat baris baru
var newRow = document.createElement('tr');
// Menambahkan nomor urut (No) pada baris
var rowCount = tableBody.rows.length + 1;
newRow.innerHTML = '<td>' + rowCount + '</td>';
// Menambahkan nama barang dan berat pada baris
newRow.innerHTML += '<td>' + itemName + '</td>';
// Menandai baris dengan background merah jika berat lebih dari 5kg
if (itemWeight > 5) {
newRow.innerHTML += '<td>' + itemWeight + '</td>';
newRow.classList.add('red-bg');
} else {
newRow.innerHTML += '<td>' + itemWeight + '</td>';
}
// Menambahkan tombol hapus pada baris
newRow.innerHTML += '<td><button type="button" onclick="deleteRow(this)">Hapus</button></td>';
// Menambahkan baris ke dalam tbody
tableBody.appendChild(newRow);
// Mengosongkan nilai input setelah ditambahkan
document.getElementById('itemName').value = '';
document.getElementById('itemWeight').value = '';
}
function deleteRow(button) {
// Mendapatkan baris yang berisi tombol yang diklik
var row = button.parentNode.parentNode;
// Menghapus baris dari tabel
row.parentNode.removeChild(row);
}
output:
Modul 7
Mini project 1
Html:
<h1>Trayek Generator</h1>
<textarea id="trayekInput" rows="4" cols="50" placeholder="Masukkan trayek (pisahkan dengan koma, dan antar kota dengan spasi)"></textarea>
<br>
<button onclick="generateTable()">Generate</button>
<div id="result"></div>
css:
<style>
table {
border-collapse: collapse;
width: 100%;
margin-top: 20px;
width: 190px;
}
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 8px;
text-align: left;
}
</style>
JavaScript:
<script>
function generateTable() {
// Ambil nilai dari textarea
var trayekData = document.getElementById('trayekInput').value;
// Pisahkan trayek berdasarkan koma
var trayekArray = trayekData.split(',');
// Buat tabel
var table = '<table><tr><th>Kota</th></tr>';
// Loop untuk setiap trayek
trayekArray.forEach(function(trayek) {
var kotaArray = trayek.trim().split(' ');
var kotaWithDash = kotaArray.join(' - ');
table += '<tr><td>' + kotaWithDash + '</td></tr>';
});
table += '</table>';
// Tampilkan tabel hasil
document.getElementById('result').innerHTML = table;
}
</script>
Output
Mini project 2
HTML:
<form id="dataForm">
<label for="itemName">Nama Buah:</label>
<input type="text" id="itemName" name="itemName" required>
<label for="itemWeight">Berat:</label>
<input type="number" id="itemWeight" name="itemWeight" min="0" required>
<label for="itemImage">URL Gambar:</label>
<input type="text" id="itemImage" name="itemImage">
<button type="button" onclick="addData()">Tambah Data</button>
</form>
<!-- Table untuk memperlihatkan data -->
<table id="dataTable">
<thead>
<tr>
<th>No</th>
<th>Nama Buah</th>
<th>Berat (kg)</th>
<th>Gambar</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<!-- Data akan ditambahkan di sini -->
</tbody>
</table>
CSS:
<style>
table {
border-collapse: separate;
width: 80%;
margin: 20px auto;
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: left;
}
tr.red-bg td:nth-child(3) {
background-color: red;
}
#dataForm {
text-align: center;
margin-top: 20px;
}
img {
max-width: 50px;
max-height: 50px;
}
.edit-input {
width: 100%;
}
</style>
JS:
<script>
var editMode = false;
var editedRow;
function addData() {
if (editMode) {
// Update existing row in edit mode
updateRow();
} else {
// Add new row in add mode
var itemName = document.getElementById('itemName').value;
var itemWeight = parseInt(document.getElementById('itemWeight').value);
var itemImage = document.getElementById('itemImage').value;
var tableBody = document.querySelector('#dataTable tbody');
var newRow = document.createElement('tr');
var rowCount = tableBody.rows.length + 1;
newRow.innerHTML = '<td>' + rowCount + '</td>' +
'<td><span contenteditable="true">' + itemName + '</span></td>' +
'<td><span contenteditable="true">' + itemWeight + '</span></td>' +
'<td><img src="' + itemImage + '" alt="Gambar Buah" style="max-width: 50px; max-height: 50px;"></td>' +
'<td><button type="button" onclick="saveRow(this)">Save</button>' +
' <button type="button" onclick="deleteRow(this)">Hapus</button>' +
' <button type="button" onclick="editRow(this)">Edit</button></td>';
// Apply red background if weight is more than 5 kg
if (itemWeight > 5) {
newRow.classList.add('red-bg');
}
tableBody.appendChild(newRow);
clearForm();
}
}
function editRow(button) {
editMode = true;
editedRow = button.parentNode.parentNode;
// Change button text to "Update"
document.querySelector('#dataForm button').textContent = 'Update';
// Replace content with input fields for inline editing
for (var i = 1; i < editedRow.cells.length - 1; i++) {
var cellContent = editedRow.cells[i].textContent;
if (i !== 3) {
editedRow.cells[i].innerHTML = '<input class="edit-input" type="text" value="' + cellContent + '">';
} else {
// Handle image separately
editedRow.cells[i].innerHTML = '<input class="edit-input" type="text" value="' + cellContent + '">' +
'<img src="' + cellContent + '" alt="Gambar Buah" style="max-width: 50px; max-height: 50px;">';
}
}
}
function updateRow() {
// Reset edit mode, change button text, and clear form
editMode = false;
document.querySelector('#dataForm button').textContent = 'Tambah Data';
// Update row with edited values
var inputs = editedRow.querySelectorAll('.edit-input');
for (var i = 0; i < inputs.length; i++) {
if (i !== 2) {
editedRow.cells[i + 1].innerHTML = inputs[i].value;
} else {
// Handle image separately
editedRow.cells[i + 1].innerHTML = '<img src="' + inputs[i].value + '" alt="Gambar Buah" style="max-width: 50px; max-height: 50px;">';
}
}
clearForm();
}
function deleteRow(button) {
var row = button.parentNode.parentNode;
row.parentNode.removeChild(row);
clearForm();
}
function saveRow(button) {
if (editMode) {
updateRow();
} else {
addData();
}
}
function clearForm() {
// Clear form values
document.getElementById('itemName').value = '';
document.getElementById('itemWeight').value = '';
document.getElementById('itemImage').value = '';
}
</script>
OUTPUT:
Mini project 3
html:
<h1>Quiz 2 Exam Generator</h1>
<input type="text" id="questionInput" placeholder="Masukkan pertanyaan">
<input type="text" id="option1Input" placeholder="Opsi 1">
<input type="text" id="option2Input" placeholder="Opsi 2">
<input type="number" id="timeInput" placeholder="Masukkan waktu (detik)">
<button id="addQuestionBtn" onclick="addQuestion()">Tambah Pertanyaan</button>
<button id="finishTestBtn" onclick="finishTest()">Selesaikan Tes</button>
<div id="tableContainer"></div>
css:
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
h1 {
text-align: center;
}
input[type="text"], input[type="number"] {
width: 100%;
margin-bottom: 10px;
}
button {
padding: 10px 20px;
background-color: #007bff;
color: #fff;
border: none;
cursor: pointer;
}
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
th {
background-color: #007bff;
color: white;
}
.grayed-out {
color: #aaa;
}
</style>
JS:
<script>
var questions = [];
function addQuestion() {
var questionInput = document.getElementById('questionInput').value.trim();
var option1Input = document.getElementById('option1Input').value.trim();
var option2Input = document.getElementById('option2Input').value.trim();
var timeInput = parseInt(document.getElementById('timeInput').value.trim());
if (questionInput !== '' && option1Input !== '' && option2Input !== '' && !isNaN(timeInput) && timeInput > 0) {
var question = {
question: questionInput,
options: [option1Input, option2Input],
time: timeInput,
timerId: null
};
questions.push(question);
renderTable();
clearInputs();
} else {
alert('Silakan lengkapi semua input dengan benar.');
}
}
function renderTable() {
var tableHtml = '<table>';
tableHtml += '<tr><th>No.</th><th>Pertanyaan</th><th>Opsi</th><th>Waktu (detik)</th></tr>';
for (var i = 0; i < questions.length; i++) {
tableHtml += '<tr>';
tableHtml += '<td>' + (i + 1) + '</td>';
tableHtml += '<td>' + questions[i].question + '</td>';
tableHtml += '<td>';
// Menambahkan input radio untuk setiap opsi
for (var j = 0; j < questions[i].options.length; j++) {
tableHtml += '<input type="radio" name="option' + i + '" value="' + questions[i].options[j] + '"> ' + questions[i].options[j] + '<br>';
}
tableHtml += '</td>';
tableHtml += '<td id="timeCell' + i + '">' + questions[i].time + '</td>';
tableHtml += '</tr>';
}
tableHtml += '</table>';
document.getElementById('tableContainer').innerHTML = tableHtml;
startTimerForNewQuestion();
}
function startTimerForNewQuestion() {
var lastIndex = questions.length - 1;
if (lastIndex > 0 && questions[lastIndex - 1].timerId !== null) {
clearInterval(questions[lastIndex - 1].timerId); // Memberhentikan timer pertanyaan sebelumnya
}
startTimer(lastIndex);
}
function startTimer(index) {
var timeCell = document.getElementById('timeCell' + index);
var time = questions[index].time;
questions[index].timerId = setInterval(function() {
time--;
if (time <= 0) {
clearInterval(questions[index].timerId);
timeCell.textContent = 'Waktu Habis';
timeCell.classList.add('grayed-out');
var radios = document.getElementsByName('option' + index);
for (var j = 0; j < radios.length; j++) {
radios[j].disabled = true;
}
} else {
timeCell.textContent = time;
}
}, 1000);
}
function clearInputs() {
document.getElementById('questionInput').value = '';
document.getElementById('option1Input').value = '';
document.getElementById('option2Input').value = '';
document.getElementById('timeInput').value = '';
}
function finishTest() {
clearIntervalAllTimers();
disableAllInputs();
}
function clearIntervalAllTimers() {
for (var i = 0; i < questions.length; i++) {
clearInterval(questions[i].timerId);
}
}
function disableAllInputs() {
document.getElementById('questionInput').disabled = true;
document.getElementById('option1Input').disabled = true;
document.getElementById('option2Input').disabled = true;
document.getElementById('timeInput').disabled = true;
var allRadios = document.querySelectorAll('input[type="radio"]');
allRadios.forEach(function(radio) {
radio.disabled = true;
});
}
</script>
Output:
Modul 8
Mini project 1
html:
<h2>Generator Bilangan Prima</h2>
<label for="angkaPertama">Angka Pertama:</label>
<input type="number" id="angkaPertama" placeholder="Masukkan angka pertama">
<label for="angkaTerakhir">Angka Terakhir:</label>
<input type="number" id="angkaTerakhir" placeholder="Masukkan angka terakhir">
<button onclick="generatePrimes()">Generate Bilangan Prima</button>
<div id="result"></div>
css:
<style>
table {
border-collapse: collapse;
width: 100%;
margin-top: 20px;
}
table, th, td {
border: 1px solid black;
}
th, td {
padding: 10px;
text-align: center;
}
</style>
JS:
<script>
function isPrime(num) {
if (num < 2) return false;
for (let i = 2; i <= Math.sqrt(num); i++) {
if (num % i === 0) return false;
}
return true;
}
function generatePrimes() {
const angkaPertama = parseInt(document.getElementById("angkaPertama").value);
const angkaTerakhir = parseInt(document.getElementById("angkaTerakhir").value);
const primes = [];
for (let i = angkaPertama + 1; i < angkaTerakhir; i++) {
if (isPrime(i)) {
primes.push(i);
}
}
displayPrimes(primes);
}
function displayPrimes(primes) {
const resultDiv = document.getElementById("result");
resultDiv.innerHTML = "";
if (primes.length === 0) {
resultDiv.innerHTML = "Tidak ada bilangan prima di antara angka tersebut.";
return;
}
const table = document.createElement("table");
const headerRow = table.insertRow(0);
const headerCell = headerRow.insertCell(0);
headerCell.innerHTML = "Bilangan Prima";
primes.forEach((prime, index) => {
const row = table.insertRow(index + 1);
const cell = row.insertCell(0);
cell.innerHTML = prime;
});
resultDiv.appendChild(table);
}
</script>
Output:
Mini project 2
HTML:
CSS:
JS:
<h2>Sorting Page</h2>
<label for="inputNumbers">Input Angka (pisahkan dengan koma): </label>
<input type="text" id="inputNumbers">
<br>
<label>Pilih Urutan Sorting: </label>
<input type="radio" name="sortOrder" value="asc" checked> Ascending
<input type="radio" name="sortOrder" value="desc"> Descending
<br>
<button onclick="sortNumbers()">Sorting</button>
<table id="resultTable">
<!-- Hasil sorting akan ditampilkan di sini -->
</table>
CSS:
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin: 20px;
}
table {
margin-top: 20px;
border-collapse: collapse;
width: 50%;
margin-left: auto;
margin-right: auto;
}
table, th, td {
border: 1px solid black;
}
th, td {
padding: 10px;
text-align: center;
}
button {
margin-top: 10px;
padding: 10px;
}
</style>
JS:
<script>
function sortNumbers() {
// Mendapatkan nilai input dan urutan sorting
const inputNumbers = document.getElementById('inputNumbers').value;
const sortOrder = document.querySelector('input[name="sortOrder"]:checked').value;
// Memisahkan angka yang diinput berdasarkan koma
const numbersArray = inputNumbers.split(',').map(Number);
// Melakukan sorting sesuai dengan urutan yang dipilih
if (sortOrder === 'asc') {
numbersArray.sort((a, b) => a - b);
} else if (sortOrder === 'desc') {
numbersArray.sort((a, b) => b - a);
}
// Menampilkan hasil sorting dalam bentuk tabel
displayResult(numbersArray);
}
function displayResult(sortedNumbers) {
const resultTable = document.getElementById('resultTable');
resultTable.innerHTML = '';
// Membuat header tabel
const headerRow = resultTable.insertRow(0);
const headerCell = headerRow.insertCell(0);
headerCell.innerHTML = '<b>Sorted Numbers</b>';
// Memasukkan angka ke dalam tabel
for (let i = 0; i < sortedNumbers.length; i++) {
const row = resultTable.insertRow(i + 1);
const cell = row.insertCell(0);
cell.innerHTML = sortedNumbers[i];
}
}
</script>
Output:
Mini project 3
HTML:
CSS:
JS:
Output:
<h2>Statistics Page</h2>
<label for="inputNumbers">Input Angka (pisahkan dengan koma): </label>
<input type="text" id="inputNumbers">
<br>
<button onclick="calculateStatistics()">Find</button>
<table id="resultTable">
<!-- Hasil statistik akan ditampilkan di sini -->
</table>
CSS:
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin: 20px;
}
table {
margin-top: 20px;
border-collapse: collapse;
width: 50%;
margin-left: auto;
margin-right: auto;
}
table, th, td {
border: 1px solid black;
}
th, td {
padding: 10px;
text-align: center;
}
button {
margin-top: 10px;
padding: 10px;
}
</style>
JS:
<script>
function calculateStatistics() {
// Mendapatkan nilai input
const inputNumbers = document.getElementById('inputNumbers').value;
// Memisahkan angka yang diinput berdasarkan koma
const numbersArray = inputNumbers.split(',').map(Number);
// Menghitung nilai Min, Max, dan Average
const min = Math.min(...numbersArray);
const max = Math.max(...numbersArray);
const average = numbersArray.length > 0 ? numbersArray.reduce((a, b) => a + b) / numbersArray.length : 0;
// Menampilkan hasil statistik dalam bentuk tabel
displayStatistics(min, max, average);
}
function displayStatistics(min, max, average) {
const resultTable = document.getElementById('resultTable');
resultTable.innerHTML = '';
// Membuat header tabel
const headerRow = resultTable.insertRow(0);
const headerCellMin = headerRow.insertCell(0);
const headerCellMax = headerRow.insertCell(1);
const headerCellAverage = headerRow.insertCell(2);
headerCellMin.innerHTML = '<b>Min</b>';
headerCellMax.innerHTML = '<b>Max</b>';
headerCellAverage.innerHTML = '<b>Average</b>';
// Menambahkan nilai Min, Max, dan Average ke dalam tabel
const row = resultTable.insertRow(1);
const cellMin = row.insertCell(0);
const cellMax = row.insertCell(1);
const cellAverage = row.insertCell(2);
cellMin.innerHTML = min;
cellMax.innerHTML = max;
cellAverage.innerHTML = average.toFixed(2); // Menampilkan average dengan 2 desimal
}
</script>
Output:
Mini project 4
HTML:
<form id="dataForm">
<label for="itemName">Nama Buah:</label>
<input type="text" id="itemName" name="itemName" required>
<label for="itemWeight">Berat:</label>
<input type="number" id="itemWeight" name="itemWeight" min="0" required>
<label for="itemImage">URL Gambar:</label>
<input type="text" id="itemImage" name="itemImage">
<button type="button" onclick="manageData()">Proses Data</button>
</form>
<!-- Table untuk menampilkan data -->
<table id="dataTable">
<thead>
<tr>
<th>No</th>
<th>Nama Buah</th>
<th>Berat (kg)</th>
<th>Gambar</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<!-- Data akan ditambahkan di sini -->
</tbody>
</table>
CSS:
<style>
/* Styling CSS sama seperti sebelumnya */
table {
border-collapse: separate;
width: 80%;
margin: 20px auto;
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: left;
}
tr.red-bg td:nth-child(3) {
background-color: red;
}
#dataForm {
text-align: center;
margin-top: 20px;
}
img {
max-width: 50px;
max-height: 50px;
}
.edit-input {
width: 100%;
}
</style>
JS:
<script>
var dataStore = []; // Array untuk menyimpan data
function manageData() {
var itemName = document.getElementById('itemName').value;
var itemWeight = parseInt(document.getElementById('itemWeight').value);
var itemImage = document.getElementById('itemImage').value;
var data = {
itemName: itemName,
itemWeight: itemWeight,
itemImage: itemImage
};
if (editMode) {
// Update data pada array jika dalam edit mode
dataStore[editedIndex] = data;
editMode = false;
editedIndex = -1;
} else {
// Tambahkan data baru ke dalam array
dataStore.push(data);
}
// Refresh HTML table
displayData();
clearForm();
}
function deleteData(index) {
// Hapus data dari array berdasarkan index
dataStore.splice(index, 1);
// Refresh HTML table
displayData();
clearForm();
}
function editData(index) {
// Isi form dengan data yang akan di-edit
document.getElementById('itemName').value = dataStore[index].itemName;
document.getElementById('itemWeight').value = dataStore[index].itemWeight;
document.getElementById('itemImage').value = dataStore[index].itemImage;
// Set edit mode dan index yang akan di-edit
editMode = true;
editedIndex = index;
}
function displayData() {
var tableBody = document.querySelector('#dataTable tbody');
tableBody.innerHTML = ''; // Kosongkan tabel sebelum menambahkan data
for (var i = 0; i < dataStore.length; i++) {
var newRow = document.createElement('tr');
var rowCount = i + 1;
newRow.innerHTML = '<td>' + rowCount + '</td>' +
'<td><span>' + dataStore[i].itemName + '</span></td>' +
'<td><span>' + dataStore[i].itemWeight + '</span></td>' +
'<td><img src="' + dataStore[i].itemImage + '" alt="Gambar Buah" style="max-width: 50px; max-height: 50px;"></td>' +
'<td><button type="button" onclick="deleteData(' + i + ')">Hapus</button>' +
' <button type="button" onclick="editData(' + i + ')">Edit</button></td>';
// Apply red background if weight is more than 5 kg
if (dataStore[i].itemWeight > 5) {
newRow.classList.add('red-bg');
}
tableBody.appendChild(newRow);
}
}
function clearForm() {
// Clear form values
document.getElementById('itemName').value = '';
document.getElementById('itemWeight').value = '';
document.getElementById('itemImage').value = '';
}
var editMode = false;
var editedIndex = -1;
</script>
OUTPUT:
Komentar
Posting Komentar