Skip to content

Commit 909f64a

Browse files
Luckson-devLuckson-dev
committed
TodoList
1 parent efc07a4 commit 909f64a

File tree

11 files changed

+6703
-0
lines changed

11 files changed

+6703
-0
lines changed

‎TodoList/asserts/font/bootstrap-icons.css‎

Lines changed: 2078 additions & 0 deletions
Large diffs are not rendered by default.

‎TodoList/asserts/font/bootstrap-icons.json‎

Lines changed: 2052 additions & 0 deletions
Large diffs are not rendered by default.

‎TodoList/asserts/font/bootstrap-icons.min.css‎

Lines changed: 5 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎TodoList/asserts/font/bootstrap-icons.scss‎

Lines changed: 2090 additions & 0 deletions
Large diffs are not rendered by default.

‎TodoList/asserts/font/fonts/bootstrap-icons.woff‎

172 KB
Binary file not shown.

‎TodoList/asserts/font/fonts/bootstrap-icons.woff2‎

127 KB
Binary file not shown.

‎TodoList/asserts/images/blue.webp‎

13.1 KB
Loading

‎TodoList/asserts/images/woman-customer.webp‎

38.9 KB
Loading

‎TodoList/index.html‎

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
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+
<link rel="stylesheet" href="./asserts/font/bootstrap-icons.css">
7+
<link rel="stylesheet" href="style.css">
8+
<script src="script.js" defer></script>
9+
<title>TodoList</title>
10+
</head>
11+
<body>
12+
<header>
13+
<nav class="nav-bar">
14+
<h1 class="nav-bar__t">TodoList</h1>
15+
<button class="nav-bar__btn btn" id="add">Add card</button>
16+
</nav>
17+
</header>
18+
19+
<!-- Section -->
20+
<section>
21+
<div class="container">
22+
<div class="content">
23+
24+
<!-- item -->
25+
<div class="content__item">
26+
<div class="item__image">
27+
<img src="./asserts/images/blue.webp" alt="Card Image">
28+
<p>Lorem ipsum dolor site amet</p>
29+
</div>
30+
<div class="item__infos">
31+
<h1>Lorem ipsum dolor sit amet consectetur</h1>
32+
<p>
33+
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
34+
Quia aspernatur beatae at tempora. Consequuntur, quo assumenda.
35+
</p>
36+
<div class="item__infos__btns">
37+
<button class="btn">Details</button>
38+
<div class="item__infos__icons">
39+
<i class="bi bi-pen"></i>
40+
<i class="bi bi-trash"></i>
41+
<div class="alert-content"></div>
42+
</div>
43+
</div>
44+
</div>
45+
</div>
46+
<!-- End item -->
47+
48+
</div>
49+
</div>
50+
51+
<!-- Modal -->
52+
53+
<div class="modal-container hide" id="modal-container">
54+
<div class="modal" id="modal">
55+
<div class="modal__header">
56+
<h1>Add card</h1>
57+
<i class="bi bi-x"></i>
58+
</div>
59+
<div class="errors"></div>
60+
<form action="" class="modal__form">
61+
<div class="modal__form__file">
62+
<label for="imageInput">
63+
<i class="bi bi-card-image"></i>
64+
<input type="file" id="imageInput" accept="image/*" style="display: none;">
65+
<img src="" id="image-preview" alt="">
66+
</label>
67+
</div>
68+
<div class="modal__form__inputs">
69+
<div>
70+
<input type="text" placeholder="">
71+
</div>
72+
<div>
73+
<input type="text" id="title" placeholder="title">
74+
</div>
75+
<div>
76+
<textarea rows="10" cols="50" id="description" placeholder="description"></textarea>
77+
</div>
78+
</div>
79+
<button type="submit" class="modal__form__btn btn" id="modal-btn">Add card</button>
80+
</form>
81+
</div>
82+
</div>
83+
84+
<!-- Alert modal -->
85+
86+
<div class="alert-content">
87+
<div class="alert">
88+
<p class="alert__p">
89+
Lorem ipsum dolor sit amet consectetur adipisicing elit.
90+
Itaque iusto alias delectus facere repellat.
91+
Maiores, voluptates sequi molestias repellendus optio nihil
92+
aspernatur ab maxime praesentium similique sunt iusto at reprehenderit.
93+
</p>
94+
<div class="alert__btns">
95+
<button class="alert__btn__cancel btn">Cancel</button>
96+
<button class="alert__btn__remove btn">Remove</button>
97+
</div>
98+
</div>
99+
</div>
100+
101+
</section>
102+
103+
</body>
104+
</html>

‎TodoList/script.js‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
const add = document.getElementById("add");
2+
const hideModal = document.querySelector(".bi-x");
3+
const modalContainer = document.getElementById("modal-container");
4+
const modalBtn = document.getElementById("modal-btn");
5+
6+
function showAddModal(){
7+
modalContainer.classList.remove("hide");
8+
modalContainer.classList.add('show-modal');
9+
}
10+
11+
function hideAddModal(){
12+
modalContainer.classList.remove('show-modal');
13+
modalContainer.classList.add('hide')
14+
}
15+
16+
add.addEventListener('click', showAddModal);
17+
hideModal.addEventListener('click', hideAddModal);
18+
19+
// modal verification
20+
21+
function errorMessage(text){
22+
const errors = document.querySelector('.errors');
23+
if(errors.classList.contains('error')){
24+
errors.textContent = text;
25+
26+
setTimeout(()=>{
27+
errors.style.display = 'none';
28+
}, 5000)
29+
}
30+
}
31+
32+
function formValid(img, title, description){
33+
if(!img || !title || !description){
34+
errorMessage("Veiller remplir tous les champs.");
35+
return false;
36+
}
37+
return true;
38+
}
39+
40+
function loadFile(event){
41+
const file = event.target.files[0];
42+
43+
if(file && file.type.startsWith('image/')){
44+
const reader = new FileReader();
45+
reader.onload = function(e){
46+
document.getElementById("image-preview").src = e.target.result;
47+
}
48+
reader.readAsDataURL(file);
49+
}
50+
else{
51+
console.log("erreur de chargement")
52+
}
53+
}
54+
55+
document.getElementById("imageInput").addEventListener('change', loadFile);
56+
57+
modalBtn.addEventListener('click', (e)=>{
58+
e.preventDefault();
59+
60+
const imgInput = document.getElementById('imageInput');
61+
const imgFile = imgInput.files[0];
62+
console.log(imgFile)
63+
const title = document.getElementById("title").value.split();
64+
const description = document.getElementById("description").value.trim();
65+
66+
if(formValid(imgFile, title, description)){
67+
68+
}
69+
})

0 commit comments

Comments
 (0)