Add another "randomize" button on small screens

static/canvas.js

@@ -171,16 +171,19 @@ let randomElement = function(selector) {
   return elems[Math.trunc(Math.random() * elems.length)];
 }
 
-document.getElementById('randomize').onclick = function(e) {
-  randomElement('input[name="bg-color"]').checked = true;
-  do {
-    randomElement('input[name="fg-color"]').checked = true;
-  } while (document.querySelector('.colorpicker input[type="radio"][name="bg-color"]:checked').value
-	   == document.querySelector('.colorpicker input[type="radio"][name="fg-color"]:checked').value);
-  randomElement('input[name="font"]').checked = true;
-  randomElement('input[name="icon"]').checked = true;
-  document.getElementById('step2value').value = document.getElementById('step2value').innerText = sampleTexts[Math.trunc(Math.random() * sampleTexts.length)];
-  if (document.getElementById('signature').value.match(/(\t$|^$)/))
-    document.getElementById('signature').value = sampleSignatures[Math.trunc(Math.random() * sampleSignatures.length)];
-  draw();
+let randomButtons = document.querySelectorAll('.randomize');
+for (let i = 0; i < randomButtons.length; ++i) {
+  randomButtons[i].onclick = function(e) {
+    randomElement('input[name="bg-color"]').checked = true;
+    do {
+      randomElement('input[name="fg-color"]').checked = true;
+    } while (document.querySelector('.colorpicker input[type="radio"][name="bg-color"]:checked').value
+	     == document.querySelector('.colorpicker input[type="radio"][name="fg-color"]:checked').value);
+    randomElement('input[name="font"]').checked = true;
+    randomElement('input[name="icon"]').checked = true;
+    document.getElementById('step2value').value = document.getElementById('step2value').innerText = sampleTexts[Math.trunc(Math.random() * sampleTexts.length)];
+    if (document.getElementById('signature').value.match(/(\t$|^$)/))
+      document.getElementById('signature').value = sampleSignatures[Math.trunc(Math.random() * sampleSignatures.length)];
+    draw();
+  }
 }

static/style.css

@@ -170,7 +170,7 @@ div#inputs > div:first-child {
   border-bottom: 1px solid #dde5f1;
 }
 
-div#inputs > div:first-child > button#randomize {
+div#inputs > div:first-child > button.randomize {
   width: 60%;
 }
 
@@ -239,7 +239,7 @@ body {
     margin-top: 7vw;
   }
 
-  h2.title-small {
+  h2.title-small, main .randomize {
     display: none;
   }
 }

views/index.ejs

@@ -23,7 +23,7 @@
     </nav>
     <div id="inputs">
       <div>
-	<button id="randomize" class="white-button">CHOISIR AU HASARD <span class="fa fa-random"></span></button>
+	<button class="randomize white-button">CHOISIR AU HASARD <span class="fa fa-random"></span></button>
       </div>
       <div id="step1">
 	<h2 class="title-small">Choisissez 2 couleurs</h2>
@@ -217,6 +217,7 @@
     <main>
       <div>
 	<canvas id="output" width="600" height="413"></canvas>
+	<a class="randomize white-button"><span class="fa fa-random"></span></a>
 	<a id="tweet-button" class="blue-button" target="_blank" href="https://twitter.com/intent/tweet?text=Soutenez La Quadrature du Net !">Tweet <span class="fa fa-twitter"></span></a>
 	<a id="save-image" class="white-button" download="lqdn-slogan.png">Enregistrer <span class="fa fa-save"></span></a>
       </div>