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

138
TP3.html
View File

@ -1,67 +1,79 @@
<!doctype html> <!doctype html>
<head> <html lang="fr">
<meta name="Acceuil" /> <head>
<meta charset="UTF-8" /> <title>TP3</title>
<link rel="stylesheet" href="static/style.css" /> <meta charset="UTF-8" />
<script src="static/js/utils.js" defer></script> <link rel="stylesheet" href="static/style.css" />
</head> <script src="static/js/utils.js" defer></script>
<body> <script src="static/js/TP3.js" defer></script>
<header> </head>
<div class="links"> <body>
<a href="/" class="header_button">Home Page</a> <header>
<a href="projects.html" class="header_button">Projets</a> <div class="links">
<a href="about.html" class="header_button">A propos de moi</a> <a href="/" class="header_button">Home Page</a>
<a href="surprise.html" class="header_button">Surprise :)</a> <a href="projects.html" class="header_button">Projets</a>
<a href="https://djalim.fr" class="header_button">Blog Perso</a> <a href="about.html" class="header_button">A propos de moi</a>
</div> <a href="surprise.html" class="header_button">Surprise :)</a>
<button id="display_header_links" onclick="toggle_all_header_links()"> <a href="https://djalim.fr" class="header_button">Blog Perso</a>
▼ </div>
</button> <button
</header> id="display_header_links"
onclick="toggle_all_header_links()"
>
▼
</button>
</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 id="game_one" class="hidden">
<h3>Which number am i thinking about ? :)</h3>
<p id="message1"></p>
<form action="javascript:;" onsubmit="process_guess()">
<input
type="text"
id="player_input"
placeholder="type here"
/>
<button type="submit">Try guess</button>
</form>
<button type="button" onclick="setup_game_one()">
Retry game
</button>
<button type="button" onclick="back()">
Back to game selection
</button>
</div>
<div id="game_two" class="hidden">
<h3>Which number are you thinking about ? :)</h3>
<p id="message2"></p>
<button type="button" onclick="lower()"><u>L</u>ower</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="setup_game_two()">
<u>R</u>etry game
</button>
<button type="button" onclick="back()">
Back to game selection
</button>
</div>
</div> </div>
<div id="game_one" class="hidden">
<h3>Which number am i thinking about ? :)</h3>
<p id="message1"></p>
<form action="javascript:;" onsubmit="process_guess()">
<input type="text" id="player_input" placeholder="type here" />
<button type="submit">Try guess</button>
</form>
<button type="button" onclick="setup_game_one()">Retry game</button>
<button type="button" onclick="back()">
Back to game selection
</button>
</div>
<div id="game_two" class="hidden">
<h3>Which number are you thinking about ? :)</h3>
<p id="message2"></p>
<button type="button" onclick="lower()"><u>L</u>ower</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="setup_game_two()">
<u>R</u>etry game
</button>
<button type="button" onclick="back()">
Back to game selection
</button>
</div>
</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
JavaScript ♥️ JavaScript ♥️
</p> </p>
<p>©2025</p> <p>©2025</p>
</footer> </footer>
</body> </body>
</html>
<script src="static/js/TP3.js" defer></script>

81
TP4.html
View File

@ -1,41 +1,46 @@
<!doctype html> <!doctype html>
<head> <html lang="fr">
<meta name="Acceuil" /> <head>
<meta charset="UTF-8" /> <title>TP4</title>
<link rel="stylesheet" href="static/style.css" /> <meta charset="UTF-8" />
<script src="static/js/utils.js" defer></script> <link rel="stylesheet" href="static/style.css" />
</head> <script src="static/js/utils.js" defer></script>
<body> <script src="static/js/TP4.js" defer></script>
<header> </head>
<div class="links"> <body>
<a href="/" class="header_button">Home Page</a> <header>
<a href="projects.html" class="header_button">Projets</a> <div class="links">
<a href="about.html" class="header_button">A propos de moi</a> <a href="/" class="header_button">Home Page</a>
<a href="surprise.html" class="header_button">Surprise :)</a> <a href="projects.html" class="header_button">Projets</a>
<a href="https://djalim.fr" class="header_button">Blog Perso</a> <a href="about.html" class="header_button">A propos de moi</a>
</div> <a href="surprise.html" class="header_button">Surprise :)</a>
<button id="display_header_links" onclick="toggle_all_header_links()"> <a href="https://djalim.fr" class="header_button">Blog Perso</a>
▼ </div>
</button> <button
</header> id="display_header_links"
onclick="toggle_all_header_links()"
<div id="main"> >
<div id="pokemon_team"> ▼
<img id="pokemon_frame" src="" alt="" />
<p id="pokemon_name"></p>
<p id="pokemon_desc"></p>
<button type="button" onclick="chose_random_pokemon()">
Check out a random pokemon
</button> </button>
</div> </header>
</div>
<footer> <div id="main">
<p> <div id="pokemon_team">
Fait par Djalim Simaila et sa haine de l'HTML, CSS, mais pas du <img id="pokemon_frame" alt="" />
JavaScript ♥️ <p id="pokemon_name"></p>
</p> <p id="pokemon_desc"></p>
<p>©2025</p> <button type="button" onclick="chose_random_pokemon()">
</footer> Check out a random pokemon
<script src="static/js/TP4.js" defer></script> </button>
</body> </div>
</div>
<footer>
<p>
Fait par Djalim Simaila et sa haine de l'HTML, CSS, mais pas du
JavaScript ♥️
</p>
<p>©2025</p>
</footer>
</body>
</html>

121
TP5.html
View File

@ -1,62 +1,67 @@
<!doctype html> <!doctype html>
<head> <html lang="fr">
<meta name="Acceuil" /> <head>
<meta charset="UTF-8" /> <title>TP5</title>
<link rel="stylesheet" href="static/style.css" /> <meta charset="UTF-8" />
<script src="static/js/utils.js" defer></script> <link rel="stylesheet" href="static/style.css" />
<link <script src="static/js/utils.js" defer></script>
rel="stylesheet" <script src="static/js/TP5.js" defer></script>
href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" <link
/> rel="stylesheet"
</head> href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"
<body onload="restoreList()">
<header>
<div class="links">
<a href="/" class="header_button">Home Page</a>
<a href="projects.html" class="header_button">Projets</a>
<a href="about.html" class="header_button">A propos de moi</a>
<a href="surprise.html" class="header_button">Surprise :)</a>
<a href="https://djalim.fr" class="header_button">Blog Perso</a>
</div>
<button id="display_header_links" onclick="toggle_all_header_links()">
▼
</button>
</header>
<h1>Grocery list</h1>
<form
action="javascript:;"
onsubmit="addNewItemToList()"
onreset="clear_input()"
>
<button id="clear_button" type="reset">
<i class="bi bi-eraser"></i>
</button>
<input
type="text"
id="new_item_input"
placeholder="A new pair of Jordans"
/> />
<input type="number" id="new_item_quantity" value="1" min="0" /> </head>
<select id="new_item_unit"> <body onload="restoreList()">
<option value="unit">unit</option> <header>
<option value="L">L</option> <div class="links">
<option value="KG">KG</option> <a href="/" class="header_button">Home Page</a>
</select> <a href="projects.html" class="header_button">Projets</a>
<button type="submit"> <a href="about.html" class="header_button">A propos de moi</a>
<i class="bi bi-plus"></i> <a href="surprise.html" class="header_button">Surprise :)</a>
</button> <a href="https://djalim.fr" class="header_button">Blog Perso</a>
</form> </div>
<button
id="display_header_links"
onclick="toggle_all_header_links()"
>
▼
</button>
</header>
<div id="grocery_list"></div> <h1>Grocery list</h1>
<footer> <form
<p> action="javascript:;"
Fait par Djalim Simaila et sa haine de l'HTML, CSS, mais pas du onsubmit="addNewItemToList()"
JavaScript ♥️ onreset="clear_input()"
</p> >
<p>©2025</p> <button id="clear_button" type="reset">
</footer> <i class="bi bi-eraser"></i>
</body> </button>
<script src="static/js/TP5.js" defer></script> <input
type="text"
id="new_item_input"
placeholder="A new pair of Jordans"
/>
<input type="number" id="new_item_quantity" value="1" min="0" />
<select id="new_item_unit">
<option value="unit">unit</option>
<option value="L">L</option>
<option value="KG">KG</option>
</select>
<button type="submit">
<i class="bi bi-plus"></i>
</button>
</form>
<div id="grocery_list"></div>
<footer>
<p>
Fait par Djalim Simaila et sa haine de l'HTML, CSS, mais pas du
JavaScript ♥️
</p>
<p>©2025</p>
</footer>
</body>
</html>

102
TP6.html
View File

@ -1,49 +1,57 @@
<!doctype html> <!doctype html>
<head> <html lang="fr">
<meta name="Acceuil" /> <head>
<meta charset="UTF-8" /> <title>TP6</title>
<link rel="stylesheet" href="static/style.css" /> <meta charset="UTF-8" />
<script src="static/js/utils.js" defer></script> <link rel="stylesheet" href="static/style.css" />
<link <script src="static/js/utils.js" defer></script>
rel="stylesheet" <link
href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" rel="stylesheet"
/> href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"
</head>
<body>
<header>
<div class="links">
<a href="/" class="header_button">Home Page</a>
<a href="projects.html" class="header_button">Projets</a>
<a href="about.html" class="header_button">A propos de moi</a>
<a href="surprise.html" class="header_button">Surprise :)</a>
<a href="https://djalim.fr" class="header_button">Blog Perso</a>
</div>
<button id="display_header_links" onclick="toggle_all_header_links()">
▼
</button>
</header>
<div id="setupGame">
<p>how many spins do you want to simulate</p>
<input
id="maxSpinInput"
type="number"
max="1000000"
min="1"
value="10000"
/> />
<button type="" onclick="setupGame()">Start Spins</button> </head>
</div> <body>
<div id="currentSpin"> <header>
<h3>Current Spin</h3> <div class="links">
<p></p> <a href="/" class="header_button">Home Page</a>
</div> <a href="projects.html" class="header_button">Projets</a>
<div id="lastSpins"></div> <a href="about.html" class="header_button">A propos de moi</a>
<footer> <a href="surprise.html" class="header_button">Surprise :)</a>
<p> <a href="https://djalim.fr" class="header_button">Blog Perso</a>
Fait par Djalim Simaila et sa haine de l'HTML, CSS, mais pas du </div>
JavaScript ♥️ <button
</p> id="display_header_links"
<p>©2025</p> onclick="toggle_all_header_links()"
</footer> >
</body> ▼
<script src="static/js/TP6.js" defer></script> </button>
</header>
<div id="main">
<div id="setupGame">
<p>how many spins do you want to simulate</p>
<input
id="maxSpinInput"
type="number"
max="1000000"
min="1"
value="10000"
/>
<button type="" onclick="setupGame()">Start Spins</button>
</div>
<div>
<h2>Current Spin</h2>
<h3 id="currentSpin"></h3>
</div>
<div id="lastSpins"></div>
<p id="spinCounter"></p>
</div>
<footer>
<p>
Fait par Djalim Simaila et sa haine de l'HTML, CSS, mais pas du
JavaScript ♥️
</p>
<p>©2025</p>
</footer>
</body>
<script src="static/js/TP6.js" defer></script>
</html>

149
index.html
View File

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

108
projects.html
View File

@ -1,56 +1,62 @@
<!doctype html> <!doctype html>
<head> <html lang="fr">
<meta name="Acceuil" /> <head>
<meta charset="UTF-8" /> <title>Projects</title>
<link rel="stylesheet" href="static/style.css" /> <meta charset="UTF-8" />
<script src="static/js/utils.js" defer></script> <link rel="stylesheet" href="static/style.css" />
</head> <script src="static/js/utils.js" defer></script>
<body> </head>
<header> <body>
<div class="links"> <header>
<a href="/" class="header_button">Home Page</a> <div class="links">
<a href="projects.html" class="header_button">Projets</a> <a href="/" class="header_button">Home Page</a>
<a href="about.html" class="header_button">A propos de moi</a> <a href="projects.html" class="header_button">Projets</a>
<a href="surprise.html" class="header_button">Surprise :)</a> <a href="about.html" class="header_button">A propos de moi</a>
<a href="https://djalim.fr" class="header_button">Blog Perso</a> <a href="surprise.html" class="header_button">Surprise :)</a>
<a href="https://djalim.fr" class="header_button">Blog Perso</a>
</div>
<button
id="display_header_links"
onclick="toggle_all_header_links()"
>
▼
</button>
</header>
<div id="title">
<h1>Mes projets</h1>
</div> </div>
<button id="display_header_links" onclick="toggle_all_header_links()">
▼
</button>
</header>
<div id="title"> <div id="content">
<h1>Mes projets</h1> <div class="project_box">
</div> <img
class="project_box_thumbnail"
src="static/assets/images/Da_fookin_owl-1.png"
alt="placeholder"
/>
<p class="project_box_summary">
Le Lorem Ipsum est simplement du faux texte employé dans la
composition et la mise en page avant impression. Le Lorem
Ipsum est le faux texte standard de l'imprimerie depuis les
années 1500, quand un imprimeur anonyme 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 siècles,
mais s'est aussi adapté à la bureautique informatique, sans
que son contenu n'en soit modifié. Il a été popularisé dans
les années 1960 grâce à la vente de feuilles Letraset
contenant des passages du Lorem Ipsum, et, plus récemment,
par son inclusion dans des applications de mise en page de
texte, comme Aldus PageMaker
</p>
</div>
</div>
<div id="content"> <footer>
<div class="project_box"> <p>
<img Fait par Djalim Simaila et sa haine de l'HTML, CSS, mais pas du
class="project_box_thumbnail" JavaScript ♥️
src="static/assets/images/Da_fookin_owl-1.png"
alt="placeholder"
/>
<p class="project_box_summary">
Le Lorem Ipsum est simplement du faux texte employé dans la
composition et la mise en page avant impression. Le Lorem Ipsum
est le faux texte standard de l'imprimerie depuis les années
1500, quand un imprimeur anonyme 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 siècles, mais s'est aussi adapté
à la bureautique informatique, sans que son contenu n'en soit
modifié. Il a été popularisé dans les années 1960 grâce à la
vente de feuilles Letraset contenant des passages du Lorem
Ipsum, et, plus récemment, par son inclusion dans des
applications de mise en page de texte, comme Aldus PageMaker
</p> </p>
</div> <p>©2025</p>
</div> </footer>
</body>
<footer> </html>
<p>
Fait par Djalim Simaila et sa haine de l'HTML, CSS, mais pas du
JavaScript ♥️
</p>
<p>©2025</p>
</footer>
</body>

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;
}