[Toy Projects] 나만의 아고라스테이츠 만들기

Codestates - 나만의 아고라스테이츠 만들기 23년 3월 9~10일, 코드스테이츠에서의 한 달이 지나 Section 1의 마지막으로 솔로 프로젝트 '나만의 아고라스테이츠 만들기'가 이틀간 진행되었다. 동작설명 질문 리스트 10개씩 페이지네이션 질문 등록하면 질문 리스트에 디스커션 추가(현지 시간 반영) 제목 검색 기능(Coz' 요구사항 외 개인적으로 추가한 기능) ## Bare Minimum Requirement Self Checklist - [⭕️ ] 디스커션 나열 기능 - [⭕️ ] `script.js`를 수정하여 `agoraStatesDiscussions` 배열의 데이터를 나열할 수 있게 구현합니다. - [⭕️ ] CSS - [⭕️ ] 아고라 스테이츠 질문 리스트가 중앙으로 와야 합니다. ..

• format_list_bulleted ToyProject/Frontend Mentor
• · 2023. 3. 15.
• textsms

[Toy Projects] 레트로 Space Shooter Game 만들기

Space Shooter Game 유튜버 '코딩알려주는누나'의 영상을 참고하여 space shooter game을 만들었다. 동작설명 키보드의 좌우키로 우주선을 조종하고 스페이스바로 총알을 발사할 수 있다. UFO가 1초간격으로 랜덤하게 내려오고 총알로 UFO를 격추시키면 SCORE가 올라간다. 우주선이 화면 바닥에 닿으면 게임오버화면이 뜨며 게임이 멈춘다. 사용스택 html, css, javascript 결과물 배운 것 1. KeyboardEvent.KeyCode가 지원 중단되고 KeyboardEvent.Key로 바뀌었다고 한다. 키값을 보면 KeyCode는 32(스페이스바), 37, 39(좌우방향키) 등 숫자로 콜아웃되고 Key는 'ArrowRight', 'ArrowLeft' 등 상대적으로 직관적인 ..

• format_list_bulleted ToyProject/Frontend Mentor
• · 2023. 3. 7.
• textsms

[Toy Projects] 팁 계산기

Frontend Mentor - tip calculator app 동작설명 bill(가격), select tip%(팁 퍼센테이지), Number of people(사람 수)을 입력/선택하면 팁값(가격/사람수*(팁퍼센트/100))과 본인이 내야하는 전체 금액(음식값(가격/사람수)+팁값)을 입력과 동시에 실시간으로 계산해준다. 팁 값과 전체 금액은 소수점 이하 2자리로 표시. Number of people(사람 수)의 경우 입력하지 않으면 한 명(1)으로 계산되지만 0을 입력하면 입력창의 테두리가 붉게 변하며 can't be zero라는 안내문구가 뜬다. RESET버튼을 누르면 모든 입력값이 초기화된다. bill을 제외한 select tip%과 number of people 은 입력하지 않아도 작동한다 (b..

• format_list_bulleted ToyProject/Frontend Mentor
• · 2023. 2. 12.
• textsms

[Toy Projects] 알림창 동작화면

Frontend Mentor - notifications page main 챌린지 뉴비 단계를 3번정도 하고 나니 조금 자신감이 붙어서 이번엔 주니어 단계에 도전했다 (프론트엔드 멘토 챌린지는 newbie, junior, intermediate, advanced, guru의 다섯 단계가 있다). 뉴비때보다 시간이 조금 더 걸렸지만, 구현에 성공했다. 동작설명 1. 스마트폰 앱의 알림창처럼 알림을 하나씩 누를 때 마다 Notification 글자 옆의 알림 숫자가 줄어들고, 누른 알림의 배경이 흰색으로 바뀌며, 알림 끝의 붉은 점이 사라진다. 2. Mark all as read를 누르면 모든 알림이 읽음 상태가 되며, 숫자도 0으로 바뀐다. 3. 메시지가 와 있는 알림을 누르면 메시지가 부드럽게 슬라이드 ..

• format_list_bulleted ToyProject/Frontend Mentor
• · 2023. 1. 22.
• textsms

[Toy Projects] email을 검증하는 coming soon 화면

Frontend Mentor - base apparel coming soon master 이번 챌린지에선 저번 챌린지때 공부한 것들을 사용한 부분도 있고 새롭게 고민한 부분도 있어 복습과 진도빼기를 다 한 것 같아 만족감이 높았다. 동작설명 이메일 입력창에 이메일을 입력하고 제출 버튼을 누르면 javascript에서 이메일 유효성 검사를 실시한 후 유효하지 않을 경우 경고 문구와 에러 마크를 띄운다. 목표 버튼에 마우스를 올렸을 때(마우스 오버) 상태 변화 이메일 유효성 검사 유효하지 않을 경우에만 경고 문구와 에러 마크(svg파일) 출력 (프론트엔드에서 제시한 수행요건을 참고해 만든 개인적인 목표이다) 사용스택 html, css, javascript 결과물 메인 페이지. 입력창과 제출 버튼 겹치기, 그..

• format_list_bulleted ToyProject/Frontend Mentor
• · 2023. 1. 14.
• textsms

[Toy Projects] 1~5점 숫자 만족도 평가

Frontend Mentor - interactive rating component 드디어 Frontend Mentor를 통한 두 번째 challenge...! 저번엔 html과 css만을 이용한 정적 구현 첼린지였지만 이번엔 javascript까지 살짝 곁들인 동적 구현 첼린지(뉴비용)에 도전해보았다. 동작설명 1~5까지의 선택 버튼 중 하나를 눌러 submit하면 페이지가 넘어가며 Thank you!라는 글과 함께 자신이 선택한 번호를 화면에 출력하는 형태이다. 목표 버튼에 마우스를 올렸을 때(마우스 오버) 상태 변화 버튼을 클릭했을 때 상태 변화 (새 창이 열리며 서브 화면으로 이동) 서브 화면에 메인 화면에서 선택한 버튼의 숫자 출력 (프론트엔드에서 제시한 수행요건을 참고해 만든 개인적인 목표이다..

• format_list_bulleted ToyProject/Frontend Mentor
• · 2023. 1. 11.
• textsms