Make it work without javascript

     It opens the image in a new tab on click on the "generate" button
     See #9

static/style.css

@@ -96,7 +96,7 @@ a {
   border: 1px solid #497ed5;
 }
 
-div#inputs {
+#inputs {
   background-color: white;
 }
 
@@ -163,7 +163,7 @@ div[id^="step"]:target {
   display: block;
 }
 
-div#inputs > div:first-child {
+#inputs > div:first-child {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -171,7 +171,7 @@ div#inputs > div:first-child {
   border-bottom: 1px solid #dde5f1;
 }
 
-div#inputs > div:first-child > button.randomize {
+#inputs > div:first-child > button.randomize {
   width: 60%;
 }
 

views/index.ejs

@@ -21,9 +21,9 @@
       <a class="fa fa-pencil" href="#step4"></a>
       <a class="fa fa-cogs" href="#step5"></a>
     </nav>
-    <div id="inputs">
+    <form id="inputs" action="./generate.png" target="_blank">
       <div>
-	<button class="randomize white-button">CHOISIR AU HASARD <span class="fa fa-random"></span></button>
+	<a class="randomize white-button">CHOISIR AU HASARD <span class="fa fa-random"></span></a>
       </div>
       <div id="step1">
 	<h2 class="title-small">Choisissez 2 couleurs</h2>
@@ -99,7 +99,7 @@
       </div>
       <div id="step2">
 	<h2>Remplissez le texte à trou</h2>
-	<textarea placeholder="(90 caractères maximum)" rows="8" id="step2value" maxlength="90"></textarea>
+	<textarea placeholder="(90 caractères maximum)" rows="8" id="step2value" name="text" maxlength="90"></textarea>
 	<div class="navButtons">
 	  <a href="#step1" class="white-button">&lsaquo;</a>
 	  <a href="#step3" class="blue-button">ÉTAPE SUIVANTE &rsaquo;</a>
@@ -208,12 +208,13 @@
       </div>
       <div id="step5">
 	<h2>Signez votre création ! (optionnel)</h2>
-	<input type="text" id="signature" />
+	<input type="text" id="signature" name="signature" />
 	<div class="navButtons">
 	  <a href="#step4" class="white-button">&lsaquo;</a>
+	  <input type="submit" class="blue-button" value="GÉNÉRER" />
 	</div>
       </div>
-    </div>
+    </form>
     <main>
       <div>
 	<canvas id="output" width="600" height="413"></canvas>