Bet game javascript final project - need reviews


#1

Hi, so i finished my little game. is very simple, the idea is that user gets a random card between 1-10, as well as the comp, and the user needs to decide if he wants to bet and how much.
than the program tells him how much the comp got and if he won or lost.

this is the js code:
i want also to know how to put this on the website so it will be visible, becuse now it is only with pop - ups.
is there a way to make the game more visible?

thanks.

THE CODE:
_// start question var 'st'

var st = prompt("are you ready to play?\n If you do - let's go!\n if not, go home!", "enter 'yes' or 'no'").toLowerCase();

// the cards that go out.

var userCard = Math.floor(Math.random() * 10 + 1);

var compCard = Math.floor(Math.random() * 10 + 1);

// if we even play function?
var ifPlay = function() {
if (st === "yes") {
var youGot = prompt("you got " + userCard + "\n if you wnt to bet, enter your bet below.\nif not, enter 'no'.","enter 10,30,50 or 'no'").toLowerCase();

	// what hapenning for the user input

return betAmount();

} else {
	return alert("i guess you are a cowerd!");
}

};

// amount of bet function
var betAmount = function() {
switch (youGot) {
case "10":
return playGame();
break;
case "30":
return playGame();
break;
case "50":
return playGame();
break;
case "no":
return alert("No Game! let's try again!");
break;
default:
return youGot;
break;

	}

};

//play game function, declare whose the winner
var playGame = function() {
youGot = youGot;

if (userCard > compCard) {
	alert("you got " + userCard + ", comp got " + compCard + ". you won " + youGot * 2 + "$ !!");
}		else if (userCard < compCard) {
	alert("you got " + userCard + ", comp got " + compCard + ". you lost " + (youGot) + "$ !!");
} else {
	alert("The game is tie");
}

};

ifPlay();_


#2

Of course, you can. You need to add html structure and add js there. Also you can to use jQuery instead of native js. Did you found the solution? Do you need some help to build html?


#3

One way would be with innerHTML:

Have an HTML element with an ID that you want to can update with text:
<p id="update"></p>
Not having any text will make it essentially invisible.

Then, instead of using an alert, save the text as a variable:
if (userCard > compCard) {
result = "you got " + userCard + ", comp got " + compCard + ". you won " + youGot * 2 + "$ !!";
} else if (userCard < compCard) {
result = "you got " + userCard + ", comp got " + compCard + ". you lost " + (youGot) + "$ !!;
} else {
result = "The game is tie";
}

After saving it as a variable, use inner html to update it:
document.getElementById("update").innerHTML = result;
"update" is the ID of the element to be updated.

OR you can update it with the jQuery equivalent of innerHTML:
$("#update").html(result);

More info:
https://www.w3schools.com/jsref/prop_html_innerhtml.asp
https://www.w3schools.com/jquery/html_html.asp


#4

so this will make the game more visible and nice for use. I'll try it. thanks


#5

This is also the kind of thing you can use a framework for (like React or Vue). I'm not sure if a framework would make it any easier in this case, but if you're updating content a lot it can help.