A closer look at functions

Challenge # 1. Udemy JavaScript Jonas S

by trentHarlem

HTML

<h1>
//////////////////////
// Coding Challenge #1
</h1>
 <button class="poll">Answer poll ⁉️</button>
<p>
Let's build a simple poll app!<br>
<br>
A poll has a question, an array of options from which people can choose, and an array with the number of replies for each option. This data is stored in the starter object below.
<br>
Here are your tasks:
<br>
<p>
1. Create a method called 'registerNewAnswer' on the 'poll' object. The method does 2 things:
  1.1. Display a prompt window for the user to input the number of the selected option. The prompt should look like this:
  </p>
  <blockquote>
         What is your favourite programming language?
<br>
        0: JavaScript<br>
        1: Python<br>
        2: Rust<br>
        3: C++<br>
        (Write option number)
  </blockquote>
 <p>
   1.2. Based on the input number, update the answers array. For example, if the option is 3, increase the value AT POSITION 3 of the array by 1. <br>
   Make sure to check if the input is a number and if the number makes sense (e.g answer 52 wouldn't make sense, right?)
 </p>
  <p>
2. Call this method whenever the user clicks the "Answer poll" button.
</p>
<p>
3. Create a method 'displayResults' which displays the poll results. The method takes a string as an input (called 'type'), which can be either 'string' or 'array'. If type is 'array', simply display the results array as it is, using console.log(). <br>
This should be the default option. If type is 'string', display a string like "Poll results are 13, 2, 4, 1". 
</p>
<p>
4. Run the 'displayResults' method at the end of each 'registerNewAnswer' method call.
</p>
HINT: Use many of the tools you learned about in this and the last section 😉
<br>
<br>
BONUS: Use the 'displayResults' method to display the 2 arrays in the test data. Use both the 'array' and the 'string' option. Do NOT put the arrays in the poll object! So what shoud the this keyword look like in this situation?<br>

BONUS TEST DATA 1: [5, 2, 3]<br>
BONUS TEST DATA...

CSS

body {
  font: 400 1.1em system-ui;
}
.poll {
  font-size: 1rem;
  padding: 0.5rem 1rem;
  position: relative;
  top: 0.75rem;
}

JavaScript

// prompt / alert odd behavior on fiddle..(?). 
//finished on local. working. codeProjects/challenges/poll

//let pollString;
const poll = {

  question: 'What is your favorite programming language?',

  options: ['0: JavaScript', '1: Python', '2: GanjaScript', '3: C++'],

  answers: new Array(4).fill(0),

  // 3. 
  displayResults(type = 'string') {
    pollString = [...poll.answers];
    (type === 'array') ?
    console.log('Poll Results', poll.answers):
      console.log(`Poll Results are ${pollString}`)
  },

  // 1. create a method that displays prompt
  registerNewAnswer() {

    const newAnswer = Number(prompt(`${poll.question}\n${poll.options.join('\n')}(Write option number)`))
    //.padStart(20)
    // 1.2 added Number() to prompt to convert string to number
    typeof newAnswer === 'number' && newAnswer >= 0 && newAnswer <= 3 && poll.answers[newAnswer]++;


    /*   // add if statement to filter out invalid.
             alert(`Invalid Response. 
           Please Select one of the available options: 0, 1, 2, or 3.`) */

    // 4. run display results at the end of registerNewAnswer call.
    poll.displayResults('array')

  },
}

const register = poll.registerNewAnswer.bind(poll);
const pollButton = document.querySelector('.poll');
//     2.   Added event listener to call method on click.
pollButton.addEventListener('click', register);


// { [5, 2, 3], 'string' }
// { [1, 5, 3, 9, 6, 1], 'string' }







//disable Enter Key

/*  if (e.keyCode === 13 || e.which === 13) {
   e.preventDefault();
   //return false;
   } */

/*   window.addEventListener('keydown',function(e){if(e.keyIdentifier=='U+000A'||e.keyIdentifier=='Enter'||e.keyCode==13){if(e.target.nodeName=='INPUT'&&e.target.type=='text'){e.preventDefault();return false;}}},true); */