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

내가 힘들게 만든 장바구니에도 버그가 존재한다. 개발자에게 있어서 버그는 항상 존재한다고 생각하며 수정하고 있지만 쉽지만은 않다. 내가 다 끝냈다고 생각한 코드를 다시 봐야 한다는 점이 가장 귀찮았다. 그래도 버그를 수정했을 때의 그 쾌감이 너무 좋아서 포기할 수가 없다. 장바구니에는 총 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

[작품] - 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

[프로그래머스 | Javascript] 코딩테스트 Lv1 - 숫자 문자열과 영단어

✔문제 설명 네오와 프로도가 숫자놀이를 하고 있습니다. 네오가 프로도에게 숫자를 건넬 때 일부 자릿수를 영단어로 바꾼 카드를 건네주면 프로도는 원래 숫자를 찾는 게임입니다. 다음은 숫자의 일부 자릿수를 영단어로 바꾸는 예시입니다. 1478 → "one4seveneight" 234567 → "23four5six7" 10203 → "1zerotwozero3" 이렇게 숫자의 일부 자릿수가 영단어로 바뀌어졌거나, 혹은 바뀌지 않고 그대로인 문자열 s가 매개변수로 주어집니다. s가 의미하는 원래 숫자를 return 하도록 solution 함수를 완성해주세요. 참고로 각 숫자에 대응되는 영단어는 다음 표와 같습니다. 숫자 영단어 0 zero 1 one 2 two 3 three 4 four 5 five 6 six 7..

• format_list_bulleted 알고리즘/자바스크립트-프로그래머스
• · 2023. 1. 8.
• textsms

[프로그래머스 | Javascript] 코딩테스트 Lv1 - 두 개 뽑아서

✔문제 설명 정수 배열 numbers가 주어집니다. numbers에서 서로 다른 인덱스에 있는 두 개의 수를 뽑아 더해서 만들 수 있는 모든 수를 배열에 오름차순으로 담아 return 하도록 solution 함수를 완성해주세요. 제한사항 numbers의 길이는 2 이상 100 이하입니다. numbers의 모든 수는 0 이상 100 이하입니다. ✔입출력 예 number sresult [2,1,3,4,1] [2,3,4,5,6,7] [5,0,2,7] [2,5,7,9,12] ✔나의 풀이 function solution(numbers) { numbers.sort((a,b)=>a-b); let array=[] for(let i=0;i

• format_list_bulleted 알고리즘/자바스크립트-프로그래머스
• · 2023. 1. 8.
• textsms

[프로그래머스 | Javascript] 코딩테스트 Lv1 - 2016년

✔문제 설명 2016년 1월 1일은 금요일입니다. 2016년 a월 b일은 무슨 요일일까요? 두 수 a ,b를 입력받아 2016년 a월 b일이 무슨 요일인지 리턴하는 함수, solution을 완성하세요. 요일의 이름은 일요일부터 토요일까지 각각 SUN,MON,TUE,WED,THU,FRI,SAT 입니다. 예를 들어 a=5, b=24라면 5월 24일은 화요일이므로 문자열 "TUE"를 반환하세요. 제한 조건 2016년은 윤년입니다. 2016년 a월 b일은 실제로 있는 날입니다. (13월 26일이나 2월 45일같은 날짜는 주어지지 않습니다) ✔입출력 예 a b result 5 24 "TUE" ✔나의 풀이 function solution(a, b) { return new Date(2016, a-1, b).toStr..

• format_list_bulleted 알고리즘/자바스크립트-프로그래머스
• · 2023. 1. 8.
• textsms