diff options
| -rw-r--r-- | css/style.css | 25 | ||||
| -rw-r--r-- | css/wordseach.css | 24 | ||||
| -rw-r--r-- | index.html | 13 |
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; +} @@ -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 |