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
Note:
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.
Does anybody know how to create a score of increase and decrease using javascript ? I...
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 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 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...
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 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 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 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...
Create a new program, WordGuessingGame. Using a while loop, create a game for the user. The game requires the user to guess a secret word. The game does not end until the user guesses the word. After they win the game, they are prompted to choose to play again. The secret word that user must guess is "valentine". It is a case-sensitive analysis With each guess... If the guess does not have an equal number of characters, tell the user...
1. How does the brain "know" when to increase the breathing rate? What gas is the gas that "drives" our breathing rate when this gas goes up our breathing rate goes up 2. Why did lan creatures, like us, have to develop a respiratory system in the first place?
Later in the course we will also be using a JavaScript app called CalcPlot3D to visualize phase planes of systems of differential equations. [Note: It does not run on old browsers, but should work well on Chrome, Safari, and Firefox.] Just so you know, there is an older Java applet version of CalcPlot3D. As you will see near the end of my course, some of my example videos in the course are for the Java applet version, but I will...