2학년/멋사

js_이벤트 실습_덜 된 코드...+ 완성!

즈_말 2023. 4. 6. 18:24

버블링 원 누르면 저 알림이뜨고

원 x 겉 네모 누르면 

확인 누르면 저 메시지 창 그대로 펑 뜨고 취소누르면 암것도 안 뜨게 끔 하는 step1. 

그리고

신호바꾸기 클릭 시 

신호바꾸기 버튼 > 실행중 text

그린 꺼짐 , 노란색 켜짐 > 3초후 > 

노란색 쩌짐 레드 켜짐 실행중 text 신호바꾸기 로 유지

되는 step2

 

결론부터 말하면

엄청어렵다!!

 

1. 나는 이제는 이전에 썻던 거 보고 쓰지말고 css연결 js연결쯤은 안 보고 하자 ...명령어 앞으로 많이 쓸건데 !

2.step2 알고리즘 생각
      1. 신호바꾸기 버튼을 클릭> 실행 중 표시> 다시 신호바꾸기 버튼으로
2. box.addEvent('클릭시' ()=>{
  신호바꾸기btn > 실행중
  초록원 끄기,노란원 켜기(z index변경 )
  몇초 기다리기
  실 행중btn >신호바꾸기
  노란원끄기, 빨간 원 켜기(z index변경)
  만약 빨간 원이 켜져있따{
  초록원 켜져있을때의 색을 반대로 해서 그대로 
   }
3. step2 이슈
   1. css진짜 맘에안 듬 뭘 하면 다른게 이상해지고 그걸 곷미ㅕㄴ 또 다른게 이상해지고,.. 그래서 진짜 타협해서 신호등          위  아래 여백 불편한 것 + 실행중 옆에 못 가고 밑에 두자로 타협 ㅎㅎㅎㅎ
   2. 위 로직 말고 스위치 써서 신호바꾸기 btn이 실행중이면 노란불 무조건 켜게 하고 빨초 구분은 temp써서 저장후그거          반대로 하게끔해야겠다 생각
    3. 신호바꾸기 버튼만 1시간 했다 ㅎㅎ; setTimout 제대로 알았음.!

 

진짜 문제는 신호등 light부분;;

저렇게 하면 일단 안된다.... 3시간째..... 왜 안되지 .....?이론상 되야하는 거 아니냐 !

 

진짜진짜 이거 왜안됨?!!!!!!?!??!??!?!??!

 

 

왜 안되는지는 모르겠다만,,,동시에 돌아가려면...뭔갈 잘못했었다...

그래도 멋사 강의자분 코드 따라하면서 하니까 다 하긴 했는데.....

오늘도 멋진 클론코딩 했씁니다

 

<!DOCTYPE html>
<html lang="en">
<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>안녕하세요</title>
    <link rel ="stylesheet" href="./index.css">
    <script src="./index.js" defer></script>
</head>
<body>
    <div class="wrap">
        <div class="page1">

            <div class="step1">

                <h1>STEP1</h1>
                <div class="content">
                    <div class="emergencyBtn">버블링</div>
                </div>

            </div>

            <div class="Step2">
                <h1>STEP2</h1>
                <div class="traffic">
                    <div class ="trafficLight">
                        <!-- 사용자 지정 속성  data-자기지정 이름 하면 됨. js코드를 보면 왜 필요한 지 알 수 있음-->
                        <!-- 클래스에 띄어쓰기 하면 여러개 지정 가능 -->
                        <div data-light ="green" class="light green lightActive"></div>
                        <div data-light="yellow" class="light yellow"></div>
                        <div data-light="red" class="light red"></div>
                    </div>
                    <div class="trafficBtn">신호바꾸기</div>
                </div>
            </div>



        </div>
        
        <div class="page2">
            
            <div class="step4">

            </div>
            <div class="Step5">

            </div>
         </div>
    </div>
    <div class="step3">
        <div class="pageSliderBtn preSliderBtn hiddenSliderBtn">
            &lt; 이전페이지
        </div>
        <div class="pageSliderBtn nxtSliderBtn">
            다음페이지 >

        </div>
    </div>
</body>
</html>
const content = document.querySelector('.content');






content.addEventListener('click',()=>{
    if(confirm("위험해요!!! 그래도 누르시겠어요?")){
        alert("펑!!!");
    }
})

const emergencyBtn = document.querySelector('.emergencyBtn');
emergencyBtn.addEventListener('click',(e)=>{
    alert("버---블-----버---블");
    /*버블링 방지 */
    e.stopPropagation();
})
// dataset_light는 클래스 lightActive를 가지고 있는 애를 가져와라 소리
let lightActive=document.querySelector('.lightActive').dataset.light;
const green = document.querySelector('.green');
const yellow = document.querySelector('.yellow');
const red = document.querySelector('.red');

const trafficBtn = document.querySelector('.trafficBtn');

let running =false;


// light active속성을 css에서 opacity= 100주고  js에서 바꿔주는 알고리즘

// classList 로 클래스 줬다뺏다로 조작 많이함!!
trafficBtn.addEventListener('click',()=>{
    if(!running){
        running = true;

        trafficBtn.textContent="실행중";

        if(lightActive=='green'){
            green.classList.remove('lightActive');
            yellow.classList.add('lightActive');

            setTimeout(()=>{
                yellow.classList.remove('lightActive');
                red.classList.add('lightActive');
                lightActive='red';
                trafficBtn.textContent='신호바꾸기';
                running=false;
            },3000);
        }
    else if(lightActive =='red'){
        red.classList.remove('lightActive');
        yellow.classList.add('lightActive');

        setTimeout(()=>{
            yellow.classList.remove('lightActive');
            green.classList.add('lightActive');
            lightActive='green';
            trafficBtn.textContent='신호바꾸기';
            running=flase;
        },3000);
        }

    }
})

const preSliderBtn =document.querySelector('.preSliderBtn');
const nxtSliderBtn =document.querySelector('.nxtSliderBtn');
const wrap = document.querySelector('.wrap');

let currentpage=1;

nxtSliderBtn.addEventListener('click',()=>{
    if(currentpage ==1){
        wrap.style.transform ="translateX(-100vw)";
        currentpage =2;
        nxtSliderBtn.classList.add("hiddenSliderBtn");
        preSliderBtn.classList.remove("hiddenSliderBtn");

    }

});


preSliderBtn.addEventListener('click',()=>{
    if(currentpage==2){
        wrap.style.transform ="translateX(0)";
        currentpage=1;
        preSliderBtn.classList.add("hiddenSliderBtn");
        nxtSliderBtn.classList.remove("hiddenSliderBtn");
    }
});
728x90