Rolling Dice

 <!DOCTYPE html>

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

    <div class="container">
        <audio id="diceaudio" src="dice.mp3"></audio>
        <h1 class="heading">Roll The Dice To Get Random Number</h1>
        <p class="desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem, eligendi.</p>

        <div id="dice">6</div>

        <div class="button" onclick="roll()">Roll The Dice</div>

    </div>
   

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

// java script file

function roll(){

    let random=Math.floor(Math.random()*6);
    let dice=document.getElementById('dice');
    let diceaudio=document.getElementById('diceaudio');
    dice.classList.add('animate-dice');
   

    setTimeout(()=>{
        diceaudio.play();
        dice.classList.remove('animate-dice');
        dice.innerText=random+1;
   

    },1000)

}

// CSS File

body{

    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;


}

.container{
    margin: auto;
    width: 500px;
    text-align: center;
    /* border: 1px solid rgb(214, 214, 214); */
    /* border-radius: 10px; */
    /* padding: 15px; */



}

.button{

    width: 150px;  
    font-size: 16px;
    background-color: rgb(217, 213, 213);
    border: none;
    border-radius: 10px;
    padding: 15px 30px;
    /* box-sizing: border-box; */
    margin: auto;
    margin-top: 20px;
    cursor: pointer;
   


}

.heading{

    font-size:25px;



}

.desc{
    color: rgb(127, 125, 125);
    margin-bottom: 50px;





}

#dice{
    width: 80px;
    height: 80px;
    font-size: 60px;
    font-weight: bolder;
    border-radius: 15px;
    border: 1.5px solid royalblue;
    color: royalblue;
    margin: auto;

}

.animate-dice{
    animation-name: roll;
    animation-duration: 1s;

}

@keyframes roll{

    from{}
    to{

        transform: rotate(360deg);
    }
}

Output-



Comments

Post a Comment

Popular posts from this blog

Array Mapping and Filters Assignment

Image
  <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >         < title >Document</ title > </ head > < body >         < script src = "am.js" ></ script > </ body > </ html > // JAVA SCRIPT FILE const users = [     {         name : "Akash Sharma" ,         age : 17 ,         gender : "Male" ,         location : "Delhi, India"     },     {         name : "Neha Patel" ,         age : 16 ,         gender : "Female" ,         location : "Mumbai, India"     },     {         name : "Rajesh Singh" ,     ...
Read more

Basics Of Java Script Till DOM Beggining

  <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < link rel = "stylesheet" href = "style.css" >     < title >Document</ title > </ head > < body >     < div class = "container" >         < h1 id = "title" >Welcome to css</ h1 >         < button id = "btn" class = "btn" onclick = " feedback ()" >Give Feedback</ button >         < input id = "inp1" type = "text" placeholder = "Enter Name" >         < input id = "inp2" type = "text" placeholder = "Enter Number" >     </ div >     < script src = "app.js" >         </ script >     </ body > </ html ...
Read more