wamster/JS
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

TP01, TP02 & TP03EX01

Browse Source
This commit is contained in:
Alexis WAMSTER
2024-02-26 19:17:32 +01:00
commit 2cfb5211c3
28 changed files with 1147 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
TP03/EX02/css/style.css Normal file
View File

@@ -0,0 +1,11 @@
img{
cursor:pointer;
}
#gagne,#perdu,.hidden{
display : none;
}
.progress::-webkit-progress-value {
transition: width 0.5s ease;
}

BIN
TP03/EX02/images/off.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.1 KiB

BIN
TP03/EX02/images/on.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.5 KiB

1
TP03/EX02/js/memory.js Normal file
View File

@@ -0,0 +1 @@
// TODO

64
TP03/EX02/memory.html Normal file
View File

@@ -0,0 +1,64 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="initial-scale=1,witdh=device-width">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
<link rel="stylesheet" href="./css/style.css">
<script src="./js/memory.js"></script>
<title>Memory</title>
</head>
<body class="m-4">
<main class="container">
<h1 class="title is-1 has-text-primary">Memory</h1>
<div class="columns">
<div class="column is-6">
<div class="columns">
<div class="column">
<img src="./images/off.png" alt="" />
<img src="./images/off.png" alt="" />
<img src="./images/off.png" alt="" />
</div>
<div class="column">
<img src="./images/off.png" alt="" />
<img src="./images/off.png" alt="" />
<img src="./images/off.png" alt="" />
</div>
<div class="column">
<img src="./images/off.png" alt="" />
<img src="./images/off.png" alt="" />
<img src="./images/off.png" alt="" />
</div>
</div>
</div>
<div class="column is-6">
<h3 class="title is-3 has-text-primary">Règles</h3>
<p class="block is-size-4">
Pendant une seconde, vous verrez l'état de l'ensemble
des ampoules, puis elles seront éteintes. Vous devrez
alors cliquer sur celles qui étaient allumées.
</p>
<button class="block button is-info">COMMENCER</button>
<progress id="temps" class="progress is-primary" value="100" max="100"></progress>
<!--div id="temps">10</div-->
<div class="notification is-danger is-size-4 p-4" id="perdu">
<p>Perdu ! </p>
</div>
<div class="notification is-success is-size-4 p-4" id="gagne">
<p>Gagné ! </p>
</div>
</div>
</div>
</main>
</body>
</html>