Skip to content

Commit

Permalink
Merge pull request #9 from GeekyHacks/statusUpdate
Browse files Browse the repository at this point in the history 
Status update
  • Loading branch information
@GeekyHacks
GeekyHacks authored Jul 25, 2023
2 parents 1d66f3f + bd2ed56 commit 34841e4
Show file tree
Hide file tree
Showing 5 changed files with 124 additions and 51 deletions.
7 changes: 6 additions & 1 deletion src/index.js
View file
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
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
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
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
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> -->

0 comments on commit 34841e4

Please sign in to comment.