728x90
반응형
[1~100사이의 숫자 k와 n을 입력하면 k가 n의 배수가 맞는 지 알려주는 프로그램]
◆ 기능
① 빈칸으로 확인을 누르거나 1~100 이외의 숫자를 입력하면 경고문구가 뜸
② 1~100 사이의 숫자를 입력하고 알고싶은 배수의 수를 입력하면 결과 알려줌
③ reset 버튼을 누르면 입력값과 결과값이 초기화됨
④ 조건에 따른 숫자와 문자의 색이 바뀜
⑤ 확인 버튼을 누르면 입력창에 입력된 숫자는 초기화되고 결과값만 출력됨
⑥ 각종 CSS 변경
◆ HTML
<!--숫자를 입력받는 부분-->
<div id="inputArea">
<h1>1~100사이의 수 중에서 N의 배수를 맞춰보세요.</h1>
<h1>
<input type="text" id="input_k" placeholder="1~100사이">은(는)  
<input type="text" id="input_n" placeholder="n의 배수">의 배수가 맞을까요?
</h1>
<input class="btn" type="submit" onclick="input()" value="확인">
<input class="btn" type="submit" onclick="reset()" value="reset"">
</div>
<br>
<img src="img/pngegg.png">
<!-- 결과값을 받는 부분 -->
<div id="resultArea">
<h1>결과는?!</h1>
<br>
<div id="result"></div>
</div>
◆ CSS
body{
text-align: center;
font-family: 'Poor Story', cursive;
/*적용하고자 하는 부모 엘리먼트에 적용*/
display: flex;
/*요소들을 가운데 정렬(세로)*/
align-items: center;
/*요소들을 가운데 정렬(가로)*/
justify-content: center;
/* 요소들을 위에서 아래로 정렬 */
flex-direction: column;
background-color:#fff17671;
}
#input_n,#input_k{
width: 40px;
height: 40px;
}
h1{
text-align: center;
}
#resultArea{
width: 1000px;
height: 200px;
text-align: center;
margin: 30px;
}
#result{
width: 1000px;
height: 100px;
text-align: center;
}
#inputArea{
text-align: center;
}
img{
width: 100px;
height: 100px;
}
.btn{
text-align: center;
font-family: 'Poor Story', cursive;
font-size: 20px;
font-weight: bold;
background-color:#fff176;
width: 80px;
height: 40px;
margin: 10px;
border-radius: 20px;
border:0px solid;
box-shadow: 2px 2px 2px 2px #ffda76;
}
◆ 자바스크립트
var resultArea = document.querySelector("#result");
function input(){
// n : 배수
var n = document.querySelector("#input_n").value;
// k : n의 배수인지 아닌지 알고자 하는 수
var k = document.querySelector("#input_k").value;
console.log(n);
console.log(k);
if(k === null || k === ""|| n===null || n===""){
resultArea.innerHTML="<h1>두 빈칸의 숫자를 모두 입력해주세요.</h1>.";
}else if(k == 0 || k>=101 || n == 0){
reset2();
resultArea.innerHTML="<h1>1~100사이의 숫자를 입력해주세요.</h1>.";
}else if(k<=100){
if(k%n===0){
//reset(); 을 꼭 앞쪽으로 놓아야 input안의 입력값은 지워지고 결과값이 남음
reset2();
resultArea.innerHTML="<h1>"+k.fontcolor("blue")+"은(는) "
+n.fontcolor("blue")+"의 배수가 <font color='blue'>맞습니다.</font></h1>";
}else {
reset2();
resultArea.innerHTML="<h1>"+k.fontcolor("red")+"은(는) "
+n.fontcolor("red")+"의 배수가 <font color='red'>아닙니다.</font></h1>";
}
}
}
// k의 빈칸만 삭제하는 기능
function reset(){
document.querySelector("#input_k").value = "";
resultArea.innerHTML="";
}
// 모든 빈칸삭제하는 기능
function reset2(){
document.querySelector("#input_k").value = "";
document.querySelector("#input_n").value = "";
resultArea.innerHTML="";
}
◆ 전체
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Poor+Story&display=swap" rel="stylesheet">
<title> 너의 배수는? </title>
<style>
body{
text-align: center;
font-family: 'Poor Story', cursive;
/*적용하고자 하는 부모 엘리먼트에 적용*/
display: flex;
/*요소들을 가운데 정렬(세로)*/
align-items: center;
/*요소들을 가운데 정렬(가로)*/
justify-content: center;
/* 요소들을 위에서 아래로 정렬 */
flex-direction: column;
background-color:#fff17671;
}
#input_n,#input_k{
width: 40px;
height: 40px;
}
h1{
text-align: center;
}
#resultArea{
width: 1000px;
height: 200px;
text-align: center;
margin: 30px;
}
#result{
width: 1000px;
height: 100px;
text-align: center;
}
#inputArea{
text-align: center;
}
img{
width: 100px;
height: 100px;
}
.btn{
text-align: center;
font-family: 'Poor Story', cursive;
font-size: 20px;
font-weight: bold;
background-color:#fff176;
width: 80px;
height: 40px;
margin: 10px;
border-radius: 20px;
border:0px solid;
box-shadow: 2px 2px 2px 2px #ffda76;
}
</style>
</head>
<body>
<!--숫자를 입력받는 부분-->
<div id="inputArea">
<h1>1~100사이의 수 중에서 N의 배수를 맞춰보세요.</h1>
<h1>
<input type="text" id="input_k" placeholder="1~100사이">은(는)  
<input type="text" id="input_n" placeholder="n의 배수">의 배수가 맞을까요?
</h1>
<input class="btn" type="submit" onclick="input()" value="확인">
<input class="btn" type="submit" onclick="reset()" value="reset"">
</div>
<br>
<img src="img/pngegg.png">
<!-- 결과값을 받는 부분 -->
<div id="resultArea">
<h1>결과는?!</h1>
<br>
<div id="result"></div>
</div>
<script>
var resultArea = document.querySelector("#result");
function input(){
// n : 배수
var n = document.querySelector("#input_n").value;
// k : n의 배수인지 아닌지 알고자 하는 수
var k = document.querySelector("#input_k").value;
console.log(n);
console.log(k);
if(k === null || k === ""|| n===null || n===""){
resultArea.innerHTML="<h1>두 빈칸의 숫자를 모두 입력해주세요.</h1>.";
}else if(k == 0 || k>=101 || n == 0){
reset2();
resultArea.innerHTML="<h1>1~100사이의 숫자를 입력해주세요.</h1>.";
}else if(k<=100){
if(k%n===0){
//reset(); 을 꼭 앞쪽으로 놓아야 input안의 입력값은 지워지고 결과값이 남음
reset2();
resultArea.innerHTML="<h1>"+k.fontcolor("blue")+"은(는) "
+n.fontcolor("blue")+"의 배수가 <font color='blue'>맞습니다.</font></h1>";
}else {
reset2();
resultArea.innerHTML="<h1>"+k.fontcolor("red")+"은(는) "
+n.fontcolor("red")+"의 배수가 <font color='red'>아닙니다.</font></h1>";
}
}
}
function reset(){
document.querySelector("#input_k").value = "";
resultArea.innerHTML="";
}
function reset2(){
document.querySelector("#input_k").value = "";
document.querySelector("#input_n").value = "";
resultArea.innerHTML="";
}
</script>
</body>
</html>
◆ 결과
jina-choi.github.io/coding-with-jina/mini_project/besoo2/besoo2.html
너의 배수는?
jina-choi.github.io
5의 배수와 별로 다를 게 없었다. 5의 배수 만든 코드에서 조금 수정했는데 다음에는 다시 한번 더 생각하면서
처음부터 코드를 짜봐야겠다. 확실히 이제 코드가 조금씩 눈에 보인다.
까망눈에서 탈출한 기분이다. 그리고 함수를 어떻게 사용하는 건지 어떻게 이용하는 건지 이게 왜 안되는 건지 얼추 알것 같다.
이번주나 다음주 안으로 예전에 해보았던 to do list를 다시 만들어봐야지😊
728x90
반응형
'Project > Project' 카테고리의 다른 글
| [minip] 아이돌 뮤직비디오 사이트 (2) | 2021.02.17 |
|---|---|
| [프로젝트] 자바스크립트를 이용한 To Do List (0) | 2021.02.17 |
| [프로젝트] 클론코딩 - 카카오톡 (0) | 2021.02.17 |
| [미니프로젝트] 클론코딩 - Google (3) | 2021.02.16 |