Death predictor using basic javascript

Death predictor using basic javascript
0.0 0

#1

predict your doom’s day using my web app DEATH PREDICTOR
let me know what did you get.
me?
it says i am gonna live to an age of 83.


#2

Fun quiz! If a little morbid… I got 73 :skull_and_crossbones:

At the moment, all your data (the choices and their corresponding modifiers) is stored in attributes in your HTML. Instead, consider creating the UI dynamically from the data. Pseudocode example:

questions = [{question: 'What continent do you live on?', answers: [{name: 'Europe', val: 77}, ...]}, ...];

//create the UI
//increment/decrement score on user input and show the next question
//then display final score to user after all questions answered

#3

You have six functions that contain 95% duplicate code. You could easily write a single function to handle all the clicks. See if you can figure out how to do that. If you get stuck, we can help guide you.


#4

am new to javascript, i would be really glad if anyone can tell me how? because in each function i got the elements by ids, i tried ways to use the id’s in some sequence so that i do not have to write it again and again but it did not work, but still, i will definately make changes soon, thank you!!!


#5

@lionel-rowe i am new to js and was troubled getting values out of onclick function, it would be great if you can show how do i get the value out of arrey when the button is clicked


#6

I will show you how to make one function. However, first you need to make sure you surround the values of each button’s value attribute with single or double quotes and do not put spaces between the numbers. Earlier when I viewed your code, you had a button with value = 7 7. It should be value=“77”.

For the first 6 questions, your code is 99% the same. The only big difference between the first 6 questions and the last question, is the alert and final display of the age.

You currently are calling the same function for each set of question buttons when a button is clicked. An example is onclick="change2(this)". Below is a modified version of your getAge function which accomplishes everything you the 7 existing functions were doing. You will notice I changed the name of the first parameter to be more descriptive of what it represents. You are passing in the button element, so I named it button. I added a second (optional) parameter named finalQuestion which I will explain later.

The first 6 set’s of buttons will still have a similar call as you are making now: onclick="getAge(this)", but the last set of button’s of the final question, will need a call of onclick="getAge(this, true)". The true value tells the function that this is the last question, so we will do something extra.

function getAge(button, finalQuestion){
  button.parentNode.style.display='none';
  button.parentNode.nextElementSibling.style.display='grid';
  age += Number(button.value);
  if (finalQuestion) {
    displayAge();
  }
}

function displayAge() {
  alert("taking you to the result page, it's just a prgram's prediction,please don't take anything seriously,although i can already see possible trolls.")
  document.getElementById("agehere").innerHTML = age; 
  document.body.style.background = "#000";
}

Let’s examine what each line of the getAge function does.

The first line (seen below) assigns the display property of the button’s parent element (the current div holding the button) to ‘none’.

  button.parentNode.style.display='none';

The second line (seen below) targets the next sibling element (the next div element) of the button’s parent element (the current div holding the button) assigns the display property of the button’s parent element to ‘grid’

  button.parentNode.nextElementSibling.style.display='grid';

The third line (seen below) adds the numeric value of the current button’s value attribute to the age’s current value and assigns the result back to age.

  age += Number(button.value);

The fourth, fifth, and six lines (seen below) is just a simple if statement which checks to see if the finalQuestion argument is equal to true. If it is, then we call the displayAge function (a separate function I created) which displays the alert, updates the inner html of the element with id=“agehere”, and changes the body’s background color to “#000”.

  if (finalQuestion) {
    displayAge();
  }

There is another approach to this project which would use Event Delegation to avoid having all the individual onclick handlers on each button, but I will let you read up on that subject on your own.

Hopefully, you have learned how to make your code DRY (Do No Repeat Yourself) and some new JavaScript functionality which you can apply to other future projects.

If you have any followup questions about anything I have written here, let me know.


#7

@randelldawson Thank you very much sir, you enlightned me here, i had to search various places for javascript that i needed to get my idea into reality, i had no idea something like parentNode and nextElementSibling could be used.
But i will keep further doubts to myself for now and will start the javascript challanges as soon a i have completed the responsive web dev projects, DO you have any other suggestion besides freecodecamp, perhaps a book or something like that so that i can get a clear and better understanding of javascript?
thanks again, and can i use the code you have provided?
if i can, how do i mention you?


#8

I was playing around with a solution which only uses JavaScript to dynamically generate everything as suggested by @lionel-rowe. I also only used a single click event handler instead of attaching an event handler to each individual button. This uses less resources and is more efficient.