<!
DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Ma Todo List - Projet Étudiant</title>
<style>
/* CSS basique comme un étudiant de 1ère année */
body {
font-family: Arial, sans-serif;
background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
margin: 0;
padding: 20px;
min-height: 100vh;
}
.container {
max-width: 800px;
margin: 0 auto;
background: white;
border-radius: 15px;
padding: 20px;
box-shadow: 0 10px 30px rgba(0,0,0,0.3);
animation: slideIn 0.5s ease-out;
}
@keyframes slideIn {
from {
transform: translateY(-50px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
h1 {
text-align: center;
color: #333;
margin-bottom: 30px;
animation: bounce 1s ease-in-out;
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-10px);
}
60% {
transform: translateY(-5px);
}
}
/* Section Todo */
.todo-section {
margin-bottom: 40px;
padding: 20px;
border: 2px solid #4ecdc4;
border-radius: 10px;
background: #f8f9fa;
}
.input-container {
display: flex;
margin-bottom: 20px;
gap: 10px;
}
input[type="text"] {
flex: 1;
padding: 12px;
border: 2px solid #ddd;
border-radius: 8px;
font-size: 16px;
transition: all 0.3s ease;
}
input[type="text"]:focus {
border-color: #4ecdc4;
transform: scale(1.02);
outline: none;
box-shadow: 0 0 10px rgba(78, 205, 196, 0.3);
}
button {
padding: 12px 20px;
background: #4ecdc4;
color: white;
border: none;
border-radius: 8px;
cursor: pointer;
font-size: 16px;
transition: all 0.3s ease;
}
button:hover {
background: #45b7aa;
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
button:active {
transform: translateY(0);
}
/* Liste des tâches */
.todo-list {
list-style: none;
padding: 0;
}
.todo-item {
background: white;
margin: 10px 0;
padding: 15px;
border-radius: 8px;
border-left: 4px solid #4ecdc4;
display: flex;
justify-content: space-between;
align-items: center;
animation: fadeIn 0.3s ease-in;
transition: all 0.3s ease;
}
.todo-item:hover {
transform: translateX(5px);
box-shadow: 0 3px 10px rgba(0,0,0,0.1);
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateX(-20px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
.[Link] {
text-decoration: line-through;
opacity: 0.6;
background: #e9ecef;
}
.delete-btn {
background: #ff6b6b;
padding: 5px 10px;
font-size: 12px;
}
.delete-btn:hover {
background: #ff5252;
}
/* Section Calendrier */
.calendar-section {
padding: 20px;
border: 2px solid #ff6b6b;
border-radius: 10px;
background: #f8f9fa;
}
.calendar {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 5px;
margin-top: 20px;
}
.calendar-day {
aspect-ratio: 1;
border: 1px solid #ddd;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: white;
border-radius: 5px;
transition: all 0.3s ease;
cursor: pointer;
}
.calendar-day:hover {
background: #fff3cd;
transform: scale(1.05);
}
.[Link] {
background: #d4edda;
border-color: #28a745;
animation: pulse 0.5s ease-in-out;
}
@keyframes pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
.day-number {
font-weight: bold;
margin-bottom: 5px;
}
.day-checkbox {
transform: scale(1.2);
}
.calendar-header {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 5px;
margin-bottom: 10px;
}
.calendar-header div {
text-align: center;
font-weight: bold;
padding: 10px;
background: #6c757d;
color: white;
border-radius: 5px;
}
/* Animations rigolotes */
.wiggle {
animation: wiggle 0.5s ease-in-out;
}
@keyframes wiggle {
0%, 100% { transform: rotate(0deg); }
25% { transform: rotate(-3deg); }
75% { transform: rotate(3deg); }
}
</style>
</head>
<body>
<div class="container">
<h1>📝 Ma Super Todo List 📅</h1>
<!-- Section Todo List -->
<div class="todo-section">
<h2>🎯 Mes Tâches</h2>
<div class="input-container">
<input type="text" id="todoInput" placeholder="Ajouter
une nouvelle tâche...">
<button onclick="ajouterTache()">Ajouter</button>
</div>
<ul class="todo-list" id="todoList"></ul>
</div>
<!-- Section Calendrier -->
<div class="calendar-section">
<h2>📅 Mon Calendrier du Mois</h2>
<div class="calendar-header">
<div>Lun</div>
<div>Mar</div>
<div>Mer</div>
<div>Jeu</div>
<div>Ven</div>
<div>Sam</div>
<div>Dim</div>
</div>
<div class="calendar" id="calendar"></div>
</div>
</div>
<script>
// JavaScript basique comme un étudiant de 1ère année
// Variables globales (pas très propre mais bon, c'est du
niveau étudiant !)
let todos = [];
let todoId = 0;
// Fonction pour ajouter une tâche
function ajouterTache() {
const input = [Link]('todoInput');
const texte = [Link]();
if (texte === '') {
alert('Écris quelque chose !');
return;
}
// Créer un objet tâche simple
const nouvelleTache = {
id: todoId++,
texte: texte,
terminee: false
};
[Link](nouvelleTache);
[Link] = '';
afficherTaches();
// Animation rigolote
[Link]('wiggle');
setTimeout(() => [Link]('wiggle'), 500);
}
// Fonction pour afficher les tâches
function afficherTaches() {
const liste = [Link]('todoList');
[Link] = '';
for (let i = 0; i < [Link]; i++) {
const tache = todos[i];
const li = [Link]('li');
[Link] = 'todo-item';
if ([Link]) {
[Link]('completed');
}
[Link] = `
<span onclick="toggleTache(${[Link]})"
style="cursor: pointer;">
${[Link] ? '✅' : '⭕'} ${[Link]}
</span>
<button class="delete-btn"
onclick="supprimerTache(${[Link]})">🗑️
</button>
`;
[Link](li);
}
}
// Fonction pour marquer une tâche comme terminée
function toggleTache(id) {
for (let i = 0; i < [Link]; i++) {
if (todos[i].id === id) {
todos[i].terminee = !todos[i].terminee;
break;
}
}
afficherTaches();
}
// Fonction pour supprimer une tâche
function supprimerTache(id) {
// Méthode pas optimale mais simple pour un étudiant
const nouveauxTodos = [];
for (let i = 0; i < [Link]; i++) {
if (todos[i].id !== id) {
[Link](todos[i]);
}
}
todos = nouveauxTodos;
afficherTaches();
}
// Fonction pour créer le calendrier
function creerCalendrier() {
const calendrier = [Link]('calendar');
const aujourd = new Date();
const mois = [Link]();
const annee = [Link]();
// Calculer le premier jour du mois et le nombre de jours
const premierJour = new Date(annee, mois, 1);
const dernierJour = new Date(annee, mois + 1, 0);
const nombreJours = [Link]();
const premierJourSemaine = [Link]();
// Ajuster pour que lundi soit le premier jour (0)
const decalage = premierJourSemaine === 0 ? 6 :
premierJourSemaine - 1;
// Créer les cases vides pour les jours précédents
for (let i = 0; i < decalage; i++) {
const caseVide = [Link]('div');
[Link] = 'calendar-day';
[Link] = '0.3';
[Link](caseVide);
}
// Créer les cases pour chaque jour du mois
for (let jour = 1; jour <= nombreJours; jour++) {
const caseJour = [Link]('div');
[Link] = 'calendar-day';
const numeroJour = [Link]('div');
[Link] = 'day-number';
[Link] = jour;
const checkbox = [Link]('input');
[Link] = 'checkbox';
[Link] = 'day-checkbox';
[Link] = function() {
if ([Link]) {
[Link]('checked');
} else {
[Link]('checked');
}
};
[Link](numeroJour);
[Link](checkbox);
[Link](caseJour);
}
}
// Permettre d'ajouter une tâche avec Entrée
[Link]('todoInput').addEventListener('keypress',
function(e) {
if ([Link] === 'Enter') {
ajouterTache();
}
});
// Initialiser le calendrier quand la page se charge
[Link] = function() {
creerCalendrier();
// Ajouter quelques tâches d'exemple
[Link]('todoInput').value = 'Faire mes
devoirs de maths';
ajouterTache();
[Link]('todoInput').value = 'Réviser pour
l\'examen';
ajouterTache();
[Link]('todoInput').value = 'Appeler
maman';
ajouterTache();
};
</script>
</body>
</html>