📕 문제 설명 네오와 프로도가 숫자놀이를 하고 있습니다. 네오가 프로도에게 숫자를 건넬 때 일부 자릿수를 영단어로 바꾼 카드를 건네주면 프로도는 원래 숫자를 찾는 게임입니다. 다음은 숫자의 일부 자릿수를 영단어로 바꾸는 예시입니다. 1478 → "one4seveneight" 234567 → "23four5six7" 10203 → "1zerotwozero3" 이렇게 숫자의 일부 자릿수가 영단어로 바뀌어졌거나, 혹은 바뀌지 않고 그대로인 문자열 s가 매개변수로 주어집니다. s가 의미하는 원래 숫자를 return 하도록 solution 함수를 완성해주세요. 참고로 각 숫자에 대응되는 영단어는 다음 표와 같습니다. ⭐ 제한사항 1 ≤ s의 길이 ≤ 50 s가 "zero" 또는 "0"으로 시작하는 경우는 주어지지..
📕 문제 설명 어떤 문장의 각 알파벳을 일정한 거리만큼 밀어서 다른 알파벳으로 바꾸는 암호화 방식을 시저 암호라고 합니다. 예를 들어 "AB"는 1만큼 밀면 "BC"가 되고, 3만큼 밀면 "DE"가 됩니다. "z"는 1만큼 밀면 "a"가 됩니다. 문자열 s와 거리 n을 입력받아 s를 n만큼 민 암호문을 만드는 함수, solution을 완성해 보세요. ⭐ 제한사항 공백은 아무리 밀어도 공백입니다. s는 알파벳 소문자, 대문자, 공백으로만 이루어져 있습니다. s의 길이는 8000이하입니다. n은 1 이상, 25이하인 자연수입니다. 💻 입출력 예 s n result "AB" 1 "BC" "z" 1 "a" "a B z" 4 "e F d" 😊 나의 답변 function solution(s, n) { const A..
💡 목표 0부터 원하는 숫자까지 숫자가 상승하는 애니메이션 구현 📌 HTML 📌 CSS #count { font-size: 30px; } 📌 JavaScript let countBox = document.querySelector('#count'); let count = 0; let num = 1234567890; let counting = setInterval(function () { if (count >= num) { count = num; clearInterval(counting); } else { count += 12345678; } countBox.innerHTML = new Intl.NumberFormat().format(count); }, 10); 💛 결과물 See the Pen Count A..
💡 목표 외부 라이브러리 없이 바닐라JS로 스크롤 이벤트 구현 📌 HTML Header Go Right Go Left Go Up Go Down 1 2 3 📌 CSS /* reset */ .wrap { width: 100%; margin: 0 auto; background-color: #eee; } li { list-style: none; } #header, #body { width: 50vw; margin: 0 auto; text-align: center; } #header { position: sticky; top: 0; left: 0; height: 5vw; margin-bottom: 20vw; line-height: 5vw; background-color: #ccc; z-index: 999; } #..
💡 목표 외부 라이브러리를 사용하지 않고, 계속해서 반복되는 무한 슬라이더 구현 (마지막 슬라이드에 도달하면 다시 첫번째 슬라이드로) 자동으로 넘어갈 것 📌 HTML prev next btn01 btn02 btn03 📌 CSS /* reset */ li { list-style: none; } button { border: none; } div, ul, li, button { margin: 0; padding: 0; } #sliderWrap { position: relative; width: 300px; height: 200px; overflow: hidden; } /* slide item */ #sliderWrap .slider { position: absolute; top: 0; left: 0; hei..
💡 목표 서서히 증가하는 막대그래프 구현 📌 HTML 📌 CSS /* reset */ ul { list-style: none; } div, ul, li { margin: 0; padding: 0; } /* 그래프 */ .graphWrap { position: relative; width: 300px; height: 300px; margin: 20px auto 0; border-left: 1px solid #aaa; border-bottom: 1px solid #aaa; } .graphWrap .graph > div { position: absolute; bottom: 0; width: 69px; border-radius: 50px 50px 0 0; } .graphWrap .graph > div#item1..
