Tweak CSSLintDemo.

webfella · Aug 19, 2014 · 7f50a8e · 7f50a8e
1 parent 13314c8
commit 7f50a8e
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 23 deletions.
diff --git a/demos/CSSLintDemo.htm b/demos/CSSLintDemo.htm
@@ -8,11 +8,12 @@
         .error { color: #D9534F; font-weight: bold; }
         .warning { color: #F0AD4E; }
     </style>
-    <script src="../release/csslint.js"></script>
+    <script src="../build/csslint.js"></script>
+    <script src="demo.js"></script>
 </head>
 <body>
     <h1>CSSLint Demo</h1>
-    <textarea rows="50" cols="100" id="input">
+    <textarea rows="30" cols="100" id="input">
 @charset "UTF-8";
 
 @import url("booya.css") print, screen;
@@ -73,9 +74,9 @@ <h1>CSSLint Demo</h1>
   }
 }
     </textarea>
-    <input type="button" id="lint-btn" value="Run CSSLint">
+    <br>
+    <button id="lint-btn">Run CSSLint</button>
     <p>(You may want to keep the CSS kinda small, this could take a while.)</p>
     <div id="output"></div>
-    <script src="demo.js"></script>
 </body>
 </html>
diff --git a/demos/demo.js b/demos/demo.js
@@ -1,28 +1,31 @@
 /* jshint browser:true */
 (function() {
+    "use strict";
 
-    document.body.onclick = function(event) {
-        event = event || window.event;
-        var target = event.target || event.srcElement,
-            results,
-            messages,
-            i,
-            len;
+    window.onload = function() {
+        document.body.onclick = function(event) {
+            event = event || window.event;
+            var target = event.target || event.srcElement,
+                results,
+                messages,
+                i,
+                len;
 
+            function log(value, level) {
+                var output = document.getElementById("output");
+                output.innerHTML += "<span class=\"" + level + "\">" + value.replace(/ /g, "&nbsp;") + "</span><br>";
+            }
+
+            if (target.id === "lint-btn") {
+                document.getElementById("output").innerHTML = "";
+                results = CSSLint.verify(document.getElementById("input").value);
+                messages = results.messages;
+                for (i=0, len=messages.length; i < len; i++) {
+                    log(messages[i].message + " (line " + messages[i].line + ", col " + messages[i].col + ")", messages[i].type);
+                }
 
-        if (target.id == "lint-btn") {
-            document.getElementById("output").innerHTML = "";
-            results = CSSLint.verify(document.getElementById("input").value);
-            messages = results.messages;
-            for (i=0, len=messages.length; i < len; i++) {
-                log(messages[i].message + " (line " + messages[i].line + ", col " + messages[i].col + ")", messages[i].type);
             }
 
-        }
+        };
     };
-
-    function log(value, level) {
-        var output = document.getElementById("output");
-        output.innerHTML += "<span class=\"" + level + "\">" + value.replace(/ /g, "&nbsp;") + "</span><br>";
-    }
 })();