JSFiddle - React, Tailwind, and code Playground

by akang2

HTML

<h1>CSS Classes and Sprites</h1>

<div id="dice" class="dice0"></div>
<div>
    <button onclick="roll(1);">Roll 1</button>
    <button onclick="roll(2);">Roll 2</button>
    <button onclick="roll(3);">Roll 3</button>
    <button onclick="roll(4);">Roll 4</button>
    <button onclick="roll(5);">Roll 5</button>
    <button onclick="roll(6);">Roll 6</button>

</div>

CSS

.dice0 {
  display: inline-block;
  width: 77px;
  height: 77px;
  background-color: #eee;
}
.dice1 {
  display: inline-block;
  width: 77px;
  height: 77px;
  background-position: -14px -17px;
  background-image: url('http://tapmodo.github.io/jsintro/css/dice.png');
}
.dice2 {
  display: inline-block;
  width: 77px;
  height: 77px;
  background-position: -93px -17px;
  background-image: url('http://tapmodo.github.io/jsintro/css/dice.png');
}
.dice3 {
  display: inline-block;
  width: 77px;
  height: 77px;
  background-position: -172px -17px;
  background-image: url('http://tapmodo.github.io/jsintro/css/dice.png');
}
.dice4 {
  display: inline-block;
  width: 77px;
  height: 77px;
  background-position: -251px -17px;
  background-image: url('http://tapmodo.github.io/jsintro/css/dice.png');
}
.dice5 {
  display: inline-block;
  width: 77px;
  height: 77px;
  background-position: -330px -17px;
  background-image: url('http://tapmodo.github.io/jsintro/css/dice.png');
}
.dice6 {
  display: inline-block;
  width: 77px;
  height: 77px;
  background-position: -409px -17px;
  background-image: url('http://tapmodo.github.io/jsintro/css/dice.png');
}

JavaScript

//Day 10 Warmup Activity

/*
    Fill in the function below, to change the CSS class
    The format of the CSS className should be "diceX"
    Where X is the number rolled (value) e.g. "dice3", "dice6"
*/

function roll(value) {
    // Insert code here
    // 1. get element, 2. set className (e.g. "dice1", "dice2")
    $("#dice").removeClass().addClass("dice" + value);
}