준비물 체크리스트와 남은 수 만들기

준비물 3개를 체크하면 남은 수가 줄고, 키보드로도 선택을 바꿀 수 있었습니다.

1. Codex에서 새 작업을 열고 아래 제작 프롬프트를 그대로 붙여 넣습니다. 2. 완성된 demo.html을 브라우저에서 엽니다. 3. 처음 남은 3개를 확인하고 물병을 선택한 뒤 해제해 3→2→3을 봅니다. Tab과 Space로 다른 항목도 선택합니다.

여행 준비물 “물병, 모자, 충전기” 세 가지를 체크하는 연습 페이지를 만들어줘. 처음에는 남은 항목이 세 개라고 보여주고, 체크하거나 다시 해제할 때 남은 수가 바로 바뀌게 해줘. 계정이나 저장 기능은 넣지 말고 키보드로도 각 항목을 선택할 수 있게 해줘. 나는 코딩을 처음 해. 어려운 말은 짧게 풀어 설명하고, 먼저 현재 상황을 확인한 뒤 요청한 범위만 진행해줘. 확인할 수 없는 내용은 추측하지 말고 알려줘. 내 실제 데이터나 비밀값을 사용하지 말고, 새 유료 서비스나 외부 API를 추가하지 마. 작업을 마치면 내가 직접 확인할 순서와 실행하지 못한 부분을 나누어 알려줘.

물병·모자·충전기 세 항목이 표시되고 처음에는 3개였다. 물병을 클릭하면 2개가 됐고 Space로 해제하면 3개로 돌아갔다. Tab으로 모자로 이동해 Space를 누르자 모자만 선택되고 2개가 됐다. 같은 동작을 390×844에서도 다시 확인했고, 가로 넘침 없이 모든 조작 요소가 화면에 들어왔다.

체크해도 수가 맞지 않아. 체크와 해제를 각각 다시 해보고 남은 수 계산을 고쳐줘.

요청 조건을 읽고 제작·검사한 예제입니다. 문장만 넣은 독립적인 1회 생성 실험은 아닙니다. VibeAZ 자체 제작 · 확인한 예제 파일과 환경에서의 결과입니다. Chrome 한 버전과 1280×900·390×844 화면에서 확인했습니다. 별도 기기, 다른 브라우저나 코딩 도구에서의 동작은 확인하지 않았습니다.