나디아 성장 일기

05. 반응 속도 테스트반응 속도 테스트 github  반응 속도 테스트 📌화면 UI 클래스: 대기 화면, 준비 화면, 측정 화면 등 다양한 클래스 준비 후 변경텍스트 변경: 상황에 따라 텍스트 내용 변경타이머: 랜덤하게 화면 UI를 변경 구현리액트 공부 때문에 스타일링에 신경을 많이 쓰지 못했다.setTimeout()과 Math 메서드들이 낯설었는데 이번에 써보면서 꽤 익숙해진 것 같다.   프로젝트 목표 및 달성✊UI ✅ 여러 클래스 준비 후 상황마다 클래스 변경하기자바스크립트 ✅ 타이머 API 사용하기 ✅ 템플릿 리터럴하기 ✅ 랜덤 숫자 사용하기    순서도💻

04. 로또 추첨기로또 추첨기 github   로또 추첨기 📌숫자 자릿수에 따른 공의 색상: 로또 공의 숫자에 따라 색상이 달라진다.1부터 10까진 노란색11부터 20까진 파란색21부터 30까진 빨간색31부터 40까진 회색41부터 45까진 남색보너스 숫자는 연두색 최종 등수와 상금: 로또 추첨과 일치하는 숫자의 개수에 따라 등수와 상금이 결정된다.랜덤 숫자와 모두 동일하면 1등 - 4억6개만 동일하면 2등 - 5천만원5개만 동일하면 3등 - 140만원 로또 추첨 로직(1) 숫자 추첨: 1부터 45까지의 숫자 중 무작위로 6개를 추첨(2) 보너스 숫자 추첨: 나머지 숫자 중에서 무작위로 1개를 추첨(3) 색상 결정: 각 숫자에 맞는 색상을 결정하여 표시(4) 등수 결정: 사용자가 입력한 숫자와 추첨된 숫..

03. 계산기계산기 github  계산기 📌산술 연산: 입력 받은 두 값을 연산한다.실시간 결과: 입력하는 즉시 결과를 확인한다.리셋 기능: 계산을 초기화하고 새로 시작한다.  구현쌀집 계산기를 너무 구현하고 싶었다!!!실제 사진 보면서 색상도 따왔는데 꽤 비슷해보여서 만족스러웠다.  프로젝트 목표 및 달성✊UI✅ CSS 레이아웃 구현쌀집 계산기 구현하기!  자바스크립트✅ 복잡한 로직의 단계를 나누어 구현하기✅ 함수로 만들어서 사용하는 것에 익숙해지기✅ 정규 표현식(Regex) 사용하기  순서도💻

02. 영화 소개 🎞️영화 소개 github  영화 소개 페이지📌카드 컴포넌트: 등장인물 소개영화 소개스크롤 위치: 스크롤 위치마다 스틸컷 변경비디오 삽입  구현한창 상견니에 빠져 있을 때 만들었던 영화 소개 페이지를 애니메이션을 추가해서 리팩토링 했다.     프로젝트 목표 및 달성✊UI✅ GSAP 라이브러리로 애니메이션 구현하기 자바스크립트✅ 스크롤 위치마다 사진이 달라지는 기능 구현하기 접근성✅ 접근성 고려하기

01. 끝말잇기🕹끝말잇기 github  끝말잇기 규칙📌시작 단어: 선수가 한 단어를 말하고, 이 단어가 제시어가 된다.끝말잇기: 다음 차례의 선수는 바로 전 선수가 말한 단어의 마지막 글자로 시작하는 단어를 말한다.참가자 순서: 참여하는 플레이어들은 정해진 순서대로 단어를 말한다.실패 조건: 끝말잇기의 규칙을 어길 경우 해당 플레이어는 실패하게 되어 해당 라운드는 종료된다.  구현   프로젝트 목표 및 달성✊UI✅ 반응형 구현하기✅ GSAP 라이브러리로 애니메이션 구현하기 자바스크립트✅ 요소 선택자 사용하기✅ 함수로 만들어서 사용하는 것에 익숙해지기✅ 간단한 로직도 단계로 나누어 구현해보기 접근성✅ 접근성 고려하기  순서도💻

장바구니 기능 : 상품 목록을 보여주고 담기 버튼 클릭 시 장바구니에 담기며, 담은 상품의 합계와 영수증을 보여주는 페이지 사용 언어 HTML CSS Javascript 구조 index.html - 전체 구조 index.js - 기능 구현 main.css - 전체 디자인 store.json - 데이터 파일 코드 구현 계획 1. 레이아웃 구성하기 (html, css) - 상품 카드 만들기 2. 상품 목록 데이터 끌어오기 - 데이터 갯수만큼 html 생성하기 3. 검색 기능 (1) 검색어 필터링 (2) 검색어가 없는 카드엔 hide 클래스 추가 / 있으면 제거 4. 상품 드래그 기능 5. 장바구니에 있는 상품 카드의 html 수정 - 수량 입력 칸 추가 () 7. 최종 가격 출력 8. 개인 정보 입력창 - ..

영화(movie) 소개 : 우측엔 영화 스틸컷, 좌측엔 영화 소개가 있는 영화 소개 페이지 사용 언어 HTML CSS Javascript 구조 index.html - 전체 구조 index.js - 기능 구현 main.css - 전체 디자인 코드 구현 계획 1. 스크롤 시 사진 고정하기 position: sticky; 2. 일정 스크롤 시 사진 변경하기 document.getElementById("img").src = "xiang1.png"; index.html 상견니(想見你) 소개하기 想見你 상견니 널 보고 싶어 Someday or One Day 『상견니』는 가가연, 허광한, 시백우 주연의 2020년 대만 최고의 화제작이다. 『상견니』는 대만 OTT 플랫폼 누적 클릭수 3천만 회, 전 세계 OTT 플랫폼..

회원가입 : 회원가입 유효성 검사 페이지 사용 언어 HTML CSS Javascript 구조 index.html - 전체 구조 index.js - 기능 구현 main.css - 전체 디자인 코드 구현 계획 & 기능 구현 1. 탭 구현 (회원가입, 로그인) 2. 회원가입 입력 칸 - 공백 검사 - 유효성 검사 전송 버튼 - 닉네임 (4 ~ 8자, 영소문자, 숫자) - 이름 (2 ~ 5자, 한글) - 비밀번호 (6 ~ 12자, 영소문자, 숫자) - 이메일 (이메일 형식) index.html 회원가입 이름 이메일 아이디 비밀번호 전송 index.js // 탭 기능 const tab = document.querySelectorAll('.tab_menu .list li'); for (var i = 0; i < t..

스크롤(scroll) 포트폴리오 : 스크롤을 내려가며 볼 수 있는 포트폴리오 사용 언어 HTML CSS Javascript 구조 index.html - 전체 구조 index.js - 기능 구현 main.css - 전체 디자인 코드 구현 계획 & 기능 구현 1. 메뉴바 생성 1-2. 상단에 고정 - position: fixed; 1-3. 서브메뉴 위치 설정 - 태그 이용 2. 본문 2-1. 메뉴마다 나누기 - 태그 이용 2-2. 내용 넣기 (1) Home 자기소개 (간략) (2) About 깃허브, 벨로그 버튼 (3) Skills 가능 언어 가능 프로그램 (4) Projectst 자바 세미 프로젝트 - 캐러셀 슬라이드 (5) Contact me 이메일 주소 연락처 3. 스크롤 이벤트 3-1. 스크롤 진행바..

로딩 창(Loading) & 동영상 : 로딩 창 및 동영상 삽입 구현 사용 언어 HTML CSS Javascript 구조 index.html - 전체 구조 index.js - 기능 구현 main.css - 전체 디자인 코드 구현 계획 1. 로딩 gif와 동영상 준비 2. setTimeout() 함수를 통해 로딩 페이지에서 5초 뒤 동영상 페이지로 전환하기 로딩 페이지는 display: none 동영상 페이지는 display: flex index.html Loading... Someday or One Day index.js setTimeout(() => { document.getElementById('loading').style.display = 'none'; document.getElementById('..