[Practice] 계산기 만들기 성공!? (feat. 깃똥찬 계산기) (#코딩공부)

https://github.com/wook2124/Calculator

wook2124/Calculator

https://wook2124.github.io/Calculator/

https://wook2124.github.io/Calculator/

---

https://www.youtube.com/watch?v=ffENjt7aEdc

---

https://wook-2124.tistory.com/3?category=889389

[Practice] HTML, CSS, JavaScript란?! (feat. 깃똥찬 계산기) (#코딩공부)

첫번째 포스팅에 올린 코드들이 인생 처음으로 작성해본 코드라서, 어디가 어떻게 틀려먹은건지 찾지 못해 결국 미완성했던 계산기를.. "폴포리"님의 댓글 덕분에 오류난 코드를 발견해서 수정하고 다시 돌려봤다!!

---

1. index.html

먼저 html의 코드는 그대로 들고가고!

---

2. style.css

style.css 역시 마찬가지로 색깔바꾸기 귀찮아서가 아니라, 원래 색깔이 맘에 들어서(?) 그대로 들고갔다!!

---

3. script.js

그렇다면 문제의 script.js!! 지금 Vanilla JS 강좌영상을 보며 조금이라도 배워서 그런건지는 모르겠지만,

이렇게 작성한 코드를 다시 보니 대충 어떻게 돌아가고 있는지 조금은 보이는 것 같다. 

 

어쨌든 그럼 어디가 틀렸느냐!! 바로 사진에 체크되있는 formulaValid가 원래는 fromulaValid로 오타가 나있었다..!!

 

그럼 이것을 formulaValid로 밑에 쭉 수렴되게끔 바꿔주고 var resultText = "숫자를 입력하세요."; 까지 바꿔주고 고고!!

---

4. 깃똥찬 계산기 (ver. 2)

다시 html 파일을 틀어주고... 이제 수식을 입력해보자!

---

그래, 일단 문자를 입력해보자.

---

var resultText = "숫자를 입력하세요."; 의 값으로 숫자를 입력하세요.가 제대로 출력이 된 것을 볼 수 있다!!

---

127+423 = 550 이라는 더하기 기능도 제대로 탑재되있고!!

---

67*77 = 5159 (61x77).. 곱하기도 완벽!

---

44/3 = 14.67 (44나누기 3).. 나누기까지 완벽!!!

---

결국 정말 fro에서 for로.. 문자 하나를 바꿔준 것만으로 계산기가 돌아가게 되는 것을 보는 멋진 경험을 했다 ㅋㅋㅋ

정말 언젠가 수정하겠다고는 했지만 어디가 어떻게 잘못됐는지 다시 코드를 들여보기가 무서웠었는데, "폴포리"님의 댓글 덕분에 작지만 JavaScript가 제대로 돌아간 것을 보았다 ㅋㅋㅋㅋ

 

다음 포스팅 때는 정말 멋진 계산기를 만들어서 포스팅해보도록 하겠다..!! :)

---

※ 코로나바이러스감염증-19 조심하세요!!!!