WebChallengeLunch · korzio · Feb 9, 2020 · Feb 9, 2020 · Feb 9, 2020 · Feb 9, 2020
diff --git a/app/assets/instructions.html b/app/assets/instructions.html
@@ -10,25 +10,41 @@
   </style>
 </head>
 <body>
-<pre>
+<article>
+  <h3>Payment Widget</h3>
+  <p>
+    Make a payment widget using the <strong>lion-web</strong> library!
+    A pop-up to enter card information of the payer. The form should contain the submit button and the following fields
+    <ul>
+      <li>- card number (IBAN),</li>
+      <li>- cardholder name,</li>
+      <li>- date,</li>
+      <li>- cvv,</li>
+      <li>- email,</li>   
+    </ul>
+    include validation of
+    <ul>
+      <li>- non empty values</li>
+      <li>- valid date & email,</li>
+      <li>- cvv as 3 digit number</li>
+    </ul>
+    and can be submitted with all the form data.
+  </p>
+  <p>
+  Feel free to use the official <a href="https://github.com/ing-bank/lion">lion documentation</a> and <a href="https://lion-web-components.netlify.com/?path=/story/intro-lion-web-components--page">storybook examples</a>
+  </p>
 
---- The rules ---
-1) No previews - of either results or assets!
-2) Stay in this editor at all times
-3) No measurement tools
-4) Stop coding when the time's up
-5) After the round is over, press "Finish" and follow the prompt instructions to see your results
-
-Good luck and most important of all; have fun!
-
---- Assets ---
-NOTE TO ORGANIZERS (REMOVE ME):
-  * INCLUDE PATHS TO ANY ASSETS THE PAGE MIGHT NEED HERE
-  * MAKE SURE TO PROVIDE DIMENSIONS FOR THE ASSETS AS WELL
-  * THE BASE PATH WHEN VIEWING RESULTS IS /assets, SO YOU DON'T NEED TO INCLUDE THAT IN THE PATHS BELOW
-
-./beach.jpg (1223x815)
-
-</pre>
+</article>
+<section>
+  <h3>The rules</h3>
+  <ol>
+    <li>No previews - of either results or assets!</li>
+    <li>Stay in this editor at all times</li>
+    <li>No measurement tools</li>
+    <li>Stop coding when the time's up</li>
+    <li>After the round is over, press "Finish" and follow the prompt instructions to see your results</li>
+  </ol>
+  <h3>Good luck and most important of all - have fun!</h3>
+</section>
 </body>
 </html>
diff --git a/app/assets/payment-widget.png b/app/assets/payment-widget.png
diff --git a/app/index.html b/app/index.html
@@ -18,7 +18,7 @@
   </div>
   <div class="reference-screenshot-container">
     <span>Reference</span>
-    <div class="reference-screenshot" style="background-image:url(assets/page.png);"></div>
+    <div class="reference-screenshot" style="background-image:url(assets/payment-widget.png);"></div>
   </div>
 
   <div class="name-tag">

diff --git a/app/scripts/app.coffee b/app/scripts/app.coffee
@@ -72,7 +72,7 @@ class App
     @editor.focus()
 
     @editor.getSession().on "change", @onChange
-    $(window).on "beforeunload", -> "Hold your horses!"
+    # $(window).on "beforeunload", -> "Hold your horses!"
 
     $(".instructions-container, .instructions-button").on "click", @onClickInstructions
     $(".storybook-container, .storybook-button").on "click", @onClickStorybook
@@ -252,14 +252,14 @@ class App
     @editor.focus() unless @$reference.hasClass("active")
 
   onClickFinish: =>
-    confirm = prompt "
-      This will show the results of your code. Doing this before the round is over
-      WILL DISQUALIFY YOU. Are you sure you want to proceed? Type \"yes\" to confirm.
-    "
-
-    if confirm?.toLowerCase() is "yes"
-      @$result[0].contentWindow.postMessage(@editor.getValue(), "*")
-      @$result.show()
+    # confirm = prompt "
+    #   This will show the results of your code. Doing this before the round is over
+    #   WILL DISQUALIFY YOU. Are you sure you want to proceed? Type \"yes\" to confirm.
+    # "
+
+    # if confirm?.toLowerCase() is "yes"
+    @$result[0].contentWindow.postMessage(@editor.getValue(), "*")
+    @$result.show()
 
   onChange: (e) =>
     @debouncedSaveContent()