본문 바로가기

자바스크립트54

[ javascript ] HTML, CSS, JS로 음악 플레이어 만들기 HTML, CSS, JavaScript를 사용해 음악 플레이어를 만들어보았습니다.  이 플레이어는노래 정보 표시, 재생/일시정지, 이전/다음 곡으로 넘어가기, 진행 바 등기본적인 음악 플레이어 기능을 구현합니다.    1. HTML 구조우선, HTML 파일을 작성합니다. 음악 플레이어의 기본 구조는 다음과 같습니다. Song Artist 0:00 0:00   container: 전체 플레이어를 감싸는 컨테이너입니다.song-info: 노래 이름, 아티스트 이름, 진행 바 및 시간을.. 2024. 9. 9.
[ Javascript ] Drop Down(드롭다운) 메뉴 만들기 결과물 Drop 버튼을 누르면 아래와 같이 메뉴가 나오는 토글 버튼을 만들어 보았다. codepen 실제 결과물 보기: https://codepen.io/pen?template=VwNqPGw dropDown.html 버튼 클릭 시 dp_menu() 함수가 실행된다. Menu들은 기본으로 display:none 스타일링이 되어있다가 버튼이 클릭되면 display: block으로 바뀐다. Drop Menu1 Menu2 Menu3 Menu4 dropDown.css body { margin: 10px; padding: 10px; text-align: center; } .dropdown { position: relative; display: inline-block; } .button { padding: 10px .. 2024. 4. 23.
[ 프로그래머스 / Javascript ] 추억 점수 https://school.programmers.co.kr/learn/courses/30/lessons/176963 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 문제 설명 사진들을 보며 추억에 젖어 있던 루는 사진별로 추억 점수를 매길려고 합니다. 사진 속에 나오는 인물의 그리움 점수를 모두 합산한 값이 해당 사진의 추억 점수가 됩니다. 예를 들어 사진 속 인물의 이름이 ["may", "kein", "kain"]이고 각 인물의 그리움 점수가 [5점, 10점, 1점]일 때 해당 사진의 추억 점수는 16(5 + 10 + 1)점이 됩니다. 다른 사진 속 인물.. 2024. 4. 23.
[ 프로그래머스 / Javascript ] 겹치는 선분의 길이 https://school.programmers.co.kr/learn/courses/30/lessons/120876# 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 문제 설명 선분 3개가 평행하게 놓여 있습니다. 세 선분의 시작과 끝 좌표가 [[start, end], [start, end], [start, end]] 형태로 들어있는 2차원 배열 lines가 매개변수로 주어질 때, 두 개 이상의 선분이 겹치는 부분의 길이를 return 하도록 solution 함수를 완성해보세요. lines가 [[0, 2], [-3, -1], [-2, 1]]일 때 그림으로 .. 2022. 12. 18.
[ 프로그래머스 / Javascript ] 가장 가까운 같은 글자 https://school.programmers.co.kr/learn/courses/30/lessons/142086 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 문제 설명 문자열 s가 주어졌을 때, s의 각 위치마다 자신보다 앞에 나왔으면서, 자신과 가장 가까운 곳에 있는 같은 글자가 어디 있는지 알고 싶습니다. 예를 들어, s="banana"라고 할 때, 각 글자들을 왼쪽부터 오른쪽으로 읽어 나가면서 다음과 같이 진행할 수 있습니다. b는 처음 나왔기 때문에 자신의 앞에 같은 글자가 없습니다. 이는 -1로 표현합니다. a는 처음 나왔기 때문에 자신의 .. 2022. 12. 10.
[ 프로그래머스 / Javascript ] 콜라츠 추측 https://school.programmers.co.kr/learn/courses/30/lessons/12943 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 문제 설명 1937년 Collatz란 사람에 의해 제기된 이 추측은, 주어진 수가 1이 될 때까지 다음 작업을 반복하면, 모든 수를 1로 만들 수 있다는 추측입니다. 작업은 다음과 같습니다. 1-1. 입력된 수가 짝수라면 2로 나눕니다. 1-2. 입력된 수가 홀수라면 3을 곱하고 1을 더합니다. 2. 결과로 나온 수에 같은 작업을 1이 될 때까지 반복합니다. 예를 들어, 주어진 수가 6이라면 6 .. 2022. 12. 9.
[ 프로그래머스 / Javascript ] 문자열 내 p와 y의 개수 https://school.programmers.co.kr/learn/courses/30/lessons/12916 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 문제 설명 대문자와 소문자가 섞여있는 문자열 s가 주어집니다. s에 'p'의 개수와 'y'의 개수를 비교해 같으면 True, 다르면 False를 return 하는 solution를 완성하세요. 'p', 'y' 모두 하나도 없는 경우는 항상 True를 리턴합니다. 단, 개수를 비교할 때 대문자와 소문자는 구별하지 않습니다. 예를 들어 s가 "pPoooyY"면 true를 return 하고 "Pyy"라.. 2022. 12. 8.
[ JavaScript ] currentTarget vs target 차이점 자바스크립트를 공부하던 중 e.currentTarget와 e.target의 차이점이 궁금해서 포스팅하게 되었다. 쉽게 말하자면 자바스크립트는 이벤트가 요소(element) 간에 전파가 된다. 이런 경우로 인해 currentTarget과 target이 선택하는 요소가 달라진다. currentTarget vs target 차이점 currentTarget : 이벤트를 등록해 놓은 요소를 반환한다. target : 이벤트가 발생한 요소를 반환한다. 예제 나를 선택하면 나는 target 다른 target const currDiv = document.getElementById('currDiv'); currDiv.addEventListener('click',(e)=>{ console.log('currentTarget.. 2022. 11. 17.
[ 프로그래머스 / JavaScript ] 예산 https://school.programmers.co.kr/learn/courses/30/lessons/12982 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 문제 설명 S사에서는 각 부서에 필요한 물품을 지원해 주기 위해 부서별로 물품을 구매하는데 필요한 금액을 조사했습니다. 그러나, 전체 예산이 정해져 있기 때문에 모든 부서의 물품을 구매해 줄 수는 없습니다. 그래서 최대한 많은 부서의 물품을 구매해 줄 수 있도록 하려고 합니다. 물품을 구매해 줄 때는 각 부서가 신청한 금액만큼을 모두 지원해 줘야 합니다. 예를 들어 1,000원을 신청한 부서에는 .. 2022. 11. 15.
728x90

티스토리툴바