Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div id="app"></div>
              
            
!

CSS

              
                @import url('https://fonts.googleapis.com/css?family=Nunito:400,700');
* {
  padding: 0;
  margin: 0;
  text-decoration: none;
  outline: none;
  letter-spacing: 1.1px;
  box-sizing: border-box;
}

*::before,
*::after {
  box-sizing: border-box;
}

body,
html {
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  width: 100%;
  height: 100%;
  /*
background: linear-gradient(180deg, rgb(77, 43, 56), rgb(40, 62, 70));
background: -webkit-linear-gradient(180deg, rgb(77, 43, 56), rgb(40, 62, 70));
*/
  background: #3D343E;
}


/* svg-icon */

.svg-icon {
  width: 1em;
  height: 1em;
  position: relative;
  top: 3px;
  opacity: 1 !important;
  pointer-events: none;
}

.svg-icon path,
.svg-icon polygon,
.svg-icon rect {
  fill: #fff;
  opacity: 1 !important;
}

.svg-icon circle {
  stroke: #fff;
  stroke-width: 1;
  opacity: 1 !important;
}


/* svg-icon */


/* classes */

.pointer-events-none {
  pointer-events: none;
}

.pointer-events-auto {
  pointer-events: auto;
}

.disable {
  visibility: hidden;
  opacity: 0;
  position: relative;
}

.enable {
  visibility: visible;
  opacity: 1;
  position: relative;
}


/* classes */

#app {
  max-width: 700px;
  height: 100%;
  display: table;
  margin: 0 auto;
  text-align: center;
}

.container {
  max-width: 100%;
  margin: 0 auto;
  display: table-cell;
  vertical-align: middle;
  padding: 0 10px;
}

header {
  margin-bottom: 40px;
  padding: 0 10px;
  margin-top: 20px;
}

section {
  margin-bottom: 20px;
}

header .title {
  font-size: 2.5em;
  font-weight: 700;
  color: #fff;
  margin: 0 auto;
  display: inline-block;
  text-align: center;
}

header .description {
  font-size: 0.8em;
  margin-top: -5px;
  color: #ccc;
  margin-left: auto;
  margin-right: auto;
  display: block;
  text-align: center;
}


/* twitter-github-buttons */

.twitter-github-buttons-wrapper {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 20px;
  padding: 0 10px;
  height: 60px;
  line-height: 60px;
  text-align: center;
}

.github-button {
  margin-right: 10px;
}

.github-button,
.twitter-share-button {
  background: #435761;
  padding: 10px 25px;
  font-size: 1.4em;
  color: #fff;
  border-radius: 4px;
  outline: none;
  border: none;
  cursor: pointer;
  margin-top: 30px;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.github-button:hover,
.twitter-share-button:hover {
  background: #614357;
}

.githubSvg,
.twitterSvg {
  display: inline-block;
  position: relative;
  top: 2px;
  width: 1em;
}


/* twitter-github-buttons */

.start-playing-text-wrapper {
  color: #ddd;
  text-align: center;
}

.start-playing-text-wrapper p {
  font-size: 1em;
}

.start-game-buttons-wrapper {
  text-align: center;
  margin-top: 0px;
  padding: 0 10px;
}

.start-game-buttons-wrapper button {
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  background: #42716d;
  margin-top: 10px;
  color: #fff;
  border-radius: 4px;
  margin-right: 5px;
  padding: 6px 12px;
  font-size: 1em;
  border: none;
  outline: none;
  cursor: pointer;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.start-game-buttons-wrapper button:last-child {
  margin-right: 0px;
}

.start-game-buttons-wrapper button:hover {
  background: #435761;
}

.start-game-buttons-wrapper button:disabled {
  background: #435761;
  pointer-events: none;
}

@media screen and (max-width: 600px) {
  .start-game-buttons-wrapper button {
    margin-top: 0.5em;
    display: block;
    width: 12em;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }
  .start-game-buttons-wrapper button:last-child {
    margin-right: auto;
  }
}


/* tooltip */

.topic {
  position: relative;
}

.topic:after {
  opacity: 0;
}

.topic:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  top: 50%;
  left: 50%;
  width: 70%;
  margin-top: 30px;
  text-align: center;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.2);
  color: #fff;
  padding: 3px 6px;
  border-radius: 4px;
  font-size: 0.7em;
  opacity: 1;
}

@media screen and (max-width: 600px) {
  .topic {
    position: relative;
  }
  .topic:after {
    opacity: 0;
  }
  .topic:hover::after {
    display: none;
  }
}


/* tooltip */


/* game levels */

.game-levels-wrapper {
  margin-top: 20px;
  margin-bottom: 10px;
}

@media screen and (max-width: 600px) {
  .game-levels-wrapper {
    margin-bottom: 20px;
  }
}

.game-levels-wrapper button {
  font-family: 'Nunito', sans-serif;
  opacity: 0.5;
  background: rgba(134, 83, 86, 0.5);
  color: #fff;
  border-radius: 4px;
  border: none;
  outline: none;
  cursor: pointer;
  font-size: 1em;
  padding: 3px 6px;
  margin-right: 0.2em;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.game-levels-wrapper button:last-child {
  margin-right: 0;
}

.game-levels-wrapper button:hover {
  background: rgba(134, 83, 86, 0.5);
}

.game-levels-wrapper button:disabled {
  opacity: 1;
  background: rgba(134, 83, 86, 1);
}

.displayNone {
  display: none;
}

.topicsSvg {
  position: relative;
  top: 2px;
  fill: #fff;
  width: 1em;
  height: 1em;
}


/* game levels */


/* splitted letters */

.letters-wrapper {
  display: block;
  margin: 20px auto;
  min-height: 50px;
  height: auto;
  padding: 0px 10px;
  border-bottom: 1px solid #607d8b;
  text-align: center;
}

.letter {
  display: inline-block;
  text-align: center;
  padding: 2px 4px;
  margin: 5px 10px;
  font-size: 1.5em;
  width: 1.6em;
  border: none;
  border-bottom: 2px solid #d1d1d1 !important;
  border-radius: 4px;
  text-indent: -99999px;
}

.foundedLetter {
  display: inline-block;
  text-align: center;
  padding: 2px 4px;
  margin: 5px 10px;
  font-size: 1.5em;
  width: 1.6em;
  border: none;
  border-bottom: 2px solid #d1d1d1 !important;
  border-radius: 4px;
  text-indent: -99999px;
  color: #34a99a;
  text-indent: 0;
}


/* splitted letters */

.alphabet-wrapper {
  display: block;
  padding: 5px 10px;
  text-align: center;
}

.alphabetLetters {
  display: inline-block;
  width: 1.4em;
  height: 1.4em;
  line-height: 1.4em;
  font-size: 1.2em;
  padding: 4px 8px;
  border-radius: 4px;
  margin: 3px 3px;
  background: #ddd;
  color: #333;
  cursor: pointer;
  box-sizing: content-box;
  -webkit-transition: all 0.1s ease;
  -moz-transition: all 0.1s ease;
  -ms-transition: all 0.1s ease;
  -o-transition: all 0.1s ease;
  transition: all 0.1s ease;
}

.alphabetLetters:hover {
  background: #607d8b;
  color: #fff;
}

.clickedLetter {
  display: inline-block;
  width: 1.4em;
  height: 1.4em;
  line-height: 1.4em;
  font-size: 1.2em;
  padding: 4px 8px;
  border-radius: 4px;
  margin: 3px 3px;
  background: #ddd;
  cursor: pointer;
  box-sizing: content-box;
  pointer-events: none;
  color: #a9a9a9;
}


/* show-hide loader */

.for-loader {
  position: relative;
}

.hide-svg-loader {
  display: none;
}

.show-svg-loader {
  display: block;
  margin: 0 auto;
  position: absolute;
  left: 50%;
  top: 30%;
  -moz-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  -o-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  width: 5em;
}


/* show-hide loader */

.lives-words-left-wrapper {
  text-align: center;
  width: 100%;
  font-size: 1em;
}

.lives {
  display: inline-block;
  text-align: center;
  color: #fff;
  margin-top: 5px;
  font-size: 1em;
  padding-right: 10px;
  margin-right: 10px;
  border-right: 1px solid rgba(0, 0, 0, 0.1);
}

.words-left {
  display: inline-block;
  text-align: center;
  color: #fff;
  margin-top: 5px;
  font-size: 1em;
}

.score {
  color: #fff;
  font-size: 1em;
  display: block;
  margin: 20px auto;
}

@media screen and (max-width: 500px) {
  .lives,
  .words-left {
    display: block;
  }
  .lives {
    padding-right: 0;
    margin-right: 0;
  }
}


/* modal  */

.modal {
  width: 300px;
  height: 150px;
  position: absolute;
  top: 50%;
  left: 50%;
  -moz-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  -o-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  text-align: center;
  background: rgba(0, 0, 0, 0.3);
  color: #fff;
  border: 4px solid #435761;
  border-radius: 4px;
  display: table;
  z-index: 999;
  opacity: 1 !important;
  visibility: visible !important;
}

.modal section {
  display: table-cell;
  vertical-align: middle;
  opacity: 1 !important;
  visibility: visible !important;
}

.modal h3 {
  font-size: 1.2em;
  margin-bottom: 0.5em;
  opacity: 1 !important;
  visibility: visible !important;
}

.modal p {
  font-size: 1em;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.close-modal {
  position: absolute;
  right: -9px;
  top: -9px;
  font-size: 1em;
  padding: 3px 7px;
  border-radius: 100%;
  background: rgba(255, 0, 0, 0.4);
  cursor: pointer;
  opacity: 1 !important;
  visibility: visible !important;
}

.modalHide {
  display: none;
}

.gameOver *:not(.modal) {
  opacity: 0.3;
  pointer-events: none;
}


/* modal  */


/*footer*/

footer {
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  height: 30px;
  line-height: 30px;
  font-size: 0.6em;
  color: #ccc;
  padding: 0 10px;
  text-align: center;
  width: 100%;
  display: table;
  letter-spacing: 1px;
}

footer p {
  display: table-cell;
  width: 33.333%
}

footer .copyright {
  text-align: left;
}

footer .copyright a {
  color: #ccc;
}

footer .copyright a:hover {
  text-decoration: underline;
}

footer .built-with {
  text-align: right;
}

footer .react-logo {
  position: relative;
  top: 3px;
  width: 1.6em;
  height: 1.6em;
}

@media screen and (max-width: 500px) {
  footer {
    display: block;
    height: auto;
  }
  footer p {
    display: block;
    width: 100%;
    height: 2.2em;
    line-height: 30px;
  }
  footer .copyright {
    text-align: center;
  }
  footer .built-with {
    text-align: center;
    margin-bottom: 0.5em;
  }
}

.heart {
  color: #ac4b56;
}


/*footer*/
              
            
!

JS

              
                var Hangmanizr = React.createClass({
  getInitialState: function() {
    return {
      alphabet: ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z", "@", "-"],
      words: '',
      randomWord: '',
      letters: [],
      clickedLetters: [],
      matchedLetters: [],
      lives: 6,
      initialLives: 6,
      clickedButton: null,
      gameStarted: false,
      nextWord: false,
      chosenLevel: 'medium',
      score: 0,
      gameOver: false
    }
  },
  animalsGame: function(e) {
    var animals = ["aardvark", "albatross", "alligator", "alpaca", "ant", "anteater", "antelope", "ape", "armadillo", "donkey", "baboon", "badger", "barracuda", "bat", "bear", "beaver", "bee", "bison", "boar", "buffalo", "butterfly", "camel", "capybara", "caribou", "cassowary", "cat", "caterpillar", "cattle", "chamois", "cheetah", "chicken", "chimpanzee", "chinchilla", "chough", "clam", "cobra", "cockroach", "cod", "cormorant", "coyote", "crab", "crane", "crocodile", "crow", "curlew", "deer", "dinosaur", "dog", "dogfish", "dolphin", "donkey", "dotterel", "dove", "dragonfly", "duck", "dugong", "dunlin", "eagle", "echidna", "eel", "eland", "elephant", "elephant-seal", "elk", "emu", "falcon", "ferret", "finch", "fish", "flamingo", "fly", "fox", "frog", "gaur", "gazelle", "gerbil", "giant-panda", "giraffe", "gnat", "gnu", "goat", "goose", "goldfinch", "goldfish", "gorilla", "goshawk", "grasshopper", "grouse", "guanaco", "guinea-fowl", "guinea-pig", "gull", "hamster", "hare", "hawk", "hedgehog", "heron", "herring", "hippopotamus", "hornet", "horse", "human", "hummingbird", "hyena", "ibex", "ibis", "jackal", "jaguar", "jay", "jellyfish", "kangaroo", "kingfisher", "koala", "komodo-dragon", "kookabura", "kouprey", "kudu", "lapwing", "lark", "lemur", "leopard", "lion", "llama", "lobster", "locust", "loris", "louse", "lyrebird", "magpie", "mallard", "manatee", "mandrill", "mantis", "marten", "meerkat", "mink", "mole", "mongoose", "monkey", "moose", "mouse", "mosquito", "mule", "narwhal", "newt", "nightingale", "octopus", "okapi", "opossum", "oryx", "ostrich", "otter", "owl", "ox", "oyster", "panther", "parrot", "partridge", "peafowl", "pelican", "penguin", "pheasant", "pig", "pigeon", "polar-bear", "pony", "porcupine", "porpoise", "prairie-dog", "quail", "quelea", "quetzal", "rabbit", "raccoon", "rail", "ram", "rat", "raven", "red-deer", "red-panda", "reindeer", "rhinoceros", "rook", "salamander", "salmon", "sand-dollar", "sandpiper", "sardine", "scorpion", "sea-lion", "sea-urchin", "seahorse", "seal", "shark", "sheep", "shrew", "skunk", "snail", "snake", "sparrow", "spider", "spoonbill", "squid", "squirrel", "starling", "stingray", "stinkbug", "stork", "swallow", "swan", "tapir", "tarsier", "termite", "tiger", "toad", "trout", "turkey", "turtle", "vicuña", "viper", "vulture", "wallaby", "walrus", "wasp", "water-buffalo", "weasel", "whale", "wolf", "wolverine", "wombat", "woodcock", "woodpecker", "worm", "wren", "yak", "zebra"];

    this.setState({
      words: animals,
      letters: [],
      clickedLetters: [],
      matchedLetters: [],
      lives: this.state.initialLives,
      clickedButton: e.target.value,
      gameStarted: true,
      score: 0
    })

    setTimeout(function() {
      this.getRandom();
    }.bind(this), 100);

  },

  cssPropertiesGame: function(e) {
    var cssProperties = ["align-content", "align-items", "align-self", "all", "animation", "animation-delay", "animation-direction", "animation-duration", "animation-fill-mode", "animation-iteration-count", "animation-name", "animation-play-state", "animation-timing-function", "backface-visibility", "background", "background-attachment", "background-blend-mode", "background-clip", "background-color", "background-image", "background-origin", "background-position", "background-repeat", "background-size", "border", "border-bottom", "border-bottom-color", "border-bottom-left-radius", "border-bottom-right-radius", "border-bottom-style", "border-bottom-width", "border-collapse", "border-color", "border-image", "border-image-outset", "border-image-repeat", "border-image-slice", "border-image-source", "border-image-width", "border-left", "border-left-color", "border-left-style", "border-left-width", "border-radius", "border-right", "border-right-color", "border-right-style", "border-right-width", "border-spacing", "border-style", "border-top", "border-top-color", "border-top-left-radius", "border-top-right-radius", "border-top-style", "border-top-width", "border-width", "bottom", "box-shadow", "box-sizing", "caption-side", "clear", "clip", "color", "column-count", "column-fill", "column-gap", "column-rule", "column-rule-color", "column-rule-style", "column-rule-width", "column-span", "column-width", "columns", "content", "counter-increment", "counter-reset", "cursor", "direction", "display", "empty-cells", "filter", "flex", "flex-basis", "flex-direction", "flex-flow", "flex-grow", "flex-shrink", "flex-wrap", "float", "font", "@font-face", "font-family", "font-size", "font-size-adjust", "font-stretch", "font-style", "font-variant", "font-weight", "hanging-punctuation", "height", "justify-content", "@keyframes", "left", "letter-spacing", "line-height", "list-style", "list-style-image", "list-style-position", "list-style-type", "margin", "margin-bottom", "margin-left", "margin-right", "margin-top", "max-height", "max-width", "@media", "min-height", "min-width", "nav-down", "nav-index", "nav-left", "nav-right", "nav-up", "opacity", "order", "outline", "outline-color", "outline-offset", "outline-style", "outline-width", "overflow", "overflow-x", "overflow-y", "padding", "padding-bottom", "padding-left", "padding-right", "padding-top", "page-break-after", "page-break-before", "page-break-inside", "perspective", "perspective-origin", "position", "quotes", "resize", "right", "tab-size", "table-layout", "text-align", "text-align-last", "text-decoration", "text-decoration-color", "text-decoration-line", "text-decoration-style", "text-indent", "text-justify", "text-overflow", "text-shadow", "text-transform", "top", "transform", "transform-origin", "transform-style", "transition", "transition-delay", "transition-duration", "transition-property", "transition-timing-function", "unicode-bidi", "vertical-align", "visibility", "white-space", "width", "word-break", "word-spacing", "word-wrap", "z-index"];

    this.setState({
      words: cssProperties,
      letters: [],
      clickedLetters: [],
      matchedLetters: [],
      lives: this.state.initialLives,
      clickedButton: e.target.value,
      gameStarted: true,
      score: 0
    })

    setTimeout(function() {
      this.getRandom();
    }.bind(this), 100);

  },
  htmlElementsGame: function(e) {
    var htmlElements = ["base", "head", "link", "metal", "style", "title", "address", "article", "aside", "footer", "header", "hgroup", "nav", "section", "dd", "div", "dl", "dt", "figcaption", "figure", "hr", "li", "main", "ol", "p", "pre", "ul", "a", "abbr", "b", "bdi", "bdo", "br", "cite", "code", "data", "dfn", "em", "i", "kbd", "mark", "q", "rp", "rt", "rtc", "ruby", "s", "samp", "small", "span", "strong", "sub", "sup", "time", "u", "var", "wbr", "area", "audio", "img", "map", "track", "video", "embed", "object", "param", "source", "canvas", "noscript", "script", "del", "ins", "caption", "col", "colgroup", "table", "tbody", "td", "tfoot", "th", "thead", "tr", "button", "datalist", "fieldset", "form", "input", "label", "legend", "meter", "optgroup", "option", "output", "progress", "select", "textarea", "details", "dialog", "menu", "menuitem", "summary", "content", "element", "shadow", "template", "acronym", "applet", "basefont", "big", "blink", "center", "command", "content", "dir", "font", "frame", "frameset", "isindex", "keygen", "listing", "marquee", "multicol", "nextid", "noembed", "plaintext", "spacer", "strike", "tt", "xmp"];

    this.setState({
      words: htmlElements,
      letters: [],
      clickedLetters: [],
      matchedLetters: [],
      lives: this.state.initialLives,
      clickedButton: e.target.value,
      gameStarted: true,
      score: 0
    })

    setTimeout(function() {
      this.getRandom();
    }.bind(this), 100);

  },
  phrasalVerbsGame: function(e) {
    var phrasalVerbs = ["add-up", "blow-up", "bring-up", "call-off", "carry-on", "get-along", "look-up", "pull-over", "turn-up", "watch-out"];

    this.setState({
      words: phrasalVerbs,
      letters: [],
      clickedLetters: [],
      matchedLetters: [],
      lives: this.state.initialLives,
      clickedButton: e.target.value,
      gameStarted: true,
      score: 0
    })

    setTimeout(function() {
      this.getRandom();
    }.bind(this), 100);
  },
  getRandom: function() {

    var randomNum = Math.floor((Math.random() * this.state.words.length))
    var random = this.state.words[randomNum];

    this.state.words.splice(randomNum, 1);

    this.setState({
      randomWord: random,
    });

    { /* click start and trigger splitLetters() */ }
    setTimeout(function() {
      this.splitLetters();
    }.bind(this), 100); { /* click start and trigger splitLetters() */ }

  },

  splitLetters: function() {

    var s = this.state.randomWord.toUpperCase();
    for (var i = 0; i < s.length; i++) {
      this.state.letters.push(s.charAt(i));
    }
    this.setState({
      letters: this.state.letters
    });
  },

  checkLetter: function(e) {
    var val = e.currentTarget.textContent;

    this.state.clickedLetters.push(val);

    this.setState({
      clickedLetters: this.state.clickedLetters,
      lives: this.state.lives - 1
    });

    var _this = this;
    this.state.letters.forEach(function(letter) {
      if (letter === val) {
        _this.state.matchedLetters.push(letter)
        _this.setState({
          matchedLetters: _this.state.matchedLetters,
          lives: _this.state.lives
        });

        if (_this.state.lives < 1) {
          if (_this.state.letters.length !== _this.state.matchedLetters.length) {
            this.setState({
              nextWord: false
            });
          }

        }

      }
    });

    if (this.state.lives < 1) { // if lives...

      this.setState({
        nextWord: true,
        lives: ''
      });

      setTimeout(function() {

        this.state.matchedLetters.splice(0, this.state.matchedLetters.length);
        this.state.matchedLetters.splice.apply(this.state.matchedLetters, [0, this.state.letters.length].concat(this.state.letters))

        this.setState({
          matchedLetters: this.state.matchedLetters
        });

        { /* second setTimeout */ }
        setTimeout(function() {

          this.setState({
            clickedLetters: [],
            matchedLetters: [],
            lives: this.state.initialLives,
            nextWord: false
          });

          this.state.letters.splice(0, this.state.letters.length);

          { /* get new random word */ }
          var randomNum = Math.floor((Math.random() * this.state.words.length))
          var random = this.state.words[randomNum];

          this.state.words.splice(randomNum, 1);

          this.setState({
            randomWord: random,
          }); { /* get new random word*/ }

          { /* push new random word's letters to letters array */ }
          var s = random.toUpperCase();
          for (var i = 0; i < s.length; i++) {
            this.state.letters.splice()
            this.state.letters.push(s.charAt(i));
          }
          this.setState({
            letters: this.state.letters
          }); { /* push new random word's letters to letters array */ }

        }.bind(this), 2000); { /* second setTimeout */ }

      }.bind(this), 750);

      { /* check game setTimeout */ }
      setTimeout(function() {

        { /* check if game is over */ }
        if (this.state.words.length === 0) {
          //alert("Game is over! ");

          this.setState({
            gameOver: true
          })

          //this.setState(this.getInitialState());

        } { /* check if game is over*/ }

      }.bind(this), 2500); { /* check game setTimeout */ }

    } // if lives...

    { /* if the word is found, continue the game */ }
    if (this.state.letters.length == this.state.matchedLetters.length) {
      //alert("You found the word!");
      this.setState({
        nextWord: true,
        lives: ''
      });
      setTimeout(function() {

        this.setState({
          clickedLetters: [],
          lives: this.state.initialLives,
          nextWord: false,
          score: this.state.score + 1
        });

        { /* check if game is over */ }
        if (this.state.words.length === 0) {
          this.setState({
            gameOver: true
          })

          //this.setState(this.getInitialState());
        } { /* check if game is over*/ }

        { /* reset lives and clear the matchedLetters array */ }
        this.setState({
          matchedLetters: [],
          lives: this.state.initialLives
        }); { /* reset lives and clear the matchedLetters array */ }

        this.state.letters.splice(0, this.state.letters.length);

        { /* get new random word */ }
        var randomNum = Math.floor((Math.random() * this.state.words.length))
        var random = this.state.words[randomNum];

        this.state.words.splice(randomNum, 1);

        this.setState({
          randomWord: random,
        }); { /* get new random word */ }

        { /* push the new random words letters to letters array */ }
        var s = random.toUpperCase();
        for (var i = 0; i < s.length; i++) {
          this.state.letters.splice()
          this.state.letters.push(s.charAt(i));
        }
        this.setState({
          letters: this.state.letters
        }); { /* push the new random words letters to letters array */ }

      }.bind(this), 2000);

    } { /* if the word is found, continue the game */ }

  },
  easyLevel: function(e) {
    this.setState({
      initialLives: 10,
      chosenLevel: e.target.value
    })
  },
  mediumLevel: function(e) {
    this.setState({
      initialLives: 6,
      chosenLevel: e.target.value
    })
  },
  hardLevel: function(e) {
    this.setState({
      initialLives: 2,
      chosenLevel: e.target.value
    })
  },
  closeModal: function() {
    this.setState(this.getInitialState());
  },

  render: function() {
    return (
      <div className={this.state.gameOver? "container gameOver":"container "}>

		<header>
		<a href="https://mburakerman.github.io/hangmanizr/" className="title">HANGMANIZR</a>
		<p className="description">Quick Hangman Game</p>
		</header>

		<section>
		<div className="twitter-github-buttons-wrapper">
		<a href="https://github.com/mburakerman/hangmanizr" className="github-button" target="_blank" rel="external"> <svg viewBox="0 0 16 16" className="githubSvg" fill="#fff" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M8 0C3.58 0 0 3.582 0 8c0 3.535 2.292 6.533 5.47 7.59.4.075.547-.172.547-.385 0-.19-.007-.693-.01-1.36-2.226.483-2.695-1.073-2.695-1.073-.364-.924-.89-1.17-.89-1.17-.725-.496.056-.486.056-.486.803.056 1.225.824 1.225.824.714 1.223 1.873.87 2.33.665.072-.517.278-.87.507-1.07-1.777-.2-3.644-.888-3.644-3.953 0-.873.31-1.587.823-2.147-.083-.202-.358-1.015.077-2.117 0 0 .672-.215 2.2.82.638-.178 1.323-.266 2.003-.27.68.004 1.364.092 2.003.27 1.527-1.035 2.198-.82 2.198-.82.437 1.102.163 1.915.08 2.117.513.56.823 1.274.823 2.147 0 3.073-1.87 3.75-3.653 3.947.287.246.543.735.543 1.48 0 1.07-.01 1.933-.01 2.195 0 .215.144.463.55.385C13.71 14.53 16 11.534 16 8c0-4.418-3.582-8-8-8"/></svg> Fork</a>

		<a className="twitter-share-button" 
		href="https://twitter.com/share?url=https://mburakerman.github.io/hangmanizr/&text=Hangmanizr - Quick Hangman Game" target="_blank" rel="external"><svg viewBox="0 0 16 16" className="twitterSvg" fill="#fff" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M16 3.038c-.59.26-1.22.437-1.885.517.677-.407 1.198-1.05 1.443-1.816-.634.375-1.337.648-2.085.795-.598-.638-1.45-1.036-2.396-1.036-1.812 0-3.282 1.468-3.282 3.28 0 .258.03.51.085.75C5.152 5.39 2.733 4.084 1.114 2.1.83 2.583.67 3.147.67 3.75c0 1.14.58 2.143 1.46 2.732-.538-.017-1.045-.165-1.487-.41v.04c0 1.59 1.13 2.918 2.633 3.22-.276.074-.566.114-.865.114-.21 0-.416-.02-.617-.058.418 1.304 1.63 2.253 3.067 2.28-1.124.88-2.54 1.404-4.077 1.404-.265 0-.526-.015-.783-.045 1.453.93 3.178 1.474 5.032 1.474 6.038 0 9.34-5 9.34-9.338 0-.143-.004-.284-.01-.425.64-.463 1.198-1.04 1.638-1.7z" fill-rule="nonzero"/></svg> Tweet</a>
		</div>


		<div className="start-playing-text-wrapper">

		<p><svg className="svg-icon" viewBox="0 0 20 20">
		<path fill="none" d="M1.683,3.39h16.676C18.713,3.39,19,3.103,19,2.749s-0.287-0.642-0.642-0.642H1.683
		c-0.354,0-0.641,0.287-0.641,0.642S1.328,3.39,1.683,3.39z M1.683,7.879h11.545c0.354,0,0.642-0.287,0.642-0.641
		s-0.287-0.642-0.642-0.642H1.683c-0.354,0-0.641,0.287-0.641,0.642S1.328,7.879,1.683,7.879z M18.358,11.087H1.683
		c-0.354,0-0.641,0.286-0.641,0.641s0.287,0.642,0.641,0.642h16.676c0.354,0,0.642-0.287,0.642-0.642S18.713,11.087,18.358,11.087zM11.304,15.576H1.683c-0.354,0-0.641,0.287-0.641,0.642s0.287,0.641,0.641,0.641h9.621c0.354,0,0.642-0.286,0.642-0.641
		S11.657,15.576,11.304,15.576z"></path></svg> Choose your level and start playing by clicking the topics below. <svg className="svg-icon" viewBox="0 0 20 20"><path fill="none" d="M1.321,3.417h17.024C18.707,3.417,19,3.124,19,2.762c0-0.362-0.293-0.655-0.654-0.655H1.321
		c-0.362,0-0.655,0.293-0.655,0.655C0.667,3.124,0.959,3.417,1.321,3.417z M18.346,15.857H8.523c-0.361,0-0.655,0.293-0.655,0.654c0,0.362,0.293,0.655,0.655,0.655h9.822c0.361,0,0.654-0.293,0.654-0.655C19,16.15,18.707,15.857,18.346,15.857zM18.346,11.274
		H1.321c-0.362,0-0.655,0.292-0.655,0.654s0.292,0.654,0.655,0.654h17.024c0.361,0,0.654-0.292,0.654-0.654
		S18.707,11.274,18.346,11.274z M18.346,6.69H6.56c-0.362,0-0.655,0.293-0.655,0.655C5.904,7.708,6.198,8,6.56,8h11.786C18.707,8,19,7.708,19,7.345C19,6.983,18.707,6.69,18.346,6.69z"></path></svg></p>

		<p><svg className="svg-icon" viewBox="0 0 20 20">
		<path fill="none" d="M1.683,3.39h16.676C18.713,3.39,19,3.103,19,2.749s-0.287-0.642-0.642-0.642H1.683
		c-0.354,0-0.641,0.287-0.641,0.642S1.328,3.39,1.683,3.39z M1.683,7.879h11.545c0.354,0,0.642-0.287,0.642-0.641
		s-0.287-0.642-0.642-0.642H1.683c-0.354,0-0.641,0.287-0.641,0.642S1.328,7.879,1.683,7.879z M18.358,11.087H1.683
		c-0.354,0-0.641,0.286-0.641,0.641s0.287,0.642,0.641,0.642h16.676c0.354,0,0.642-0.287,0.642-0.642S18.713,11.087,18.358,11.087zM11.304,15.576H1.683c-0.354,0-0.641,0.287-0.641,0.642s0.287,0.641,0.641,0.641h9.621c0.354,0,0.642-0.286,0.642-0.641
		S11.657,15.576,11.304,15.576z"></path></svg> You have {this.state.initialLives} lives. <svg className="svg-icon" viewBox="0 0 20 20"><path fill="none" d="M1.321,3.417h17.024C18.707,3.417,19,3.124,19,2.762c0-0.362-0.293-0.655-0.654-0.655H1.321
		c-0.362,0-0.655,0.293-0.655,0.655C0.667,3.124,0.959,3.417,1.321,3.417z M18.346,15.857H8.523c-0.361,0-0.655,0.293-0.655,0.654c0,0.362,0.293,0.655,0.655,0.655h9.822c0.361,0,0.654-0.293,0.654-0.655C19,16.15,18.707,15.857,18.346,15.857zM18.346,11.274
		H1.321c-0.362,0-0.655,0.292-0.655,0.654s0.292,0.654,0.655,0.654h17.024c0.361,0,0.654-0.292,0.654-0.654
		S18.707,11.274,18.346,11.274z M18.346,6.69H6.56c-0.362,0-0.655,0.293-0.655,0.655C5.904,7.708,6.198,8,6.56,8h11.786C18.707,8,19,7.708,19,7.345C19,6.983,18.707,6.69,18.346,6.69z"></path></svg></p>
		<p><svg className="svg-icon" viewBox="0 0 20 20">
		<path fill="none" d="M16.85,7.275l-3.967-0.577l-1.773-3.593c-0.208-0.423-0.639-0.69-1.11-0.69s-0.902,0.267-1.11,0.69L7.116,6.699L3.148,7.275c-0.466,0.068-0.854,0.394-1,0.842c-0.145,0.448-0.023,0.941,0.314,1.27l2.871,2.799l-0.677,3.951c-0.08,0.464,0.112,0.934,0.493,1.211c0.217,0.156,0.472,0.236,0.728,0.236c0.197,0,0.396-0.048,0.577-0.143l3.547-1.864l3.548,1.864c0.18,0.095,0.381,0.143,0.576,0.143c0.256,0,0.512-0.08,0.729-0.236c0.381-0.277,0.572-0.747,0.492-1.211l-0.678-3.951l2.871-2.799c0.338-0.329,0.459-0.821,0.314-1.27C17.705,7.669,17.316,7.343,16.85,7.275z M13.336,11.754l0.787,4.591l-4.124-2.167l-4.124,2.167l0.788-4.591L3.326,8.5l4.612-0.67l2.062-4.177l2.062,4.177l4.613,0.67L13.336,11.754z"></path></svg> Have fun! <svg className="svg-icon" viewBox="0 0 20 20">
		<path fill="none" d="M16.85,7.275l-3.967-0.577l-1.773-3.593c-0.208-0.423-0.639-0.69-1.11-0.69s-0.902,0.267-1.11,0.69L7.116,6.699L3.148,7.275c-0.466,0.068-0.854,0.394-1,0.842c-0.145,0.448-0.023,0.941,0.314,1.27l2.871,2.799l-0.677,3.951c-0.08,0.464,0.112,0.934,0.493,1.211c0.217,0.156,0.472,0.236,0.728,0.236c0.197,0,0.396-0.048,0.577-0.143l3.547-1.864l3.548,1.864c0.18,0.095,0.381,0.143,0.576,0.143c0.256,0,0.512-0.08,0.729-0.236c0.381-0.277,0.572-0.747,0.492-1.211l-0.678-3.951l2.871-2.799c0.338-0.329,0.459-0.821,0.314-1.27C17.705,7.669,17.316,7.343,16.85,7.275z M13.336,11.754l0.787,4.591l-4.124-2.167l-4.124,2.167l0.788-4.591L3.326,8.5l4.612-0.67l2.062-4.177l2.062,4.177l4.613,0.67L13.336,11.754z"></path></svg></p>

		<p>
		<div className={this.state.gameStarted ? "game-levels-wrapper pointer-events-none":"game-levels-wrapper pointer-events-auto"}>

		<button onClick={this.easyLevel} clasName="easy-mode" value="easy" disabled={this.state.chosenLevel === "easy"}>
		<svg onClick={this.easyLevel} className="svg-icon" viewBox="0 0 20 20">
		<path fill="none" d="M18.737,9.691h-5.462c-0.279,0-0.527,0.174-0.619,0.437l-1.444,4.104L8.984,3.195c-0.059-0.29-0.307-0.506-0.603-0.523C8.09,2.657,7.814,2.838,7.721,3.12L5.568,9.668H1.244c-0.36,0-0.655,0.291-0.655,0.655c0,0.36,0.294,0.655,0.655,0.655h4.8c0.281,0,0.532-0.182,0.621-0.45l1.526-4.645l2.207,10.938c0.059,0.289,0.304,0.502,0.595,0.524c0.016,0,0.031,0,0.046,0c0.276,0,0.524-0.174,0.619-0.437L13.738,11h4.999c0.363,0,0.655-0.294,0.655-0.655C19.392,9.982,19.1,9.691,18.737,9.691z"></path></svg> Easy</button>

		<button onClick={this.mediumLevel} clasName="medium-mode" value="medium" disabled={this.state.chosenLevel === "medium"}>
		<svg onClick={this.mediumLevel} className="svg-icon" viewBox="0 0 20 20">
		<path fill="none" d="M18.737,9.691h-5.462c-0.279,0-0.527,0.174-0.619,0.437l-1.444,4.104L8.984,3.195c-0.059-0.29-0.307-0.506-0.603-0.523C8.09,2.657,7.814,2.838,7.721,3.12L5.568,9.668H1.244c-0.36,0-0.655,0.291-0.655,0.655c0,0.36,0.294,0.655,0.655,0.655h4.8c0.281,0,0.532-0.182,0.621-0.45l1.526-4.645l2.207,10.938c0.059,0.289,0.304,0.502,0.595,0.524c0.016,0,0.031,0,0.046,0c0.276,0,0.524-0.174,0.619-0.437L13.738,11h4.999c0.363,0,0.655-0.294,0.655-0.655C19.392,9.982,19.1,9.691,18.737,9.691z"></path></svg> Medium</button>

		<button onClick={this.hardLevel} clasName="hard-mode" value="hard" disabled={this.state.chosenLevel === "hard"}>
		<svg onClick={this.hardLevel} className="svg-icon" viewBox="0 0 20 20">
		<path fill="none" d="M18.737,9.691h-5.462c-0.279,0-0.527,0.174-0.619,0.437l-1.444,4.104L8.984,3.195c-0.059-0.29-0.307-0.506-0.603-0.523C8.09,2.657,7.814,2.838,7.721,3.12L5.568,9.668H1.244c-0.36,0-0.655,0.291-0.655,0.655c0,0.36,0.294,0.655,0.655,0.655h4.8c0.281,0,0.532-0.182,0.621-0.45l1.526-4.645l2.207,10.938c0.059,0.289,0.304,0.502,0.595,0.524c0.016,0,0.031,0,0.046,0c0.276,0,0.524-0.174,0.619-0.437L13.738,11h4.999c0.363,0,0.655-0.294,0.655-0.655C19.392,9.982,19.1,9.691,18.737,9.691z"></path></svg> Hard</button>

		</div>
		</p>

		</div>

		<div className="start-game-buttons-wrapper">

		<button data-tooltip="236 words" className="topic" onClick={this.animalsGame} value="animals" disabled={this.state.clickedButton === "animals"}><svg viewBox="0 0 209.582 209.582" className="topicsSvg animalsSvg">
		<path d="M166.287,87.275c-1.624-3.508-5.784-5.035-9.293-3.411c-3.508,1.624-5.036,5.785-3.411,9.293
		c9.772,21.107,7.471,47.505-6.004,68.89c-4.032,6.399-8.83,12.058-14.247,16.888c4-10.715,6.113-22.136,6.113-33.727
		c0-25.616-10.164-50.019-28.109-68.036c11.128-7.574,18.452-20.34,18.452-34.786V7c0-2.114-0.955-4.114-2.599-5.443
		c-1.643-1.329-3.798-1.845-5.866-1.402L87.736,7.342L54.148,0.155c-2.064-0.442-4.223,0.073-5.866,1.402
		C46.638,2.887,45.683,4.887,45.683,7v35.386c0,14.446,7.324,27.212,18.452,34.786c-17.945,18.017-28.109,42.42-28.109,68.036
		c0,22.598,7.979,44.569,22.466,61.869c1.33,1.588,3.295,2.505,5.367,2.505h47.752c2.071,0,4.037-0.917,5.367-2.505
		c0.721-0.861,1.413-1.741,2.101-2.624c16.469-7.115,30.395-19.152,40.344-34.941C175.402,144.154,178.032,112.643,166.287,87.275zM59.683,15.657l26.588,5.688c0.965,0.206,1.964,0.206,2.929,0l26.588-5.688v26.729c0,15.468-12.584,28.052-28.052,28.052
		S59.683,57.854,59.683,42.386V15.657zM50.026,145.208c0-23.729,10.206-46.241,28.023-61.908c3.112,0.737,6.352,1.139,9.686,1.139c3.334,0,6.574-0.402,9.686-1.139c17.817,15.668,28.023,38.179,28.023,61.908c0,18.241-6.081,36.003-17.184,50.374H94.736v-38.24c0-3.866-3.134-7-7-7s-7,3.134-7,7v38.24H67.21C56.107,181.211,50.026,163.449,50.026,145.208z" />
		<path d="M86.444,58.217c0.713,0.713,1.869,0.713,2.583,0l5.421-5.421c1.15-1.15,0.336-3.117-1.291-3.117H82.314
		c-1.627,0-2.442,1.967-1.291,3.117L86.444,58.217z" /></svg> Animals</button>

		<button  data-tooltip="180 words" className="topic" onClick={this.cssPropertiesGame} value="css" disabled={this.state.clickedButton === "css"}><svg viewBox="0 0 470.699 470.699" className="topicsSvg cssSvg">
		<path d="M426.981,0H43.701C34.52,0,27.632,7.769,28.442,16.949L63.45,409.254c0.811,9.173,8.745,18.774,17.644,21.253
		l138.006,38.335c8.887,2.463,23.413,2.479,32.313,0.032l138.177-38.281c8.901-2.472,16.835-11.986,17.645-21.175l35.023-392.469
		C443.068,7.769,436.209,0,426.981,0z M360.51,141.611c-0.006,0.06-0.053,0.107-0.112,0.117c-0.06,0.01-0.118-0.021-0.144-0.077
		L252.13,185.96c-1.54,0.631-2.418,2.264-2.098,3.897c0.322,1.633,1.754,2.811,3.419,2.811h84.103c4.474,0,8.736,1.9,11.728,5.227
		c2.991,3.327,4.429,7.768,3.954,12.216l-13.141,123.273c-0.645,6.048-4.709,11.186-10.447,13.205l-89.269,31.41
		c-3.362,1.184-7.027,1.193-10.397,0.025l-88.852-30.778c-5.773-2-9.871-7.153-10.52-13.228l-5.957-55.828
		c-0.313-2.931,0.634-5.857,2.604-8.048c1.971-2.192,4.779-3.444,7.727-3.444h24.725c5.313,0,9.769,4.007,10.331,9.289l3.655,34.316
		l61.521,21.385l61.803-21.58l7.559-71.17H129.835c-5.297,0-9.746-3.985-10.327-9.25l-3.327-30.164
		c-0.508-4.601,2.088-8.982,6.366-10.745l111.837-46.109c1.269-0.523,1.99-1.868,1.724-3.214c-0.267-1.345-1.446-2.314-2.817-2.314
		H115.542c-3.545,0-6.518-2.677-6.888-6.201l-3.406-32.421c-0.205-1.951,0.428-3.898,1.741-5.357
		c1.313-1.458,3.184-2.291,5.146-2.291h246.379c1.973,0,3.852,0.842,5.166,2.313c1.314,1.472,1.938,3.434,1.715,5.394L360.51,141.611z" /></svg> CSS Properties</button>

		<button  data-tooltip="129 words" className="topic" onClick={this.htmlElementsGame} value="html" disabled={this.state.clickedButton === "html"}><svg viewBox="0 0 456.804 456.804" className="topicsSvg htmlSvg">
		<path d="M27.405,0l36.542,410.56l163.882,46.244l165.022-46.244L429.398,0H27.405z M350.025,133.904h-192.43l4.283,51.676h183.866
		l-14.273,155.315l-102.499,28.26v0.287h-1.143l-103.356-28.547l-6.28-79.367h49.965l3.711,39.971l55.959,15.126l56.245-15.126
		l6.283-65.097H115.625l-13.418-152.46h252.392L350.025,133.904z" /></svg> HTML Elements</button>

		<button data-tooltip="10 words" className="topic" onClick={this.phrasalVerbsGame} value="phrasalVerbs" disabled={this.state.clickedButton === "phrasalVerbs"}><svg className="svg-icon phrasalVerbsSvg" viewBox="0 0 20 20">
		<path d="M8.627,7.885C8.499,8.388,7.873,8.101,8.13,8.177L4.12,7.143c-0.218-0.057-0.351-0.28-0.293-0.498c0.057-0.218,0.279-0.351,0.497-0.294l4.011,1.037C8.552,7.444,8.685,7.667,8.627,7.885 M8.334,10.123L4.323,9.086C4.105,9.031,3.883,9.162,3.826,9.38C3.769,9.598,3.901,9.82,4.12,9.877l4.01,1.037c-0.262-0.062,0.373,0.192,0.497-0.294C8.685,10.401,8.552,10.18,8.334,10.123 M7.131,12.507L4.323,11.78c-0.218-0.057-0.44,0.076-0.497,0.295c-0.057,0.218,0.075,0.439,0.293,0.495l2.809,0.726c-0.265-0.062,0.37,0.193,0.495-0.293C7.48,12.784,7.35,12.562,7.131,12.507M18.159,3.677v10.701c0,0.186-0.126,0.348-0.306,0.393l-7.755,1.948c-0.07,0.016-0.134,0.016-0.204,0l-7.748-1.948c-0.179-0.045-0.306-0.207-0.306-0.393V3.677c0-0.267,0.249-0.461,0.509-0.396l7.646,1.921l7.654-1.921C17.91,3.216,18.159,3.41,18.159,3.677 M9.589,5.939L2.656,4.203v9.857l6.933,1.737V5.939z M17.344,4.203l-6.939,1.736v9.859l6.939-1.737V4.203z M16.168,6.645c-0.058-0.218-0.279-0.351-0.498-0.294l-4.011,1.037c-0.218,0.057-0.351,0.28-0.293,0.498c0.128,0.503,0.755,0.216,0.498,0.292l4.009-1.034C16.092,7.085,16.225,6.863,16.168,6.645 M16.168,9.38c-0.058-0.218-0.279-0.349-0.498-0.294l-4.011,1.036c-0.218,0.057-0.351,0.279-0.293,0.498c0.124,0.486,0.759,0.232,0.498,0.294l4.009-1.037C16.092,9.82,16.225,9.598,16.168,9.38 M14.963,12.385c-0.055-0.219-0.276-0.35-0.495-0.294l-2.809,0.726c-0.218,0.056-0.351,0.279-0.293,0.496c0.127,0.506,0.755,0.218,0.498,0.293l2.807-0.723C14.89,12.825,15.021,12.603,14.963,12.385"></path></svg> Phrasal Verbs</button>

		</div>

	<div className="letters-wrapper"> {/* letters-wrapper */}
	<ul className="letters">
	{this.state.letters.map(function(item){  
		return (
//<li className={ this.state.matchedLetters.indexOf(item) !==-1 ? "foundedLetter":"letter"}>{item}</li>
<li className={ this.state.matchedLetters.includes(item) ? "foundedLetter":"letter"}>{item}</li>
)
	},this) 
}
</ul>
</div> {/* letters-wrapper */}

<div className="for-loader">
<div className={this.state.nextWord ? "disable":"enable"}>
<div className={this.state.gameStarted ? "pointer-events-auto":"pointer-events-none"}>
<div className="alphabet-wrapper">{/* alphabet-wrapper */}
<ul className="alphabet">
{this.state.alphabet.map(function(item){  
	return (
		<li className={this.state.clickedLetters.includes(item) ? "clickedLetter" : "alphabetLetters"} onClick={this.checkLetter.bind(this)}>{item}</li>
		)
},this) 
}
</ul>
</div> {/* alphabet-wrapper */}
</div>
</div>
<img className={this.state.nextWord ? "show-svg-loader":"hide-svg-loader"} src="data:image/svg+xml;base64,PCEtLSBCeSBTYW0gSGVyYmVydCAoQHNoZXJiKSwgZm9yIGV2ZXJ5b25lLiBNb3JlIEAgaHR0cDovL2dvby5nbC83QUp6YkwgLS0+Cjxzdmcgd2lkdGg9IjQ0IiBoZWlnaHQ9IjQ0IiB2aWV3Qm94PSIwIDAgNDQgNDQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgc3Ryb2tlPSIjZmZmIj4KICAgIDxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgc3Ryb2tlLXdpZHRoPSIyIj4KICAgICAgICA8Y2lyY2xlIGN4PSIyMiIgY3k9IjIyIiByPSIxIj4KICAgICAgICAgICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iciIKICAgICAgICAgICAgICAgIGJlZ2luPSIwcyIgZHVyPSIxLjhzIgogICAgICAgICAgICAgICAgdmFsdWVzPSIxOyAyMCIKICAgICAgICAgICAgICAgIGNhbGNNb2RlPSJzcGxpbmUiCiAgICAgICAgICAgICAgICBrZXlUaW1lcz0iMDsgMSIKICAgICAgICAgICAgICAgIGtleVNwbGluZXM9IjAuMTY1LCAwLjg0LCAwLjQ0LCAxIgogICAgICAgICAgICAgICAgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIC8+CiAgICAgICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9InN0cm9rZS1vcGFjaXR5IgogICAgICAgICAgICAgICAgYmVnaW49IjBzIiBkdXI9IjEuOHMiCiAgICAgICAgICAgICAgICB2YWx1ZXM9IjE7IDAiCiAgICAgICAgICAgICAgICBjYWxjTW9kZT0ic3BsaW5lIgogICAgICAgICAgICAgICAga2V5VGltZXM9IjA7IDEiCiAgICAgICAgICAgICAgICBrZXlTcGxpbmVzPSIwLjMsIDAuNjEsIDAuMzU1LCAxIgogICAgICAgICAgICAgICAgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIC8+CiAgICAgICAgPC9jaXJjbGU+CiAgICAgICAgPGNpcmNsZSBjeD0iMjIiIGN5PSIyMiIgcj0iMSI+CiAgICAgICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9InIiCiAgICAgICAgICAgICAgICBiZWdpbj0iLTAuOXMiIGR1cj0iMS44cyIKICAgICAgICAgICAgICAgIHZhbHVlcz0iMTsgMjAiCiAgICAgICAgICAgICAgICBjYWxjTW9kZT0ic3BsaW5lIgogICAgICAgICAgICAgICAga2V5VGltZXM9IjA7IDEiCiAgICAgICAgICAgICAgICBrZXlTcGxpbmVzPSIwLjE2NSwgMC44NCwgMC40NCwgMSIKICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPgogICAgICAgICAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJzdHJva2Utb3BhY2l0eSIKICAgICAgICAgICAgICAgIGJlZ2luPSItMC45cyIgZHVyPSIxLjhzIgogICAgICAgICAgICAgICAgdmFsdWVzPSIxOyAwIgogICAgICAgICAgICAgICAgY2FsY01vZGU9InNwbGluZSIKICAgICAgICAgICAgICAgIGtleVRpbWVzPSIwOyAxIgogICAgICAgICAgICAgICAga2V5U3BsaW5lcz0iMC4zLCAwLjYxLCAwLjM1NSwgMSIKICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPgogICAgICAgIDwvY2lyY2xlPgogICAgPC9nPgo8L3N2Zz4=" />
</div>

<div  className={this.state.gameStarted ? "lives-words-left-wrapper":"lives-words-left-wrapper displayNone"}> {/* lives-words-left-wrapper */}
<p className="lives"><svg className="svg-icon" viewBox="0 0 20 20">
<path fill="none" d="M13.22,2.984c-1.125,0-2.504,0.377-3.53,1.182C8.756,3.441,7.502,2.984,6.28,2.984c-2.6,0-4.714,2.116-4.714,4.716c0,0.32,0.032,0.644,0.098,0.96c0.799,4.202,6.781,7.792,7.46,8.188c0.193,0.111,0.41,0.168,0.627,0.168c0.187,0,0.376-0.041,0.55-0.127c0.011-0.006,1.349-0.689,2.91-1.865c0.021-0.016,0.043-0.031,0.061-0.043c0.021-0.016,0.045-0.033,0.064-0.053c3.012-2.309,4.6-4.805,4.6-7.229C17.935,5.1,15.819,2.984,13.22,2.984z M12.544,13.966c-0.004,0.004-0.018,0.014-0.021,0.018s-0.018,0.012-0.023,0.016c-1.423,1.076-2.674,1.734-2.749,1.771c0,0-6.146-3.576-6.866-7.363C2.837,8.178,2.811,7.942,2.811,7.7c0-1.917,1.554-3.47,3.469-3.47c1.302,0,2.836,0.736,3.431,1.794c0.577-1.121,2.161-1.794,3.509-1.794c1.914,0,3.469,1.553,3.469,3.47C16.688,10.249,14.474,12.495,12.544,13.966z"></path>
</svg> Your lives: {this.state.lives}</p>

<p className="words-left"><svg className="svg-icon" viewBox="0 0 20 20">
<path fill="none" d="M11.015,11.009l5.063,1.191c0.288,0.068,0.579-0.088,0.682-0.364c0.35-0.931,0.528-1.909,0.528-2.91c0-4.559-3.71-8.269-8.27-8.269c-4.559,0-8.269,3.71-8.269,8.269c0,4.56,3.71,8.27,8.269,8.27c0.891,0,1.768-0.144,2.605-0.426c0.279-0.094,0.445-0.38,0.389-0.668L11.015,11.009z M9.018,16.024c-3.914,0-7.097-3.185-7.097-7.099s3.184-7.097,7.097-7.097s7.098,3.184,7.098,7.097c0,0.686-0.097,1.36-0.291,2.012l-5.427-1.276c-0.192-0.046-0.397,0.01-0.54,0.147c-0.144,0.138-0.207,0.339-0.169,0.534l1.07,5.461C10.193,15.951,9.61,16.024,9.018,16.024z"></path>
<path fill="none" d="M19.183,13.897c-0.08-0.149-0.22-0.256-0.384-0.295l-5.945-1.398c-0.191-0.046-0.397,0.01-0.54,0.147c-0.143,0.138-0.207,0.34-0.168,0.534l1.171,5.985c0.032,0.165,0.135,0.309,0.281,0.394c0.089,0.052,0.191,0.079,0.293,0.079c0.064,0,0.127-0.01,0.188-0.031c0.154-0.052,3.75-1.311,5.134-4.931C19.272,14.223,19.261,14.046,19.183,13.897z M14.325,17.928l-0.857-4.377l4.375,1.029C16.896,16.443,15.229,17.48,14.325,17.928z"></path>
</svg> Words left: {this.state.words.length}</p>

<p className="score"><svg className="svg-icon" viewBox="0 0 20 20">
<path d="M18.303,4.742l-1.454-1.455c-0.171-0.171-0.475-0.171-0.646,0l-3.061,3.064H2.019c-0.251,0-0.457,0.205-0.457,0.456v9.578c0,0.251,0.206,0.456,0.457,0.456h13.683c0.252,0,0.457-0.205,0.457-0.456V7.533l2.144-2.146C18.481,5.208,18.483,4.917,18.303,4.742 M15.258,15.929H2.476V7.263h9.754L9.695,9.792c-0.057,0.057-0.101,0.13-0.119,0.212L9.18,11.36h-3.98c-0.251,0-0.457,0.205-0.457,0.456c0,0.253,0.205,0.456,0.457,0.456h4.336c0.023,0,0.899,0.02,1.498-0.127c0.312-0.077,0.55-0.137,0.55-0.137c0.08-0.018,0.155-0.059,0.212-0.118l3.463-3.443V15.929z M11.241,11.156l-1.078,0.267l0.267-1.076l6.097-6.091l0.808,0.808L11.241,11.156z"></path>
</svg> Score: {this.state.score}</p>

</div> {/* lives-words-left-wrapper */}

</section>

<div className={this.state.gameOver ? "modal":"modal modalHide"}>
<p className="close-modal" onClick={this.closeModal}>X</p>
<section>
<h3><svg className="svg-icon gameOverSvg" viewBox="0 0 20 20">
<path fill="none" d="M18.616,7.04h-0.638V5.305c0-0.448-0.362-0.813-0.813-0.813H1.407c-0.451,0-0.813,0.365-0.813,0.813v9.39c0,0.449,0.362,0.813,0.813,0.813h15.759c0.451,0,0.813-0.364,0.813-0.813v-1.667h0.638c0.451,0,0.813-0.362,0.813-0.813V7.852C19.429,7.403,19.067,7.04,18.616,7.04z M16.353,13.883H2.22V6.117h14.133v1.735v4.364V13.883z"></path>
</svg> GAME OVER! <svg className="svg-icon gameOverSvg" viewBox="0 0 20 20">
<path fill="none" d="M18.616,7.04h-0.638V5.305c0-0.448-0.362-0.813-0.813-0.813H1.407c-0.451,0-0.813,0.365-0.813,0.813v9.39c0,0.449,0.362,0.813,0.813,0.813h15.759c0.451,0,0.813-0.364,0.813-0.813v-1.667h0.638c0.451,0,0.813-0.362,0.813-0.813V7.852C19.429,7.403,19.067,7.04,18.616,7.04z M16.353,13.883H2.22V6.117h14.133v1.735v4.364V13.883z"></path>
</svg></h3>
<p><svg className="svg-icon totalScoreSvg" viewBox="0 0 20 20">
<path fill="none" d="M6.506,6.98c-0.469,0-0.85,0.381-0.85,0.85s0.381,0.85,0.85,0.85s0.85-0.381,0.85-0.85S6.975,6.98,6.506,6.98z
M18.684,4.148h-3.398V0.75H5.656v3.398H1.691c-0.313,0-0.566,0.253-0.566,0.566V14.91c0,0.312,0.253,0.566,0.566,0.566h3.965
v3.398h9.629v-3.398h3.398c0.313,0,0.566-0.254,0.566-0.566V4.714C19.25,4.401,18.997,4.148,18.684,4.148z M6.789,1.882h7.363
v2.266H6.789V1.882z M14.152,17.742H6.789v-5.664h7.363V17.742z M18.117,13.777c0,0.312-0.254,0.566-0.566,0.566h-2.266v-3.399
H5.656v3.399H2.824c-0.313,0-0.566-0.254-0.566-0.566v-7.93c0-0.313,0.253-0.566,0.566-0.566h14.727
c0.312,0,0.566,0.253,0.566,0.566V13.777z M3.674,6.98c-0.469,0-0.85,0.381-0.85,0.85s0.381,0.85,0.85,0.85s0.85-0.381,0.85-0.85
S4.143,6.98,3.674,6.98z"></path>
</svg> Your score is {this.state.score}. <svg className="svg-icon totalScoreSvg" viewBox="0 0 20 20">
<path fill="none" d="M6.506,6.98c-0.469,0-0.85,0.381-0.85,0.85s0.381,0.85,0.85,0.85s0.85-0.381,0.85-0.85S6.975,6.98,6.506,6.98z
M18.684,4.148h-3.398V0.75H5.656v3.398H1.691c-0.313,0-0.566,0.253-0.566,0.566V14.91c0,0.312,0.253,0.566,0.566,0.566h3.965
v3.398h9.629v-3.398h3.398c0.313,0,0.566-0.254,0.566-0.566V4.714C19.25,4.401,18.997,4.148,18.684,4.148z M6.789,1.882h7.363
v2.266H6.789V1.882z M14.152,17.742H6.789v-5.664h7.363V17.742z M18.117,13.777c0,0.312-0.254,0.566-0.566,0.566h-2.266v-3.399
H5.656v3.399H2.824c-0.313,0-0.566-0.254-0.566-0.566v-7.93c0-0.313,0.253-0.566,0.566-0.566h14.727
c0.312,0,0.566,0.253,0.566,0.566V13.777z M3.674,6.98c-0.469,0-0.85,0.381-0.85,0.85s0.381,0.85,0.85,0.85s0.85-0.381,0.85-0.85
S4.143,6.98,3.674,6.98z"></path>
</svg></p>
</section>
</div>

<footer>
<p className="copyright">© 2017 <a href="https://mburakerman.github.io/" target="_blank" rel="external">Mehmet Burak Erman</a></p>
<p className="built-with">Built with <span className="heart">❤</span> <img className="react-logo" src={'data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTYgMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS1taXRlcmxpbWl0PSIxLjQxNCIgZmlsbD0iIzAwRDhGRiI+PHBhdGggZD0iTTguMDA3IDIuNjVsLjAwNy0uMDA4Yy4zMzMtLjMyLjY4NS0uNjIgMS4wNjItLjg4Ny4xNDgtLjEwNS4zLS4yMDUuNDU3LS4zLjEzNi0uMDguMjc1LS4xNTUuNDE3LS4yMjQuMTEtLjA1LjIyLS4xLjMzMy0uMTQ0LjEtLjA0LjIwNS0uMDc0LjMxLS4xMDMuMTYtLjA0NS4zMjItLjA3OC40ODctLjA5M2wuMTA1LS4wMDZoLjA3N2MuMDQ3IDAgLjA5NCAwIC4xNC4wMDUuMS4wMDcuMi4wMjUuMjk3LjA1My4wODQuMDI1LjE2Ny4wNTguMjQ2LjEuMDUuMDI1LjA5Ni4wNTUuMTQuMDg3LjA3OC4wNTUuMTUuMTE4LjIxMy4xODcuMDU3LjA2My4xMS4xMy4xNTcuMi4xMDIuMTU0LjE4LjMyMy4yNC40OTYuMDE4LjA1LjAzNS4xMDIuMDUuMTU0LjAyLjA2Ny4wMzYuMTM2LjA1LjIwNS4wMi4wODguMDM2LjE3Ni4wNS4yNjQuMDE2LjExLjAyNy4yMi4wMzUuMzMyLjAxLjE0Ny4wMTYuMjk1LjAxNS40NDMgMCAuMTkzLS4wMS4zODQtLjAyOC41NzQtLjAyMi4yMzQtLjA1My40NjctLjA5My42OTgtLjAyNC4xNC0uMDUyLjI3OC0uMDgyLjQxNy0uMDE3LjA3Ny0uMDM1LjE1Ni0uMDU1LjIzNGwuMTMuMDM4Yy4yNC4wNzMuNDc4LjE1My43MS4yNDMuMTg4LjA3My4zNzIuMTUuNTUzLjIzNy4xNjMuMDc3LjMyMi4xNi40NzguMjUuMTY4LjA5OC4zMy4yMDMuNDg1LjMxOC4xMzMuMDk4LjI2LjIwNS4zOC4zMi4wOS4wODguMTc0LjE4LjI1Mi4yOC4wNjQuMDgzLjEyNC4xNy4xNzUuMjYyLjA3LjEyNS4xMjYuMjU4LjE2LjM5Ny4wMi4wODUuMDM0LjE3NC4wMzcuMjYzIDAgLjA1NSAwIC4xMS0uMDA2LjE2Ni0uMDEuMDkzLS4wMy4xODYtLjA1Ny4yNzYtLjAyNi4wODYtLjA2LjE3LS4xLjI1LS4wODguMTcyLS4yMDMuMzMtLjMzMi40NzYtLjA0LjA0NC0uMDguMDg3LS4xMjIuMTI4LS4wNTQuMDU1LS4xMS4xMDctLjE2OC4xNTctLjA3Mi4wNjMtLjE0OC4xMjQtLjIyNC4xODItLjEuMDc0LS4yMDIuMTQ1LS4zMDcuMjEyLS4xMzIuMDg1LS4yNy4xNjUtLjQwNy4yNC0uMTczLjA5LS4zNS4xNzYtLjUzLjI1NC0uMTc4LjA4LS4zNi4xNS0uNTQ1LjIxNy0uMTU1LjA1Ni0uMzEzLjEwOC0uNDcyLjE1NmwtLjA1My4wMTVjLjAyLjA4LjA0LjE2LjA1Ny4yNC4wMjYuMTIuMDUuMjM3LjA3LjM1Ni4wNDQuMjQyLjA3Ny40ODUuMDk4LjczLjAxNi4xODcuMDI1LjM3NS4wMjYuNTY0IDAgLjE0Ni0uMDA1LjI5Mi0uMDE2LjQzOC0uMDEuMTE1LS4wMjIuMjMtLjA0LjM0NC0uMDE0LjA5My0uMDMuMTg1LS4wNTIuMjc3LS4wMTcuMDcyLS4wMzYuMTQ1LS4wNTcuMjE2LS4wMzcuMTI1LS4wODMuMjUtLjE0LjM3LS4wNDUuMDk1LS4wOTguMTg4LS4xNTguMjc3LS4wNi4wODgtLjEzLjE3LS4yMDYuMjQ2LS4wODcuMDg1LS4xODUuMTU4LS4yOTIuMjE2LS4wOC4wNDItLjE2My4wNzYtLjI1LjEwMi0uMTM0LjA0LS4yNzUuMDYtLjQxNS4wNjQtLjE5LjAwNi0uMzgtLjAxOC0uNTY2LS4wNi0uMTE3LS4wMjctLjIzLS4wNi0uMzQ0LS4xLS4xMjYtLjA0My0uMjUtLjA5NC0uMzctLjE1LS4xNDYtLjA2Ni0uMjg4LS4xNC0uNDI2LS4yMi0uMTYtLjA5My0uMzE2LS4xOTMtLjQ2OC0uMy0uMzktLjI3LS43NTQtLjU4LTEuMDk2LS45MWwtLjA3Ny4wNzJjLS4xNTYuMTQ4LS4zMTguMjktLjQ4NS40MjctLjE2Ny4xMzctLjM0LjI2Ny0uNTE3LjM5LS4xNTguMTEtLjMyMi4yMTMtLjQ5LjMxLS4xNi4wOS0uMzI1LjE3My0uNDkzLjI0Ny0uMTE4LjA1LS4yMzcuMDk3LS4zNTguMTM3LS4xMTUuMDM3LS4yMy4wNy0uMzQ3LjA5NC0uMTg1LjA0LS4zNzMuMDYyLS41NjIuMDU2LS4xNDctLjAwNC0uMjk1LS4wMjUtLjQzNy0uMDctLjA5LS4wMjYtLjE3NC0uMDYyLS4yNTUtLjEwNy0uMDU2LS4wMy0uMTEtLjA2Ni0uMTYtLjEwNC0uMDM1LS4wMy0uMDctLjA1OC0uMS0uMDktLjAyNS0uMDItLjA0OC0uMDQ1LS4wNy0uMDctLjE0LS4xNDgtLjI0NS0uMzI0LS4zMjYtLjUxbC0uMDM2LS4wODdjLS4wMTUtLjAzOC0uMDMtLjA3Ni0uMDQyLS4xMTQtLjAxNy0uMDU0LS4wMzQtLjEwOC0uMDQ4LS4xNi0uMDE4LS4wNjYtLjAzNC0uMTMyLS4wNDctLjE5Ny0uMDItLjA5LS4wMzUtLjE3OC0uMDQ3LS4yNjctLjAxNS0uMTE1LS4wMjYtLjIzLS4wMzMtLjM0Ny0uMDA4LS4xNDgtLjAxLS4yOTUtLjAwNy0uNDQuMDA0LS4xOS4wMTYtLjM3OC4wMzYtLjU2NS4wMjMtLjIzNS4wNi0uNDcuMTAzLS43MDMuMDM2LS4xOS4wNzgtLjM4Mi4xMjUtLjU3bC0uMi0uMDZjLS4yNC0uMDc1LS40NzUtLjE2LS43MDYtLjI1My0uMTYtLjA2Ni0uMzE3LS4xMzYtLjQ3Mi0uMjEyLS4xNDUtLjA3LS4yODgtLjE0Ny0uNDI4LS4yMy0uMTc0LS4xLS4zNDItLjIxLS41MDMtLjMzQy45MSA5LjUyMy43NzcgOS40MS42NTQgOS4yOS41NjIgOS4yLjQ3NSA5LjEwNC4zOTUgOWMtLjA3LS4wOS0uMTM0LS4xODMtLjE5LS4yODItLjA1LS4wOS0uMDkzLS4xODYtLjEyNy0uMjg0LS4wMTUtLjA0NC0uMDMtLjA5LS4wNC0uMTM0Qy4wMTYgOC4yMDguMDAzIDguMTEzIDAgOC4wMThjMC0uMDYuMDAyLS4xMi4wMDgtLjE3OC4wMDYtLjA0NC4wMTMtLjA5LjAyMy0uMTMzTC4wNiA3LjZjLjA2NC0uMjEuMTc1LS40MDYuMzEtLjU4LjAxOC0uMDI2LjAzNy0uMDUuMDU3LS4wNzQuMDI2LS4wMzIuMDUzLS4wNjMuMDgtLjA5My4wMzgtLjA0Mi4wNzctLjA4Mi4xMTgtLjEyMi4wNTUtLjA1My4xMTItLjEwNS4xNy0uMTU2LjA3NS0uMDYzLjE1LS4xMjIuMjI4LS4xOC4xLS4wNzMuMjA0LS4xNDMuMzEtLjIwOC4xMy0uMDgzLjI2Ni0uMTYuNDA0LS4yMy4xNzYtLjA5My4zNTYtLjE3Ni41NC0uMjUzLjMzLS4xNC42NjgtLjI1NSAxLjAxMi0uMzU1bC4wODItLjAyNGMtLjA1Mi0uMjEtLjEtLjQyLS4xMzgtLjYzMi0uMDQyLS4yMjctLjA3NS0uNDU2LS4wOTgtLjY4Ni0uMDItLjE4Mi0uMDMtLjM2Ni0uMDM1LS41NS0uMDAzLS4xNDcgMC0uMjk2LjAwNy0uNDQzLjAwNi0uMTEzLjAxNi0uMjI1LjAzLS4zMzYuMDEyLS4wOS4wMjctLjE4LjA0NS0uMjcuMDEzLS4wNzIuMDMtLjE0Mi4wNS0uMjEzLjAxNC0uMDU0LjAzLS4xMDguMDQ4LS4xNmwuMDM3LS4xMDRjLjAxLS4wMy4wMjMtLjA2LjAzNi0uMDg4LjA4LS4xODQuMTg1LS4zNi4zMi0uNTA4LjAzMi0uMDM0LjA2NS0uMDY2LjEtLjA5Ni4wMy0uMDI4LjA2Mi0uMDU0LjA5NS0uMDguMDQ2LS4wMzIuMDkzLS4wNjIuMTQzLS4wOS4wOC0uMDQ0LjE2Ny0uMDguMjU1LS4xMDUuMDk2LS4wMy4xOTQtLjA0Ny4yOTQtLjA1NkM0LjU4Ny45MDQgNC42Mi45IDQuNjUuOWguMDUzYy4wMTMtLjAwMi4wMjctLjAwMi4wNC0uMDAyaC4wNTRsLjExLjAwOGMuMTYzLjAxNC4zMjQuMDQ1LjQ4LjA4OC4xMDYuMDI4LjIxLjA2Mi4zMS4xLjExLjA0LjIxNS4wODUuMzIuMTM0LjE2LjA3NS4zMTYuMTU4LjQ2OC4yNDguMTY2LjA5Ny4zMjYuMi40ODMuMzEyLjE4Ni4xMy4zNjcuMjcuNTQyLjQxNy4xNC4xMTYuMjc2LjIzNi40MS4zNmwuMDg3LjA4NHptNC4wMDcgOC4xOThjLS4xMTcuMDI3LS4yMzUuMDUzLS4zNTMuMDc2LS4yNy4wNTUtLjU0Mi4xMDItLjgxNS4xNDItLjI5My4wNDItLjU4Ni4wNzctLjg4LjEwNS0uMDQuMDA1LS4wOC4wMS0uMTE4LjAxMi0uMTg2LjI3LS4zOC41MzQtLjU3OC43OTItLjIxNC4yNzUtLjQzNC41NDMtLjY2NS44LS4wMzMuMDM4LS4wNjYuMDc1LS4xLjExLjI5Ni4yODYuNjEuNTU0Ljk0My43OTMuMTM3LjA5OC4yNzcuMTkuNDIyLjI3OC4xMi4wNzIuMjQ2LjE0LjM3NC4yMDIuMTEuMDUyLjIyLjEuMzM2LjE0Mi4wOS4wMy4xOC4wNi4yNzQuMDgyLjA3OC4wMi4xNTcuMDM0LjIzNi4wNDIuMDY2LjAwOC4xMzIuMDEuMTk4LjAxLjEwMi0uMDA1LjIwNS0uMDIuMy0uMDYuMDI2LS4wMTMuMDUzLS4wMjYuMDc4LS4wNC4wNTctLjAzNi4xMDgtLjA4LjE1Mi0uMTMuMDYyLS4wNy4xMTItLjE0OC4xNTUtLjIzLjAxNS0uMDI3LjAzLS4wNTUuMDQyLS4wODQuMDE4LS4wNC4wMzQtLjA4LjA1LS4xMjMuMDItLjA1Mi4wMzYtLjEwNS4wNS0uMTU4LjAyLS4wNjcuMDM2LS4xMzQuMDUtLjIuMDItLjA5Mi4wMzMtLjE4My4wNDUtLjI3Ni4wMTItLjA5NS4wMi0uMTkyLjAyNS0uMjg4LjAxMi0uMjIyLjAwOC0uNDQ0LS4wMDctLjY2Ni0uMDE0LS4yMTMtLjA0LS40MjUtLjA3My0uNjM2LS4wMjgtLjE3Ny0uMDYyLS4zNTMtLjEtLjUyOGwtLjA0LS4xNjh6bS03Ljk5My4wM2MtLjAyMy4wOTctLjA0Ni4xOTQtLjA2Ny4yOS0uMDcyLjMzMi0uMTI3LjY2OC0uMTU2IDEuMDA3LS4wMi4yMjQtLjAyNy40NS0uMDIuNjc0LjAwNC4wOTYuMDEuMTk0LjAyLjI5LjAxLjA5LjAyMy4xNzcuMDQuMjY1LjAxLjA2NC4wMjYuMTMuMDQyLjE5Mi4wMTMuMDUyLjAyOC4xMDMuMDQ1LjE1My4wMTQuMDQuMDMuMDguMDQ2LjEybC4wNDMuMDljLjAxLjAyMy4wMjMuMDQ1LjAzNi4wNjcuMDA4LjAxNi4wMTguMDMyLjAyOC4wNDhsLjAyNi4wMzhjLjA1Ni4wOC4xMjQuMTUzLjIwNy4yMDZsLjA1OC4wM2MuMDQ2LjAyMy4wOTUuMDQuMTQ1LjA1Mi4wNjUuMDE1LjEzMi4wMjMuMTk4LjAyNS4wNjguMDAyLjEzNiAwIC4yMDItLjAwOC4wOC0uMDEuMTYtLjAyNC4yNC0uMDQyLjA5NC0uMDIuMTg3LS4wNS4yNzgtLjA4LjEwNy0uMDM3LjIxMi0uMDguMzE1LS4xMjYuMTQzLS4wNjUuMjgzLS4xMzguNDItLjIxNy4xNS0uMDg3LjI5OC0uMTgzLjQ0Mi0uMjgzLjE1Mi0uMTA3LjMtLjIyLjQ0My0uMzM4LjA4Ny0uMDcuMTcyLS4xNDQuMjU1LS4yMTguMDczLS4wNjUuMTQ0LS4xMy4yMTUtLjE5OGwuMDMtLjAzLS4xNzQtLjE5Yy0uMjMzLS4yNi0uNDU2LS41MjgtLjY3LS44LS4xODMtLjIzMi0uMzYtLjQ2OC0uNTMtLjcwNy0uMDIgMC0uMDQtLjAwMy0uMDYtLjAwNC0uMzEtLjAyNi0uNjE3LS4wNi0uOTI0LS4xLS4yOC0uMDQtLjU2LS4wODUtLjgzOC0uMTM4LS4xMS0uMDIyLS4yMjItLjA0NS0uMzMzLS4wN3ptNC45NDYuMzYyYy0uMzA3LjAxNC0uNjE1LjAyLS45MjMuMDIyLS4yOTMgMC0uNTg2LS4wMDQtLjg4LS4wMTVsLS4xLS4wMDMuMjA0LjI2MmMuMTk0LjI0Ni4zOTYuNDg2LjYwNS43Mi4wNS4wNTcuMTAyLjExNC4xNTUuMTdsLjA4LS4wOWMuMjEyLS4yMzcuNDE0LS40ODMuNjEtLjczNS4wODQtLjEwOC4xNjctLjIxOC4yNS0uMzN6bS40OTQtNS43NjJjLS4zMTgtLjAyNC0uNjM3LS4wNC0uOTU1LS4wNDgtLjE1NC0uMDA0LS4zMDctLjAwNi0uNDYtLjAwN2gtLjA2N2MtLjE0OCAwLS4yOTYuMDAyLS40NDQuMDA2LS4zMy4wMDctLjY2LjAyMy0uOTkuMDQ4LS4xOTMuMjgtLjM3Ny41NjctLjU1My44NTctLjIuMzMzLS4zOTQuNjczLS41NzYgMS4wMTctLjExMy4yMTUtLjIyMi40MzItLjMyOC42NS4xMTYuMjQyLjIzOC40OC4zNjQuNzE2LjE4Ny4zNS4zODQuNjk0LjU5MiAxLjAzLjE2NC4yNjYuMzMzLjUyOC41MS43ODUuMTk3LjAxMi4zOTYuMDIyLjU5NC4wMy4yODUuMDEuNTcuMDE1Ljg1NC4wMTUuNDkgMCAuOTc4LS4wMTYgMS40NjUtLjA1LjE2Ny0uMjUuMzI4LS41MDQuNDg0LS43Ni4zNS0uNTc2LjY3Ni0xLjE2OC45Ny0xLjc3NS0uMS0uMjA1LS4yMDYtLjQxLS4zMTUtLjYxLS4xNC0uMjY0LS4yODctLjUyNS0uNDM4LS43ODItLjIxMi0uMzYtLjQzNS0uNzE2LS42NjgtMS4wNjRsLS4wNC0uMDU4em0tNC43MzYgMy4zM2MtLjA3Ny4xOC0uMTUuMzY2LS4yMi41NS0uMTEuMjg1LS4yMS41NzItLjMuODYuMTcyLjA0LjM0NC4wNzIuNTE2LjEwMi4yNS4wNDQuNTA0LjA4Ljc1Ny4xMTIuMDY4LjAxLjEzNS4wMTcuMjAzLjAyNC0uMTEyLS4xNzMtLjIyLS4zNDgtLjMyNy0uNTI0LS4yMi0uMzY4LS40My0uNzQ0LS42My0xLjEyNXptNi41NjUtLjAyNmMtLjEwMy4xOTctLjIwOC4zOS0uMzE2LjU4NS0uMTIuMjE2LS4yNDUuNDMtLjM3My42NDQtLjA4Ny4xNDYtLjE3Ni4yOS0uMjY2LjQzNGwuMTQ4LS4wMThjLjI0OC0uMDMyLjQ5NS0uMDcuNzQtLjExNC4yMDMtLjAzNi40MDQtLjA3Ny42MDQtLjEyMi0uMDg3LS4yNzQtLjE4NC0uNTQ1LS4yOS0uODEyLS4wNzgtLjItLjE2LS40LS4yNDctLjU5NnptLTcuNzQtMi44Yy0uMDczLjAyLS4xNDYuMDQzLS4yMi4wNjYtLjI0Ni4wNzUtLjQ5LjE2LS43MjcuMjU4LS4xNDMuMDU4LS4yODQuMTItLjQyMy4xOS0uMTUuMDczLS4yOTcuMTUyLS40NC4yNC0uMTI1LjA3NS0uMjQ4LjE1OC0uMzY1LjI0OC0uMDg3LjA2Ni0uMTcuMTM2LS4yNS4yMTItLjA2NS4wNjMtLjEyOC4xMy0uMTg2LjItLjA0NS4wNTUtLjA4Ni4xMS0uMTIyLjE3LS4wMy4wNS0uMDU2LjEtLjA3Ny4xNTQtLjAzLjA3My0uMDUuMTUtLjA1NS4yMy0uMDAyLjAyLS4wMDIuMDQgMCAuMDYuMDAzLjA4OC4wMjYuMTc2LjA2LjI1N2wuMDIuMDQzLjAyNS4wNTIuMDQuMDdjLjAxNy4wMjguMDM2LjA1Ny4wNTYuMDg1LjAyNC4wMzMuMDQ4LjA2NS4wNzQuMDk2LjAzMi4wNC4wNjYuMDc4LjEuMTE1LjA0NC4wNDYuMDkuMDkuMTM2LjEzNC4wNTMuMDUuMTEuMDk3LjE2Ni4xNDMuMDc2LjA2LjE1Ni4xMi4yMzcuMTc2LjEuMDcuMjA0LjEzNS4zMS4xOTcuMTM2LjA4LjI3Ni4xNTIuNDE3LjIyLjE3Mi4wODIuMzQ3LjE1Ny41MjUuMjI1LjE1Mi4wNTguMzA2LjExMy40Ni4xNjJsLjIzLjA3Yy4wNjQtLjIxMi4xMzQtLjQyLjIwOC0uNjMuMTI0LS4zNDguMjYtLjY5My40MDgtMS4wMzMuMDU2LS4xMy4xMTQtLjI1OC4xNzMtLjM4Ny0uMDU3LS4xMjUtLjExMy0uMjUyLS4xNjgtLjM3OC0uMTUtLjM0Ny0uMjktLjY5OC0uNDE2LTEuMDU0LS4wNy0uMTk0LS4xMzQtLjM5LS4xOTUtLjU4OHptOC45MDcuMDFjLS4wNTMuMTcyLS4xMS4zNDMtLjE3LjUxMy0uMTI2LjM1OC0uMjY3LjcxMi0uNDE4IDEuMDZsLS4xOS40MjVjLjA4LjE3Mi4xNi4zNDYuMjM2LjUyLjE0My4zMjUuMjc2LjY1NC4zOTYuOTg3LjA2My4xNzIuMTIyLjM0Ni4xNzcuNTJsLjExNy0uMDM2Yy4xMzUtLjA0LjI2OC0uMDg2LjQtLjEzNC4yNjUtLjA5Ny41MjUtLjIwNi43NzgtLjMzLjE1NC0uMDc3LjMwNC0uMTYuNDUtLjI1LjEyNi0uMDc3LjI1LS4xNi4zNjYtLjI1LjA4Ny0uMDY1LjE3LS4xMzUuMjUtLjIxLjA3LS4wNjcuMTM4LS4xMzguMi0uMjE0LjA0Ni0uMDU1LjA4OC0uMTEzLjEyNS0uMTc0LjAzLS4wNS4wNTgtLjEwMi4wOC0uMTU2LjAzMy0uMDc2LjA1NS0uMTU3LjA2LS4yNC4wMDItLjAyMy4wMDItLjA0NiAwLS4wNy0uMDAzLS4wNTQtLjAxNC0uMTA4LS4wMy0uMTYtLjAyMy0uMDctLjA1NS0uMTM0LS4wOS0uMTk3bC0uMDM3LS4wNTgtLjA1My0uMDc0Yy0uMDI0LS4wMzItLjA1LS4wNjItLjA3NC0uMDkyLS4wMy0uMDM3LS4wNjUtLjA3My0uMS0uMTA4LS4wNDQtLjA0NC0uMDktLjA4Ni0uMTM1LS4xMjctLjA2LS4wNTItLjEyMi0uMTAzLS4xODYtLjE1LS4wNzUtLjA1Ni0uMTUtLjExLS4yMjctLjE2LS4xLS4wNjQtLjIwNC0uMTI2LS4zMS0uMTg0LS4xMzQtLjA3NC0uMjctLjE0Mi0uNDEtLjIwNy0uMTY0LS4wNzUtLjMzLS4xNDMtLjQ5OC0uMjA3LS4yMzItLjA4Ny0uNDctLjE2NC0uNzA4LS4yMzN6TTggNi41NmMuNzkgMCAxLjQzLjY0IDEuNDMgMS40MyAwIC43ODctLjY0IDEuNDI3LTEuNDMgMS40MjctLjc5IDAtMS40My0uNjQtMS40My0xLjQyOCAwLS43OS42NC0xLjQzIDEuNDMtMS40M3ptMi4zMzYtLjk5Yy4xNzYuMjc0LjM0NS41NTQuNTA4LjgzNy4xNS4yNjIuMjk4LjUyNy40NC43OTUuMDg1LS4yMDIuMTY3LS40MDYuMjQ1LS42MTIuMDk1LS4yNTMuMTg0LS41MDguMjY1LS43NjYtLjE3LS4wNC0uMzQyLS4wNzUtLjUxNC0uMTA3LS4zMTMtLjA2LS42MjgtLjEwOC0uOTQ0LS4xNDh6bS00LjY3LS4wMDNjLS4xNDUuMDE4LS4yODguMDM4LS40MzIuMDYtLjI0NS4wMzctLjQ5LjA4LS43MzMuMTMtLjA5NS4wMTgtLjE5LjAzOC0uMjg1LjA2LjA4NS4yNzUuMTguNTQ4LjI4Mi44MTcuMDcyLjE5LjE0Ny4zOC4yMjYuNTY3LjE4LS4zNDguMzY4LS42OS41NjctMS4wMjUuMTIyLS4yMDUuMjQ3LS40MS4zNzUtLjYxem02LjMxMy0uNDAybC4wMy0uMTMzYy4wNC0uMTc0LjA3NC0uMzQ4LjEwMy0uNTI0LjAzOC0uMjI4LjA2Ny0uNDYuMDg0LS42OS4wMTYtLjIyNS4wMjItLjQ1Mi4wMS0uNjc4LS4wMDQtLjEwMi0uMDEyLS4yMDUtLjAyNC0uMzA2LS4wMS0uMDktLjAyNC0uMTc3LS4wNDItLjI2NC0uMDEzLS4wNjgtLjAzLS4xMzUtLjA0Ny0uMi0uMDE0LS4wNS0uMDMtLjEtLjA0OC0uMTVMMTIgMi4xMDRsLS4wMzctLjA3OGMtLjAxMy0uMDI0LS4wMjUtLjA0OC0uMDQtLjA3LS4wMS0uMDItLjAyMi0uMDQtLjAzNS0uMDU4LS4wMS0uMDEzLS4wMTgtLjAyNy0uMDI3LS4wNC0uMDU4LS4wOC0uMTMtLjE1LS4yMTUtLjItLjAyNy0uMDE3LS4wNTUtLjAzLS4wODQtLjA0LS4wNzMtLjAzLS4xNS0uMDQ0LS4yMy0uMDUtLjAyIDAtLjA0MiAwLS4wNjMtLjAwMmgtLjAyNGMtLjAyMyAwLS4wNDYgMC0uMDcuMDAzLS4wNjIuMDAzLS4xMjQuMDEtLjE4Ni4wMjItLjA3NC4wMTMtLjE0Ny4wMy0uMjIuMDUtLjA5Mi4wMjgtLjE4NC4wNi0uMjc0LjA5Ni0uMTA1LjA0Mi0uMjA4LjA5LS4zMS4xNC0uMTMuMDY2LS4yNTcuMTM4LS4zOC4yMTUtLjEzOC4wODUtLjI3Mi4xNzUtLjQwMi4yNy0uMzIyLjIzNS0uNjI2LjQ5Ny0uOTEzLjc3NGwuMTM0LjE0N2MuMjU1LjI4Mi40OTcuNTc1LjczLjg3NS4xNjguMjE3LjMzLjQ0LjQ5LjY2NS4xMzYuMDEyLjI3Mi4wMjcuNDEuMDQzLjMuMDM1LjYuMDc4LjkuMTMuMjc4LjA0Ny41NTQuMS44My4xNjV6TTcuNTMgMy4xMzdjLS4wMTUtLjAxMy0uMDMtLjAyNi0uMDQzLS4wNC0uMTMtLjEyLS4yNjItLjI0LS40LS4zNTQtLjE1LS4xMjctLjMwNy0uMjUtLjQ2OC0uMzY1LS4xNDMtLjEwMi0uMjktLjE5OC0uNDQtLjI4OC0uMTMtLjA3OC0uMjYyLS4xNS0uNC0uMjE3LS4wOTYtLjA0Ny0uMTk1LS4wOS0uMjk2LS4xMy0uMDktLjAzNC0uMTgzLS4wNjQtLjI3Ni0uMDktLjA3LS4wMi0uMTM4LS4wMzQtLjIwOC0uMDQ3LS4wNjItLjAxLS4xMjUtLjAxOC0uMTg4LS4wMjJsLS4wNzMtLjAwMkg0LjcyYy0uMDIgMC0uMDQgMC0uMDYuMDAyLS4wOTYuMDA1LS4xOTMuMDIzLS4yODIuMDYyLS4wMy4wMTMtLjA1Ny4wMjgtLjA4NC4wNDYtLjA1Ni4wMzctLjEwNS4wODQtLjE0OC4xMzUtLjA1OC4wNy0uMTA0LjE0Ny0uMTQzLjIyOGwtLjAzOC4wODRjLS4wMTUuMDM2LS4wMy4wNzMtLjA0LjExLS4wMTcuMDUtLjAzMi4wOTctLjA0NC4xNDUtLjAxNy4wNjQtLjAzLjEzLS4wNDMuMTk1LS4wMTYuMDg0LS4wMjguMTY4LS4wMzcuMjU0LS4wMS4wOTctLjAxNy4xOTUtLjAyLjI5NC0uMDEuMjItLjAwMi40NDIuMDE2LjY2My4wMjcuMzQ0LjA4LjY4NS4xNTMgMS4wMjIuMDI0LjExLjA1LjIyMy4wNzcuMzM0LjEwNS0uMDI0LjIxLS4wNDcuMzE2LS4wNjguMjQ3LS4wNS40OTUtLjA5NC43NDQtLjEzMi4yNzQtLjA0My41NS0uMDc4LjgyNC0uMTA3LjA4NC0uMDEuMTY4LS4wMi4yNS0uMDI2LjE2Mi0uMjI3LjMyOC0uNDUuNS0uNjcuMjItLjI4LjQ0Ny0uNTU1LjY4NC0uODJsLjE4LS4xOTd6bS40NzguNDg4bC0uMTYzLjE4Yy0uMjE0LjI0LS40Mi40ODYtLjYxOC43MzhsLS4xNy4yMmMuMTI0LS4wMDcuMjQ3LS4wMTIuMzctLjAxNS4xNi0uMDA1LjMyLS4wMDcuNDgtLjAwOGguMTE2Yy4xNDQgMCAuMjg4LjAwMi40MzIuMDA1LjE2NS4wMDQuMzMuMDEuNDk0LjAxN2wtLjE1My0uMmMtLjIxLS4yNzItLjQzLS41MzgtLjY2LS43OTRsLS4xMy0uMTQzeiIvPjwvc3ZnPg=='} alt="React.js Logo" title="React.js"/></p>
</footer>

</div>
    );
  }
});

ReactDOM.render(
  <Hangmanizr/>,
  document.getElementById("app")
);
              
            
!
999px

Console