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.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add remove feature #2

Merged
merged 11 commits into from
Feb 18, 2022
215 changes: 182 additions & 33 deletions dist/index.bundle.js
Original file line number Diff line number Diff line change
Expand Up @@ -350,7 +350,7 @@ __webpack_require__.r(__webpack_exports__);

var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));
// Module
___CSS_LOADER_EXPORT___.push([module.id, "body {\r\n background-color: #f4f2f3;\r\n}\r\n\r\nmain {\r\n display: flex;\r\n align-items: center;\r\n height: 95vh;\r\n justify-content: center;\r\n}\r\n\r\n.to_do_list_container {\r\n border: 1px solid #9497ae;\r\n box-shadow: 0.05rem 0.05rem 2rem;\r\n width: 40rem;\r\n height: auto;\r\n}\r\n\r\nheader {\r\n display: flex;\r\n justify-content: space-between;\r\n width: auto;\r\n padding: 1rem;\r\n border-bottom: 1px solid #c4c6d8;\r\n background-color: white;\r\n}\r\n\r\nh1 {\r\n margin: 0;\r\n font-family: Quintessential, sans-serif;\r\n font-size: 1.8rem;\r\n color: black;\r\n}\r\n\r\n.reload {\r\n align-self: center;\r\n color: #c4c6d8;\r\n margin-right: 1rem;\r\n cursor: pointer;\r\n}\r\n\r\n.task_input {\r\n background-color: white;\r\n border-bottom: 1px solid #c4c6d8;\r\n}\r\n\r\n.task_input input {\r\n font-size: 1.5rem;\r\n padding: 0.5rem;\r\n font-family: Quintessential, sans-serif;\r\n width: 90%;\r\n border: none;\r\n outline: none;\r\n margin-left: 1rem;\r\n}\r\n\r\n.task_container {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 1rem;\r\n background-color: white;\r\n}\r\n\r\n.task_container .task {\r\n display: flex;\r\n font-family: Quintessential, sans-serif;\r\n gap: 1rem;\r\n padding: 1rem 0;\r\n border-bottom: 1px solid #c4c6d8;\r\n font-size: 1.2rem;\r\n}\r\n\r\n.checking {\r\n width: 1rem;\r\n height: 1rem;\r\n flex-shrink: 0;\r\n}\r\n\r\n.clear {\r\n text-align: center;\r\n padding: 1rem;\r\n color: #9497ae;\r\n font-family: Quintessential, sans-serif;\r\n font-size: 1.5rem;\r\n cursor: pointer;\r\n}\r\n", ""]);
___CSS_LOADER_EXPORT___.push([module.id, "body {\r\n background-color: #f4f2f3;\r\n}\r\n\r\nmain {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n}\r\n\r\n.none {\r\n display: none;\r\n}\r\n\r\n.to_do_list_container {\r\n border: 1px solid #9497ae;\r\n box-shadow: 0.05rem 0.05rem 2rem;\r\n width: 40rem;\r\n height: auto;\r\n margin: 7rem auto;\r\n}\r\n\r\nheader {\r\n display: flex;\r\n justify-content: space-between;\r\n width: auto;\r\n padding: 1rem;\r\n border-bottom: 1px solid #c4c6d8;\r\n background-color: white;\r\n}\r\n\r\nh1 {\r\n margin: 0;\r\n font-family: Quintessential, sans-serif;\r\n font-size: 1.8rem;\r\n color: black;\r\n}\r\n\r\n.reload {\r\n align-self: center;\r\n color: #c4c6d8;\r\n margin-right: 1rem;\r\n cursor: pointer;\r\n}\r\n\r\n.task_input {\r\n background-color: white;\r\n border-bottom: 1px solid #c4c6d8;\r\n}\r\n\r\ninput {\r\n font-size: 1.5rem;\r\n padding: 0.5rem;\r\n font-family: Quintessential, sans-serif;\r\n width: 85%;\r\n border: none;\r\n outline: none;\r\n margin-left: 1rem;\r\n}\r\n\r\n.task_container {\r\n display: flex;\r\n flex-direction: column;\r\n background-color: white;\r\n}\r\n\r\n.task_container .task {\r\n display: flex;\r\n justify-content: space-between;\r\n font-family: Quintessential, sans-serif;\r\n gap: 1rem;\r\n padding: 1rem;\r\n border-bottom: 1px solid #c4c6d8;\r\n font-size: 1.2rem;\r\n}\r\n\r\n.checking {\r\n width: 1rem;\r\n height: 1rem;\r\n flex-shrink: 0;\r\n background-color: red;\r\n display: block;\r\n}\r\n\r\n.clear {\r\n text-align: center;\r\n padding: 1rem;\r\n color: #9497ae;\r\n font-family: Quintessential, sans-serif;\r\n font-size: 1.5rem;\r\n cursor: pointer;\r\n}\r\n\r\n.the_task {\r\n display: flex;\r\n align-items: center;\r\n gap: 1rem;\r\n}\r\n\r\n.delete_task {\r\n color: rgb(233, 47, 47);\r\n align-self: center;\r\n cursor: pointer;\r\n margin-right: 1rem;\r\n}\r\n\r\n.the_task .to_do {\r\n width: 20rem;\r\n overflow: scroll;\r\n}\r\n", ""]);
// Exports
/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);

Expand Down Expand Up @@ -472,6 +472,151 @@ module.exports = function (cssWithMappingToString) {
return list;
};

/***/ }),
/* 11 */
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__)
/* harmony export */ });
/* harmony import */ var _local_storage_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(12);
/* harmony import */ var _remove_task_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(13);



const taskContainer = document.querySelector('.task_container');

const showActivity = (taskLists) => {
for (let i = 0; i < taskLists.length; i += 1) {
const div = document.createElement('div');
div.classList.add('task');
div.setAttribute('id', `${taskLists[i].index}`);
const theTask = document.createElement('div');
theTask.classList.add('the_task');
const checkBox = document.createElement('input');
checkBox.classList.add('checking');
checkBox.type = 'checkbox';
theTask.appendChild(checkBox);
const taskElement = document.createElement('input');
taskElement.type = 'text';
taskElement.classList.add('to_do');
taskElement.id = taskLists[i].index;
taskElement.setAttribute('data-id', `${taskLists[i].index}`);
taskElement.value = `${taskLists[i].description}`;
taskElement.addEventListener('input', (e) => {
const editTask = e.target.parentNode.parentNode;
const deleteIcon = editTask.querySelector('.delete_task');
e.target.parentNode.style.backgroundColor = 'lightgoldenrodyellow';
e.target.style.backgroundColor = 'lightgoldenrodyellow';
e.target.parentNode.parentNode.style.backgroundColor = 'lightgoldenrodyellow';
deleteIcon.classList.remove('none');
const index = e.target.dataset.id;
taskLists[index - 1].description = e.target.value;
(0,_local_storage_js__WEBPACK_IMPORTED_MODULE_0__.addToLocalStorage)(taskLists);
});
taskElement.addEventListener('blur', (e) => {
e.target.parentNode.style.backgroundColor = 'white';
e.target.style.backgroundColor = 'white';
e.target.parentNode.parentNode.style.backgroundColor = 'white';
setTimeout(() => {
window.location.reload();
}, 200);
});
theTask.appendChild(taskElement);
div.appendChild(theTask);
const deleteIcon = document.createElement('div');
deleteIcon.classList.add('delete_task');
deleteIcon.classList.add('none');
deleteIcon.innerHTML = '<i class="fa fa-trash" aria-hidden="true"></i>';
deleteIcon.id = taskLists[i].index;
deleteIcon.addEventListener('click', (e) => {
const ref = e.target.parentElement.id;
(0,_remove_task_js__WEBPACK_IMPORTED_MODULE_1__["default"])(ref);
e.target.parentElement.parentElement.remove();
window.location.reload();
});
div.appendChild(deleteIcon);
taskContainer.appendChild(div);
}
};

/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (showActivity);

/***/ }),
/* 12 */
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ "addToLocalStorage": () => (/* binding */ addToLocalStorage),
/* harmony export */ "default": () => (/* binding */ Task)
/* harmony export */ });
function addToLocalStorage(data) {
localStorage.setItem('data', JSON.stringify(data));
}

class Task {
constructor(description, completed, index) {
this.description = description;
this.completed = completed;
this.index = index;
}
}

/***/ }),
/* 13 */
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__)
/* harmony export */ });
/* harmony import */ var _local_storage_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(12);


let taskLists = JSON.parse(localStorage.getItem('data'));

const removeTask = (ref) => {
const result = taskLists.filter((value) => value.index !== Number(ref));
taskLists = result;
for (let i = 0; i < taskLists.length; i += 1) {
taskLists[i].index = i + 1;
}
(0,_local_storage_js__WEBPACK_IMPORTED_MODULE_0__.addToLocalStorage)(taskLists);
};

/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (removeTask);

/***/ }),
/* 14 */
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__)
/* harmony export */ });
/* harmony import */ var _local_storage_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(12);
/* harmony import */ var _show_activity_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(11);




const taskLists = JSON.parse(localStorage.getItem('data'));

const addTask = () => {
const activity = document.querySelector('#add_task').value;
if (activity !== null) {
const tasks = new _local_storage_js__WEBPACK_IMPORTED_MODULE_0__["default"](activity, false, ((taskLists.length) + 1));
taskLists.push(tasks);
(0,_show_activity_js__WEBPACK_IMPORTED_MODULE_1__["default"])([tasks]);
(0,_local_storage_js__WEBPACK_IMPORTED_MODULE_0__.addToLocalStorage)(taskLists);
}
};

/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (addTask);


/***/ })
/******/ ]);
/************************************************************************/
Expand Down Expand Up @@ -546,43 +691,47 @@ var __webpack_exports__ = {};
(() => {
__webpack_require__.r(__webpack_exports__);
/* harmony import */ var _styles_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1);
/* harmony import */ var _modules_show_activity_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(11);
/* harmony import */ var _modules_add_task_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(14);
/* harmony import */ var _modules_local_storage_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(12);





// Populating the html element

const taskContainer = document.querySelector('.task_container');
let template = '';
let tick = '';
let display = '';
const taskLists = [
{
description: 'Wash the dishes',
completed: false,
index: 0,
},
{
description: 'Complete To do list project',
completed: false,
index: 1,
},
];

for (let i = 0; i < taskLists.length; i += 1) {
if (taskLists[i].completed === false) {
tick = 'none';
display = '';
} else {
tick = '';
display = 'none';
let taskLists = [];

// Add task

const activity = document.querySelector('#add_task');

activity.addEventListener('keypress', (e) => {
if (e.key === 'Enter') {
if (e.target.value === '') return;
(0,_modules_add_task_js__WEBPACK_IMPORTED_MODULE_2__["default"])();
window.location.reload();
e.target.value = '';
}
template += `
<div class="task" id="${taskLists[i].index}">
<div class="check_box ${tick}"></div>
<input type = "checkbox" class="checking ${display}">
<div>${taskLists[i].description}</div>
</div > `;
}
});

taskContainer.innerHTML = template;
window.onload = () => {
if (localStorage.getItem('data') === null) {
(0,_modules_show_activity_js__WEBPACK_IMPORTED_MODULE_1__["default"])(taskLists);
} else {
const localActivities = JSON.parse(localStorage.getItem('data'));
for (let i = 0; i < localActivities.length; i += 1) {
localActivities[i].index = i + 1;
}
(0,_modules_show_activity_js__WEBPACK_IMPORTED_MODULE_1__["default"])(localActivities);
taskLists = localActivities;
for (let i = 0; i < taskLists.length; i += 1) {
taskLists[i].index = i + 1;
}
(0,_modules_local_storage_js__WEBPACK_IMPORTED_MODULE_3__.addToLocalStorage)(taskLists);
}
};

})();

Expand Down
2 changes: 1 addition & 1 deletion dist/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ <h1>Today's To Do </h1>
<div class="reload"><i class="fa fa-refresh" aria-hidden="true"></i></div>
</header>
<div class="task_input">
<input type="text" id="add_task" placeholder="Add to your list...">
<input type="text" id="add_task" placeholder="Add to your list..."/>
</div>
<div class="task_container"></div>
<div class="clear">
Expand Down
2 changes: 1 addition & 1 deletion src/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ <h1>Today's To Do </h1>
<div class="reload"><i class="fa fa-refresh" aria-hidden="true"></i></div>
</header>
<div class="task_input">
<input type="text" id="add_task" placeholder="Add to your list...">
<input type="text" id="add_task" placeholder="Add to your list..."/>
</div>
<div class="task_container"></div>
<div class="clear">
Expand Down
63 changes: 32 additions & 31 deletions src/index.js
Original file line number Diff line number Diff line change
@@ -1,37 +1,38 @@
import './styles.css';
import showActivity from './modules/show_activity.js';
import addTask from './modules/add_task.js';
import { addToLocalStorage } from './modules/local_storage.js';

// Populating the html element

const taskContainer = document.querySelector('.task_container');
let template = '';
let tick = '';
let display = '';
const taskLists = [
{
description: 'Wash the dishes',
completed: false,
index: 0,
},
{
description: 'Complete To do list project',
completed: false,
index: 1,
},
];
let taskLists = [];

for (let i = 0; i < taskLists.length; i += 1) {
if (taskLists[i].completed === false) {
tick = 'none';
display = '';
} else {
tick = '';
display = 'none';
// Add task

const activity = document.querySelector('#add_task');

activity.addEventListener('keypress', (e) => {
if (e.key === 'Enter') {
if (e.target.value === '') return;
addTask();
window.location.reload();
e.target.value = '';
}
template += `
<div class="task" id="${taskLists[i].index}">
<div class="check_box ${tick}"></div>
<input type = "checkbox" class="checking ${display}">
<div>${taskLists[i].description}</div>
</div > `;
}
});

taskContainer.innerHTML = template;
window.onload = () => {
if (localStorage.getItem('data') === null) {
showActivity(taskLists);
} else {
const localActivities = JSON.parse(localStorage.getItem('data'));
for (let i = 0; i < localActivities.length; i += 1) {
localActivities[i].index = i + 1;
}
showActivity(localActivities);
taskLists = localActivities;
for (let i = 0; i < taskLists.length; i += 1) {
taskLists[i].index = i + 1;
}
addToLocalStorage(taskLists);
}
};
17 changes: 17 additions & 0 deletions src/modules/add_task.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import Task, { addToLocalStorage } from './local_storage.js';

import showActivity from './show_activity.js';

const taskLists = JSON.parse(localStorage.getItem('data'));

const addTask = () => {
Copy link

@elyor-doniyorov elyor-doniyorov Feb 18, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  • Great job implementing the changes requested by the previous reviewer. But, I think the changes you have made caused more issues. For example, when I tried to add a task it did not work properly. Below you can see the screenshot please fix the issue then request another review.
    Screenshot (194)

Copy link

@Meltrust Meltrust Feb 18, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hello @Micky373, I'm your new reviewer.

In this new commit, it is now possible to add tasks, but it is impossible to delete them because the delete buttons are not generated now, and therefore, missing. I can confirm this was not happening before the original review.

I can help. I'll be waiting on slack for the next 30 minutes, otherwise, I'll have to request changes.

I already contacted you on Slack, please respond. It's now 6:54 am for me.

Note: The student responded on Slack, we are working out the issue.

const activity = document.querySelector('#add_task').value;
if (activity !== null) {
const tasks = new Task(activity, false, ((taskLists.length) + 1));
taskLists.push(tasks);
showActivity([tasks]);
addToLocalStorage(taskLists);
}
};

export default addTask;
11 changes: 11 additions & 0 deletions src/modules/local_storage.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
export function addToLocalStorage(data) {
localStorage.setItem('data', JSON.stringify(data));
}

export default class Task {
constructor(description, completed, index) {
this.description = description;
this.completed = completed;
this.index = index;
}
}
14 changes: 14 additions & 0 deletions src/modules/remove_task.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import { addToLocalStorage } from './local_storage.js';

let taskLists = JSON.parse(localStorage.getItem('data'));

const removeTask = (ref) => {
const result = taskLists.filter((value) => value.index !== Number(ref));
taskLists = result;
for (let i = 0; i < taskLists.length; i += 1) {
taskLists[i].index = i + 1;
}
addToLocalStorage(taskLists);
};

export default removeTask;