| ์ผ | ์ | ํ | ์ | ๋ชฉ | ๊ธ | ํ |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | ||
| 6 | 7 | 8 | 9 | 10 | 11 | 12 |
| 13 | 14 | 15 | 16 | 17 | 18 | 19 |
| 20 | 21 | 22 | 23 | 24 | 25 | 26 |
| 27 | 28 | 29 | 30 | 31 |
- carousel slider
- ํ๋ก๊ทธ๋๋จธ์ค
- javascript
- ์ธ๋ผ์ธ
- ์ฝ๋ฉํ ์คํธ
- ์๋ฐ์คํฌ๋ฆฝํธ
- js
- layout
- object
- ์ธ๋ผ์ธ๋ธ๋ก
- ํฉ๊ณ ์๊ณ ๋ฆฌ์ฆ
- vscode
- float
- SASS
- ์ ๊ฐ์ฐ์ฐ์
- VSCODE๋จ์ถํค
- HTML
- css
- scss
- Em
- ::before
- @mixin
- ํ๋ก๊ทธ๋๋จธ์ค ์ฝ๋ฉํ ์คํธ
- input
- TAG
- ์๊ณ ๋ฆฌ์ฆ
- string
- inline
- ๋ฌธ์์ด
- html ํ๊ทธ
- Today
- Total
Outputor
369๊ฒ์ ๋ณธ๋ฌธ
369๊ฒ์
- [x] 3์ ๋ฐฐ์์ด๋ฉด ๋ฐ์๋ฅผ ์น๋ค
- [x] 3,6,9๊ฐ ๋ค์ด๊ฐ๋ฉด ๋ฐ์๋ฅผ ์น๋ค
- [x] 1๋ถํฐ ๋ง์ง๋ง๊น์ง ์ด ๋ช๋ฒ์ ๋ฐ์๋ฅผ ์น๋์ง ๊ตฌํ์์ค
HTML
<!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>Document</title>
<link rel="stylesheet" href="./threeSixNine.css" />
<script src="./threeSixNine.js" defer></script>
</head>
<body>
<h1>369๊ฒ์</h1>
<p>๋ฐ์์น ์ด ํ์: <span class="clap">0</span></p>
<input type="text" placeholder="๋ง์ง๋ง ์ซ์๋ฅผ ์
๋ ฅํ์ธ์" />
</body>
</html>
CSS
input {
width: 280px;
padding: 12px 0;
border: none;
outline: none;
background-color: #e7f5ff;
box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
font-size: 20px;
padding-left: 10px;
margin-bottom: 10px;
}
input::-webkit-input-placeholder {
font-size: 20px;
font-weight: bold;
padding-left: 10px;
}
p {
font-size: 18px;
font-weight: bold;
color:#22b8cf;
}
span {
color:#0b7285;
}
JS
const $ = (selector) => document.querySelector(selector);
const number = [];
let sum = 0;
let inputLastNumber = '';
$('input').addEventListener('input', () => {
inputLastNumber = $('input').value;
});
$('input').addEventListener('keydown', function (e) {
if (e.key !== 'Enter') {
return;
}
settingNumber(inputLastNumber);
});
const settingNumber = (num) => {
for (let i = 1; i <= num; i++) {
number.push(i.toString());
}
for (let i = 0; i < number.length; i++) {
if (
number[i] % 3 === 0 ||
number[i].indexOf(3) !== -1 ||
number[i].indexOf(6) !== -1 ||
number[i].indexOf(9) !== -1
) {
sum++;
number.splice(i, 1);
i--;
}
}
$('.clap').textContent = sum;
console.log(number);
number.splice(0);
sum = 0;
};
indexOf
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf
Array.prototype.indexOf() - JavaScript | MDN
indexOf() ๋ฉ์๋๋ ๋ฐฐ์ด์์ ์ง์ ๋ ์์๋ฅผ ์ฐพ์ ์ ์๋ ์ฒซ ๋ฒ์งธ ์ธ๋ฑ์ค๋ฅผ ๋ฐํํ๊ณ ์กด์ฌํ์ง ์์ผ๋ฉด -1์ ๋ฐํํฉ๋๋ค.
developer.mozilla.org
toString
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/toString
Object.prototype.toString() - JavaScript | MDN
The toString() ์ ๋ฌธ์์ด์ ๋ฐํํ๋ object์ ๋ํ์ ์ธ ๋ฐฉ๋ฒ์ด๋ค
developer.mozilla.org
splice
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/splice
Array.prototype.splice() - JavaScript | MDN
splice() ๋ฉ์๋๋ ๋ฐฐ์ด์ ๊ธฐ์กด ์์๋ฅผ ์ญ์ ๋๋ ๊ต์ฒดํ๊ฑฐ๋ ์ ์์๋ฅผ ์ถ๊ฐํ์ฌ ๋ฐฐ์ด์ ๋ด์ฉ์ ๋ณ๊ฒฝํฉ๋๋ค.
developer.mozilla.org
'๐ป ์๋ฐ์คํฌ๋ฆฝํธ ๐ป > JavaScript ์ ๋ฌธ' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| ์ ๊ท์ (0) | 2022.01.26 |
|---|---|
| ํผ ์ ์กํ ๋ ๊ฐ์ด ๊ณต๋ฐฑ์ธ ๊ฒฝ์ฐ ์ ์ก์ ๋ง๋ ๊ธฐ๋ฅ (0) | 2022.01.12 |
| UI ๋ง๋๋ 3๊ฐ์ง ๋ฒ์น (0) | 2022.01.12 |
