프로그래밍 언어
교양과제로 투두리스트를 만들었어요
tteokbokki-master
2023. 12. 1. 22:46
오랜만에 바닐라 JS만 사용해서 무언가를 만드니까 어색함과 불편함을 느꼈어요. 하지만 덕분에 제 부족한 점을 찾을 수 있었습니다.
일단 저는 html 구조를 못 짜고요.. class명도 못 지으며, 코드 분리를 못 시킵니다... 마지막으로 코드를 굉장히 더럽게 씁니다... 예...
뭐, 개선해 나가면 되는 거죠! 교양과제 때문에 만들게 됐지만 제 부족한 점을 느낄 수 있어서 좋았습니다
아 그리고 색 조합이 구리구리 너구리니까 바꾸라는 의견을 들었는데, 전 구린게 개성이라고 생각합니다. 개성 왕만두 먹고 싶다
코드가 많이 더러워서, 올릴까 말까 고민을 했지만 그냥 올립니다. 더 성장했을 때 보면 감회가 새롭지 않겠습니까 하하
[HTML & JavaScript]
더보기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> 이용진 과제</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="todoList">
<header class ='header'>
<img class="header-image" src="./image/CNU.png" alt="충남대">
<img class="header-image-2" src="./image/STUDY.png" alt="차차">
<h1 class="header-mainName">TO DO LIST</h1>
<time class="header-time">
<h1 class="header-time-h1-1"> </h1>
<h1 class="header-time-h1-2"> </h1>
</time>
</header>
<main class = 'main'>
<section class="main-inputTodos">
<h2>할 일 입력</h2>
<div class="main-inputBox">
<input value='' class="main-inputBox-input" placeholder="입력하세요">
<button class="main-inputBox-Btn"onclick="newTodos()">입력</button>
</div>
<div class="main-inputTodosimg">
<button type="button" class="main-inputTodosimgBtn-left" onclick="imgChageClick('left')" >
<img src="./image/left.png" alt="왼쪽">
</button>
<img class='main-inputTodosimg-img' src="./image/1.png" alt="명언">
<button type="button" class="main-inputTodosimgBtn-right" onclick="imgChageClick('right')">
<img src="./image/right.png" alt="오른쪽">
</button>
</section>
<section class = 'main-Todo'>
<h2>할 일</h2>
<div class = 'main-TodoBox'>
</div>
</section>
</main>
<footer class = 'footer'>
<div class="footer-info">
<p>학번 : </p>
<p>학과 : </p>
<p>이름 : 이용진</p>
</div>
</footer>
</div>
</body>
<script>
const date = new Date();
const year = date.getFullYear();
const month = date.getMonth() + 1;
const day = date.getDate()
const time = date.getHours();
const minute = date.getMinutes();
const headerTime1 = document.querySelector('.header-time-h1-1');
const headerTime2 = document.querySelector('.header-time-h1-2');
headerTime1.textContent = `${year}년 ${month}월 ${day}일`
headerTime2.textContent = `${time}시 ${minute}분`
//
let arr = 1;
const imgChageClick = (direction) => {
if(direction === 'right' && arr < 5 ){
++arr
const imgElement = document.querySelector('.main-inputTodosimg-img');
imgElement.src = `./image/${arr}.png`;
}
else if(direction ==='left' && arr > 1){
--arr;
const imgElement = document.querySelector('.main-inputTodosimg-img');
imgElement.src = `./image/${arr}.png`;
}
};
let id = 0;
const newTodos = () => {
const mainTodo = document.querySelector('.main-TodoBox');
const newTodo = document.createElement('div');
newTodo.setAttribute('class','main-TodoBox-div')
newTodo.setAttribute('id',id++)
const newInput = document.createElement('input');
newInput.setAttribute('type','checkbox');
const newP = document.createElement('p');
const userText = document.querySelector('.main-inputBox-input').value;
const newPText = document.createTextNode(userText);
newP.appendChild(newPText);
const newBtn = document.createElement('button');
const newBtnText = document.createTextNode('삭제');
newBtn.setAttribute('onclick',"deleteTodo(this.parentElement,this.parentElement.parentElement)")
newBtn.appendChild(newBtnText);
newTodo.appendChild(newInput);
newTodo.appendChild(newP);
newTodo.appendChild(newBtn);
mainTodo.appendChild(newTodo);
document.querySelector('.main-inputBox-input').value = ''
}
const deleteTodo = (parentElement,parentElementparentElement) => {
parentElementparentElement.removeChild(parentElement)
}
</script>
</html>
[CSS]
더보기
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@500;700&display=swap');
*{
font-family: 'Noto Sans KR', sans-serif;
}
.todoList{
position: relative;
display: flex;
border: 2px solid #0C356A;
border-radius: 12px;
flex-direction: column;
margin : 0 auto;
width: 90%;
background-color: #FFC436;
border-radius : 7px;
text-align: center;
}
.header{
width: 100%;
color: RGB(4,21,81);
font-weight: bolder;
border-bottom: 2px solid #0C356A;
}
.header-mainName{
font-size: 50px;
margin-top: 5px;
margin-bottom: 0;
}
.header-image{
position: absolute;
left: 10px;
top: 10px;
width: 300px;
}
.header-image-2{
position: absolute;
right: 10px;
top: -20px;
width: 200px;
}
.main {
display: flex;
width: 100%;
height: 470px;
border-bottom: 2px solid #0C356A;
}
.main-inputTodos{
border-right: 2px solid #0C356A;
flex: 1.5;
display: flex;
flex-direction: column;
align-items: center;
}
.main-inputBox{
display: flex;
width: 80%;
}
.main-inputBox input{
flex: 10;
padding: 15px;
border: 2px solid #0C356A;
border-radius: 7px;
}
.main-inputBox button{
flex : 1;
margin: 0 3px;
border: 2px solid #0C356A;
border-radius: 7px;
background-color: #0C356A;
color: #FFC436;
cursor: pointer;
}
.main-inputTodosimg {
display: flex;
align-items: center;
gap: 10px;
margin-top: 30px;
text-align: center;
}
.main-inputTodosimg img:nth-child(2){
border-radius: 12px;
width: 300px;
}
.main-inputTodosimgBtn-left{
background-color:transparent;
border: 0;
cursor: pointer;
}
.main-inputTodosimgBtn-right{
background-color:transparent;
border: 0;
cursor: pointer;
}
.main-Todo{
flex: 2.5;
display: flex;
flex-direction: column;
align-items: center;
}
.main-TodoBox{
display: flex;
flex-direction: column;
width: 90%;
overflow: scroll;
}
.main-TodoBox-div{
display: flex;
background-color:#0174BE;
margin-bottom: 20px;
border-radius: 7px;
font-weight: bolder;
align-items: center;
border: 2px solid #0C356A;
}
.main-TodoBox-div input{
margin-left: 10px;
}
.main-TodoBox-div p{
flex: 1;
font-size : 20px;
}
.main-TodoBox-div button{
padding: 7px;
margin-right: 10px;
background-color: #0C356A;
border-radius: 7px;
border: 0;
color: #FFC436;
cursor: pointer;
}
.footer{
border-radius: 12px;
}
.footer-info{
display: flex;
font-weight: bolder;
gap: 10px;
justify-content: right;
margin-right: 10px;
}