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
<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
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
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'); } }); }); 
Top comments (3)
This is really cool. I was wishing for a screenshot of what it looked like so I created a codepen for you. It is nice, just click the die and it works.
Have you entered the #dohackathon? It's getting interesting. I completed my entry. if you get a chance check it out and let me know what you think. I like your CSS / GUI design so your input on my app would be great.
Hey man, thanks for the response really appreciate it.
The codepen version already posted in my blog
I don't enter #dohackathon mate. Just checked your app on core-co-doc-ngkxu.ondigitalocean.app/.
The transition is fine. What you need to improve is the white space, alignment, scale of your font.
Since your app is a form. Always put label above the input and the submit button always at the bottom with 100% width.
Your fieldset with aliceblue background actually need more contrast since the text color is #007bff. Try to use webaim.org/resources/contrastchecker/ to pass WCAG Standard.
Also add more additional information on QRCode, Secret id, and Original Secret Id button. Because I don't know what is the function of those button.
Small text / tooltips would be helpful below the input/button
I think thats all man. Hope you like it. Have a good night.
That's some really great insight. Thanks very much for your time and comments. I used Bootstrap so a lot of it (like font and other things) are controlled by bootstrap, but I will take all of these into consideration. Thanks again. Great stuff.