Skip to content
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.

Sign up for GitHub

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

Jump to bottom

Status update #9

Merged
merged 4 commits into from
Jul 25, 2023
Merged

Status update #9

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
4729d4b
Add checkbox & img switch feature
GeekyHacks Jul 21, 2023
7665351
Added the refresh page item
GeekyHacks Jul 21, 2023
083c007
Add better structure
GeekyHacks Jul 21, 2023
bd2ed56
Edit styling
GeekyHacks Jul 25, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 6 additions & 1 deletion src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,15 +10,20 @@ import { TaskStatus, recallChecked } from './modules/updateStatus.js';
import { saveData } from './modules/userInput.js';
const userInput = document.querySelector('#userInput');
const addBtn = document.querySelector('#addBtn');
const refresh = document.querySelector('#recyclImg');

renderList(taskarr);
// this is to reload the page whenever needed
const reloading = () => {
setInterval(document.location.reload());
};

// this is for the refresh icon
refresh.addEventListener('click', () => reloading());

TaskStatus.updateStatus();
// TaskStatus.recallChecked();
TaskStatus.clearCompleted();

// add tasks
addBtn.addEventListener('click', (event) => {
const description = userInput.value;
Expand Down
107 changes: 96 additions & 11 deletions src/modules/displayList.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,32 +5,40 @@ import { saveData } from './userInput.js';
export const tasksList = document.querySelector('#tasksList');

export default (task) => {
// document.location.reload();

for (let i = 0; i < taskarr.length; i += 1) {
task = document.createElement('li');
task.classList.add('newTask');

if (taskarr[i].description !== '') {
if (taskarr[i].description !== '' && taskarr[i].completed === true) {
task.innerHTML = `
<input type="checkbox" checked class="checkB" ${taskarr[i].completed} autocomplete="false" />
<input class="newTasks" type="text" id="addItem" value="${taskarr[i].description}" />
<img class="trash" id="trash" src='./assets/trash-can.png' alt="" />

`;
}
if (taskarr[i].description !== '' && taskarr[i].completed === false) {
task.innerHTML = `
<input type="checkbox" class="checkB" ${taskarr[i].completed} autocomplete="off" />
<input class="newTasks" type="text" id="addItem" value="${taskarr[i].description}" />
<img class="trash" id="trash" src='./assets/trash-can.png' alt="" />
<img class="dotsImg" id="dotsImg" src='./assets/three-dots.png' alt="" />
`;
<input type="checkbox" class="checkB" ${taskarr[i].completed} />
<input class="newTasks" type="text" id="addItem" value="${taskarr[i].description}" />
<img class="trash" id="trash" src='/assets/three-dots.png' alt="" />
`;
// document.location.reload();

}

if (taskarr[i].description === '') {
tasksList.innerHTML = '';
}
// document.location.reload();

tasksList.appendChild(task);
}

// const lis = document.querySelectorAll('.newTask');
const taskDescription = document.querySelectorAll('#addItem');
const dots = document.querySelectorAll('.dotsImg');

dots.forEach((dot) => {
dot.classList.add('hide');
});

taskDescription.forEach((task, index) => {
task.addEventListener('click', (event) => {
Expand All @@ -41,6 +49,7 @@ export default (task) => {
task.addEventListener('change', (event) => {
task.readOnly = false;
task.classList.remove('edit');
RTCRtpReceiver;

return event.preventDefault();
});
Expand All @@ -51,3 +60,79 @@ export default (task) => {
});
});
};

// if (taskarr[i].description !== '' && taskarr[i].completed === true) {
// task.innerHTML = `
// <input type="checkbox" checked class="checkB" ${taskarr[i].completed} />
// <input class="newTasks" type="text" id="addItem" value="${taskarr[i].description}" />
// <img class="trash" id="trash" src='./assets/trash-can.png' alt="" />

// `;
// // document.location.reload();
// }

// if (taskarr[i].completed === false) {
// task.innerHTML = `
// <input type="checkbox" class="checkB" ${taskarr[i].completed} />
// <input class="newTasks" type="text" id="addItem" value="${taskarr[i].description}" />
// <img class="trash" id="trash" src='/assets/three-dots.png' alt="" />
// `;

// }

// export default (task) => {
// for (let i = 0; i < taskarr.length; i += 1) {

// task = document.createElement('li');
// task.classList.add('newTask');
// if(taskarr[i].completed === true){
// innerHTML = `
// <span>Yes</span>
// `
// }

// if (taskarr[i].description !== '') {
// task.innerHTML = `
// <input type="checkbox" id="checked" class="checkB" ${taskarr[i].completed} autocomplete="off" />
// <input class="newTasks" type="text" id="addItem" value="${taskarr[i].description}" />
// <img class="trash" id="trash" src='./assets/trash-can.png' alt="" />
// <img class="dotsImg" id="dotsImg" src='./assets/three-dots.png' alt="" />
// `;
// }
// const checked = document.getElementById("checked")

// console.log(checked)
// if (taskarr[i].description === '') {
// tasksList.innerHTML = '';
// }

// tasksList.appendChild(task);
// }

// // const lis = document.querySelectorAll('.newTask');
// const taskDescription = document.querySelectorAll('#addItem');
// const dots = document.querySelectorAll('.dotsImg');

// dots.forEach((dot) => {
// dot.classList.add('hide');
// });

// taskDescription.forEach((task, index) => {
// task.addEventListener('click', (event) => {
// task.classList.add('edit');
// return event.preventDefault();
// });

// task.addEventListener('change', (event) => {
// task.readOnly = false;
// task.classList.remove('edit');

// return event.preventDefault();
// });
// // the trick is with input
// task.addEventListener('input', () => {
// taskarr[index].description = task.value;
// saveData(taskarr);
// });
// });
// };
41 changes: 4 additions & 37 deletions src/modules/updateStatus.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,6 @@
import { taskarr } from './addTask.js';
import { saveData } from './userInput.js';

// const checkboxValues = localStorage.getItem('checkboxValues') || {};

export class TaskStatus {
static updateStatus = () => {
const checkB = document.querySelectorAll('.checkB');
Expand All @@ -11,35 +9,20 @@ export class TaskStatus {
checkbox.addEventListener('change', () => {
if (!taskarr[i].completed) {
taskarr[i].completed = true;
checkbox.setAttribute('checked', 'checked');
document.location.reload();

// checkboxValues[checkbox.key] = checkbox.checked;
// localStorage.setItem('checkboxValues', JSON.stringify(checkboxValues));
saveData(taskarr);
// recallChecked();
} else {
taskarr[i].completed = false;
checkbox['checked'] = false;
document.location.reload();

saveData(taskarr);
// checkbox.nextElementSibling.classList.remove('completed');
}
});
});
};

// static recallChecked = () => {
// [...checkboxValues.children].forEach((child) => {
// console.log(child);
// const checkbox = document.getElementById(key);
// checkbox['checked'] = value;
// });

// Object.entries(checkboxValues).forEach(([key, value]) => {
// const checkbox = document.getElementById(key);
// checkbox['checked'] = value;
// console.log(key + ' - ' + value);
// });
// };

static clearCompleted = () => {
const clearAllBtn = document.querySelector('#clearAllBtn');
clearAllBtn.addEventListener('click', () => {
Expand All @@ -52,19 +35,3 @@ export class TaskStatus {
});
};
}

// export const recallChecked = () => {
// Object.entries(checkboxValues).forEach((key, value) => {
// const checkbox = document.getElementById(key);
// checkbox['checked'] = value;
// });
// };
// const checkboxValues = localStorage.getItem("checkboxValues") || {};
// const checkboxes = document.querySelectorAll(".checkbox");

// checkboxes.forEach((checkbox) => {
// checkbox.addEventListener("change", () => {
// checkboxValues[checkbox.id] = checkbox.checked;
// localStorage.setItem("checkboxValues", JSON.stringify(checkboxValues));
// });
// });
4 changes: 2 additions & 2 deletions src/styles/sass/main.sass
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
body
@include columnFlex
justify-content: center
align-items: stretch
align-items: center
background-color: $primary-color
font-family: 'Roboto', sans-serif
white-space: pre-wrap
Expand All @@ -23,7 +23,7 @@ img
box-shadow: $box-shadow
padding: 10px
text-align: left
// width: 92%
width: 50%
#tasksList
@include columnFlex
gap: .2rem
Expand Down
16 changes: 16 additions & 0 deletions src/template.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,3 +25,19 @@ <h1 for="cars">ToDo List:</h1>
</main>
</body>
</html>

<!-- <header><h1>ToDo List</h1></header>
<main>
<ul class="container">
<li>
<h2>Add Task:</h2>
<img id="recyclImg" src="./assets/refresh.png" alt="refresh todo list" />
</li>
<li>
<input id="userInput" type="text" placeholder="Add to the list" required autofocus />
<img id="addBtn" alt="add new task" src="./assets/enter.png" />
</li>
</ul>
<button id="clearAllBtn" type="button">Clear all Completed</button>
</main>
<footer><h3>copyrights <a href="">geekyhacks</a></h3></footer> -->