유데미에서 Brad Traversy의 20 Web Projects With Vanilla JavaScript
를 하나씩 직접 코딩해보면서 정리하기 위한 글이다.
데모 페이지
vanillawebprojects.com/projects/speak-number-guess/
코드 링크
github.com/rshak8912/20-Web-Projects
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css" />
<title>Speak Number Guess</title>
</head>
<body>
<img src="img/mic.png" alt="Speak" />
<h1>1부터 100 사이의 숫자 추측</h1>
<h3>Speak the number into your microphone</h3>
<div id="msg" class="msg"></div>
<script src="script.js"></script>
</body>
</html>style.css
* {
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;
}
script.js
const msgEl = document.getElementById('msg');
const randomNum = getRandomNumber();
console.log('Number:', randomNum);
window.SpeechRecognition =
window.SpeechRecognition || window.webkitSpeechRecognition;
let recognition = new window.SpeechRecognition();
recognition.start();
function onSpeak(e) {
const msg = e.results[0][0].transcript;
writeMessage(msg);
checkNumber(msg);
}
const writeMessage = (msg) => {
msgEl.innerHTML = `
<div>You said: </div>
<span class="box">${msg}</span>
`;
}
function checkNumber(msg) {
const num = +msg;
if (Number.isNaN(num)) {
msgEl.innerHTML += '<div>That is not a valid number</div>';
return;
}
if (num > 100 || num < 1) {
msgEl.innerHTML += '<div>Number must be between 1 and 100</div>';
return;
}
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>';
}
}
function getRandomNumber() {
return Math.floor(Math.random() * 100) + 1;
}
recognition.addEventListener('result', onSpeak);
recognition.addEventListener('end', () => recognition.start());
document.body.addEventListener('click', e => {
if (e.target.id == 'play-again') {
window.location.reload();
}
});
강의를 통해 배운 점(생각, 내용 정리)
- SpeechRecognition 웹 API를 사용해 볼 수 있었음.
'HTML&CSS&Javascript' 카테고리의 다른 글
| [Udemy]20 Web Projects With Vanilla JavaScript -Project#19 (0) | 2021.01.01 |
|---|---|
| [Udemy]20 Web Projects With Vanilla JavaScript -Project#18 (0) | 2021.01.01 |
| [Udemy]20 Web Projects With Vanilla JavaScript -Project#17 (0) | 2021.01.01 |
| [Udemy]20 Web Projects With Vanilla JavaScript -Project#16 (0) | 2021.01.01 |
| [Udemy]20 Web Projects With Vanilla JavaScript -Project#15 (0) | 2021.01.01 |