Mejoras - Githubissues

Really cool job @Cris-ti-na !!!

Here you have some tips to improve the exercise:

JavaScript: basic

[x] Enable Strict mode by writing 'use strict' at the beginning of the js document.
[x] On page load, execute 'getRandomNumber' function and store the returned value on a constant to work with it later.
[x] Define the logic to generate and save the random number (remember we gave you a sample code).
[x] If you call 'getRandomNumer' function inside the event callback, you will be creating a new random number each time the user clicks the button. That makes the game really complex and the hints will not have sense. Let's generate the random number when the page loads instead.
[x] Define the logic to make the counter work.
[x] Don't use a return statement in a callback to return a value because it's not possible to get the value in the addEventListener.
[ ] Extract the feedback painter to a function.
[ ] Fix the if's structure: check for one option, then the other and then for the rest is enough with an else statement.
[ ] Check if the number is less than 1 or greater than 100.
[x] Don't use an object to resolve the counter, a good old constant will suffice ;)
[x] Watch out for selector names used in querySelector() methods... they must exist in our HTML code!!
[x] Remember that you can't reassign the value of a constant variable.
[x] Use ONE addEventListener for each event. If you need to execute multiple functions at once perhaps you can call them inside your unique handler.
[ ] Remember that every time we use .innerHTML or .value to get DOM content we receive a string. Sometimes we will need to use something like parseInt() to convert it to a number.
[ ] If we repeat several times parseInt(value) within a function it is better set it in a constant.
[x] Watch out for constant names used to save DOM references... Do we want to use the DOM reference or that DOM element content (innerHTML/value)?
[ ] Remove debugger and other unnecessary code

JavaScript: advanced

[ ] Move the feedback logic to a function and execute it on each click.
[ ] Move you counter logic into a function and execute it on each click.
[ ] You are writing many times "trackEl.innerHTML = 'something';", what about making a function that accepts a string as param and paints it into 'trackEl'?
[ ] Use ev.preventDefault() to prevent page reload.
[ ] Move ev.preventDefault() to first line of the function.

JavaScript: good practices

[x] Move variables and constants declarations to the top of the file.
[x] Use === instead of == for comparisons.
[x] Use addEventListener instead of onClick to register event listeners.

Good practices

[ ] Indent and avoid extra white spaces to improve readability and prevent bugs.
[ ] Remove unnecessary commented code.
[ ] Write your code in English!
[ ] Try to improve your commit messages, better in English and using imperative.
[ ] Try to use imperative for your commit messages. Ex. - > Fix central text.
[ ] Try to improve your commits messages. "Add JS" is a bit poor. "Add random number logic" is more explanatory.

Structure

[x] Link the external JS file correctly (watch the path!).
[x] Fix position of the script tag in the HTML (it should be at the end of the body, but inside it).
[ ] Define a good structure of folders and files for the project.
[ ] Remove unused files/folders from the project: node_modules, package-lock.json.
[ ] CSS and JS path must to start with ./.

HTML

[x] Add form
[x] Add HTML elements for the game: title, label, input, button, space for feedback (div, p) and number of trials.
[x] Use a label to define the content of the input.
[ ] Connect the label to the input using the for attribute of the label and the id of the input.
[ ] Use placeholder attribute instead of value one to show a field's hint.
[ ] Use placeholder.
[x] Inputs must have a type attribute set to a valid value (text, number, mail, button..).
[x] Don't add an empty attribute for no special reason: by adding an empty value attribute we are indeed setting it to a certain (empty) value, do we want to do that?

CSS

[ ] Avoid adding styles until the js code is solid as a rock.

Steps to finish the game (for those far from the solution)

You are close to the exercise solution, but here you have a steps guide to complete it anyway ;)

Save a reference to DOM elements in variables.
Generate the random number and save it to a variable.
Init counter of trials to 0.
Define a function that executes when the user clicks on the button, that

increments the counter and paints its value in the HTML.
collect the value of the HTML input and compare it with the random number.
- if they are equal, draw a 'You Win' message.
- if it's lower, draw a 'Too short' message.
- if it's higher, draw a 'Too long' message.

Assign a listener to the button click to execute the previous function.

Further challenges

Then you can improve the game as you please, here you have some ideas:

Add new feedback when the number is bigger than 100 or smaller than 0.
Manage when the user hits the button and the input is empty.
Make the input work when hitting enter key.
Add a reset button that cleans the input, the counter, writes the initial feedback and generates a new random number to play again!
Whatever you want!

Call to action

Let me know if you have any doubts ;)

Go for it!!

Do not close this issue until your teacher asks you to

Cris-ti-na / modulo-2-evaluacion-intermedia-Cris-ti-na

Mejoras #1