See the Pen To Do List With Javascript | Step by Step Javascript Project by ektjtthsrk (@minos79) on CodePen.
https://www.youtube.com/watch?v=cOUNOi297Mw&list=PLNCevxogE3fgy0pAzVccadWKaQp9iHspz
Html 코드
더보기
<!DOCTYPE html>
<html lang="en">
<head>
<title>Simple to do LIst</title>
<!--Google Font-->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div id="newtask">
<input type="text" placeholder="Task to be done...">
<button id="push">Add</button>
</div>
<div id="tasks">
</div>
</div>
<script src="script.js"></script>
</body>
</html>Css 코드
더보기
*,
*::before,
*::after {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
height: 100vh;
background: linear-gradient(
135deg,
#8052ec,
#d161ff
);
}
.container{
/* border: 2px solid white; */
width: 40%;
min-width: 450px;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
padding: 30px 40px;
}
#newtask{
background-color: #ffffff;
padding: 30px 20px;
border-radius: 10px;
box-shadow: 0 15px 30px rgba(0,0,0,0.3);
}
#newtask input{
width: 70%;
width: 70%;
height: 45px;
font-family: 'Poppins',sans-serif;
font-size: 15px;
border: 2px solid #d1d3d4;
padding: 12px;
color: #111111;
font-weight: 500;
position: relative;
border-radius: 5px;
}
#newtask input:focus{
outline: none;
border-color: #8052ec;
}
#newtask button{
position: relative;
float: right;
width: 20%;
height: 45px;
border-radius: 5px;
font-family: 'Poppins', sans-serif;
font-weight: 500;
font-size: 16px;
background-color: #8052ec;
border: none;
color: #ffffff;
cursor: pointer;
}
#tasks{
background-color: #ffffff;
padding: 30px 20px;
margin-top: 60px;
border-radius: 10px;
box-shadow: 0 15px 30x rgba(0,0,0,0.3);
width: 100%;
position: relative;
box-shadow: 0 15px 30px rgba(0,0,0,0.3);
}
.task{
background-color: #ffffff;
height: 50px;
padding: 5px 10px;
margin-top: 10px;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 2px solid #d1d3d4;
cursor: pointer;
}
.task button{
background-color: #8052ec;
color: #ffffff;
height: 100%;
width: 40px;
border-radius: 5px;
border: none;
cursor: pointer;
outline: none;
}
.completed{
text-decoration: line-through;
}Js 코드
더보기
document.querySelector('#push').onclick = function(){
if(document.querySelector('#newtask input').value.length == 0){
alert("Please Enter a Task")
}else{
document.querySelector('#tasks').innerHTML += `
<div class="task">
<span id="taskname">
${document.querySelector('#newtask input').value}
</span>
<button class="delete">
<i class="fa-solid fa-trash"></i>
</button>
</div>
`;
let current_tasks = document.querySelectorAll(".delete");
for(let i=0; i<current_tasks.length; i++){
current_tasks[i].onclick = function(){
this.parentNode.remove();
}
}
let tasks = document.querySelectorAll("#tasks");
for(let i=0; i<tasks.length; i++){
tasks[i].onclick = function() {
this.classList.toggle('completed');
}
}
document.querySelector("#newtask input").value = ""
}
}
2024년 5월 12일 시점에서 3년전에 코딩아티스트 님이 기재한 내용인데, 자바스크립트 최신문법은 아니지만 영상과 함께 테스트해 볼 누군가를 위해서 원본 그대로를 적어 보았다.
참고하길 바란다..
코드 진행은 크게 3가지 이다..
1. To Do List를 생성하고
2. 추가된 리스트를 삭제하고
3. 완료 목록은 clssList.toggle을 통해서 취소선의 여부를 결정하게 된다.
아직은 본인의 Html Ele요소를 Js로 조작하는게 서툴러서 공부할 겸 올려본다.
'GAS > [Js_손코딩]' 카테고리의 다른 글
| [Script Lab -2] 우노사설님 코드 리뷰 (0) | 2024.05.14 |
|---|---|
| [Script Lab -1] 우노사설리뷰 (0) | 2024.05.13 |
| [Js] Google Sheets JSON data for web pages Sheet Data with Headings 리뷰 (0) | 2024.05.05 |
| [js] 입력문자수를 100자로 제한하기 (0) | 2024.04.21 |
| [js] pull-down 메뉴 사용하기 (0) | 2023.09.07 |
댓글