Sobre a Aula
Project 4: Guessing Game
Description: This project is a simple guessing game where the user tries to guess a random number.
Requirements:
- The project should generate a random number between 1 and 100.
- The project should allow the user to enter a guess.
- The project should inform the user if the guess is correct, high, or low.
Steps:
- Create a directory for the project:
mkdir guessing-game
- Install dependencies:
npm install vue
- Create initial files:
touch index.html touch main.js touch style.css
- Implement the code:
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Guessing Game</title> </head> <body> <div id="app"> <h1>Guessing Game</h1> <p>Try to guess a number between 1 and 100.</p> <input type="number" v-model="guess"> <button @click="guessNumber">Guess</button> <p v-if="correct"> Congratulations! You guessed it! </p> <p v-else-if="guess < number"> Your guess is too low. </p> <p v-else> Your guess is too high. </p> </div> </body> </html>
JavaScript
import Vue from 'vue'; export default { name: 'App', data() { return { number: Math.floor(Math.random() * 100) + 1, guess: '', correct: false, }; }, mounted() { }, methods: { guessNumber() { this.correct = this.number === this.guess; }, }, };
CSS
body { font-family: sans-serif; }
- Run the project:
npm run serve
This project will display the following screen:
Guessing Game Try to guess a number between 1 and 100. -
Challenges:
- Add functionality to allow the user to play again after guessing the number correctly.
- Add functionality to allow the user to see the number the computer chose.
Conclusion:
This project is a good way to practice the concepts learned in the course, such as:
- Using
v-model
attributes to bind component data to the user interface. - Component methods to perform actions.
- Random functions.
Evaluation:
To evaluate this project, you can consider the following criteria:
- Does the project meet the specified requirements?
- Is the code well-written and organized?
- Is the project functional and intuitive?
Suggestions:
If you want to make this project more challenging, you can add the following features:
- Allow the user to select the range of numbers to guess.
- Allow the user to play against a friend.
- Allow the user to save their score history.
Entrar na conversa