๐ ๊ณต ์์น ํ๊ธฐ
ํ์ฌ ๋ชจ๋ ๊ณต์ ํฐ์์ด๋ค. ์ซ์์ ๋ฐ๋ผ ์์ ๋ฃ์ด ๋ณด์.
์ซ์๊ฐ 10 ๋ฏธ๋ง์ด๋ฉด ๋นจ๊ฐ์, 20 ๋ฏธ๋ง์ด๋ฉด ์ฃผํฉ์, 30 ๋ฏธ๋ง์ด๋ฉด ๋ ธ๋์, 40 ๋ฏธ๋ง์ด๋ฉด ํ๋์, 40 ๋ถํฐ๋ ์ด๋ก์ ๊ณต์ผ๋ก ๋ง๋ค์.
๊ณต์ด ๋นจ๊ฐ์, ํ๋์, ์ด๋ก์์ผ ๋๋ ๊ธ์๋ ํ์๊ฒ ๋ง๋ค์.
<script>
const candidate = Array(45).fill().map((v,i)=> i + 1); //45๊ฐ๋ฅผ ๋ฐฐ์ด์ ๋ด์๋๊ธฐ.
//shuffle ๋ฐฐ์ด์๋ค ๋๋ค์ผ๋ก ๋ฃ์ ๊ฒ์ด๋ค.
const shuffle = [];
while (candidate.length > 0){
const random = Math.floor(Math.random() * candidate.length); //๋ฌด์์ ์ธ๋ฑ์ค ๋ฝ๊ธฐ.
const spliceArray = candidate.splice(random , 1); //๋ฝ์ ๊ฐ์ ๋ฐฐ์ด์ ๋ค์ด ์์.
const value = spliceArray[0]; //๋ฐฐ์ด์ ๋ค์ด ์๋ ๊ฐ์ ๊บผ๋ด์ด,
shuffle.push(value); //shuffle ๋ฐฐ์ด์ ๋ฃ๊ธฐ.
}
console.log(shuffle);
//shuffle์์ ์์์ 6๊ฐ๋ฅผ ์๋ฅด๊ณ ,์ ๋ ฌ.
const winBalls = shuffle.slice(0,6).sort((a,b) => a - b);
const bonus = shuffle[6]; //์
ํ์์ 7๋ฒ์งธ
console.log(winBalls,bonus);
//์์ ๋ณ๊ฒฝ
//colorize ํจ์๊ฐ ์ซ์,ํ๊ทธ๋ฅผ ์ธ์๋ก ๋ฐ์ ์ฃผ์ด์ง ํ๊ทธ์ ์ซ์์ ๋ฐ๋ผ ๋ค๋ฅธ css ์ ์ฉ.
function colorize (number,$tag){
if (number < 10){
$tag.style.backgroundColor = 'red';
$tag.style.color = 'white';
} else if ( number < 20 ){
$tag.style.backgroundColor = 'orange';
} else if ( number < 30 ){
$tag.style.backgroundColor = 'yellow';
} else if ( number < 40 ){
$tag.style.backgroundColor = 'blue';
$tag.style.color = 'white';
} else {
$tag.style.backgroundColor = 'green';
$tag.style.color = 'white';
}
}
const $result = document.querySelector('#result'); //html ์ result๋ฅผ ์ ํํ๋ค.
//์ค๋ณต๋๋ ๊ฒ์ ํจ์๋ก ๋ฝ๊ธฐ.
function drawBall( number, $parent) {
const $ball = document.createElement('div'); //1์ด ๋ค์ div ํ๊ทธ๋ฅผ ๋ง๋ ๋ค
$ball.className = 'ball'; //divํ๊ทธ์ ํด๋์ค๋ค์์ ball๋ก ์ง์ ํ๋ค.
//html์์๋ class์ด์ง๋ง ์๋ฐ์คํฌ๋ฆฝํธ์์๋ className์ด๋ค.
colorize(number,$ball); //colorize ํจ์ ์คํ ๋ฐ ์ซ์์ ํ๊ทธ ์ธ์๋ก ๋ฐ๊ธฐ.
$ball.textContent = number; //๋ฝ์๋ ์ซ์๋ฅผ
$parent.appendChild($ball); //html ์ $parent ๋งค๊ฐ๋ณ์์ ์ถ๊ฐํ๋ค.
}
for(let i=0; i<winBalls.length; i++){ // 0๋ถํฐ winBalls.length -1 (5)๊น์ง ๋ฐ๋ณต.
setTimeout(() => {
drawBall(winBalls[i], $result); //ํจ์ ํธ์ถํด์ ์ธ์ ๋์
ํ๊ธฐ.
}, 1000 * (i + 1)); //์ฒซ๋ฒ์งธ ์ธ์์ ์ฝ๋๋ 1์ด x (i + 1) ๋ค์ ์์ํ๋ค.
}
//์ค๋ณต๋์ง ์๋ ๊ฒ์ ๋งค๊ฐ๋ณ์๋ก ๋ง๋ค๊ธฐ.
const $bonus = document.querySelector('#bonus'); //html ์ bonus๋ฅผ ์ ํํ๋ค.
setTimeout(() => {
drawBall(bonus, $bonus); //ํจ์ ํธ์ถํด์ ์ธ์ ๋์
ํ๊ธฐ.
}, 7000); //์ฒซ๋ฒ์งธ ์ธ์์ ์ฝ๋๋ 7์ด๋ค์ ์์ํ๋ค.
</script>
<!--์ฝ๋์ถ์ฒ (๋์) Let's Get IT ์๋ฐ์คํฌ๋ฆฝํธ ํ๋ก๊ทธ๋๋ฐ-->
๊ณต์ ์์ฑํ ๋ ์๋ ์ง์ ํด์ ๋ฃ์ผ๋ฉด ๋๋ค.
์ด์ฒ๋ผ ์๋ฐ์คํฌ๋ฆฝํธ๋ก๋ CSS ๋ฅผ ์กฐ์ํ ์ ์๋ค.
colorize ํจ์๊ฐ ์ซ์์ ํ๊ทธ๋ฅผ ์ธ์๋ก ๋ฐ์ ์ฃผ์ด์ง ํ๊ทธ์ ์ซ์์ ๋ฐ๋ผ ๋ค๋ฅธ CSS๋ฅผ ์ ์ฉํ๋ค.
๐ ์ ์ฒด ์ฝ๋
๋๋ณด๊ธฐ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>๋ก๋์ถ์ฒจ๊ธฐ</title>
<style>
.ball {
display: inline-block;
border: 1px solid black;
border-radius: 20px;
width: 40px;
height: 40px;
line-height: 40px;
font-size: 20px;
text-align: center;
margin-right: 20px;
}
</style>
</head>
<body>
<div id="result">์ถ์ฒจ ๊ฒฐ๊ณผ๋? </div>
<div id="bonus">๋ณด๋์ค: </div>
<script>
const candidate = Array(45).fill().map((v,i)=> i + 1); //45๊ฐ๋ฅผ ๋ฐฐ์ด์ ๋ด์๋๊ธฐ.
//shuffle ๋ฐฐ์ด์๋ค ๋๋ค์ผ๋ก ๋ฃ์ ๊ฒ์ด๋ค.
const shuffle = [];
while (candidate.length > 0){
const random = Math.floor(Math.random() * candidate.length); //๋ฌด์์ ์ธ๋ฑ์ค ๋ฝ๊ธฐ.
const spliceArray = candidate.splice(random , 1); //๋ฝ์ ๊ฐ์ ๋ฐฐ์ด์ ๋ค์ด ์์.
const value = spliceArray[0]; //๋ฐฐ์ด์ ๋ค์ด ์๋ ๊ฐ์ ๊บผ๋ด์ด,
shuffle.push(value); //shuffle ๋ฐฐ์ด์ ๋ฃ๊ธฐ.
}
console.log(shuffle);
//shuffle์์ ์์์ 6๊ฐ๋ฅผ ์๋ฅด๊ณ ,์ ๋ ฌ.
const winBalls = shuffle.slice(0,6).sort((a,b) => a - b);
const bonus = shuffle[6]; //์
ํ์์ 7๋ฒ์งธ
console.log(winBalls,bonus);
//์์ ๋ณ๊ฒฝ
//colorize ํจ์๊ฐ ์ซ์,ํ๊ทธ๋ฅผ ์ธ์๋ก ๋ฐ์ ์ฃผ์ด์ง ํ๊ทธ์ ์ซ์์ ๋ฐ๋ผ ๋ค๋ฅธ css ์ ์ฉ.
function colorize (number,$tag){
if (number < 10){
$tag.style.backgroundColor = 'red';
$tag.style.color = 'white';
} else if ( number < 20 ){
$tag.style.backgroundColor = 'orange';
} else if ( number < 30 ){
$tag.style.backgroundColor = 'yellow';
} else if ( number < 40 ){
$tag.style.backgroundColor = 'blue';
$tag.style.color = 'white';
} else {
$tag.style.backgroundColor = 'green';
$tag.style.color = 'white';
}
}
const $result = document.querySelector('#result'); //html ์ result๋ฅผ ์ ํํ๋ค.
//์ค๋ณต๋๋ ๊ฒ์ ํจ์๋ก ๋ฝ๊ธฐ.
function drawBall( number, $parent) {
const $ball = document.createElement('div'); //1์ด ๋ค์ div ํ๊ทธ๋ฅผ ๋ง๋ ๋ค
$ball.className = 'ball'; //divํ๊ทธ์ ํด๋์ค๋ค์์ ball๋ก ์ง์ ํ๋ค.
//html์์๋ class์ด์ง๋ง ์๋ฐ์คํฌ๋ฆฝํธ์์๋ className์ด๋ค.
colorize(number,$ball); //colorize ํจ์ ์คํ ๋ฐ ์ซ์์ ํ๊ทธ ์ธ์๋ก ๋ฐ๊ธฐ.
$ball.textContent = number; //๋ฝ์๋ ์ซ์๋ฅผ
$parent.appendChild($ball); //html ์ $parent ๋งค๊ฐ๋ณ์์ ์ถ๊ฐํ๋ค.
}
for(let i=0; i<winBalls.length; i++){ // 0๋ถํฐ winBalls.length -1 (5)๊น์ง ๋ฐ๋ณต.
setTimeout(() => {
drawBall(winBalls[i], $result); //ํจ์ ํธ์ถํด์ ์ธ์ ๋์
ํ๊ธฐ.
}, 1000 * (i + 1)); //์ฒซ๋ฒ์งธ ์ธ์์ ์ฝ๋๋ 1์ด x (i + 1) ๋ค์ ์์ํ๋ค.
}
//์ค๋ณต๋์ง ์๋ ๊ฒ์ ๋งค๊ฐ๋ณ์๋ก ๋ง๋ค๊ธฐ.
const $bonus = document.querySelector('#bonus'); //html ์ bonus๋ฅผ ์ ํํ๋ค.
setTimeout(() => {
drawBall(bonus, $bonus); //ํจ์ ํธ์ถํด์ ์ธ์ ๋์
ํ๊ธฐ.
}, 7000); //์ฒซ๋ฒ์งธ ์ธ์์ ์ฝ๋๋ 7์ด๋ค์ ์์ํ๋ค.
</script>
</body>
</html>
<!--์ฝ๋์ถ์ฒ (๋์) Let's Get IT ์๋ฐ์คํฌ๋ฆฝํธ ํ๋ก๊ทธ๋๋ฐ-->๋๋ณด๊ธฐ
-(๋์) Let's Get IT ์๋ฐ์คํฌ๋ฆฝํธ ํ๋ก๊ทธ๋๋ฐ
Let's Get IT ์๋ฐ์คํฌ๋ฆฝํธ ํ๋ก๊ทธ๋๋ฐ
๋๋ถ(TheBook): (์ฃผ)๋์์ถํ ๊ธธ๋ฒ์์ ์ ๊ณตํ๋ IT ๋์ ์ด๋ ์๋น์ค์ ๋๋ค.
thebook.io
-(๊ฐ์ข) ๋ ์ธ ๊ธฐ๋ฆฟ ์๋ฐ์คํฌ๋ฆฝํธ
https://www.inflearn.com/course/
[๋ฌด๋ฃ] [๋ฆฌ๋ด์ผ] ๋ ์ธ ๊ธฐ๋ฆฟ ์๋ฐ์คํฌ๋ฆฝํธ - ์ธํ๋ฐ | ๊ฐ์
๋ณธ ๊ฐ์์์๋ ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ํ์ฉํด ํ๋ก๊ทธ๋๋ฐ ์ฌ๊ณ ๋ ฅ์ ๊ธฐ๋ฅด๋ ์ฐ์ต์ ํฉ๋๋ค. ์น ๊ฒ์์ธ ๊ตฌ๊ตฌ๋จ์ ์์์ผ๋ก ๋๋ง์๊ธฐ, ์ซ์ ์ผ๊ตฌ, ๋ฐ์ ์๋ ํ ์คํธ, ํฑํํ , ๋ก๋ ์ถ์ฒจ๊ธฐ, ๊ฐ์๋ฐ์๋ณด, ์นด
www.inflearn.com
