Skip to main content

HTML dice problem (not able to apply css as per requirement)

I am trying to run this code by first time after refresh its going well but after 1 click its not applying CSS as per requirement

This is Problem Statement

THROW DICE Problem Statement: Throw Dice You and your two other team members are doing your construct week project. An issue arises in your project and all three of you come up with a solution. All the three solutions are feasible and each one of you wants to implement his own solution. Hence all of you decided to roll a dice and whoever gets the maximum score will implement his solution. But the problem is you cannot roll a dice online, so you, being an active team member, decided to make an app with three dice showing a random number between 1 to 6 as described below.

Description :- Create an Index.html file Create three “DIV”, which will represent three dice and show a random number between 1 to 6. First will represent score for Member A Second will represent score for Member B And third will represent score for Member C Make a button with text content “ROLL THE DICE” On pressing the button all the three dice should roll and show a random number between 1 to 6. Make a “DIV” at the top which will show the winner Things to follow :- First dice will have id “member-1”. Second dice will have id “member-2”. Third dice will have id “member-3”. Roll the dice button will have id “roll”. The winner showing div will have id “winner” The winning dice will be in color green. The Second scorer dice will be in yellow And the dice who scored least should be in red. In case of draw make the dice scoring equal appear blue.

document.getElementById("roll").addEventListener("click", rollTheDice)

function rollTheDice() {
  var score1 = Math.floor((Math.random() * 6) + 1);
  document.getElementById("score1").innerText = score1;
  var score2 = Math.floor((Math.random() * 6) + 1);
  document.getElementById("score2").innerText = score2;
  var score3 = Math.floor((Math.random() * 6) + 1);
  document.getElementById("score3").innerText = score3;
  if (score1 === score2 && score2 == score3) {
    document.getElementById("winnerteam").innerText = "Draw";
    document.getElementById("member-1").setAttribute("id", "blue");
    document.getElementById("member-2").setAttribute("id", "blue");
    document.getElementById("member-3").setAttribute("id", "blue");
  } else if (score1 === score2 || score1 === score3 || score2 === score3) {
    if (score1 === score2) {
      document.getElementById("winnerteam").innerText = "Draw";
      document.getElementById("member-1").setAttribute("id", "blue");
      document.getElementById("member-2").setAttribute("id", "blue");
      if (score3 > score1) {
        document.getElementById("member-3").setAttribute("id", "green");
      } else {
        document.getElementById("member-3").setAttribute("id", "yellow");
      }
    } else if (score1 === score3) {
      document.getElementById("winnerteam").innerText = "Draw";
      document.getElementById("member-1").setAttribute("id", "blue");
      document.getElementById("member-3").setAttribute("id", "blue");
      if (score2 > score1) {
        document.getElementById("member-2").setAttribute("id", "green");
      } else {
        document.getElementById("member-2").setAttribute("id", "yellow");
      }
    } else if (score2 === score3) {
      document.getElementById("winnerteam").innerText = "Draw";
      document.getElementById("member-2").setAttribute("id", "blue");
      document.getElementById("member-3").setAttribute("id", "blue");
      if (score1 > score2) {
        document.getElementById("member-1").setAttribute("id", "green");
      } else {
        document.getElementById("member-1").setAttribute("id", "yellow");
      }
    }

  } else {
    if (score1 > score2 && score1 > score3) {
      document.getElementById("winnerteam").innerText = 1;
      document.getElementById("member-1").setAttribute("id", "green");
      if (score2 > score3) {
        document.getElementById("member-2").setAttribute("id", "yellow");
        document.getElementById("member-3").setAttribute("id", "red");
      } else {
        document.getElementById("member-2").setAttribute("id", "red");
        document.getElementById("member-3").setAttribute("id", "yellow");
      }
    } else if (score2 > score1 && score2 > score3) {
      document.getElementById("winnerteam").innerText = 2;
      document.getElementById("member-2").setAttribute("id", "green");
      if (score1 > score3) {
        document.getElementById("member-1").setAttribute("id", "yellow");
        document.getElementById("member-3").setAttribute("id", "red");
      } else {
        document.getElementById("member-1").setAttribute("id", "red");
        document.getElementById("member-3").setAttribute("id", "yellow");
      }
    } else {
      document.getElementById("winnerteam").innerText = 3;
      document.getElementById("member-3").setAttribute("id", "green");
      if (score1 > score2) {
        document.getElementById("member-1").setAttribute("id", "yellow");
        document.getElementById("member-2").setAttribute("id", "red");
      } else {
        document.getElementById("member-1").setAttribute("id", "red");
        document.getElementById("member-2").setAttribute("id", "yellow");
      }
    }
  }
  Set.clear();
}
#member-1 {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  margin: 10px;
  text-align: center;
}

#member-2 {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  margin: 10px;
  text-align: center;
}

#member-3 {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  margin: 10px;
  text-align: center;
}

#roll {
  margin-left: -35px;
  margin-top: 25px;
  text-align: center;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  border-top-right-radius: 5px;
  background-color: gray;
  border: none;
  color: white;
  font-size: 25px;
}

#roll:hover {
  background-color: rgb(53, 52, 52);
  color: black;
  cursor: pointer;
  border: 1px solid black;
}

#parent {
  margin-left: 45%;
}

#winner {
  margin-left: -95px;
}

#green {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  margin: 10px;
  text-align: center;
  background-color: green;
}

#red {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  margin: 10px;
  text-align: center;
  background-color: red;
}

#yellow {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  margin: 10px;
  text-align: center;
  background-color: yellow;
}

#blue {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  margin: 10px;
  text-align: center;
  background-color: blue
}
<div id="parent">
  <div id="winner">
    <h1>The Winner is team:-<span id="winnerteam"></span></h1>
  </div>
  <div id="member-1">
    <h1 id="score1"></h1>
  </div>
  <div id="member-2">
    <h1 id="score2"></h1>
  </div>

  <div id="member-3">

    <h1 id="score3"></h1>
  </div>
  <button id="roll">ROLL THE DICE</button>
  <!-- <a href="./index.html"></a> -->
</div>
Via Active questions tagged javascript - Stack Overflow https://ift.tt/AjHIclf
Labels:

Comments

Post a Comment

Popular posts from this blog

Confusion between commands.Bot and discord.Client | Which one should I use?

Whenever you look at YouTube tutorials or code from this website there is a real variation. Some developers use client = discord.Client(intents=intents) while the others use bot = commands.Bot(command_prefix="something", intents=intents) . Now I know slightly about the difference but I get errors from different places from my code when I use either of them and its confusing. Especially since there has a few changes over the years in discord.py it is hard to find the real difference. I tried sticking to discord.Client then I found that there are more features in commands.Bot . Then I found errors when using commands.Bot . An example of this is: When I try to use commands.Bot client = commands.Bot(command_prefix=">",intents=intents) async def load(): for filename in os.listdir("./Cogs"): if filename.endswith(".py"): client.load_extension(f"Cogs.{filename[:-3]}") The above doesnt giveany response from my Cogs ...
Post a Comment
Read more

How to show number of registered users in Laravel based on usertype?

i'm trying to display data from the database in the admin dashboard i used this: <?php use Illuminate\Support\Facades\DB; $users = DB::table('users')->count(); echo $users; ?> and i have successfully get the correct data from the database but what if i want to display a specific data for example in this user table there is "usertype" that specify if the user is normal user or admin i want to user the same code above but to display a specific usertype i tried this: <?php use Illuminate\Support\Facades\DB; $users = DB::table('users')->count()->WHERE usertype =admin; echo $users; ?> but it didn't work, what am i doing wrong? source https://stackoverflow.com/questions/68199726/how-to-show-number-of-registered-users-in-laravel-based-on-usertype
Post a Comment
Read more

Why is my reports service not connecting?

I am trying to pull some data from a Postgres database using Node.js and node-postures but I can't figure out why my service isn't connecting. my routes/index.js file: const express = require('express'); const router = express.Router(); const ordersCountController = require('../controllers/ordersCountController'); const ordersController = require('../controllers/ordersController'); const weeklyReportsController = require('../controllers/weeklyReportsController'); router.get('/orders_count', ordersCountController); router.get('/orders', ordersController); router.get('/weekly_reports', weeklyReportsController); module.exports = router; My controllers/weeklyReportsController.js file: const weeklyReportsService = require('../services/weeklyReportsService'); const weeklyReportsController = async (req, res) => { try { const data = await weeklyReportsService; res.json({data}) console...
Post a Comment
Read more