[버그 수정] - 실시간으로 변하는 장바구니 만들기

내가 힘들게 만든 장바구니에도 버그가 존재한다. 개발자에게 있어서 버그는 항상 존재한다고 생각하며 수정하고 있지만 쉽지만은 않다. 내가 다 끝냈다고 생각한 코드를 다시 봐야 한다는 점이 가장 귀찮았다. 그래도 버그를 수정했을 때의 그 쾌감이 너무 좋아서 포기할 수가 없다. 장바구니에는 총 2가지의 버그가 존재한다. 1. 메뉴사진을 클릭하면 장바구니에 추가되지 않는점 2. 장바구니에서 메뉴 삭제를 하고 다시 그 메뉴가 추가되지 않는점 1번 버그 첫번째 버그는 요소를 불러오는데 있어서 오류가 있어서 생긴 것이였다. 내가 처음 작성한 코드다. ${e.target.firstElementChild.firstElementChild.innerText} 이렇게 코드를 짜면 클릭했을 때의 요소를 찾는데, 이렇게 되면 각..

• format_list_bulleted 졸업작품
• · 2023. 3. 18.
• textsms

[작품] - 실시간으로 변하는 장바구니 만들기

오랜만에 제작글을 쓴다. 그 이유는 바로 장바구니를 만드는데 생각할 것이 너무 많았기 때문이다. 메뉴를 눌렀을때 해당 메뉴에 맞는 이름과 가격을 추가해 줘야 했고 장바구니에 추가된 메뉴들에게는 각각의 수량을 변경할 수 있는 버튼과 메뉴 삭제 버튼이 필요했다. 이 모든 것을 생각하니 멘붕이 왔다. 그래서 약 2주가 걸렸다... 저번에 메뉴를 추가하는 것 까지 했으나 그 이후에 좀 변한것이 있어서 다시 설명하겠다. 1. 플로팅 바 변화하기 원래의 플로팅 바는 원형이다. 나는 사용자가 인원을 눌렀을 때 플로팅바가 직사각형으로 변하게 할 것이다. 그렇게 하기 위해선 어떤 인원태그가 눌러도 플로팅 바 모양이 변해야 한다. const number = document.querySelectorAll(".number s..

• format_list_bulleted 졸업작품
• · 2023. 3. 16.
• textsms

[작품] - 플로팅 버튼(2)

저번에 만든 플로팅 버튼에 추가 기능을 넣어서 더 완성도 있게 만들어 보았다. 내가 원하는 요구사항에 대해 먼저 설명해보자면! 1. 기존 형태는 원의 형태에서 인원이 추가되면 사각형으로 바꾸게 한다. 2. 메뉴가 추가되면 인원박스 아래에 생기게 되는데 메뉴박스 하나당 메뉴의 개수를 조절할 수 있는 버튼과 메뉴를 삭제할 수 있는 버튼을 생성해 줄 것이다. 1. 인원 추가하기 const number = document.querySelectorAll(".number span"); number.forEach((item,index)=>{ item.addEventListener("click",function(e){ bar.style.borderRadius = "20px"; bar.style.justifyConten..

• format_list_bulleted 졸업작품
• · 2023. 2. 26.
• textsms

[작품] - JS로 스크롤 따라오는 플로팅 버튼 만들기

오늘은 순수 자바스크립트로 스크롤을 따라오는 버튼을 만들것이다. 인터넷에 많은 플로팅 버튼 만드는 코드가 있지만 대부분 JQuery로 되있어서 찾다가 못찾아서 내가 직접만들었다. 처음 만들다 보니 막막했는데 구현해 보니깐 되게 간단해서 놀라웠다. const bar = document.querySelector(".remote_Bar"); window.addEventListener('scroll', function(){ bar.style.top = `${window.scrollY}px`; bar.style.transition = "all 0.7s ease-out"; if(window.scrollY===0){ bar.style.top = '100px'; } }) 1. scroll을 움직일 때마다 이벤트가 발생..

• format_list_bulleted 졸업작품
• · 2023. 2. 19.
• textsms