Skip to main content

Roll the Dice Application Using Javascript

 




    Learn how to create a fun dice roll app using JavaScript in this easy-to-follow tutorial. Perfect for beginners and web designers looking to enhance their skills. Join us now and build your own interactive dice game! Like, comment, and subscribe for more coding and web design tutorials. Let's get rolling!



index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Tutorial</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <div class="dice-container">
      <div class="dice-text" id="diceText"></div>
      <div class="dice-icon" id="diceResult"></div>
      <button class="roll-button" onclick="rollDiceWithAnimation()">Roll the Dice</button>
    </div>

    <script src="script.js"></script>

  </body>
</html>


styles.css

    body{
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        margin: 0;
        background-color: #f7efef;
    }

    .dice-container{
        background-color: #fff;
        box-shadow: 2px 7px 37px 3px rgba(0,0,0,0.2);
        width: 350px;
        height: 350px;
        border-radius: 25px;
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .dice-icon{
        font-size: 96px;
        color: #00d2a8;
        margin-bottom: 8px;
        opacity: 0;
        transition: opacity 0.2s ease ease-in-out;
    }

    .dice-text{
        font-family: Arial, Helvetica, sans-serif;
        font-size: 24px;
        font-weight: bold;
        color: #34495e;
        margin-bottom: 36px;
    }

    .roll-button{
        letter-spacing: 1px;
        font-size: 25px;
        font-weight: bold;
        background-color: #3498db;
        color: #fff;
        padding: 15px 25px;
        border: none;
        border-radius: 15px;
        cursor: pointer;
    }

    .roll-button:hover{
        background-color: #2980b9;
    }


styles.css

	 function rollDiceWithAnimation(){

    const diceIcons = [
      'fas fa-dice-one',
      'fas fa-dice-two',
      'fas fa-dice-three',
      'fas fa-dice-four',
      'fas fa-dice-five',
      'fas fa-dice-six'
    ];

    const diceResultElement = document.getElementById('diceResult');
    const diceTextElement = document.getElementById('diceText');

    diceResultElement.style.opacity = '0';
    diceTextElement.textContent = '';

    let start = null;
    let duration = 3500;

    function animate(timestamp){
      if(!start) start = timestamp;
      let progress = timestamp - start;
      let opacity = progress / duration;
      diceResultElement.style.opacity = opacity;

      if (progress < duration){
        requestAnimationFrame(animate);
      } else {
        clearInterval(animationInterval);
        const randomDiceIndex = Math.floor(Math.random() * diceIcons.length);
        diceResultElement.innerHTML = ``;
        diceTextElement.textContent = `Your Dice Number is: ${randomDiceIndex + 1}`;
      }

    }

    let animationInterval = setInterval(() => { 
      const randomDiceIndex = Math.floor(Math.random() * diceIcons.length); 
      diceResultElement.innerHTML = ``;
    }, 80);

    requestAnimationFrame(animate);

  }
  

Watch Tutorial Video Here!



Labels:

Comments

Post a Comment

Popular posts from this blog

Auto Image Slider using CSS Only

     Are you ready to learn how to create an image slider using only CSS? Look no further! In this tutorial, we'll walk you through the step-by-step process of building a sleek and modern image slider using HTML and CSS. No JavaScript required! In this tutorial We'll cover setting up the HTML structure for the slider.       This will include creating the container element and styling the slider with CSS. You'll also learn how to add transitions and animations to create a smooth sliding effect. By the end of this tutorial, you'll have a fully functional image slider that you can use on your own website. Whether you're a beginner or an experienced developer, this tutorial has something for you. So let's get started creating your own image slider using CSS today! index.html <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="css/style.css"...
Post a Comment
Read more

Display Battery Status using HTML, CSS and Javascript

     Hey everyone, welcome to Code Instinct! In this tutorial, we're going to show you how to create a battery status indicator using HTML, CSS and Javascript. This is a great Javascript project for beginners who want to learn how to use the Battery API Javascript and create a battery level indicator. We'll also be showing you how to add a battery charging animation and CSS battery shape to make it more visually appealing.Our tutorial will cover all the steps needed to create your own battery status indicator with ease. You'll learn how to use the Battery API Javascript to get the current battery level of your device, and display it using HTML and CSS.       We'll also be covering the different types of battery indicators you can use and how to customize them to fit your website design. You'll learn how to create a battery charging animation using Javascript and CSS to give your battery status indicator a more dynamic look.At Code Instinct, we're dedi...
Post a Comment
Read more

Glass Fill Effect using CSS Only

     In this tutorial, we will be creating a glass fill animation effect without using any SVG graphics or JavaScript. We will be using only CSS to create the animation. This animation is perfect for creating a liquid filling effect on a website. The tutorial is easy to follow and can be implemented on any website. So, if you're looking to add a cool animation effect to your website, this tutorial is for you. With this method, you can create a realistic looking glass fill animation effect without the need for any additional graphics or libraries.  index.html <html> <head> <title>TUTORIAL</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="glass-ctr"> <div class="glass"></div> <div class="water-ctr"> <div class="water"></div> ...
Post a Comment
Read more