Untitled

<?php
session_start();
if (isset($_POST["submitTask"])) {
    if (!empty($_POST['task'])) {
        if (!isset($_SESSION['tasks'])) {
            $_SESSION['tasks'] = array();
        }
        if (count($_SESSION['tasks'])<10) {
            $_SESSION['tasks'][] = array("task" => htmlentities($_POST['task']), "dead" => false,"color"=> "#".base_convert(rand(0,255),10,16).base_convert(rand(0,255),10,16).base_convert(rand(0,255),10,16));
        }
        else{
            $error = "Trop de chose à faire ! Arrête de procrastiner et mets toi au boulot avant de rajouter d'autres tâches";
        }

    }
}
if (isset($_POST["deleteTask"])) {
    if (isset($_POST['taskId'])) {
        if (isset($_SESSION['tasks'][$_POST['taskId']])) {
            if ($_SESSION['tasks'][$_POST['taskId']]["dead"]) {
                unset($_SESSION['tasks'][$_POST['taskId']]);
            }
            else{
                $_SESSION['tasks'][$_POST['taskId']]["dead"] = true;
            }
        }
    }
}
if (isset($_POST["resetTask"])) {
    unset($_SESSION['tasks']);
}
?>
<!DOCTYPE html>
<html>
<head>
    <title>Ma TO DO liste</title>
    <style type="text/css">
        body{
            margin: 0;
            padding: 0;
            font-family: "Open Sans", sans-serif;
            width: 100%;
        }
        #main{
            background: url("bg.jpg");
            min-height: 100vh;
            background-size: cover;
            background-position: top;
            background-repeat: no-repeat;
            padding-top: 14vh;
        }
        .title{
            text-align: center;
            font-family: "Poiret One", sans-serif;
        }
        .title > h1{
                margin: 0;
        }
        .data{
            font-family: "Papyrus", sans-serif;
            padding-left: 28vw;
            font-size: 2vw;
            width: 40vw;
        }
        .form-container{
            text-align: center;
            padding-left: 28vw;
            width: 40vw;
        }
        .inlineb{
            display: inline-block;
        }
        ul > li{
            display: flex;
            flex-direction: row;
            justify-content: space-between;
        }
        input[type="text"]{
            border-radius: 5px;
            border: 1px #aaa solid;
            padding: 10px;
            margin: 0 5px;
        }
        button{
            border-radius: 30px;
            border: 1px solid #555;
            font-size: 30px;
            font-weight: bold;
            color: #555;
            background-color: transparent;
            margin: 0 5px;
            vertical-align: middle;
        }
        button:hover{
            cursor: pointer;
            background-color: #CCC;
        }
        .blueButton{
            border-radius: 30px;
            border: 1px solid #eee;
            font-size: 20px;
            color: #fff;
            background-color: #666;
            padding: 5px 15px;
            margin: 30px 5px;
        }
        .dead{
            text-decoration: line-through;
        }
        .customTick{
            background: none;
            border: none;
        }
        .customTick:hover{
            cursor: pointer;
        }
        .clear{
            clear: all;
        }
    </style>
</head>
<body>
    <div id="main">
        <div class="title"><h1>Ma TO DO list</h1></div>
        <div class="data">
            <ul>
                <?php
                if (isset($_SESSION['tasks'])) {
                    foreach ($_SESSION['tasks'] as $key => $value) {
                        echo "<li class='". ($value['dead']?"dead":"") ."'><div style='color:". $value['color'] ."'>". $value['task'] ."</div><form method='POST' action='' ><input type='hidden' name='taskId' value='". $key ."'><input style='font-size:1em;' class='customTick' type='submit' name='deleteTask' value='".($value['dead']?"🗑":"✓") ."'></form></li><div class='clear'></div>";
                    }
                }
                ?>
            </ul>
        </div>
        <div class="form-container">
            <form method="POST" action="" class="inlineb">
                <input type="text" name="task" placeholder="Nom de la tâche">
                <button type="submit" name="submitTask">+</button>
            </form>
            <?php
            if (isset($error)) {
                echo "<br><br><span style='color:red'>". $error ."</span>";
            }
            ?>
        </div>
        <div class="form-container">
            <form method="POST" action="" class="inlineb">
                <button type="submit" name="resetTask" class="blueButton">Remettre à 0</button>
            </form>
        </div>
    </div>
</body>
</html>