Todo_List 만들기.

프로젝트/개인프로젝트 2023. 12. 5. 13:50

728x90

코테를 처음 보러갔는데, 알고리즘 문제가 나올 줄 알았는데,
TodoList만들기 문제가나와, html,css만 작성하고 js를 작성하지못하고 시간을 다 써버렸다.

부족한 점이 많은 것 같아 한번 혼자 TodoList를 만들어보기로 했다.

🔎 완성

🔎 구현 기능

input창에 입력 후 +버튼을 클릭하면 할일이 추가됨.
삭제 버튼 클릭시 해당 목록 삭제
할일 완료 클릭 시 해당 목록 줄 긋기
입력창에 아무것도 입력안하고 +버튼 클릭시 alert창으로 경고창

🔎 구현 방법

- HTML -

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="index.css" />
  </head>
  <body>
    <div class="head_tit">TodoList</div>
    <div class="Wrapper">
      <div class="input_F">
        <input type="text" id="addValue" placeholder="내용을 입력하세요" />
        <button id="add_btn" onclick="addTodo()">+</button>
      </div>
      <div id="result"></div>
    </div>
    <script src="index.js"></script>
  </body>
</html>

1. <head>태그에 <link>태그를 사용하여 css파일을 연결해준다.

2. <body>태그에 크게 두개의 div영역으로 나눈다. 첫번째는 타이틀 제목, 두번째는 입력창,버튼,결과물이보여질 영역이 포함되어있다.

3. Wrapper 태그안에서 input_F 영역과 result영역 두가지로 나눈다.

4. input_F영역에서 인풋창에 입력 후 버튼을 클릭했을 때 onclick="addTodo()" 설정을하여, addTodo함수가 실행되도록 해준다.

5. addTodo함수가 최종적으로 실행되고 result 영역에 추가되도록 설정하여 result에는 추가된 할일들이 자리잡게 된다.

6.마지막에 script태그를 통해 index.js와 연결하여, 함수들이 실행될수 있도록 설정해준다.

-CSS-

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  height: 100vh;
  width: 100%;
  /*linear-gradient : 그라데이션주기*/
  background: linear-gradient(to bottom, #e6e6fa 0%, #fff0f5);
}

.head_tit {
  text-align: center;
  font-family: "Courier New", Courier, monospace;
  font-weight: bold;
  font-size: 30px;
  margin-top: 50px;
}

.Wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .input_F {
    height: 40px;
    margin-top: 10px;
    #addValue {
      outline: none;
      width: 400px;
      height: 100%;
    }
    #add_btn {
      font-size: 20px;
      font-weight: bold;
      border: none;
      margin-left: 10px;
      cursor: pointer;
    }
  }
  #result {
    width: 400px;
    margin-top: 20px;
    > div {
      margin-top: 10px;
      height: 40px;
      width: 100%;
      background-color: beige;
    }
  }
}

1. box-sizing : border-box;를 설정하여 padding이나 border 등 테두리,여백등을 지정한사이즈에 포함시켜 설정해준다.

ex) width:100px , height: 100px , padding:20px , border : 10px solid black;

= 기본 설정일때 : width: 100px + 20px + 10px. = 130px. height: 100px + 20px + 10px = 130px

= box-sizing : border-box일때 : width : 100px height: 100px;

2. background :liner-gradient ( to-bottom , #e6e6fa 0% , #fff0f5);

배경색을 그라데이션 효과를 주는것이다.

1) to-bottom 그라데이션 방향설정.

2) #e6e6fa는 시작위치의 색상 설정.

3)0% 그라디언트 효과의 시작점을 설정

4) #fff0f5 끝 위치의 색상 설정

3.outline:none 인풋창을 클릭 했을 시 인풋창 테두리가 굵게 변하지않게 설정해준다.

4. #result 안에 >div 태그에 대한 css설정은 , addTodo()함수를 통해 추가된 div(즉 입력을 통해 추가 될 할일 리스트)의 css를 설정해 준 부분이다.

-JS-

let addValue = document.getElementById("addValue");
let result = document.getElementById("result");
function addTodo() {
  if (addValue.value == "") {
    alert("입력된 내용이 없습니다.");
  } else {
    let newDiv = document.createElement("div");
    let newSpan = document.createElement("span");
    let delete_btn = document.createElement("button");
    newSpan.innerHTML = addValue.value;
    newDiv.appendChild(newSpan);
    newDiv.appendChild(delete_btn);
    result.appendChild(newDiv);
    newDiv.style.alignItems = "center";
    delete_btn.textContent = "X";
    delete_btn.style.border = "none";
    delete_btn.style.float = "right";
    delete_btn.style.fontSize = "20px";
    delete_btn.style.backgroundColor = "beige";
    delete_btn.addEventListener("click", delete_content);
    newDiv.addEventListener("click", function () {
      newDiv.style.textDecoration = "line-through";
      newDiv.style.color = "gray";
    });
    addValue.value = "";
    addValue.focus();
  }
}

function delete_content(e) {
  let remove_One = e.target.parentElement;
  remove_One.remove();
}

1. 맨 위 상단에 addValue(입력창) , result(입력한 할일이 추가될 영역)을 선언해준다.

2.addTodo()

1) if문을 통해 입력창에 값이 없을경우 alter창으로 경고문을 나타내준다.

2) 값이 있을 경우 else문이 실행되고

newDiv(추가된 할일의 영역), newSpan(추가된 할일의 내용) , delete_btn(추가된 할일 삭제버튼)을 선언해준다.

3) newSpan에 innerHTML을 통해 addValue.value 즉 입력값을 넣어준다.

4) newDiv.appendChild(newSpan)을 통해 newDiv에 newSpan을 자식태그로 넣어준다.

5) newDiv.appendChild(delete_btn) 마찬가지로, newDiv에 delete_btn을 자식태그로 넣어준다.

6) result.appendChild(newDiv) 마지막으로, 새로추가된 할일을 result 결과영역에 자식태그로 추가시켜준다.

<div id="result">
<newDiv>
<newSpan>입력값</newSpan>
<delete_btn/>
</newDiv>
</div>

이렇게 확인하면 더 쉽게 이해가될것같다.

7) 그리고 delete_btn.style.~~~ 을 통해 삭제버튼에 대한 style을 설정해준다.

8) deltebtn_addEventListener("click", delete_content); 를 통해

deletebtn 버튼을 클릭 시 dete_content함수를 실행하도록 설정해준다.

9 ) newDiv.addEventListener("click" , function() { 실행내용}

을 통해 추가된 할일 목록을 클릭시에 글씨 중앙을 통과하는 가로선과 색상변경설정을 해준다.

10 ) delte_content함수를 만들어 8번에 delete_btn을 클릭했을 시 함수내용을 정의해준다.

이때 e는 매개변수로, e.target은 delete_btn을 가르키고
e.target.parentElement는 delete_btn의 부모태그 즉 newDiv를 가르킨다.
따라서 let remove_One = newDiv가 되고
remove_One.remove();는 newDiv를 삭제하게되어
delete_content()함수는 newDiv를 삭제하는 함수이다.

여기서, newDiv는 입력창을 통해 입력된 할일 목록이다.

🔎 결론

구글링을 통해
참고 블로그 이 분의 글을 많이 참고하여 만들게되었다.
코딩테스트를 보러가서, html,css부분만 건드리지 못해 아쉬웠는데
만들기 전에는 난감하고 어려웠는데, 막상 만들어보고 글을쓰면서 정리해보니
해볼만(?) 하다고 생각이 들었다.

다음에는 여기서 더 추가로 기능을 보완하는 방향으로 진행해봐야겠다.

JavaScript를 이용한 TodoList만들기

아직 다른 다양한 프레임워크는 접하지 못해서 지금까지 배운 javascript,html,css를 이용해서 두 번째로 무엇을 만들어볼까 고민하던 중 간단한 todolist를 골랐고, 이 언어들이 익숙해 지도록 이것 저

velog.io

💁🏻 완성코드

728x90

'프로젝트 > 개인프로젝트' 카테고리의 다른 글

todo-list 음성인식으로 리스트 추가하기(feat.react-speech-recognition) (0)	2024.01.24
장바구니 기능 간단하게 해보기(feat. Redux) (0)	2023.12.14
리엑트 i18 라이브러리를 이용한 다국어기능 찍먹해보기. (0)	2023.12.10
Todo_List(feat. React) (1)	2023.12.06

ABOUT ME

🔎 완성

🔎 구현 기능

🔎 구현 방법

- HTML -

1. <head>태그에 <link>태그를 사용하여 css파일을 연결해준다.

2. <body>태그에 크게 두개의 div영역으로 나눈다. 첫번째는 타이틀 제목, 두번째는 입력창,버튼,결과물이보여질 영역이 포함되어있다.

3. Wrapper 태그안에서 input_F 영역과 result영역 두가지로 나눈다.

4. input_F영역에서 인풋창에 입력 후 버튼을 클릭했을 때 onclick="addTodo()" 설정을하여, addTodo함수가 실행되도록 해준다.

5. addTodo함수가 최종적으로 실행되고 result 영역에 추가되도록 설정하여 result에는 추가된 할일들이 자리잡게 된다.

6.마지막에 script태그를 통해 index.js와 연결하여, 함수들이 실행될수 있도록 설정해준다.

-CSS-

1. box-sizing : border-box;를 설정하여 padding이나 border 등 테두리,여백등을 지정한사이즈에 포함시켜 설정해준다.

ex) width:100px , height: 100px , padding:20px , border : 10px solid black;

= 기본 설정일때 : width: 100px + 20px + 10px. = 130px. height: 100px + 20px + 10px = 130px

= box-sizing : border-box일때 : width : 100px height: 100px;

2. background :liner-gradient ( to-bottom , #e6e6fa 0% , #fff0f5);

배경색을 그라데이션 효과를 주는것이다.

1) to-bottom 그라데이션 방향설정.

2) #e6e6fa는 시작위치의 색상 설정.

3)0% 그라디언트 효과의 시작점을 설정

4) #fff0f5 끝 위치의 색상 설정

3.outline:none 인풋창을 클릭 했을 시 인풋창 테두리가 굵게 변하지않게 설정해준다.

4. #result 안에 >div 태그에 대한 css설정은 , addTodo()함수를 통해 추가된 div(즉 입력을 통해 추가 될 할일 리스트)의 css를 설정해 준 부분이다.

-JS-

1. 맨 위 상단에 addValue(입력창) , result(입력한 할일이 추가될 영역)을 선언해준다.

2.addTodo()

1) if문을 통해 입력창에 값이 없을경우 alter창으로 경고문을 나타내준다.

2) 값이 있을 경우 else문이 실행되고

newDiv(추가된 할일의 영역), newSpan(추가된 할일의 내용) , delete_btn(추가된 할일 삭제버튼)을 선언해준다.

3) newSpan에 innerHTML을 통해 addValue.value 즉 입력값을 넣어준다.

4) newDiv.appendChild(newSpan)을 통해 newDiv에 newSpan을 자식태그로 넣어준다.

5) newDiv.appendChild(delete_btn) 마찬가지로, newDiv에 delete_btn을 자식태그로 넣어준다.

6) result.appendChild(newDiv) 마지막으로, 새로추가된 할일을 result 결과영역에 자식태그로 추가시켜준다.

<div id="result"> <newDiv> <newSpan>입력값</newSpan> <delete_btn/> </newDiv> </div>이렇게 확인하면 더 쉽게 이해가될것같다.

7) 그리고 delete_btn.style.~~~ 을 통해 삭제버튼에 대한 style을 설정해준다.

8) deltebtn_addEventListener("click", delete_content); 를 통해

deletebtn 버튼을 클릭 시 dete_content함수를 실행하도록 설정해준다.

9 ) newDiv.addEventListener("click" , function() { 실행내용}

을 통해 추가된 할일 목록을 클릭시에 글씨 중앙을 통과하는 가로선과 색상변경설정을 해준다.

10 ) delte_content함수를 만들어 8번에 delete_btn을 클릭했을 시 함수내용을 정의해준다.

🔎 결론

💁🏻 완성코드

'프로젝트 > 개인프로젝트' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바

<div id="result">
<newDiv>
<newSpan>입력값</newSpan>
<delete_btn/>
</newDiv>
</div>

이렇게 확인하면 더 쉽게 이해가될것같다.