반응형
나만의 계산기를 만들어 보아요
아래 코드를 따라 만들어 내 폴더 혹은 바탕화면에 만들어 실행해 보세요
index.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calculator</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="calculator">
<form name="forms">
<input type="text" name="output" readonly>
<input type="button" class="clear" value="C" onclick="document.forms.output.value=''">
<input type="button" class="operator" value="/" onclick="document.forms.output.value+='/'">
<input type="button" value="Ⅰ" onclick="document.forms.output.value+='1'">
<input type="button" value="Ⅱ" onclick="document.forms.output.value+='2'">
<input type="button" value="Ⅲ" onclick="document.forms.output.value+='3'">
<input type="button" class="operator" value="*" onclick="document.forms.output.value+='*'">
<input type="button" value="Ⅳ" onclick="document.forms.output.value+='4'">
<input type="button" value="Ⅴ" onclick="document.forms.output.value+='5'">
<input type="button" value="Ⅵ" onclick="document.forms.output.value+='6'">
<input type="button" class="operator" value="+" onclick="document.forms.output.value+='+'">
<input type="button" value="Ⅶ" onclick="document.forms.output.value+='7'">
<input type="button" value="Ⅷ" onclick="document.forms.output.value+='8'">
<input type="button" value="Ⅸ" onclick="document.forms.output.value+='9'">
<input type="button" class="operator" value="-" onclick="document.forms.output.value+='-'">
<input type="button" class="dot" value="." onclick="document.forms.output.value+='.'">
<input type="button" value="0" onclick="document.forms.output.value+='0'">
<input type="button" class="operator result" value="=" onclick="document.forms.output.value=eval(document.forms.output.value)">
</form>
</div>
</body>
</html>
style.css
*{
margin:0;
padding:0;
box-sizing: border-box;
}
body{
background-color: #1f1f1f;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.calculator{
width: 287px;
border:1px sloid #333;
background-color: #ccc;
padding:5px;
}
.calculator form{
display: grid;
grid-template-columns: repeat(4, 65px);
grid-auto-rows: 65px;
grid-gap: 5px;
}
.calculator form input{
border:2px solid #00BFFF;
cursor: pointer;
font-size: 20px;
}
.calculator form input:hover{
box-shadow: 1px 1px 2px #00BFFF;
}
.calculator form .clear{
background-color: #FFFF00;
}
.calculator form .operator{
background-color: #00FFFF;
}
.calculator form .dot{
background-color: #FF0000;
}
.calculator form input[type='text']{
grid-column: span 4;
text-align: right;
padding:0 10px;
}
.calculator form .clear{
grid-column: span 3;
}
.calculator form .result{
grid-column: span 2;
}
더 많은 유틸리티로 계속 업로드 하겠습니다.
오류를 보완하여 더욱 좋은 계산기를 만들기 바랍니다.
반응형
'프로그램 개발' 카테고리의 다른 글
| 프론트엔드 개발자(Frontend Developer)의 역할과 책임, 필요 기술과 지식, 업무 환경과 협업, 경력 개발과 성장 (3) | 2024.10.03 |
|---|---|
| 웹 디자이너(Web Designer)의 역할과 기술들 그리고 경력 개발과 미래 전망 (2) | 2024.10.02 |
| 웹 퍼블리셔(Web Publisher)의 기술과 관련 직종의 차이와 역할의 확장 (0) | 2024.10.01 |
| 웹 기획자(Web Planner)의 주요 업무 및 직업 전망, 자격증, 경력, 분석 도구 (2) | 2024.10.01 |
| 웹 개발 관련 직업의 종류, 역할, 책임 (2) | 2024.10.01 |