Skip to content

KDCinfo/guess-right

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

7 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

About

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

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published