자바스크립트로 스톱워치(목표 시간 맞추기) 만들기 2
안녕하세요 느종입니다. 오늘은 저번 시간에 이어서 스톱워치 메인 화면 페이지를 만들어보도록 하겠습니다. 그럼 바로 시작하겠습니다. 함께 공부해요! 메인 화면 페이지 화면 가운데에 00.000으로 시간을 나타낼 수 있도록 구성하였습니다. 초는 소수점아래 3째자리까지 표현을 하였는데 이 부분은 본인 입맛에 맞게 바꾸셔도 될 것 같습니다. …
안녕하세요 느종입니다. 오늘은 저번 시간에 이어서 스톱워치 메인 화면 페이지를 만들어보도록 하겠습니다. 그럼 바로 시작하겠습니다. 함께 공부해요! 메인 화면 페이지 화면 가운데에 00.000으로 시간을 나타낼 수 있도록 구성하였습니다. 초는 소수점아래 3째자리까지 표현을 하였는데 이 부분은 본인 입맛에 맞게 바꾸셔도 될 것 같습니다. …
안녕하세요 느종입니다. 오늘은 저번 시간에 말한대로 스톱워치를 만들어볼까 합니다. 그냥 초만 재면 재미 없으니깐 일정 목표를 정하고, 그 목표 시간에 정확히 맞출 수 있는 콘텐츠를 만들 생각입니다. 그리고 매번 시작 화면, 메인 화면, 결과 화면 이렇게 구성하다보니 지루한 감이 없이 않아 있어서 이번에는 결과 내용을 팝업(모달)창으로 …
안녕하세요 느종입니다 오늘은 같은 그림 찾기 페이지를 마무리 지어보도록 하겠습니다. 저번 시간에 이어서 메인 페이지 자바스크립트 함수를 작성하도록 하겠습니다. 그럼 바로 시작하도록 하겠습니다. 함께 해요! 자바스크립트 코드 [ scripts.js ] itemClickFunc(itemList) : 카드 아이템을 2개 클릭 했을 때 실행 …
안녕하세요. 느종입니다. 저번 포스팅에 이어서 같은 그림 찾기 페이지를 만들어 보도록 하겠습니다. 간단할 줄 알았는데 설명이 길어지다 보니 여러 개로 나누어서 올린 점 양해 부탁 드리겠습니다. 그럼 바로 시작하도록 하겠습니다. 함께 공부해요! 결과 화면 페이지 결과 화면 페이지입니다. 정말 심플하게 만들었습니다. 다양한 이미지나 문구들…
안녕하세요 느종입니다 오늘은 저번 시간에 이어서 메인 화면 페이지에 사용되는 함수와 기능들을 작성해보도록 하겠습니다. 그럼 바로 시작하겠습니다. 함께 공부해요! 메인 화면 페이지 같은 숫자를 찾으면 위 그림처럼 유지하고, 다른 그림을 찾을 경우에는 1초 정도 머무르다가 다시 카드 앞면으로 돌아가는 방식입니다. 여기에다가 더 다양한 효과…
안녕하세요 느종입니다. 오늘은 같은 그림 찾기 페이지의 메인 화면을 만들어 보겠습니다. 제가 작성한 코드가 꼭 정답은 아닙니다. 더 간결하게 효율적으로 코드를 작성할 수도 있고, 제가 쓰지 않은 더 다양한 메소드들을 활용할 수도 있습니다. 챗gpt의 도움 없이 최대한 자기 스스로 코드를 하나씩 작성해 나가는 것이 공부도 되고 의미도 있…
안녕하세요 느종입니다. 오늘은 저번 시간에 언급한 것과 같이 같은 그림 찾기 페이지를 만들어 볼까 합니다. 어렸을 적에 했던 자주 했던 사천성과 유사한 콘텐츠를 제작하여 페이지를 만들면 누구나 재밌게 즐길 수 있을 거라 생각합니다. 제가 만드는 것은 기본이 되는 간단한 콘텐츠들이고, 여러 가지 기능들을 더 추가하여 본인만의 재밌는 콘…
안녕하세요 느종입니다. 오늘은 구구단 퀴즈 페이지의 마지막 결과 화면을 만들어 보겠습니다. 결과 화면은 기존에 만들었던 것들과 거의 똑같습니다. 결과 화면을 마무리 짓고 다음 시간에는 같은 그림 찾기 페이지를 만들어볼까 합니다. OX퀴즈, 나라 수도 퀴즈, 구구단 퀴즈 까지 시작 화면, 메인 화면, 결과 화면의 비슷한 포맷으로 구성을 …
안녕하세요 느종입니다 저번 시간에 이어서 구구단 퀴즈 페이지의 메인 부분을 완성해보겠습니다. 그럼 바로 시작할게요. 함께 공부해요! 메인 화면 페이지 자바스크립트 코드 [ scripts.js ] 1. function checkingFunc(str) { : 정답 확인 버튼을 눌렀을 때 정답인지 아닌지를 변수로 넣고, 정답일 때는 두 수의…
안녕하세요 느종입니다. 오늘은 구구단 퀴즈 페이지의 메인 화면을 만들어볼까 합니다. 저번에 만들었던 나라 수도 퀴즈는 input 태그를 활용하였는데요. 이번에는 버튼 형식으로 구성을 하였습니다. 그럼 바로 시작하겠습니다. 함께 공부해요! 메인 화면 페이지 메인 화면 페이지입니다. 퀴즈 영역에서는 구구단이 임의로 주어지고, 그 아래에 0…
안녕하세요 느종입니다. 오늘은 무엇을 만들어볼까하다가 문득 구구단이 떠올랐어요. 그래서 간단하게 구구단 퀴즈를 해볼 수 있는 페이지를 만드려고 합니다. OX 퀴즈, 나라 수도 퀴즈 페이지에서 만들어 놓았던 기존 형태에서 크게 벗어나지 않으니 어렵지 않을거에요. 그럼 시작해볼게요. 함께 공부해요! 설계 이번에도 비슷한 형태로 구성해보았습…