Some improvements

[ytaylordev]

Good job @Virlucero !!!

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] Define the logic to make the counter work.
• [x] Extract the feedback painter to a function.
• [x] Check if the number is less than 1 or greater than 100.
• [x] 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: https://github.com/Adalab/modulo-2-evaluacion-intermedia-Virlucero/blob/07d5b4a881e4caab188fc71acb9b99ce1d15e9d2/main.js#L34
• [x] If we repeat several times parseInt(value) within a function it is better set it in a constant.
• [x] Remove debugger and other unnecessary code.
• [x] Add semicolons to the end of all statements.

JavaScript: advanced

• [x] Check if the <input> has an empty value or text.
• [ ] 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'?

JavaScript: good practices

• [x] Move variables and constants declarations to the top of the file: https://github.com/Adalab/modulo-2-evaluacion-intermedia-Virlucero/blob/07d5b4a881e4caab188fc71acb9b99ce1d15e9d2/main.js#L22-L25

Good practices

• [x] Try to improve your commits messages. "Add btn" is a bit poor.

Structure

• [ ] Define a good structure of folders and files for the project.

HTML

• [ ] Add HTML elements for the game: title, label, input, button, space for feedback (div, p) and number of trials.
• [ ] 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.
• [ ] Inputs must have a type attribute set to a valid value (text, number, mail, button..).

CSS

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

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

[Virlucero]

gracias! Me pondré este fin de semana