When user clicks on button their XP/ experience level raises by 1 each time?

Question

I want to have a”DONE” button that when clicked it will update the users Xp score by 1 point, and when the Xp gets up to 100 it will show them a screen that says “congratulations! You leveled up. You are now level 1.”

Is this possible in HTML?

Answer 1

that was exactly what i needed just the perfect most helpful instructions so that i can now work on writing the code!!! thank you again

Answer 2

Surely! The steps are:

HTML :

1) Create a button using the button tag and give it an id.

JS : (Although you haven’t learnt yet, you can mess around with the instructions)

2) Create a new variable named 'xp' and set the initial value as 0.

3) Set an onclick event listener to the button you defined using html

4) Now every time the button is clicked, the 'xp' will be increased by one.

5) Use an 'if' condition to check if the xp is greater than 100. If so, alert the congratulation message!

Answer 3

It is obviously possible but not only with html, you'll have to use a bit of javascript too. It’s just not recommended to write the code for you. You can start it yourself and we'll be there to help you with your doubts.

Answer 4

okay thank you, i havent learned javascript yet. just finished HTML and now onto CSS.

could you maybe give me direction? if not its ok! ty for replying!

Answer 5

thank you!!!!!!!

Answer 6

my only problem is the xp wont stay after i close and reload the page :(