Modul 7 JavaScript
PROJECT 1
HASIL:
.png)
KODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Modul7-P1</title>
<style>
textarea {
width: 500px;
height: 100px;
}
table {
border-collapse: collapse;
width: 500px;
margin-top: 20px;
}
table, th, td {
border: 1px solid black;
}
th, td {
padding: 10px;
text-align: left;
}
</style>
</head>
<body>
<h1>Trayek Generator</h1>
<p>Masukkan data trayek di bawah:</p>
<textarea id="inputTextarea"></textarea>
<button onclick="generateTrayek()">Generate Trayek</button>
<button onclick="resetTrayek()">Reset Trayek</button>
<h2>Hasil Trayek:</h2>
<table id="trayekTable">
<thead>
<tr>
<th>No</th>
<th>Trayek</th>
</tr>
</thead>
<tbody id="trayekBody"></tbody>
</table>
<script>
function generateTrayek() {
var inputTextarea = document.getElementById("inputTextarea");
var trayekBody = document.getElementById("trayekBody");
// Bersihkan hasil sebelumnya
trayekBody.innerHTML = "";
// Ambil data trayek dari textarea
var trayekData = inputTextarea.value.split(",").map(function (trayek) {
return trayek.trim().split(" ");
});
// Tampilkan hasil dalam tabel
for (var i = 0; i < trayekData.length; i++) {
var row = trayekBody.insertRow();
var cellNo = row.insertCell(0);
var cellTrayek = row.insertCell(1);
cellNo.textContent = i + 1;
cellTrayek.textContent = trayekData[i].join("-");
}
}
function resetTrayek() {
document.getElementById("inputTextarea").value = "";
}
</script>
</body>
</html>
PROJECT 2
HASIL :
.png)
.png)
KODE :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Modul7-P2</title>
<style>
table {
border-collapse: collapse;
width: 100%;
margin-top: 20px;
}
table, th, td {
border: 1px solid black;
}
th, td {
padding: 10px;
text-align: left;
}
.highlight {
background-color: red;
}
</style>
</head>
<body>
<h1>Data Barang</h1>
<form id="formTambah">
<label for="namaBarang">Nama Barang:</label>
<input type="text" id="namaBarang" required>
<br>
<label for="berat">Berat (kg):</label>
<input type="number" id="berat" required>
<br>
<label for="gambar">URL Gambar:</label>
<input type="text" id="gambar" required>
<br>
<button type="button" onclick="tambahData()">Tambah Data</button>
</form>
<h2>Daftar Barang:</h2>
<table id="barangTable">
<thead>
<tr>
<th>No</th>
<th>Nama Barang</th>
<th>Berat (kg)</th>
<th>Gambar</th>
<th>Aksi</th>
</tr>
</thead>
<tbody id="barangBody"></tbody>
</table>
<script>
function tambahData() {
var namaBarangInput = document.getElementById("namaBarang");
var beratInput = document.getElementById("berat");
var gambarInput = document.getElementById("gambar");
var barangBody = document.getElementById("barangBody");
var namaBarang = namaBarangInput.value;
var berat = parseFloat(beratInput.value);
var gambar = gambarInput.value;
if (berat > 5) {
var backgroundColorClass = "highlight";
}
var newRow = barangBody.insertRow();
var cellNo = newRow.insertCell(0);
var cellNamaBarang = newRow.insertCell(1);
var cellBerat = newRow.insertCell(2);
var cellGambar = newRow.insertCell(3);
var cellAksi = newRow.insertCell(4);
cellNo.textContent = barangBody.rows.length;
cellNamaBarang.textContent = namaBarang;
cellBerat.textContent = berat + " kg";
cellBerat.classList.add(backgroundColorClass);
cellGambar.innerHTML = '<img src="' + gambar + '" alt="' + namaBarang + '" style="max-width: 100px;">';
var btnEdit = document.createElement("button");
btnEdit.textContent = "Edit";
btnEdit.onclick = function() {
editBaris(newRow);
};
cellAksi.appendChild(btnEdit);
var btnHapus = document.createElement("button");
btnHapus.textContent = "Hapus";
btnHapus.onclick = function() {
hapusBaris(newRow);
};
cellAksi.appendChild(btnHapus);
namaBarangInput.value = "";
beratInput.value = "";
gambarInput.value = "";
}
function editBaris(row) {
var cells = row.cells;
// Simpan nilai awal sebelum diubah
var originalValues = {
namaBarang: cells[1].textContent,
berat: cells[2].textContent,
gambar: cells[3].getElementsByTagName('img')[0].src,
};
// Ubah sel menjadi input untuk diedit
cells[1].innerHTML = '<input type="text" id="editNamaBarang" value="' + originalValues.namaBarang + '">';
cells[2].innerHTML = '<input type="number" id="editBerat" value="' + parseFloat(originalValues.berat) + '">';
cells[3].innerHTML = '<input type="text" id="editGambar" value="' + originalValues.gambar + '">';
// Ganti tombol Edit menjadi Save
cells[4].innerHTML = '<button onclick="saveBaris(this.parentNode.parentNode)">Save</button>';
// Hapus tombol hapus
cells[4].removeChild(cells[4].getElementsByTagName('button')[1]);
}
function saveBaris(row) {
var cells = row.cells;
// Ambil nilai yang diedit
var editedValues = {
namaBarang: document.getElementById("editNamaBarang").value,
berat: parseFloat(document.getElementById("editBerat").value),
gambar: document.getElementById("editGambar").value,
};
// Kembalikan sel menjadi text
cells[1].textContent = editedValues.namaBarang;
cells[2].textContent = editedValues.berat + " kg";
cells[3].innerHTML = '<img src="' + editedValues.gambar + '" alt="' + editedValues.namaBarang + '" style="max-width: 100px;">';
// Ganti tombol Save menjadi Edit
cells[4].innerHTML = '<button onclick="editBaris(this.parentNode.parentNode)">Edit</button>';
// Tambahkan tombol hapus
var btnHapus = document.createElement("button");
btnHapus.textContent = "Hapus";
btnHapus.onclick = function() {
hapusBaris(row);
};
cells[4].appendChild(btnHapus);
}
function hapusBaris(row) {
var barangBody = document.getElementById("barangBody");
barangBody.removeChild(row);
for (var i = 0; i < barangBody.rows.length; i++) {
barangBody.rows[i].cells[0].textContent = i + 1;
}
}
</script>
</body>
</html>
PROJECT 3
HASIL :
.png)
KODE :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Modul7-P3</title>
<style>
table {
border-collapse: collapse;
width: 400px;
margin-top: 20px;
}
table, th, td {
border: 2px solid black;
}
th, td {
padding: 10px;
text-align: left;
}
</style>
</head>
<body>
<h1>Exam Generator</h1>
<hr>
<form>
<label>Question</label>
<input type="text" id="inputQuestion" placeholder="Input Question"> <br>
<label>Options</label>
<input type="text" id="inputOption" placeholder="Input Options"> <br>
<label>Time</label>
<input type="text" id="inputTime" placeholder="Input Time Limit"> <span> Minutes</span> <br>
<button onclick="generateQuestion()">Generate</button>
</form>
<hr>
<table id="tableExam">
<tr>
<th>No</th>
<th colspan="4">Question</th>
<th>Time</th>
</tr>
<tbody>
<!-- Data pertanyaan akan ditambahkan di sini -->
</tbody>
</table>
<script>
let tableExam = document.getElementById("tableExam");
let questionNumber = 1; // Nomor urut pertanyaan
function stringToArray(inputString) {
inputString = inputString.trim();
let array = [];
let word = "";
for (let i = 0; i < inputString.length; i++) {
const char = inputString[i];
if (char !== " " && char !== ",") {
word += char;
} else if (char === "," && word !== "") {
array.push(word);
word = "";
}
}
if (word !== "") {
array.push(word);
}
return array;
}
function generateQuestion() {
event.preventDefault();
let tbody = document.createElement("tbody");
let tr = document.createElement("tr");
let nomorUrut = document.createTextNode(questionNumber++);
let questionText = document.createTextNode(document.getElementById("inputQuestion").value);
let optionArray = stringToArray(document.getElementById("inputOption").value);
let timeLimitText = document.createTextNode(document.getElementById("inputTime").value);
let tableArrayTop = [
nomorUrut,
questionText,
timeLimitText
];
for (let i = 0; i < tableArrayTop.length; i++) {
let td = document.createElement("td");
td.appendChild(tableArrayTop[i]);
if (i == 0 || i == 2) {
td.setAttribute("rowspan", "2");
}
if (i == 1) {
td.setAttribute("colspan", "4");
}
tr.appendChild(td);
}
tbody.appendChild(tr);
let tr2 = document.createElement("tr");
for (let i = 0; i < optionArray.length; i++) {
let td2 = document.createElement("td");
let radio = document.createElement("input");
radio.setAttribute("type", "radio");
radio.setAttribute("name", "nah");
let optionText = document.createTextNode(String(optionArray[i]));
td2.appendChild(radio);
td2.appendChild(optionText);
tr2.appendChild(td2);
}
tbody.appendChild(tr2);
tableExam.appendChild(tbody);
// Menghitung mundur waktu
let timeLimitInSeconds = parseInt(timeLimitText.nodeValue) * 60; // Ubah menit ke detik
let timer = setInterval(function () {
let minutes = Math.floor(timeLimitInSeconds / 60);
let seconds = timeLimitInSeconds % 60;
timeLimitText.nodeValue = `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
if (timeLimitInSeconds <= 0) {
clearInterval(timer);
// Tambahkan logika atau tindakan ketika waktu habis di sini
alert(`Waktu habis untuk pertanyaan nomor ${nomorUrut.nodeValue}`);
} else {
timeLimitInSeconds--;
}
}, 1000);
}
</script>
</body>
</html>
.png)
.png)
Komentar
Posting Komentar