Skip to content

Commit

Permalink
beres bang
Browse files Browse the repository at this point in the history
  • Loading branch information
@yudha556
yudha556 committed Oct 27, 2024
1 parent 299f3fa commit e74f2fd
Show file tree
Hide file tree
Showing 4 changed files with 432 additions and 69 deletions.
Binary file added Praktikum_3/Referensi_css.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
70 changes: 45 additions & 25 deletions Praktikum_3/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
184 changes: 172 additions & 12 deletions Praktikum_3/script.js
View file
Original file line number Diff line number Diff line change
@@ -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');

Expand All @@ -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;
});
console.log(document.getElementById('container'));
console.log(document.getElementById('to-do'));
console.log(document.getElementById('newTask'));
Loading

0 comments on commit e74f2fd

Please sign in to comment.