2023.04.03 할일추가, 할일삭제, 좋아요 구현

Java/UI구현

2023.04.03 할일추가, 할일삭제, 좋아요 구현

amungstudy 2023. 4. 3. 15:59

//사용자에게 할일을 입력받아서 목록에 추가

//삭제기능은 내가 원하는 할일을 삭제

//-할일입력을 받아서 해당 할일을 삭제하도록구현.

<button onclick="addTodo2()">사용자입력 할일 추가</button>

input은 value값으로 저장이 된다.

input태그에 입력한 텍스트는 value 속성을 통해서 텍스트를 얻을 수 있다.

function addTodo2(){

// console.log('사용자에게 입력값을 받아 할일목록에 추가'); 버튼 잘되는지 테스트

let todoText = document.getElementById('todo');

// input태그에 입력한 텍스트는 value 속성을 통해서 텍스트를 얻을 수 있다.

console.log(todoText.value);

// li태그 생성 및 텍스트와 클래스 지정

let li = document.createElement('li');

li.innerText = todoText.value;

li.className = 'todos';

// tagUl_2 ul태그에 생성한 li태그 추가

tagUl_2.appendChild(li);

}

//삭제기능은 내가 원하는 할일을 삭제

//-할일입력을 받아서 해당 할일을 삭제하도록구현.

function removeTodo2(){

// console.log('할일입력값 일치하면 삭제'); // 버튼 작동하는지 확인

let todoText = document.querySelector('#todo'); // input버튼 내용 불러오기

// console.log(todoText.value);

let todoList = document.getElementsByClassName('todos'); //할일목록 불러오기

// console.log(todoList);

let targetTodo = ''; //문자열로 하나 만듬.

for(let i=0; i <todoList.length; i++){ //클래스 todos불러온거 배열형태라서 for문 사용

// console.log(todoList[i].textContent);

if(todoText.value == todoList[i].textContent){ // 사용자가 입력한 값과 할일목록의 할일과 일치하면

// targetTodo 변수의 i번째의 할일 li태그를 저장시키겠다.

targetTodo = todoList[i];

}

console.log("삭제할 대상 : ",targetTodo);

if(todoList.length > 0){

tagUl_2.removeChild(targetTodo);

}

// 할일을 추가할때 해당할일을 삭제할 수 있는 버튼 생성

let delBtn = document.createElement('button');

delBtn.innerText = "삭제";

// 삭제버튼을 li태그에 추가

li.appendChild(delBtn);

// 할일 목록 li태그에 삭제버튼 추가시 다음과 같이 생성됨

// <li>할일..<button>삭제</button></li>

버튼태그에 이벤트추가하는 방법

특정 태그.addEventListener('동작',function(){특정태그에 동작이 되었을때 수행문;})

delBtn.addEventListener('click',function(){

console.log("삭제버튼 클릭시 동작");

// 삭제버튼을 클릭하면 해당 할일이 삭제되도록 소스코드 작성

// 해당버튼이 소속되어있는 li태그 변수의 부모요소.removeChild(해당li요소);

// <li>빨래하기<button onClick =(function(){삭제실행문; })>삭제</button></li>

li.parentElement.removeChild(li);

});

// tagUl_2 ul태그에 생성한 li태그 추가

tagUl_2.appendChild(li);

getAttribute('style');

function getProperty(){

let thirdP = document.getElementById('thirdP');

// dom요소.getAttribute('속성명') : 해당dom요소의 속성명의 값을 반환해준다.

let id = thirdP.getAttribute('id');

console.log("id값 : ",id);

let class_ = thirdP.getAttribute('class');

console.log("class값 : ",class_);

let style = thirdP.getAttribute('style');

console.log("style값 : ",style);

// dom요소.setAttribute('속성명','속성값'); - 요소 수정하기.

thirdP.setAttribute("style","color:red;");

}

// 좋아요 UI기능 구현 (클릭이벤트는 버튼이 아니라도 전부 적용이 가능하다.)

// 1. 하트 이미지를 클릭했을때

// 채워진 하트로 변경되고, 빈하트는 안보이도록

// 2. 채워진 하트를 클릭했을때

// 빈하트로 변경되고, 채워진 하트는 안보이도록

// 1.2.이 교차로 적용되도록 적용 해봅시다.

function like(){

//해당하는 html파일에서 아이디가 likeImg인 요소를 선택하여, 변수 likeImg에 저장시킨다.

let likeImg = document.querySelector('#likeImg');

//윗줄에서 얻어온 likeImg태그의 src속성을 가져와서, 변수 likeImgSrc에 저장킨다.

let likeImgSrc = likeImg.getAttribute('src');

console.log(likeImgSrc);//텍스트로 src속성의 값을 출력하고 있다.

if(likeImgSrc == '../img/unlike.png'){

//현재 이미지가 빈 하트라면 , 빨간색 하트로 변경

likeImg.setAttribute('src','../img/like.png'); //likeImg의 src속성의 값을 세팅

}else{

//현재 이미지가 빨간색 하트라면, 빈 하트로 변경

likeImg.setAttribute('src','../img/unlike.png'); //likeImg의 src속성의 값을 세팅

}

//js의 dom조작을 이용하여

// 고양이 설명문 밑에 위치한 하트 이미지에 좋아요 기능을 추가 해봅시다.

// 각 좋아요 버튼마다 독립적으로 작동이 되도록 적용.

고양이 설명문에 좋아요 그림 추가

<img src="../img/unlike.png" id="like1" onclick="like('#like1')"> 추가

function like(likeId){ //함수가 실행될때 매개변수를 전달 받겠다.

console.log("likeId의 값 : ",likeId);

let likeImg = document.querySelector(likeId);

let likeImgSrc = likeImg.getAttribute('src');

console.log(likeImgSrc);

if(likeImgSrc == '../img/unlike.png'){

likeImg.setAttribute('src','../img/like.png');

}else{

likeImg.setAttribute('src','../img/unlike.png');

}

// js dom조작으로 홈화면의 고양이 게시물 3개 생성하여 적용해보기

//article태그가 담길 클래스가 content인 div태그요소 선택

let contentDiv = document.querySelector('div.content');

console.log(contentDiv);

//고양이 게시글의 가장 바깥쪽 태그인 article태그 생성

let article = document.createElement('article');

article.setAttribute('class','cont_box');

//article태그의 첫번째 자식요소인 고양이그림이 포함된 p태그 생성 및 article태그에 추가

let imgCat = document.createElement('img');

imgCat.setAttribute('src','../img/cat1.jpg');

imgCat.setAttribute('alt','고양이1');

let tagP = document.createElement('p');

tagP.appendChild(imgCat);

article.appendChild(tagP);

//article태그의 두번째 자식요소인 고양이 정의문생성 후 article태그에 추가

//정의문을 감싸는 dl태그 생성

let dl = document.createElement('dl');

// dt 태그 생성 - 제목텍스트 추가

let dt = document.createElement('dt');

dt.innerText = '고양이';

// dd 태그 생성 - 고양이의 설명글 추가

let dd = document.createElement('dd');

let desc = "고양이는 식육목 고양이과에 속하는 포유류이다. 집고양이의 기원은 약 1만년 전 중동 지역에서 스스로 숲속을 나와 사람들이 모여사는 마을에 정착하여 길들여진 아프리카들고양이로 추측된다.";

dd.innerText = desc;

// dd태그에 추가될 br태그생성 및 dd태그에 적용

let br = document.createElement('br');

dd.appendChild(br);

let br2 = document.createElement('br');

dd.appendChild(br2);

// dd태그에 추가될 img태그(좋아요 이미지) 생성 및 dd태그에 적용

let likeImg = document.createElement('img');

likeImg.setAttribute('src','../img/unlike.png');

likeImg.setAttribute('id','like1');

likeImg.setAttribute('onclick','like("#like1")'); //문자열안에 문자열표현시 감싸는 따옴표를 구분 시켜줘야한다.

// ex) 가장바깥에 따옴표가 ""를 사용했으면, 안쪽에서 표현하는 문자열은 ''로 표현을 하도록 한다.

dd.appendChild(likeImg);

// dt태그와, dd태그를 dl태그에 적용

dl.appendChild(dt);

dl.appendChild(dd);

// dl태그를 article 태그에 추가.

article.appendChild(dl);

//article태그를 상위태그인 contentDiv변수에 추가

contentDiv.appendChild(article);

//위에서 만들어놓은 고양이 게시물 하나를 생성하는 소스코드를 참조해서

// 반복문을 활용하여 게시물 3개를 생성해봅시다.