본문 바로가기
반응형

분류 전체보기167

💡 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.
🚶 큐(queue) 파이썬으로 구현하기! 큐에 대해서 알아보고 파이썬으로 구현해보기 큐(Queue)란? 선입선출(First In First Out, FIFO), 처음에 넣은게 가장 먼저 나옴 놀이공원 줄 서기를 생각하면 편하다 사용처 : 여러 작업들이 동시에(병렬적으로) 이루어져도 상관없는 경우, 의존관계 없는 경우 예시 : 스케쥴링 (운영체계 프로세스 관리) 큐의 추상 자료형(ADT) 객체 (characters) arr : T[], 데이터가 저장되는 배열, 리스트 front : int, 큐의 맨 앞부분 인덱스 rear : int, 큐의 맨 뒷부분 인덱스 연산 (operations) enqueue() : 맨 뒤에 원소를 넣음 dequeue() : 맨 앞 원소를 뺌 back() : 맨 뒤 원소를 확인 front() : 맨 앞 원소를 확인 isem.. 2023. 1. 16.
📚 스택 (Stack) 파이썬으로 구현하기! 스택에 대해서 알아보고, 파이썬으로 스택을 구현해보기 스택이란? 후입선출(Last In First Out, LIFO), 나중에 넣은게 가장 먼저 나옴 한쪽이 뚫려있는 통을 생각하면 편하다 사용처 : 어떤 작업이 다른 작업보다 먼저 이루어져야만 하는 경우, 의존관계 있는 경우, 재귀함수를 이용해 구현도 가능 DFS 예시 : 하드웨어 스택, 콜 스택 스택의 추상 자료형 (ADT) 객체 (characters) arr : T[], 데이터가 저장되는 배열, 리스트 top : int, 가장 나중에 저장된 데이터의 위치 연산 (operations) push() : 위에 새 요소를 넣음 pop() : 맨 위의 요소를 뺌 top() : 맨 위의 요소를 출력 isempty() : 스택이 비어있는지 확인 isfull() :.. 2023. 1. 15.
🔠 Javascript로 알파벳 리스트 만들기! 문제 ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z'] 자바스크립트에서 다음과 같이 알파벳으로 이루어진 배열을 만들어보자! 해결 # 소문자 출력 Array.from({ length: 26 }, (v, i) => String.fromCharCode(i + 97)); Array(26).fill().map((v, i) => String.fromCharCode(i + 97)); # 대문자 출력 Array.from({ length: 26 }, (v, i) => String.fromCharCode(i + 65)); Array(26)... 2023. 1. 13.
반응형

티스토리툴바