New function : toDoList

css/style.css

@@ -146,3 +146,125 @@ footer i:hover
     font-size: 18px;
     font-family: 'Roboto', 'sans-serif';
 }
+
+/* ToDo List */
+
+/* ------------ header ------------ */
+.header{
+    height:100%;
+    background-color: #fff;
+    border-radius: 15px 15px 0 0;
+    position: relative;
+    border-bottom: 1px solid rgba(0,0,0,0.3);
+}
+.toDoListTitle {
+    color: #181818;
+    font-family: 'Montserrat', 'Arial', sans-serif;
+}
+.clear{
+    width : 30px;
+    height: 30px;
+    position: absolute;
+    right:20px;
+    top: 20px;
+}
+.clear i{
+    font-size: 27px;
+    color: #181818;
+}
+.clear i:hover{
+    cursor: pointer;
+    transform: rotate(60deg);
+}
+
+/* ------------ content ------------ */
+.content{
+    height: 350px;
+    max-height:350px;
+    overflow: auto;
+    background-color: #fff;
+}
+.content::-webkit-scrollbar { 
+    display: none; 
+}
+.content ul{
+    padding:0;
+    margin:0;
+}
+.item{
+    height: 45px;
+    min-height: 45px;
+    position: relative;
+    border-bottom: 1px solid rgba(0,0,0,0.1);
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+.item i.co{
+    position: absolute;
+    font-size: 25px;
+    padding-left:5px;
+    left:15px;
+    top:10px;
+}
+.item i.co:hover{
+    cursor: pointer;
+}
+.fa-check-circle{
+    color:#6eb200;
+}
+.item p.text {
+    position: absolute;
+    padding:0;
+    margin:0;
+    font-size: 20px;
+    left:50px;
+    top:10px;
+    max-width:285px;
+    transition: 0.2s;
+    color: #181818;
+}
+.lineThrough {
+    text-decoration: line-through;
+    color : #ccc;
+}
+.item i.de{
+    color: #363636;
+    position: absolute;
+    font-size: 25px;
+    right:15px;
+    top:10px;
+}
+.item i.de:hover{
+    color:#af0000;
+    cursor: pointer;
+}
+/* ------------ add item ------------ */
+.add-to-do{
+    position: relative;
+    height:80px;
+    padding: 10px;
+    border-top: 1px solid rgba(0,0,0,0.1);
+    border-radius: 0 0 15px 15px;
+    background-color: #fff;
+}
+.add-to-do i{
+    position: absolute;
+    font-size: 40px;
+    color: #4162f6;
+}
+
+.add-to-do input{
+    position: absolute;
+    left: 50px;
+    height: 35px;
+    border: none;
+    font-size: 20px;
+    padding-left:10px;
+    max-width: 50%;
+}
+.add-to-do input::-webkit-input-placeholder { 
+    color: #4162f6;
+    font-family: sans-serif;
+    font-size: 20px;
+}

php/config.php

@@ -110,6 +110,11 @@ switch ($currentpage) {
         $description = "La liste de vos liens raccourcit les plus récents.";
         $image = 'https://function.divlo.fr/img/function-image/linkShortener.png';
         break;
+    case '/views/function-views/toDoList.php':
+        $title = 'Liste de choses à faire';
+        $description = "La liste des choses à faire.";
+        $image = 'https://function.divlo.fr/img/function-image/toDoList.png';
+        break;
     default:
         $title = 'Erreur 404';
         $description = "Cette page n'existe pas!";

scripts/toDoList.js

@@ -0,0 +1,79 @@
+/* Variables séléction DOM */
+const addTaskForm = document.getElementById('addTask');
+const clear = document.querySelector(".clear");
+const list = document.getElementById("list");
+const input = document.getElementById("input");
+const btnAddTask = document.getElementById('btnAddTask');
+
+/* Variables */
+const tasksListArray = JSON.parse(localStorage.getItem('tasks')) || [];
+let id = tasksListArray.length;
+// Classes CSS
+const check = "fa-check-circle";
+const unCheck = "fa-circle";
+const lineThrough = "lineThrough";
+
+/* Créer la tâche dans le DOM */
+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>
+                  </li>
+                `;
+    list.insertAdjacentHTML("beforeend", item);
+}
+
+/* Ajoute un élément à la liste */
+function addTaskElement(event) {
+    event.preventDefault();
+    const taskValue = document.getElementById('taskToAdd').value;
+    addTask(taskValue, id, false, false);
+    tasksListArray.push({
+        name : taskValue,
+        id : id,
+        done : false,
+        trash : false   
+    });
+    localStorage.setItem('tasks', JSON.stringify(tasksListArray));
+    id++;
+    addTaskForm.reset();
+}
+addTaskForm.addEventListener('submit', (event) => {addTaskElement(event)});
+btnAddTask.addEventListener('click', (event) => {addTaskElement(event)});
+
+/* Ajoute un élément à la liste */
+list.addEventListener('click', (event) => {
+    const element = event.target; 
+    const elementJob = element.getAttribute('id');
+    const elementId = element.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);
+        tasksListArray[elementId].done = tasksListArray[elementId].done ? false : true;
+    }
+
+    /* Supprime une tâche */
+    else if(elementJob == "removeTask") {
+        element.parentNode.parentNode.removeChild(element.parentNode);
+        tasksListArray[elementId].trash = true;
+    }
+    localStorage.setItem("tasks", JSON.stringify(tasksListArray));
+});
+
+/* Affiche les tâches enregistrées */
+tasksListArray.forEach((item) => {
+    addTask(item.name, item.id, item.done, item.trash);
+});
+
+/* Supprime le localStorage */ 
+clear.addEventListener("click", function(){
+    localStorage.clear();
+    location.reload();
+});

views/function-list.php

@@ -126,6 +126,17 @@
                 <a href="./function-views/linkShortener.php"><img class="function-list-image" src="/img/function-image/linkShortener.png" alt="Raccourcisseurs de liens"></a>
                 <p class="function-list-description">Une URL trop longue ? Raccourcissez-là !</p>
             </div>
+        </div>
+    </div>
+
+    <div class="row">
+        <div class="col-12 pb-4">
+            <div class="text-center pb-5">
+                <h2 class="function-list-title"><a href="./function-views/toDoList.php">Liste de choses à faire</a></h2>
+                <a href="./function-views/toDoList.php"><img class="function-list-image" src="/img/function-image/toDoList.png" alt="ToDoList"></a>
+                <p class="function-list-description"></p>
+            </div>
+        </div>
     </div>
 
 </div>

views/function-views/toDoList.php

@@ -0,0 +1,43 @@
+<!-- Config -->
+<?php include("../../php/config.php");?>
+
+<!-- Header -->
+<?php include("../../incl/header.php");?>
+
+<div class="container">
+    <div class="row">
+        <div class="col-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">
+                    <i class="fas fa-sync"></i>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="row">
+        <div class="col-10 mx-auto">
+            <div class="content">
+                <!-- Remplissage de la liste avec Javascript -->
+                <ul id="list">
+
+                </ul>
+            </div>
+        </div>
+    </div>
+    <div class="row">
+        <div class="col-10 mx-auto">
+            <div class="add-to-do">
+                <form action="" id="addTask">
+                    <i id="btnAddTask" class="fa fa-plus-circle"></i>
+                    <input type="text" name="taskToAdd" id="taskToAdd" placeholder="Ajouter">
+                </form>
+            </div>
+        </div>
+    </div>
+</div>
+
+<script defer src="/scripts/toDoList.js"></script>
+
+<!-- Footer -->
+<?php include("../../incl/footer.php");?>