diff --git a/Groupe1_ProjetWeb_JS.zip.zip b/Groupe1_ProjetWeb_JS.zip.zip
new file mode 100644
index 0000000..1197869
Binary files /dev/null and b/Groupe1_ProjetWeb_JS.zip.zip differ
diff --git a/contacts.html b/contacts.html
index adadf3b..2f1c3f6 100644
--- a/contacts.html
+++ b/contacts.html
@@ -5,6 +5,10 @@
    <title> Contacts </title>
    <link rel="icon" href="/src/img/icon.png" type="image/x-icon">
    <script src="/src/js/navbarAndFooter.js" defer></script>
+   <script src="/src/js/InfosEtContact/contacts/roulette.js" defer></script>
+   <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
+   <script src='https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js'></script>
+   <link rel="stylesheet" href="/src/css/style_roulette.css">
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="src/js/InfosEtContact/contacts/contacts.js" defer></script>
    <script src="https://kit.fontawesome.com/5b8b37978c.js" crossorigin="anonymous"></script>
@@ -45,26 +49,80 @@
    <div id="hour"></div>
  </nav>
  <h1 id = text><strong>Contactez le responsable de l’équipe</strong> <br>(Maher Jridi - maher.jridi@isen-ouest.yncrea.fr)</h1>
-  <form action="contacts.html" method="get" class="formulaire">
-    <a id="usrnError"></a>
+  <form action="contacts.html" method="get" id="formulaire">
+    <div class="center">
+      <a id="usrnError"></a>
+    </div>
     <div class="center">
       <div class="input-container">
         <img class="icon" src="/src/img/svg/user-solid.svg">
         <input class="input-field" type="text" placeholder="Prénom Nom" name="usrnm" id="usrnInp">
       </div>
     </div>
-    <a id="emailError"></a>
+    <div class="center">
+      <a id="emailError"></a>
+    </div>
     <div class="center">
       <div class="input-container">
         <img class="icon" src="/src/img/svg/at-solid.svg">
         <input class="input-field" type="text" placeholder="email@exemple.com" name="email" id="emailInp">
       </div>
     </div>
-    <a id="textarea1Error"></a>
+    <div class="center">
+      <a id="textarea1Error"></a>
+    </div>
     <br>
-    <textarea name="textarea1" placeholder="Votre message (1000 caractères maximum)" rows="5" cols="50" id="textarea1Inp"></textarea><br>
-    <button id="submitBtn" class="btn">Envoyer</button>
+    <div class="center">
+      <textarea name="textarea1" placeholder="Votre message (1000 caractères maximum)" rows="5" cols="50" id="textarea1Inp"></textarea><br>
+    </div>
+    <div class="center">
+      <button id="submitBtn" class="btn">Envoyer</button>
+    </div>
   </form>
+   <h2>Rouge ou vert vous gagnez, noir vous perdez!</h2>
+   <div class="center">
+   <div class="plate" id="plate">
+     <ul class="inner">
+       <li class="number"><label><input type="radio" name="pit" value="32" /><span class="pit">32</span></label></li>
+       <li class="number"><label><input type="radio" name="pit" value="15" /><span class="pit">15</span></label></li>
+       <li class="number"><label><input type="radio" name="pit" value="19" /><span class="pit">19</span></label></li>
+       <li class="number"><label><input type="radio" name="pit" value="4" /><span class="pit">4</span></label></li>
+       <li class="number"><label><input type="radio" name="pit" value="21" /><span class="pit">21</span></label></li>
+       <li class="number"><label><input type="radio" name="pit" value="2" /><span class="pit">2</span></label></li>
+       <li class="number"><label><input type="radio" name="pit" value="25" /><span class="pit">25</span></label></li>
+       <li class="number"><label><input type="radio" name="pit" value="17" /><span class="pit">17</span></label></li>
+       <li class="number"><label><input type="radio" name="pit" value="34" /><span class="pit">34</span></label></li>
+       <li class="number"><label><input type="radio" name="pit" value="6" /><span class="pit">6</span></label></li>
+       <li class="number"><label><input type="radio" name="pit" value="27" /><span class="pit">27</span></label></li>
+       <li class="number"><label><input type="radio" name="pit" value="13" /><span class="pit">13</span></label></li>
+       <li class="number"><label><input type="radio" name="pit" value="36" /><span class="pit">36</span></label></li>
+       <li class="number"><label><input type="radio" name="pit" value="11" /><span class="pit">11</span></label></li>
+       <li class="number"><label><input type="radio" name="pit" value="30" /><span class="pit">30</span></label></li>
+       <li class="number"><label><input type="radio" name="pit" value="8" /><span class="pit">8</span></label></li>
+       <li class="number"><label><input type="radio" name="pit" value="23" /><span class="pit">23</span></label></li>
+       <li class="number"><label><input type="radio" name="pit" value="10" /><span class="pit">10</span></label></li>
+       <li class="number"><label><input type="radio" name="pit" value="5" /><span class="pit">5</span></label></li>
+       <li class="number"><label><input type="radio" name="pit" value="24" /><span class="pit">24</span></label></li>
+       <li class="number"><label><input type="radio" name="pit" value="16" /><span class="pit">16</span></label></li>
+       <li class="number"><label><input type="radio" name="pit" value="33" /><span class="pit">33</span></label></li>
+       <li class="number"><label><input type="radio" name="pit" value="1" /><span class="pit">1</span></label></li>
+       <li class="number"><label><input type="radio" name="pit" value="20" /><span class="pit">20</span></label></li>
+       <li class="number"><label><input type="radio" name="pit" value="14" /><span class="pit">14</span></label></li>
+       <li class="number"><label><input type="radio" name="pit" value="31" /><span class="pit">31</span></label></li>
+       <li class="number"><label><input type="radio" name="pit" value="9" /><span class="pit">9</span></label></li>
+       <li class="number"><label><input type="radio" name="pit" value="22" /><span class="pit">22</span></label></li>
+       <li class="number"><label><input type="radio" name="pit" value="18" /><span class="pit">18</span></label></li>
+       <li class="number"><label><input type="radio" name="pit" value="29" /><span class="pit">29</span></label></li>
+       <li class="number"><label><input type="radio" name="pit" value="7" /><span class="pit">7</span></label></li>
+       <li class="number"><label><input type="radio" name="pit" value="28" /><span class="pit">28</span></label></li>
+       <li class="number"><label><input type="radio" name="pit" value="12" /><span class="pit">12</span></label></li>
+       <li class="number"><label><input type="radio" name="pit" value="35" /><span class="pit">35</span></label></li>
+       <li class="number"><label><input type="radio" name="pit" value="3" /><span class="pit">3</span></label></li>
+       <li class="number"><label><input type="radio" name="pit" value="26" /><span class="pit">26</span></label></li>
+       <li class="number"><label><input type="radio" name="pit" value="0" /><span class="pit">0</span></label></li>
+     </ul>
+   </div>
+   </div>
  <br>
  </div>
     <footer>
diff --git a/src/css/style_contacts.css b/src/css/style_contacts.css
index 7abb27a..52e09e7 100644
--- a/src/css/style_contacts.css
+++ b/src/css/style_contacts.css
@@ -63,12 +63,15 @@ img{
 
 #usrnError{
     color: red;
+    text-align: center;
 }
 
 #emailError{
     color: red;
+    text-align: center;
 }
 
 #textarea1Error{
     color: red;
+    text-align: center;
 }
\ No newline at end of file
diff --git a/src/css/style_roulette.css b/src/css/style_roulette.css
new file mode 100644
index 0000000..2e58bae
--- /dev/null
+++ b/src/css/style_roulette.css
@@ -0,0 +1,583 @@
+.number:nth-child(1) {
+  transform: rotateZ(9.72972973deg);
+}
+.number:nth-child(2) {
+  transform: rotateZ(19.45945946deg);
+}
+.number:nth-child(3) {
+  transform: rotateZ(29.18918919deg);
+}
+.number:nth-child(4) {
+  transform: rotateZ(38.91891892deg);
+}
+.number:nth-child(5) {
+  transform: rotateZ(48.64864865deg);
+}
+.number:nth-child(6) {
+  transform: rotateZ(58.37837838deg);
+}
+.number:nth-child(7) {
+  transform: rotateZ(68.10810811deg);
+}
+.number:nth-child(8) {
+  transform: rotateZ(77.83783784deg);
+}
+.number:nth-child(9) {
+  transform: rotateZ(87.56756757deg);
+}
+.number:nth-child(10) {
+  transform: rotateZ(97.2972973deg);
+}
+.number:nth-child(11) {
+  transform: rotateZ(107.02702703deg);
+}
+.number:nth-child(12) {
+  transform: rotateZ(116.75675676deg);
+}
+.number:nth-child(13) {
+  transform: rotateZ(126.48648649deg);
+}
+.number:nth-child(14) {
+  transform: rotateZ(136.21621622deg);
+}
+.number:nth-child(15) {
+  transform: rotateZ(145.94594595deg);
+}
+.number:nth-child(16) {
+  transform: rotateZ(155.67567568deg);
+}
+.number:nth-child(17) {
+  transform: rotateZ(165.40540541deg);
+}
+.number:nth-child(18) {
+  transform: rotateZ(175.13513514deg);
+}
+.number:nth-child(19) {
+  transform: rotateZ(184.86486486deg);
+}
+.number:nth-child(20) {
+  transform: rotateZ(194.59459459deg);
+}
+.number:nth-child(21) {
+  transform: rotateZ(204.32432432deg);
+}
+.number:nth-child(22) {
+  transform: rotateZ(214.05405405deg);
+}
+.number:nth-child(23) {
+  transform: rotateZ(223.78378378deg);
+}
+.number:nth-child(24) {
+  transform: rotateZ(233.51351351deg);
+}
+.number:nth-child(25) {
+  transform: rotateZ(243.24324324deg);
+}
+.number:nth-child(26) {
+  transform: rotateZ(252.97297297deg);
+}
+.number:nth-child(27) {
+  transform: rotateZ(262.7027027deg);
+}
+.number:nth-child(28) {
+  transform: rotateZ(272.43243243deg);
+}
+.number:nth-child(29) {
+  transform: rotateZ(282.16216216deg);
+}
+.number:nth-child(30) {
+  transform: rotateZ(291.89189189deg);
+}
+.number:nth-child(31) {
+  transform: rotateZ(301.62162162deg);
+}
+.number:nth-child(32) {
+  transform: rotateZ(311.35135135deg);
+}
+.number:nth-child(33) {
+  transform: rotateZ(321.08108108deg);
+}
+.number:nth-child(34) {
+  transform: rotateZ(330.81081081deg);
+}
+.number:nth-child(35) {
+  transform: rotateZ(340.54054054deg);
+}
+.number:nth-child(36) {
+  transform: rotateZ(350.27027027deg);
+}
+.main_roulette {
+  width: 374px;
+  margin: 0 auto;
+}
+.plate {
+  background-color: gray;
+  width: 350px;
+  height: 350px;
+  margin: 12px;
+  margin-top: 120px;
+  border-radius: 50%;
+  position: relative;
+  -webkit-animation: rotate 24s infinite linear;
+          animation: rotate 24s infinite linear;
+}
+.plate:after,
+.plate:before {
+  content: '';
+  display: block;
+  position: absolute;
+  border-radius: 50%;
+}
+.plate:after {
+  top: -6px;
+  right: -6px;
+  bottom: -6px;
+  left: -6px;
+  border: 6px solid gold;
+  box-shadow: inset 0px 0px 0px 2px #b39700, 0px 0px 0px 2px #ffeb80;
+}
+.plate:before {
+  background: rgba(0, 0, 0, 0.65);
+  border: 1px solid silver;
+  box-shadow: inset 0px 0px 0px 2px #808080;
+  top: 12%;
+  left: 12%;
+  right: 12%;
+  bottom: 12%;
+  z-index: 1;
+}
+.number {
+  width: 32px;
+  height: 175px;
+  display: inline-block;
+  text-align: center;
+  position: absolute;
+  top: 0;
+  left: calc(50% - (32px/2));
+  transform-origin: 50% 100%;
+  background-color: transparent;
+  border-left: 16px solid transparent;
+  border-right: 16px solid transparent;
+  border-top: 175px solid black;
+  box-sizing: border-box;
+}
+.number:nth-child(odd) {
+  border-top-color: red;
+}
+.number:nth-child(37) {
+  border-top-color: green;
+}
+.pit {
+  color: #fff;
+  padding-top: 12px;
+  width: 32px;
+  display: inline-block;
+  font-size: 12px;
+  transform: scale(1, 1.8);
+  position: absolute;
+  top: -175px;
+  left: -16px;
+}
+.inner {
+  display: block;
+  height: 350px;
+  width: 350px;
+}
+.inner:after,
+.inner:before {
+  content: '';
+  display: block;
+  position: absolute;
+  border-radius: 50%;
+}
+.inner:after {
+  z-index: 3;
+  top: 24%;
+  right: 24%;
+  bottom: 24%;
+  left: 24%;
+  background-color: #4d4d4d;
+  border: 3px solid #808080;
+}
+.inner:before {
+  top: 24%;
+  bottom: 21%;
+  left: 24%;
+  right: 22%;
+  content: '';
+  color: #fff;
+  font-size: 60px;
+  z-index: 5;
+  border-radius: 0;
+}
+.inner[data-spinto='1']:before {
+  transform: rotateZ(-2602deg);
+  transition: transform 9s ease-out;
+  content: '\2022';
+}
+.inner[data-spinto='2']:before {
+  transform: rotateZ(-2774deg);
+  transition: transform 9s ease-out;
+  content: '\2022';
+}
+.inner[data-spinto='3']:before {
+  transform: rotateZ(-2850deg);
+  transition: transform 9s ease-out;
+  content: '\2022';
+}
+.inner[data-spinto='4']:before {
+  transform: rotateZ(-2793deg);
+  transition: transform 9s ease-out;
+  content: '\2022';
+}
+.inner[data-spinto='5']:before {
+  transform: rotateZ(-2642deg);
+  transition: transform 9s ease-out;
+  content: '\2022';
+}
+.inner[data-spinto='6']:before {
+  transform: rotateZ(-2734deg);
+  transition: transform 9s ease-out;
+  content: '\2022';
+}
+.inner[data-spinto='7']:before {
+  transform: rotateZ(-2526deg);
+  transition: transform 9s ease-out;
+  content: '\2022';
+}
+.inner[data-spinto='8']:before {
+  transform: rotateZ(-2673deg);
+  transition: transform 9s ease-out;
+  content: '\2022';
+}
+.inner[data-spinto='9']:before {
+  transform: rotateZ(-2564deg);
+  transition: transform 9s ease-out;
+  content: '\2022';
+}
+.inner[data-spinto='10']:before {
+  transform: rotateZ(-2652deg);
+  transition: transform 9s ease-out;
+  content: '\2022';
+}
+.inner[data-spinto='11']:before {
+  transform: rotateZ(-2693deg);
+  transition: transform 9s ease-out;
+  content: '\2022';
+}
+.inner[data-spinto='12']:before {
+  transform: rotateZ(-2868deg);
+  transition: transform 9s ease-out;
+  content: '\2022';
+}
+.inner[data-spinto='13']:before {
+  transform: rotateZ(-2714deg);
+  transition: transform 9s ease-out;
+  content: '\2022';
+}
+.inner[data-spinto='14']:before {
+  transform: rotateZ(-2582deg);
+  transition: transform 9s ease-out;
+  content: '\2022';
+}
+.inner[data-spinto='15']:before {
+  transform: rotateZ(-2813deg);
+  transition: transform 9s ease-out;
+  content: '\2022';
+}
+.inner[data-spinto='16']:before {
+  transform: rotateZ(-2622deg);
+  transition: transform 9s ease-out;
+  content: '\2022';
+}
+.inner[data-spinto='17']:before {
+  transform: rotateZ(-2755deg);
+  transition: transform 9s ease-out;
+  content: '\2022';
+}
+.inner[data-spinto='18']:before {
+  transform: rotateZ(-2545deg);
+  transition: transform 9s ease-out;
+  content: '\2022';
+}
+.inner[data-spinto='19']:before {
+  transform: rotateZ(-2803deg);
+  transition: transform 9s ease-out;
+  content: '\2022';
+}
+.inner[data-spinto='20']:before {
+  transform: rotateZ(-2592deg);
+  transition: transform 9s ease-out;
+  content: '\2022';
+}
+.inner[data-spinto='21']:before {
+  transform: rotateZ(-2784deg);
+  transition: transform 9s ease-out;
+  content: '\2022';
+}
+.inner[data-spinto='22']:before {
+  transform: rotateZ(-2554deg);
+  transition: transform 9s ease-out;
+  content: '\2022';
+}
+.inner[data-spinto='23']:before {
+  transform: rotateZ(-2662deg);
+  transition: transform 9s ease-out;
+  content: '\2022';
+}
+.inner[data-spinto='24']:before {
+  transform: rotateZ(-2632deg);
+  transition: transform 9s ease-out;
+  content: '\2022';
+}
+.inner[data-spinto='25']:before {
+  transform: rotateZ(-2764deg);
+  transition: transform 9s ease-out;
+  content: '\2022';
+}
+.inner[data-spinto='26']:before {
+  transform: rotateZ(-2840deg);
+  transition: transform 9s ease-out;
+  content: '\2022';
+}
+.inner[data-spinto='27']:before {
+  transform: rotateZ(-2724deg);
+  transition: transform 9s ease-out;
+  content: '\2022';
+}
+.inner[data-spinto='28']:before {
+  transform: rotateZ(-2877deg);
+  transition: transform 9s ease-out;
+  content: '\2022';
+}
+.inner[data-spinto='29']:before {
+  transform: rotateZ(-2535deg);
+  transition: transform 9s ease-out;
+  content: '\2022';
+}
+.inner[data-spinto='30']:before {
+  transform: rotateZ(-2684deg);
+  transition: transform 9s ease-out;
+  content: '\2022';
+}
+.inner[data-spinto='31']:before {
+  transform: rotateZ(-2573deg);
+  transition: transform 9s ease-out;
+  content: '\2022';
+}
+.inner[data-spinto='32']:before {
+  transform: rotateZ(-2822deg);
+  transition: transform 9s ease-out;
+  content: '\2022';
+}
+.inner[data-spinto='33']:before {
+  transform: rotateZ(-2612deg);
+  transition: transform 9s ease-out;
+  content: '\2022';
+}
+.inner[data-spinto='34']:before {
+  transform: rotateZ(-2745deg);
+  transition: transform 9s ease-out;
+  content: '\2022';
+}
+.inner[data-spinto='35']:before {
+  transform: rotateZ(-2499deg);
+  transition: transform 9s ease-out;
+  content: '\2022';
+}
+.inner[data-spinto='36']:before {
+  transform: rotateZ(-2703deg);
+  transition: transform 9s ease-out;
+  content: '\2022';
+}
+.inner[data-spinto='0']:before {
+  transform: rotateZ(-2831deg);
+  transition: transform 9s ease-out;
+  content: '\2022';
+}
+.inner.rest:before {
+  transition: top 0.5s ease-in, right 0.5s ease-in, bottom 0.5s ease-in, left 0.5s ease-in;
+  top: 25%;
+  right: 25%;
+  bottom: 24%;
+  left: 25%;
+}
+.btn {
+  background: green;
+  border: 1px solid #000000;
+  border-top-color: #00b300;
+  border-left-color: #00b300;
+  padding: 0;
+  margin: 0;
+  display: inline-block;
+  font-size: 15px;
+  width: 175px;
+  padding: 12px;
+  margin: 12px;
+  cursor: pointer;
+  color: #fff;
+  font-family: 'Roboto', sans-serif;
+  border-radius: 3px;
+}
+.btn .btn-label {
+  padding: 12px;
+  white-space: nowrap;
+}
+.btn.btn-reset {
+  background: darkgreen;
+  border: 1px solid #000000;
+  border-top-color: #009700;
+  border-left-color: #009700;
+}
+.btn.disabled {
+  opacity: 0.2;
+  transition: opacity 0.24s linear;
+  cursor: not-allowed;
+}
+.image{
+  position: relative;
+  right: 50px;
+  bottom: 417px;
+}
+.image img{
+  width: 125%;
+  height: auto;
+}
+@-webkit-keyframes rotate {
+  0% {
+    transform: rotateZ(0deg);
+  }
+  100% {
+    transform: rotateZ(360deg);
+  }
+}
+@keyframes rotate {
+  0% {
+    transform: rotateZ(0deg);
+  }
+  100% {
+    transform: rotateZ(360deg);
+  }
+}
+.data {
+  display: block;
+  position: absolute;
+  top: 30%;
+  right: 30%;
+  bottom: 30%;
+  left: 30%;
+  border-radius: 50%;
+  animation: rotate 24s reverse linear infinite;
+  perspective: 2000px;
+  z-index: 100;
+}
+.data .data-inner {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  transition: transform 0.72s;
+  transform-style: preserve-3d;
+}
+.data.reveal .data-inner {
+  transform: rotateY(180deg);
+}
+.data .mask,
+.data .result {
+  top: 0px;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  position: absolute;
+  -webkit-backface-visibility: hidden;
+          backface-visibility: hidden;
+  border-radius: 50%;
+  overflow: hidden;
+  display: inline-block;
+}
+.data .mask {
+  color: #fff;
+  font-size: 24px;
+  margin: auto;
+  line-height: 1.4;
+  padding-top: 36px;
+}
+.data .result {
+  background-color: green;
+  color: white;
+  transform: rotateY(180deg);
+  align-items: center;
+  color: #fff;
+}
+.data .result-number {
+  font-size: 72px;
+  font-weight: 500;
+  line-height: 1.2;
+  margin-top: 12px;
+}
+.data .result-color {
+  text-transform: uppercase;
+  font-size: 21px;
+  line-height: 1;
+}
+.previous-results {
+  position: relative;
+  max-width: 350px;
+  top: -300px;
+  margin: 24px 12px;
+}
+.previous-list {
+  perspective: 2000;
+}
+.previous-result {
+  display: flex;
+  margin: 1px;
+  padding: 12px;
+  color: #fff;
+}
+.previous-result:first-child {
+  -webkit-animation: flipin 0.48s ease-out;
+          animation: flipin 0.48s ease-out;
+}
+.previous-result .previous-number {
+  flex: 1;
+}
+.color-green {
+  background-color: green;
+}
+.color-black {
+  background-color: black;
+}
+.color-red {
+  background-color: red;
+}
+.visuallyhidden {
+  position: absolute;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  width: 1px;
+  margin: -1px;
+  padding: 0;
+  border: 0;
+}
+@-webkit-keyframes flipin {
+  0% {
+    transform: rotateX(90deg);
+  }
+  100% {
+    transform: rotateX(0deg);
+  }
+}
+@keyframes flipin {
+  0% {
+    transform: rotateX(90deg);
+  }
+  100% {
+    transform: rotateX(0deg);
+  }
+}
+
+h2{
+  text-align: center;
+}
\ No newline at end of file
diff --git a/src/js/InfosEtContact/contacts/contacts.js b/src/js/InfosEtContact/contacts/contacts.js
index 05a7c29..78ef00b 100644
--- a/src/js/InfosEtContact/contacts/contacts.js
+++ b/src/js/InfosEtContact/contacts/contacts.js
@@ -51,7 +51,7 @@ function validateForm() {
     }
 }
 
-
+/*
 document.getElementById("submitBtn").addEventListener("click", function() {
     //Pile ou face
     let pileOuFace = prompt("Pile ou face ?");
@@ -76,7 +76,7 @@ document.getElementById("submitBtn").addEventListener("click", function() {
         window.location.reload();
     }
 });
-
+*/
 // appeler la fonction validateForm à chaque fois qu'un champ est modifié
 document.getElementById("usrnInp").addEventListener("input", validateForm);
 document.getElementById("emailInp").addEventListener("input", validateForm);
@@ -85,4 +85,3 @@ document.getElementById("textarea1Inp").addEventListener("input", validateForm);
 //Appeler la fonction validateForm au chargement de la page
 validateForm();
 
-console.log("contacts.js chargé !");
diff --git a/src/js/InfosEtContact/contacts/roulette.js b/src/js/InfosEtContact/contacts/roulette.js
new file mode 100644
index 0000000..08e9012
--- /dev/null
+++ b/src/js/InfosEtContact/contacts/roulette.js
@@ -0,0 +1,55 @@
+let $inner = $('.inner'),
+    $spin = $('#submitBtn'),
+    $data = $('.data'),
+    $mask = $('.mask'),
+    maskDefault = 'Faites vos jeux',
+    timer = 9000;
+
+let red = [32,19,21,25,34,27,36,30,23,5,16,1,14,9,18,7,12,3];
+
+
+
+$mask.text(maskDefault);
+
+$spin.on('click',function(event){
+    event.preventDefault();
+    // get a random number between 0 and 36 and apply it to the nth-child selector
+    let  randomNumber = Math.floor(Math.random() * 36),
+        color = null;
+    $inner.attr('data-spinto', randomNumber).find('li:nth-child('+ randomNumber +') input').prop('checked','checked');
+
+
+    $('.placeholder').remove();
+
+
+    setTimeout(function() {
+        $mask.text('Rien ne va plus');
+    }, timer/2);
+
+    setTimeout(function() {
+        $mask.text(maskDefault);
+    }, timer+500);
+
+
+
+    // remove the disabled attribute when the ball has stopped
+    setTimeout(function() {
+
+        if($.inArray(randomNumber, red) !== -1){ color = 'red'} else { color = 'black'};
+        if(randomNumber == 0){color = 'green'};
+
+        $data.addClass('reveal');
+        $inner.addClass('rest');
+
+        if(color === 'red' || color === 'green'){
+            alert("Vous avez gagné ! Votre message a bien été envoyé !");
+            $('#formulaire').submit();
+        }
+        else{
+            alert("Ratio! Vous avez perdu! Vous devez tous recommencer!")
+            location.reload();
+        }
+    }, timer);
+
+});
+