Click and Drag

목표

클릭해서 드래그하면 옆으로 넘어가는 페이지를 구현해 봄

기본 코드

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Click and Drag</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="items">
    <div class="item item1">01</div>
    <div class="item item2">02</div>
    <div class="item item3">03</div>
    <div class="item item4">04</div>
    <div class="item item5">05</div>
  </div>
<script>
</script>
  </body>
</html>

과정

  1. 상수, 변수 생성
  2. mousedown시 실행될 함수 생성
  3. mouseleave시 실행될 함수 생성
  4. mouseup시 실행될 함수 생성
  5. mousemove시 실행될 함수 생성

코드 분석

  1. 상수, 변수 생성

     const slider = document.querySelector('.items');
     let isDown = false;
     let startX;
     let scrollLeft;
    

    items을 클래스로 가지는 요소들을 slider에 담고
    isDown, startX, scrollLeft를 변수로 생성

  2. mousedown시 실행될 함수 생성

     slider.addEventListener('mousedown', (e) => {
         isDown = true;
         slider.classList.add('active');
         startX = e.pageX - slider.offsetLeft;
         scrollLeft = slider.scrollLeft;
     });
    

    mousedown 이벤트, 즉 마우스를 클릭하면 isDown을 참으로 바꾸고 active 클래스를 추가해 박스에 확대효과를 주어 활성화 되어있음을 알려주고,
    startX에 전체 페이지 기준 왼쪽지점에서 움직인 만큼 뺀 값을 담고,
    scrollLeft에 좌우 스크롤 값을 읽어온다

  3. mouseleave시 실행될 함수 생성

     slider.addEventListener('mouseleave', () => {
         isDown = false;
         slider.classList.remove('active');
     });
    

    mouseleave 이벤트, 즉 마우스가 떠나면 isDown이 거짓으로 바뀌고, active 클래스를 제거

  4. mouseup시 실행될 함수 생성

     slider.addEventListener('mouseup', () => {
         isDown = false;
         slider.classList.remove('active');
     });
    

    mouseleave 이벤트, 즉 마우스를 클릭했다 떼면 isDown이 거짓으로 바뀌고, active 클래스를 제거

  5. mousemove시 실행될 함수 생성

     slider.addEventListener('mousemove', (e) => {
         if (!isDown) return;
         e.preventDefault();
         const x = e.pageX - slider.offsetLeft;
         const walk = (x - startX) * 3;
         slider.scrollLeft = scrollLeft - walk;
     });
    

    mousemove 이벤트, 즉 마우스를 이동할 때 isDown이 거짓이면 아무일도 생기지 않고,
    x는 클릭을 한 위치에서 부모요소인 <div class="items"> 왼쪽좌표를 뺀 값을 저장하고,
    walk에 위에서 설정한 x에서 <div class="items"> 왼쪽좌표를 뺀 값의 3배를 저장해 스크롤하면 움직일 수 있도록 함
    e.preventDefault()는 이벤트가 한번 생성되고 다시 초기화가 되지 않도록 한다

찾아본 내용, 알게된 내용들

.pageX - 문서기준 가장 왼쪽부터 현재 위치까지의 좌표
offsetLeft - 부모요소에 대해 왼쪽을 기준으로 상대적인 x 좌표를 구하는 것

'개발 > JavaScript30' 카테고리의 다른 글

29. Countdown Timer  (0) 2017.04.21
28. Video Speed Controller  (2) 2017.04.19
27. Click and Drag  (0) 2017.04.19
26. Stripe Follow Along Nav  (0) 2017.04.19
25. Event Capture, Propagation, Bubbling and Once  (0) 2017.04.19
24. Sticky Nav  (0) 2017.04.18

Stripe Follow Along Nav

목표

박스 크기에 맞춰 내용을 불러오는 네비게이션 바를 만들어 봄

기본 코드

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Follow Along Nav</title>
</head>
<body>
  <h2>Cool</h2>
  <nav class="top">
    <div class="dropdownBackground">
      <span class="arrow"></span>
    </div>

    <ul class="cool">
      <li>
        <a href="#">About Me</a>
        <div class="dropdown dropdown1">
          <div class="bio">
            <img src="https://logo.clearbit.com/wesbos.com">
            <p>Wes Bos sure does love web development. He teaches things like JavaScript, CSS and BBQ. Wait. BBQ isn't part of web development. It should be though!</p>
          </div>
        </div>
      </li>
      <li>
        <a href="#">Courses</a>
        <ul class="dropdown courses">
          <li>
            <span class="code">CLPU</span>
            <a href="http://CommandLinePowerUser.com">Command Line Power User</a>
          </li>
          <li>
            <span class="code">MMD</span>
            <a href="http://MasteringMarkdown.com">Mastering Markdown</a>
          </li>
        </ul>
      </li>
      <li>
        <a href="#">Other Links</a>
        <ul class="dropdown dropdown3">
          <li><a class="button" href="http://twitter.com/wesbos">Twiter</a></li>
          <li><a class="button" href="http://facebook.com/wesbos.developer">Facebook</a></li>
        </ul>
      </li>
    </ul>
  </nav>
<script>
</script>
</body>
</html>

과정

  1. 상수 생성
  2. 마우스가 올라갈 때의 함수를 생성
  3. 마우스가 떠날 때의 함수를 생성
  4. 효과를 적용, 해제하는 함수 실행

코드 분석

  1. 상수 생성

     const triggers = document.querySelectorAll('.cool > li');
     const background  = document.querySelector('.dropdownBackground');
     const nav  = document.querySelector('.top');
    

    해당 클래스를 가지고 있는 태그를 상수에 각각 매치시켜 정의

  2. 마우스가 올라갈 때의 함수를 생성

    function handleEnter() {
     this.classList.add('trigger-enter');
     setTimeout(() => this.classList.contains('trigger-enter') && this.classList.add('trigger-enter-active'), 150);
     background.classList.add('open');
    
     const dropdown = this.querySelector('.dropdown');
     const dropdownCoords = dropdown.getBoundingClientRect();
     const navCoords = nav.getBoundingClientRect();
    
     const coords = {
         height: dropdownCoords.height,
         width: dropdownCoords.width,
         top: dropdownCoords.top - navCoords.top,
         left: dropdownCoords.left - navCoords.left
     };
    
     background.style.setProperty('width', `${coords.width}px`);
     background.style.setProperty('height', `${coords.height}px`);
     background.style.setProperty('transform', `translate(${coords.left}px, ${coords.top}px)`);
    }
    

    선택한 요소에 trigger-enter 클래스를 추가하고, 150ms뒤에 trigger-enter-active 클래스를 추가해
    박스를 출력하고, 150ms 뒤에 내용을 추가함.
    동시에 백그라운드에 open 클래스를 추가함
    함수 내에서 지역변수를 생성하는데 이때 getBoundingClientRect는 요소의 크기를 잴 때 사용
    coords에 박스의 길이와, 위치를 입력하고 스타일과 효과를 적용함

  3. 마우스가 떠날 때의 함수를 생성

    function handleLeave() {
     this.classList.remove('trigger-enter', 'trigger-enter-active');
     background.classList.remove('open');
    }
    

    handleLeave에 선택한 것이 trigger-enter, trigger-enter-active 클래스를 지우고,
    background의 open 클래스를 지운다.

  4. 효과를 적용, 해제하는 함수 실행

    triggers.forEach(trigger => trigger.addEventListener('mouseenter', handleEnter));
    triggers.forEach(trigger => trigger.addEventListener('mouseleave', handleLeave));
    

    마우스를 올리고 내릴 때 효과를 해당하는 함수를 실행함

찾아본 내용, 알게된 내용들

contains - 안에 요소, 속성 등 내용을 확인해 참, 거짓을 반환하는 메소드


'개발 > JavaScript30' 카테고리의 다른 글

28. Video Speed Controller  (2) 2017.04.19
27. Click and Drag  (0) 2017.04.19
26. Stripe Follow Along Nav  (0) 2017.04.19
25. Event Capture, Propagation, Bubbling and Once  (0) 2017.04.19
24. Sticky Nav  (0) 2017.04.18
23. Speech Synthesis  (0) 2017.04.18

Event Capture, Propagation, Bubbling and Once

목표

이벤트 캡쳐 - 최상위 태그가 먼저 실행이 되고, 그 후에 점점 하위로 호출
이벤트 버블링 - 최하위 태그가 먼저 실행이 되고, 그 후에 점점 상위로 호출
을 구현해보고 알아봄.

기본 코드

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Understanding JavaScript's Capture</title>
</head>
<body class="bod">
  <div class="one">
    <div class="two">
      <div class="three">
      </div>
    </div>
  </div>
<button>button</button>
<script>

</script>
</body>
</html>

과정

  1. 상수 선언
  2. 현재의 클래스 값을 콘솔에 출력하는 함수 생성
  3. div, button에 대해 이벤트리스너 생성

코드 분석

  1. 상수 선언

    const divs = document.querySelectorAll('div');
    const button = document.querySelector('button');
    

    divbutton 태그를 각각의 변수에 담는다

  2. 현재의 클래스 값을 콘솔에 출력하는 함수 생성
    ```
    function logText(e) {
    console.log(this.classList.value);
    }
    이벤트가 발생하면 클래스의 값들을 콘솔에 출력

  3. div, button에 대해 이벤트리스너 생성

    divs.forEach(div => div.addEventListener('click',  logText, {
     capture: false,
     once: true
    }));
    button.addEventListener('click', () => {
     console.log('Click!!!');
    }, {
     once: true
    })
    

    div를 클릭시 logText를 최하위 태그부터 실행되며, 한번만 이벤트를 받게하고,
    button 클릭시 콘솔에 메세지가 나오도록 입력

찾아본 내용, 알게된 내용들

capture, once - DOM Listener로 capture는 최상단에서 설명한 capturing, bubbling을 선택하는 것이고, once는 이벤트를 한번만 실행하고 이벤트리스너를 삭제한다는 뜻

'개발 > JavaScript30' 카테고리의 다른 글

27. Click and Drag  (0) 2017.04.19
26. Stripe Follow Along Nav  (0) 2017.04.19
25. Event Capture, Propagation, Bubbling and Once  (0) 2017.04.19
24. Sticky Nav  (0) 2017.04.18
23. Speech Synthesis  (0) 2017.04.18
22. Following Along Link Highlight  (0) 2017.04.18

Sticky Nav

목표

요즘 웹 브라우저에 많이 쓰이는 상단에 네비게이션바 고정을 자바스크립트로 구현

기본 코드

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Sticky Nav</title>
  <link rel="stylesheet" href="style-START.css">
</head>
<body>
  <header>
    <h1>A story about getting lost.</h1>
  </header>
  <nav id="main">
    <ul>
      <li class="logo"><a href="#">LOST.</a></li>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Images</a></li>
      <li><a href="#">Locations</a></li>
      <li><a href="#">Maps</a></li>
    </ul>
  </nav>
  <div class="site-wrap">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio maiores adipisci quibusdam repudiandae dolor vero placeat esse sit! Quibusdam saepe aperiam explicabo placeat optio, consequuntur nihil voluptatibus expedita quia vero perferendis, deserunt et incidunt eveniet temporibus doloremque possimus facilis. Possimus labore, officia dolore! Eaque ratione saepe, alias harum laboriosam deserunt laudantium blanditiis eum explicabo placeat reiciendis labore iste sint. Consectetur expedita dignissimos, non quos distinctio, eos rerum facilis eligendi. Asperiores laudantium, rerum ratione consequatur, culpa consectetur possimus atque ab tempore illum non dolor nesciunt. Neque, rerum. A vel non incidunt, quod doloremque dignissimos necessitatibus aliquid laboriosam architecto at cupiditate commodi expedita in, quae blanditiis. Deserunt labore sequi, repellat laboriosam est, doloremque culpa reiciendis tempore excepturi. Enim nostrum fugit itaque vel corporis ullam sed tenetur ipsa qui rem quam error sint, libero. Laboriosam rem, ratione. Autem blanditiis laborum neque repudiandae quam, cumque, voluptate veritatis itaque, placeat veniam ad nisi. Expedita, laborum reprehenderit ratione soluta velit natus, odit mollitia. Corporis rerum minima fugiat in nostrum. Assumenda natus cupiditate hic quidem ex, quas, amet ipsum esse dolore facilis beatae maxime qui inventore, iste? Maiores dignissimos dolore culpa debitis voluptatem harum, excepturi enim reiciendis, tempora ab ipsam illum aspernatur quasi qui porro saepe iure sunt eligendi tenetur quaerat ducimus quas sequi omnis aperiam suscipit! Molestiae obcaecati officiis quo, ratione eveniet, provident pariatur. Veniam quasi expedita distinctio, itaque molestiae sequi, dolorum nisi repellendus quia facilis iusto dignissimos nam? Tenetur fugit quos autem nihil, perspiciatis expedita enim tempore, alias ab maiores quis necessitatibus distinctio molestias eum, quidem. Delectus impedit quidem laborum, fugit vel neque quo, ipsam, quasi aspernatur quas odio nihil? Veniam amet reiciendis blanditiis quis reprehenderit repudiandae neque, ab ducimus, odit excepturi voluptate saepe ipsam. Voluptatem eum error voluptas porro officiis, amet! Molestias, fugit, ut! Tempore non magnam, amet, facere ducimus accusantium eos veritatis neque.</p>

    <img src="http://unsplash.it/400/400" class="align-right slide-in">

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio maiores adipisci quibusdam repudiandae dolor vero placeat esse sit! Quibusdam saepe aperiam explicabo placeat optio, consequuntur nihil voluptatibus expedita quia vero perferendis, deserunt et incidunt eveniet temporibus doloremque possimus facilis. Possimus labore, officia dolore! Eaque ratione saepe, alias harum laboriosam deserunt laudantium blanditiis eum explicabo placeat reiciendis labore iste sint. Consectetur expedita dignissimos, non quos distinctio, eos rerum facilis eligendi. Asperiores laudantium, rerum ratione consequatur, culpa consectetur possimus atque ab tempore illum non dolor nesciunt. Neque, rerum. A vel non incidunt, quod doloremque dignissimos necessitatibus aliquid laboriosam architecto at cupiditate commodi expedita in, quae blanditiis. Deserunt labore sequi, repellat laboriosam est, doloremque culpa reiciendis tempore excepturi. Enim nostrum fugit itaque vel corporis ullam sed tenetur ipsa qui rem quam error sint, libero. Laboriosam rem, ratione. Autem blanditiis laborum neque repudiandae quam, cumque, voluptate veritatis itaque, placeat veniam ad nisi. Expedita, laborum reprehenderit ratione soluta velit natus, odit mollitia. Corporis rerum minima fugiat in nostrum. Assumenda natus cupiditate hic quidem ex, quas, amet ipsum esse dolore facilis beatae maxime qui inventore, iste? Maiores dignissimos dolore culpa debitis voluptatem harum, excepturi enim reiciendis, tempora ab ipsam illum aspernatur quasi qui porro saepe iure sunt eligendi tenetur quaerat ducimus quas sequi omnis aperiam suscipit! Molestiae obcaecati officiis quo, ratione eveniet, provident pariatur. Veniam quasi expedita distinctio, itaque molestiae sequi, dolorum nisi repellendus quia facilis iusto dignissimos nam? Tenetur fugit quos autem nihil, perspiciatis expedita enim tempore, alias ab maiores quis necessitatibus distinctio molestias eum, quidem. Delectus impedit quidem laborum, fugit vel neque quo, ipsam, quasi aspernatur quas odio nihil? Veniam amet reiciendis blanditiis quis reprehenderit repudiandae neque, ab ducimus, odit excepturi voluptate saepe ipsam. Voluptatem eum error voluptas porro officiis, amet! Molestias, fugit, ut! Tempore non magnam, amet, facere ducimus accusantium eos veritatis neque.</p>
  </div>
<script>
</script>
</body>
</html>

원래 쓸모없는 내용이 많지만 다 짤랐음, CSS속성도 따로 작성하지 않았음

과정

  1. 상수, 변수 생성
  2. 스크롤시 상단에 nav바를 고정하도록 함수 생성 및 실행

코드 분석

  1. 상수, 변수 생성

     const nav = document.querySelector('#main');
     let topOfNav = nav.offsetTop;
    

    nav에 id가 main인 태그를 담고, topOfNav에 nav태그의 상단 좌표값을 담음

  2. 스크롤시 상단에 nav바를 고정하도록 함수 생성 및 실행

     function fixNav() {
         if(window.scrollY >= topOfNav) {
             document.body.style.paddingTop = nav.offsetHeight + 'px';
             document.body.classList.add('fixed-nav');
         } else {    document.body.classList.remove('fixed-nav');
             document.body.style.paddingTop = 0;
         }
     }
     window.addEventListener('scroll', fixNav);
    

    fixNav에 스크롤을 nav바의 높이 이상으로 내리면 fixed-nav 클래스를 추가해 nav의 상단에 패딩을 줘서
    스크롤을 내려도 상단에 nav바가 고정되도록 함.
    그 이하만큼 스크롤한다면 fixed-nav 클래스를 삭제하고 패딩을 0으로 줌
    스크롤을할 때 fixNav 함수를 실행

찾아본 내용, 알게된 내용들

offset() - 문서에서 요소의 상대적인 위치를 알아낼 때 사용, 보통 nav바를 만들 때 사용

'개발 > JavaScript30' 카테고리의 다른 글

26. Stripe Follow Along Nav  (0) 2017.04.19
25. Event Capture, Propagation, Bubbling and Once  (0) 2017.04.19
24. Sticky Nav  (0) 2017.04.18
23. Speech Synthesis  (0) 2017.04.18
22. Following Along Link Highlight  (0) 2017.04.18
21. Geolocation  (0) 2017.04.17

Speech Synthsis

목표

자바스크립트 SpeechSynthesisUtterance API로 글을 읽어주는 도구 구현

기본 코드

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Speech Synthesis</title>
  <link href='https://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="style.css">
</head>
<body>

    <div class="voiceinator">

      <h1>The Voiceinator 5000</h1>

      <select name="voice" id="voices">
        <option value="">Select A Voice</option>
      </select>

      <label for="rate">Rate:</label>
      <input name="rate" type="range" min="0" max="3" value="1" step="0.1">

      <label for="pitch">Pitch:</label>

      <input name="pitch" type="range" min="0" max="2" step="0.1">
      <textarea name="text">Hello! I love JavaScript 👍</textarea>
      <button id="stop">Stop!</button>
      <button id="speak">Speak</button>
    </div>
<script>
</script>
</body>
</html>

과정

  1. 사용 가능한 목소리 리스트 출력
  2. 재생, 정지 버튼 생성
  3. 목소리 설정
  4. 옵션 설정

코드 분석

  const msg = new SpeechSynthesisUtterance();
  let voices = [];
  const voicesDropdown = document.querySelector('[name="voice"]');
  const options = document.querySelectorAll('[type="range"], [name="text"]');
  const speakButton = document.querySelector('#speak');
  const stopButton = document.querySelector('#stop');
msg.text = document.querySelector('[name="text"]).value;

기능을 구현하기 위한 변수, 상수 설정

  1. 사용 가능한 목소리 리스트 출력

    function populateVoices() {
     voices = this.getVoices();
     voicesDropdown.innerHTML = voices
         .filter(voice => voice.lang.includes('en'))
         .map(voice => `<option value="${voice.name}">${voice.name} (${voice.lang})</option>`)
         .join('');
    }
    speechSynthesis.addEventListener('voiceschanged', populateVoices);
    

    voices에 사용 가능한 모든 목소리들을 담고, en즉 영어를 지원하는 목소리들만 option으로 걸러내 HTML에 출력하는 함수 populateVoices에 담음
    getVoices가 변경되면 populateVoices를 실행

  2. 재생, 정지 버튼 생성

    function toggle(startOver =true) {
     speechSynthesis.cancel();
     if(startOver) {
         speechSynthesis.speak(msg);
     }
    }
    speakButton.addEventListener('click', toggle);
    stopButton.addEventListener('click', () => toggle(false));
    

    toggle함수로 메세지를 읽을 수 있도록 함. 이때 이미 speechSynthesis가 실행, 즉 음성이 재생중이면 종료하고 재시작함.
    speak 버튼으로 실행, stop 버튼으로 정지함.

  3. 목소리 설정

    function setVoice() {
     msg.voice = voices.find(voice => voice.name === this.value);
     toggle();
    }
    voicesDropdown.addEventListener('change', setVoice)
    

    setVoice에 메세지의 목소리를 선택한 이름에 따라서 선택할 수 있도록 함수 생성.
    목소리 선택 후에 자동으로 toggle() 함수 실행으로 글을 읽을 수 있도록 함

  4. 옵션 설정

     function setOption() {
         msg[this.name] = thi s.value;
         toggle();
     }
     options.forEach(option => option.addEventListener('change', setOption));
    

    options 레인지바에서 값을 조정하면 바뀐 값으로 글을 한번 읽어줌

찾아본 내용, 알게된 내용들

이번꺼 역시도 “별게 다되네” 라는 생각이 들지만, 새로운 API를 알게된 것 이외에 나왔던 함수, 이벤트들이 반복되어 익숙하게 다룰 수 있도록 하는것이 중요함

'개발 > JavaScript30' 카테고리의 다른 글

25. Event Capture, Propagation, Bubbling and Once  (0) 2017.04.19
24. Sticky Nav  (0) 2017.04.18
23. Speech Synthesis  (0) 2017.04.18
22. Following Along Link Highlight  (0) 2017.04.18
21. Geolocation  (0) 2017.04.17
20. Native Speech Recognition  (1) 2017.04.17

Follow Along Link Highlighter

목표

표시해놓은 링크에 포인터가 올라가면 효과를 주는 방법을 알아봄.

기본 코드

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>👀👀👀Follow Along Nav</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

    <nav>
      <ul class="menu">
        <li><a href="">Home</a></li>
        <li><a href="">Order Status</a></li>
        <li><a href="">Tweets</a></li>
        <li><a href="">Read Our History</a></li>
        <li><a href="">Contact Us</a></li>
      </ul>
    </nav>

    <div class="wrapper">
      <p>Lorem ipsum dolor sit amet, <a href="">consectetur</a> adipisicing elit. Est <a href="">explicabo</a> unde natus necessitatibus esse obcaecati distinctio, aut itaque, qui vitae!</p>
      <p>Aspernatur sapiente quae sint <a href="">soluta</a> modi, atque praesentium laborum pariatur earum <a href="">quaerat</a> cupiditate consequuntur facilis ullam dignissimos, aperiam quam veniam.</p>
      <p>Cum ipsam quod, incidunt sit ex <a href="">tempore</a> placeat maxime <a href="">corrupti</a> possimus <a href="">veritatis</a> ipsum fugit recusandae est doloremque? Hic, <a href="">quibusdam</a>, nulla.</p>
      <p>Esse quibusdam, ad, ducimus cupiditate <a href="">nulla</a>, quae magni odit <a href="">totam</a> ut consequatur eveniet sunt quam provident sapiente dicta neque quod.</p>
  <script>
  </script>
</body>
</html>

과정

  1. 상수, 태그 생성
  2. 효과 적용을 위한 함수 생성
  3. 효과 적용

코드 분석

  1. 상수, 태그 생성

    const triggers = document.querySelectorAll('a');
    const hightlight = document.createElement('span');
    highlight.classList.add('highlight');
    document.body.appendChild(highlight);
    

    a태그를 triggers에 담고. highlight로 새로운 span태그를 만들어 highlight클래스를 붙여 body의 최하단에 붙임.

  2. 효과 적용을 위한 함수 생성

    function highlightLink() {
     const linkCoords = this.getBoundingClientRect();
     console.log(linkCoords);
     const coords = {
         width: linkCoords.width,
         height: linkCoords.height,
         top: linkCoords.top + window.scrollYm
         left: linkCoords.left + window.scrollX
     };
     highlight.style.width = `${coords.width}px`;
     highlight.style.height = `${coords.height}px`;
     highlight.style.transform = `translate(${coords.left}px, ${coords.top}px)`;
    }
    

    coords로 현재 태그의 길이,높이, 좌표값을 알아 낸 후에 highlight 클래스에 적용된 효과를 그대로 적용해줌.

  3. 효과 적용

    triggers.forEach(a => a.addEventListener('mouseenter', hightlightLink));
    

    각각의 a태그에 대해 마우스가 올라갔을 때 highlightLink를 실행

찾아본 내용, 알게된 내용들

appenChild() - 한 노드를 특정 부모노드의 자식 노드 리스트중 마지막에 삽입
getBoundingClientRect() - 요소의 사이즈를 설정하는 함수

'개발 > JavaScript30' 카테고리의 다른 글

24. Sticky Nav  (0) 2017.04.18
23. Speech Synthesis  (0) 2017.04.18
22. Following Along Link Highlight  (0) 2017.04.18
21. Geolocation  (0) 2017.04.17
20. Native Speech Recognition  (1) 2017.04.17
19. Webcam Fun  (0) 2017.04.17

Geolocation

목표

나침반과 현재속도를 출력

기본 코드

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <meta name="viewport" content="width=device-width">
</head>
<body>
  <h1 class="speed">
    <span class="speed-value">0</span>
    <span class="units">KM/H</span>
  </h1>

  <style>
    html {
      font-size: 100px;
    }
    body {
      margin: 0;
      font-family: sans-serif;
      min-height:100vh;
      display:flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      background:
        radial-gradient(black 15%, transparent 16%) 0 0,
        radial-gradient(black 15%, transparent 16%) 8px 8px,
        radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px,
        radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px;
      background-color:#282828;
      background-size:16px 16px;
      background-attachment: fixed;
    }

    .arrow {
      width:250px;
      overflow: hidden;
      transition: all 0.2s;
      transform:rotate(0deg);
      display: inline-block;
    }

    h1 {
      color:white;
      font-weight: 100;
      font-size: 60px;
      display:flex;
      align-items: center;
    }

    .units {
      font-size: 15px;
    }
    /*Compass: https://thenounproject.com/search/?q=compass&i=592352*/
  </style>
  <script>
  </script>
</body>
</html>

과정

  1. 상수 선언
  2. 현재위치, 속도 값 얻는 함수 생성 및 출력

코드 분석

  1. 상수 선언

     const arrow = document.querySelector('.arrow');
     const speed = document.querySelector('.speed-value');
    

    arrowspeed에 요소들을 선택

  2. 현재위치, 속도 값 얻는 함수 생성 및 출력

    navigator.geolocation.watchPosition((data) => {
         console.log(data);
         speed.textContent = data.coords.speed;
         arrow.style.transform = `rotate(${data.coords.heading}deg)`;
     }, (err) => {
         console.error(err);
     });
    

    navigator.geolocation으로 geolocation API를 사용 가능하며 watchPosition으로 현재 위치를 식별하는데 사용되며 data.coords.speed로 현재 속도를 알아내 HTML 요소에 바인딩함

찾아본 내용, 알게된 내용들

geolocation API - 웹 어플리케이션에서 사용자의 위치 정보를 받아 제공, 나침반이나 속도계를 만들 때 사용할 수 있음

'개발 > JavaScript30' 카테고리의 다른 글

23. Speech Synthesis  (0) 2017.04.18
22. Following Along Link Highlight  (0) 2017.04.18
21. Geolocation  (0) 2017.04.17
20. Native Speech Recognition  (1) 2017.04.17
19. Webcam Fun  (0) 2017.04.17
18. Adding Up Times with Reduce  (0) 2017.04.16

데일리 후보란

대선후보들의 행선지를 쉽게 알아볼 수 있도록 타임라인에 표시 해놓은 웹사이트
데일리 후보 링크

후기

반년넘게 개발 공부하면서 제대로 프로젝트를 마쳐본적이 없는데, 우연히 멋사를 하면서 이런 기회가 생겨 중간합류해서 팀원들과 3일동안 같이 머리 싸매서 만들었다.

“정치”의 “정” 자도 모르지만 일단 프로젝트라길래 하고 싶었음.

이번 프로젝트에서 전반적인 프론트 작업을 맡아 했는데, 결과물을 막상 보니까 디자이너의 부재를 크게 실감했다..주륵

그래도 3일정도에 기능구현이나 전반적인 시스템자체는 다른분들이 맡아서 잘해주셔서 구현하려고 했던 기능들은 잘 돌아가는것 같아서 그건 그나마 다행인듯..ㅋㅎ

의견이 갈리는 부분에서 맞춰가고 각자 맡은 역할에서 열심히 코드짜고 합치는 과정 하나하나가 생각보다 더 재밌었던것 같고 기회가 되면 또 하고 싶다. 대형 프로젝트면 더 재미있을 듯 함!

셀프 피드백

  1. 디자이너가 있었으면 어땠을까
    확실히 지금보다 아름답고 정교한 결과물이 나오지 않았을까 생각해봄. 프로젝트 하기 전까지는 “디자이너가 뭐가 중요하겠어”라는 위험한 생각을 했는데 막상 해보니 부재가 아주 크게 느껴졌음.

  2. 깃허브를 좀 잘 다뤘으면 파일 관리가 더 쉽지 않았을까
    내가 혼자 할때의 명령어밖에 모르고 브랜치, 머지같은 협업할 때 필요한 명령어들을 제대로 사용할 줄을 모르니까 아주 고전적인 압축>파일전송으로 코드를 나눴는데 자괴감이..후~

  3. 페이지를 짜는 도중에 시안이 너무 많이 수정돼서 시간이 조금 더 걸렸다는 점?
    처음 설계할 때 조금더 정교하게 토의하면서 같이 작성했다면 더 좋은 결과물을 더 빨리 뽑아냈을 것 같다. 물론 이번 프로젝트는 짧은 기간에 결과물을 만들어 내야했기에 아쉬웠던점은 있지만, 시간에 대비해서는 양질의 기획서였던것 같다.

  4. 호스팅 방법을 좀 알아볼 필요가 있음
    직접 서버에 띄워본적도 없고 AWS도 쓸줄 모르는데 그냥 도메인 사서 AWS에 올리면 되지 하고 생각만 했는데 도메인사는 사이트도 엄청 많고, 찾아보니까 속도도 제각각이라하고.. 모르는부분들을 좀 찾아서 공부할 필요가 있을 것 같음

  5. CSS 공부
    해도해도 내가 원하는 포지션이 안나오는지 당최 이해할 수가 없다. 아주 스트레스 공부가 더 필요함을 다시 느낌 flex, media query 좀 자세히 알아야 할 것 같다

그래도 완성하고나니까 뿌듯하다 흐흐
가셔서 댓글한번씩만.. 쿠흠..


'개발 > 기타' 카테고리의 다른 글

Coin Push 프로젝트  (0) 2018.01.29
티스토리 블로그 폰트 바꾸기  (5) 2017.10.14
[git]Git 간편 사용 설명서  (0) 2017.05.27
Git, Github 10분만에 익히기  (0) 2017.04.25
"데일리후보" 단기 프로젝트 완성  (3) 2017.04.17
HTML,CSS용 VIM(8.0)세팅하기  (0) 2017.02.21
  1. 홍지환 2017.04.17 18:31

    W😮W

  2. BlogIcon takeu takeU 2017.04.18 15:14 신고

    ㅋㅋㅋㅋㅋ아놔

  3. 홍지환 2017.04.19 23:15

    휼륭합니다

+ Recent posts