자바스크립트 프로젝트

✔️ 끝말잇기 순서도 ✔️ HTML 구성 🔴 몇 명이서 게임을 진행 할 것인지 입력 값 받기 prompt창을 띄워서 몇명이서 참가할 것인지 입력값을 받는다. 주의할 점은 prompt 값의 입력값은 숫자를 입력하더라도 문자열로 출력이 된다. 저 parseInt

- 순서도

- 숫자야구란? > 1. 상대편이 숫자 1~9 중에서 중복되지 않게 네 개의 숫자를 고른다. 10번의 기회가 주어지고 상대편이 고른 숫자 네 개를 맞히면 된다. 이때 숫자만 맞히는 것이 아니라 숫자의 순서까지 맞혀야 한다 만약에 상대방이 3 6 7 9 라는

원래라면 for 문을 사용해서 만들었겠지만 이번에는 fill과 map 메서드를 사용해서 만들었다.일단 45개 항목을 가지고 있는 빈 배열을 만들어준 후에 map 메서드를 통해서 index에 1을 더하는 방향으로 1부터 45 값을 채워주었다. 숫자가 잘 출력 되는 것을

🔍 순서도 만들기 🔍 HTML, CSS 코드 🔍 클릭할 때 화면 전환하기 CSS 에서 클래스 이름이 waiting 일때 파란색, ready 일때 빨간색, now 일때 초록색으로 변한다. 을 사용하면 그 변수안에 '클래스명'이 존재하는지 판단하고 true/f

📌 완성 됐을 때의 모습 🔍 기능 설계 해보기 🔍 HTML 구성해보기 Web Developer Tool 을 이용해서 CSS 를 지워보면 이런 HTML 구조가 나오는데, 이런 구조에 맞춰서 HTML 을 작성해보았다. ❓ HTML 에서 label 속성이란 ❓

🔍 완성 화면 🔍 설계도 🔍 HTML 만들기 📌 label 속성이란 ? input 요소와 연결지어서 input 창의 유연성을 더 할 수 있는 속성이다. 예를 들어서, input 만 있다면 input 안의 칸을 클릭해야만 input 창이 클릭 되는데, l

\-HTML \-CSS video가 timeupdate 될때마다 progress 바가 변경되어야 하는 부분과, progress 바를 움직일때 비디오의 재생화면을 변경 시켜줘야하는 부분이 좀 어려웠다.비디오의 시간이 update 될때마다 input range 값이 변경이

\-HTML\-CSS우선적으로 환율 api를 통해 데이터를 받아와야하므로 async await 과 fetch 를 통해서 데이터를 받아왔다.그 안에서 받아온 data 를 이용해서 현재 환율을 표시해주었고, 각 amount.value에 맞는 값을 표시했다.또한 swap 버

🔍 구현 할 내용들 🔍 HTML 코드 🔍 주의 해야 할 점들 fetch 요청을 날릴때 https:// 를 붙여주지 않아서 계속 404 오류가 나왔었다.. 되게 사소한 실수였지만 시간을 좀 많이 소모했었다. innerHTML 내에서 map 함수를 사용해서 같

🔍 알아두어야 할 점 서로 겹치는 섹션이 많다보니 CSS position 배치가 굉장히 어려웠다.

🔍 완성 화면 ✔️ 정리해야할 부분들 1. scrollTop, scrollHeight, clientHeight 의 차이점 >scrollTop 은 글의 시작 위치부터 현재 화면에 보이는 부분 전까지의 길이이다. scrollTop 을 통해 지금까지 스크롤을 해온 길

다시 시작 버튼을 클릭했을때, 다시 게임이 시작되는 기능을 어떻게 구현할까 고민했었는데, window.reload() 기능을 통해서 페이지가 다시 새로고침 되는 기능을 구현할 수 있었다.

원래는 copyTitleText를 forEach 문을 통해서 setInterval를 통해 출력을 하려 했는데, 한번에 모든 글자가 출력이 되는 오류가 발생했다. 아예 index 값을 하나씩 높여줌으로써 문제를 해결하였다!

conic-gradient 는 중심점을 중심으로 회전해서, 색상 전환이 있는 그라데이션으로 구성된 이미지를 만든다. transform-origin 은 요소의 원점을 변경시키는 속성이다. 회전하는 원점이 변경된 것을 확인할 수 있다.