Guess Right is a word-guessing game I wrote with Vue.js
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.

"Guess Right" Code

Overview and Background

"Guess Right" is a simplistic word-guessing game I wrote with Vue.js

I capitalized on Vue's reactive data, and fell in love with its templating system and state control. Combined with some Laravel and MySQL on the backend made for quite a fun-thinking and manageable development environment.

The primary technologies I used whilst creating this little web app are as follows:

  • HTML5 (tags, data attributes) / CSS3 / ES2015 (ES6)
  • Vue.js 2.1.10 / Axios
  • vuex
  • vue-router
  • Sass (SCSS)
  • Laravel 5.2 / Blade
  • Gulp, webpack, npm, vue-loader, Babel, Laravel Elixir, Apache


Link to Guess Right Screenshot


The following link is to a flowchart diagram I created to help me analyze a particular flow in the game (my flowchart containers are likely all wrong, but the flowchart tool is awesome!)



Visit and Play Guess Right and Be Happy!

-Keith D Commiskey

KDC-info Project Sites

As of March 2017

  • Keep Track An online personal inventory manager (Laravel/Blade/MySQL/Bootstrap)
  • Pick-a-Meal Can't decide where or what to eat? (Laravel/Blade/MySQL/Bootstrap)
  • Guess Right A fun little word-guessing game (Laravel/Vue/Vuex/Vue-router/ES2015(ES6))

Internet Explorer Issues

The following were primarily related to IE11, but some affected Edge as well. I didn't analyze the differences between, and just fixed everything for IE11, which resulted in fixing Edge's subset of issues as well.

_ Didn’t understand .keys()

  • Installed babel-polyfill: 6.23

    • Didn’t work for .keys(), but I think it fixed 1 or 2 other errors I didn’t log.
  • Code Fix

    • Didn’t Work

      for ( let div of document.getElementsByClassName('divContent') ) {
    • Works

      for ( let [key, div] of Object.entries( document.getElementsByClassName('divContent') ) ) {

_ Shows ~20px tall white bar under the image and image frame.

  • Moved <h2>Great Guessing !!!</h2> into it’s sibling <p> with the 2 buttons

_ Shows the next 'You Lost' background image when game is ‘played again’ (or reset)

  • Found IE11 doesn’t support multiple classList assignments

    • Didn’t Work

      div.classList.remove('anim', 'anim-none')
    • Works


_ Pushed ‘Congratz’ background image off to the right side of the frame.

  • Image element is absolute, so I added left: 0; right: 0;

_ IE11 shows "Great Guessing !!!" in extra-wide font that won’t center.

  • Haven’t figured this out yet (2017-04-29)