Problem Solving
[JavaScript] Requirements Q28~35: Style
Isaac S. Lee
2023. 10. 12. 23:15
📌Requirements Q28: 클릭 위치에 이미지 출력 (단일)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="Author" content="in">
<meta name="Generator" content="Visual Studio Code">
<title>JavaScript</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css"
integrity="sha384-gfdkjb5BdAXd+lj+gudLWI+BXq4IuLW5IT+brZEZsLFm++aCMlF1V92rMkPaX4PP" crossorigin="anonymous">
<link rel="stylesheet" href="basic.css">
<style type="text/css">
.item {
position: absolute;
}
</style>
</head>
<body oncontextmenu='return false' ondragstart='return false' onselectstart='return false'>
<script type="text/javascript">
/*
.item {position:absolute;}
1. 클릭
2. var img = createElement("img")
3. img.style.left = event.clientX
3.5 A img.style.position = "absolute";
3.5 B img.setAttribute("class", "item");
4. body.appendChild(img)
*/
var item;
window.onload = function () {
window.onmousedown = function () {
img = document.createElement("img");
img.setAttribute("class", "item");
img.setAttribute("src", "../../asset/images/chromi.png");
img.style.left = (event.clientX - 64) + "px";
img.style.top = (event.clientY - 64) + "px";
document.body.appendChild(img);
}
};
</script>
<div style="display: none;">
<img src="../../asset/images/chromi.png">
</div>
</body>
</html>
📌Requirements Q29: 클릭 위치에 이미지 출력 (복합)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="Author" content="in">
<meta name="Generator" content="Visual Studio Code">
<title>JavaScript</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" integrity="sha384-gfdkjb5BdAXd+lj+gudLWI+BXq4IuLW5IT+brZEZsLFm++aCMlF1V92rMkPaX4PP" crossorigin="anonymous">
<link rel="stylesheet" href="basic.css">
<style type="text/css">
.item {
position: absolute;
}
</style>
</head>
<body oncontextmenu='return false' ondragstart='return false' onselectstart='return false'>
<!--
문서를 클릭하면 해당 위치에 이미지를 추가하시오.
m01.png ~ m10.png 무작위로 추가하시오.
이미지를 최대 10개까지 출력하시오.
10개가 넘어가면 오래된 순서대로 삭제하시오.
-->
<script type="text/javascript">
var item;
var imgCount = 0;
var firstImage = null;
window.onload = function() {
window.onmousedown = function () {
imgCount = 0;
var n = Math.floor(Math.random() * 9) + 1;
img = document.createElement("img");
img.setAttribute("class", "item");
img.setAttribute("src", "../../asset/images/m0"+ n + ".png");
img.style.left = (event.clientX - 64) + "px";
img.style.top = (event.clientY - 64) + "px";
document.body.appendChild(img);
//최대 10개
for (var i=0; i<document.body.children.length; i++) {
if (document.body.children[i].nodeName == "IMG") {
if (firstImage == null) {
firstImage = document.body.children[i];
}
imgCount++;
}
}
if (imgCount > 10) {
document.body.removeChild(firstImage);
firstImage = null;
}
}
};
</script>
</body>
</html>
📌Requirements Q30: 이미지 밀어내기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="Author" content="in">
<meta name="Generator" content="Visual Studio Code">
<title>JavaScript</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css"
integrity="sha384-gfdkjb5BdAXd+lj+gudLWI+BXq4IuLW5IT+brZEZsLFm++aCMlF1V92rMkPaX4PP" crossorigin="anonymous">
<link rel="stylesheet" href="basic.css">
<style type="text/css">
#main,
.main {
position: static;
}
#img1 {
position: absolute;
}
</style>
</head>
<body oncontextmenu='return false' ondragstart='return false' onselectstart='return false'>
<!--
마우스를 올려면 이미지를 이동시키시오.
마우스 접근 방향에 따라 이미지 이동 방향을 다르게 하시오.
-->
<img src="https://drive.google.com/uc?export=download&id=1dDsQDJ_Odyw26Ajw1f2HkxkocidBtJt4" id="img1" />
<script type="text/javascript">
var img1;
window.onload = function () {
img1 = document.getElementById("img1");
img1.style.left = "530px";
img1.style.top = "200px";
img1.onmouseover = function () {
var ox = parseInt(img1.style.left);
var oy = parseInt(img1.style.top);
if ((parseInt(event.clientX) >= ox + 60) && parseInt(event.clientX) <= ox + 120) {
img1.style.left = ox - 60 + "px";
}
if ((parseInt(event.clientX) <= ox + 60) && parseInt(event.clientX) >= ox) {
img1.style.left = ox + 60 + "px";
}
/*
if ((parseInt(event.clientY) >= oy + 50) && parseInt(event.clientY) <= oy + 100) {
img1.style.top = oy - 50 + "px";
}
if ((parseInt(event.clientY) <= oy + 50) && parseInt(event.clientY) >= oy) {
img1.style.top = oy + 50 + "px";
}
*/
}
};
</script>
</body>
</html>
📌Requirements Q33: 비밀번호 입력
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="Author" content="in">
<meta name="Generator" content="Visual Studio Code">
<title>JavaScript</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" integrity="sha384-gfdkjb5BdAXd+lj+gudLWI+BXq4IuLW5IT+brZEZsLFm++aCMlF1V92rMkPaX4PP" crossorigin="anonymous">
<link rel="stylesheet" href="basic.css">
<style>
#box {
width: 890px;
margin: 30px auto;
}
#secret {
border: 1px solid #aaa;
border-radius: 5px;
background-color: #eee;
float: left;
width: 500px;
}
#desc {
float: left;
width: 350px;
padding-left: 30px;
color: #555;
}
#desc li {
font-size: 16px;
margin-bottom: 5px;
}
#secret #pw {
border: 1px dashed #aaa;
font-size: 4.5em;
color: #555;
width: 390px;
display: block;
margin: 30px auto;
padding: 10px;
padding-left: 40px;
letter-spacing: .85em;
outline: none;
}
#secret #digit {
padding-left: 23px;
padding-bottom: 30px;
}
#secret #digit input {
display: block;
float: left;
border: 1px solid #ccc;
font-size: 5.5em;
text-align: center;
color: #555;
padding: 10px;
width: 140px;
height: 140px;
margin: 5px;
text-shadow: -1px -1px 2px gray;
background: white;/* linear-gradient(#ccc, white, #ccc); */
outline: none;
}
#secret #digit input:nth-last-child(2), #secret #digit input:nth-last-child(3) {
font-size: 2.5em;
}
</style>
</head>
<body oncontextmenu='return false' ondragstart='return false' onselectstart='return false'>
<!-- 보안키 입력패드를 구현하시오. -->
<div id="box">
<div id="secret">
<input type="text" id="pw" readonly maxlength="4">
<div id="digit">
<input type="button" value="7" name="num">
<input type="button" value="8" name="num">
<input type="button" value="9" name="num">
<input type="button" value="4" name="num">
<input type="button" value="5" name="num">
<input type="button" value="6" name="num">
<input type="button" value="1" name="num">
<input type="button" value="2" name="num">
<input type="button" value="3" name="num">
<input type="button" value="0" name="num">
<input type="button" value="del" name="del">
<input type="button" value="enter" name="enter">
<div style="clear:both;"></div>
</div>
</div>
<div id="desc">
<h1>비밀번호 입력</h1>
<h3>사용법</h3>
<ol>
<li>숫자 4자리를 입력한다.</li>
<li>enter를 누른다.</li>
</ol>
<h3>구현할 것</h3>
<ul>
<li>숫자 버튼을 눌러 입력한다.</li>
<li>del 버튼을 눌러 삭제한다.</li>
<li>4자리 이상 입력이 되지 않는다.</li>
<li>정답 암호 : 0427</li>
<li>암호가 틀리면 붉게 변한다.</li>
<li>암호가 맞으면 파랗게 변한다.</li>
<li>3회 틀리면 작동이 불가능하다.</li>
<li>상단 숫자키로 입력할 수 있다.</li>
<li>우측 숫자키로 입력할 수 있다.</li>
<li>백스페이스, Delete, Enter 키로 입력할 수 있다.</li>
</ul>
</div>
<div style="clear:both;"></div>
</div>
<script>
var num, pw, enter, del;
var maxCount = 0;
window.onload = function() {
num = document.all.num;
pw = document.all.pw;
enter = document.all.enter;
del = document.all.del;
for (var i=0; i<num.length; i++) {
num[i].onclick = function() {
if (pw.value.length < 4) {
pw.value += event.srcElement.value;
}
};
}
del.onclick = function() {
pw.value = pw.value.substr(0, pw.value.length-1);
document.bgColor = "white";
};
enter.onclick = function() {
if (pw.value == "0427") {
//alert("암호가 일치합니다.");
document.bgColor = "#66b3ff";
} else {
//alert("암호가 일치하지 않습니다.");
document.bgColor = "#ff8080";
if (maxCount >= 2) {
document.bgColor = "#bb0000";
del.onclick = null;
enter.onclick = null;
}
maxCount++;
}
};
};
window.onkeydown = function() {
var c = event.keyCode;
if (c == 49 || c == 97) {
num[6].click();
} else if (c == 50 || c == 98) {
num[7].click();
} else if (c == 51 || c == 99) {
num[8].click();
} else if (c == 52 || c == 100) {
num[3].click();
} else if (c == 53 || c == 101) {
num[4].click();
} else if (c == 54 || c == 102) {
num[5].click();
} else if (c == 55 || c == 103) {
num[0].click();
} else if (c == 56 || c == 104) {
num[1].click();
} else if (c == 57 || c == 105) {
num[2].click();
} else if (c == 48 || c == 96) {
num[9].click();
} else if (c == 13) {
enter.click();
} else if (c == 110 || c == 8 || c == 46) {
del.click();
}
};
</script>
</body>
</html>
📌Requirements Q34: 이미지 보관함
<!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">
<script src="https://kit.fontawesome.com/7121714adf.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="../../asset/question.css">
<title>Document</title>
<style>
body {
margin: 30px;
}
#tbl1 { border: 1px solid black; border-collapse: collapse; width: 1250px; }
#tbl1 td { border: 1px solid black; width: 250px; height: 188px; }
#tbl1 td img {
border-radius: 5px;
display: block;
}
#holder {
margin-top: 10px;
border: 1px solid black;
width: 250px; height: 188px;
}
.item {
position: absolute;
border-radius: 5px;
}
</style>
</head>
<body oncontextmenu='return false' ondragstart='return false' onselectstart='return false'>
<!--
고양이/강아지를 생성 후 테이블에 넣으시오.
만들기 버튼을 눌러 고양이/강아지를 생성합니다.
드래그로 이동시켜 테이블에 넣습니다.
테이블에 넣어진 고양이/강아지는 더 이상 이동이 불가능합니다.
document.elementFromPoint(x, y)
document.elementsFromPoint(x, y)
-->
<h1>고양이/강아지 보관함</h1>
<table id="tbl1">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<h2>만들기</h2>
<div>
<input type="button" value="고양이 만들기" id="btncat">
<input type="button" value="강아지 만들기" id="btndog">
</div>
<div id="holder"></div>
<script>
let isDown = false;
let x = 0;
let y = 0;
let item;
document.getElementById('btncat').addEventListener('click', function() {
create('cat');
});
document.getElementById('btndog').addEventListener('click', function() {
create('dog');
});
function create(name) {
document.getElementById('holder').innerHTML = '';
let n = parseInt(Math.random() * 5) + 1;
const img = document.createElement('img');
img.setAttribute('src', `../../asset/images/${name}0${n}.jpg`);
img.classList.add('item');
document.getElementById('holder').appendChild(img);
}
window.addEventListener('mousedown', function(event) {
if (event.target.classList.contains('item')) {
isDown = true;
x = event.offsetX;
y = event.offsetY;
item = event.target;
}
});
window.addEventListener('mousemove', function(event) {
if (isDown) {
item.style.left = event.clientX - x + 'px';
item.style.top = event.clientY - y + 'px';
event.stopPropagation();
return false;
}
});
window.addEventListener('mouseup', function(event) {
isDown = false;
let td = getTd(event);
if (td) {
td.appendChild(event.target);
event.target.classList.remove('item');
}
});
function getTd(event) {
//해당 포인트에 어떤 태그들이 존재하는지 확인
const list = document.elementsFromPoint(event.clientX, event.clientY);
for (let i=0; i<list.length; i++) {
if (list[i].nodeName == 'TD') {
return list[i];
}
}
}
</script>
</body>
</html>
📌Requirements Q35: 텍스트 입력 시 화면 진동
<!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">
<script src="https://kit.fontawesome.com/7121714adf.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="../asset/question.css">
<title>Document</title>
<style>
body {
margin: 30px;
}
#txt1 {
font-size: 3em;
width: 100%;
}
#tbl1 { border: 1px solid black; border-collapse: collapse; }
#tbl1 td { border: 1px solid black; padding: 4px; width: 100px; }
</style>
<script>
window.onload = function() {
document.getElementById("txt1").onkeydown = function() {
var m = [-5, 5, 0];
document.body.style.transform = "translate(" + (m[parseInt(Math.random() * 2)]) + "px, " + (m[parseInt(Math.random() * 2)]) + "px)";
setTimeout(function() {
document.body.style.transform = "translate(" + (m[parseInt(Math.random() * 2)]) + "px, " + (m[parseInt(Math.random() * 2)]) + "px)";
}, 5);
setTimeout(function() {
document.body.style.transform = "translate(0px, 0px)";
}, 20);
};
};
</script>
</head>
<body oncontextmenu='return false' ondragstart='return false' onselectstart='return false'>
<!-- 텍스트를 입력하면 화면을 진동시키시오. -->
<h1>제목입니다.</h1>
<input type="text" id="txt1" autofocus>
<hr>
<h2>다른 내용입니다.</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, molestias deserunt repudiandae quas odio quis incidunt? Esse unde cupiditate sed dolores ut natus corrupti, adipisci explicabo repudiandae quod dignissimos asperiores?</p>
<p>Excepturi consequatur architecto consequuntur impedit animi sint inventore rerum quas nemo officiis modi hic tenetur, sit aliquid earum! Ullam iusto, nam enim ea numquam atque a amet incidunt laboriosam est!</p>
<p>Eveniet obcaecati error ratione, ex iure laudantium distinctio itaque. Obcaecati amet, voluptatum fugit dignissimos repudiandae laboriosam ullam. Vitae perspiciatis veritatis qui repudiandae necessitatibus ab soluta saepe pariatur, blanditiis sit ipsam!</p>
<p>Eveniet ab totam consectetur! Possimus corporis ea quod quas debitis hic reprehenderit repellat? Velit quas totam officia in. Ratione, quasi! Molestiae tenetur laudantium maiores. Sit nesciunt distinctio minima nostrum dolorum.</p>
<h1>Table</h1>
<table id="tbl1">
<tr>
<td>Lorem, ipsum dolor.</td>
<td>Facere, autem ut.</td>
<td>Aliquid, veritatis repellat.</td>
<td>Eaque, expedita amet?</td>
<td>Ratione, dignissimos obcaecati!</td>
</tr>
<tr>
<td>Provident, ducimus reprehenderit?</td>
<td>Sunt, aspernatur dolorum?</td>
<td>Eum, magnam distinctio?</td>
<td>Animi, tempora quis.</td>
<td>Dignissimos, rerum explicabo?</td>
</tr>
<tr>
<td>Nulla, eum molestiae!</td>
<td>Ipsum, a necessitatibus!</td>
<td>In, numquam nam?</td>
<td>Expedita, voluptas molestiae.</td>
<td>Officiis, optio voluptatum?</td>
</tr>
<tr>
<td>Ea, quis minus.</td>
<td>Sint, autem perspiciatis.</td>
<td>Vel, dignissimos blanditiis!</td>
<td>Non, saepe ut?</td>
<td>Perspiciatis, rem in?</td>
</tr>
<tr>
<td>Odit, expedita provident?</td>
<td>Aut, autem itaque.</td>
<td>Ea, beatae consequatur!</td>
<td>Libero, fugit ratione.</td>
<td>A, recusandae nemo.</td>
</tr>
<tr>
<td>Quis, rerum aperiam?</td>
<td>Dolor, neque quaerat!</td>
<td>Omnis, nihil. Aspernatur?</td>
<td>Maiores, nobis sunt.</td>
<td>Fuga, nulla voluptate?</td>
</tr>
<tr>
<td>Debitis, sunt sed!</td>
<td>Eum, reprehenderit. Fugiat?</td>
<td>Dolorem, voluptatem adipisci!</td>
<td>Expedita, ad perferendis.</td>
<td>Eum, doloribus ut.</td>
</tr>
<tr>
<td>Atque, quidem expedita.</td>
<td>Animi, inventore maiores.</td>
<td>Nostrum, ut rem!</td>
<td>Accusamus, nisi corrupti.</td>
<td>Voluptatem, natus maiores.</td>
</tr>
</table>
</body>
</html>