[카테고리:] 미분류

웹 UI 라이브러리인 GWC에서 제공하는 Switch 컴포넌트에 대한 예제 코드입니다.

먼저 DOM 구성은 다음과 같습니다.

그리고 CSS 구성은 다음과 같구요.

.center {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 3em;
}

#switch1 {
    margin-right: 5em;
}

js 코드는 다음과 같습니다.

window.onload = () => {
    const switch1 = document.querySelector("#switch1");
    switch1.addEventListener("change", (event) => {
        if(event.target.on) {
            switch1.label = "맑은 날~";
        } else {
            switch1.label = "비가 오나요?";
        }
    });

    const switch2 = document.querySelector("#switch2");

    document.querySelector("#button1").addEventListener("click", () => {
        alert(`switch1: ${switch1.on} / switch2: ${switch2.on}`);
    });

    document.querySelector("#button2").addEventListener("click", () => {
        switch1.on = !switch1.on;
    });

    document.querySelector("#button3").addEventListener("click", () => {
        switch2.disabled =  !switch2.disabled;
    });
};

실행 결과는 다음과 같습니다.

웹 UI 라이브러리인 GWC에서 제공하는 Button 컴포넌트에 대한 예제 코드입니다.

먼저 DOM 구성은 다음과 같습니다.

그리고 CSS 구성은 다음과 같구요.

.center {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    gap: 1em;
}

js 코드는 다음과 같습니다.

window.onload = () => {
    const button1 = document.querySelector("#button1");
    button1.addEventListener("click", () => { 
        alert("안녕하세요~! GWC 라이브러리입니다.") 
    });

    const button2 = document.querySelector("#button2");
    button2.addEventListener("click", () => {
        if(button2.title === "버튼2") button2.title = "Button2";
        else button2.title = "버튼2";
    });

    const button4 = document.querySelector("#button4");
    button4.addEventListener("click", () => {
        alert("버튼4를 클릭했습니다.");
    });

    const button3 = document.querySelector("#button3");
    button3.addEventListener("click", () => {
        button4.disabled = !button4.disabled;
    });
};

실행 결과는 다음과 같습니다.