Day 8 of JavaScriptmas - The Rolling Dice Solution
Tags: scrimba, 24daysofjavascriptmas, javascript
Published: 2020-12-15 18:57:34

Day 8 - Rolling Dice is the most advanced challenge so far.
Because I need to code the HTML, CSS, and JS.

Each click will give a random number between 1 to 6 just like a dice and the interface also gives different face of dice on each click.

There is the solution
**HTML**
```html
<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>
```
**CSS**
```css
body {
    background-color: #AEB8FE;
    display: flex;
    flex-direction: column;
    
    height: 100vh;
}

.dice {
    width: 90px;
    height: 90px;
    border-radius: 10px;
    background-color: #EFE5DC;
    margin: 100px;
    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;
}
```
**JavaScript**
```javascript
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');
        }
    });

});
```