HomeworkLib
Question

Does anybody know how to create a score of increase and decrease using javascript ? I...

Does anybody know how to create a score of increase and decrease using javascript ?

I will like to create a score system where

If the user decides to not guess any number and just get what ever number that is given to them then there points is just what ever number comes up. For example: if the user just clicks on the no random button they just get what ever number comes up

If the user wants to guess what number they will get from 1-10 for example if the user bets for example 3 and they get 3 then I will like their points to increase double the result they guessed if result equals the number they guessed.

If they did not get the number they guessed I will like to subtract the number they got from the score they already have.

If you know anything about score increasing or decreasing using javascript, I will greatly appreciate any help that I can get.

Please also explain what you did and why. I will appreciate any help given. Thank You

engineering   Computer-Science   
0 0
Add a comment Improve this question Transcribed image text
Next > < Previous
Sort answers by oldest

Homework Answers

Answer #1

Note:

  1. Attach up & down function to buttons
  2. Increment or decrement accordingly
  3. Check for lower & higher values

Sample Javascript Code for Increase and Decrease the score:-

<!DOCTYPE html>
<html lang="en">
<head>
   <!--title for web page -->
   <title>Increment & Decrement</title>
</head>
<body>
   <!-- Starting the javascript -->
   <script>
       // Declaring the variable with 0 value
       var g = 0;
       // Create a function for incrementing the score
       function up() {
           // Write a condition for increment the number up to 30
           if (g < 30) {
               // Increment the number up to 30
               g++;
               // Getting the incremented number on screen
               document.getElementById('up').innerHTML = g;
           }
       }
       // Create a function for decrementing the score
       function down() {
           // Write a condition for decrement the number up to 0
           if (g > 0) {
               // Decrement the number up to 0
               g--;
               // Getting the Decremented number on screen
               document.getElementById('up').innerHTML = g;
           }
       }
   </script>
   <!-- Creating the button for increment the value and Passing method to button-->
   <input type="button" onclick="up();" value="up" />
   <!-- Creating the button for decrement the value and Passing method to button-->
   <input type="button" onclick="down();" value="down" />
   <!-- Getting the Initial value on screen -->
   <div id="up">0</div>
</body>
</html>
Output Screenshot:- Up button will increase the value & Down button will decrease the value

THE END

Note: Previous I created a game related your Question. I'm uploading that one also. Surely it will help full for you. Could you please consider my effort on this work and give up vote. Thank you :)

HTML Code: index.html

<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>JavaScript Score Keeper</title>
<script src="https://use.fontawesome.com/84cff6f9e7.js"></script>
<link href="https://fonts.googleapis.com/css?family=Exo:700,800,900|Lato:100,300,400,700,900" rel="stylesheet">
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<link rel="stylesheet" href="./style.css">

</head>
<body>
<!-- partial:index.partial.html -->
<body>
   <div class="wrapper">
       <div class= "container-fluid">
           <div class="row title">
               <div class="col-xs-12 title">
               <h1>scorekeeper</h1>
               </div>
           </div>
           <div class="players">
               <div class="row player" id="default-player">
                   <div class="col-xs-2 increase">
                       <button type="button" class="btn btn-default increase-btn">
                           <span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>
                       </button>
                   </div>
                   <div class="col-xs-4 player-name">
                       <h1 id="player-name"><i class="fa fa-pencil" aria-hidden="true"></i>New Player</h1>
                   </div>
                   <div class="col-xs-2 score">
                       <h2 class="score-display">0</h2>
                   </div>
                   <div class="col-xs-2 decrease">
                       <button type="button" class="btn btn-default decrease-btn">
                           <span class="glyphicon glyphicon-minus-sign" aria-hidden="true"></span>
                       </button>
                   </div>
                   <div class="col-xs-2 checked">
                       <button type="button" class="btn btn-default delete-btn">
                           <span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
                       </button>
                   </div>              
               </div>
               <div class="row player" id="player-one">
                   <div class="col-xs-2 increase">
                       <button type="button" class="btn btn-default increase-btn">
                           <span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>
                       </button>
                   </div>
                   <div class="col-xs-4 player-name">
                       <h1 id="player-name"><i class="fa fa-pencil" aria-hidden="true"></i>Mahesh</h1>
                   </div>
                   <div class="col-xs-2 score">
                       <h2 class="score-display">0</h2>
                   </div>
                   <div class="col-xs-2 decrease">
                       <button type="button" class="btn btn-default decrease-btn">
                           <span class="glyphicon glyphicon-minus-sign" aria-hidden="true"></span>
                       </button>
                   </div>
                   <div class="col-xs-2 checked">
                       <button type="button" class="btn btn-default delete-btn">
                           <span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
                       </button>
                   </div>              
               </div>
               <div class="row player" id="player-two">
                   <div class="col-xs-2 increase">
                       <button type="button" class="btn btn-default increase-btn">
                           <span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>
                       </button>
                   </div>
                   <div class="col-xs-4 player-name">
                       <h1 id="player-name"><i class="fa fa-pencil" aria-hidden="true"></i>Kalyan</h1>
                   </div>
                   <div class="col-xs-2 score">
                       <h2 class="score-display">0</h2>
                   </div>
                   <div class="col-xs-2 decrease">
                       <button type="button" class="btn btn-default decrease-btn">
                           <span class="glyphicon glyphicon-minus-sign" aria-hidden="true"></span>
                       </button>
                   </div>
                   <div class="col-xs-2 checked">
                       <button type="button" class="btn btn-default delete-btn">
                           <span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
                       </button>
                   </div>              
               </div>              
           </div>
           <div class="row add">
               <div class="col-xs-6 reset-player">
                   <button id="reset-btn"><i class="fa fa-refresh" aria-hidden="true"></i> Reset</button>
               </div>
               <div class="col-xs-6 add-player">
                   <button id="add-player"><i class="fa fa-user-plus" aria-hidden="true"></i> Add a player</button>
               </div>          
           </div>
       </div>
   </div>
</body>
<!-- partial -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js'></script>
<script src="./script.js"></script>

</body>
</html>
CSS Code: style.css

* {
   -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}
body {
   background: url("img/SC.PNG");
}
.wrapper {
   width: 100%;
   font-family: 'Lato', sans-serif;
   color: #eae6d8;
   background-color: #14504c;  
}
.container-fluid {
width: 1000px;
max-width: 100%;
}
.title h1 {
   font-family: 'Exo', sans-serif;
   font-size: 46px;
   font-weight: 800;
   text-align: center;
   text-transform: uppercase;
   margin: 30px 0;
}
#default-player {
   display: none;
}
#player-one {
   background-color: #276560;
}
#player-two {
   background-color: #437d79;
}
#reset-btn, #add-player {
   font-size: 36px;
display: block;
text-align: center;
   background-color: transparent;
   border-color: transparent;
margin: 0 auto;
padding: 30px 0;
}
.increase-btn, .decrease-btn {
background-color: transparent;
   border-color: transparent;
border-radius: 0;
color: #eae6d8;
   font-size: 46px;
margin: 0 auto;
margin-top: 6px;
}
.delete-btn {
   background-color: transparent;
   border-color: transparent;
   color: #eae6d8;
font-size: 20px;
   padding: 7px 19px;
margin: 20px 0;
}
.increase-btn:hover, .increase-btn:active, .decrease-btn:hover, .decrease-btn:active {
   background-color: transparent !important;
   border-color: transparent !important;
   color: #eae0c0 !important;
   box-shadow: inset 0 0 0 rgba(0,0,0,0);
   outline:0 !important;
}
.increase-btn:focus, .decrease-btn:focus {
   background-color: transparent !important;
   border-color: transparent !important;
color: #eae6d8 !important;
   outline:0 !important;
}
.delete-btn:hover, .delete-btn:focus, #reset-btn:hover, #add-player:hover {
   background-color: transparent !important;
border-color: transparent !important;
color: #eae0c0 !important;
   box-shadow: inset 0 0px 0px rgba(0,0,0,0);
   outline:0 !important;
}
.delete-btn:active, #add-player:active, #add-player:visited, #add-player:focus, #reset-btn:active, #reset-btn:visited, #reset-btn:focus {
   color: #eae6d8 !important;
   outline:0 !important;
}
h1#player-name, h2.score-display {
font-size: 32px;
font-weight: 300;
   text-align: center;
}
#player-name:active, #player-name:focus, .score-display:active, .score-display:focus {
   outline:0 !important;
}
i.fa.fa-pencil {
padding-right: 10px;
font-size: 28px;
   cursor: pointer;
}
.reset-player i.fa.fa-refresh {
   -webkit-transition: -webkit-transform .6s ease-in-out;
transition: transform .6s ease-in-out;
}
.reset-player:hover i.fa.fa-refresh, .reset-player:focus i.fa.fa-refresh {
   -webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
.add-player i.fa.fa-user-plus {
   -webkit-transition: -webkit-transform .6s ease-in-out;
transition: transform .6s ease-in-out;
}
.add-player:hover i.fa.fa-user-plus, .add-player:focus i.fa.fa-user-plus {
   -webkit-transform: scale(1.2);
transform: scale(1.2);
}

#dialog-message {
   display: none;
}
.ui-dialog-titlebar-close {
   display: none;
}

@media screen and (max-width: 665px) {
   h1#player-name, h2.score-display {
       font-size: 26px;
       margin-top: 25px;
       white-space: nowrap;
   }
   .increase-btn, .decrease-btn {
       font-size: 40px;
   }
   .delete-btn {
       font-size: 18px;
   }
   #reset-btn, #add-player {
       font-size: 32px;
   }
}
@media screen and (max-width: 575px) {
   h1#player-name, h2.score-display {
       font-size: 22px;
       margin-top: 28px;
   }
   h1#player-name {
       text-align: left;      
   }
   i.fa.fa-pencil {
       padding-right: 5px;
       font-size: 22px;
   }
   .delete-btn {
       padding: 7px 0 5px 5px;
   }  
   #reset-btn, #add-player {
       font-size: 28px;
   }
   .reset-player i.fa.fa-refresh, .add-player i.fa.fa-user-plus {
       font-size: 24px;
   }
}
@media screen and (max-width: 490px){
   .increase-btn, .decrease-btn {
       font-size: 34px;
       margin-top: 10px;
   }
   i.fa.fa-pencil {
       font-size: 18px;
   }
   .player-name {
   padding-right: 0;
   }
   h1#player-name, h2.score-display {
       font-size: 18px;
       margin-top: 26px;
   }
   .delete-btn {
       font-size: 16px;
   }
   .reset-player, .add-player {
       width: 100%;
   }
   #reset-btn, #add-player {
       font-size: 28px;
       padding: 8px;
   }
}

JAVASCRIPT Code: scirpt.js

$(document).ready(function() {
  
$(".players").on("click", ".increase-btn", addScore);
$(".players").on("click", ".decrease-btn", subtractScore);
$(".players").on("click", "#player-name", editPlayer);
$(".players").on("click", ".score-display", editScore);
$(document).on("click", "#reset-btn", reset);
$("#add-player").click(addNewPlayer);
$(".players").on("click", ".delete-btn", deletePlayer);
//
function addScore(){
var button = $(this);
var display = $(button).parents(".player").find("h2");
var oldVal = $(display).text();
var newVal = parseFloat(oldVal) + 1;
$(display).text(newVal);
}
function subtractScore(){
var button = $(this);
var display = $(button).parents(".player").find("h2");
var oldVal = $(display).text();
var newVal = parseFloat(oldVal) - 1;
$(display).text(newVal);
}
function addNewPlayer(){
var row = $('<div class="row player">' + $("#default-player").html() + "</div>");
var colors = ["#437d79", "#276560", "#053834", "#032b29", "#78bfba", "#01736b", "#22988f", "#0a2e2d", "#326763", "#3c9b94", "#668b83", "#7b978f"];
var shade = colors[Math.floor(Math.random() * colors.length)];
$(row).appendTo(".players").hide().css("background-color", shade).fadeIn(700);
}
function deletePlayer(){
var button = $(this);
$(button).parents(".player").fadeOut(400, function(){
$(this).remove();
});
}
function editPlayer (){
var editField = $(this);
var playerName = $(editField).parents(".player").find("#player-name");
$(playerName).attr("contenteditable","true");
}
function editScore (){
var editScoreField = $(".score-display");
$(editScoreField).attr("contenteditable","true");
}
function reset(){
$(".score-display").text(0);
}
});

Picture I used in Background:

Final Output of my GAME: In this, You can increase & decrease the scores of players. You can add & remove players. You can edit the names of players.You can reset the Scores of all players.

Note: Brother, Don't forget to hit LIKE.

0 0
Add a comment
Know the answer?
Add Answer to:
Does anybody know how to create a score of increase and decrease using javascript ? I...
Your Answer:

Post as a guest

Your Name:

What's your source?

Earn Coins

Coins can be redeemed for fabulous gifts.

Log In

Sign Up

Not the answer you're looking for? Ask your own homework help question. Our experts will answer your question WITHIN MINUTES for Free.
Similar Homework Help Questions

  • Simple JavaScript and HTML: You'll create a simple word guessing game where the user gets infinite...

    Simple JavaScript and HTML: You'll create a simple word guessing game where the user gets infinite tries to guess the word (like Hangman without the hangman, or like Wheel of Fortune without the wheel and fortune). Create two global arrays: one to hold the letters of the word (e.g. 'F', 'O', 'X'), and one to hold the current guessed letters (e.g. it would start with '_', '_', '_' and end with 'F', 'O', 'X'). Write a function called guessLetter that...

  • I need to create a bit of code for javascript which I can have random numbers...

    I need to create a bit of code for javascript which I can have random numbers generate with a certain amount of digits set by the user. and ask the user how many times they want this to happen. For example The user says they want a number with 4 digits (any number between 0 - 9999) and the user can input if they want to add, subtract, multiply, divide, or make it random 2 random numbers are generated. First...

  • Purpose of the assignment To apply simple JavaScript concepts to create a Fahrenheit to Celsius (and...

    Purpose of the assignment To apply simple JavaScript concepts to create a Fahrenheit to Celsius (and Celsius to Fahrenheit) conversion program. I need both please! What’s required of you. Having looked at some basic examples of JavaScript on http://www.w3schools.com and at the “simple math with forms/inputs and validation” example in detail , I would like you to now apply those concepts to create a simple page that lets users type in some temperature value in the Fahrenheit/Celsius scale and when...

  • Guess the number! You will create a program that will ask the user to guess a...

    Guess the number! You will create a program that will ask the user to guess a number between 1 and 10. The pseudocode is below. Be sure to import random at the beginning of your code and use a comment block explaining what your program does #Guess the number week 4 #Name: #Date: #Random number, loop while true #ask user for number. #if number is too high or too low, tell user, if they guessed it break out of loop...

  • This is for my Object Oriented Programming class, I know how to set it up in...

    This is for my Object Oriented Programming class, I know how to set it up in Python, but clueless in setting it up as Javascript. (1) Write a program that prompts the user for a positive integer and then prints a diamond pattern in which the number of asterisks on the middle line is equal to their entered integer. The example below printed if the user types in "3". * * * * * * * * *

  • JAVASCRIPT Create a simple web page that contains a JavaScript form that will allow the user...

    JAVASCRIPT Create a simple web page that contains a JavaScript form that will allow the user to answer 7 trivia questions. Your trivia game should contain: 2 text boxes 2 select dropdowns 2 multiple choice questions (using radio buttons, 4 options min) 1 choose-all-that-apply (checkboxes, 4 options min, one answer should be "None of the above"). No part-points for semi-correct answers. The questions can cover any topic you wish - but please keep it professional and easy enough that the...

  • Create the game hangman using c code: Program description In the game of hangman, one player...

    Create the game hangman using c code: Program description In the game of hangman, one player picks a word, and the other player has to try to guess what the word is by selecting one letter at a time. If they select a correct letter, all occurrences of the letter are shown. If no letter shows up, they use up one of their turns. The player is allowed to use no more than 10 incorrect turns to guess what the...

  • can this code be provided? Project #3 Introduction As you wrap up with JavaScript, let's put...

    can this code be provided? Project #3 Introduction As you wrap up with JavaScript, let's put together everything you've learned to make the classic game "Hangman" in a webpage. If you are unfamiliar with the rules of Hangman, the game works like this: A gallows is drawn on a surface, and Player 1 chooses a word that player 2 must guess. Empty dashes for each letter in the word are drawn next to the gallows (so a 7-letter word means...

  • Does anybody know what I am doing wrong? Even got the equation from Excel... Every few...

    Does anybody know what I am doing wrong? Even got the equation from Excel... Every few years, the National Assessment of Educational Frogress asks a national sample of eighth-gracers to perform the same matn tasks. The g0 is to get an honest picture of progress in mธ廿. Suppose these are the last few national mean scores, on scale cr u to SOD. 2013 rear Score 265 200 280 285 287 (a] Make a time plot of the meer scores, by...

  • Please help me with this project by using Android Studio. I need to know the xml...

    Please help me with this project by using Android Studio. I need to know the xml and the java activities in both activities. Also the manifest activity. I appreciate the effort and I'll rate you with 5 stars. 1. SUMMARY This project will simulate the card game Concentration for one player. In Concentration, all cards, or pictures in this case, are upside down. Two cards are chosen, and if they match they are taken out of the game. If they...

ADVERTISEMENT
Free Homework Help App
Download From Google Play
Scan Your Homework
to Get Instant Free Answers
Need Online Homework Help?
Ask a Question
Get Answers For Free
Most questions answered within 3 hours.
ADVERTISEMENT
ADVERTISEMENT