Web Programming

[miniProject] 간단한 todolist 사이트 만들기

2021. 7. 6. 23:55
목차
  1. 목표
  2. 세부 목표 
  3. 만들면서 몰랐던 점 & 해결법 
  4. 결과물 사진 

안녕하세요 오랜만입니다. 

 

자바스크립트 기능을 활용할 수 있는 간단한 주제를 찾아보다가 할 일 목록을 만드는 것을 보았습니다. 

 

목표

할 일 목록을 추가하거나 삭제할 수 있는 사이트

세부 목표 

  • 체크박스에 체크하면 중간줄로 그으기
  • list를 추가할 때는 text박스에 목표를 쓰고 ENTER를 누르거나 +버튼을 누른다
  • list를 제거할 때는 왼쪽의 체크박스를 클릭하거나 그 문장을 클릭해서 체크된 상태로 만들고 -버튼을 누른다

만들면서 몰랐던 점 & 해결법 

  1. 자바스크립트로 DOM객체를 만들 때 class프로퍼티를 어떻게 설정하는가?
    • 객체속성의 className을 사용하면 class프로퍼티를 설정할 수 있다. ex) item.className = 'thisItem'
  2. input태그 checkbox type일 때 체크된 여부를 어떻게 확인하는가?
    1. https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=javaking75&logNo=220136692493 
    2. 객체속성의 checked를 사용하면 불 자료형 true, false가 반환된다.
  3. css로 어떻게 가운데로 정렬시키는가?
    • margin:0 auto; 를 쓰자 ex) body{ margin: 0 auto; }

 

결과물 사진 

초기화면 

이런식으로 입력을 할 수 있습니다 그리고 옆에 있는 +버튼을 누르면 

이렇게 각 리스트가 추가되며 옆에는 체크박스가 있습니다. 

체크를 할 수 있고 체크를 하게 되면 가운데 줄을 긋습니다. 

-버튼을 누르게 되면 체크된 리스트들을 모두 삭제합니다. 
  1. 목표
  2. 세부 목표 
  3. 만들면서 몰랐던 점 & 해결법 
  4. 결과물 사진 
'Web Programming' 카테고리의 다른 글
  • [javascript30] 1일차
  • [miniProject] html/css 연습 - 다른 웹사이트 따라해보기
  • [miniProject] 간단한 날씨 어플리케이션 만들기
  • [HTML] id, class, name 속성 차이
SpaceCowboy
SpaceCowboy
공부한거 기록하는 블로그입니다!!
SpaceCowboy
공부한거 기록하는 블로그
SpaceCowboy
전체
오늘
어제
  • 분류 전체보기
    • 프로그래밍 언어
      • C Programming
      • JavaScript
    • Computer Science
      • 자료구조
      • 알고리즘
      • 객체지향
    • 프레임워크
      • Nest.js
      • TypeORM
    • Web Programming
    • 블록체인
      • 기초
    • 데브옵스
      • Git
      • Docker

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

인기 글

태그

  • nestjs
  • TypeORM
  • HTML
  • 복습
  • CSS
  • 자료구조
  • typeorm0.3
  • 논리삭제
  • 이중연결리스트
  • customrepository
  • typeormseeding
  • softDelete
  • typeorm3.0
  • 자바스크립트
  • 재귀
  • 자바스크립트필기
  • JS
  • 자바스크립트챌린지
  • 자바스크립트 필기
  • 자료구조필기

최근 댓글

최근 글

hELLO · Designed By 정상우.
SpaceCowboy
[miniProject] 간단한 todolist 사이트 만들기
상단으로

티스토리툴바

개인정보

  • 티스토리 홈
  • 포럼
  • 로그인

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.