Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: counter system #1

Open
wants to merge 4 commits into
base: HodaeSsi
Choose a base branch
from
Open

feat: counter system #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
44841c0
feat: counter system
HodaeSsi Feb 14, 2020
4c9f588
feat: reset system
HodaeSsi Feb 14, 2020
c4cac68
refactor: counter system
HodaeSsi Feb 14, 2020
fe05d45
feat: step button
HodaeSsi Feb 14, 2020
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
29 changes: 29 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
<!DOCTYPE html>
<html>
<head>
<title>CounterProgram</title>
<meta charset = "utf-8">
</head>
<body>
<!-- <p>0</p> -->
Copy link

Choose a reason for hiding this comment

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

사용하지 않는 코드는 제거해주세요

<textarea cols="15" rows="1" class="outputNum" readonly>0</textarea>
<br>
<br>
<input type="button" value="+" class="increaseButton">
Copy link

Choose a reason for hiding this comment

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

html태그속성들을 전부 id값이 아닌 class로 한 이유가 궁금합니다!

<input type="button" value="-" class="decreaseButton">
<br>
<br>
<p style="display:inline">step</p >
Copy link

Choose a reason for hiding this comment

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

span 태그를 사용하지는 것이 더 적합한 것 같습니다.

<input type="number" value="1" min="1" step="1" class="stepArea" >
<br>
<br>
<input type="button" value="초기화" class="resetButton">

<script src="input.js"></script>
<script src="reset.js"></script>
</body>
</html>

<!-- https://conol.tistory.com/24 - HTML 기본 태그 정리 -->
<!-- https://sir.kr/qa/90224 - placeholder, value 속성 차이 -->
<!-- https://m.blog.naver.com/PostView.nhn?blogId=govlrhaehfdl&logNo=221230214889&proxyReferer=https%3A%2F%2Fwww.google.com%2F - input태그 속성 -->
58 changes: 58 additions & 0 deletions input.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
const textarea_outputNum = document.querySelector("textarea.outputNum");
Copy link

Choose a reason for hiding this comment

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

querySelector는 어떤 방식으로 dom에 객체를 요청하는지 궁금합니다!

const input_increaseButton = document.querySelector("input.increaseButton");
const input_decreaseButton = document.querySelector("input.decreaseButton");
const input_stepArea = document.querySelector("input.stepArea");


function decreaseButtonAction(e){
var temp = textarea_outputNum.textContent;
Copy link

Choose a reason for hiding this comment

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

변수명을 temp, temp2가 아닌 좀 더 의미가 분명한 변수명을 써주셨으면 좋겠습니다

var temp2 = input_stepArea.value;
temp *= 1;
temp2 *= 1;
temp -= temp2;
textarea_outputNum.textContent = temp;
}

function increaseButtonAction(e){
var temp = textarea_outputNum.textContent;
var temp2 = input_stepArea.value;
temp *= 1;
temp2 *= 1;
temp += temp2;
textarea_outputNum.textContent = temp;
}

function decreaseKeyAction(e){
const keyCode = e.key;
if(keyCode === '-'){
var temp = textarea_outputNum.textContent;
var temp2 = input_stepArea.value;
temp *= 1;
temp2 *= 1;
temp -= temp2;
textarea_outputNum.textContent = temp;
}
}

function increaseKeyAction(e){
const keyCode = e.key;
if(keyCode === '+'){
var temp = textarea_outputNum.textContent;
var temp2 = input_stepArea.value;
temp *= 1;
temp2 *= 1;
temp += temp2;
textarea_outputNum.textContent = temp;
}
}

document.addEventListener("keydown", increaseKeyAction);
document.addEventListener("keydown", decreaseKeyAction);
input_increaseButton.addEventListener("click", increaseButtonAction)
input_decreaseButton.addEventListener("click", decreaseButtonAction)

/*https://developer.mozilla.org/ko/docs/Web/API/Document/querySelector,
https://developer.mozilla.org/ko/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors - querySelector(), DOM요소 선택자*/
/*https://developer.mozilla.org/ko/docs/Web/API/EventTarget/addEventListener,
https://developer.mozilla.org/ko/docs/Web/Events - addEventListener(), 키보드 에빈트, 마우스 이벤트*/
//https://basketdeveloper.tistory.com/56 - 특정키 입력 이벤트
8 changes: 8 additions & 0 deletions reset.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
const input_resetButton = document.querySelector("input.resetButton");

function resetNum() {
textarea_outputNum.textContent = 0; //input.js변수
input_stepArea.value = 1;
}

input_resetButton.addEventListener("click", resetNum);