takeU

Type Ahead 웹에서 정보를 받아와 Live Search 기능을 구현 기본 코드 Filter for a city or a state 목표 이번엔 스타일시트가 따로 빠져있는데 자바스크립트를 공부하는 목적이므로 따로 첨부는 하지 않음. 검색창을 만들어서 도시나 주의 이름의 일부를 검색하면 도시, 주, 인구수를 실시간으로 보여주도록 만들 예정 과정 도시와 주의 이름과 인구수를 받아옴 검색시 일치하는 값을 찾아내는 함수를 만듦 위의 함수를 이용해 화면에 보여지게하는 함수를 만듦 인구수를 보기 편하게 콤마를 삽입하는 함수를 만들어줌 만든 함수를 통해 실시간으로 브라우저에 출력 코드 분석 1. 도시와 주의 이름과 인구수를 받아옴 const cities = []; fetch(endpoint) .then(blob..

개발 좋은 글 모음 보시는 분들에게 도움이 되었으면 좋겠습니다. 프로그래밍 Developer-roadmap - kamranahmedse 님 [입문]초보 개발자로의 입문 / 개발이라는 세계에 첫 발 내딛기 - _Jbee 님 [번역]당신의 코딩 학습 방식을 바꿀 사진 - Captain Pangyo 님 [번역]좋은 코딩을 위한 13가지 간단한 규칙 - mingrammer 님 훌륭한 프로그래머와 코드 품질 - 이즈군 님 프로그래밍 재미있게 공부하기 - 조인석 님 소프트웨어 개발자가 되기까지 - 조인석 님 비 개발자를 위한 웹 개발 기초 - Gihyo Joshua Jang 님 [웹개발자 기준]비전공자 신입으로서 전공자한테 안밀리고 살아남는법 - OKKY 은하수 님 [번역]성공적인 웹 개발자가 되기 위한 21단계 ..

정보 http://www.venturesquare.net/ - 스타트업 전문 미디어 서비스 플랫폼, 각종 스타트업 관련정보, 기술 등을 얻을 수 있음 http://platum.kr/ - 세계의 스타트업 관련 기사, 정보 http://www.k-startup.go.kr/ - 스타트업 공고, 소식, 가이드 모임, 채용 http://onoffmix.com/ - 세미나, 포럼, 해커톤등 각종 행사 정보 및 참가신청 http://dcamp.kr/ - 스타트업 관련 행사, 매칭, 이벤트 https://www.rocketpunch.com/ - 스타트업 전문 채용정보, 구인구직 사이트 https://www.wanted.co.kr/ - 스타트업 전문 채용정보, 구인구직 사이트 http://www.elancer.co.kr..

Flex Panel Gallery flex-box를 이용한 레이아웃 및 효과를 공부 기본 코드 Hey Let's Dance Give Take Receive Experience It Today Give All You can Life In Motion 목표 CSS 속성인 display: flex를 사용해 레이아웃을 구성해보고 자바스크립트 효과를 익힘 과정 display: flex 적용 각 패널의 크기, 내용의 위치 조정 패널 안의 구성요소 정렬 패널의 효과 적용 자바스크립트 효과 적용 코드 분석 1. display: flex 적용 .panels { display: flex; } 위 코드를 적용 시키면 각 패널의 레이아웃이 다음과 같이 바뀐다 2. 각 패널의 크기, 내용의 위치 조정 .panel { displ..

Array Cardio Day 1 제목처럼 자바스크립트 배열과 배열제어에 대해서 공부 기본코드 Psst: have a look at the JavaScript Console 💁 Psst: have a look at the JavaScript Console 💁 목표 자바스크립트의 배열제어 방법을 코드로 구현해보며 익힘 과정 filter() map() sort() reduce() 코드 분석 1. filter // Array.prototype.filter() // 1. Filter the list of inventors for those who were born in the 1500's const fifteen = inventors.filter(inventor => (inventor.year >= 1500 &..

3. CSS Variables CSS 변수 활용 기본코드 Update CSS Variables with JS Spacing: Blur: Base Color 목표 사진에서 두가지의 레인지 조절 기능과 colorpicker 넣기 과정 1. CSS 변수를 만든다(base색상, 기본 여백(spacing), 기본 흐림정도(`blur)) :root { --base: #ffc600; --spacing: 10px; --blur: 10px } :root - HTML 요소중 가장 상위 요소에 적용한다는 뜻 --base - base라는 CSS 변수를 생성 위와같이 :root에 변수를 선언하는 것은 전역변수를 생성한다는 뜻 2. CSS변수를 통한 이미지, 텍스트 효과 지정 img { padding: var(--spacing)..

CSS + JS Clock 자바스크립트 + CSS로 아날로그 시계를 구현할 수 있어서 신기했다 자바스크립트공부를 하려고 시작했는데 CSS도 많이 알게 되는것 같음. 기본 코드 목표 현재 시간을 아날로그 시계로 구현 과정 1. 시계바늘 중심위치 잡기, 효과 적용 .hand { transform-origin: 100%; transform: rotate(90deg); transition: all 0.05s; transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1); } transform - 변형 효과를 줄 때 기준 설정 hand 클래스에 위의 코드를 추가해 기준축을 100% 즉 가장 오른쪽으로 잡고, 방향을 90도만큼 돌려서 시침, 분침, 초침이 12시 방향에..

JavaScript Drum Kit 아래 첨부한 사진처럼 해당하는 키보드를 누르면 화면에 효과와 함께 소리가 나는 드럼 킷을 만드는 것 기본 코드 A clap S hihat D kick F openhat G boom H ride J snare K tom L tink 여기서 div 속성중 data-key 는 어떤 키를 눌러서 실행 시킬수 있는지 설정하는 것이며 http://keycode.info/ 에서 각 키의 키코드를 알 수 있다. 태그는 키보드 입력을 지정할 때 쓰는 코드이다. data-key 속성은 위의 div와 아래 audio를 하나로 묶어주는 속성이라 할 수 있다. 목표 키보드 키 입력시 애니메이션효과와 소리를 출력해 드럼 킷을 만드는 것 과정 1. 해당 키 입력시 효과음 추가하는 함수 생성 co..

JavaScipt30 챌린지 하루에 한 가지 자바스크립트 프로젝트를 하면서 30일간 30개의 프로젝트를 순수 자바스크립트로만 구현해보는 연습 사이트 https://javascript30.com/