펑션과 코딩의 행방불명
[Javascript] 전화번호 입력 불가 사이트 본문
노마더 코드님의 강좌를 따라하다가 스크롤바가 나오길래 예전에 봤던 짤을 따라 만들고 싶어서 바로 제작했다. ㅎㅎ
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<!--Here-->
<h1 id="displayNumber">Hi</h1>
<input style="width: 50%;" id="inputNumber" type="range"
min="1" value="0" max="99999999" step="0.01"/>
<!--Here-->
</body>
<script src="script.js"></script>
</html>이렇게 입력하는 부분과 출력하는 부분을 만들어 준다.
const inputNumber = document.getElementById("inputNumber")
const displayNumber = document.getElementById("displayNumber")JS에서 건들수 있게 상수로 받아주고
inputNumber.addEventListener("change", (event) => {
displayNumber.innerText=`Your Phone Number : ${splitNumber(inputNumber.value)}`
})이벤트도 추가 해준다. 여기서 splitNumber 함수는 전화번호에 "11298"을 입력하면 "0001-1298" 이런식으로 바꿔주는 것이다.
간단하게 완성! 코딩하다가 아이디어가 떠오르면 즉각즉각 처리하는게 코딩의 재미!
소스코드 : https://github.com/Function1790/Input_Your_Phonenumber
GitHub - Function1790/Input_Your_Phonenumber: LOL
LOL. Contribute to Function1790/Input_Your_Phonenumber development by creating an account on GitHub.
github.com
'Web Projects > Frontend' 카테고리의 다른 글
| [JS Canvas] 두 벡터의 합성 (0) | 2022.08.13 |
|---|---|
| JS에서 Canvas Blur(흐림)효과 없애는 법 (0) | 2022.08.13 |
| [JS Canvas] 물리엔진 - 움직임 (0) | 2022.08.12 |
| SWDC - 프론트엔드 스터디 (0) | 2022.08.05 |
| [Javascript] 글자 타이핑 연출 (0) | 2022.07.31 |
'Web Projects/Frontend' Related Articles
more
Comments