"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

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

• Guess Right Flowchart

Mockups:

• My initial 3-layout draft (mobile; non-mobile test a, non-mobile test b)

• URL for my 2nd layout (just a tad more defined)

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)