21.08.24

🌱 Repositories

https://github.com/pyeonne/daegu-ai-school

https://github.com/pyeonne/portfolio

💻 PROJECT

Twitch website colone coding

1. Video section

video sectionが複数追加されました.

タイトルを使用<span>ラベルを使用して特定の部分にフォント色を適用

マウスカーソルを画像に合わせると、右対角線のアニメーション効果が得られます.

.video-section .video-wrap .image-wrap {
    position: relative;
    width: 333px;
    height: 186px;
    background-color: #9147ff;
}

.video-section .video-wrap .image-wrap img {
    width: 100%;
    height: 100%;
    transition: transform 0.15s linear;
}

.video-section .video-wrap .image-wrap:hover img {
    transform: translate(10px, -10px);
}

2. Category section

video sectionの構造はcategory section構造に変更されました.

3. footer

テキスト要素はflexを使用して中央揃えされます.

Responsive personal portfolio website

1. Services

dispaly: grid;は.service__contentが配置されている.

content領域にマウスを置くと、box-shadowプロパティを変更できるアニメーションが追加されます.

.serveices__buttonマウスを離すと、x軸方向に移動するアイコンのアニメーションが追加されます.

viewmoreボタンをクリックして.services__modalウィンドウをコンテンツに表示し、closeボタンをクリックしてウィンドウを再び消去します.

const modalViews = document.querySelectorAll('.services__modal');
const modalBtns = document.querySelectorAll('.services__button');
const modalCloses = document.querySelectorAll('.services__modal-close');

let modal = function (modalClick) {
    modalViews[modalClick].classList.add('active-modal');
};

modalBtns.forEach((modalBtn, i) => {
    modalBtn.addEventListener('click', () => {
        modal(i);
    });
});

modalCloses.forEach(modalClose => {
    modalClose.addEventListener('click', () => {
        modalViews.forEach(modalView => {
            modalView.classList.remove('active-modal');
        });
    });
});

まだ理解できない部分があるので少し気分が悪いです上のコードが本当に一番いいか考えてみましょう.

🤔 ISSUE

JS:検証ラベルボタンエラー

// 수정 전
const tabs = document.querySelectorAll('[data-target]');
const tabContents = document.querySelectorAll('[data-content]');

tabs.forEach(tab => {
    tab.addEventListener('click', () => {
        const target = document.querySelector(tab.dataset.target);

        tabContents.forEach(tabContent => {
            tabContent.classList.remove('qualification__active');
        });
        target.classList.add('qualification__active');

        tabs.forEach(tab => {
            tab.classList.toggle('qualification__active');
        });
    });
});

// 수정 후
const qualificationTabs = document.querySelector('.qualification__tabs');
const qualificationContent = document.querySelectorAll('.qualification__content');

qualificationTabs.addEventListener('click', event => {
    const filter = event.target.dataset.filter || event.target.parentNode.dataset.filter;
    if (filter == null) {
        return;
    }

    const active = document.querySelector('.qualification__button.qualification__active');
    active.classList.remove('qualification__active');
    const target = event.target.nodeName === 'BUTTON' ? event.target : event.target.parentNode;
    target.classList.add('qualification__active');

    setTimeout(() => {
        qualificationContent.forEach(content => {
            if (filter === content.dataset.type) {
                content.classList.add('qualification__active');
            } else {
                content.classList.remove('qualification__active');
            }
        });
    });
});

以前にポートフォリオのクローンコードを作成したJSファイルを参照して、コードを書き直します.ボタンをクリックしたときのターゲットを明確に指定し、イベントのdata-filterとコンテンツのdata-typeが一致したときにのみquilification activeクラスを追加します.すると、再度ボタンをクリックすると、スタイルが正しく適用されないというエラーはなく、操作が正常であることが確認された.

💡 REVIEW

tビットクローンコードはこのまま終了することはできず、復習して再作成する必要がある.

PortfolioModal機能JavaScriptコードには読めないところがたくさんあります.さらに仕事の原理を学ぶ必要があると思います.