JavaScript/제작

[JS] 검색어 자동완성 기능

위와 같은 자동완성 기능은 우리가 흔히 접할 수 있는 UI 요소입니다. ※ 초성검색 적용 버전 코드도 있습니다. 예제 코드 See the Pen JS Autocomplete by hyukson (@hyukson) on CodePen. HTML 태그 사용하기 HTML에는 Input 자동완성 기능을 이용할 수 있도록 해주는, datalist 태그와 list 속성이 존재합니다. 하지만, 다양한 이벤트 설정이 어렵고 커스텀이 힘들다는 단점을 보완하기 위해서 자바스크립트로 구현해 보았습니다. 코드 풀이 먼저 검색어를 입력받을 Input 요소와 자동완성을 시켜줄 리스트 요소를 하나 생성해 줍니다. /* active 클래스를 가진 요소에 대해 */ .autocomplete > div.active { backgroun..

[JS] 눈 내리는 효과 만들기

완성 코드 See the Pen Canvas Snow by hyukson (@hyukson) on CodePen. 전체코드(보기) 더보기 const $canvas = document.querySelector("canvas"); const ctx = $canvas.getContext("2d"); const getRandomRadius = () => Math.random() * 1 + 0.5; const getRandomSpeed = () => Math.random() * 0.3 + 0.1; const getRandomDir = () => [-1, 1][Math.floor(Math.random() * 2)]; const Snow = { data: [], canvasWidth: $canvas.clientWid..

[JS] 룰렛 구현하기

JavaScript와 캔버스(Canvas)를 사용하여 룰렛을 구현해보았습니다. 코드 See the Pen Canvas Roulette by hyukson (@hyukson) on CodePen. 코드 풀이 const $c = document.querySelector("canvas"); const ctx = $c.getContext(`2d`); // 룰렛에 들어갈 항목 const product = [ "떡볶이", '돈가스', "초밥", "피자", "냉면", "치킨", '족발', "피자", "삼겹살", ]; // 각 항목에 해당하는 색상 const colors = [ "#dc0936", "#e6471d", "#f7a416", "#efe61f ", "#60b236", "#209b6c", "#169ed8", "..

[JS] 자동으로 글자 적는 타이핑 효과 구현하기

JavaScript를 이용하여 간단한 typing 효과를 구현할 수 있습니다. 예시 코드 See the Pen Text Typing Effect by hyukson (@hyukson) on CodePen. 위 예시코드는 동작을 보여주기 위해서 무한 반복하고 있습니다. 참고해주세요! 무한반복 막기 // 지우는 효과 if (letters[i + 1]) remove(); 코드 풀이 텍스트가 입력될 요소를 하나 생성해줍니다. // 텍스트 요소 const $text = document.querySelector(".text"); // 입력될 글자 모음 const letters = ["HTML", "CSS", "JavaScript"]; // 글자 입력 속도 const speed = 100; // 현재 지정된 글자 l..

[JS] 밤하늘의 별 배경 만들기

여름이 시작되기도 하고 별이 가득한 밤하늘을 웹으로 나마 보고 싶어 제작해보았습니다. JavaScript로는 오로지 별을 랜덤 한 위치에 배치시키는 작업만 해주고, 스타일은 CSS 코드로 작성하였습니다. See the Pen stars Background by hyukson (@hyukson) on CodePen. 코드 HTML 태그 구성으로는 밤하늘 배경을 만들 부모 태그와 별들을 감쌀 태그를 만들어줍니다. 저는 Circle 태그를 사용하기 위해서 SVG를 사용하였습니다. (position 속성을 이용하여 div로도 가능) /* 배경 */ .backSky { width: 100vw; height: 100vh; position: relative; background: linear-gradient(to r..

[JS] 숫자 카운트 애니메이션 만들기

홈페이지에서 수치를 표현할 때 효과적으로 시선을 이끌 수 있는 방법 중 하나가 바로 카운트 애니메이션 효과를 사용하는 것입니다. 코드 See the Pen JS Number CountDown by hyukson (@hyukson) on CodePen. 예를 들어 17242까지 증가한다고 할 때, 일정한 간격으로 증가하는 것이 아닌 점점 증가하는 수치가 줄어들면서 훨씬 자연스러운 숫자 카운트 애니메이션으로 보이게 제작해 보았습니다. 코드 풀이 0 // 카운트를 표시할 요소 const $counter = document.querySelector(".count"); // 목표수치 const max = 17242; counter($counter, max); counter 함수를 하나 제작하고, 해당 함수로 카운..

[JS] 별점 드래그 구현

완성본 코드 See the Pen Drag Star by hyukson (@hyukson) on CodePen. 코드 풀이 ★★★★★ ★★★★★ // JAVASCRIPT CODE const drawStar = (target) => { document.querySelector(`.star span`).style.width = `${target.value * 10}%`; } // JQUERY CODE const drawStar = (target) => { $(`.star span`).css({ width: `${target.value * 10}%` }); } 별점 뒤에 숨겨진 input range의 값을 드래그로 조절할 수 있습니다. 해당하는 value값만큼 별 width를 늘려주는 방식입니다. 먼저 이미지..

[JS] 틱택토 (Tic-Tac-Toe)

완성본 See the Pen Untitled by hyukson (@hyukson) on CodePen. Result 화면만을 띄워놓고 테스트를 해보실 수 있습니다. 코드 풀이 틱택토는 가로, 세로, 대각선 중 1 라인을 채우는 사람이 이기는 게임입니다. 즉 승리 조건은 가로, 세로, 대각선 중 1 라인을 다 채운 플레이어를 찾으면 됩니다. 이제 틱택토 게임을 구현하기 전 필요한 기능들을 생각해 보았습니다. 필요 기능 새 게임판 만들기 네모판을 클릭 시 현재 턴인 유저에 따른 표시 게임판에 가로, 세로, 대각선 중 1 라인을 채웠는지 확인 만약 승리 조건이 일치하지 않을 시 다음 턴 넘기기 위 기능 구현을 목표로 구현해 보았습니다. 1. 새 게임판 만들기 newMake() { let html = ''; ..

[JS] 달력 만들기

CSS의 display의 grid 속성을 이용해서 제작한 달력입니다. 완성 코드 See the Pen Untitled by hyukson (@hyukson) on CodePen. 전체 코드 const makeCalendar = (date) => { const currentYear = new Date(date).getFullYear(); const currentMonth = new Date(date).getMonth() + 1; const firstDay = new Date(date.setDate(1)).getDay(); const lastDay = new Date(currentYear, currentMonth, 0).getDate(); const limitDay = firstDay + lastDay; c..