창고

Online Tutorials 영상 카피 JS로 카운트다운(D-day) 핵심 : GAP = new Date("yyyy-mm-dd, 00:00:00").getTime() - Date.now() 일 : Math.floor( GAP / (밀리세컨드 * 60초 * 60분 * 24시간) ) 시간 : Math.floor( GAP % (밀리세컨드 * 60초 * 60분 * 24시간) / (밀리세컨드 * 60초 * 60분) ) 분 : Math.floor( GAP % (밀리세컨드 * 60초 * 60분) / (밀리세컨드 * 60초)) 초 : Math.floor( GAP % (밀리세컨드 * 60초) / 밀리세컨드 ) svg 스트로크 애니메이션 핵심 : stroke-dasharray 를 $svg.getTotalLength() ..

보호되어 있는 글입니다.

코드펜 Jon Kanter 님의 Handy Tally Counter 예제를 보고 원리를 내 방식대로 재구현해보았다. 차이점은 원본은 열마다 0~9까지 DOM이 존재하고, 이걸 9번 위로 올리는 방식이면, 나는 그냥 열마다 now, prev 2개의 DOM만 존재하고, setTimeout과 animationend를 이용하여 내용을 갈아치울거다. 그리고 col의 갯수가 몇개나 늘어나든 상관없이 짜볼거다 (0~999도 되고 0~99999도 되고) 데모 페이지 : https://ohikmyeong.github.io/code-pen-copy/Hand-Tally-Counter/mine/ Handy Tally Counter-Copy 0 1 0 1 0 1 0 1 ohikmyeong.github.io See the Pen..

영상에 보인대로 따라하면 backface 부분이 안 보이는 오류가 있어서 수정해 봄 CSS로 3d를 해야 할 때 항상 참고하는 사이트 : https://3dtransforms.desandro.com/cube Cube · Intro to CSS 3D transforms Cube Cards are a good start for working with 3D transforms, but they only show off 3D in transition. To show off 3D at rest, we’ll have to create true 3D objects: prisms. We’ll start with a cube. The markup for the cube is similar to the card. This..

보호되어 있는 글입니다.

유튜브 : https://www.youtube.com/watch?v=QTcIXok9wNY 미리보기(데모) : https://ohikmyeong.github.io/wds-snake-game/answer-with/ (Answer With)Snake Game ohikmyeong.github.io HTML 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 (Answer With)Snake Game 0 GAME OVER.. Colored by Color Scripter cs CSS 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 ..

데모페이지 : https://ohikmyeong.github.io/wds-library/mine/ mine Houses For Sale Live Demo Lorem ipsum dolor sit, amet consectetur adipisicing elit. Magnam tempore nostrum autem vel esse libero! Details Contact Seller X modal title modal content ohikmyeong.github.io WDS 강의 영상 : https://www.youtube.com/watch?v=vTsVl66q9jo IntroJS : https://introjs.com User Onboarding and Product Walkthrough Library | ..

* WDS : https://www.youtube.com/watch?v=p_6IuhmBsfc&t=1763s * CodePen : https://codepen.io/doriancami/full/jEJvaV 미리보기 : https://ohikmyeong.github.io/wds-time-turner/mine/ Time Turner Animation 0 0 0 0 ohikmyeong.github.io "카운트 다운"인데 애니메이션 구현하는데 집중하다 보니 그냥 시계로 만들어 버렸다 -__- HTML 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43..

HTML,JS 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 Can I Create Online Tutorial’s Magic CSS Indicator? home Home person Person forum Comment photo_camera Photo settings Settings const $gnb = document.getElementById('gnb'); const $indicator = docu..

https://www.youtube.com/watch?v=jfYWwQrtzzY 이전 포스팅 : https://aosceno.tistory.com/603 HTML 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 How To Build Sortable Drag & Drop With Vanilla Javascript Hello World Nice To Meet You Colored by Color Scripter cs CSS 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 @charset "utf-8"; @import url..

CSS,JS 영상 참고 : https://www.youtube.com/watch?v=VPVu1148TU0 원본 디자인 참고 : https://uidesigndaily.com/posts/figma-reviews-day-1573 HTML 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 ..

강의영상 : https://www.youtube.com/watch?v=V_G1WzPjb4o 깃허브 미리보기 : https://ohikmyeong.github.io/ot_clrProgress/ Animated Circular Progress Bar Using Html CSS Only | Dynamic SVG Progress Bar ohikmyeong.github.io HTML 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 Animated Circular Progress Bar Using Html CSS Only | Dynamic SVG Progress Bar 80 Html Color..

바닐라 자바스크립트로 테트리스 구현하기(1) 유튜브 참고 영상 : https://www.youtube.com/watch?v=rAUn1Lom6dw 깃허브 미리보기 / 넷리파이 코드 테트리스 : 초보자를위한 JavaScript 튜토리얼 ohikmyeong.github.io HTML 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 코드 테트리스 : 초보자를위한 JavaScript 튜토리얼 SCORE : ... START Colored by Color Scripter cs CSS 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34..

Web Dev Simpified : If You Want To Be An Advanced Game Developer Build This Project 본 포스팅은 위 유튜브 튜토리얼 영상을 보고 쓴 클론코딩(깃허브)입니다. 가독성을 위해서 기타 일반 함수로 작성된 부분도 클래스 안에 넣고, event 부분도 따로 파일로 빼서 클래스로 작성하였습니다. 점수 표시도 추가하였습니다. 새로 배웠던 개념 * $elem.style.setProperty('--var', value); * get, set * https://ko.javascript.info/property-accessors * private field(#) * https://ko.javascript.info/private-protected-propert..

모던 자바스크립트 튜토리얼 : 프로퍼티 getter와 setter 프로퍼티 getter와 setter ko.javascript.info 그냥 예제 따라하면서 공부한거 메모 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 /* 기본 */ const test = { firstName : "Din", lastName : "Djarin", get fullName(){ return `${this.firstName} ${this.lastName}`; }, set fullName(value){ [this.firstName, this.lastName] = value.split(' '); } }; ..

제로초(조현영)님의 인프런/유튜브 무료 강의 "렛츠기릿 자바스크립트" 공부 내용입니다. [무료] [리뉴얼] 렛츠기릿 자바스크립트 - 인프런 | 강의 본 강의에서는 자바스크립트를 활용해 프로그래밍 사고력을 기르는 연습을 합니다. 웹 게임인 구구단을 시작으로 끝말잇기, 숫자 야구, 반응 속도 테스트, 틱택토, 로또 추첨기, 가위바위보, 카 www.inflearn.com 본 강의에서 2022년 기준 12강에 해당하는 지뢰찾기를 class 문법으로 재구성했습니다. 기본 기능들은 강의 내용과 동일하며, 노란색 바탕은 추가한 기능입니다. 마우스 이벤트는 추가한 기능 때문에 addEventListener 부분이 다르니 유의해주세용 구현한 기능 form으로 행,열,지뢰의 갯수를 받아 table을 그린다. form의 s..

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 //https://www.inflearn.com/course/레츠기릿-자바스크립트/lecture/80516 //https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Classes //https://ko.javascript.info/class class Test{ constructor(){ this.btn0 = document.getElementById('btn0'); this.btn1 = document.getElementById('b..

제로초님의 렛츠기릿 자바스크립트 강의에 Eun-Gil Cho님이 작성해주신 질문을 바탕으로 쓰여진 포스팅입니다. 재귀함수로 십진수를 이진수로 표현하기 See the Pen Untitled by Oh Ikmyeong (@dpffpself) on CodePen. 이건 그냥 이진수를 십진수로 바꾸기 See the Pen To Decimal by Oh Ikmyeong (@dpffpself) on CodePen. 얄팍한 코딩사전 - 재귀의 기초 이해 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53..

인프런에서 1분코딩님이 제공하는 무료강의 : BBC 인터랙티브 페이지 클론 코딩하기 복습 (원본 BBC 사이트 바로가기) 메모 Intersection Observer가 관찰하는 대상이 화면 높이보다 작거나 크면 잘 관찰되지만, 딱 100vh일땐 씹고 넘어가는 현상을 왕왕 봄 0_0;;자바스크립트가 똑같은 코드인데도 기본 Intersection Oberserver가 등신같이 군다면 CSS를 확인해보자... 클래스를 추가하고 제거할 때 번쩍거리는 현상을 어떻게 해결할까.. prev로 저장해서 해보기도 했지만 꼬여서 결국 그냥 css transition delay값을 조정하였다. 원본일때와 visible 모드일때 transition delay값을 다르게 조정해주면 된다. (visible모드일때 transiti..

보호되어 있는 글입니다.

https://github.com/CoenraadS/Bracket-Pair-Colorizer-2#readme GitHub - CoenraadS/Bracket-Pair-Colorizer-2: Bracket Colorizer Extension for VSCode Bracket Colorizer Extension for VSCode. Contribute to CoenraadS/Bracket-Pair-Colorizer-2 development by creating an account on GitHub. github.com 그 말인 즉슨,... 확장프로그램으로 너무 잘 쓰고 있던 Bracket Pair Colorizer가 더 이상 지원을 하지 않겠다는 뜻이죠잉 ㅠ.ㅠ 그간 너무 수고 많았습니다. 그러면 설치했던 ..

이번에 추가된 자바스크립트 최신 문법은 어디서 확인할 수 있나? 여기서 : https://tc39.es/ecma262/ ECMAScript® 2022 Language Specification The first and subsequent editions of ECMAScript have provided, for certain operators, implicit numeric conversions that could lose precision or truncate. These legacy implicit conversions are maintained for backward compatibility, but not provided for BigI tc39.es

예제 구현(git page) : https://ohikmyeong.github.io/btn_micro_interaction/ Download Button Micro-interaction using CSS & Javascript ohikmyeong.github.io Online Tutorials의 동영상을 보고 내 방식대로 구현해봄. HTML 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 Download Button Micro-interaction using CSS & Javascript Download Complete Colored by Color Scripter cs CSS 1 2 3 4 5 6 7 8 9 10 11 12 13..

어떻게 하면 jQuery를 쓰지 않고 html을 include 할 수 있을까? 기존 jQuery로 html을 include 하는 방법을 보다가 jQuery의 .load()를 바닐라 자바스크립트로 하면 어떻게 구현할 수 있을까 궁금해졌다. 스택오버플로우의 답변을 참고하여 만들었음 이전에 포스팅했던 jQuery 없이 html include하기는 AJAX를 사용해서 하는건데..훨씬 복잡하다. 이번에는 엄청 간단하게 fetch로 할거임! HTML 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 include html without jquery Colored by Color Scripter cs JS - main.js 1 2 3 4 import { includeHTML } from..

난 git 잘 모름 공식에서 제공하는 페이지 생성 방법을 아무리 따라해도 정작 push 하려는 순간 퍼블릭키 에러 어쩌고가 나는데 재발급을 받아도 ms 오피스 어쩌고 막 걍 닫아버리니 확인이 안되어서.. 그러다 노마드코더의 바닐라자바스크립트로 그림판 만들기 강좌에서 git을 쓰는 방법이 초반에 나오는데 그대로 하니까 되더라 ㅡㅠ... 1) git에서 먼저 New repository을 만들어줌 2) Create a new repository 2-1) Repository name은 영문명으로 2-2) Description은 적거나 말거나 2-3) Public에 체크 2-4) Add a README file 체크 하건 말건 2-5) Add.gitignore에 체크하고 """Node 추가""" 2-6) Crea..

How to get YOUTUBE's title,author,thumbnail from id without API by using only vanilla javaScript 유튜브 API를 쓰면 편하겠지만... 일정 이상 지나가면 유료인데다가, 그냥 테스트나 취미용으로 만드는 페이지에서까지 api를 등록하는건 부담스럽잖아?...ㅠ (사실 지금 이 글 쓰는 시점에서 공식 유튜브 api를 써본적 없기에 ㅇㅇ 잘 모름) 그래서 api 없이 어떻게 하면 유튜브의 동영상 id만 가지고 썸네일,제목,작성자를 가져올 수 있는지 찾아보던중 https://stackoverflow.com/questions/30084140/youtube-video-title-with-api-v3-without-api-key Youtube ..

"바닐라 JS로 크롬 앱 만들기" 강의 다 들으면 만들 수 있는 산출물 https://ohikmyeong.github.io/momentum/ To do List ohikmyeong.github.io

쩨리쩨리님의 달력 만들기 달력만들기(1) CSS는 최소화 하였습니다. class 개념을 사용하여 HTML의 DOM은 id값만 있고, 이후 모듈이 되는 js에서 해당 함수로 생성만 하면, 해당하는 DOM에 달력이 자동으로 생성됩니다. 이전다음달 보기, 오늘 날짜 표시 같은 기능을 옵션으로 on/off 할 수 있게 해보았습니다. 이런식으로요 1 2 3 4 5 6 7 8 여기다 달력을 생성할 수 있게끔... let test = new ImCalendar(); test.startDraw({ target : 'test' ,prevNext : false ,HL_today : true }) Colored by Color Scripter cs HTML : 이 영역에선 달력을 넣고 싶은 DOM에 id만 지정해줍니다 1 ..

(1) : 몇초만에 MIT에서 만든 dyCalendar로 달력 만들기 (1-2) : (1)의 튜토리얼 영상 (Youtube : Online Tutorials) 쩨리쩨리님의 달력 만들기 [JavaScript]달력 만들기, Date 객체 * Date - 날짜와 관련된 작업을 지원한다. - 객체 생성 방법 1. var object = new Date(); 2. var object = new Date(년,월,일,시,분,초,밀리초); * Date 메소드 - 중요 메소드 1. getYear() : 1970년 이후의 연.. jerryjerryjerry.tistory.com 이 포스팅은 쩨리쩨리님의 포스팅을 기반으로 작성하였습니다. 원리 파악을 위해 CSS는 최소로 하였으며, 쩨리쩨리님의 코드를 기능별로 함수로 분리하..

우선 최고의 참고 사이트 MDN 링크 (1)Reduce : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce Array.prototype.reduce() - JavaScript | MDN reduce() 메서드는 배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고, 하나의 결과값을 반환합니다. developer.mozilla.org (2)Rest parameters : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/rest_parameters Rest 파라미터 - JavaScript | MDN..