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.
Permalink
Failed to load latest commit information.
app
database/migrations
json-files
resources
README.md
architecture.htm

README.md

"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

Screenshot

Link to Guess Right Screenshot

Flowchart

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!)

Mockups:

Tada!

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

      div.classList.remove('anim')
      div.classList.remove('anim-none')
      

_ 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)