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

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

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

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

 

 

<!-- 사용자에게 입력을 받아서 할일 목록에 추가 -->

        <input type="text" id="todo">

        <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);

        }

 

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

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

 

  <button onclick="removeTodo2()">입력값과 일치하는 할일 삭제</button>

 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');

 <!-- JS를 활용하여 특정HTML요소의 속성을 가져오기 -->

        <button onclick="getProperty()">세번째 p태그의 속성 가져오기</button>

 

 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 구현 -->

        <img src="../img/unlike.png" onclick="like()" id="likeImg">

 

 // 좋아요 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속성의 값을 세팅

            }

        }

---

 <script>

            //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개를 생성해봅시다.