모각코+/Javascript
[모각코+] 자바스크립트 12월과정 6일차
Jshrewd
2021. 12. 27. 21:50
728x90
https://cafe.naver.com/codeuniv/55023?boardType=L
[모각코+ 출석 인증] 6일차 - 웹 자바스크립트 12월 과정 A조
대한민국 모임의 시작, 네이버 카페
cafe.naver.com
오늘의 문제는 console.log()를 통해 사칙연산을 출력하는 과정을 코드로 작성하는 것이였습니다.
문제를 보자마자 계산기를 만들어서 콘솔 로그에 찍히는 것을 생각했으나, 이미 계산기를 하신 분이 있어 안타깝지만 개인적으로 해보고 업로드는 다른 활동으로 해야 할 것 같습니다.. ㅜㅜ
그래서 저는 1~9 사이의 랜덤 난수를 생성하여, 첫 화면에 ??? 이라고 되어 있는 부분에 버튼을 클릭시 난수 값과 사칙연산이 화면에 찍히고, 콘솔창에도 입력되도록 구현 해 봤습니다 :D
HTML 파일
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Console Log</title>
<link rel="stylesheet" href="./day5.css">
<style>
@import url('https://fonts.googleapis.com/css2?family=Black+Han+Sans&family=Single+Day&display=swap');
</style>
</head>
<body>
<h2>
RANDOM 사칙연산(1~9)
</h2>
<div class="context">
<p id="randomPlus">???</p>
<p id="randomMinus">???</p>
<p id="randomMul">???</p>
<p id="randomDiv">???</p>
</div>
<button class="btn" onclick=randomOperation()>연산 시작!</button>
<script src="./day6.js"></script>
</body>
</html>CSS 파일
.context {
font-family: 'Black Han Sans', sans-serif;
font-family: 'Single Day', cursive;
font-size: large;
}
.btn {
position: relative;
border: none;
display: inline-block;
padding: 15px 30px;
border-radius: 15px;
font-family: "paybooc-Light", sans-serif;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
text-decoration: none;
font-weight: 600;
transition: 0.25s;
background: linear-gradient(-45deg, #33ccff 0%, #ff99cc 100%);
color: white;
}JS 파일
let cnt = 0;
function randomOperation(){
let x = Math.floor((Math.random()*(10-1)+1));
let y = Math.floor((Math.random()*(10-1)+1));
let plus = x + "+" + y + "=" + (x+y);
let minus = x + "-" + y + "=" + (x-y);
let mul = x + "*" + y + "=" + (x*y);
let divi = x + "/" + y + "=" + (x/y);
document.getElementById('randomPlus').innerHTML=plus;
document.getElementById('randomMinus').innerHTML=minus;
document.getElementById('randomMul').innerHTML=mul;
document.getElementById('randomDiv').innerHTML=divi;
if(cnt>0){
console.clear();
}
console.log(x + '+' + y +"=" + (x+y));
console.log(x + '-' + y +"=" + (x-y));
console.log(x + '*' + y +"=" + (x*y));
console.log(x + '/' + y +"=" + (x/y));
cnt++;
}
728x90