21.08.24

🌱 Repositories

💻 PROJECT

Twitch website colone coding

1. Video section

.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

3. footer

Responsive personal portfolio website

1. Services

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

// 수정 전
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');
            }
        });
    });
});

💡 REVIEW