Leonore Christine

HTML

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contoh Interaksi JS, CSS, HTML</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>Selamat datang di halaman interaktif!</h1>
        <p id="message">Klik tombol di bawah ini untuk melihat efeknya.</p>
        <button id="btnAction">Klik Saya</button>
        
        <h2>Daftar Diskusi dan Tautan Lainnya</h2>
        <ul id="linksList">
            <li><a href="https://github.com/SafaRivers/SFRivers/discussions/1" target="_blank">Diskusi 1 - SFRivers</a></li>
            <li><a href="https://github.com/SafaRivers/SFRivers/discussions/2" target="_blank">Diskusi 2 - SFRivers</a></li>
            <li><a href="https://github.com/SafaRivers/SFRivers/discussions/3" target="_blank">Diskusi 3 - SFRivers</a></li>
            <li><a href="https://github.com/SafaRivers/SFRivers/discussions/4" target="_blank">Diskusi 4 - SFRivers</a></li>
            <li><a href="https://github.com/AlessaMartina/Alessa/discussions/1" target="_blank">Diskusi 1 - Alessa</a></li>
            <li><a href="https://github.com/AlessaMartina/Alessa/discussions/2" target="_blank">Diskusi 2 - Alessa</a></li>
            <li><a href="https://github.com/AlessaMartina/Alessa/discussions/3" target="_blank">Diskusi 3 - Alessa</a></li>
            <li><a href="https://github.com/AlessaMartina/Alessa/discussions/4" target="_blank">Diskusi 4 - Alessa</a></li>
            <li><a href="https://github.com/ZoeFlorina/Florina/discussions/1" target="_blank">Diskusi 1 - Florina</a></li>
            <li><a href="https://github.com/ZoeFlorina/Florina/discussions/2" target="_blank">Diskusi 2 - Florina</a></li>
            <li><a href="https://github.com/ZoeFlorina/Florina/discussions/3" target="_blank">Diskusi 3 - Florina</a></li>
            <li><a href="https://github.com/ZoeFlorina/Florina/discussions/4"...

CSS

/* Style untuk body dan font secara keseluruhan */
body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    color: #333;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}

/* Container utama */
.container {
    text-align: center;
    background-color: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: 90%;
    max-width: 800px;
}

/* Gaya untuk tombol */
button {
    background-color: #4CAF50;
    color: white;
    padding: 15px 32px;
    font-size: 16px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}

button:hover {
    background-color: #45a049;
}

/* Gaya untuk pesan */
#message {
    font-size: 18px;
    color: #555;
}

/* Gaya untuk daftar tautan */
ul#linksList {
    list-style-type: none;
    padding: 0;
}

ul#linksList li {
    margin: 10px 0;
}

ul#linksList li a {
    color: #007bff;
    text-decoration: none;
    font-size: 16px;
}

ul#linksList li a:hover {
    text-decoration: underline;
}

JavaScript

const button = document.getElementById('btnAction');
const message = document.getElementById('message');

button.addEventListener('click', () => {
    message.textContent = ' JavaScript.';
    message.style.color = 'green'; // Mengubah warna teks pesan menjadi hijau
});