나 개발자 할래요
To Do List 만들기 본문
To Do List 만들기(HTML + CSS)
기본 보이는 항목을 5개로 고정하고
`>`버튼을 누르면 다음 항목들을 볼 수 있도록..
대강 이런식으로 만들겠다~.. 틀을 만들었고요
예..예..
그 전 항목을 볼 때는 `<`버튼이 있어야겠죠..?
근데..
그렇게 항목들을 많이 만들면
다끝내고 하루를 마치시는지..는 좀 궁금하네요
전 아니라서
뭐 하여튼
JS도 제대로 못하는 개린이가
그런 거창한 꿈을 가지며 틀을 만들었습니다
(저는 JS보다 CSS다루는 걸 더 즐거워해서 보통 먼저합니다.....)
<HTML>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>To Do List</title>
<link rel="stylesheet" href="style.css" />
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200"
/>
</head>
<body>
<div id="plan" class="plan">
<div class="box1">
<h1 class="title">To Do List</h1>
<form id="write" class="write">
<input
id="text"
type="text"
class="content"
placeholder="할 일을 입력하세요"
autocomplete="off"
/>
<button type="submit" id="add" class="add">+</button>
</form>
</div>
<div id="tasks"></div>
<template id="list" class="list">
<div class="note">
<div class="box3">
<p class="content1"><input type="checkbox" /></p>
<button class="delete">X</button>
</div>
</div>
<!--옆으로 가는 버튼은 ..개린이에겐 나중 문제>
<!-- <div class="list_next">
<button class="next">
<span class="material-symbols-outlined" style="font-size: 20px">
arrow_forward_ios
</span>
</button> -->
</div>
</template>
</div>
<script src="script.js"></script>
</body>
</html>
템플릿을 사용하면
만든 틀을 클론할 수 있다는 글을 보고
div -> template
폼은 아직 잘 모르겠다만
버튼에 `submit`타입을 넣으면
폼 이벤트로 submit를 사용할 수 있다..?
<CSS>
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@700&display=swap");
* {
font-family: "Noto Sans KR", sans-serif;
font-optical-sizing: auto;
font-weight: 700;
font-style: normal;
}
body {
background-color: #f0f0f0;
margin: 0;
}
.plan {
background-color: rgb(163, 236, 236);
width: 500px;
height: 700px;
margin: 100px auto;
box-sizing: border-box;
border-radius: 20px;
border: 2px solid rgb(215, 215, 215);
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
}
.title {
font-size: 50px;
margin: 15px;
}
.content {
height: 30px;
background-color: rgb(235, 235, 235);
border: none;
border-radius: 15px;
padding-left: 18px;
}
.add {
background-color: rgb(200, 200, 200);
color: white;
width: 30px;
height: 30px;
border: none;
border-radius: 50%;
cursor: pointer;
font-size: 15px;
padding: 3px 3px 5px 3px;
display: flex;
justify-content: center;
align-items: center;
transition-duration: 0.3s;
}
.add:hover {
transform: scale(1.1);
cursor: pointer;
}
.box1 {
background-color: rgb(250, 213, 67);
width: 300px;
height: 150px;
margin: 50px auto 0px auto;
border-radius: 20px;
border: 2px solid rgb(215, 215, 215);
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.write {
margin-bottom: 30px;
display: flex;
flex-direction: row;
gap: 12px;
height: 30px;
}
#tasks {
background-color: rgb(251, 122, 86);
margin: 25px auto;
width: 400px;
height: 400px;
box-sizing: border-box;
padding: 15px 0px;
border-radius: 20px;
border: 2px solid rgb(215, 215, 215);
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
align-items: center;
gap: 7px;
}
.note {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.box3 {
background-color: white;
width: 350px;
height: 55px;
margin-bottom: 10px /*auto*/;
box-sizing: border-box;
padding: 0px 30px;
border-radius: 20px;
border: 2px solid rgb(215, 215, 215);
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.content1 {
display: flex;
gap: 17px;
font-size: 16px;
}
.content1 input[type="checkbox"] {
height: 18px;
width: 18px;
}
.delete {
background-color: rgba(90, 90, 90, 0.472);
color: white;
font-size: 10px;
height: 18px;
width: 18px;
border: none;
border-radius: 50%;
cursor: pointer;
padding: 3px 3px;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
transition: opacity 0.1s ease;
}
.delete:hover {
opacity: 0.8; /* 버튼을 흐리게 설정 */
cursor: pointer; /* 커서를 포인터로 변경 */
}
.next {
background-color: rgb(200, 200, 200);
color: white;
border: none;
border-radius: 50%;
cursor: pointer;
padding: 2px 2px 2px 6px;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
transition-duration: 0.3s;
}
.next:hover {
transform: scale(1.1);
cursor: pointer;
}
<JS>
// 페이지가 로드될 때 실행할 함수
document.addEventListener("DOMContentLoaded", function () {
// 필요한 요소들을 DOM에서 찾아 변수에 할당
const form = document.getElementById("write"); // 폼 요소 선택
const input = document.getElementById("text"); // 입력 필드 요소 선택
const template = document.getElementById("list"); // 템플릿 요소 선택
const tasksContainer = document.getElementById("tasks"); // 할 일 목록을 담을 컨테이너 요소 선택
// const addButton = document.getElementById("add"); // 추가 버튼 요소 선택
// 추가 버튼 클릭 이벤트를 감지하여 할 일을 추가하는 함수
form.addEventListener("submit", function (event) {
event.preventDefault(); // 폼 기본 제출 동작 방지
// 입력 필드의 값을 가져오고 양 끝 공백 제거
const inputValue = input.value.trim();
// 입력 값이 비어 있지 않은 경우에만 처리
if (inputValue !== "") {
// 템플릿 요소의 복제본 생성
const clone = template.content.cloneNode(true);
// 복제본 내의 내용 설정
const contentElement = clone.querySelector(".content1");
contentElement.innerHTML = `<input type="checkbox" /> ${inputValue}`; // 복제본 내의 내용 설정
// 삭제 버튼의 클릭 이벤트 처리
const deleteButton = clone.querySelector(".delete");
deleteButton.addEventListener("click", function () {
// 삭제 버튼이 클릭되면 해당 복제본을 부모 요소에서 제거
tasksContainer.removeChild(cloneContainer);
});
// 클론된 노드를 실제 DOM에 추가
const cloneContainer = document.createElement("div"); // 클론된 노드를 감쌀 새로운 요소 생성
cloneContainer.appendChild(clone);
tasksContainer.appendChild(cloneContainer); // 할 일 목록에 복제본 추가
// 입력 필드 초기화
input.value = "";
}
});
});
뭐 그렇게 1차 완성된
반박은
제 대변인 ChatGPT에게..
오네가이시마스
'개발자 되는 법... > TIL...' 카테고리의 다른 글
| To Do List... (0) | 2024.07.19 |
|---|---|
| To Do List 만들기 (0) | 2024.07.09 |
| 개발 아티클 스터디 (0) | 2024.06.21 |
| 개발 아티클 스터디 (0) | 2024.06.20 |
| 14 (0) | 2024.06.18 |