Categories: web development

Create a Dice with HTML, CSS, and Javascript

We are going to create a html, css, and javascript die with this code. For every block of code create the coodinating file extension be it .js .html .css and etc. It should work. Happy coding.

First create index.html

<html>
<head>
    <title>Dice Simulator 2015</title>
    <link rel="stylesheet" href="style.css">
</head>  
<body>
  <p id="placeholder">
  
  </p>
  <button id="button">Roll Dice</button>
  <script src="dice.js"></script>
  <script src="ui.js"></script>
</body>
</html>

Second we are going to create style.css

* {
  font-family: Helvetica, Arial, sans-serif;
  text-align: center;
}
button {
  background-color: rgb(82, 186, 179);
  border-radius: 6px;
  border: none;
  color: rgb(255, 255, 255);
  padding: 10px;
  text-transform: uppercase;
  width: 200px;
  cursor: pointer;
}
#placeholder {
  height: 100px;
  width: 100px;
  padding: 50px;
  margin: 50px auto;
  border: 1px solid gray;
  border-radius: 10px;  
  font-size:80px;
}

3rd we are going to create the ui.js

function printNumber(number) {
  var placeholder = document.getElementById("placeholder");
  placeholder.innerHTML = number;
}

var button = document.getElementById("button");

button.onclick = function() {
  var result = dice.roll();
  printNumber(result);
};

Finally create the object lateral of the javascript file dice.js

var dice = {
sides: 6,
roll: function () {
  var sides = 6;
  var randomNumber = Math.floor(Math.random() * this.sides) + 1;
  return (randomNumber);
}
}

refactored for dice.js using prototype

function Dice(sides) {
  this.sides = sides;
}
Dice.prototype.roll = function diceRoll () {
  var randomNumber = Math.floor(Math.random() * this.sides) + 1;
    return randomNumber;
  }
var dice = new Dice(6);