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

update project #10

Open
wants to merge 5 commits into
base: main
Choose a base branch
from
Open

update project #10

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
94b9818
update project
GeekyHacks Jul 25, 2023
6750b6c
update images source
GeekyHacks Jul 25, 2023
52e638e
update images source
GeekyHacks Jul 26, 2023
2016392
update images source
GeekyHacks Jul 27, 2023
382b0c4
update images source
GeekyHacks Jul 27, 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
1 change: 0 additions & 1 deletion dist/bundle0a4d8217c7af776c267d.js.map
View file
Open in desktop

This file was deleted.

113 changes: 60 additions & 53 deletions dist/bundle0a4d8217c7af776c267d.js → dist/bundle60d39da582b4e76e6a3f.js
View file
Open in desktop

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions dist/bundle60d39da582b4e76e6a3f.js.map
View file
Open in desktop

Large diffs are not rendered by default.

27 changes: 15 additions & 12 deletions dist/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,21 +7,24 @@
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>

<title>%= htmlWebpackPlugin.options.title %</title>
<script defer src="bundle0a4d8217c7af776c267d.js"></script></head>
<script defer src="bundle60d39da582b4e76e6a3f.js"></script></head>
<body>
<header><h1>ToDo List</h1></header>
<main class="container">
<div>
<h1 for="cars">ToDo List:</h1>
<img id="recyclImg" src="./assets/refresh.png" alt="refresh todo list" />
</div>
<div>
<input id="userInput" type="text" placeholder="Add to the list" required autofocus />
<img id="addBtn" alt="add new task" src="./assets/enter.png" />
</div>

<ul id="tasksList"></ul>

<ul id="tasksList">
<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="https://github.com/GeekyHacks">geekyhacks</a></h3>
</footer>
</body>
</html>
4 changes: 2 additions & 2 deletions src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ 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 { TaskStatus } from './modules/updateStatus.js';
import { saveData } from './modules/userInput.js';
const userInput = document.querySelector('#userInput');
const addBtn = document.querySelector('#addBtn');
Expand All @@ -18,7 +18,7 @@ const reloading = () => {
setInterval(document.location.reload());
};

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

TaskStatus.updateStatus();
Expand Down
19 changes: 2 additions & 17 deletions src/modules/addTask.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,24 +4,9 @@ export const taskarr = JSON.parse(localStorage.getItem('taskarr')) || [];

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

taskarr.sort((a, b) => a.index - b.index);
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));
});
93 changes: 6 additions & 87 deletions src/modules/displayList.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,6 @@ 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');
Expand All @@ -15,124 +13,45 @@ export default (task) => {
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="" />
<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} />
<input class="newTasks" type="text" id="addItem" value="${taskarr[i].description}" />
<img class="trash" id="trash" src='/assets/three-dots.png' alt="" />
<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');

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

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

return event.preventDefault();
});
// the trick is with input
task.addEventListener('input', () => {
task.addEventListener('input', (event) => {
event.preventDefault();
taskarr[index].description = task.value;
saveData(taskarr);
});
});
};

// 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);
// });
// });
// };
9 changes: 9 additions & 0 deletions src/styles/sass/global.sass
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,15 @@ $primary-color: #2fa8cc
$secondary-color: #acc6e4
$inputColor:#a8ccf5
$box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1), 0 6px 6px rgba(0, 0, 0, 0.1)
$qrpadding: calc( 20% - 100px )
$Qrpadding: calc( 25% - 120px )
$qlpadding: calc( 20% - 100px )
$Qlpadding: calc( 25% - 120px )
$qrmargin: calc( 35% - 100px )
$Qrmargin: calc( 30% - 100px )
$qlmargin: calc( 35% - 100px )
$Qlmargin: calc( 30% - 100px )

*
box-sizing: border-box
margin: 0
Expand Down
31 changes: 22 additions & 9 deletions src/styles/sass/main.sass
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,19 +11,25 @@ body
white-space: pre-wrap
word-wrap: break-word
padding: 3rem
// height: 100vh
gap: 3rem
img
transition: all 0.5s
header
@include smlInterH2

.container
@include columnFlex
justify-content: center
justify-items: center
align-items: stretch
align-self: stretch
background-color: $secondary-color
border-radius: 4px
box-shadow: $box-shadow
padding: 10px
margin-left: $qlmargin
margin-right: $qrmargin
text-align: left
width: 50%
#tasksList
@include columnFlex
gap: .2rem
Expand All @@ -32,13 +38,11 @@ div, li
justify-content: space-between
align-items: center
border-radius: 4px
// margin-top: .3rem
border: 0
padding: .1rem
gap: .1rem
margin-bottom: .25rem
li
justify-content: space-evenly
margin-bottom: 0
padding: .5rem

Expand All @@ -60,7 +64,6 @@ input
#userInput
height: 1.5rem
width: 100%
// margin-bottom: .3rem

#addItem
flex: .9
Expand All @@ -85,14 +88,24 @@ input
@include button
margin-top: .3rem

&:active
transform: scale(0.98)
@media (min-width: 768px)
#clearAllBtn
margin-left: $Qlmargin
margin-right: $Qrmargin

&:active
transform: scale(0.98)

&:focus
outline: 0

&:focus
outline: 0
.edit
background-color: $inputColor
.hide
visibility: hidden
.show
visibility: visible
footer
position: relative
align-self: center
bottom: 5px
41 changes: 14 additions & 27 deletions src/template.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,35 +9,22 @@
<title>%= htmlWebpackPlugin.options.title %</title>
</head>
<body>
<header><h1>ToDo List</h1></header>
<main class="container">
<div>
<h1 for="cars">ToDo List:</h1>
<img id="recyclImg" src="./assets/refresh.png" alt="refresh todo list" />
</div>
<div>
<input id="userInput" type="text" placeholder="Add to the list" required autofocus />
<img id="addBtn" alt="add new task" src="./assets/enter.png" />
</div>

<ul id="tasksList"></ul>

<ul id="tasksList">
<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="https://github.com/GeekyHacks">geekyhacks</a></h3>
</footer>
</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> -->
Loading