HaileyKim

Javascript Project 6. 탁구점수판

간단한 탁구 점수판
옵션에 11포인트까지 넣고, 각 포인트숫자에 도달하면 Player버튼이 disabled된다.

HTML & CSS

• 프레임워크쓰니까 간단하고 빠르게 완성할 수있었다. 이렇게 편리할 수가 ....
• 간격 넣을 지 말지, 툴열어서 계속 재보고, 고민하는 시간이 줄었다. 탁구img 고르는것보다 빨랐다...

JS

• 각 점수가 해당 게임포인트숫자에 도달하면 점수입력버튼이 비활성화
• 최종 점수가 이긴사람은 초록색, 진사람은 빨간색으로 표시된다.
• 처음엔 단순하게 하나하나 querySelector로 지정했다가 Player 1에  속하는 것들, Player  Two에 속하는것들을 다시 object로 묶어서 처리.
• 점수,버튼,display를 덩어리로 묶어 일괄적으로 함수에 반영
• updateScores함수를 만들어 player1, player2를 매개변수로 넣고 동일한 함수활용.
• addEventListener('change')를 사용해 다음 게임(option 변경)으로 넘어갈때 점수판 리셋.
• reset 함수 : for of에 object 두개를 넣어 점수 리셋.

중복되어 계속 사용되고 관계있는것들을 object로 묶어서 사용하는게 익숙하지 않아서 어제했던 코드를 다시 쳐봤다..
같은 기능인데 object로 다시묶어서 하니까 소스가 간결해지고 수정할 부분도 적어졌다.

Javascript Project  1 .  회원가입양식 및 유효성검사

회원가입양식

사용자이름, 이메일, 비밀번호를 기입할 수있게 했다.

사용자가 입력한 값이 유효하면 초록색으로 하이라이트를 주고, 유효하지않으면 빨간색이 뜨며, 안내메세지가 해당칸 하단에 나온다.

이메일정규식을 넣어 이메일값의 유효성을 검사한다.

CSS

• 사용자가 입력하기위해 input칸을 누르면 선택한 칸을 보여주기위해 보더강조한다.
• 주요색상은 이름을 선언후 불러서 쓰기
• 상위태그에 relative를 줘서 하위태그가 absolute적용 후 포지션기준을 잡을 수있게 했다.
• 에러메시지는 기본적으로 가려주고, 에러상태에서만 나타나도록 설정.

JS

• 이메일 정규식표현을 구글링 한 후 유효성검사 함수에 넣어줬다. 사용자가 입력한 이메일문자의 유효성을 검사한다.
• 올바르게 입력했으면 input태그를 감싸는 부모태그에 하이라이트속성이 담긴 클래스명이 추가된다.
• 조건설정시 콘솔에 입력하면서 작동되는 지 확인하면서 작성
• 첫번째 암호와 확인암호가 불일치 할 경우 안내메세지를 출력한다.

개인프로젝트를 작게나마 매일 해야겠다.

자바스크립트기능을 넣을때마다 효과들이 눈에 보이니까 재밌다. 아직 백엔드기능이없어서 빈깡통느낌이지만, 빨리 주변지인들도 이용할 수있는 사이트를 완성하고싶어졌다.