From be76f68bf6e6cc89301dab86b3ec3ab389ae56e3 Mon Sep 17 00:00:00 2001 From: Sekti Wicaksono <sektiwicaksono92@gmail.com> Date: Tue, 8 Dec 2020 21:22:59 +0700 Subject: [PATCH] Rolling Dice on Click --- index.html | 64 +++++++++++++++++++++++++++++++++++++ index.js | 64 +++++++++++++++++++++++++++++++++++++ style.css | 92 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 220 insertions(+) create mode 100644 index.html create mode 100644 index.js create mode 100644 style.css diff --git a/index.html b/index.html new file mode 100644 index 0000000..10b1361 --- /dev/null +++ b/index.html @@ -0,0 +1,64 @@ +<html> + <head> + <link rel="stylesheet" href="style.css"> + </head> + <body> + + <h1>Click to Roll the dice</h1> + + <div id="first" class="dice first"> + <div class="dot"></div> + </div> + + <div id="second" class="dice second hide"> + <div class="dot"></div> + <div class="dot"></div> + </div> + + <div id="third" class="dice third hide"> + <div class="dot"></div> + <div class="dot"></div> + <div class="dot"></div> + </div> + + <div id="forth" class="dice forth hide"> + <div class="column"> + <div class="dot"></div> + <div class="dot"></div> + </div> + <div class="column"> + <div class="dot"></div> + <div class="dot"></div> + </div> + </div> + + <div id="fifth" class="dice fifth hide"> + <div class="column"> + <div class="dot"></div> + <div class="dot"></div> + </div> + <div class="column"> + <div class="dot"></div> + </div> + <div class="column"> + <div class="dot"></div> + <div class="dot"></div> + </div> + </div> + + <div id="sixth" class="dice sixth hide"> + <div class="column"> + <div class="dot"></div> + <div class="dot"></div> + <div class="dot"></div> + </div> + <div class="column"> + <div class="dot"></div> + <div class="dot"></div> + <div class="dot"></div> + </div> + </div> + + <script src="index.js"></script> + </body> +</html> \ No newline at end of file diff --git a/index.js b/index.js new file mode 100644 index 0000000..7ae7b99 --- /dev/null +++ b/index.js @@ -0,0 +1,64 @@ +/* +DESCRIPTION: +In this challenge a casino has asked you to make an online dice that works just like +it would in real life. Using the pre-made dice face that represents ‘one’, make the +faces for ‘two’, ‘three’, ‘four’, ‘five’ and ‘six’. Now when the users clicks the +dice on the screen the dice is expected to show one of the faces randomly. + +event listeners, Math.random() + +*/ + +const body = document.body; +const min = 1; +const max = 6; + +const first = document.getElementById('first'); +const second = document.getElementById('second'); +const third = document.getElementById('third'); +const forth = document.getElementById('forth'); +const fifth = document.getElementById('fifth'); +const sixth = document.getElementById('sixth'); + + +body.addEventListener('click', function () { + let randomNum = Math.floor(Math.random() * max) + min; + console.log(randomNum); + + // mapping dice faces + let diceFaces = [ + { id: 1, el: first }, + { id: 2, el: second }, + { id: 3, el: third }, + { id: 4, el: forth }, + { id: 5, el: fifth }, + { id: 6, el: sixth }, + ]; + + // show random number with faces + diceFaces.map(face => { + if (randomNum === face.id) { + face.el.classList.add('show'); + face.el.classList.remove('hide'); + } else { + face.el.classList.add('hide'); + face.el.classList.remove('show'); + } + }); + +}); + + + +/* + +DETAILED INSTRUCTIONS +1. pick out the neccesary elements from the HTML +2. Create other 5 dice faces in CSS +3. use eventlisteners on the appropriate div +4. Display dice faces randomly on click + +STRETCH GOALS: +- Can you show the number you rolled as a integer along-side the dice face? +- Can you improve the overall design? +*/ diff --git a/style.css b/style.css new file mode 100644 index 0000000..0a54c45 --- /dev/null +++ b/style.css @@ -0,0 +1,92 @@ +body { + background-color: #AEB8FE; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +h1 { + margin: 2em auto; +} + +.dice { + width: 90px; + height: 90px; + border-radius: 10px; + background-color: #EFE5DC; + margin: 2em; + padding: 5px; +} + +.dot { + width: 20px; + height: 20px; + border-radius: 15px; + background-color: black; +} + +/* 1st */ +.first { + display: flex; + justify-content: center; + align-items: center; +} + +/* 2nd */ +.second { + display: flex; + justify-content: space-between; +} + +.second .dot:nth-of-type(2) { + align-self: flex-end; +} + +/* 3rd */ +.third { + display: flex; + justify-content: space-between; +} +.third .dot:nth-of-type(2){ + align-self: center; +} + +.third .dot:nth-of-type(3){ + align-self: flex-end; +} + +/* 4th, 5th, 6th */ +.forth { + display: flex; + justify-content: space-between; +} + +.fifth { + display: flex; + justify-content: space-between; +} + +.sixth { + display: flex; + justify-content: space-between; +} + +.forth .column, .fifth .column, .sixth .column { + display: flex; + flex-direction: column; + justify-content: space-between; +} + +.fifth .column:nth-of-type(2) { + align-self: center; +} + + +.hide { + display: none; +} + +.show { + display: flex; +} \ No newline at end of file