<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link href="./main.css" rel="stylesheet">
<title>Hello, world!</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body>
<div class="black-bg">
<div class="white-bg">
<h4>로그인하세요</h4>
<form action="success.html">
<div class="my-3">
<input type="text" class="form-control" id="email">
</div>
<div class="my-3">
<input type="password" class="form-control" id ="password">
</div>
<button type="submit" class="btn btn-primary" id="send">전송</button>
<button type="button" class="btn btn-danger" id="close">닫기</button>
</form>
</div>
</div>
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<span class="navbar-brand">Navbar</span>
<button class="navbar-toggler" type="button">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</nav>
<ul class="list-group">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
<li class="list-group-item">A fourth item</li>
<li class="list-group-item">And a fifth one</li>
</ul>
<div class="main-bg">
<h4>Shirts on Sale</h4>
<button id ='login' class = "btn btn-danger">로그인</button>
</div>
<script>
//전송버튼 누르면 (이벤트리스너 submit이다. 셀렉터는 form)
//저기 input에 입력한 값이 공백이면, 알림창띄워주세요.
document.querySelector("form").addEventListener('submit',function(e){
// e.preventDefault => 폼전송을 막으려면(다른페이지로 이동금지) , 단 function(e) 기입
if(document.getElementById('email').value === ''){
alert('아이디미입력')
}
if(document.getElementById("password").value === ''){
alert('비밀번호미입력')
}
if(document.getElementById("password").value.length < 6){
alert('비밀번호더길게입력하시오')
}
//참고로, {}끝나고는 ; 안쳐도 된다
//()끝나고는 ;쳐야됨
});
//버튼을 누르면 <ul>에 show 를 붙여보자
document.querySelector('.navbar-toggler').addEventListener('click',function(){
document.querySelectorAll('.list-group')[0].classList.toggle('show');
}); //classList.toggle => show 가 있으면 삭제, 없으면 추가하라는 뜻
$('#login').on('click',function(){
$('.black-bg').addClass('show-modal');
});
$('#close').on('click',function(){
$('.black-bg').removeClass('show-modal');
});
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>
번외
<input> 태그에서 발생하는 이벤트들이 있습니다.
input이벤트와 change 이벤트인데 <input> 안에 뭔가 입력할 때 발생합니다.
내용을 입력할때나 변화가 생길때 쓸수 있는 이벤트리스너입니다
document.getElementById('email').addEventListener('input', function(){
console.log('안녕')
});
document.getElementById('email').addEventListener('change', function(){
console.log('안녕')
});