initial commit

anschwa · Jul 10, 2015 · 2aa386b · 2aa386b
commit 2aa386b
Show file tree

Hide file tree

Showing 11 changed files with 917 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,2 @@
+.DS_Store
+.sass-cache/
diff --git a/LICENSE b/LICENSE
@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2015 Adam Schwartz
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/index.html b/index.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8"/>
+    <title>ES6 Typing Test</title>
+    <link href="style.css" rel="stylesheet"/>
+    <script src="typing-test-compiled.js" defer></script>
+  </head>
+  <body onload="addWords()">
+    <header>
+      <h3>ES6 Typing Test</h3>
+    </header>
+
+    <section id="word-section">
+      <div class="waiting"">⌛</div>
+    </section>
+
+    <section id="type-section">
+      <input id="typebox" name="typebox" type="text" tabindex="1" autofocus onkeyup="typingTest(event)"/>
+      <div id="timer" class="type-btn"><span>1:00</span></div>
+      <button id="restart" class="type-btn" tabindex="2" onclick="restartTest()">
+        <span id="restart-symbol">↻</span>
+      </button>
+    </section>
+
+    <footer>
+      © <script>document.write(new Date().getFullYear())</script>
+      <a href="http://adamschwartz.io">Adam Schwartz</a> |
+      <a href="https://github.com/daschwa/typing-test">View on GitHub</a>
+    </footer>
+  </body>
+</html>
diff --git a/readme.org b/readme.org
@@ -0,0 +1,24 @@
+#+TITLE: ES6 Typing Test
+#+AUTHOR: Adam Schwartz
+#+DATE: June 24, 2015
+
+* Description
+A simple HTML5 typing test webapp written with [[http://www.ecma-international.org/ecma-262/6.0/][ECMAScript 2015]],
+compiled with [[https://babeljs.io/][Babel]], styled with [[http://sass-lang.com/][Sass]], and developed using [[https://github.com/lepture/python-livereload][Python
+LiveReload]].
+
+Inspired by [[http://10fastfingers.com/typing-test/english][10fastfingers]].
+
+* Screenshots
+[[file:/screenshots/test.png]]
+[[file:/screenshots/results.png]]
+* Developing
+Execute 
+#+BEGIN_SRC sh
+  python server.py
+#+END_SRC
+
+* Resources
+- [[https://github.com/lukehoban/es6features][es6features]]
+- [[http://www.world-english.org/english500.htm][500 most common English words]]
+- [[http://www.speedtypingonline.com/typing-equations][calculate wpm]]
diff --git a/screenshots/results.png b/screenshots/results.png
diff --git a/screenshots/test.png b/screenshots/test.png
diff --git a/server.py b/server.py
@@ -0,0 +1,14 @@
+#!/usr/bin/env python
+
+from livereload import Server, shell
+
+server = Server()
+
+style = ("style.scss", "style.css")
+script = ("typing-test.js", "typing-test-compiled.js")
+
+server.watch(style[0], shell(["sass", style[0]], output=style[1]))
+server.watch(script[0], shell(["babel", script[0]], output=script[1]))
+server.watch("index.html")
+
+server.serve(port=8080, host="localhost", open_url=True)
diff --git a/style.css b/style.css
@@ -0,0 +1,138 @@
+/************************************************/
+/* Color Pallet */
+/* Base Colors */
+/* Main Primary color */
+/* Word Colors */
+/************************************************/
+/* Mixins / Placeholders */
+#timer, #restart {
+  margin: 0.2em;
+  line-height: 2.2em;
+  height: 2.2em; }
+
+#word-section {
+  border: 1px solid #999;
+  background-color: #fff; }
+
+/************************************************/
+* {
+  margin: 0;
+  padding: 0; }
+
+body {
+  margin: 0 auto;
+  background-color: #93C572;
+  font-family: sans-serif;
+  min-width: 600px;
+  max-width: 850px; }
+
+header {
+  padding: 1em;
+  text-align: center; }
+  header h3 {
+    font-weight: normal; }
+
+section {
+  width: 90%;
+  margin: 0 auto;
+  padding: 0.5em; }
+
+#word-section {
+  font-size: 1.5em;
+  height: 4em;
+  line-height: 2em;
+  /* hide 3rd line of text */
+  border-radius: 0.25em;
+  position: relative;
+  overflow: hidden; }
+  #word-section > span {
+    display: inline-block;
+    margin-left: 0.2em;
+    /* emulate spaces between words */ }
+
+#type-section {
+  text-align: center; }
+  #type-section > * {
+    font-size: 1.5em;
+    display: inline-block;
+    border-radius: 0.25em;
+    border: none;
+    color: #fff;
+    vertical-align: middle; }
+
+#typebox {
+  width: 64%;
+  color: #000;
+  padding: 0.5em;
+  box-shadow: -1px -1px 5px #383838; }
+  #typebox:focus {
+    outline: none; }
+
+#timer {
+  width: 4em;
+  background-color: #467F21;
+  margin-right: 0; }
+
+#restart {
+  width: 2em;
+  background-color: #68A143; }
+  #restart > span {
+    display: inline-block;
+    transform: rotate(1.5Rad);
+    font-weight: bold; }
+  #restart:hover {
+    background-color: #467F21; }
+  #restart:active {
+    box-shadow: 1px 1px 4px #467F21 inset; }
+
+#results {
+  text-align: center;
+  margin: 0 1%;
+  display: block; }
+  #results li {
+    list-style: none; }
+  #results li:first-child {
+    font-size: 1.5em; }
+  #results li:nth-child(2) {
+    font-size: 0.8em;
+    line-height: 1em; }
+  #results #results-stats {
+    font-size: 0.6em; }
+
+footer {
+  margin-top: 1em;
+  text-align: center;
+  font-size: 0.8em;
+  color: #000; }
+
+footer a {
+  color: #000;
+  text-decoration: none; }
+  footer a:hover {
+    text-decoration: underline; }
+
+/************************************************/
+/* hides small bit of residule text after scrolling */
+.magic-box {
+  position: fixed;
+  width: inherit;
+  height: 0.5em;
+  top: 54px;
+  background-color: #fff; }
+
+.waiting {
+  text-align: center;
+  line-height: 1.5em;
+  font-size: 3em; }
+
+.current-word {
+  background-color: #dddddd; }
+
+.correct-word-c {
+  color: #93C572; }
+
+.incorrect-word-c {
+  color: #e50000; }
+
+.incorrect-word-bg {
+  background-color: #e50000; }