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