theoludwig/FunctionProject
theoludwig/FunctionProject
Archived
1
1
Fork 0
Code Pull Requests Actions Releases Activity

Hotfix : Responsive ToDoList

Browse Source
This commit is contained in:
Divlo 2019-12-27 00:08:41 +01:00
parent 444feaed26
commit d4d617b401
3 changed files with 19 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
css/style.css
View File

@ -163,10 +163,6 @@ footer i:hover
}
.clear{
width : 30px;
height: 30px;
position: absolute;
right:20px;
top: 20px;
}
.clear i{
font-size: 27px;
@ -192,7 +188,7 @@ footer i:hover
margin:0;
}
.item{
height: 45px;
height: 100%;
min-height: 45px;
position: relative;
border-bottom: 1px solid rgba(0,0,0,0.1);
@ -214,13 +210,8 @@ footer i:hover
color:#6eb200;
}
.item p.text {
position: absolute;
padding:0;
margin:0;
margin-top: 10px;
font-size: 20px;
left:50px;
top:10px;
max-width:285px;
transition: 0.2s;
color: #181818;
}

20
scripts/toDoList.js
View File

@ -18,10 +18,16 @@ function addTask(task, id, done, trash) {
if(trash) {
return;
}
const item = `<li class="item" id=${id}>
<i class="fa ${(done) ? check : unCheck} co" id="complete"></i>
<p class="text ${(done) ? lineThrough : ""}">${task}</p>
<i class="fas fa-trash-alt de" id="removeTask"></i>
const item = `<li class="item row" id=${id}>
<div class="col-2">
<i class="fa ${(done) ? check : unCheck} co" id="complete"></i>
</div>
<div class="col-8">
<p class="text text-center ${(done) ? lineThrough : ""}">${task}</p>
</div>
<div class="col-2">
<i class="fas fa-trash-alt de" id="removeTask"></i>
</div>
</li>
`;
list.insertAdjacentHTML("beforeend", item);
@ -49,19 +55,19 @@ btnAddTask.addEventListener('click', (event) => {addTaskElement(event)});
list.addEventListener('click', (event) => {
const element = event.target;
const elementJob = element.getAttribute('id');
const elementId = element.parentNode.getAttribute('id');
const elementId = element.parentNode.parentNode.getAttribute('id');
/* Tâche compléter */
if(elementJob == "complete") {
element.classList.toggle(check);
element.classList.toggle(unCheck);
element.parentNode.querySelector(".text").classList.toggle(lineThrough);
element.parentNode.parentNode.querySelector(".text").classList.toggle(lineThrough);
tasksListArray[elementId].done = tasksListArray[elementId].done ? false : true;
}
/* Supprime une tâche */
else if(elementJob == "removeTask") {
element.parentNode.parentNode.removeChild(element.parentNode);
element.parentNode.parentNode.remove();
tasksListArray[elementId].trash = true;
}
localStorage.setItem("tasks", JSON.stringify(tasksListArray));

8
views/function-views/toDoList.php
View File

@ -6,17 +6,17 @@
<div class="container">
<div class="row">
<div class="col-10 mx-auto">
<div class="col-sm-12 col-md-10 mx-auto">
<div class="header">
<h1 class="text-center pt-3 toDoListTitle"><img style="height: 1.4em;" src="/img/function-image/toDoList.png" alt="ToDoList">Liste de choses à faire</h1>
<div class="clear">
<div class="clear pt-3 pb-3 mx-auto">
<i class="fas fa-sync"></i>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-10 mx-auto">
<div class="col-sm-12 col-md-10 mx-auto">
<div class="content">
<!-- Remplissage de la liste avec Javascript -->
<ul id="list">
@ -26,7 +26,7 @@
</div>
</div>
<div class="row">
<div class="col-10 mx-auto">
<div class="col-sm-12 col-md-10 mx-auto">
<div class="add-to-do">
<form action="" id="addTask">
<i id="btnAddTask" class="fa fa-plus-circle"></i>