From 15e06a9dd2abad325a8a3b21eb1766f2dd3d40e8 Mon Sep 17 00:00:00 2001
From: Doruk Eker <doruk@dorukeker.com>
Date: Tue, 15 Dec 2015 11:56:15 +0100
Subject: [PATCH] Show content only after the sound is loaded

---
 index.html | 2 +-
 prank.js   | 6 +++++-
 style.css  | 4 ++++
 3 files changed, 10 insertions(+), 2 deletions(-)
diff --git a/index.html b/index.html
index 24e5919..816ebfc 100644
--- a/index.html
+++ b/index.html
@@ -11,7 +11,7 @@
     <script type="text/javascript" src="forcetouch.js"></script>
   </head>
   <body>
-    <div class="container">
+    <div class="container hidden">
       <div class="col-xs-4">
         <span id="label1" class="current">0.00</span>
       </div>
diff --git a/prank.js b/prank.js
index a9bd71c..0257dc0 100644
--- a/prank.js
+++ b/prank.js
@@ -1,5 +1,9 @@
 var sound = new Howl({
-  urls: ['crack.mp3']
+  urls: ['crack.mp3'],
+  onload: function(){
+    // makes sure the sound is loaded. then shows the html content
+    $('.container').removeClass('hidden');
+  }
 });
 
 
diff --git a/style.css b/style.css
index ce7bc8c..3508dba 100644
--- a/style.css
+++ b/style.css
@@ -43,3 +43,7 @@ span.done{
   height: 100%;
   display: none;
 }
+
+.hidden{
+  display: none;
+}
