In the realm of interactive JavaScript projects, there's a fascinating game that combines speech recognition and number guessing, offering users an engaging experience. This project entails speaking out a randomly generated number and challenging players to guess the correct number based on the auditory cue. It's a blend of technology, fun, and cognitive challenge, making it an intriguing endeavour for developers and players alike.
In the dynamic world of web development, mastering JavaScript opens up a realm of possibilities. Beyond just building websites and web applications, JavaScript projects serve as invaluable tools for enhancing your skills and bolstering your resume. Let's explore how undertaking JavaScript projects can be a transformative journey, enriching both your skill set and your professional profile.
Enhancing Skills through JavaScript Projects:
- Problem-Solving Abilities:JavaScript projects present a myriad of challenges, from debugging code to implementing complex features. By tackling these challenges, developers hone their problem-solving skills, learning to approach issues systematically and creatively.
- Critical Thinking: Building JavaScript projects requires careful planning, logical reasoning, and strategic decision-making. Developers learn to analyze problems, identify solutions, and anticipate potential pitfalls, fostering a robust mindset of critical thinking and analytical reasoning.
- Technical Proficiency:JavaScript projects provide hands-on experience with various libraries, frameworks, and tools, deepening developers' technical expertise. Whether it's mastering front-end frameworks like React or Vue.js, or delving into back-end technologies like Node.js, developers sharpen their skills across the full stack of web development.
- Collaboration and Communication:Many JavaScript projects involve teamwork and collaboration, requiring developers to communicate effectively, delegate tasks, and coordinate efforts. By working in collaborative environments, developers enhance their interpersonal skills, learning to thrive in diverse and dynamic teams.
- Continuous Learning:JavaScript is a rapidly evolving language, with new features, updates, and best practices emerging regularly. Engaging in JavaScript projects fosters a culture of continuous learning, encouraging developers to stay updated with the latest developments, explore new technologies, and expand their knowledge horizons.
Create a file named index.html and paste the below code there.
The below code is .Html file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="style.css" />
<title>Speak Number Guess</title>
</head>
<body>
<img src="img/mic.png" alt="Speak" />
<h1>Guess a Number Between 1 - 100</h1>
<h3>Speak the number into your microphone</h3>
<div id="msg" class="msg"></div>
<script src="script.js"></script>
</body>
</html>Create a file named script.js and paste the below code there.
The below code is .Js file.
const msgEl = document.getElementById('msg');
const randomNum = getRandomNumber();
console.log('Number:', randomNum);
window.SpeechRecognition =
window.SpeechRecognition || window.webkitSpeechRecognition;
let recognition = new window.SpeechRecognition();
// Start recognition and game
recognition.start();
// Capture user speak
function onSpeak(e) {
const msg = e.results[0][0].transcript;
writeMessage(msg);
checkNumber(msg);
}
// Write what user speaks
function writeMessage(msg) {
msgEl.innerHTML = `
<div>You said: </div>
<span class="box">${msg}</span>
`;
}
// Check msg against number
function checkNumber(msg) {
const num = +msg;
// Check if valid number
if (Number.isNaN(num)) {
msgEl.innerHTML += '<div>That is not a valid number</div>';
return;
}
// Check in range
if (num > 100 || num < 1) {
msgEl.innerHTML += '<div>Number must be between 1 and 100</div>';
return;
}
// Check number
if (num === randomNum) {
document.body.innerHTML = `
<h2>Congrats! You have guessed the number! <br><br>
It was ${num}</h2>
<button class="play-again" id="play-again">Play Again</button>
`;
} else if (num > randomNum) {
msgEl.innerHTML += '<div>GO LOWER</div>';
} else {
msgEl.innerHTML += '<div>GO HIGHER</div>';
}
}
// Generate random number
function getRandomNumber() {
return Math.floor(Math.random() * 100) + 1;
}
// Speak result
recognition.addEventListener('result', onSpeak);
// End SR service
recognition.addEventListener('end', () => recognition.start());
document.body.addEventListener('click', e => {
if (e.target.id == 'play-again') {
window.location.reload();
}
});Create a file named style.css and paste the below code there.
The below code is .Css file.
* {
box-sizing: border-box;
}
body {
background: #2f3542 url('img/bg.jpg') no-repeat left center/cover;
color: #fff;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
h1,
h3 {
margin-bottom: 0;
}
p {
line-height: 1.5;
margin: 0;
}
.play-again {
padding: 8px 15px;
border: 0;
background: #f4f4f4;
border-radius: 5px;
margin-top: 10px;
}
.msg {
font-size: 1.5em;
margin-top: 40px;
}
.box {
border: 1px solid #dedede;
display: inline-block;
font-size: 30px;
margin: 20px;
padding: 10px;
}Conclusion
In conclusion, JavaScript projects are not just about building websites and applications; they are transformative experiences that enhance your skills, expand your knowledge, and elevate your resume. By undertaking JavaScript projects, developers embark on a journey of growth, learning, and self-improvement, unlocking new opportunities and possibilities along the way. So, roll up your sleeves, dive into JavaScript projects, and watch your skills and resume reach new heights!
"Keep your eyes peeled for upcoming projects that will supercharge your development journey and propel your skills to new heights!"
Download Code
