anaguerraabaroa / random-number

:iphone: :woman: :computer: Random Number APP || Developed with HTML5, CSS3 and JavaScript || Half Module 2 Project of the Adalab Digital Frontend Development Bootcamp

<Hi, I'm Ana!!/>

Development and learning have always been my greatest motivation to grow profesionally.

These concerns have led me to explore different profesional sectors such as event management services, web content product and data improvement management or third parties APIs intregration projects as Product Owner, until discover my new passion as Front-end Developer.

Taking part in national and international projects with interdisciplinary environments and teams under an agile/scrum framework has provided me with an opportunity to learn about planning and tasks organization, decision making, and perseverance to achieve goals.

<A little bit more/>

<Tech Stack & Tools/>

<Learning/>

<Projects/>

random-number's Issues

Evaluación Intermedia

Really cool job @anaguerraabaroa !!!

Here you have some tips to improve the exercise:

JavaScript: basic

• Define the logic to make the counter work.
• 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.
• 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.
• 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)?

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.

Good practices

• Indent and avoid extra white spaces to improve readability and prevent bugs.
• Try to improve your commits messages. "Add JS" is a bit poor. "Add random number logic" is more explanatory.

Structure

• Define a good structure of folders and files for the project.
• CSS and JS path must to start with ./.

HTML

• 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.

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 ;)

1. Save a reference to DOM elements in variables.
2. Generate the random number and save it to a variable.
3. Init counter of trials to 0.
4. 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.

5. 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
--