Tugas Praktikum 3 task 1

yudha556 · Oct 23, 2024 · 1102f57 · 1102f57
1 parent 45009d7
commit 1102f57
Show file tree

Hide file tree

Showing 3 changed files with 153 additions and 1 deletion.
diff --git a/Praktikum_3/index.html b/Praktikum_3/index.html
@@ -4,8 +4,32 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Praktikum 3 </title>
+    <link rel="stylesheet" href="style.css">
 </head>
 <body>
-
+    <div class="container">
+        <h1 id="judul">Tugas Praktikum_3</h1>
+        <button id="tombol">ganti warna</button>
+    </div>
+    <div class="controls">
+        <label for="fontSizeSlider">Font Size: </label>
+        <input type="range" id="fontSizeSlider" min="8" max="40" value="16">
+        <span id="sizeValue">16px</span>
+    </div>
+    <div class="theme-switch">
+        <label class="switch">
+            <input type="checkbox" id="darkModeToggle">
+            <span class="slider round"></span>
+        </label>
+        <span>Dark Mode</span>
+    </div>
+    <div class="font-control">
+        <label for="fontStyleSelect">Font Style: </label>
+        <select id="fontStyleSelect">
+            <option value="sans-serif">sans-serif</option>
+            <option value="Times New Roman">Times New Roman</option>
+            <option value="Helvetica">Helvetica</option>
+    </div>
+    <script src="script.js"></script>
 </body>
 </html>
diff --git a/Praktikum_3/script.js b/Praktikum_3/script.js
@@ -0,0 +1,33 @@
+
+let color = ['aqua', 'black', 'blue', 'fuchsia', 'gray', 'green', 'lime', 'maroon', 'navy', 'olive', 'purple', 'red', 'silver', 'teal', 'yellow'];
+let currentIndex = 0;
+
+document.getElementById('tombol').addEventListener('click', function changeBackground() {
+    document.body.style.backgroundColor = color[currentIndex];
+    currentIndex = (currentIndex + 1) % color.length;
+});
+
+const fontSizeSlider = document.getElementById('fontSizeSlider');
+const sizeValue = document.getElementById('sizeValue');
+
+fontSizeSlider.addEventListener('input', function() {
+    const size = this.value;
+    document.body.style.fontSize = size + 'px';
+    sizeValue.textContent = size + 'px';
+});
+
+const toggleSwitch = document.getElementById('darkModeToggle');
+
+toggleSwitch.addEventListener('change', function() {
+    if (this.checked) {
+        document.body.classList.add('dark-mode');
+    } else {
+        document.body.classList.remove('dark-mode');
+    }
+});
+
+const fontSelect = document.getElementById('fontStyleSelect');
+
+fontSelect.addEventListener('change', function() {
+    document.body.style.fontFamily = this.value;
+});
diff --git a/Praktikum_3/style.css b/Praktikum_3/style.css
@@ -0,0 +1,95 @@
+.container {
+    height: 100%;
+}
+
+#fontSizeSlider {
+    margin: 10px;
+    width: 200px;
+    height: 20px;
+}
+
+label {
+    font-family: Arial, sans-serif;
+    margin: 10px;
+}
+
+.dark-mode {
+    background-color: #333;
+    color: #fff;
+}
+
+.switch {
+    position: relative;
+    display: inline-block;
+    width: 60px;
+    height: 34px;
+}
+
+.switch input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+}
+
+.slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: #ccc;
+    transition: .4s;
+}
+
+.slider:before {
+    position: absolute;
+    content: "";
+    height: 26px;
+    width: 26px;
+    left: 4px;
+    bottom: 4px;
+    background-color: white;
+    transition: .4s;
+}
+
+input:checked + .slider {
+    background-color: #2196F3;
+}
+
+input:checked + .slider:before {
+    transform: translateX(26px);
+}
+
+.slider.round {
+    border-radius: 34px;
+}
+
+.slider.round:before {
+    border-radius: 50%;
+}
+
+.theme-switch {
+    position: fixed;
+    top: 20px;
+    right: 20px;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+.font-control {
+    margin: 10px;
+    padding: 10px;
+}
+
+#fontStyleSelect {
+    padding: 5px;
+    border-radius: 4px;
+    font-size: 16px;
+    cursor: pointer;
+}
+
+#fontStyleSelect:hover {
+    background-color: #f0f0f0;
+}