Problem Solving
[JavaScript] Requirements Q07: Pattern Lock
Isaac S. Lee
2023. 10. 12. 16:18
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
img {
margin: 10px;
border: 10px solid #CCC;
transition: border-color 0.3s ease-in-out;
}
img:hover {
border-color: palegoldenrod;
/* Change border color on hover */
transform: scale(1.1);
/* Scale the image slightly on hover */
}
input {
border: 10px solid #CCC;
padding: 5px 70px;
font-size: 1.7em;
margin: 10px 5px;
}
</style>
<script>
var list;
var pw = "";
window.onload = function () {
list = document.images;
for (var i = 0; i < list.length; i++) {
list[i].onmouseover = function (event) {
pw += getNum(event.target.dataset['no']);
event.srcElement.src = "/asset/images/rect_icon10.png";
event.target.style.transition = "transform 0.3s ease-in-out";
transform = "scale(1.1)";
}
list[i].onmouseout = function (event) {
event.target.style.transition = "transform 0.3s ease-in-out";
event.target.style.transform = "scale(1.0)";
}
}
}
function reset() {
for (var i = 0; i < list.length; i++) {
list[i].src = "/asset/images/rect_icon0" + (i + 1) + ".png";
}
pw = "";
}
function input() {
if (pw == "14789") {
location.href = "https://isaac-christian.tistory.com";
} else {
alert("Error!!");
reset();
}
}
function getNum(url) {
var index = url.lastIndexOf(".");
return url.substr(index - 1, 1);
}
</script>
</head>
<body oncontextmenu='return false' ondragstart='return false' onselectstart='return false'>
<h1 style="text-align: center">Pattern Lock</h1>
<div style="text-align: center">
<img src="/asset/images/rect_icon01.png" data-no="1">
<img src="/asset/images/rect_icon02.png" data-no="2">
<img src="/asset/images/rect_icon03.png" data-no="3"><br>
<img src="/asset/images/rect_icon04.png" data-no="4">
<img src="/asset/images/rect_icon05.png" data-no="5">
<img src="/asset/images/rect_icon06.png" data-no="6"><br>
<img src="/asset/images/rect_icon07.png" data-no="7">
<img src="/asset/images/rect_icon08.png" data-no="8">
<img src="/asset/images/rect_icon09.png" data-no="9">
</div>
<div style="text-align: center">
<input type="button" value="RESET" onclick="reset();">
<input type="button" value="INPUT" onclick="input();">
</div>
<div style="display: none">
<img src="/asset/images/rect_icon10.png">
</div>
</body>
</html>