[JS] Todo-List

실행결과 미리 보기목표목표1. 할 일 클릭 시, 완료체크표시하기2. 삭제 버튼 클릭 시, 해당할 일만 삭제3. todo 할일 내용 localStorage에 저장/삭제하기4. todo 할일은 객체로 저장해서 관리하기 코드리뷰01메인 화면 TO DO LIST 추가  todo main.todo-list{ width: 100%; height: 630px; padding: 15px 20px; background-color:#d1ccc0; overflow-y: scroll; display: flex; flex-direction: column; align-items: end;}/* 스크롤바 css */.todo-list::-webkit-scrollba..

• format_list_bulleted DEVELOPMENT/JavaScript
• · 2024. 5. 13.
• textsms

[JS] 견종 정보 페이지

실행결과 미리 보기목표목표1.  [https://dog.ceo/dog-api/documentation/] 에서 강아지 사진 API 불러오기2. 필터링 버튼 클릭 시, input에 입력한 견종으로 검색되게 하기3. Select 에서 선택한 견종으로 img 보이기4. Top 버튼 클릭 시, 상단으로 이동5. More 버튼 클릭 시, 이미지 더 불러오기6. Reset 버튼 클릭시, input 내용 / Select 선택자 / main의 모든 이미지 초기화 코드리뷰01메인 화면 견종 정보 Page 필터링 all Reset More Top 02Window loa..

• format_list_bulleted DEVELOPMENT/JavaScript
• · 2024. 5. 3.
• textsms

[JS] Random Number Game

랜덤숫자와 User가 입력한 수를 비교1. 0에서 사용자가 지정한 숫자까지의 범위에서 랜덤 한 숫자를 찾기 (양의 정수 입력값만 게임이 진행된다.)2. 실시간으로 범위 값을 업데이트합니다. ( 기계의 랜덤한 값 / 게임 진행 count )3. User 가 모든 값을 입력해야 게임이 진행됩니다.4. User 게임의 승패 유무를 text를 표시합니다.5. 게임이 종료된 이후 입력창과 Play 버튼은 비활성화 된다.6. Reset 버튼을 누를시 새로고침으로 reset 된다. 메인화면Random Number Game Generate a number between 0 and Guess the number Play! reset 양의 정수로 입력시 게임시작const n..

• format_list_bulleted DEVELOPMENT/JavaScript
• · 2024. 4. 30.
• textsms

[JS] 로또 추첨

실행결과 미리 보기목표목표1. DOM 요소 개념 복습 DOM 요소 선택 (document.getElementById, document.querySelector) DOM 요소의 내용 변경 (innerHTML, textContent) DOM 요소에 스타일 동적 적용 (classList.add, classList.remove) 새로운 DOM 요소 생성 및 추가 (document.createElement, appendChild) 2. 배열의 순회 및 조작 익히기  추가 목표1. '추첨' 버튼을 클릭 시 1부터 45까지의 숫자가 중복 없이 랜덤 하게 표시됩니다.2. 추첨으로 나온 숫자는 숫자의 구역에 따라 공 색이 다르게 표시됩니다.3. '다시' 버튼으로 로또번호를 새로 reset 합니다.4. '랜덤으로 번호 얻..

• format_list_bulleted DEVELOPMENT/JavaScript
• · 2024. 4. 30.
• textsms

[JS] 실습예제

상황 별 Event 실행하기1. 모든 기능은 superEventHandler={} 안에 작성하기2. 구현해야 할 기능: 마우스 우 클릭/ 마우스 떠날 때/ 마우스가 있을 때/ 창 크기 변경할 때  객체 안에 함수 넣기// 1. 이름이 지정된 function 함수const myObj = { myMethod(params) { // ...do something here },}// 2. 익명 함수를 사용함const myObj = { myMethod: (params) => { // ...do something here },}// 3. ES6 이전 스타일const myObj = { myMethod: function myMethod(params) { // ...do something here..

• format_list_bulleted DEVELOPMENT/JavaScript
• · 2024. 4. 26.
• textsms

[JS] 데이터 타입

요약모던 자바스크립트 Deep Deive : 6장 데이터 타입자바스크립트는 7개의 데이터 타입을 제공한다. 7개의 데이터 타입은 원시타입과 객체타입으로 분류할 수 있다.기본형(원시 타입, Primitive Type)  / 참조형(Reference Type) : 객체(Object) Primitive Type은 값이 담긴 주소값을 바로 복제하는 반면,Reference Type은 값이 담긴 주소값들로 이루어진 묶음을 가리키는 주소값을 복제한다.    01. 숫자타입 (Number)자바스크립트는 독특하게 정수, 실수 모두 하나의 숫자타입으로만 존재한다.모든 수를 실수로 처리하며, 정수만 표현하기 위한 데이터 타입이 별도로 존재하지 않는다.var integer = 10;..

• format_list_bulleted DEVELOPMENT/JavaScript
• · 2024. 4. 24.
• textsms

[JS] 변수

요약모던 자바스크립트 Deep Deive : 4장 변수   변수 (Variable)하나의 값을 저장하기 위해 메모리에서 확보(allocate)한 공간아래의 코드처럼 10+20을 계산한다고 할때 10과 20은 각 메모리셀로 저장됩니다.(메모리를 구성하는 메모리 셀은 1byte의 크기로 2진수로 저장됨)10 + 20; CPU는 10과 20의 메모리 주소를 읽은 후, + 연산을 하여 30 의 값을 도출해내고 그 값을 임의의 메모리 주소에 저장하게 됩니다. 30의 값을 사용할때는 메모리 주소인 0x0669F913에 접근하면 된다But!  자바스크립트는 메모리 주소를 통해 값에 접근하는 기능을 제공 안해준다 => 메모리 주소에 접근하는 것은 치명적 오류를 발생시킬 ..

• format_list_bulleted DEVELOPMENT/JavaScript
• · 2024. 4. 24.
• textsms

[JS] 크리스마스 카운트다운

Today's목표1. 실시간으로 날짜, 시간 반영하기2. 현재 시간, 남은 D-day 표기하기추가 목표1. background에 눈내리는 애니메이션 추가2. 크리스마스는 올해 크리스마스를 기준으로 년도 자동으로 받아오기  코드리뷰01. Main Until Christmas Current time Christmas 🎄Christmas D-Day🎄  @import url(https://fonts.googleapis.com/css?family=Press+Start+2P); * { margin: 0; padding: 0; box-sizing: border-box;}html, body { h..

• format_list_bulleted DEVELOPMENT/JavaScript
• · 2024. 4. 24.
• textsms