Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 16 additions & 0 deletions KDG/Day15/계산기.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>계산기</title>
</head>
<body>
<h2>Soongu Calculator</h2>
<div><h3>계산식을 입력해 주십시오(예시 : 1+2 | 종료 : exit).</h3></div>
<div><ul><li>소수점 둘째자리 까지 계산됩니다.</li></ul></div>
<input type = "text" id = "in-text" />
<input type = "button" id="in-btn" value="버튼" />
<span id = "result-display"></span>
Comment on lines +11 to +13
Copy link
Contributor

@electrohyun electrohyun Feb 4, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

in-text, in-btn, result-display 등 케밥 케이스로 요소들의 id를 작성해주셨는데요, js 파일을 작성하시면서 문득 getElementById라는 메서드를 보신 적 있을거에요.

저희는 주로 로워 카멜 케이스(Lower Camel Case)로 변수명과 함수명을 작성하고 있는데요, 거기에 맞춰 따른다면, inText, inBtn, resultDisplay 등의 이름을 지어줄 수 있겠습니다.

타 11기 인원분들 진행하실때에도 같은 코멘트를 남겼었는데, 해당 내용 간단히 살펴보시면 좋을 것 같아요.

#13 (comment)

<script src="계산기.js"></script>
</body>
</html>
41 changes: 41 additions & 0 deletions KDG/Day15/계산기.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
const inbtn = document.getElementById("in-btn");
const intext1 = () =>document.getElementById("in-text").value;
const intext = intext1;
Comment on lines +2 to +3
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
const intext1 = () =>document.getElementById("in-text").value;
const intext = intext1;
const inText = () =>document.getElementById("in-text").value;

두개가 있을 필요는 없을것 같습니다.😅

추가적으로 위 코멘트에서 남긴 로워 카멜 케이스 적용해보세용

const display = document.getElementById("result-display");


const click = () => {
const userInput = intext();
const result = calculate(userInput);
if (result !== undefined) {
print(result);
}}
const exit = () => alert("계산기를 종료합니다.");

const exitcheck = (exit) => (exit === "exit" ) ? true : false;
Copy link
Contributor

@electrohyun electrohyun Feb 4, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
const exitcheck = (exit) => (exit === "exit" ) ? true : false;
const isExit = (value) => value === "exit";
function (a, b) {
  return a + b;
}

같은 구조가 있을때, 함수가 특정 작업을 하기 위해 부여받는 매개변수를 인자라고 합니다(a, b)

여기서는 매개변수의 역할을 exit라는 변수가 하고 있는데요, 변수 그 자체의 의미가 exit가 아닌지라, input(입력값)이나 value(값) 정도의 이름을 주면 코드를 읽기 수월할 것 같아요.

추가적으로, 해당 값을 "exit"와 같냐고 비교하는 것 자체만으로, true 혹은 false를 반환하기 때문에 삼항 연산자를 쓰지 않더라도 괜찮습니다. 😊

(이미 잘 하셨지만, 변수명에 대해서는, true 혹은 false를 반환하는 만큼, isExit 라는 이름이 가장 좋다고 생각해요.)


const calculate = (userInput) => {
if (exitcheck(userInput)) {
exit();
return;
}

try {
const allFunction = new Function("return " + userInput);
const result = allFunction();
return result;
}
catch (err) {
return "Error";
}
}

inbtn.onclick = click;

const A4 = () => document.getElementById("result-display");

const print = (intext) => {
intext === "Error" ? alert("0으로 나눌 수 없습니다") :
A4().innerText = Number(intext).toFixed(2);

}