codesandbox · techmefr · Oct 3, 2023
diff --git a/.codesandbox/workspace.json b/.codesandbox/workspace.json
@@ -0,0 +1,20 @@
+{
+  "responsive-preview": {
+    "Mobile": [
+      320,
+      675
+    ],
+    "Tablet": [
+      1024,
+      765
+    ],
+    "Desktop": [
+      1400,
+      800
+    ],
+    "Desktop HD": [
+      1920,
+      1080
+    ]
+  }
+}
diff --git a/index.html b/index.html
@@ -1,12 +1,74 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="fr">
   <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <title>Static Template</title>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Adaptive Placeholder</title>
+    <link rel="stylesheet" href="style.css" />
   </head>
-  <body>
-    <h1>This is a static template, there is no bundler or bundling involved!</h1>
+  <body id="imageContact">
+    <header>
+      <nav>
+        <a href="/index.html"
+          ><img class="logo" src="/ressources/Image PNG.png" alt="Logo Done Us"
+        /></a>
+        <h1>Done Us</h1>
+        <div class="contact">
+          <a href="contactUs.html"
+            ><img src="/ressources/contactUs.png" alt=""
+          /></a>
+        </div>
+      </nav>
+    </header>
+
+    <div class="newTask">
+      <select id="taskCardSelector">
+        <option value="carteUn">Professional</option>
+        <option value="carteDeux">Personal</option>
+        <option value="nouvelleCarte">Créer une nouvelle liste</option>
+      </select>
+      <input
+        type="text"
+        id="inputText"
+        placeholder="Please, insert a new task !"
+      />
+      <button onclick="addTask()">Add</button>
+    </div>
+
+    <section class="carteUn" id="carteUn">
+      <div class="containerTask">
+        <h2>Professional</h2>
+        <div class="titleContainerTasks">
+          <h2></h2>
+        </div>
+        <div class="tasksList">
+          <ul id="listUn"></ul>
+        </div>
+      </div>
+    </section>
+
+    <section class="carteDeux" id="carteDeux">
+      <div class="containerTasks">
+        <h2>Personal</h2>
+        <div class="titleContainerTasks">
+          <h2></h2>
+        </div>
+        <div class="tasksList">
+          <ul id="listDeux"></ul>
+        </div>
+      </div>
+    </section>
+
+    <!-- Le menu radial -->
+    <div id="radialMenu" class="radial-menu">
+      <ul>
+        <li><a href="#" id="editTask">Éditer</a></li>
+        <li><a href="#" id="deleteTask">Supprimer</a></li>
+        <li><a href="#" id="checkTask">Cocher</a></li>
+        <li><a href="#" id="urgentTask">Mettre en urgent</a></li>
+      </ul>
+    </div>
+
+    <script src="script.js"></script>
   </body>
-</html>
+</html>
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
-  "name": "static",
+  "name": "done-us",
   "version": "1.0.0",
-  "description": "This is a static template with no bundling",
+  "description": "",
   "main": "index.html",
   "scripts": {
     "start": "serve",
@@ -11,11 +11,7 @@
     "type": "git",
     "url": "git+https://github.com/codesandbox-app/static-template.git"
   },
-  "keywords": [
-    "static",
-    "template",
-    "codesandbox"
-  ],
+  "keywords": [],
   "author": "Ives van Hoorne",
   "license": "MIT",
   "bugs": {
@@ -25,4 +21,4 @@
   "devDependencies": {
     "serve": "^11.2.0"
   }
-}
+}
diff --git a/ressources/Image PNG.png b/ressources/Image PNG.png
diff --git a/ressources/baseLogo.svg b/ressources/baseLogo.svg
diff --git a/ressources/contactUs.png b/ressources/contactUs.png
diff --git a/script.js b/script.js
@@ -0,0 +1,119 @@
+let inputText = document.getElementById("inputText");
+let taskCardSelector = document.getElementById("taskCardSelector");
+let radialMenu = document.getElementById("radialMenu");
+let selectedTask = null;
+
+// Créer une nouvelle carte (liste)
+function createNewCard(cardName) {
+  let newCard = document.createElement("section");
+  newCard.classList.add("carte");
+  newCard.id = cardName;
+  newCard.appendChild(containerTasks);
+
+  let containerTasks = document.createElement("div");
+  containerTasks.classList.add("containerTasks");
+
+  let h2 = document.createElement("h2");
+  h2.textContent = cardName;
+  titleContainerTasks.appendChild(h2);
+
+  let titleContainerTasks = document.createElement("div");
+  titleContainerTasks.classList.add("titleContainerTasks");
+  containerTasks.appendChild(titleContainerTasks);
+
+  let ul = document.createElement("ul");
+  containerTasks.appendChild(ul);
+
+  // Mettre à jour le sélecteur d'input avec la nouvelle carte
+  let newOption = document.createElement("option");
+  newOption.value = cardName;
+  newOption.textContent = cardName;
+  taskCardSelector.insertBefore(newOption, taskCardSelector.lastChild);
+
+  return newCard;
+}
+
+// Ajouter une tâche
+function addTask() {
+  let selectedCardValue = taskCardSelector.value;
+
+  if (selectedCardValue === "nouvelleCarte") {
+    // Demander à l'utilisateur le nom de la nouvelle carte (liste)
+    let newCardName = prompt("Nom de la nouvelle liste :");
+
+    if (newCardName) {
+      // Créer une nouvelle carte avec le nom saisi
+      let newCard = createNewCard(newCardName);
+      document.body.insertBefore(newCard, radialMenu);
+      selectedCardValue = newCardName; // Mettre à jour la valeur sélectionnée
+    } else {
+      // L'utilisateur a annulé la création de la carte, ne rien faire
+      return;
+    }
+  }
+
+  let selectedList = document.getElementById(selectedCardValue);
+
+  if (inputText.value === "") {
+    alert("Veuillez insérer une nouvelle tâche !");
+    return;
+  }
+
+  let li = document.createElement("li");
+  li.textContent = inputText.value;
+
+  // Ajouter la tâche à la carte sélectionnée
+  selectedList.querySelector("ul").appendChild(li);
+  inputText.value = "";
+  saveData();
+}
+
+// Menu radial
+document.body.addEventListener("contextmenu", function (e) {
+  e.preventDefault();
+
+  if (e.target.tagName === "LI") {
+    selectedTask = e.target;
+    let x = e.clientX;
+    let y = e.clientY;
+
+    radialMenu.style.top = y + "px";
+    radialMenu.style.left = x + "px";
+    radialMenu.style.display = "block";
+  } else {
+    radialMenu.style.display = "none";
+  }
+}false);
+
+// Gestion des options du menu radial
+radialMenu.addEventListener("click", function (e) {
+  if (e.target.id === "editTask") {
+    // Éditer la tâche (à implémenter)
+  } else if (e.target.id === "deleteTask") {
+    // Supprimer la tâche
+    selectedTask.remove();
+    saveData();
+  } else if (e.target.id === "checkTask") {
+    // Cocher la tâche
+    selectedTask.classList.toggle("checked");
+    saveData();
+  } else if (e.target.id === "urgentTask") {
+    // Mettre en urgent (à implémenter)
+  }
+
+  radialMenu.style.display = "none";
+});
+
+// Reste de votre code pour la gestion des tâches et de l'historique
+
+// Sauvegarder les données
+function saveData() {
+  // ... (implémenter la sauvegarde des données)
+}
+
+// Charger l'historique des tâches
+function historyTasks() {
+  // ... (implémenter le chargement de l'historique des tâches)
+}
+
+historyTasks();