Build this JavaScript Dice Roller program 🎲

Показать описание

#JavaScript #tutorial #course

This is a project to reinforce learning of JavaScript functions, arrays, and random numbers.

00:00:00 intro
00:00:33 HTML
00:02:44 CSS
00:05:53 JavaScript
00:13:03 more CSS

Рекомендации по теме

Комментарии

// DICE ROLLER PROGRAM

function rollDice(){

const numOfDice =
const diceResult =
const diceImages =
const values = [];
const images = [];

for(let i = 0; i < numOfDice; i++){
const value = Math.floor(Math.random() * 6) + 1;
values.push(value);
images.push(`<img alt="Dice ${value}">`);
}

diceResult.textContent = `dice: ${values.join(', ')}`;
diceImages.innerHTML = images.join('');
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>

<div id="container">
<h1>Dice Roller</h1>
<label># of dice:</label>
<input type="number" id="numOfDice" value="1" min="1">
<button onclick="rollDice()">Roll Dice</button>
<div id="diceResult"></div>
<div id="diceImages"></div>
</div>

<script src="index.js"></script>
</body>
</html>

#container{
font-family: Arial, sans-serif;
text-align: center;
font-size: 2rem;
font-weight: bold;
}
button{
font-size: 1.5rem;
padding: 10px 15px;
border-radius: 10px;
border: none;
background-color: hsl(210, 100%, 50%);
color: white;
font-weight: bold;
cursor: pointer;
}
button:hover{
background-color: hsl(210, 100%, 60%);
}
button:active{
background-color: hsl(210, 100%, 70%);
}
input{
font-size: 2rem;
width: 150px;
text-align: center;
font-weight: bold;
}
#diceResult{
margin: 25px;
}
#diceImages img{
width: 150px;
margin: 5px;
}

BroCodez

I've done this project but instead of using images I made the dice faces using div sections and CSS.
Took me a bit but it works. I'm so happy 🥳

kenkei.mwaniki

thanks bro. I seriously learned everything from you. HTML, CSS, JAVASCRIPT, REACT, I'm also going to learn back-end next year but i wanna get more comfortable with front-end first. Thank you so so much ❤

hunin

Bro i am 14 and i have learnt ur python course and doing this this is soo good and clear even a 12 year old can do it with your explanation Love from Pakistan

FUN_X_GAME

I'm learning JavaScript and this helped a lot. Thanks

shubham_indalkar

Very good step by step explanation. Thank you!

mennatallah

Amazingly explained... Thnx mate... Keep it up!!!

mr.nobody

Bro, could you please upload a video on Python regular expressions? Your videos have helped me get better at Python which I thank you for 🙏

KrishnaR

hey BROO THANKS FOR your videos. I would like to understand how the programs know which images need to display. thanks!

vallunacoder.wecodetogether

<*_> This is my seal. I have watched the entire video, understood it, and I can explain it in my own words, thus I have gained knowledge. This is my seal. <_*>

piotrmazgaj

Will you have Android development with Java code Course for Beginner ?❤

sithichook

I'm sorry bro code, you ain't getting a lot of views, but there is a reason to that, everyone waits for you to make a full course, on a programming language, maybe Expand even more, like Lua, Ruby, and more. any programming language that is popular enough.

KottNPCWARS-dpkj

Anybody knows the theme to his vscode text color? Dont know exactly how to call it, but i like the blues and pink and stuff, mine has some weird green stuff

Fantapew

can anyone explain why we used the .innerHTML property? what does it do exactly?

manolischatzipanagiotidis

Watch video 1-29 😊 enters 30 ..my brain hurts 😫

Davidyano

The code works. However, running the console.log() check, chrome console always shows errors. What is the problem?
Error handling response: index.html:1
TypeError: Cannot read properties of undefined(reading 'direction') at u

eshowerthoughts

Its not random comment 😅

I've been thinking about it ;

Jamal_Almansoub

Let min = 3;
Let max = 50;

Let commentLength = Math.floor(Math.random() * (max - min)) + min;
Let letter = [“a”, ”b”, ”c”, d”, “ “];
Let comment = [];
for(let i = 0; i < commentLength; i++){
Let next = * (letters.length -0))];
Comment.push(next)
}
Console.log(…comment);

icebot.

Build this JavaScript Dice Roller program 🎲

Build this JavaScript Dice Roller program 🎲

Building a Dice Rolling Game with JavaScript: Reset Button and Multiplayer Fun

Rolling Dice Easy Tutorial By using HTML | CSS | JavaScript

How to Create a Dice Roll Game using HTML CSS & JavaScript

Roll Dice Project using CSS & JavaScript

Unleash the Power of Dice - Build Your Custom Digital Dice with JavaScript!

Rolling dice using css and javscript. Coding walkthrough in profile

Learn JavaScript And Build a Dice Roller Game | Fun Beginner Project

Roll A Dice In JavaScript Web Application | JavaScript For Students | #SmartCode

Day 7 - Dice Roll Game Using JavaScript - 30 Days Of JavaScript

Dice Roll Game Using Javascript - 30 Days Of Javascript Project

Build a Rock Paper Scissors Game with HTML, CSS & JavaScript | Beginner to Pro!

Make a JavaScript Dice Game

🎲Build a Dice Spinner Game app with HTML, CSS, Javascript.

Building Dice Logic for a Ludo Game in JavaScript – Step-by-Step Tutorial

Build a Dice App!

Review Intermediate Algorithmic Thinking by Building a Dice Game Step 1 - 14 | freeCodeCamp

Learn how to create a Dice Roll Game Dynamic HTML Dice with JavaScript roll the Dice

Build Dice Rolling Game Using Pure HTML, CSS & JS.| Free Source Code.| #Technical_Vandar

🎲 How to Create a Rolling Dice Game Using JavaScript | Step-by-Step Tutorial 🎮✨

How to make a Dice Roller with HTML, CSS and JavaScript

Simple Dice with Python | TigerCodes | #shorts #coding #python # dice_python

Build a Dice Roller Game with HTML, CSS & JavaScript | Fun Beginner Project! | #2

Dice Animation using #html #css & #javascript |Source Code On Pin Comment | #shorts #tranding