Awesome

"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