간단한 웹 계산기만들기 (너튜부 수코딩님)

강의 보기 전

 

레이아웃

난잡하게 div로 디스플레이, 영역생성 각 층마다 div와 ul, li태그로 버튼을 생성했다. (총5층)

form으로 출력화면생성.

버튼의 위치는 테투리 픽셀 계산해서 때려박았다. 

 

기능구현

자바스크립트 버튼하나하나마다 ID부여후 queryselector로 끌고와서 밸류를 준다.

=이나 엔터가 입력되기전까지 버튼눌린값을 배열로 저장한다.

저장된배열의값을 for를이용하여 배열.length까지 모든 인덱스를 계산해서 결과값을 리턴.

여기서 의문은 기호는 어떻게 처리할지... 숫자는 parseInt를 이용하려했었다.

고민하다가 참고될글을 찾아봐야지하다 수코딩님 계산기발견.

 

 

강의 후

난잡하게 div막 쓸필요없이 전체 테투리잡기용으로 한번만 div사용.

grid를사용하여 간단하고,균일하게 버튼 배열.

.calculator form{
  display: grid;
    grid-template-columns: repeat(4, 65px);
    grid-auto-rows: 65px;
    grid-gap: 5px;
    }
    
 .calculator form input[type="text"]{
    grid-column: span 4;
    text-align: right;
    padding: 10px;
}

.calculator form .clear{
    grid-column: span 3;
}

.calculator form .result{
    grid-column: span 2;
}


    /*cursor: pointer;  커서올리면 커서가 손가락모양으로 바뀜*/

grid를 사용하려면 display를 gird로 바꾼다.

gird-template-colums로 한줄에 넣을 버튼갯수와, 버튼 한개의 너비값을 입력해주는듯하다. 

https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns여기서 자세한정보를 찾아봤다

그리고 만약 한 줄에 버튼1개가 3개만큼의 너비를 사용하고 싶다면,

grid-colum을 이용하여 셀을 병합할 수 있다.

 

그리고 css에서 html의 태그를 잡을때 nth-child()요소를 사용하지 않고,

input[type="text"] 이런식으로도 태그잡는법이 있다는것을 알았다.

 

 

 

 

js파일 이용할것 없이 html상에서 onclick=document.forms(form태그의 name="forms").output(결과값input태그의name="output").value +="값" 을 이용하여 간단히 버튼이 텍스트로 출력되게하였다.

   <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="1" onclick="document.forms.output.value+='1'">
     <input type="button" value="2" onclick="document.forms.output.value+='2'">
     <input type="button" value="3" onclick="document.forms.output.value+='3'">
     <input type="button" class="operator"value="*" onclick="document.forms.output.value+='*'">
     <input type="button" value="4"onclick="document.forms.output.value+='4'">
     <input type="button" value="5"onclick="document.forms.output.value+='5'">
     <input type="button" value="6"onclick="document.forms.output.value+='6'">
     <input type="button" class="operator"value="+" onclick="document.forms.output.value+='+'">
     <input type="button" value="7" onclick="document.forms.output.value+='7'">
     <input type="button" value="8" onclick="document.forms.output.value+='8'">
     <input type="button" value="9" 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>

onclick이라는 속성을 알고 너무 쉽게할 계산할 수 있었다.

여기서 .value=1을 하면 1이 한번만나오지만 .value+=1을하면 1을 누를떄마다 1이 계속나오게 할 수 있다.

eval이라는 메소드로 입력된값들의 결과를 반환하게하면 굳이 자바스크립트 코드를 짤 피룡가 없었다..

 

 정말 충격적이다... 이렇게 쉽게 짤 수 있다니..