-
Notifications
You must be signed in to change notification settings - Fork 0
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Drag n drop #6
base: master
Are you sure you want to change the base?
Drag n drop #6
Changes from 2 commits
848fe4b
8fd5d76
ac1c13c
6d457d6
3f8a814
1a6b3cc
f27b239
32081de
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Large diffs are not rendered by default.
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,12 +1,47 @@ | ||
<!DOCTYPE html> | ||
<!DOCTYPE html> | ||
<html lang="en"> | ||
<head> | ||
<meta charset="UTF-8"> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
<title>Wbpack Exercise</title> | ||
<script defer src="runtime.bundle.js"></script><script defer src="index.bundle.js"></script></head> | ||
<body> | ||
<h1>I am working!</h1> | ||
<h2>I am red</h2> | ||
</body> | ||
</html> | ||
<head> | ||
<meta charset="UTF-8" /> | ||
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
<link | ||
href="https://fonts.googleapis.com/css2?family=Josefin+Sans" | ||
rel="stylesheet" | ||
/> | ||
<link | ||
rel="stylesheet" | ||
href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.3/font/bootstrap-icons.css" | ||
/> | ||
<title>To Do List</title> | ||
<script defer src="runtime.bundle.js"></script><script defer src="index.bundle.js"></script></head> | ||
<body class=""> | ||
<main class="wrapper"> | ||
<h1 class="heading">TO DO</h1> | ||
<form class="field-input-to-do"> | ||
<input type="text" class="input-to-do" placeholder="What to do?"/> | ||
<button type="submit" class="submit-btn"> | ||
<i class="bi bi-plus"></i> | ||
</button> | ||
</form> | ||
<ul class="tasks"> | ||
|
||
</ul> | ||
<ul class="ul-foot"> | ||
<li class="tasks-left"> | ||
<span class="tasks-left-num"></span> tasks remaining | ||
</li> | ||
<li> | ||
<input type="checkbox" class="mode-toggler" id="checkbox"> | ||
<label for="checkbox" class="toggler-label"> | ||
<i class="bi bi-sun-fill"></i> | ||
<i class="bi bi-moon"></i> | ||
<span class="ball"></span> | ||
</label> | ||
</li> | ||
<li> | ||
<a href="#" class="clear-completed">Clear Completed</a> | ||
</li> | ||
</ul> | ||
</main> | ||
</body> | ||
</html> |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -56,7 +56,8 @@ export class Store { | |
const checkbox = el; | ||
const taskList = document.querySelector('.tasks'); | ||
const tasks = Store.getTasks(); | ||
const nodes = Array.prototype.slice.call(taskList.children); | ||
const nodes =Array.prototype.slice.call(taskList.children);; | ||
console.log(nodes) | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Kindly remove the console.log to follow the best practices |
||
for (let i = 0; i < tasks.length; i += 1) { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. consider using (.forEach(), .map(), .filter(), .reduce() and .find()) functions instead of (for loop) for better clean code . |
||
if ( | ||
tasks[i].index === nodes.indexOf(checkbox.parentElement.parentElement) | ||
|
@@ -93,7 +94,8 @@ export class Store { | |
static updateTask(description) { | ||
const tasks = Store.getTasks(); | ||
const taskList = document.querySelector('.tasks'); | ||
const nodes = Array.prototype.slice.call(taskList.children); // convert list in array | ||
const nodes =Array.prototype.slice.call(taskList.children);; // convert list in array | ||
console.log(nodes) | ||
for (let i = 0; i < tasks.length; i += 1) { | ||
// iterate over tasks to find completed tasks | ||
if ( | ||
|
@@ -123,6 +125,8 @@ export class UI { | |
|
||
const row = document.createElement('li'); | ||
row.classList.add('task'); | ||
row.classList.add('draggable'); | ||
row.setAttribute('draggable', 'true'); | ||
|
||
row.innerHTML = ` | ||
<div class="task-field"> | ||
|
@@ -213,14 +217,15 @@ export class UI { | |
Store.updateTask(description); | ||
} | ||
}); | ||
|
||
updateBtn.addEventListener('click', () => { | ||
description.setAttribute('contentEditable', 'false'); | ||
description.parentElement.parentElement.classList.remove('active'); | ||
// to remove edit btn | ||
editBtn.style.display = 'block'; | ||
// to display update btn | ||
updateBtn.style.display = 'none'; | ||
Store.updateTask(description); | ||
}); | ||
} | ||
} | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
spread operator can be used to make the code cleaner instead of Array.prototype.slice.call(taskList.children);