js_이벤트 실습_덜 된 코드...+ 완성!
버블링 원 누르면 저 알림이뜨고
원 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">
< 이전페이지
</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");
}
});