[개인 프로젝트] - 계산기 구현하기

계산기 목업

수업에서 진행했던 계산기js를 참고하여 계산기를 만들어보았다.

(사실 거의 다 보고 베낀 수준이지만..)

---

 

계산기 최종

먼저, 내가 구현하고 싶었던 다크모드/라이트모드 와 닫기버튼은 구현해냈다.

다크모드 / 라이트모드

처음에는 단순히 class를 따로 만들어 .dark일때의 css를 따로 설정한 다음 classList.add를 해주면 될 것이라고 생각했다.
하지만 처음에 라이트모드에서 다크모드로 바뀌는건 가능하지만, 반대로 다크모드일때 라이트모드로 다시 변환하는 것은 불가능했다.(첫 번째 고난) 그러다 구글링을 통해 .classList.toggle()을 이용하면 구현이 가능해진다는 것을 알게 되었다.
🔍 element.classList.toggle()이란?
-> 클래스 값을 토글링한다. 즉, 클래스가 존재한다면 제거하고 false를 반환하며, 존재하지 않으면 클래스를 추가하고 true를 반환한다.
toggle을 사용한다면 라이트모드일때 .dark를 추가해주고, 다시 라이트모드로 돌아갈때는 .dark를 없애주어 라이트모드 구현이 가능해진다는 것을 알게되어 구현에 성공하게 되었다.

// 다크모드 / 라이트모드 구현
switch_mode.onclick = function(){
    body.classList.toggle('dark');
}

 

 

계산기 나타내기 / 없애기

처음에 계산기 이모티콘을 띄워 클릭하게되면 계산기 몸통이 나오게되고, 닫기버튼을 누르면 계산기 몸통이 없어지고 이모티콘이 나타나도록 구현해보았다. 이 부분은 수업때 다루었던 내용이라 'click'이벤트가 일어났을때 class를 추가하고 지우는 동작을 추가했다. 그런데 처음에 전혀 동작하지 않았다.(두 번째 고난) 코드를 계속 천천히 살펴보다 발견했다. classList뒤에 넣거나 지울 클래스명에 .이 찍혀있다는 것을...😳 너무나도 자연스럽게 .을 찍었다니 다시는 일어나선 안될 일이지만 발견해내었으니 뭐.. 다음부터 조심해야지!

---

css부분에서는 구글링이나 유튜브영상을 찾아가며 새로 구현한 부분이 많다.

box-shadow

 

1. display창

계산기 몸통에서 안쪽으로 들어가있는 듯한 모습을 구현하고 싶었다.
안쪽에 그림자효과를 주기 위해 inset키워드를 사용했다. inset키워드를 사용하면 박스의 바깥쪽이 아닌 안쪽에 그림자가 생기기 때문에 들어가있는 효과를 줄 수 있다.
x축과 y축을 설정해 준 뒤 블러와 확장 길이까지 지정해 준 후 컬러를 조금 진하게 넣어주면 안쪽 그림자가 생성된다.

 

 

 

2. 다크모드 버튼

사실,, 구현해내었다기 보다는 어쩌다 보니 구현한 것이다.
원래 다크모드에서의 버튼도 위에 떠있는듯이 구현하려 했었지만 뭔가 이상하고 어색했다. 몸통 자체가 어둡기 때문에 하단에 그림자를 넣어도 잘 보이지 않고 상단에 밝은 컬러로 그림자를 넣어도 버튼과 잘 어울리지 않는 모습이였다. 그러다 우연히 상단에만 어두운 그림자를 넣어보게 되었을 때 버튼이 살짝 들어가있는 듯한 모습이 되었다. 다크모드일때는 버튼이 떠있는 것보다 들어가있는 모습이 더 어울리는듯해 그대로 진행하게 되었다.

 

3. 토글스위치

이번 프로젝트를 진행하면서 처음 알게 된 부분이다. 처음에는 모드를 바꾸는 버튼을 만드려고 했는데 뭔가 새로운 모습을 추가하고싶어져 구글링을 통해 토글스위치를 알게 되었다. 
먼저 동작 구현을 위해 input checkbox요소를 넣어준다. 다음엔 기존의 형태를 없애주고 새로운 형태를 만들어준다.
틀이 되는 부분을 먼저 만들어준 다음, 가상요소 before를 통해 안에서 움직이게 될 스위치를 만들어준다.
(이 부분은 구글링으로 가져온 다음 수정해주었다.)

/* display창 그림자 */
box-shadow: inset 0px 0px 10px 3px rgb(171, 170, 170); 

/* 다크모드 버튼 */
box-shadow: -3px -3px 5px rgba(0, 0, 0, 0.7);

/* 토글 스위치 */
.switch-mode{
    appearance: none;
    position: relative;
    border: 2px solid gray;
    border-radius: 12.5px;
    width: 32.5px;
    height: 18.5px;
}
.switch-mode::before{
    content: "";
    position: absolute;
    left: 0;
    width: 1em;
    height: 1em;
    border-radius: 50%;
    transform: scale(0.8);
    background-color: gray;
    transition: left 300ms linear;
}
/* 라이트모드 */
.switch-mode:checked::before{
    background-color: white;
    left: 1em;
}
/* 다크모드 */
.switch-mode:checked{
    background-color: gray;
    border-color: gray;
}

---

추가된 동작

1. % 계산

처음에는 단순하게 100을 기준으로 몇%인지를 구하는 계산을 만들었다.
그러다 이게 굳이 필요할까?라는 생각이 들어 첫 번째 입력된 값이 두 번째 입력된 값에 대해 몇%를 차지하는지를 구현해보았다.
숫자 뒤에 %를 붙여 결과를 좀 더 직관적으로 알 수 있도록 만들어보았다.

    // n1은 n2의 몇 퍼센트인지 계산
    if(operator === '%'){
        result = (Number(n1)/Number(n2))*100;
        result = `${result}%`
    }

2. 제곱근

첫 번째 입력갑을 밑으로, 두 번째 입력값을 지수로 계산하는 식을 구현했다.
간단하게 Math.pow()를 이용해보았다.

    if(operator === '^'){
        result = Math.pow(Number(n1),Number(n2));
    }

 

---

🥲 구현하고 싶었지만 못한 부분

연산자 버튼 동작 유지(눌린 상태인 것처럼 유지하기)

연산자 버튼에 클릭 이벤트를 걸어 클래스를 더해주면 눌려진 상태인 것처럼 css를 변경할 수 있을거라고 생각했다.
그런데 버튼에 둘 이상의 클래스명을 주면 동작이 실행이 안되었다..(좌절..) 그래서 버튼을 누르면 자동으로 생기는 'isPressed'를 이용해보려 했지만 연산자 버튼은 'isPressed'상태가 없어지지 않아 한 번 눌렀던 버튼이 계속 눌려져 있는 것처럼 나타났다.. 그래서 어쩔수 없이 포기..!

 

반응형 디자인

media query를 이용하여 스마트폰일때, 태플릿일때, pc모드일때를 나누어 사이즈를 다르게 구현해보고 싶었다.
그런데 처음 제작할 때 절대단위인 px로 크기를 맞추어서인지 작동을 하지 않았다. 그래서 최상위 엘리먼트인 HTML에 기준이 되는 크기를 넣었는데 font-size는 잘 적용이 되었지만 with에서는 예상과 다르게 스타일링 되었다. 
아직 잘 모르는 상태에서 쓰려니 적용이 안된느낌..
다음에 있을 프로젝트에서는 조금 더 공부해서 반응형 사이트를 만들어 봐야겠다.

 

display에 입력한 숫자, 연산자 나타내기

이 부분은 계산기 모형을 만들고나니 어울리지 않아서 빼버렸다!

---

프로젝트를 진행하면서 느낀점..💭 

js를 처음부터 짜보려니 막막했다. 수업에서 다루지 않았더라면 아마.. 버튼을 누르지도 못했을지도..?

그래도 어디에 어떤 동작을 걸어야겠다라는 생각을 하고 그 것을 실현해내보니 점점 재미를 붙인것같다.

프로젝트를 진행하는 동안 구글링과 유튜브 영상을 찾아보며 전에는 몰랐던 기능과 css구현을 많이 배워 사용할 수 있었다. 전에는 알지 못해서 못쓴 기능이 많아 아쉬웠지만 이번 기회를 통해 시야가 더 넓어진것같다. 물론 아직 부족한 점들이 많지만 앞으로 알게될 재미있는 것들이 많다는 거니 마냥 자책은 하지 않을거다!