chochoq / pageTest

(html,css,js) 1만시간의 법칙 클론코딩

서비스설명

간단한 페이지로 1만시간을 계산해줍니다.

🛠기술스택🛠

• HTML
• CSS
• JavaScript

기술 구현 사항

• index.html

  • meta tag

    //index.html 
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

• 10000hours.js

  • 모달창 열고 닫기

    //10000hours.js
    function openModal() {
        modal.style.display = 'flex';
    }
    
    function closeModal() {
        modal.style.display = 'none';
    }
    
    window.onclick = function (e) {
        if (e.target == modal) {
            closeModal();
        }
    }

  • 주소복사(공유하기)

    //10000hours.js
    function copyUrl() {
        let url = window.location.href;
        let temp = document.createElement('input');
    
        document.body.appendChild(temp);
        temp.value = url;
        temp.select();
        document.execCommand("copy");
        document.body.removeChild(temp);
    
        alert('주소가 복사되었습니다');
    }

• 10000hours.css

프로젝트 후기

ID # , Class . 을 항상 깜박하는데 자주 사용해서 한동안은 잊지않을 것 같다.

setTimeout 같은 비동기 작업은 아직 헷갈린다. 더 노력할 것.

기본적인 html, css, js만 사용해서 하드코딩으로 만들었는데 id, class들이 많아서 연결이 헷갈렸다. 하나하나 작동이 되는지 확인하며 작업함.

새롭게 배운 것

github page로 호스팅

폰트를 자주 사용하지 않는다면 그 폰트로 만들어서 img로 만들어서 넣는것이 용량적으로 추천함(폰트 용량이 의외로 크다)