Tugas Pertemuan 8 PWEB

-

Nama  : Moh. Rizky Rahmadian Makkani

NRP    : 5025231035

Kelas : PWEB E

Tugas Pertemuan 8 : PWEB


index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Form Registrasi Mahasiswa</title>
   
</head>
<body>
    <form>
        <h2>Form Registrasi Mahasiswa</h2>
        <div class="form-group">
            <label for="nama">Nama Mahasiswa:</label>
            <input type="text" id="nama" name="nama" placeholder="Masukkan nama">
            <div class="suggestions" id="suggestions"></div>
        </div>
        <div class="form-group">
            <label for="nim">NIM:</label>
            <input type="text" id="nim" name="nim" placeholder="Masukkan NIM">
        </div>
        <div class="form-group">
            <label for="mataKuliah">Mata Kuliah:</label>
            <select id="mataKuliah" name="mataKuliah">
                <option value="Pemrograman Web">Pemrograman Web</option>
                <option value="Pemrograman Mobile">Pemrograman Mobile</option>
                <option value="Kecerdasan Buatan">Kecerdasan Buatan</option>
                <option value="Sistem Basis Data">Sistem Basis Data</option>
            </select>
        </div>
        <div class="form-group">
            <label for="dosen">Dosen:</label>
            <input type="text" id="dosen" name="dosen" placeholder="Masukkan nama dosen">
        </div>
        <button type="submit">Submit</button>
    </form>
</body>
<script src="js/script.js"></script>
</html>

style.css

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    padding: 20px;
}
form {
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    max-width: 400px;
    margin: auto;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.form-group {
    margin-bottom: 15px;
}
.form-group label {
    display: block;
    margin-bottom: 5px;
}
.form-group input, .form-group select {
    width: 100%;
    padding: 8px;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 5px;
}
.suggestions {
    border: 1px solid #ccc;
    border-top: none;
    border-radius: 0 0 5px 5px;
    max-height: 100px;
    overflow-y: auto;
    background-color: white;
    position: absolute;
    z-index: 1000;
}
.suggestions div {
    padding: 8px;
    cursor: pointer;
}
.suggestions div:hover {
    background-color: #f0f0f0;
}
button {
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    background-color: #4caf50;
    color: white;
    cursor: pointer;
}
button:hover {
    background-color: #45a049;
}

script.js

const namaMahasiswa = [
    "Rahmat Santoso",
    "Dewi Lestari",
    "Arif Budiman",
    "Putri Ayu",
    "Joko Sutrisno",
    "Lina Marlina"
];

const inputNama = document.getElementById("nama");
const suggestionsBox = document.getElementById("suggestions");

inputNama.addEventListener("input", function () {
    const query = inputNama.value.toLowerCase();
    suggestionsBox.innerHTML = "";

    if (query) {
        const filteredNames = namaMahasiswa.filter(name =>
            name.toLowerCase().includes(query)
        );

        filteredNames.forEach(name => {
            const suggestionItem = document.createElement("div");
            suggestionItem.textContent = name;

            suggestionItem.addEventListener("click", function () {
                inputNama.value = name;
                suggestionsBox.innerHTML = "";
            });

            suggestionsBox.appendChild(suggestionItem);
        });
    }
});

inputNama.addEventListener("blur", function () {
    setTimeout(() => {
        suggestionsBox.innerHTML = "";
    }, 200);
});

Output 


Komentar

Posting Komentar

Postingan populer dari blog ini

Tugas 2 PBO : Konsep OOP

-
Gambar
 Nama : Moh. Rizky Rahmadian Makkani NRP : 5025231035 Kelas : PBO A Tugas Pertemuan 2 : Konsep OOP 1. Apa itu C lass?      Class adalah konsep dasar dalam pemrograman berbasis objek (OOP) yang berfungsi sebagai cetak biru atau blueprint untuk menciptakan objek, membuat pemrograman menjadi lebih terstruktur dan efisien.      Analoginya, class seperti gambar desain yang digunakan oleh seorang arsitek untuk membangun sebuah rumah. Gambar arsitektur tersebut mendefinisikan struktur, tata letak, dan bentuk rumah yang akan dibangun. Secara serupa, class dalam pemrograman mendefinisikan struktur dan perilaku dari object yang akan diciptakan. 2. Apa itu Object?      Yang dimaksud dengan objek pada java adalah sekumpulan software yang terdiri dari variable dan method-method yang terkait. Objek juga merupakan benda nyata yang di buat berdasarkan rancangan yang di definisikan di dalam class      Object adalah instance dari class. Jik...
Baca selengkapnya

Tugas Pertemuan 14 PBO

-
Gambar
Nama    : Moh. Rizky Rahmadian Makkani NRP     : 5025231035 Kelas : PBO A Tugas Pertemuan 14 : PBO 1. Membuat frame windows user login dan password. Code LoginWindow.java : import javax.swing.*; import java.awt.*; import java.awt.event.ActionEvent; import java.awt.event.ActionListener; public class LoginWindow { public static void main (String[] args) { // Membuat frame JFrame frame = new JFrame( "Login" ); frame.setSize( 300 , 150 ); frame.setDefaultCloseOperation(JFrame. EXIT_ON_CLOSE ); frame.setLayout( new GridLayout( 3 , 2 , 5 , 5 )); // Komponen GUI JLabel usernameLabel = new JLabel( "Username:" ); JTextField usernameField = new JTextField(); JLabel passwordLabel = new JLabel( "Password:" ); JPasswordField passwordField = new JPasswordField(); JButton loginButton = new JButton( "Login" ); JButton cancelButton = new JButton( "Cancel"...
Baca selengkapnya

Tugas Pertemuan 10 PBO

-
Gambar
  Nama    : Moh. Rizky Rahmadian Makkani NRP     : 5025231035 Kelas : PBO A Tugas Pertemuan 10 : PBO Code SalesItem.java : import java.util.ArrayList; import java.util.Iterator; public class SalesItem { private String name ; private int price ; // in cents private ArrayList<Comment> comments ; public SalesItem (String name, int price) { this . name = name; this . price = price; comments = new ArrayList<Comment>(); } public String getName () { return name ; } public int getPrice () { return price ; } public int getNumberOfComments () { return comments .size(); } public boolean addComment (String author, String text, int rating) { if (ratingInvalid(rating)) { // reject invalid ratings return false ; } if (findCommentByAuthor(author) != null ) { return false ; } comments .add(...
Baca selengkapnya