한 걸음씩

CHALLENGE 숫자 입력, 연산자 입력, 계산 수행, 결과 출력, 초기화 TOOL HTML, CSS, JS function calculate(btnValue){ if (btnValue === 'C'){ // 초기화 output = '' }else if (btnValue === 'D'){ // 삭제 output = output.slice(0, -1) }else if (btnValue === '%'){ // 퍼센트 계산 output = eval(output) / 100 }else if (btnValue === '='){ // 결과 도출 output = eval(output) }else{ // if 조건을 충족 못하면 button 이벤트 발생 시점으로 돌아가고 충족하면 다음 연산 실행 if (btnValu..

[요구사항 & 구현] 1. 화살표 버튼을 누르면 공유할 수 있는 소셜 미디아 링크 팝업이 나타난다 2. 모바일 버전도 함께 구현한다 [기술] HTML, CSS JavaScript [리뷰] 자바스크립트로 토글만 하면 돼서 어려운 점은 없었는데 css에서 시간을 많이 소비했다. 데스크톱에서 콘솔로 모바일 버전 확인했는데 잘 작동이 되어서 배포하고 휴대폰으로 확인하니까 모바일 버전으로 설정한 부분이 하나도 적용이 안 됐다... 왜지...? 모바일 버전에서 팝업을 끄는 것도 함께 만들어야 했는데 그 부분은 어떻게 구현해야 할지 도통 모르겠어서 일단 놔뒀다. js보다 css를 반응형으로 구현하는 게 너무 어려운 것 같다. https://github.com/winterkang/JavaScript-Challenge/..

[요구사항 & 구현] 1. 주황색 화살표를 클릭하면 숨어있던 텍스트가 보인다 2. 질문 사항 위에 마우스를 올리면 텍스트 색상이 변한다 [기술] HTML, CSS JavaScript [리뷰] 이번 프로젝트는 여러모로 아쉬운 점이 많다. 아코디언 부분을 보면 펼쳐지는 건 문제가 없는데 전부 다 펼쳤을 경우 설정해 둔 container박스 크기를 넘어가버린다. 하나의 질문을 선택한 후 다른 질문을 선택하면 이전에 선택한 아코디언은 원래상태로 돌아갈 수 있도록 구현하고 싶었는데 하지 못했다. 클래스로 active를 부여하고 토글 하면 될 것 같은데 좀 더 시도를 해봐야 할 것 같다. 반응형이 아니라 데스크톱 기준 full 사이즈에서는 문제가 없지만 화면을 줄이면 잘려서 보이지 않는다. → 전체적으로 수정이 필..

[요구사항 & 구현] 1. 숫자 버튼에 마우스를 올리면 주황색으로 변하고 마우스를 떼면 원래 색상으로 돌아간다. 2. 숫자 버튼을 클릭하면 회색으로 변한다 3. 제출 버튼에 마우스를 올리면 배경색이 흰색으로 변한다 4. 제출 버튼을 누르면 thank you 페이지로 넘어가는데 앞에서 무슨 숫자를 선택했는지 표시된다 ex) 버튼 4를 클릭한 후 제출 한 경우 → You selected 4 out of 5 5. 추가적으로 처음 페이지로 돌아갈 수 있도록 Go Back 버튼을 만들었다 [기술] HTML, CSS JavaScript [리뷰] 처음에 요구사항을 버튼을 누르는 개수마다 카운팅 해서 표시해야 한다고 잘못이해해서 한참 고민했는데 알고 보니까 단순히 클릭한 숫자를 표시하는 거였다. 이 부분은 자바스크립트..

HTML code Elon Reeve Musk 본명 일론 리브 머스크 Elon Reeve Musk 출생 1971년 6월 28일(51세) 남아프리카공화국 하우텡주 프리토리아 국적 남아프리카공화국 캐나다 미국 학력 퀸즈대학교(경제학) 펜실베니아 대학교(경제학,물리학) 학사 스탠퍼드대학교 대학원(물리학) 박사과정 중퇴 직업 기업가,투자자 CSS code body{ background: linear-gradient(#ffffff,#bcc3c8,#656667); display: inline-block; text-align: center; width:100%; } .outline{ background-color:black; margin: 10px; padding: 10px; width:600px; height:10..