🌱 오늘의 주제 : 왕초보도 할 수 있는 통나무 팬션 웹페이지 만들기(자바스크립트)
🌱 왕초보도 할 수 있는 통나무 팬션 웹페이지 만들기(자바스크립트)
https://youtu.be/QCYfZ7G0J2I
녹화202302140001.mp4
7.57MB
🌱 jQuery 프레임워크를 이용한 기능
페이지 완성하기
- bootstrap 을 활용해서 아래와 같은 화면을 구성해보세요.
- 메뉴 글씨에 마우스를 올리면 각 메뉴의 배경색이 변하도록 만들어 보세요.
라디오 버튼 이벤트
- 비회원 라디오 버튼을 선택하면 아래와같이 input 창이 변경되도록 하세요.
- 날짜는 datepicker 를 사용해서 날짜를 선택하게 하세요.
- 오늘 날짜 이후로만 선택 가능하도록 하세요.
- 날짜 포맷은 2025년 10월 10일 와 같은 형태로 표현하세요.
유효성 검사
- 조회 하기 버튼을 눌렀을 때, 라디오 버튼을 통해서 선택된 상황을 기반으로 유효성 검사후 alert 창을 노출하세요.
- 각 항목에 대한 입력된 내용이 없을때 alert으로 안내하세요.
- 비회원의 전화번호는 010으로 시작하는 번호가 아닐경우 alert 을 통해서 010 으로 시작하는 번호만 입력 가능합니다. 라고 안내하세요.
setInterval
- 가운데 이미지가 3초 마다 다른 이미지로 변경되도록 만드하세요.
- javascript 의 setInterval함수를 사용해서 구현하세요.
- 이미지는 아래 이미지를 다운받아서 사용하세요.
- 이미지는 순환하도록 구현하세요.
🌱 통나무 팬션 코드
<!DOCTYPE html>
<html>
<head>
<title>통나무 팬션</title>
<meta charset="utf-8">
<!-- ** 순서 중요 : 1. jquery 2.css 3.js 2개. *** -->
<!-- jquery 원본.(slim이면 안됨. 무조건 위에 있어야함.-->
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- bootstrap (slim 뺐음), jquery가 위에 있기 때문에 나머지를 가져오기-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<!-- datepicker / 원래는 3개를 가져와야 하는데 맨 위에 jquery가 있기 때문에 나머지 2개 가져옴. -->
<!-- 원본 위에 배치하고 밑에 부가적인 부분 배치.-->
<!-- jquery-ui -->
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<!-- style.css 연동 : 제일 아래에 배치!!-->
<link rel="stylesheet" href="quiz01_style.css" type="text/css">
</head>
<body>
<div id="wrap" class="container">
<!-- header -->
<header class=" d-flex justify-content-center align-items-center">
<h1>통나무 팬션</h1>
</header>
<!-- nav -->
<nav>
<ul class="nav-ul nav-fill w-100 d-flex align-items-center justify-content-around">
<li class="ul-menu"><a href="#" class="nav-link font-weight-bold">팬션소개</a></li>
<li class="ul-menu"><a href="#" class="nav-link font-weight-bold">객실보기</a></li>
<li class="ul-menu"><a href="#" class="nav-link font-weight-bold">예약안내</a></li>
<li class="ul-menu"><a href="#" class="nav-link font-weight-bold">커뮤니티</a></li>
</ul>
</nav>
<!-- section -->
<section class="">
<!-- article1 -->
<article class=" article1">
<img src="test06_banner1.jpg" id=bannerImage alt="이미지1" width="1100" class="article-fill w-100" height="500">
</article>
<!-- article2 -->
<article class=" article2 d-flex">
<!-- cotent1 -->
<div class="content1">
<div class="content1_text font-weight-bold"><a href='#' class="content1-link">실시간 예약하기</a></div>
</div>
<!-- content2 -->
<!-- span: 한 줄로 쓸 수 있음!! div로 하면 부모에 d-flex해서 설정해야됨. -->
<div class=" content2">
<div class="d-flex content2_text1">
<div class="checkReservation">예약 확인 </div>
<div class="members">
<!-- **** label - name 같게 해야함. 둘 중 하나 선택하게 해야 해서.. -->
<!-- **** label - value는 다르게 해야함! -->
<label> 회원<input type="radio" name="member" value="member" checked></label>
<label class="noMember"> 비회원<input type="radio" name="member" value="nonMember"></label>
</div>
</div>
<!-- 아이디 비밀번호 (회원용) -->
<div id="memberBox">
<!-- 오른쪽 정렬 : d-flex justify-content-end -->
<div class="idPassword d-flex align-items-center">
<div>아이디:</div>
<input id="id" type="text" class="idInput form-control">
</div>
<div class="idPassword2 d-flex align-items-center">
<div class="passwordText">비밀번호:</div>
<input id="password" type="password" class="idInput form-control">
</div>
<!-- class, id 버튼명 : submit-btn 서버한테 보낼때 씀.-->
<button type="button" class="submit-btn btn btn-success justify-content-end">조회 하기</button>
</div>
<!-- 아이디 비밀번호, 전화번호 (비회원용) -->
<div id="nonMemberBox" class="d-none">
<div class="idPassword d-flex justify-content-end mr-5">
<div>이름:</div>
<input id = "name" type="text" class="idInput form-control">
</div>
<div class="idPassword d-flex justify-content-end mr-5">
<div>전화번호:</div>
<input id="phoneNumber" type="text" class="idInput form-control">
</div>
<div class="idPassword d-flex justify-content-end mr-5">
<div>날짜:</div>
<input id="reserveDateText" type="text" class="idInput form-control">
</div>
<button type="button" class="submit-btn btn btn-success mr-5">조회 하기</button>
</div>
</div>
<!-- content3 -->
<div class="content3 font-weight-bold"><small>예약문의:</small> 010-000-1111</div>
</article>
</section>
<!-- footer -->
<footer>
<div class="footerText">
<small class="footerText">
<div>제주특별자치도 제주시 예월읍</div>
<div>사업자등록번호: 111-22-255222 / 농어촌민박사업자지정 / 대표:김통목</div>
<div>Copyright 2025 tongnamu All right reserved</div>
</small>
</div>
</footer>
</div>
<script>
//ready 함수
$(document).ready(function() {
// 2. 라디오 버튼 이벤트
$('input[name=member]').on("change", function() { // radio 버튼 중에 하나라도 변경이 일어나는 이벤트.
let value = $(this).val(); // raido 버튼 클릭하면 value값이 나옴. this가 의미하는 것은 checked 되어 있는에 하나씩을 가리킴. // 변경이 일어난 하나의 태그만 가져온다.
if (value == "member") { //회원 선택
$('#memberBox').removeClass("d-none");
$('#nonMemberBox').addClass("d-none");
} else { // 비회원 선택
$('#memberBox').addClass("d-none");
$('#nonMemberBox').removeClass("d-none");
}
});
// 2. 날짜 영역 datepicker
$('#reserveDateText').datepicker({
minDate:0 // 오늘 날짜 이후로 선택 0으로 지정해야됨.
, dateFormat:"yy년 mm월 dd일 " // 2023년 2월 13일
});
// 3. 조회하기 버튼 클릭
// 조회하기는 버튼이 두개이기 때문에 이때는 class명을 같이해서 기능을 넣어줘야함. id로 하면 안됨(id는 한개씩만 들어갈 수 있기 때문)
// jquery 라디오 체크된거 가져오기 검색.
$(".submit-btn").on("click", function() {
// 라디오에 체크가 누가 됐는지 분기
let value = $('input[name=member]:checked').val(); // 라디오 버튼에 체크되어 있는거의 value를 가져온다.
if (value == "member") { // 회원
let id = $('#id').val().trim();
if (id == "") {
alert("아이디를 입력하세요");
return; // validation할 때는 꼭 return문 써야됨!
}
let password = $('#password').val();
if(!password) {
alert("비밀번호를 입력하세요");
return;
}
} else { // 비회원
let name = $('#name').val().trim();
if(name == "") {
alert("이릅을 입력하세요");
return;
}
let phoneNumber = $('#phoneNumber').val().trim();
if (phoneNumber.length < 1){
alert("전화번호를 입력하세요");
return;
}
// 010 으로 시작하는지 확인 010-4477-4111
if (phoneNumber.startsWith("010") === false) { // startsWith 메소드 사용 : 010으로 시작하는 ~
alert("010 으로 시작하는 번호만 입력 가능합니다.");
return;
}
let reserveDateText = $('#reserveDateText').val();
if (reserveDateText == "") {
alert("날짜를 선택해주세요.")
return;
}
}
});
// 4. 이미지 3초 간격으로 변경 // setInterval함수 이용.
let bannerImgArr = ['test06_banner1.jpg', 'test06_banner2.jpg', 'test06_banner3.jpg', 'test06_banner4.jpg'];
let currentIndex = 0;
setInterval(function() {
currentIndex++;
console.log("함수 호출" + currentIndex);
if (currentIndex >= bannerImgArr.length){
currentIndex = 0;
}
$('#bannerImage').attr("src", bannerImgArr[currentIndex]);
}, 3000); // 3초는 3000밀리세컨 // 익명함수 이용 : function() {}
}); // -- ready 끝
</script>
</body>
</html>
#wrap{
width:1200px;
}
header{
height:100px;
}
nav{
height:40px;
background-color: rgb(209, 144, 58);
}
nav > ul > li{
list-style: none;
}
nav > .nav-ul {
padding-left:0px;
}
.nav-link{
color:white;
}
.nav-link:hover {
color:black;
}
section{
height:800px;
}
section > .article1{
height:500px;
}
section > .article2{
height:300px;
}
/* 오른쪽 정렬 : float: right */
.submit-btn { float: right; margin-right: 40px; margin-top:15px;}
.article2 > .content1{
width:370px;
display: flex;
justify-content: center;
align-items: center;
font-size: 40px;
background-color:sienna;
}
.content1-link {
color:white;
}
.content1-link:hover {
color:black;
text-decoration: none;
}
.article2 > .content2{
width:370px;
color:white;
background-color:rgb(209, 144, 58);
}
.checkReservation {
font-size: 28px;
margin-left: 20px;
margin-top: 10px;
}
.content2_text1 {
margin-top: 10px;
}
.content2_text1 > .members{
margin-left: 20px;
margin-top: 20px;
}
.members > .noMember {
margin-left: 15px;
}
.idPassword {
color:white;
justify-content: center;
align-items: center;
}
.id{
margin-top: 20px;
}
.idPassword2 {
color:white;
padding-left: 23px;
}
.id2{
margin-top: 20px;
}
.idInput {
width:240px;
margin-left:10px;
justify-content: center;
align-items: center;
margin-top: 20px;
}
.searchButton{
margin-top: 20px;
margin-left: 245px;
}
.article2 > .content3{
width:370px;
display: flex;
justify-content: center;
align-items: center;
font-size: 40px;
background-color:sienna;
font-size: 35px;
color:white;
}
footer{
height:80px;
}
.footerText{
margin-left: 30px;
margin-top: -10px;
padding-top: -10px;
color:grey;
}
