javascript 30
[JS] 🗓️JavaScript 30 - Day 12
[JS] 🗓️JavaScript 30 - Day 12
2021.11.29📖Day 12 - Key Sequence Detection (KONAMI CODE) JavaScript 30의 Day 12 프로젝트는 지정해놓은 코나미 커맨드(치트코드의 일종이라고 한다.)를 입력하면 화면에 랜덤한 유니콘 이미지를 보여주는 프로젝트이다. 🤓📄코드 모아보기 HTML CSS body { margin: 0; padding: 0; width: 100vw; height: 100vh; background: linear-gradient( 135deg, #f0e9d2 0%, #e6ddc4 20%, #678983 60%, #181d31 100% ); background-size: cover; display: flex; justify-content: center; align-items: center; } ..
[JS] 🗓️JavaScript 30 - Day 11
[JS] 🗓️JavaScript 30 - Day 11
2021.11.28📖Day 11 - Custom HTML5 Video Player JavaScript 30의 Day 11 프로젝트는 HTML, CSS, JavaScript만을 이용해서 나만의 비디오 플레이어를 만들어보는 프로젝트이다. 🤓📄코드 모아보기 HTML ► 🔊 « 10s 10s » 🔳 CSS html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } body { margin: 0; padding: 0; display: flex; background: #7a419b; min-height: 100vh; background: linear-gradient(135deg, #7c1599 0%, #921099 48%, #7e4ae8 100%); ..
[JS] 🗓️JavaScript 30 - Day 10
[JS] 🗓️JavaScript 30 - Day 10
2021.11.26📖Day 10 - Hold Shift to Check Multiple Checkboxes JavaScript 30의 Day 10 프로젝트는 여러 개의 체크박스 중에서 shift키를 누른 상태로 체크한 박스와 기존의 체크 되어있던 박스 사이의 체크박스들이 모두 체크되어지는 기능을 구현하는 프로젝트이다. 🤓📄코드 모아보기 HTML This is an inbox layout. Check one item Hold down your Shift key Check a lower item Everything in between should also be set to checked Try to do it without any libraries Just regular JavaScript Good Luck! Don'..
[JS] 🗓️JavaScript 30 - Day 9
[JS] 🗓️JavaScript 30 - Day 9
2021.11.23📖Day 9 - 14 Must Know Dev Tools Tricks JavaScript 30의 Day 9 프로젝트는 개발자 도구의 다양한 기능들을 알아보는 프로젝트이다. 🤓📄코드 모아보기 HTML ×BREAK×DOWN× JavaScript const dogs = [ { name: "Snickers", age: 2 }, { name: "hugo", age: 8 }, ]; function makeGreen() { const p = document.querySelector("p"); p.style.color = "#BADA55"; p.style.fontSize = "50px"; } // Regular console.log("Hello"); // Interpolated console.log("Hello I a..
[JS] 🗓️JavaScript 30 - Day 8
[JS] 🗓️JavaScript 30 - Day 8
2021.11.22📖Day 8 - Fun with HTML5 Canvas JavaScript 30의 Day 8 프로젝트는 HTML의 canvas element와 다양한 메서드를 사용하여 낙서해보는 프로젝트이다. 🤓📄코드 모아보기 HTML 🖌️ ARTIST MODE CSS html, body { margin: 0; height: 100vh; } body { display: flex; flex-direction: column; justify-content: center; align-items: center; background: linear-gradient( 270deg, #f0e9d2 0%, #e6ddc4 33%, #678983 66%, #181d31 100% ); } #draw { background-color: whit..
[JS] 🗓️JavaScript 30 - Day 7
[JS] 🗓️JavaScript 30 - Day 7
2021.11.21📖Day 7 - Array Cardio Day 2 JavaScript 30의 Day 7 프로젝트는 Day 4와 마찬가지로 무언갈 만드는게 아닌 JavaScript의 Array에 대해서 더 알아보는 프로젝트이다. 저번에 배운 것과 다른 method들을 공부해보자. 🤓📄코드 모아보기 HTML Psst: have a look at the JavaScript Console 💁 JavaScript // ## Array Cardio Day 2 const people = [ { name: "Wes", year: 1988 }, { name: "Kait", year: 1986 }, { name: "Irv", year: 1970 }, { name: "Lux", year: 2015 }, ]; const comments = ..
[JS] 🗓️JavaScript 30 - Day 6
[JS] 🗓️JavaScript 30 - Day 6
2021.11.19📖Day 6 - Ajax Type Ahead JavaScript 30의 Day 6 프로젝트는 Fetch API와 정규표현식을 이용해 검색창에 문자를 입력하면 해당 문자가 포함된 도시를 나열하는 프로젝트이다. 🤓📄코드 모아보기 HTML Filter for a city or a state CSS html { box-sizing: border-box; background: linear-gradient( 90deg, #98ddca 0%, #d5ecc2 33%, #ffd3b4 66%, #ffaaa7 100% ); font-family: "helvetica neue"; font-size: 20px; font-weight: 200; } *, *:before, *:after { box-sizing: inherit; }..
[JS] 🗓️JavaScript 30 - Day 5
[JS] 🗓️JavaScript 30 - Day 5
2021.11.18📖Day 5 - Flex Panels Image Gallery JavaScript 30의 Day 5 프로젝트는 Flexbox를 이용해 Image Gallery를 만드는 프로젝트이다. 🤓📄코드 모아보기 HTML Your time is limited, so don't waste it living someone else's life. Just Steve Jobs Action is the foundational key to all success. Do Pablo Picasso Anyone who has never made a mistake has never tried anything new. It Albert Einstein The way get started is to quit talking a..
[JS] 🗓️JavaScript 30 - Day 4
[JS] 🗓️JavaScript 30 - Day 4
2021.11.17📖Day 4 - Array Cardio Day 1 JavaScript 30의 Day 4 프로젝트는 무언갈 만드는 프로젝트는 아니고, 자바스크립트의 Array에 대해서 알아보는 시간이다. Array의 다양한 method들을 공부해보자. 🤓📄코드 모아보기 HTML Psst: have a look at the JavaScript Console 💁 🔎코드 설명 이번 프로젝트에서는 Array의 다양한 method들을 공부한다. Array.filter() filter() 메서드는 배열 내 각 요소에 대해 한 번 제공된 callback 함수를 호출해, callback이 true로 강제하는 값을 반환하는 모든 값이 있는 새로운 배열을 생성한다. callback은 할당된 값이 있는 배열의 인덱스에 대해서만 호출된다. 이..
[JS] 🗓️JavaScript 30 - Day 3
[JS] 🗓️JavaScript 30 - Day 3
2021.11.12📖Day 3 - Playing with CSS Variables and JS JavaScript 30의 Day 3 프로젝트는 JavaScript를 이용해 CSS를 조작해 이미지를 업데이트하는 프로젝트이다. 🤓📄코드 모아보기 HTML ✨Update CSS Variables with JS✨ Padding Blur Base Color CSS :root { --base: #364f6b; --spacing: 10px; --blur: 10px; } img { width: 20rem; padding: var(--spacing); background: var(--base); filter: blur(var(--blur)); } h1 { color: #364f6b; } .point { color: var(--base); ..
[JS] 🗓️JavaScript 30 - Day 2
[JS] 🗓️JavaScript 30 - Day 2
2021.11.11📖Day 2 - CSS + JS Clock JavaScript 30의 Day 2 프로젝트는 '시계 만들기'이다. 화면에 CSS와 JavaScript를 통해 각자의 시계를 만들어보는 프로젝트이다. 🤓📄코드 모아보기 HTML CSS html { background: linear-gradient(45deg, #796302 0%, #a79e2c 50%, #006492 100%); background-size: cover; font-family: "helvetica neue"; text-align: center; font-size: 10px; } body { margin: 0; font-size: 2rem; display: flex; flex-direction: column; flex: 1; min..
[JS] 🗓️JavaScript 30 - Day 1
[JS] 🗓️JavaScript 30 - Day 1
2021.11.10📖Day 1 - JAVASCRIPT DRUM KIT JavaScript 30의 Day 1 프로젝트는 '드럼 킷 만들기'이다. 화면에 매칭 된 키보드 버튼을 누르면 연결된 audio 파일을 재생하는 프로젝트이다. 🤓📄코드 모아보기 HTML Q A2A3 W A3 E B2 R B3 U B3B4 I B4 O C#3 P C#3C#4 A C#4 S D#4 D D3 F D5 J E2 K E4 L F2 : F2F3 CSS html { font-size: 10px; background: url("./images/background.jpg") center; background-size: cover; } body, html { margin: 0; padding: 0; font-family: sans-serif..