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

16
scripts/toDoList.js
View File

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

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

@ -6,17 +6,17 @@
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="col-10 mx-auto"> <div class="col-sm-12 col-md-10 mx-auto">
<div class="header"> <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> <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> <i class="fas fa-sync"></i>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-10 mx-auto"> <div class="col-sm-12 col-md-10 mx-auto">
<div class="content"> <div class="content">
<!-- Remplissage de la liste avec Javascript --> <!-- Remplissage de la liste avec Javascript -->
<ul id="list"> <ul id="list">
@ -26,7 +26,7 @@
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-10 mx-auto"> <div class="col-sm-12 col-md-10 mx-auto">
<div class="add-to-do"> <div class="add-to-do">
<form action="" id="addTask"> <form action="" id="addTask">
<i id="btnAddTask" class="fa fa-plus-circle"></i> <i id="btnAddTask" class="fa fa-plus-circle"></i>