DAY_007_HTML
2023. 12. 14. 16:18ㆍFull Stack Course 풀스택과정/HTML_CSS_JAVASCRIPT
728x90
CodeHows DAY_007_HTML
이번에 사용된 기능 :
HTML 번호 맞추기
HTML random 번호뽑기
HTML 버튼 클릭시 text 변경
HTML 숫자 입력 text
HTML 글꼴 변경
HTML 로또 만들기
HTML gif 사진넣기
HTML 랜덤번호 맞추기
이번엔 GUI 예제문제 같은걸 하나 만들어봣네요
안에 번호 다 집어넣을수있고요 1~30 번까지 넣으면 되고
랜덤하게 바로 뽑을수있고 확인도 버튼누르면 확인가능해요
이번에는 찾기쉽게 조금 친절하게 정리해드렸습니다 ^_^
한번실행시켜보고 싶으신분들은 아래쪽에 있는 코드를 복사해서
아래링크에 들어간뒤 노트북 저장방법으로 해보시면되요
DAY_001_HTML
CodeHows DAY_001_HTML 이번에 사용된 기능 : 움직이는 글자 전광판 만들기 HTML 꾸미기 HTML 이미지 삽입 HTML 연결링크 만들기 HTML 회원가입 페이지 만들기 HTML 동영상 넣기 HTML 유튜브 넣기 HTML 사진 넣어
sarimus.tistory.com
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.div1 {
margin: 30px;
font-size: 50px;
text-align: center;
}
.fieldset {
margin: 30px;
width: 40px;
height: 40px;
text-align: center;
display: inline-block;
background-color: white;
border-radius: 50px;
overflow: hidden;
}
.text {
width: 40px;
height: 40px;
font-size: 30px;
font-weight: bold;
border-color: white;
}
.match {
background-color: green;
}
.answerBox {
font-size: 400px;
text-align: center;
display: inline-block;
}
@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic&family=Nanum+Pen+Script&family=Noto+Sans+KR:wght@100;300&display=swap');
h1 {
margin: 0%;
font-size: 60px;
font-weight: bold;
font-family: "Nanum Pen Script", cursive;
}
</style>
</head>
<body
style="background-image: url('https://i.gifer.com/8nNh.gif'); background-repeat: no-repeat ; background-size: 15%; background-position-x: 20px; background-position-y: 20px; ">
;){kind=link}
<table style="display: inline-block;">
<tr>
<div class="div1">
<h1 style="color: rgb(209, 78, 209);">Match the Numbers!! </h1> <button id="Button1" class="div1"
style="float: right; font-family: 'Nanum Pen Script', cursive;"> 숫자
확인 </button>
</div>
</tr>
<tr>
<div class="div1" style="margin-left: 600px;"> <button id="Button2" class="div1" style="float: right; font-family: 'Nanum Pen Script', cursive;"> 랜덤
뽑기 </button></div>
</tr>
</table>
<div>
<fieldset class="fieldset" id="output0"><span id="output0"><input type="text" class="text" maxlength="2" ;>
</span>
</fieldset>
<fieldset class="fieldset" id="output1"><span id="output1"><input type="text" class="text" maxlength="2" ;>
</span>
</fieldset>
<fieldset class="fieldset" id="output2"><span id="output2"><input type="text" class="text" maxlength="2" ;>
</span>
</fieldset>
<fieldset class="fieldset" id="output3"><span id="output3"><input type="text" class="text" maxlength="2" ;>
</span>
</fieldset>
<fieldset class="fieldset" id="output4"><span id="output4"><input type="text" class="text" maxlength="2" ;>
</span>
</fieldset>
<fieldset class="fieldset" id="output5"><span id="output5"><input type="text" class="text" maxlength="2" ;>
</span>
</div>
<div>
<fieldset class="fieldset" id="output6"><span id="output6"><input type="text" class="text" maxlength="2" ;>
</span>
</fieldset>
<fieldset class="fieldset" id="output7"><span id="output7"><input type="text" class="text" maxlength="2" ;>
</span>
</fieldset>
<fieldset class="fieldset" id="output8"><span id="output8"><input type="text" class="text" maxlength="2" ;>
</span>
</fieldset>
<fieldset class="fieldset" id="output9"><span id="output9"><input type="text" class="text" maxlength="2" ;>
</span>
</fieldset>
<fieldset class="fieldset" id="output10"><span id="output10"><input type="text" class="text" maxlength="2" ;>
</span>
</fieldset>
<fieldset class="fieldset" id="output11"><span id="output11"><input type="text" class="text" maxlength="2" ;>
</span>
</fieldset>
</div>
<div>
<fieldset class="fieldset" id="output12"><span id="output12"><input type="text" class="text" maxlength="2" ;>
</span>
</fieldset>
<fieldset class="fieldset" id="output13"><span id="output13"><input type="text" class="text" maxlength="2" ;>
</span>
</fieldset>
<fieldset class="fieldset" id="output14"><span id="output14"><input type="text" class="text" maxlength="2" ;>
</span>
</fieldset>
<fieldset class="fieldset" id="output15"><span id="output15"><input type="text" class="text" maxlength="2" ;>
</span>
</fieldset>
<fieldset class="fieldset" id="output16"><span id="output16"><input type="text" class="text" maxlength="2" ;>
</span>
</fieldset>
<fieldset class="fieldset" id="output17"><span id="output17"><input type="text" class="text" maxlength="2" ;>
</span>
</fieldset>
</div>
<div>
<fieldset class="fieldset" id="output18"><span id="output18"><input type="text" class="text" maxlength="2" ;>
</span>
</fieldset>
<fieldset class="fieldset" id="output19"><span id="output19"><input type="text" class="text" maxlength="2" ;>
</span>
</fieldset>
<fieldset class="fieldset" id="output20"><span id="output20"><input type="text" class="text" maxlength="2" ;>
</span>
</fieldset>
<fieldset class="fieldset" id="output21"><span id="output21"><input type="text" class="text" maxlength="2" ;>
</span>
</fieldset>
<fieldset class="fieldset" id="output22"><span id="output22"><input type="text" class="text" maxlength="2" ;>
</span>
</fieldset>
<fieldset class="fieldset" id="output23"><span id="output23"><input type="text" class="text" maxlength="2" ;>
</span>
</fieldset>
</div>
<div style="margin-bottom: 0%;">
<fieldset class="fieldset" id="output24"><span id="output24"><input type="text" class="text" maxlength="2" ;>
</span>
</fieldset>
<fieldset class="fieldset" id="output25"><span id="output25"><input type="text" class="text" maxlength="2" ;>
</span>
</fieldset>
<fieldset class="fieldset" id="output26"><span id="output26"><input type="text" class="text" maxlength="2" ;>
</span>
</fieldset>
<fieldset class="fieldset" id="output27"><span id="output27"><input type="text" class="text" maxlength="2" ;>
</span>
</fieldset>
<fieldset class="fieldset" id="output28"><span id="output28"><input type="text" class="text" maxlength="2" ;>
</span>
</fieldset>
<fieldset class="fieldset" id="output29"><span id="output29"><input type="text" class="text" maxlength="2" ;>
</span>
</fieldset>
</div>
<div id="answer" style="color:red">
<div id="matched" style="margin: 0%;"></div>
</div>
</body>
<script>
var numberList = []; //0~30 넣을 리스트
var output = [];//출력할 리스트
matched = document.getElementById("matched"); // 맞춘개수
//id - output0~ 30 내용 - 0~30번 까지 변수 생성
for (var i = 0; i < 30; i++) {
output[i] = document.getElementById("output" + i);
for (var j = 0; j < 6; j++) {
document.write("<div>");
if ((i + j) < 30) {
document.write("<span class='div1'id='output" + (i + j) + "'></span>");
}
document.write("</div>");
}
}
//버튼 - 숫자확인 내용 - 클릭시 45번 출력
document.getElementById("Button1").onclick = function () {
var randomNL1 = new Set();
while (randomNL1.size < 30) {
randomN1 = Math.floor(Math.random() * 30 + 1);
randomNL1.add(randomN1);
}
var randomNL1 = Array.from(randomNL1);
var matchedCount = 0;
for (var i = 0; i < 30; i++) {
var userInput = output[i].getElementsByTagName("input")[0].value;
if (userInput === randomNL1[i].toString()) {
output[i].classList.add('match');
matchedCount++;
}
else {
output[i].classList.remove('match');
}
output[i].innerHTML = "<span style='color:red;font-weight: bold; font-size:30px ; '>" + randomNL1[i] + "</span> ";
}
matched.innerHTML = "<span class='answerBox';><h1 style='font-size: 400px;'>Got " + matchedCount + "</h1></span> ";
};
//버튼 - 랜덤뽑기 내용 - 클릭시 45번칸에 랜덤 넘버 기입
document.getElementById("Button2").onclick = function () {
var randomNL1 = new Set();
while (randomNL1.size < 30) {
randomN1 = Math.floor(Math.random() * 30 + 1);
randomNL1.add(randomN1);
}
var randomNL1Array = Array.from(randomNL1);
for (var i = 0; i < 30; i++) {
output[i].classList.remove('match');
output[i].getElementsByTagName("input")[0].value = randomNL1Array[i];
}
};
</script>
</html>
이번에는 보기쉽게 해놨죠? ^_^ 좀더 정리할순있지만 완벽떠는 스타일은 아닌 사람 ^_^
참고로
var randomNL1Array = Array.from(randomNL1);
이거 해준것은 안해주고 실행하면 undefined 뜨더라구요 그래서 이걸 해줘야 stackOverFlow 찾아도 모르곘..
왜그런지 알면 설명좀 부탁해요!
728x90
'Full Stack Course 풀스택과정 > HTML_CSS_JAVASCRIPT' 카테고리의 다른 글
| DB 없이 HTML 파일을 AWS 서버구축후 배포하기 (엔진엑스 - Nginx ) (1) | 2024.08.04 |
|---|---|
| DAY_008_HTML (0) | 2023.12.15 |
| DAY_006_HTML (1) | 2023.12.14 |
| DAY_005_HTML (0) | 2023.12.14 |
| DAY_004_HTML (0) | 2023.12.14 |