Dev다D

코드잇 산성비 그동안 배운 것들을 활용해서 input 태그에 단어 입력이 완료되면 화면에 있는 단어들이 사라지도록 만들어 봅시다. 단어들을 만드는 로직은 initializer.js에 있는데요. 각 단어가 만들어진 특징을 정리해보면 다음과 같습니다. 각 단어들은 span 태그로 만들어져 있다. 각 단어들은 웹 페이지가 갱신될 때마다 랜덤한 위치를 가진다. 각 단어들은 data-word라는 속성을 가지고 값은 그 단어를 담고 있다. 각 단어들은 div#container 태그의 자식 태그들이다. 위 특징을 활용해서 단어 입력이 완료되면 화면에 있는 단어들이 사라지는 이벤트 핸들러를 만들고, input 태그에 적절한 타입으로 이벤트 핸들러를 등록해 주세요. 이벤트 핸들러가 갖추어야 하는 기능은 다음과 같습니다...

똑Talk한 Enter키! HTML/CSS, 그리고 자바스크립트를 활용해서 웹으로 간단한 채팅 앱을 만들었습니다. textarea 태그에 메시지를 입력하고 오른편에 있는 send 버튼을 클릭하면 화면에 내가 입력한 메시지가 나는데요. text 타입의 input 태그나 textarea 태그를 자바스크립트로 선택한 다음에 해당 요소 노드의 value 프로퍼티를 활용하면 해당 태그에 입력된 값을 다룰 수 있습니다. 그런데 한 가지 아쉬운 점은 키보드로 메시지를 입력하고 나면, 마우스를 움직여서 send 버튼을 눌러야 한다는 겁니다. 아쉬운 규리를 위해서 textarea 태그에서 enter 키를 누르면 sendMyText 함수가 호출되는 코드를 추가해 주세요. 코드를 완성했을 때 아래 조건들이 지켜져야 합니다...

효준이네 집 data-title 속성과 자바스크립트를 활용해서 마우스 커서가 해당 태그 위로 올라가면 data-title 속성의 값이 나타나도록 코드를 완성해 주세요. 세부적인 조건은 다음과 같습니다. showTitle 함수 showTitle 함수가 호출되면 가장 먼저 조건문을 통해 이벤트 객체의 target 프로퍼티에 담긴 요소에 data-title 속성의 값을 가지고 있는지 확인합니다. 조건문이 true일 경우 span 태그 형태의 요소 노드를 생성합니다. 이 요소 노드는 'title'이라는 class 값을 가지고 있어야 합니다. 이 요소 노드의 내부에 target 프로퍼티에 담긴 요소의 data-title 속성에 담긴 값을 할당해 주세요. 이 요소 노드를 target 프로퍼티에 담긴 요소의 마지막 ..

마우스를 이용해서 마우스 왼쪽 버튼을 누르면 청기(flagBlue)가 올라가고, 마우스 오른쪽 버튼을 누르면 백기(flagWhite)가 올라가도록 기획을 했는데요. 나름대로 열심히 고민해서 코드를 작성해봤지만 좀처럼 구현하기가 쉽지 않고 자꾸만 오른쪽 클릭을 할 때 브라우저의 메뉴창이 나타나서 어떻게 해야할지 막막해 하는 중입니다. 마우스 왼쪽 버튼을 누른 순간 청기(flagBlue)에 'up'이라는 클래스 속성값이 추가되고, 마우스 오른쪽 버튼을 누른 순간 백기(flagWhite)에 'up'이라는 클래스 속성값이 추가되는 flagUp 함수를 완성해 주세요. 웹 페이지에서 contextmenu 이벤트가 발생하면 브라우저의 메뉴창이 나타나지 않도록 막아주세요. 참고로 flagUp 함수 안에 있는 setTi..

효율적으로 완료한 일 체크하기! 이벤트 위임을 활용할 수 있도록 이벤트 핸들러, updateToDo 함수를 완성해 주세요. updateToDo는 이벤트가 발생한 대상이 item이라는 클래스 속성 값을 가지고 있을 때 동작해야 합니다. 이벤트 핸들러를 li 태그 각각에 등록하는 것이 아니라 하나의 태그에만 등록해 주세요. 코드를 잘 작성했다면, 첫 번째 두 번째 할 일 뿐만아니라 자바스크립트로 추가한 네 번째 할 일을 클릭했을 때도 'done'이라는 class 속성값이 toggle되면서 스타일 변해야 합니다. 세 번째 할 일은 클릭을 해도 아무런 변화가 없어야 합니다. 오늘 할 일 자바스크립트 공부하기 고양이 화장실 청소하기 고양이 장난감 쇼핑하기 body { margin: 0; padding: 0; di..

완료한 일 체크하기! 이벤트 객체를 활용한 이벤트 핸들러, updateToDo 함수를 완성해 주세요. 이 함수는 이벤트가 발생한 대상에 'done'이라는 class 속성값을 toggle하는 함수여야 합니다. 반복되는 부분들이 좀 더 간단하게 정리되도록 이벤트 핸들러를 등록하는 반복문을 작성해 주세요. 코드를 잘 작성했다면, 첫 번째 두 번째 할 일은 클릭했을 때 'done'이라는 class 속성값이 toggle되면서 스타일이 변하고, 세 번째 할 일은 클릭을 해도 아무런 변화가 없어야 합니다. 오늘 할 일 자바스크립트 공부하기 고양이 화장실 청소하기 고양이 장난감 쇼핑하기 body { margin: 0; padding: 0; display: flex; align-items: center; justify-..

오늘 꼭 해야할 일! 본인이 작성한 태그 안에 li 태그로 오늘 할 일들을 추가하고 싶어합니다. li 태그이름을 가진 요소 노드를 만든 다음 그 요소 노드에 파라미터로 전달받은 오늘 할 일(text)을 담고 태그의 마지막 자식 요소 노드로 추가하는 addNewTodo함수를 완성해 주세요. 오늘 할 일 body { margin: 0; padding: 0; display: flex; align-items: center; justify-content: center; } .main { width: 350px; margin: 40px; padding: 30px 0; background-color: #fcfcfc; box-shadow: -5px -5px 20px #FFFFFF, 5px 5px 20px #BABECC..

정답일까? 주어진 코드를 실행했을 때 화면에 나타나는 채점이라고 적힌 button 태그를 클릭하면 정답입니다!👏🏻라는 경고창이 나타나도록 코드를 작성해 주세요. (박수 이모지 만들기가 어렵다면 본문의 글을 복사해서 붙여넣어 보세요) 단, HTML 태그에 직접 이벤트 핸들러를 등록하지 말고 자바스크립트 파일에서 코드를 작성해 주세요. 정답일까? 채점 body { text-align: center; padding: 30px 0; } #title { font-weight: 500; } #grade { width: 65px; height: 35px; color: #6500c3; font-size: 15px; border: solid 1px #6500c3; border-radius: 5px; background-..

팰린드롬 팰린드롬 여부를 확인하는 함수 isPalindrome을 작성하려고 하는데요. isPalindrome은 파라미터 word가 팰린드롬이면 true를 리턴하고 팰린드롬이 아니면 false를 리턴합니다. function isPalindrome(word) { for (let i = 0; i < Math.floor(word.length / 2); i++) { let left = word[i]; let right = word[word.length - 1 - i] if (left !== right) { return false } } return true } // 테스트 코드 console.log(isPalindrome("racecar")); console.log(isPalindrome("stars")); co..

현명하게 거스름돈을 계산해 주는 프로그램을 만들려고 합니다. 예를 들어 33,000원짜리 물건을 사기 위해 100,000원을 냈다면, 이런 식으로 '가장 적은 수'의 지폐를 거슬러 주는 것입니다. 50,000원 1장 10,000원 1장 5,000원 1장 1,000원 2장 우리는 calculateChange라는 함수를 작성하려고 하는데요. 이 함수는 지불한 금액을 나타내는 payment와 물건의 가격을 나타내는 cost를 파라미터로 받습니다. function calculateChange(payment, cost) { let change = payment - cost; const fiftyCount = (change - (change % 50000)) / 50000; change = change - 5000..