- 다크모드/ 일반모드변경, 검색창 구현, 바로가기연결, 바로가기 추가

- index.html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Google</title>
    <link rel="stylesheet" href="/style.css">
    <script defer src="/index.js"></script>
</head>
<body class="body-background">
    <header>
        <nav class="header-nav">
            <ul class = "header-nav-list-wrapper">
                <li>Gmail</li>
                <li>Images</li>
                <li><button class="toggle-button">다크모드</button></li>
            </ul>
        </nav>
    </header>

    <main class="main-container">
        <h1><img class="image-logo" src="/images/logo.png" alt="logo 이미지"></h1>

        <div class="search-container">
            <input class ="search-input" type="text" placeholder="Google 검색 또는 url입력">
            <img class="search-icon" src="/images/search.png" alt="검색 이미지">
        </div>

        <section class="bookmark-section">
            <div class="bookmark-wrapper">
                <a href="https://www.naver.com" target="_blank" class="bookmark-item">
                    <div class="img-icon-wrapper">
                        <img src="/images/naver.png" alt="Naver">
                    </div>

                    <div class="bookmark-text">naver</div>
                </a>

                <a href="https://www.google.com/" target="_blank" class="bookmark-item">
                    <div class="img-icon-wrapper">
                        <img src="/images/google.png" alt="google">
                    </div>
                    <div class="bookmark-text">google</div>
                </a>

                <a href="https://edu.ssafy.com/edu/main/index.do" target="_blank" class="bookmark-item">
                    <div class="img-icon-wrapper">
                        <img src="/images/ssafy.png" alt="ssafy">
                    </div>
                    <div class="bookmark-text">ssafy</div>
                </a>

                <div class="bookmark-plus">
                    <div class="img-icon-wrapper">+</div>
                    <div class="bookmark-text">추가하기</div>
                </div>
            </div>
        </section>
        
    </main>


</body>
</html>

 

- style.css

*{
    box-sizing: border-box;
}


/* toggle이용 다크모드 구현시 사용 */
.body-background{
    background: #fff;
}

/*/////////////// 헤더 부분 /////////////*/

.header-nav{
    display: flex;
}

.header-nav-list-wrapper{
    list-style: none;
    padding: 0;
    display: flex;
    margin-left: auto;
    align-items: center;
}

.header-nav-list-wrapper li{
    margin-left: 10px;
}

.toggle-button{
    background: black;
    color: white;
    border: 1px solid #eee;
    /* #eee 엄청흐린색 = 있는듯~없는듯~ */
    padding: 5px 8px;
    border-radius: 10px;
    cursor: pointer;
}

/* ////////////////메인 부분//////////////// */

.main-container{
    /*  */
    text-align:center;
    /*  */
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.image-logo{
    width: 272px;
}

/* 검색 부분 */
.search-container{
    position: relative;
    margin: 0px auto;
    margin-top: 50px;
}

.search-icon{
    position: absolute;
    top:13px;
    left: 10px;
    width: 17px;
}

.search-input{
    width: 100%;
    height: 44px;
    padding-left: 40px;
    border-radius: 50px;
    border: 1px solid #dddddd;
}

/* ////////////북마크//////////////////// */

.bookmark-section{
    margin-top: 40px;
}

.bookmark-wrapper{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 600px;
    min-width: 430px;
}

.bookmark-item{
    margin-top: 30px;
    width: 112px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-decoration: none;
}

.bookmark-item:hover{
    opacity: 0.5;
    cursor: pointer;
}

.img-icon-wrapper{
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #f2f3f5;
    font-size: 24px;
}

.img-icon-wrapper > img{
    width: 60%;
    height: 60%;
}

.bookmark-plus{
    margin-top: 30px;
    width: 112px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-decoration: none;
}

.bookmark-text{
    margin-top: 5px;
    color: #000;
}

/* 북마크 끝 */

/* 클릭이벤트 발생시, 다크보드를 위해 CSS 미리 정의 */

.toggle-button-darkmode{
    background-color: #fff;
    color: black;
}

/* toggle이용 다크모드 구현시 사용 */
.body-background-darkmode{
    background: #000;
}

.text-darkmode{
    color: #fff;
}

.img-icon-wrapper-darkmode{
    background-color: #fff;
}

 

- index.js

let toggleButton = document.querySelector(".toggle-button");
let bodyBackground = document.querySelector(".body-background");
let headerNav = document.querySelector(".header-nav-list-wrapper");

let bookmarkTexts = document.querySelectorAll(".bookmark-text");
let imgIconWrappers = document.querySelectorAll(".img-icon-wrapper");

let searchInput = document.querySelector(".search-input")

toggleButton.addEventListener('click', function(){
    toggleButton.innerHTML = "다크모드";

    toggleButton.classList.toggle("toggle-button-darkmode");
    bodyBackground.classList.toggle("body-background-darkmode");

    if(toggleButton.classList.contains("toggle-button-darkmode")){
        toggleButton.innerHTML = "일반모드";
    }

    headerNav.classList.toggle("text-darkmode");

    for (let i=0; i<bookmarkTexts.length; i++){
        bookmarkTexts[i].classList.toggle("text-darkmode")
    }
    
    for (let i=0; i<imgIconWrappers.length; i++){
        imgIconWrappers[i].classList.toggle("img-icon-wrapper-darkmode")
    }
})

searchInput.addEventListener('keyup', function(e){
    if(e.code === "Enter"){
        if(e.target.value === ""){
            alert("검색어를 입력하지 않으셨습니다.");
            return;
        }
        alert(e.target.value + "검색하셨습니다.");
        window.open(`https://www.google.com/search?q=${e.target.value}`, "_blank")
    }
})

const bookmarkPlus = document.querySelector(".bookmark-plus")

bookmarkPlus.addEventListener("click", function(){
    const bookmarkItem = document.querySelectorAll(".bookmark-item");
    //console.log(bookmarkItem);
    const item = bookmarkItem[bookmarkItem.length -1];
    const clone = item.cloneNode(true);
    item.after(clone);
})

google.zip
0.12MB

'WEB > Javascript' 카테고리의 다른 글

[21.08.11] 비동기 프로그래밍2  (0) 2021.08.11
[21.08.10] 비동기 프로그래밍1  (0) 2021.08.10
[21.07.21] Javascript 실습 - 영화 정보 수집  (0) 2021.07.21
[21.07.20] Javascript기본  (0) 2021.07.21

+ Recent posts

티스토리툴바