[Day2]간단한 조건문 로직만들기

노마더 코더의 바닐라 JS로 크롬 앱 만들기를 기초로 JS를 배우고 있다!

Day01 -> 자바스크립트 문법

Day02 -> 조건문을 이용해 간단한 로직 짜기

<!DOCTYPE html>
<html>
    <head>
        <style>
            html, body, ul {
                margin: 0;
            }

            #title {
                background-color: cornflowerblue;
                height: 100px;
                width: 500px;
                font-size: 4rem;
                
            }
            
            .titlehead {
                height: 100vh;
                background-color: darkgreen;
            }

        </style>
        
    </head>
    <body>
        <header>
            <div class="titlehead">
                <div id="title">내용</div>
            </div>
        </header>
        <script>
            const title = document.getElementById('title');
            const BASIC_COLOR = '#006400';
            const CHANGE_COLOR = '#b3ffb3';
          
          	// 이벤트 핸들러 함수
            function HandleClick() {
                const currentColor = title.style.color;
                console.log(title.style.color)
                if(currentColor === BASIC_COLOR) {
                    title.style.color = CHANGE_COLOR;
                } else {
                    title.style.color = CHANGE_COLOR;
                }
            }
			
          	// 실행 함수
            function init() {
                title.style.color = BASIC_COLOR;
                // title.addEventListener('click', HandleClick);
                title.addEventListener('mouseleave', HandleClick);
                
            }
          
            init(); // 실행
        </script>   
    </body>
</html>

References

노마드 코더 : 강의를 듣고 정리한 자료입니다.
🎈2020.11.28
🎈정리 : song, VSCode

Author And Source

이 문제에 관하여([Day2]간단한 조건문 로직만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@withcolinsong/Day2간단한-조건문-로직만들기

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

[Day2]간단한 조건문 로직만들기

References

Author And Source

좋은 웹페이지 즐겨찾기