Skip to content

Commit

Permalink
Merge pull request #5 from GeekyHacks/statusUpdate
Browse files Browse the repository at this point in the history
Status update
  • Loading branch information
GeekyHacks authored Jul 21, 2023
2 parents 37e0ca9 + 62b0af8 commit 1d66f3f
Show file tree
Hide file tree
Showing 13 changed files with 296 additions and 98 deletions.
9 changes: 7 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,8 @@
# 📗 Table of Contents

- [📖 About the Project](#about-project)
- [live Demo](#live-demo)
- [🚀 Live Demo](#live-demo)


- [🛠 Built With](#built-with)
- [Key Features](#key-features)
Expand All @@ -36,8 +37,12 @@
**ToDo list<e**
the project is about adding todo list that can be add, removed, marked, and edit. It will include mainly JS code and sass or styling.


## 🚀 Live Demo <a name="live-demo"></a>

- [Live Demo Link](https://geekyhacks.github.io/ToDoList/dist/.)

# 📖 ToDo list< <a name="live-demo"></a>
[Live Demo](https://geekyhacks.github.io/ToDoList/)

## 🛠 Built With <a name="built-with">HTML, CSS and JavaScript</a>

Expand Down

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions dist/bundle0a4d8217c7af776c267d.js.map

Large diffs are not rendered by default.

1 change: 0 additions & 1 deletion dist/bundle55df76a2dc1d3425b0a3.js.map

This file was deleted.

2 changes: 1 addition & 1 deletion dist/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>

<title>%= htmlWebpackPlugin.options.title %</title>
<script defer src="bundle55df76a2dc1d3425b0a3.js"></script></head>
<script defer src="bundle0a4d8217c7af776c267d.js"></script></head>
<body>
<main class="container">
<div>
Expand Down
31 changes: 14 additions & 17 deletions src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,16 +6,19 @@ import { addTask, taskarr } from './modules/addTask.js';
import renderList from './modules/displayList.js';
import './assets/three-dots.png';
import removeItems from './modules/removeItems.js';

import { TaskStatus, recallChecked } from './modules/updateStatus.js';
import { saveData } from './modules/userInput.js';
const userInput = document.querySelector('#userInput');
const addBtn = document.querySelector('#addBtn');
const clearAllBtn = document.querySelector('#clearAllBtn');

// to reload the page this should fix the double rendering issue
renderList(taskarr);
const reloading = () => {
setInterval(document.location.reload());
};

TaskStatus.updateStatus();
// TaskStatus.recallChecked();
TaskStatus.clearCompleted();
// add tasks
addBtn.addEventListener('click', (event) => {
const description = userInput.value;
Expand All @@ -38,35 +41,29 @@ userInput.addEventListener('keypress', (event) => {
addTask(description, index);
reloading();
event.preventDefault();
localStorage.setItem('taskarr', JSON.stringify(taskarr));
saveData(taskarr);

return taskarr;
}
return taskarr;
});
renderList(taskarr);

// remove tasks
document.addEventListener('click', (event) => {
const dotsTrash = document.querySelectorAll('.dotsImg');
const dotsTrash = document.querySelectorAll('.trash');

dotsTrash.forEach((icon, index) => {
if (event.target === icon) {
removeItems(taskarr, index);
localStorage.setItem('taskarr', JSON.stringify(taskarr));
saveData(taskarr);

// this will sort out the index when removing Items
const sortedArr = [...taskarr];
index = taskarr.length;
index = taskarr.length + 1;
sortedArr.sort((a, b) => a.index - b.index);

reloading(sortedArr);
localStorage.setItem('taskarr', JSON.stringify(sortedArr));
reloading(taskarr);
saveData(sortedArr);
}
});
// return event.preventDefault();
});

// // this will clear all localstorage elements too, just temproary
clearAllBtn.addEventListener('click', () => {
window.localStorage.clear();
reloading();
});
19 changes: 15 additions & 4 deletions src/modules/addTask.js
Original file line number Diff line number Diff line change
@@ -1,16 +1,27 @@
import TaskObject from './userInput.js';
// import { renderList } from './displayList.js';
import { TaskObject, saveData } from './userInput.js';

export const taskarr = JSON.parse(localStorage.getItem('taskarr')) || [];

export const addTask = (description, index) => {
index = taskarr.length;
const newTask = new TaskObject(description, index);
taskarr.push(newTask);
// this will sort out the user input index
// // this will sort out the user input index
const sortedArr = [...taskarr];
sortedArr.sort((a, b) => a.index - b.index);

localStorage.setItem('taskarr', JSON.stringify(sortedArr));
saveData(taskarr);
return taskarr;
};



var checkboxValues = JSON.parse(localStorage.getItem('checkboxValues')) || {};
var $checkboxes = $("#checkbox-container :checkbox");

$checkboxes.on("change", function(){
$checkboxes.each(function(){
checkboxValues[this.id] = this.checked;
});
localStorage.setItem("checkboxValues", JSON.stringify(checkboxValues));
});
16 changes: 10 additions & 6 deletions src/modules/displayList.js
Original file line number Diff line number Diff line change
@@ -1,8 +1,6 @@
import { taskarr } from './addTask.js';
// import update from './update.js';
// export const dots = '../assets/three-dots.png';
import '../assets/trash-can.png';
// const trashCan = './assets/trash-can.png';
import { saveData } from './userInput.js';

export const tasksList = document.querySelector('#tasksList');

Expand All @@ -13,10 +11,10 @@ export default (task) => {

if (taskarr[i].description !== '') {
task.innerHTML = `
<input type="checkbox" id="checkB" ${taskarr[i].completed} />
<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="" />
`;
}
if (taskarr[i].description === '') {
Expand All @@ -26,7 +24,13 @@ export default (task) => {
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 @@ -43,7 +47,7 @@ export default (task) => {
// the trick is with input
task.addEventListener('input', () => {
taskarr[index].description = task.value;
localStorage.setItem('taskarr', JSON.stringify(taskarr));
saveData(taskarr);
});
});
};
6 changes: 6 additions & 0 deletions src/modules/sortingFunction.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
const sortArray = (array) => {
// this will sort out the index when removing Items
const sortedArr = [...array];
sortedArr.sort((a, b) => a.index - b.index);
};
export default { sortArray };
70 changes: 70 additions & 0 deletions src/modules/updateStatus.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
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');

checkB.forEach((checkbox, i) => {
checkbox.addEventListener('change', () => {
if (!taskarr[i].completed) {
taskarr[i].completed = true;

// checkboxValues[checkbox.key] = checkbox.checked;
// localStorage.setItem('checkboxValues', JSON.stringify(checkboxValues));
saveData(taskarr);
// recallChecked();
} else {
taskarr[i].completed = false;
checkbox['checked'] = false;
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', () => {
const notCompleted = taskarr.filter((task) => task.completed !== true);
notCompleted.forEach((e, i) => {
e.index = i + 1;
});
saveData(notCompleted);
window.location.reload();
});
};
}

// 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));
// });
// });
6 changes: 5 additions & 1 deletion src/modules/userInput.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,11 @@
export default class TaskObject {
export class TaskObject {
constructor(description, index) {
this.description = description;
this.completed = false;
this.index = index;
}
}

export const saveData = (data) => {
localStorage.setItem('taskarr', JSON.stringify(data));
};
8 changes: 4 additions & 4 deletions src/styles/sass/global.sass
Original file line number Diff line number Diff line change
Expand Up @@ -21,14 +21,14 @@ $box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1), 0 6px 6px rgba(0, 0, 0, 0.1)
border-radius: 2px
font-family: $InterFont
font-weight: 500
font-size: 1rem
font-size: .8rem
letter-spacing: 0.001em
word-spacing: normal
background-color: $primary-color
color: $secondary-color
border: 0
box-shadow: $box-shadow
padding: 10px
padding: 5px
cursor: pointer
text-align: center

Expand All @@ -55,12 +55,12 @@ $box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1), 0 6px 6px rgba(0, 0, 0, 0.1)
letter-spacing: -0.0225rem
@mixin smlInterH3
color: black
font-size: 1.2rem
font-size: .8rem
font-family: $InterFont
font-weight: 600
letter-spacing: 0.0025rem
@mixin smlInterP
color: black
font-size: .9rem
font-size: .6rem
font-family: $InterFont
letter-spacing: 0.0125rem
39 changes: 26 additions & 13 deletions src/styles/sass/main.sass
Original file line number Diff line number Diff line change
Expand Up @@ -5,41 +5,48 @@
body
@include columnFlex
justify-content: center
align-items: center
align-items: stretch
background-color: $primary-color
font-family: 'Roboto', sans-serif
white-space: pre-wrap
word-wrap: break-word
padding: 3rem
// height: 100vh
img
transition: all 0.5s
.container
@include columnFlex
justify-items: center
justify-content: center
align-items: stretch
background-color: $secondary-color
border-radius: 4px
box-shadow: $box-shadow
margin-top: 1rem
padding: 15px 5px
padding: 10px
text-align: left
width: 92%
// width: 92%
#tasksList
@include columnFlex
gap: .3rem
gap: .2rem
div, li
@include rowFlex
justify-content: space-between
align-items: center
border-radius: 4px
// margin-top: .3rem
border: 0
padding: .3rem
gap: .2rem
padding: .1rem
gap: .1rem
margin-bottom: .25rem
li
justify-content: space-evenly
margin-bottom: 0
padding: .5rem

#newTask
&::focus
background: $inputColor
div
gap: .5rem
gap: .2rem
h1
@include smlInterH3

Expand All @@ -51,8 +58,9 @@ input
border-radius: 4px

#userInput
height: 2rem
height: 1.5rem
width: 100%
// margin-bottom: .3rem
#addItem
flex: .9
Expand All @@ -66,13 +74,16 @@ input
transition: all 0.5s

#recyclImg, #addBtn,#dotsImg,#trash
height: 1.7rem
width: 1.5rem
height: 1rem
width: 1rem
opacity: .5
&:hover
opacity: 1
#trash
visibility: visible
#clearAllBtn
@include button
margin-top: .3rem

&:active
transform: scale(0.98)
Expand All @@ -82,4 +93,6 @@ input
.edit
background-color: $inputColor
.hide
display: none
visibility: hidden
.show
visibility: visible

0 comments on commit 1d66f3f

Please sign in to comment.