Scribd Logo
Upload

Welcome to Scribd!

  • !doctype HTML

    Uploaded by

    melati.surya.ningsih29
    3 views3 pages

    Original Title

    !Doctype HTML

    Copyright

    © © All Rights Reserved

    Available Formats

    TXT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    3 views3 pages

    !doctype HTML

    Uploaded by

    melati.surya.ningsih29

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 3

    <!

    DOCTYPE html>
    <html lang="en">

    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TugasJavaKila</title>
    <link rel="icon" type="image/x-icon" href="SAKHILA NETWORK.jpg">
    <style>
    * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
    }

    body {
    display: flex;
    background-color: #7ec4cf;
    }

    table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px;
    }

    th, td {
    border: 1px solid #d1cfe2;
    padding: 8px;
    text-align: left;
    }

    .judul {
    font-weight: bold;
    font-size: 20px;
    margin-bottom: 15px;
    }

    button {
    display: block;
    margin: 20px 0;
    padding: 20px 50px;
    border-radius: 10px;
    border: 2px solid brown;
    background-color: #d1cfe2;
    color: peru;
    font-weight: bold;
    font-size: 16px;
    box-shadow: 0 3px 7px rgba(0, 0, 0, 0.4);
    transition: all .3s ease;
    }

    .botton:active {
    transform: scale(0.95);
    }

    button:hover {
    border: 2px solid powderblue;
    background-color: white;
    color: brown;
    }

    .display h1 {
    margin-bottom: 20px;
    }

    .display div {
    border: none;
    width: 100%;
    height: 100%;
    }

    .display div button {


    display: inline-block;
    margin: 25px;
    }
    </style>
    </head>

    <body>
    <table>
    <thead>
    <tr>
    <th>Nomor</th>
    <th>Judul</th>
    <th>Kasus</th>
    </tr>
    </thead>
    <tbody id="tabelSoal">

    </tbody>
    </table>

    <div class="display">
    <h1></h1>
    <p></p>
    </div>

    <script>
    let name = "Mahasiswa";
    let h1 = document.querySelector(".display h1");
    let p = document.querySelector(".display p");

    let tabelSoal = document.getElementById("tabelSoal");

    let soal = [
    { nomor: 1, judul: "Input dan Output", kasus: "Anda diminta untuk
    membuat program sederhana yang meminta nama pengguna dan menampilkan pesan sambutan
    menggunakan nama tersebut" },
    // Tambahkan objek soal lainnya
    // ...
    ];

    soal.forEach((item, index) => {


    let row = tabelSoal.insertRow();
    let cell1 = row.insertCell(0);
    let cell2 = row.insertCell(1);
    let cell3 = row.insertCell(2);

    cell1.innerHTML = item.nomor;
    cell2.innerHTML = item.judul;
    cell3.innerHTML = item.kasus;

    let button = document.createElement("button");


    button.textContent = "START";
    button.addEventListener("click", function () {
    name = prompt("Masukkan Nama");
    h1.innerHTML = item.judul;
    p.innerHTML = `Welcome <b>${name}</b><br> Welcome To Program
    JavaScript SakhilaAgustina`;
    });

    row.appendChild(button);
    });
    </script>
    </body>

    </html>

    You might also like