input란에 문장을 입력하면 뛰어쓰기(" ")를 기준으로 줄임말을 생성한다.
index.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>줄임말 프로그램</title>
</head>
<body>
<div style="padding: 100px 0 0 30px">
<input class="input" type="text">
<button>입력</button>
<div class="output"></div>
</div>
<script>
const input = document.querySelector(".input");
const output = document.querySelector(".output");
const button = document.querySelector('button');
function calculation(){
const inputString = input.value;
if(inputString == ''){
input.focus();
return;
}
input.value = '';
input.focus();
let temp = inputString;
let result = "";
for(let i=0; i<temp.split(" ").length; i++){
result += temp.split(" ")[i].charAt();
}
output.innerHTML = result;
}
button.addEventListener('click', () => {
calculation();
});
input.addEventListener('keypress', (event) => {
if(event.key === 'Enter'){
calculation();
}
});
</script>
</body>
</html>
'🗂️ Project Review' 카테고리의 다른 글
| [React] Github Profile Finder (1) | 2024.01.11 |
|---|---|
| [JavaScript] 사칙 연산 퀴즈 (0) | 2023.12.26 |
| [HTML&CSS] 네이버 메인 페이지 UI 일부 구현해보기 (0) | 2023.12.24 |
| [Java] Checksum Calculator (체크섬 계산기) (1) | 2023.12.23 |
| [Java] 연락처 관리 프로그램 (2) | 2023.12.09 |
input란에 문장을 입력하면 뛰어쓰기(" ")를 기준으로 줄임말을 생성한다.
index.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>줄임말 프로그램</title>
</head>
<body>
<div style="padding: 100px 0 0 30px">
<input class="input" type="text">
<button>입력</button>
<div class="output"></div>
</div>
<script>
const input = document.querySelector(".input");
const output = document.querySelector(".output");
const button = document.querySelector('button');
function calculation(){
const inputString = input.value;
if(inputString == ''){
input.focus();
return;
}
input.value = '';
input.focus();
let temp = inputString;
let result = "";
for(let i=0; i<temp.split(" ").length; i++){
result += temp.split(" ")[i].charAt();
}
output.innerHTML = result;
}
button.addEventListener('click', () => {
calculation();
});
input.addEventListener('keypress', (event) => {
if(event.key === 'Enter'){
calculation();
}
});
</script>
</body>
</html>
'🗂️ Project Review' 카테고리의 다른 글
| [React] Github Profile Finder (1) | 2024.01.11 |
|---|---|
| [JavaScript] 사칙 연산 퀴즈 (0) | 2023.12.26 |
| [HTML&CSS] 네이버 메인 페이지 UI 일부 구현해보기 (0) | 2023.12.24 |
| [Java] Checksum Calculator (체크섬 계산기) (1) | 2023.12.23 |
| [Java] 연락처 관리 프로그램 (2) | 2023.12.09 |
