diff --git a/Praktikum_3/Referensi_css.jpg b/Praktikum_3/Referensi_css.jpg
new file mode 100644
index 0000000..326d9eb
Binary files /dev/null and b/Praktikum_3/Referensi_css.jpg differ
diff --git a/Praktikum_3/index.html b/Praktikum_3/index.html
index 4bcf735..4c74a4d 100644
--- a/Praktikum_3/index.html
+++ b/Praktikum_3/index.html
@@ -3,33 +3,53 @@
 <head>
     <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">
+    <title>To-Do App</title>
+    <link href="https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Metal+Mania&family=Poetsen+One&family=Tiny5&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+    <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 class="container" id="container">
+        <h2>My To-Do List</h2>
+        <div class="to-do" id="to-do">
+            <div class="input-container">
+                <input type="text" id="newTask" placeholder="Add a new Task....">
+                <button onclick="addTask()" id="add">Add</button>
+            </div>
+            <ul id="taskList">
+                 <!-- li ada di bagian script.js -->
+            </ul>
+            <div class="controls">
+                <label for="fontSizeSlider">Font Size: </label>
+                <span id="sizeValue">16px</span>
+                <input type="range" id="fontSizeSlider" min="8" max="40" value="16">
+                
+            </div>
+            <div class="section warna">
+                <label for="backgroundColor">Ganti Warna</label>
+                <input class="bgcolor" type="color" id="color">
+            </div>
+            <div class="section 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>
+                    <option value="Metal Mania">Metal Mania</option>
+                    <option value="Tiny5">Tiny5</option>
+                    <option value="Poetsen One">Poetsen One</option>
+                </select>
+            </div>
+            <div class="section theme-switch">
+                <span>Dark Mode</span>
+                <label class="switch">
+                    <input type="checkbox" id="darkModeToggle">
+                    <span class="slider round"></span>
+                </label>
+            </div>
+        </div>
     </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>
+    <script src="./script.js">
+    </script>
 </body>
 </html>
\ No newline at end of file
diff --git a/Praktikum_3/script.js b/Praktikum_3/script.js
index 6d13a43..453c63a 100644
--- a/Praktikum_3/script.js
+++ b/Praktikum_3/script.js
@@ -1,12 +1,162 @@
+const newTask = document.getElementById('newTask');
+const taskList = document.getElementById('taskList');
 
-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;
+
+// save data untuk local storage
+function getData() {
+    const tasks = localStorage.getData("tasks");
+    return tasks ? JSON.parse(tasks) : [];
+}
+function saveData(tasks) {
+    localStorage.setItem("tasks",JSON.stringify(tasks));
+}
+
+// untuk nambah tugas
+function addTask() {
+    if(newTask.value === "") {
+        alert('Isi dong !!!');
+        return;
+    } 
+
+    const li = document.createElement('li');
+    li.classList.add('task-item');
+
+    // ini fungsi chekbok
+    const checkbox = document.createElement('input');
+    checkbox.type = 'checkbox';
+    checkbox.addEventListener('change', function() {
+        if(checkbox.checked) {
+            taskText.classList.add('selesai');
+        } else {
+            taskText.classList.remove('selesai');
+        }
+    });
+
+
+    // fungsi untuk edit 
+    const taskText = document.createElement('span');
+    taskText.classList.add('task-text');
+    taskText.textContent = newTask.value;
+    
+
+    // fungsi untuk icon edit
+    const iconContrainer = document.createElement('span');
+    iconContrainer.classList.add('icons');
+
+    const editIcon = document.createElement('i');
+    editIcon.classList.add('fa-solid', 'fa-pen-to-square');
+    editIcon.addEventListener('click', function() {
+        enableEdit(taskText, li, checkbox);
+    });
+
+    // fungsi untuk menghapus
+    const deleteIcon = document.createElement('i');
+    deleteIcon.classList.add('fa-solid', 'fa-trash');
+    deleteIcon.addEventListener('click', function() {
+        deleteTask(li);
+    });
+
+    // ikon ke dalam kontrainer
+    iconContrainer.appendChild(editIcon);
+    iconContrainer.appendChild(deleteIcon);
+
+    // masukan checkbox, text, dan icon 
+    li.appendChild(checkbox);
+    li.appendChild(taskText);
+    li.appendChild(iconContrainer);
+
+    taskList.appendChild(li);
+
+    
+
+    newTask.value = "";
+    saveData()
+}
+
+
+// fungsi buat edit teks
+function enableEdit(taskText, li, checkbox) {
+
+    // ketika masuk mode edit, checkbok ga bisa di apa apain
+    checkbox.disabled = true;
+
+    // buat element input ketika edit
+    const editInput = document.createElement('input');
+    editInput.type = 'text';
+    editInput.value = taskText.textContent; 
+    editInput.classList.add('edit-input'); 
+
+    li.replaceChild(editInput, taskText);
+    editInput.focus(); 
+
+    editInput.addEventListener('blur', () => {
+        editTask(editInput, li, checkbox); 
+    });
+
+    // fungsi enter
+    editInput.addEventListener('keydown', (event) => {
+        if (event.key === 'Enter') { 
+            editTask(editInput, li, checkbox);
+        }
+    });
+}
+
+// buat aktifin fungsi edit
+function editTask(inputElement, li, checkbox) {
+    const newTask = inputElement.value.trim(); 
+
+    if (newTask !== "") {
+        const taskText = document.createElement('span'); 
+        taskText.classList.add('task-text');
+        taskText.textContent = newTask; 
+        li.replaceChild(taskText, inputElement);
+
+        // waktu di edit checkbok harus mati
+        checkbox.disabled = false;
+        
+        // fungsi yang sama buat chekbox
+        checkbox.addEventListener('change', function() {
+            if(checkbox.checked) {
+                taskText.classList.add('selesai');
+            } else {
+                taskText.classList.remove('selesai');
+            }
+        });
+
+        const editIcon = li.querySelector('.fa-pen-to-square');
+        editIcon.addEventListener('click', function() {
+            enableEdit(taskText, li, checkbox);
+        });
+
+        const tasks = getData(); 
+        const index = Array.from(li.parentNode.children).indexOf(li); 
+        tasks[index] = newTask; 
+        saveData(tasks);
+
+    } else {
+        inputElement.value = li.querySelector('.task-text').textContent; 
+    }
+}
+
+function deleteTask(taskItem) {
+    taskItem.remove();
+
+    const tasks = getData();
+    const index = Array.from(taskList.childern).indexOf(taskItem);
+    tasks.splice(index, 1);
+    saveData(tasks);
+}
+
+// Change apearance
+// Test
+const colorPicker = document.getElementById('color');
+colorPicker.addEventListener('input', function() {
+    document.getElementById('container').style.backgroundColor = colorPicker.value;
 });
 
+
+// anu
 const fontSizeSlider = document.getElementById('fontSizeSlider');
 const sizeValue = document.getElementById('sizeValue');
 
@@ -16,18 +166,28 @@ fontSizeSlider.addEventListener('input', function() {
     sizeValue.textContent = size + 'px';
 });
 
+// aasdasd
+const fontSelect = document.getElementById('fontStyleSelect');
+
+fontSelect.addEventListener('change', function() {
+    document.body.style.fontFamily = this.value;
+});
+
+// dark mode
 const toggleSwitch = document.getElementById('darkModeToggle');
 
 toggleSwitch.addEventListener('change', function() {
     if (this.checked) {
-        document.body.classList.add('dark-mode');
+        document.getElementById('container').classList.add('dark-mode');
+        document.getElementById('to-do').classList.add('dark-mode');
+        document.getElementById('newTask').classList.add('garis');
     } else {
-        document.body.classList.remove('dark-mode');
+        document.getElementById('container').classList.remove('dark-mode');
+        document.getElementById('to-do').classList.remove('dark-mode');
+        document.getElementById('newTask').classList.remove('garis')
     }
 });
 
-const fontSelect = document.getElementById('fontStyleSelect');
-
-fontSelect.addEventListener('change', function() {
-    document.body.style.fontFamily = this.value;
-});
\ No newline at end of file
+console.log(document.getElementById('container'));
+console.log(document.getElementById('to-do'));
+console.log(document.getElementById('newTask'));
diff --git a/Praktikum_3/style.css b/Praktikum_3/style.css
index 162dea2..209ab20 100644
--- a/Praktikum_3/style.css
+++ b/Praktikum_3/style.css
@@ -1,23 +1,223 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box ;
+}
+body {
+    font-family: Arial, sans-serif;
+    background-color: #f4f4f4;
+    overflow-x: hidden;
+}
+
 .container {
-    height: 100%;
+    width: 100%;
+    height: 100vh;
+    margin: 0 auto;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    background-color:rgb(255, 255, 255);
+    gap: 2rem;
+    justify-content: center;
 }
 
-#fontSizeSlider {
-    margin: 10px;
-    width: 200px;
-    height: 20px;
+
+.to-do {
+    width: 500px;
+    background: rgba(251, 251, 251, 0.02);
+    background-color: #ffff;
+    backdrop-filter: blur(10px);
+    padding: 30px;
+    border-radius: 1rem;
+    box-shadow: 1px 1px 10px 10px rgba(0, 0, 0, .2);
 }
 
-label {
-    font-family: Arial, sans-serif;
-    margin: 10px;
+.input-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 30px;
+    padding-left: 20px;
+    margin: 30px 0;
+    width: 95%;
+    margin-inline:auto ;
+}
+
+input {
+    width: 100%; 
+    padding: 13px;
+    border: none; 
+    border-radius: 4px; 
+    box-sizing: border-box;
+    outline: none;
+    background: transparent;
+    font-weight: 14px;
+    border-bottom: 1px solid black;
+}
+
+.garis {
+    border-bottom: 1px solid white;
+}
+
+#add {
+    padding: 12px 30px;
+    background-color: #007BFF;
+    color: #fff;
+    border: none; outline: none;
+    cursor: pointer;
+    font-size: 1rem;
+
+    border-top-right-radius: 40px;
+    border-top-left-radius: 40px;
+    border-bottom-right-radius: 40px;
+    transition: .2s ease-in-out;
+}
+
+#add:hover {
+    background: rgb(73, 73, 73);
+}
+
+ul {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5px;
+    padding: 0;
+}
+
+ul li {
+    border-bottom: 1px solid #d2cfcf;
+    justify-content: space-between;
+    font-weight: 700;
+    list-style: none;
+    font-size: 15px;
+    user-select: none;
+    width: 100%;
+    min-height: 40px;
+    margin: 0.5rem auto;
+    border-radius: 5rem;
+    cursor: pointer;
+    position: relative;
+    display: flex;
+    align-items: center;
+    background-color: rgb(249, 249, 249);
+    padding: 10px;
+    gap: 10px;
+    overflow: hidden;
+}
+
+ul li input[type="checkbox"] {
+    margin-left: -190px;
+    transform: scale(1.2);
+    flex-shrink: 0;
+}
+
+.task-list {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    text-align: center;
+}
+
+.icons {
+    display: flex;
+    gap: 5px;
+    margin-left: auto;
+    flex-shrink: 0;
+    cursor: pointer;
+}
+
+ul li span {
+    display: flex;
+    right: 10px;
+    top: 50px;
+    width: auto;
+    height: 25px;
+    font-size: 1.4rem;
+    color: #000000;
+    line-height: normal;
+    text-align: center;
+    align-items: center;
+
+}
+
+li span {
+    cursor: pointer;
+    margin-left: 10px;
+}
+
+ul li i {
+    pointer-events:stroke;
+    margin-left: 10px;
+    transition: 0.2s ease-in-out;
+    cursor: pointer;
+}
+
+ul li i:hover {
+    transform: scale(1.2);
+}
+
+.task-text {
+    flex: 1;
+    font-weight: normal;
+    font-size: 15px;
+    margin-left: -190px;
+    text-overflow: ellipsis;
+    overflow:visible;
+    /* display: inline-block; */
+}
+
+.edit-input {
+    font-weight: normal;
+    font-size: 15px;
+    margin-left: -190px;
+    text-overflow: ellipsis;
+    overflow: visible;
+}
+
+.task-text:hover {
+    overflow: visible; /* Aktifkan scroll horizontal saat hover */
 }
 
+.selesai {
+    text-decoration: line-through;
+    color: #888;
+}
+
+/* warna bg */
+
+.controls {
+    margin-top: 20px;
+    width: 100%;
+}
+
+.bgcolor {
+    padding: 0;
+    height: 40px;
+    width: 40px;
+    border-radius: none;
+    color: black;
+    cursor: pointer;
+    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
+    
+}
+
+/* bungkusan */
+.section {
+    display: flex;
+    flex-direction:row ;
+    justify-content:space-between;
+    margin-top: 30px;
+    width: 100%;
+}
+
+/* dark mode */
 .dark-mode {
     background-color: #333;
     color: #fff;
+    border: #f4f4f4;
 }
 
+/* buat tombol */
 .switch {
     position: relative;
     display: inline-block;
@@ -42,7 +242,7 @@ label {
     transition: .4s;
 }
 
-.slider:before {
+.slider::before {
     position: absolute;
     content: "";
     height: 26px;
@@ -54,10 +254,10 @@ label {
 }
 
 input:checked + .slider {
-    background-color: #2196F3;
+    background-color: rgb(222, 219, 219);
 }
 
-input:checked + .slider:before {
+input:checked + .slider::before {
     transform: translateX(26px);
 }
 
@@ -65,31 +265,14 @@ input:checked + .slider:before {
     border-radius: 34px;
 }
 
-.slider.round:before {
+.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 {
+/* select */
+#fontStyleSelect, option{
     padding: 5px;
-    border-radius: 4px;
+    border-radius: 15px;
     font-size: 16px;
     cursor: pointer;
 }
-
-#fontStyleSelect:hover {
-    background-color: #f0f0f0;
-}
\ No newline at end of file
