[클론코딩/코코아톡] 노마드 코더 코코아톡 클론코딩 #7 수정 및 추가 기능 구현

navigation-bar 아이콘 색 변경

- 화면에 해당하는 navigatoin-bar 아이콘 색 변경.

(nav-bar.css)

...

.nav__link {
    position: relative;
    color: rgba(0, 0, 0, 0.3)
}

.nav__link--click {
    color: #2e363e;
}

- 해당하는 링크에 nav__link--click 클래스 추가.

 

Chats Screen - header 아이콘 변경

(chats.html)

    <header class="screen-header">
        <h1 class="screen-header__title">Chats</h1>
        <div class="screen-header__icons">
            <span><i class="fas fa-magnifying-glass fa-lg"></i></span>
            <span><i class="far fa-plus-square fa-lg"></i></span>
            <span><i class="far fa-comments fa-lg"></i></span>
            <span><i class="fa-solid fa-gear fa-lg"></i></span>
        </div>
    </header>

 

Chats Screen - 채팅방 추가

(chats.html)

    <!-- User Component -->
    <main class="main-screen">
        <a href="chat.html">
            <div class="user-component">
                <div class="user-component__column">
                    <img src="img/user_friends_hani.jpg" class="user-component__avatar"/>
                    <div class="user-component__text">
                        <h4 class="user-component__title user-component__title-sm">Hani</h4>
                        <h6 class="user-component__subtitle">Good Day~~</h6>
                    </div>
                </div>
                <div class="user-component__column">
                    <span class="user-component__time">10:04</span>
                    <div class="badge">1</div>
                </div>
            </div>
        </a>

        <a href="chat.html">
            <div class="user-component">
                <div class="user-component__column">
                    <img src="img/user_friends_wendy.jpg" class="user-component__avatar"/>
                    <div class="user-component__text">
                        <h4 class="user-component__title user-component__title-sm">Wendy</h4>
                        <h6 class="user-component__subtitle">Thanks!<i class="far fa-grin-hearts"></i></h6>
                    </div>
                </div>
                <div class="user-component__column">
                    <span class="user-component__time">08:08</span>
                </div>
            </div>
        </a>
    </main>

 

Chat Screen - 채팅 내용 추가

- 채팅 내용 추가.
(chat.html)

    <!-- Main Screen -->
    <main class="main-screen main-chat">
        <!-- Time Stamp -->
        <div class="chat__timestamp">
            Monday, June 13, 2022
        </div>

        <!-- Incoming Message -->
        <div class="message-row">
            <img src="img/user_friends_hani.jpg">
            <div class="message-row__content">
                <span class="message__author">Hani</span>
                <div class="message__info">
                    <span class="message__bublble">Hello~</span>
                    <span class="message__time">10:04</span>
                </div>
            </div>
        </div>

        <!-- Sending Message -->
        <div class="message-row message-row--own">
            <div class="message-row__content">
                <div class="message__info">
                    <span class="message__bublble">Hi!</span>
                    <span class="message__time">10:04</span>
                </div>
            </div>
        </div>

        <!-- Incoming Message -->
        <div class="message-row">
            <img src="img/user_friends_hani.jpg">
            <div class="message-row__content">
                <span class="message__author">Hani</span>
                <div class="message__info">
                    <span class="message__bublble">Good Day~~</span>
                    <span class="message__time">10:04</span>
                </div>
            </div>
        </div>
    </main>

 

Chat Screen - 채팅 확인 안했을 때, 숫자 1 추가

(chat2.html)

    <!-- Main Screen -->
    <main class="main-screen main-chat">
        <!-- Time Stamp -->
        <div class="chat__timestamp">
            Monday, June 13, 2022
        </div>

        <!-- Incoming Message -->
        <div class="message-row">
            <img src="img/user_friends_wendy.jpg">
            <div class="message-row__content">
                <span class="message__author">Wendy</span>
                <div class="message__info">
                    <span class="message__bublble">Congraulation~!</span>
                    <span class="message__time">08:08</span>
                </div>
            </div>
        </div>

        <!-- Sending Message -->
        <div class="message-row message-row--own">
            <div class="message-row__content">
                <div class="message__info">
                    <span class="message__bublble">Thanks! <i class="far fa-grin-hearts"></i></span>
                    <div class="message__check-and-time">
                        <span class="message__check">1</span>
                        <span class="message__time">08:08</span>
                    </div>
                </div>
            </div>
        </div>
    </main>

(chat.css)

...

.message__check-and-time {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.message__check {
    color: var(--yellow);
}

.message__time {
    opacity: 0.9;
}