html
<!DOCTYPE html>
<html lang="kor">
<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>Web Front-End</title>
<link rel="Stylesheet" href="./scit45_오전_김다희(수정).css" />
<!-- <script src="subject_script.js"></script> -->
<script src="./scit45_오전_김다희(수정).js"></script>
</head>
<body>
<div id="frame">
<!-- ---------------------header--------------------- -->
<header>
<!-- 제목 태그 생성 -->
<h1>[정보처리 기사 필기 결과]</h1>
<h2># 가채점 예상 점수를 입력하세요</h2>
</header>
<!-- --------------------- main --------------------- -->
<main>
<h4>맞춘 개수</h4>
<!-- 목록태그 생성 -->
<!-- 점수 입력태그 생성 -->
<div class="div1">
<table>
<tr>
<td class="td">1.소프트웨어 설계:</td>
<td>20문제 중</td>
<td>
<input type="text" id="input1" class="input" placeholder="0" />
</td>
<td>개</td>
<td id="add1" class="add"></td>
</tr>
<tr>
<td class="td">2.소프트웨어 계발:</td>
<td>20문제 중</td>
<td>
<input type="text" id="input2" class="input" placeholder="0" />
</td>
<td>개</td>
<td id="add2" class="add"></td>
</tr>
<tr>
<td class="td">3.데이터 베이스 구축:</td>
<td>20문제 중</td>
<td>
<input type="text" id="input3" class="input" placeholder="0" />
</td>
<td>개</td>
<td id="add3" class="add"></td>
</tr>
<tr>
<td class="td">4.프로그래밍 언어 활용:</td>
<td>20문제 중</td>
<td>
<input type="text" id="input4" class="input" placeholder="0" />
</td>
<td>개</td>
<td id="add4" class="add"></td>
</tr>
<tr>
<td class="td">5.정보시스템 구축관리:</td>
<td>20문제 중</td>
<td>
<input type="text" id="input5" class="input" placeholder="0" />
</td>
<td>개</td>
<td id="add5" class="add"></td>
</tr>
</table>
</div>
<!-- 예상점수 출력용 텍스트태그 생성 -->
<!-- 최종결과 출력용 버튼 생성 -->
<input type="button" value="최종결과 확인" id="btn" onclick="final()" />
</main>
<!-- ---------------------footer--------------------- -->
<footer class="footer">
<h2># 최종결과</h2>
<h4>
합격: 100점을 만점으로 하여 과목당 40점 이상, 전과목 평균 60점 이상.
</h4>
<!-- 목록태그 생성 -->
<ul>
<li id="li1"></li>
<li id="li2"></li>
</ul>
<!-- 최종결과 출력용 영역 태그 및 하위 태그 생성 -->
<div id="test"></div>
</footer>
</div>
</body>
</html>
css
/* css 작성 */
#frame {
border: dotted 2px gray;
width: 800px;
height: 620px;
margin: 0 auto;
padding: 5px;
}
h1 {
margin-top: 16px;
text-align: center;
background-color: rgb(0, 0, 149);
color: white;
}
main {
background-color: rgb(194, 255, 235);
width: 100%;
height: 270px;
padding-top: 10px;
}
.add {
color: blue;
}
h4 {
margin-top: 15px;
margin-left: 40px;
font-size: 20px;
color: blue;
}
table {
padding-left: 30px;
}
.td {
padding-right: 40px;
}
.div1 {
margin-top: 23px;
margin-left: 25px;
display: flex;
}
.input {
text-align: right;
}
#btn {
display: flex;
margin: 0 auto;
margin-top: 10px;
border-radius: 8px;
background-color: aqua;
}
.footer {
display: none;
}
.fail {
display: block;
background-color: gainsboro;
color: red;
margin: 0 auto;
clear: both;
text-align: center;
font-weight: bold;
width: 80px;
height: 23px;
}
.pass {
display: block;
background-color: gainsboro;
color: red;
margin: 0 auto;
clear: both;
text-align: center;
font-weight: bold;
width: 80px;
height: 23px;
}
js
window.onload = function () {
let arrs = document.querySelectorAll(".input");
let adds = document.querySelectorAll(".add");
arrs.forEach((arr, index) => {
arr.addEventListener("keyup", function () {
if (arr.value > 20) {
alert("각 과목당 맞춘 문제수(0~20)을 입력하세요.");
arr.value = null;
adds[index].innerHTML = "";
return;
} else if (isNaN(arr.value)) {
alert("숫자를 입력해 주세요.");
arr.value = null;
adds[index].innerHTML = "";
return;
} else if (arr.value === "") {
adds[index].innerHTML = "";
return;
}
adds[index].innerHTML = `[예상점수] ${arr.value * 5}점`;
});
});
};
function final() {
let final = document.querySelector(".footer");
let scores = document.querySelectorAll(".add"); //all로 받아오면 배열 형태임
let li1 = document.querySelector("#li1");
let li2 = document.querySelector("#li2");
final.classList.remove("footer");
let sum = 0;
let num = 0;
for (let i = 0; i < 5; i++) {
//scores[i]에는 <td> 태그가 들어 있으며, <td> 태그의 value 속성이 존재하지 않음
//-> 따라서 scores[i]의 내용을 가져오기 위해서는 .textContent 속성을 사용해야 합
if (parseInt(scores[i].textContent.split(" ")[1]) < 40) {
//ex)
//scores[i].textContent이 [예상점수] 50점이라면, split(" ")을 통해 배열 ["[예상점수]", "50점"]가 생성됩니다.
//여기서 [1] 인덱스를 사용하여 배열의 두 번째 요소인 "50점"을 가져오게 됩니다.
//parseInt())해당 요소의 텍스트 내용에서 숫자 부분을 추출하고 정수로 변환한 결과를 얻게 됩니다.
num += 1; // num + 1; 잘못된 표현
}
sum += parseInt(scores[i].textContent.split(" ")[1]); //textContent 와 value의 차이 //value input에서 주로 사용 // 지금 불러온건 <td>라서
}
li1.innerHTML = "평균: " + sum / scores.length;
li2.innerHTML = "과락된 과목 수: " + num + "과목";
let test100 = document.querySelector("#test");
if (sum / scores.length >= 60 && num == 0) {
test100.innerHTML = "<span class='pass'>합격</span>";
} else {
test100.innerHTML = `<span class="fail">불합격</span>`;
}
}
html
<!DOCTYPE html>
<html lang="kor">
<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>Web Front-End</title>
<link rel="Stylesheet" href="./scit45_오전_김다희.css" />
<script src="./scit45_오전_김다희.js"></script>
</head>
<body>
<div id="frame">
<!-- ---------------------header--------------------- -->
<header>
<!-- 제목 태그 생성 -->
<h1>[정보처리 기사 필기 결과]</h1>
<h2># 가채점 예상 점수를 입력하세요</h2>
</header>
<!-- --------------------- main --------------------- -->
<main>
<h4>맞춘 개수</h4>
<!-- 목록태그 생성 -->
<!-- 점수 입력태그 생성 -->
<div class="div1">
<table>
<tr>
<td class="td">1.소프트웨어 설계:</td>
<td>20문제 중</td>
<td>
<input type="text" id="input1" class="input" placeholder="0" />
</td>
<td>개</td>
<td id="add1" class="add"></td>
</tr>
<tr>
<td class="td">2.소프트웨어 계발:</td>
<td>20문제 중</td>
<td>
<input type="text" id="input2" class="input" placeholder="0" />
</td>
<td>개</td>
<td id="add2" class="add"></td>
</tr>
<tr>
<td class="td">3.데이터 베이스 구축:</td>
<td>20문제 중</td>
<td>
<input type="text" id="input3" class="input" placeholder="0" />
</td>
<td>개</td>
<td id="add3" class="add"></td>
</tr>
<tr>
<td class="td">4.프로그래밍 언어 활용:</td>
<td>20문제 중</td>
<td>
<input type="text" id="input4" class="input" placeholder="0" />
</td>
<td>개</td>
<td id="add4" class="add"></td>
</tr>
<tr>
<td class="td">5.정보시스템 구축관리:</td>
<td>20문제 중</td>
<td>
<input type="text" id="input5" class="input" placeholder="0" />
</td>
<td>개</td>
<td id="add5" class="add"></td>
</tr>
</table>
</div>
<!-- 예상점수 출력용 텍스트태그 생성 -->
<!-- 최종결과 출력용 버튼 생성 -->
<input type="button" value="최종결과 확인" id="btn" onclick="final()" />
</main>
<!-- ---------------------footer--------------------- -->
<footer class="footer">
<h2># 최종결과</h2>
<h4>
합격: 100점을 만점으로 하여 과목당 40점 이상, 전과목 평균 60점 이상.
</h4>
<!-- 목록태그 생성 -->
<ul>
<li id="li1"></li>
<li id="li2"></li>
</ul>
<!-- 최종결과 출력용 영역 태그 및 하위 태그 생성 -->
<div id="test"></div>
</footer>
</div>
</body>
</html>
css
/* css 작성 */
#frame {
border: dotted 2px gray;
width: 800px;
height: 620px;
margin: 0 auto;
padding: 5px;
}
h1 {
margin-top: 16px;
text-align: center;
background-color: rgb(0, 0, 149);
color: white;
}
main {
background-color: rgb(194, 255, 235);
width: 100%;
height: 270px;
padding-top: 10px;
}
.add {
color: blue;
}
h4 {
margin-top: 15px;
margin-left: 40px;
font-size: 20px;
color: blue;
}
table {
padding-left: 30px;
}
.td {
padding-right: 40px;
}
.div1 {
margin-top: 23px;
margin-left: 25px;
display: flex;
}
.input {
text-align: right;
}
#btn {
display: flex;
margin: 0 auto;
margin-top: 10px;
border-radius: 8px;
background-color: aqua;
}
.footer {
display: none;
}
.fail {
display: block;
background-color: gainsboro;
color: red;
margin: 0 auto;
clear: both;
text-align: center;
font-weight: bold;
width: 80px;
height: 23px;
}
.pass {
display: block;
background-color: gainsboro;
color: red;
margin: 0 auto;
clear: both;
text-align: center;
font-weight: bold;
width: 80px;
height: 23px;
}
js
// javascript 작성
window.onload = function () {
let input1 = document.querySelector("#input1");
let add1 = document.querySelector("#add1");
let input2 = document.querySelector("#input2");
let add2 = document.querySelector("#add2");
let input3 = document.querySelector("#input3");
let add3 = document.querySelector("#add3");
let input4 = document.querySelector("#input4");
let add4 = document.querySelector("#add4");
let input5 = document.querySelector("#input5");
let add5 = document.querySelector("#add5");
input1.addEventListener("keyup", function () {
if (input1.value > 20) {
alert("각 과목당 맞춘 문제수(0~20)을 입력하세요.");
input1.value = null;
add1.innerHTML = "";
return;
} else if (isNaN(input1.value)) {
alert("숫자를 입력해 주세요.");
input1.value = null;
add1.innerHTML = "";
return;
} else if (input1.value == "") {
add1.innerHTML = ""; // 예상 점수 초기화
return;
}
add1.innerHTML = `[예상점수] ${input1.value * 5}점`;
//add1.innerHTML = "[예상점수] " + input1.value * 5 + "점";
});
input2.addEventListener("keyup", function () {
if (input2.value > 20) {
alert("각 과목당 맞춘 문제수(0~20)을 입력하세요.");
input2.value = null;
add2.innerHTML = "";
return;
} else if (isNaN(input2.value)) {
alert("숫자를 입력해 주세요.");
input2.value = null;
add2.innerHTML = "";
return;
} else if (input2.value === "") {
add2.innerHTML = ""; // 예상 점수 초기화
return;
}
add2.innerHTML = `[예상점수] ${input2.value * 5}점`;
});
input3.addEventListener("keyup", function () {
if (input3.value > 20) {
alert("각 과목당 맞춘 문제수(0~20)을 입력하세요.");
input3.value = null;
add3.innerHTML = "";
return;
} else if (isNaN(input3.value)) {
alert("숫자를 입력해 주세요.");
input3.value = null;
add3.innerHTML = "";
return;
} else if (input3.value === "") {
add3.innerHTML = ""; // 예상 점수 초기화
return;
}
add3.innerHTML = `[예상점수] ${input3.value * 5}점`;
});
input4.addEventListener("keyup", function () {
if (input4.value > 20) {
alert("각 과목당 맞춘 문제수(0~20)을 입력하세요.");
input4.value = null;
add4.innerHTML = "";
return;
} else if (isNaN(input4.value)) {
alert("숫자를 입력해 주세요.");
input4.value = null;
add4.innerHTML = "";
return;
} else if (input4.value === "") {
add4.innerHTML = ""; // 예상 점수 초기화
return;
}
add4.innerHTML = `[예상점수] ${input4.value * 5}점`;
});
input5.addEventListener("keyup", function () {
if (input5.value > 20) {
alert("각 과목당 맞춘 문제수(0~20)을 입력하세요.");
input5.value = null;
add5.innerHTML = "";
return;
} else if (isNaN(input5.value)) {
alert("숫자를 입력해 주세요.");
input5.value = null;
add5.innerHTML = "";
return;
} else if (input5.value === "") {
add5.innerHTML = ""; // 예상 점수 초기화
return;
}
add5.innerHTML = `[예상점수] ${input5.value * 5}점`;
});
};
function final() {
let final = document.querySelector(".footer");
let scores = document.querySelectorAll(".add"); //all로 받아오면 배열 형태임
let li1 = document.querySelector("#li1");
let li2 = document.querySelector("#li2");
final.classList.remove("footer");
let sum = 0;
let num = 0;
for (let i = 0; i < 5; i++) {
//scores[i]에는 <td> 태그가 들어 있으며, <td> 태그의 value 속성이 존재하지 않음
//-> 따라서 scores[i]의 내용을 가져오기 위해서는 .textContent 속성을 사용해야 합
if (parseInt(scores[i].textContent.split(" ")[1]) < 40) {
num += 1; // num + 1; 잘못된 표현
}
sum += parseInt(scores[i].textContent.split(" ")[1]); //textContent 와 value의 차이 //value input에서 주로 사용 // 지금 불러온건 <td>라서
}
li1.innerHTML = "평균: " + sum / scores.length;
li2.innerHTML = "과락된 과목 수: " + num + "과목";
let fail = document.querySelector(".fail");
let pass = document.querySelector(".pass");
let test100 = document.querySelector("#test");
if (sum / scores.length >= 60 && num == 0) {
test100.innerHTML = "<span class='pass'>합격</span>";
} else {
test100.innerHTML = `<span class="fail">불합격</span>`;
}
}