Skip to content

Commit f5b9602

Browse files
maelgruand1maelgruand1
authored
Add files via upload
1 parent b6a10a0 commit f5b9602

4 files changed

Lines changed: 373 additions & 0 deletions

File tree

‎index.html‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>TaskManager | Web</title>
7+
<link rel="stylesheet" href="styles.css">
8+
</head>
9+
<body>
10+
<div class="header">
11+
<h1 class="title">TaskManager</h1>
12+
</div>
13+
<br>
14+
<div class="navbar">
15+
<button class="left">Acceuil</button>
16+
<button class="left">Tasks</button>
17+
<a id="profile"><img src="./icon/profile.png" alt="Profile"></a>
18+
</div>
19+
<div id="login">
20+
<input type="text" id="name" placeholder="name">
21+
<input type="text" id="email" placeholder="email">
22+
<button id="valider">Valider</button>
23+
<p id="msg"></p>
24+
</div>
25+
<div id="profile-sect"></div>
26+
<br><br><br>
27+
28+
<div id="tasks"></div>
29+
<div id="vue">
30+
<h3>Vues</h3>
31+
<button id="seeTable">See in Table</button>
32+
<button id="seeKanban">See in Kanban</button>
33+
</div>
34+
35+
<script type="module" src="index.js"></script>
36+
</body>
37+
</html>

‎index.js‎

Lines changed: 161 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,161 @@
1+
// Sélection des éléments du DOM
2+
const nameInput = document.getElementById('name');
3+
const emailInput = document.getElementById('email');
4+
const validateBtn = document.getElementById('valider');
5+
const message = document.getElementById('msg');
6+
const profileSect = document.getElementById('profile-sect');
7+
8+
const tasksDiv = document.getElementById('tasks');
9+
const seeKanbanBtn = document.getElementById('seeKanban');
10+
const seeTableBtn = document.getElementById('seeTable');
11+
12+
// Objet pour stocker les informations utilisateur
13+
const user = {
14+
name: '',
15+
email: ''
16+
};
17+
18+
// Fonction de validation des informations utilisateur
19+
function validateUser() {
20+
const name = nameInput.value.trim();
21+
const email = emailInput.value.trim();
22+
23+
if (name === '' || email === '') {
24+
message.innerText = "Erreur : veuillez remplir tous les champs.";
25+
message.style.color = "red";
26+
return;
27+
}
28+
29+
user.name = name;
30+
user.email = email;
31+
32+
message.innerText = `Connexion réussie. Bienvenue, ${user.name} !`;
33+
message.style.color = "green";
34+
35+
displayProfile();
36+
}
37+
38+
// Affichage dynamique du profil utilisateur
39+
function displayProfile() {
40+
profileSect.innerHTML = `
41+
<h3>Profil Utilisateur</h3>
42+
<p>Nom : ${user.name}</p>
43+
<p>Email : ${user.email}</p>
44+
<div>
45+
<input type="text" id="task-input" placeholder="Nouvelle tâche">
46+
<button id="add-task">Ajouter Tâche</button>
47+
</div>
48+
`;
49+
50+
// Activation de l'ajout de tâches une fois l'utilisateur validé
51+
const addTaskBtn = document.getElementById('add-task');
52+
addTaskBtn.addEventListener('click', addTask);
53+
}
54+
55+
// Tableau pour stocker les tâches (vide par défaut)
56+
const tasks = [];
57+
58+
// Fonction pour afficher les tâches en vue Kanban
59+
function displayTasks(view) {
60+
tasksDiv.innerHTML = ""; // Réinitialisation des tâches
61+
62+
if (view === "kanban") {
63+
let kanbanHTML = "<div class='kanban'>";
64+
tasks.forEach((task, index) => {
65+
kanbanHTML += `
66+
<div class='task-card' data-index="${index}">
67+
${task}
68+
<button class="delete-task">Supprimer</button>
69+
<button class="modify-task">Modifier</button>
70+
</div>`;
71+
});
72+
kanbanHTML += "</div>";
73+
tasksDiv.innerHTML = kanbanHTML;
74+
75+
// Ajout des événements de suppression pour chaque tâche
76+
const deleteBtns = document.querySelectorAll('.delete-task');
77+
deleteBtns.forEach((btn) => {
78+
btn.addEventListener('click', function (e) {
79+
const index = e.target.closest('.task-card').getAttribute('data-index');
80+
deleteTask(index);
81+
});
82+
});
83+
84+
// Ajout des événements de modification pour chaque tâche
85+
const modifyBtns = document.querySelectorAll('.modify-task');
86+
modifyBtns.forEach((btn) => {
87+
btn.addEventListener('click', function (e) {
88+
const index = e.target.closest('.task-card').getAttribute('data-index');
89+
modifyTask(index);
90+
});
91+
});
92+
}
93+
94+
if (view === "table") {
95+
let tableHTML = "<table><tr><th>Tâche</th><th>Action</th><th>Modifier</th></tr>";
96+
tasks.forEach((task, index) => {
97+
tableHTML += `
98+
<tr data-index="${index}">
99+
<td>${task}</td>
100+
<td><button class="delete-task">Supprimer</button></td>
101+
<td><button class="modify">Modifier</button></td>
102+
</tr>`;
103+
});
104+
tableHTML += "</table>";
105+
tasksDiv.innerHTML = tableHTML;
106+
107+
// Ajout des événements de suppression pour chaque tâche dans le tableau
108+
const deleteBtns = document.querySelectorAll('.delete-task');
109+
deleteBtns.forEach((btn) => {
110+
btn.addEventListener('click', function (e) {
111+
const index = e.target.closest('tr').getAttribute('data-index');
112+
deleteTask(index);
113+
});
114+
});
115+
116+
// Ajout des événements de modification pour chaque tâche dans le tableau
117+
const modifyBtns = document.querySelectorAll('.modify');
118+
modifyBtns.forEach((btn) => {
119+
btn.addEventListener('click', function (e) {
120+
const index = e.target.closest('tr').getAttribute('data-index');
121+
modifyTask(index);
122+
});
123+
});
124+
}
125+
}
126+
127+
// Fonction pour ajouter une tâche
128+
function addTask() {
129+
const taskInput = document.getElementById('task-input');
130+
const newTask = taskInput.value.trim();
131+
132+
if (newTask !== '') {
133+
tasks.push(newTask);
134+
taskInput.value = '';
135+
displayTasks("kanban"); // On affiche par défaut en Kanban
136+
} else {
137+
alert("Veuillez entrer une tâche valide.");
138+
}
139+
}
140+
141+
// Fonction pour supprimer une tâche
142+
function deleteTask(index) {
143+
tasks.splice(index, 1);
144+
displayTasks("kanban");
145+
}
146+
147+
// Fonction pour modifier une tâche
148+
function modifyTask(index) {
149+
const newTask = prompt("Modifiez la tâche :", tasks[index]);
150+
151+
if (newTask !== null && newTask.trim() !== "") {
152+
tasks[index] = newTask.trim();
153+
displayTasks("kanban"); // Mettre à jour la vue Kanban
154+
displayTasks("table"); // Mettre à jour la vue Table
155+
}
156+
}
157+
158+
// Écouteurs d'événements pour le changement de vue
159+
seeKanbanBtn.addEventListener("click", () => displayTasks("kanban"));
160+
seeTableBtn.addEventListener("click", () => displayTasks("table"));
161+
validateBtn.addEventListener("click", validateUser);

‎profile.png‎

2.33 KB
Loading

‎styles.css‎

Lines changed: 175 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,175 @@
1+
/* Style global */
2+
body {
3+
font-family: Arial, sans-serif;
4+
margin: 0;
5+
padding: 0;
6+
background-color: #f4f4f9;
7+
color: #333;
8+
}
9+
10+
/* Header */
11+
.header {
12+
background-color: #4caf50;
13+
padding: 20px;
14+
text-align: center;
15+
color: white;
16+
}
17+
18+
.title {
19+
margin: 0;
20+
font-size: 2.5em;
21+
font-weight: bold;
22+
}
23+
24+
/* Navbar */
25+
.navbar {
26+
display: flex;
27+
justify-content: space-between;
28+
align-items: center;
29+
background-color: #333;
30+
padding: 10px 20px;
31+
}
32+
33+
.navbar button {
34+
background-color: #555;
35+
color: white;
36+
border: none;
37+
padding: 10px 20px;
38+
margin-right: 10px;
39+
cursor: pointer;
40+
transition: background-color 0.3s;
41+
border-radius: 5px;
42+
}
43+
44+
.navbar button:hover {
45+
background-color: #777;
46+
}
47+
48+
#profile img {
49+
width: 30px;
50+
height: 30px;
51+
border-radius: 50%;
52+
}
53+
54+
/* Formulaire de login */
55+
#login {
56+
width: 300px;
57+
margin: 20px auto;
58+
padding: 20px;
59+
background-color: #fff;
60+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
61+
border-radius: 10px;
62+
text-align: center;
63+
}
64+
65+
#login input {
66+
width: 90%;
67+
padding: 10px;
68+
margin: 10px 0;
69+
border: 1px solid #ccc;
70+
border-radius: 5px;
71+
outline: none;
72+
transition: border-color 0.3s;
73+
}
74+
75+
#login input:focus {
76+
border-color: #4caf50;
77+
}
78+
79+
#valider {
80+
width: 95%;
81+
padding: 10px;
82+
margin-top: 10px;
83+
background-color: #4caf50;
84+
color: white;
85+
border: none;
86+
border-radius: 5px;
87+
cursor: pointer;
88+
transition: background-color 0.3s;
89+
font-weight: bold;
90+
}
91+
92+
#valider:hover {
93+
background-color: #45a049;
94+
}
95+
96+
#msg {
97+
margin-top: 10px;
98+
font-weight: bold;
99+
}
100+
101+
/* Section profil utilisateur */
102+
#profile-sect {
103+
width: 300px;
104+
margin: 20px auto;
105+
padding: 20px;
106+
background-color: #fff;
107+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
108+
border-radius: 10px;
109+
text-align: left;
110+
color: #333;
111+
}
112+
113+
/* Affichage des tâches */
114+
#tasks {
115+
width: 60%;
116+
margin: 20px auto;
117+
padding: 20px;
118+
background-color: #fff;
119+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
120+
border-radius: 10px;
121+
text-align: center;
122+
color: #333;
123+
}
124+
125+
/* Vue Kanban */
126+
.kanban {
127+
display: flex;
128+
justify-content: center;
129+
gap: 10px;
130+
margin-top: 20px;
131+
flex-wrap: wrap;
132+
}
133+
134+
.task-card {
135+
background-color: #e0f7fa;
136+
padding: 15px;
137+
border-radius: 8px;
138+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
139+
width: 200px;
140+
text-align: center;
141+
margin-bottom: 10px;
142+
transition: transform 0.3s;
143+
}
144+
145+
.task-card:hover {
146+
transform: translateY(-5px);
147+
}
148+
149+
/* Vue options */
150+
#vue {
151+
width: 60%;
152+
margin: 20px auto;
153+
padding: 20px;
154+
background-color: #fff;
155+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
156+
border-radius: 10px;
157+
text-align: center;
158+
color: #333;
159+
}
160+
161+
#vue button {
162+
margin: 5px;
163+
padding: 10px 20px;
164+
background-color: #4caf50;
165+
color: white;
166+
border: none;
167+
border-radius: 5px;
168+
cursor: pointer;
169+
transition: background-color 0.3s;
170+
font-weight: bold;
171+
}
172+
173+
#vue button:hover {
174+
background-color: #45a049;
175+
}

0 commit comments

Comments
 (0)