[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

[Toy Projects] 상품 프리뷰 카드

Frontend Mentor - Product preview card component Frontend Mentor에서 html과 css를 선택하면 가장 처음 나오는 challenge를 시도해봤다. 갓 기초문법을 땐 쪼렙이라 오래 걸리기도 했고, 코드도 전문가가 보기엔 엉망이겠지만 처음 해 본 프로젝트라 기쁜 마음으로 올려본다. 사용스택 : html, css 첫 시도 치고 거의 비슷하게 만든 것 같아 뿌듯하다. 사이즈가 조금 다르긴 한데 내려받은 이미지파일 속 컨텐츠 사이즈를 정확하게 알 수 있는 방법이 있는지 잘 모르겠다. (1/10 추가 : 사이즈를 정확하게 알기 위해서는 제공하는 경우에 한해 Sketch and Figma design files 를 내려받을 수 있다. 무료인 경우도 있고, fro를 ..

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