jQuery CSS Slot Machine Puzzle Plugin Tutorial

A while back in September of 2015 I made a slot machine using jQuery and CSS for a puzzle. There are two different versions of this slot machine. The first version is typing in a three letter word to retrieve a five letter word back. The second version, there are six words that form a sentence, that when typed in order in the slot machine will return another six words. I made both versions flexible so the user can set any number of word combinations with any number of letters in a word. Although I wouldn't recommend a super long word such as deoxyribonucleic acid. I also made it so the slot machine would resize depending on the user's monitor size. All the dimensions are in rems and they scale based on a base number set for the html tag depending on the window size.

You may demo each of them below:

Slot Machine 1

Here's the structure of the slot machine:

<div id="machine">
  <div id="machine-upper-part">
    <div id="machine-upper-part-inside">
      <input
        type="text"
        name="input"
        id="machine-marquee"
        placeholder="Enter your guess"
      />
    </div>
  </div>
  <div id="machine-body">
    <div id="framework-central">
      <div id="framework-left">
        <div class="framework-top"></div>
        <div class="framework-middle"></div>
        <div class="framework-bottom"></div>
      </div>
      <div id="framework-center">
        <!-- script will generate reels here -->
      </div>
      <div id="framework-right">
        <div class="framework-top"></div>
        <div class="framework-middle"></div>
        <div class="framework-bottom"></div>
      </div>
    </div>
  </div>
  <div id="machine-lever">
    <div id="lever-ball"></div>
    <div id="lever-bar"></div>
    <div class="lever-base big">
      <div class="lever-base-inner"></div>
    </div>
    <div class="lever-base small">
      <div class="lever-base-inner"></div>
    </div>
  </div>
</div>

Here's the resizing based on width:

@media all and (max-width: 1500px) {
  html {
    font-size: 8px;
  }
}
@media all and (max-width: 1000px) {
  html {
    font-size: 7px;
  }
}
@media all and (max-width: 800px) {
  html {
    font-size: 6px;
  }
}
@media all and (max-width: 500px) {
  html {
    font-size: 5px;
  }
}
@media all and (max-width: 400px) {
  html {
    font-size: 4px;
  }
  #machine-marquee,
  input[type='text'] {
    font-size: 16px;
  }
}

For other styles related code, please view and download the demo below.

The jQuery used to call the slot machine plugin is as follows:

Note: Code is what the user has to enter in order to get the answer. In this case, the code is "red" and the answer is "apple". Also there is a limit of 10 tries set.

$('#framework-center').slot_machine({
  answer: 'apple',
  code: 'red',
  tries: '10',
});

Slot Machine 2

The second slot machine is similar except for the jQuery you write to call the plugin and the plugin itself. The style has been tweaked as well to be more tech-y.

The jQuery used to call the plugin, with answer and code: Note: The code is what the person types one at a time to get the answer one at a time. In this case, the code is a series of colors in a rainbow "red, orange, yellow, green, blue, purple" which returns in this order, a clue, "look at the six of hearts".

$('#framework-center').slot_machine({
  answer: ['look', 'at', 'the', 'six', 'of', 'hearts'],
  code: ['red', 'orange', 'yellow', 'green', 'blue', 'purple'],
});