3 files changed, 43 insertions, 19 deletions
diff --git a/css/style.css b/css/style.css
index afc63ed..f68994c 100644
--- a/css/style.css
+++ b/css/style.css
@@ -38,27 +38,16 @@ body {
   margin-bottom: 40px;
 }
 
-/* Wordseach */
-
-.ws-area {
-  background: #fafafa;
+.ws-area, .ws-words {
   display: inline-block;
-  padding: 20px;
-  border-radius: 10px;
-  -moz-user-select: -moz-none;
-  -khtml-user-select: none;
-  -webkit-user-select: none;
-  -ms-user-select: none;
-}
-
-.ws-row {
-  line-height: 0;
+  vertical-align: top;
 }
 
-.ws-col {
-  cursor: pointer;
+.ws-words {
+  margin-left: 20px;
+  text-align: left;
 }
 
-.ws-selected {
-  background: #eee;
+.ws-word {
+  margin-bottom: 4px;
 }
 \ No newline at end of file
diff --git a/css/wordseach.css b/css/wordseach.css
new file mode 100644
index 0000000..0c26836
--- /dev/null
+++ b/css/wordseach.css
@@ -0,0 +1,24 @@
+/* Wordseach */
+
+.ws-area {
+  background: #fafafa;
+  display: inline-block;
+  padding: 20px;
+  border-radius: 10px;
+  -moz-user-select: -moz-none;
+  -khtml-user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+}
+
+.ws-row {
+  line-height: 0;
+}
+
+.ws-col {
+  cursor: pointer;
+}
+
+.ws-selected {
+  background: #eee;
+}
diff --git a/index.html b/index.html
index 2e9adc0..26fd242 100644
--- a/index.html
+++ b/index.html
@@ -3,12 +3,14 @@
   <head>
     <meta charset="utf-8">
     <title>Word search game</title>
+    <link rel="stylesheet" href="css/wordseach.css" />
     <link rel="stylesheet" href="css/style.css" />
   </head>
   <body>
     <div class="wrap">
       <h1 class="logo">Word search game</h1>
       <section id="ws-area"></section>
+      <ul class="ws-words"></ul>
     </div>
     <a href="https://github.com/lizhineng/word-search-game"><img style="position: absolute; top: 0; right: 0; border: 0;" src="images/forkme_right_red.png" alt="Fork me on GitHub"></a>
     <script src="js/utility.js"></script>
@@ -16,7 +18,16 @@
     <script type="text/javascript">
       var gameAreaEl = document.getElementById('ws-area');
       var gameobj = gameAreaEl.wordSeach();
-      console.log(gameobj.words);
+
+      // Put words into `.ws-words`
+      var words = gameobj.settings.words,
+        wordsWrap = document.querySelector('.ws-words');
+      for (i in words) {
+        var liEl = document.createElement('li');
+        liEl.setAttribute('class', 'ws-word');
+        liEl.innerText = words[i];
+        wordsWrap.appendChild(liEl);
+      }
     </script>
   </body>
 </html>
 \ No newline at end of file