본문 바로가기
반응형

🖥️ 프로젝트?/자바스크립트 초미니4

Leetcode To Blogpost : 리트코드 문제를 블로그 글로 바꾸기 요약📙 프로젝트명 : Leetcode To Blogpost⚙️ 주요 기능 : 리트코드의 문제를 블로그 포스트로 올릴 HTML 문서로 변환함🚩 목적 : 블로그 글 작성을 쉽게 하기 위해📆 제작 기한 : 2024년 7월 23일 ~ 7월 24일 (2일간)🛠️ 사용 툴 : HTML, CSS, JavaScript🔗 GitHub 링크 : https://github.com/dobbyjang0/LeetcodeToBlogpost 만들게 된 계기 '🖥️ 문제 풀이/리트코드(Leetcode)' 카테고리의 글 목록내가 보려고 정리해놓습니다programming4myself.tistory.comLeetCode의 문제를 풀면서 블로그에 해법을 쓰고 있었는데, 문제를 옮기는데 시간이 너무 오래 걸렸었다. 따라서 문제 내용.. 2024. 7. 24.
💡 Turn On Light : transform 정보 js에서 불러오기 요약 📙 프로젝트명 : Turn On Light ⚙️ 주요 기능 : 불을 켰다가 끔 🚩 목적 : 호기심, 힐링 📆 제작 기한 : 2023년 1월 21일 (1일간) 🛠️ 사용 툴 : HTML, CSS, JavaScript 🔗 GitHub 링크 : https://github.com/dobbyjang0/javascript-mini-project/tree/main/turn-on-light 기능설명 아래 노란색 원에 마우스를 올려 놓으면 돌아간다. 계속 돌아가다 빨간색 선이 연결이 되면 위쪽의 불이 켜지게 된다. 다시 노란색 원을 돌려 빨간 선이 어긋나면 불이 꺼지게 된다. 어려웠던 점 / 배웠던 점 돌아간 각도를 js에서 인식하기 function isConnected() { let style = window.g.. 2023. 1. 21.
🎚️ Your Score : 슬라이더와 카운터 연습 요약 📙 프로젝트명 : Your Score ⚙️ 주요 기능 : 슬라이더와 숫자를 조정가능한 카운터가 있음 🚩 목적 : 슬라이더와 카운터 연습, 뉴모피즘 스타일 📆 제작 기한 : 2023년 1월 18일 ~ 1월 20일 (3일간) 🛠️ 사용 툴 : HTML, CSS, JavaScript 🔗 GitHub 링크 : https://github.com/dobbyjang0/javascript-mini-project/tree/main/your-score 기능설명 위쪽의 슬라이더는 Thumb를 움직일 경우 위에 버블이 생겨 값을 알려준다. 동작이 끊나고 다른 요소를 건드리면 해당 버블은 사라진다. 아래쪽의 카운터는 왼쪽 버튼을 누르면 숫자가 내려가고, 오른쪽 버튼을 누르면 숫자가 올라간다. 어려웠던 점 / 배웠던 점 슬.. 2023. 1. 21.
🎯 Change Color : 랜덤 색상 띄우기 요약 📙 프로젝트명 : Change Color ⚙️ 주요 기능 : 가운데 버튼을 누르면 랜덤한 색상의 동심원이 생기고 버튼의 문구가 바뀜 🚩 목적 : CSS, Javascript, 문서화 연습 🛠️ 사용 툴 : HTML, CSS, JavaScript 🔗 GitHub 링크 : https://github.com/dobbyjang0/javascript-mini-project/tree/main/random-color 기능 설명 가운데 'Change xxx'라 적힌 버튼을 누르면 중앙에서 랜덤한 색상의 원이 하나 생성된다. 해당 원은 3초간 커지며 화면을 덮은 후, 사라지고 동시에 배경색이 해당 색으로 대체된다. 또 버튼을 누를 때 버튼의 단어가 목록의 랜덤한 단어 중 하나로 바뀐다. 어려웠던 점 / 배웠던 점 .. 2023. 1. 18.
반응형