DjalimSimaila/site-perso-poly
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(html): update HTML files to include lang attribute and improve structure for better accessibility and SEO
All checks were successful
DEPLOY / deploy (push) Successful in 7s
Details

Browse Source 
feat(js): modify spin interval duration in TP6.js for smoother simulation and enhance user experience
fix(js): rename showLastSpins function to showCurrentSpin for clarity and update its functionality to display current spin count
style(css): add styles for spin numbers and last spins display to improve visual presentation and user interface
This commit is contained in:
Djalim Simaila 2025-02-22 19:19:44 +01:00
parent e159cecd2f
commit 719d3fd94d
8 changed files with 393 additions and 331 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
TP3.html
View File

@ -1,9 +1,11 @@
<!doctype html> <!doctype html>
<html lang="fr">
<head> <head>
<meta name="Acceuil" /> <title>TP3</title>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="stylesheet" href="static/style.css" /> <link rel="stylesheet" href="static/style.css" />
<script src="static/js/utils.js" defer></script> <script src="static/js/utils.js" defer></script>
<script src="static/js/TP3.js" defer></script>
</head> </head>
<body> <body>
<header> <header>
@ -14,17 +16,20 @@
<a href="surprise.html" class="header_button">Surprise :)</a> <a href="surprise.html" class="header_button">Surprise :)</a>
<a href="https://djalim.fr" class="header_button">Blog Perso</a> <a href="https://djalim.fr" class="header_button">Blog Perso</a>
</div> </div>
<button id="display_header_links" onclick="toggle_all_header_links()"> <button
id="display_header_links"
onclick="toggle_all_header_links()"
>
▼ ▼
</button> </button>
</header> </header>
<div id="main"> <div id="main">
<div id="game_selection"> <div id="game_selection">
<button type="" onclick="setup_game_one()"> <button type="button" onclick="setup_game_one()">
Game 1 : You guess Game 1 : You guess
</button> </button>
<button type="" onclick="setup_game_two()"> <button type="button" onclick="setup_game_two()">
Game 2 : The computer guesses Game 2 : The computer guesses
</button> </button>
</div> </div>
@ -32,10 +37,16 @@
<h3>Which number am i thinking about ? :)</h3> <h3>Which number am i thinking about ? :)</h3>
<p id="message1"></p> <p id="message1"></p>
<form action="javascript:;" onsubmit="process_guess()"> <form action="javascript:;" onsubmit="process_guess()">
<input type="text" id="player_input" placeholder="type here" /> <input
type="text"
id="player_input"
placeholder="type here"
/>
<button type="submit">Try guess</button> <button type="submit">Try guess</button>
</form> </form>
<button type="button" onclick="setup_game_one()">Retry game</button> <button type="button" onclick="setup_game_one()">
Retry game
</button>
<button type="button" onclick="back()"> <button type="button" onclick="back()">
Back to game selection Back to game selection
</button> </button>
@ -44,7 +55,9 @@
<h3>Which number are you thinking about ? :)</h3> <h3>Which number are you thinking about ? :)</h3>
<p id="message2"></p> <p id="message2"></p>
<button type="button" onclick="lower()"><u>L</u>ower</button> <button type="button" onclick="lower()"><u>L</u>ower</button>
<button type="button" onclick="greater()"><u>G</u>reater</button> <button type="button" onclick="greater()">
<u>G</u>reater
</button>
<button type="button" onclick="found()"><u>F</u>ound</button> <button type="button" onclick="found()"><u>F</u>ound</button>
<button type="button" onclick="setup_game_two()"> <button type="button" onclick="setup_game_two()">
<u>R</u>etry game <u>R</u>etry game
@ -63,5 +76,4 @@
<p>©2025</p> <p>©2025</p>
</footer> </footer>
</body> </body>
</html>
<script src="static/js/TP3.js" defer></script>

13
TP4.html
View File

@ -1,9 +1,11 @@
<!doctype html> <!doctype html>
<html lang="fr">
<head> <head>
<meta name="Acceuil" /> <title>TP4</title>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="stylesheet" href="static/style.css" /> <link rel="stylesheet" href="static/style.css" />
<script src="static/js/utils.js" defer></script> <script src="static/js/utils.js" defer></script>
<script src="static/js/TP4.js" defer></script>
</head> </head>
<body> <body>
<header> <header>
@ -14,14 +16,17 @@
<a href="surprise.html" class="header_button">Surprise :)</a> <a href="surprise.html" class="header_button">Surprise :)</a>
<a href="https://djalim.fr" class="header_button">Blog Perso</a> <a href="https://djalim.fr" class="header_button">Blog Perso</a>
</div> </div>
<button id="display_header_links" onclick="toggle_all_header_links()"> <button
id="display_header_links"
onclick="toggle_all_header_links()"
>
▼ ▼
</button> </button>
</header> </header>
<div id="main"> <div id="main">
<div id="pokemon_team"> <div id="pokemon_team">
<img id="pokemon_frame" src="" alt="" /> <img id="pokemon_frame" alt="" />
<p id="pokemon_name"></p> <p id="pokemon_name"></p>
<p id="pokemon_desc"></p> <p id="pokemon_desc"></p>
<button type="button" onclick="chose_random_pokemon()"> <button type="button" onclick="chose_random_pokemon()">
@ -37,5 +42,5 @@
</p> </p>
<p>©2025</p> <p>©2025</p>
</footer> </footer>
<script src="static/js/TP4.js" defer></script>
</body> </body>
</html>

11
TP5.html
View File

@ -1,9 +1,11 @@
<!doctype html> <!doctype html>
<html lang="fr">
<head> <head>
<meta name="Acceuil" /> <title>TP5</title>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="stylesheet" href="static/style.css" /> <link rel="stylesheet" href="static/style.css" />
<script src="static/js/utils.js" defer></script> <script src="static/js/utils.js" defer></script>
<script src="static/js/TP5.js" defer></script>
<link <link
rel="stylesheet" rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"
@ -18,7 +20,10 @@
<a href="surprise.html" class="header_button">Surprise :)</a> <a href="surprise.html" class="header_button">Surprise :)</a>
<a href="https://djalim.fr" class="header_button">Blog Perso</a> <a href="https://djalim.fr" class="header_button">Blog Perso</a>
</div> </div>
<button id="display_header_links" onclick="toggle_all_header_links()"> <button
id="display_header_links"
onclick="toggle_all_header_links()"
>
▼ ▼
</button> </button>
</header> </header>
@ -59,4 +64,4 @@
<p>©2025</p> <p>©2025</p>
</footer> </footer>
</body> </body>
<script src="static/js/TP5.js" defer></script> </html>

18
TP6.html
View File

@ -1,6 +1,7 @@
<!doctype html> <!doctype html>
<html lang="fr">
<head> <head>
<meta name="Acceuil" /> <title>TP6</title>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="stylesheet" href="static/style.css" /> <link rel="stylesheet" href="static/style.css" />
<script src="static/js/utils.js" defer></script> <script src="static/js/utils.js" defer></script>
@ -18,10 +19,14 @@
<a href="surprise.html" class="header_button">Surprise :)</a> <a href="surprise.html" class="header_button">Surprise :)</a>
<a href="https://djalim.fr" class="header_button">Blog Perso</a> <a href="https://djalim.fr" class="header_button">Blog Perso</a>
</div> </div>
<button id="display_header_links" onclick="toggle_all_header_links()"> <button
id="display_header_links"
onclick="toggle_all_header_links()"
>
▼ ▼
</button> </button>
</header> </header>
<div id="main">
<div id="setupGame"> <div id="setupGame">
<p>how many spins do you want to simulate</p> <p>how many spins do you want to simulate</p>
<input <input
@ -33,11 +38,13 @@
/> />
<button type="" onclick="setupGame()">Start Spins</button> <button type="" onclick="setupGame()">Start Spins</button>
</div> </div>
<div id="currentSpin"> <div>
<h3>Current Spin</h3> <h2>Current Spin</h2>
<p></p> <h3 id="currentSpin"></h3>
</div> </div>
<div id="lastSpins"></div> <div id="lastSpins"></div>
<p id="spinCounter"></p>
</div>
<footer> <footer>
<p> <p>
Fait par Djalim Simaila et sa haine de l'HTML, CSS, mais pas du Fait par Djalim Simaila et sa haine de l'HTML, CSS, mais pas du
@ -47,3 +54,4 @@
</footer> </footer>
</body> </body>
<script src="static/js/TP6.js" defer></script> <script src="static/js/TP6.js" defer></script>
</html>

77
index.html
View File

@ -1,9 +1,10 @@
<!doctype html> <!doctype html>
<html lang="fr">
<head> <head>
<meta name="Acceuil" /> <title>Homepage</title>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="stylesheet" href="static/style.css" /> <link rel="stylesheet" href="static/style.css" />
<script src="static/js/utils.js" defer></script> <script src="static/js/utils.js" defer />
</head> </head>
<body> <body>
<header> <header>
@ -14,7 +15,10 @@
<a href="surprise.html" class="header_button">Surprise :)</a> <a href="surprise.html" class="header_button">Surprise :)</a>
<a href="https://djalim.fr" class="header_button">Blog Perso</a> <a href="https://djalim.fr" class="header_button">Blog Perso</a>
</div> </div>
<button id="display_header_links" onclick="toggle_all_header_links()"> <button
id="display_header_links"
onclick="toggle_all_header_links()"
>
▼ ▼
</button> </button>
</header> </header>
@ -25,42 +29,44 @@
<div id="content"> <div id="content">
<p> <p>
Qu'est-ce que le Lorem Ipsum? Le Lorem Ipsum est simplement du faux Qu'est-ce que le Lorem Ipsum? Le Lorem Ipsum est simplement du
texte employé dans la composition et la mise en page avant faux texte employé dans la composition et la mise en page avant
impression. Le Lorem Ipsum est le faux texte standard de impression. Le Lorem Ipsum est le faux texte standard de
l'imprimerie depuis les années 1500, quand un imprimeur anonyme l'imprimerie depuis les années 1500, quand un imprimeur anonyme
assembla ensemble des morceaux de texte pour réaliser un livre assembla ensemble des morceaux de texte pour réaliser un livre
spécimen de polices de texte. Il n'a pas fait que survivre cinq spécimen de polices de texte. Il n'a pas fait que survivre cinq
siècles, mais s'est aussi adapté à la bureautique informatique, sans siècles, mais s'est aussi adapté à la bureautique informatique,
que son contenu n'en soit modifié. Il a été popularisé dans les sans que son contenu n'en soit modifié. Il a été popularisé dans
années 1960 grâce à la vente de feuilles Letraset contenant des les années 1960 grâce à la vente de feuilles Letraset contenant
passages du Lorem Ipsum, et, plus récemment, par son inclusion dans des passages du Lorem Ipsum, et, plus récemment, par son
des applications de mise en page de texte, comme Aldus PageMaker. inclusion dans des applications de mise en page de texte, comme
Pourquoi l'utiliser? On sait depuis longtemps que travailler avec du Aldus PageMaker. Pourquoi l'utiliser? On sait depuis longtemps
texte lisible et contenant du sens est source de distractions, et que travailler avec du texte lisible et contenant du sens est
empêche de se concentrer sur la mise en page elle-même. L'avantage source de distractions, et empêche de se concentrer sur la mise
du Lorem Ipsum sur un texte générique comme 'Du texte. Du texte. Du en page elle-même. L'avantage du Lorem Ipsum sur un texte
texte.' est qu'il possède une distribution de lettres plus ou moins générique comme 'Du texte. Du texte. Du texte.' est qu'il
normale, et en tout cas comparable avec celle du français standard. possède une distribution de lettres plus ou moins normale, et en
De nombreuses suites logicielles de mise en page ou éditeurs de tout cas comparable avec celle du français standard. De
sites Web ont fait du Lorem Ipsum leur faux texte par défaut, et une nombreuses suites logicielles de mise en page ou éditeurs de
recherche pour 'Lorem Ipsum' vous conduira vers de nombreux sites sites Web ont fait du Lorem Ipsum leur faux texte par défaut, et
qui n'en sont encore qu'à leur phase de construction. Plusieurs une recherche pour 'Lorem Ipsum' vous conduira vers de nombreux
versions sont apparues avec le temps, parfois par accident, souvent sites qui n'en sont encore qu'à leur phase de construction.
intentionnellement (histoire d'y rajouter de petits clins d'oeil, Plusieurs versions sont apparues avec le temps, parfois par
voire des phrases embarassantes). D'où vient-il? Contrairement à une accident, souvent intentionnellement (histoire d'y rajouter de
opinion répandue, le Lorem Ipsum n'est pas simplement du texte petits clins d'oeil, voire des phrases embarassantes). D'où
aléatoire. Il trouve ses racines dans une oeuvre de la littérature vient-il? Contrairement à une opinion répandue, le Lorem Ipsum
latine classique datant de 45 av. J.-C., le rendant vieux de 2000 n'est pas simplement du texte aléatoire. Il trouve ses racines
ans. Un professeur du Hampden-Sydney College, en Virginie, s'est dans une oeuvre de la littérature latine classique datant de 45
intéressé à un des mots latins les plus obscurs, consectetur, av. J.-C., le rendant vieux de 2000 ans. Un professeur du
extrait d'un passage du Lorem Ipsum, et en étudiant tous les usages Hampden-Sydney College, en Virginie, s'est intéressé à un des
de ce mot dans la littérature classique, découvrit la source mots latins les plus obscurs, consectetur, extrait d'un passage
incontestable du Lorem Ipsum. Il provient en fait des sections du Lorem Ipsum, et en étudiant tous les usages de ce mot dans la
1.10.32 et 1.10.33 du "De Finibus Bonorum et Malorum" (Des Suprêmes littérature classique, découvrit la source incontestable du
Biens et des Suprêmes Maux) de Cicéron. Cet ouvrage, très populaire Lorem Ipsum. Il provient en fait des sections 1.10.32 et 1.10.33
pendant la Renaissance, est un traité sur la théorie de l'éthique. du "De Finibus Bonorum et Malorum" (Des Suprêmes Biens et des
Les premières lignes du Lorem Ipsum, "Lorem ipsum dolor sit Suprêmes Maux) de Cicéron. Cet ouvrage, très populaire pendant
la Renaissance, est un traité sur la théorie de l'éthique. Les
premières lignes du Lorem Ipsum, "Lorem ipsum dolor sit
amet...", proviennent de la section amet...", proviennent de la section
</p> </p>
</div> </div>
@ -73,3 +79,4 @@
<p>©2025</p> <p>©2025</p>
</footer> </footer>
</body> </body>
</html>

30
projects.html
View File

@ -1,6 +1,7 @@
<!doctype html> <!doctype html>
<html lang="fr">
<head> <head>
<meta name="Acceuil" /> <title>Projects</title>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="stylesheet" href="static/style.css" /> <link rel="stylesheet" href="static/style.css" />
<script src="static/js/utils.js" defer></script> <script src="static/js/utils.js" defer></script>
@ -14,7 +15,10 @@
<a href="surprise.html" class="header_button">Surprise :)</a> <a href="surprise.html" class="header_button">Surprise :)</a>
<a href="https://djalim.fr" class="header_button">Blog Perso</a> <a href="https://djalim.fr" class="header_button">Blog Perso</a>
</div> </div>
<button id="display_header_links" onclick="toggle_all_header_links()"> <button
id="display_header_links"
onclick="toggle_all_header_links()"
>
▼ ▼
</button> </button>
</header> </header>
@ -32,16 +36,17 @@
/> />
<p class="project_box_summary"> <p class="project_box_summary">
Le Lorem Ipsum est simplement du faux texte employé dans la Le Lorem Ipsum est simplement du faux texte employé dans la
composition et la mise en page avant impression. Le Lorem Ipsum composition et la mise en page avant impression. Le Lorem
est le faux texte standard de l'imprimerie depuis les années Ipsum est le faux texte standard de l'imprimerie depuis les
1500, quand un imprimeur anonyme assembla ensemble des morceaux années 1500, quand un imprimeur anonyme assembla ensemble
de texte pour réaliser un livre spécimen de polices de texte. Il des morceaux de texte pour réaliser un livre spécimen de
n'a pas fait que survivre cinq siècles, mais s'est aussi adapté polices de texte. Il n'a pas fait que survivre cinq siècles,
à la bureautique informatique, sans que son contenu n'en soit mais s'est aussi adapté à la bureautique informatique, sans
modifié. Il a été popularisé dans les années 1960 grâce à la que son contenu n'en soit modifié. Il a été popularisé dans
vente de feuilles Letraset contenant des passages du Lorem les années 1960 grâce à la vente de feuilles Letraset
Ipsum, et, plus récemment, par son inclusion dans des contenant des passages du Lorem Ipsum, et, plus récemment,
applications de mise en page de texte, comme Aldus PageMaker par son inclusion dans des applications de mise en page de
texte, comme Aldus PageMaker
</p> </p>
</div> </div>
</div> </div>
@ -54,3 +59,4 @@
<p>©2025</p> <p>©2025</p>
</footer> </footer>
</body> </body>
</html>

12
static/js/TP6.js
View File

@ -123,10 +123,11 @@ function setupGame() {
document.getElementById("maxSpinInput").value, document.getElementById("maxSpinInput").value,
); );
document.getElementById("setupGame").classList.add("hidden"); document.getElementById("setupGame").classList.add("hidden");
spinInterval = setInterval(() => processSpin(), 100); spinInterval = setInterval(() => processSpin(), 500);
} }
function processSpin() { function processSpin() {
showCurrentSpin();
// Check if the number is qualifying // Check if the number is qualifying
qualifyingPreprocess(); qualifyingPreprocess();
@ -150,10 +151,13 @@ function processSpin() {
console.log(winingNumbers); console.log(winingNumbers);
console.log(losingNumbers); console.log(losingNumbers);
currentSpin += 1; currentSpin += 1;
showLastSpins(); if (currentSpin == spinArray.length) {
clearInterval(spinInterval);
}
} }
function showLastSpins() { function showCurrentSpin() {
document.getElementById("currentSpin").textContent = spinArray[currentSpin];
document.getElementById("lastSpins").replaceChildren(); document.getElementById("lastSpins").replaceChildren();
spinArray.slice(lowerBound(), currentSpin).forEach((number) => { spinArray.slice(lowerBound(), currentSpin).forEach((number) => {
let numberDiv = document.createElement("div"); let numberDiv = document.createElement("div");
@ -161,4 +165,6 @@ function showLastSpins() {
numberDiv.textContent = number; numberDiv.textContent = number;
document.getElementById("lastSpins").appendChild(numberDiv); document.getElementById("lastSpins").appendChild(numberDiv);
}); });
document.getElementById("spinCounter").textContent =
"" + currentSpin + "/" + spinArray.length;
} }

13
static/style.css
View File

@ -180,3 +180,16 @@ select {
border-radius: 10px; border-radius: 10px;
margin: 10px; margin: 10px;
} }
.spinNumber {
margin: 2px;
padding: 2px;
background-color: var(--color-purple);
border-radius: 5px;
}
#lastSpins {
display: flex;
flex-direction: row;
gap: 4px;
}