로그인 페이지 ===========
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 | <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>4월 12일 과제-로그인</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"> <script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script> <style> body{padding-left: 100px; width:100%;} .container { background: #ebeef1; border-bottom-left-radius: 150px; padding: 2% 5% 5% 10%; max-width:100%; } .text_area { margin-top: 90px; display: inline-block; width: 47%; margin-right: 3%; vertical-align: top; word-break: keep-all;} .visual_area { height: 100%; display: inline-block; width: 48%; vertical-align: bottom; text-align: center;} footer {padding: 30px 0 30px 10%; font-size: 14px; color: #333;} @media screen and (max-width: 760px){ .text_area {width: 100%; margin:0; } .visual_area { height: 50%; min-width: 465px; width: 100%; background-size: 90%;} footer {text-align: right; padding:30px 5%;} } </style> <script> 'use strict'; function loginCheck(){ let form = document.getElementById("form_user_login"); let uid = form.uid.value.trim(); let pwd = form.pwd.value.trim(); if(uid == ""){ alert("아이디를 입력해주세요."); form.uid.focus(); } else if(uid.length < 5){ alert("아이디는 5자 이상입니다."); form.uid.focus(); } else if(pwd == ""){ alert("비밀번호를 입력해주세요."); form.pwd.focus(); } else if(uid == "admin" & pwd == "asd1234^^"){ alert("관리자님 로그인 되었습니다."); form.submit(); } else { alert("지금은 관리자만 로그인 가능합니다."); form.uid.value=""; form.pwd.value=""; form.uid.focus(); } } </script> </head> <body> <div class="container"> <div class="text_area"> <h2 class="mb-5">Member Login</h2> <form id="form_user_login" action="main.html"> <div class="form-group"> <label for="uid">아이디 : </label> <input type="text" class="form-control" id="uid" name="uid" required /> </div> <div class="form-group"> <label for="pwd">비밀번호 : </label> <input type="password" class="form-control" id="pwd" name="pwd" required /> </div> <button type="button" class="btn btn-primary" xxxxonclick="loginCheck()">로그인</button> </form> </div> <div class="visual_area"><img src="img/loginBg.png" alt="로그인 이미지"></div> </div> </div> <footer>Copyright ⓒ Eunha. All rights reserved.</footer> </body> </html> | cs |
메인페이지 ==============
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 | <!DOCTYPE html> <html lang="ko"> <head> <title>2024-04-12 숙제-main</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"> <script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script> <style> .container {margin: 50px auto;} .fakeimg { height: 200px; background: #aaa; } </style> <script> 'use strict'; function logoutCheck(){ let ans = [안내]태그제한으로등록되지않습니다("로그아웃 하시겠습니까? (Y/N)"); if(ans.trim().toUpperCase() == "Y"){ location.href = './login.html'; } } window.xxxxonload = function (){ let colors = ['white', '#ffe6e6','#ffffb3','#ffffb3','#f2e6ff','#e6f7ff','#ffddcc']; let num = parseInt(Math.random()*7); document.querySelector('.jumbotron').style.backgroundColor = colors[num]; } </script> </head> <body> <div class="jumbotron text-center mb-0"> <h1>2024-04-12 숙제</h1> <p>Resize this responsive page to see the effect!</p> </div> <nav class="navbar navbar-expand-sm bg-dark navbar-dark"> <a class="navbar-brand" href="main.html">Main</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="collapsibleNavbar"> <ul class="navbar-nav mr-auto"> <li class="nav-item"> <a class="nav-link" href="game1.html">숫자맞추기게임</a> </li> <li class="nav-item"> <a class="nav-link" href="game2.html">가위바위보게임</a> </li> </ul> <button type="button" class="btn btn-primary btn-sm" xxxxonclick="logoutCheck()">로그아웃</button> </div> </nav> <div class="container" style="margin-top:30px"> <div class="row"> <div class="col-sm-4"> <h2>About Me</h2> <h5>Photo of me:</h5> <div class="fakeimg">Fake Image</div> <p>Some text about me in culpa qui officia deserunt mollit anim..</p> <h3>Some Links</h3> <p>Lorem ipsum dolor sit ame.</p> <ul class="nav nav-pills flex-column"> <li class="nav-item"> <a class="nav-link active" href="#">Active</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> </ul> <hr class="d-sm-none"> </div> <div class="col-sm-8"> <h2>TITLE HEADING</h2> <h5>Title description, Dec 7, 2017</h5> <div class="fakeimg">Fake Image</div> <p>Some text..</p> <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p> <br> <h2>TITLE HEADING</h2> <h5>Title description, Sep 2, 2017</h5> <div class="fakeimg">Fake Image</div> <p>Some text..</p> <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p> </div> </div> </div> <footer class="jumbotron text-center mb-0">Copyright ⓒ Eunha. All rights reserved.</footer> </body> </html> | cs |
게임1(숫자맞추기) ================
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 | <!DOCTYPE html> <html lang="ko"> <head> <title>2024-04-12 숙제-숫자맞추기게임</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"> <script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script> <style> .container {margin: 50px auto;} </style> <script> 'use strict'; function logoutCheck(){ let ans = [안내]태그제한으로등록되지않습니다("로그아웃 하시겠습니까? (Y/N)"); if(ans.trim().toUpperCase() == "Y"){ location.href = './login.html'; } } window.xxxxonload = function (){ let colors = ['white', '#ffe6e6','#ffffb3','#ffffb3','#f2e6ff','#e6f7ff','#ffddcc']; let num = parseInt(Math.random()*7); document.querySelector('.jumbotron').style.backgroundColor = colors[num]; } // 1에서 100까지의 숫자 랜덤생성 let randomNum = Math.floor(Math.random()*100)+1; console.log("randomNum : ", randomNum); let cnt = 0; function checkNum(){ cnt++; let res = document.getElementById("res"); let guessNum = document.getElementById("guessNum").value; if(guessNum == randomNum) res.innerText = `도전횟수: ${cnt}. 축하합니다 정답입니다!`; else if(guessNum > randomNum) res.innerText = `도전횟수: ${cnt}. 입력한 수${guessNum} 보다 더 작습니다. `; else res.innerText = `도전횟수: ${cnt}. 입력한 수${guessNum} 보다 더 큽니다.`; document.getElementById("guessNum").value = ""; document.getElementById("guessNum").focus(); } </script> </head> <body> <div class="jumbotron text-center mb-0"> <h1>2024-04-12 숙제</h1> <p>Resize this responsive page to see the effect!</p> </div> <nav class="navbar navbar-expand-sm bg-dark navbar-dark"> <a class="navbar-brand" href="main.html">Main</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="collapsibleNavbar"> <ul class="navbar-nav mr-auto"> <li class="nav-item"> <a class="nav-link active" href="game1.html">숫자맞추기게임</a> </li> <li class="nav-item"> <a class="nav-link" href="game2.html">가위바위보게임</a> </li> </ul> <button type="button" class="btn btn-primary btn-sm" xxxxonclick="logoutCheck()">로그아웃</button> </div> </nav> <div class="container"> <div class="row"> <div class="col-sm-12"> <h2>숫자맞추기게임</h2> <p class="mb-5">1~100까지의 수를 맞춰보세요~!</p> <div class="input-group mb-3"> <input type="number" id="guessNum" name="guessNum" class="form-control" placeholder="숫자를 입력해주세요" /> <div class="input-group-append"><button class="btn btn-success" type="submit" xxxxonclick="checkNum()" >제출</button></div> </div> <div id="res"></div> <!-- 결과표시--> </div> </div> </div> <footer class="jumbotron text-center mb-0">Copyright ⓒ Eunha. All rights reserved.</footer> </body> </html> | cs |
게임2(가위바위보) =============
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 | <!DOCTYPE html> <html lang="ko"> <head> <title>2024-04-12 숙제-숫자맞추기게임</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"> <script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script> <script src="https://kit.fontawesome.com/df66332deb.js" crossorigin="anonymous"></script><!-- https://www.angularjswiki.com/fontawesome/cdn/ --> <style> .container {margin: 50px auto;} .btn-group i {font-size: 60px; padding: 40px 0;} .btn-group i span{display: block ;font-size: 30px; margin-top: 20px;} .who {font-size: 18px; font-weight: 600; display: inline-block; width: 100%; text-align: right;} </style> <script> // 'use strict'; function logoutCheck(){ let ans = [안내]태그제한으로등록되지않습니다("로그아웃 하시겠습니까? (Y/N)"); if(ans.trim().toUpperCase() == "Y"){ location.href = './login.html'; } } // 가위바위보게임 let pcChoice; // 가위바위보 게임 자동 시작 window.xxxxonload = function (){ let colors = ['white', '#ffe6e6','#ffffb3','#ffffb3','#f2e6ff','#e6f7ff','#ffddcc']; let num = parseInt(Math.random()*7); document.querySelector('.jumbotron').style.backgroundColor = colors[num]; const choice = ['묵','찌','빠']; let interval = setInterval(function(){ let randomNum = parseInt(Math.random() * 3); // 1~2 pcChoice = choice[randomNum]; console.log("컴퓨터 선택 : " + pcChoice); let buttons = document.getElementById("pcBtnGroup").querySelectorAll('button'); // console.log(buttons); buttons.forEach(button => button.disabled=true); buttons[randomNum].disabled=false; }, 100); let userBtnGroup = document.getElementById("userBtnGroup").querySelectorAll('button'); // console.log(userBtnGroup); userBtnGroup.forEach(button => button.addEventListener('click', e => { // 버튼들 클릭시 play함수 호출해서 작동 clearInterval(interval); const userChoice = e.target.innerText; console.log("사용자 선택 : " + userChoice); userBtnGroup.forEach(button => button.disabled=true); e.target.parentNode.parentNode.disabled=false; // 승자 판별 let winner = ''; if (pcChoice == userChoice) { // 무승부 document.getElementById("res").innerHTML = `<h3>무승부!!</h3><p>사용자는 ${userChoice}이고 컴퓨터는 ${pcChoice}이므로 무승부 입니다.</p>`; return; } else if(pcChoice == '묵' & userChoice == '찌' || pcChoice == '찌' & userChoice == '빠' || pcChoice == '빠' & userChoice == '묵') winner = '컴퓨터'; else winner = '사용자'; document.getElementById("res").innerHTML = `<h3>${winner} 승!!</h3><p>사용자는 '${userChoice}'이고 컴퓨터는 '${pcChoice}'이므로 ${winner}가 이겼습니다.</p>`; })); } </script> </head> <body> <div class="jumbotron text-center mb-0"> <h1>2024-04-12 숙제</h1> <p>Resize this responsive page to see the effect!</p> </div> <nav class="navbar navbar-expand-sm bg-dark navbar-dark"> <a class="navbar-brand" href="main.html">Main</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="collapsibleNavbar"> <ul class="navbar-nav mr-auto"> <li class="nav-item"> <a class="nav-link" href="game1.html">숫자맞추기게임</a> </li> <li class="nav-item"> <a class="nav-link active" href="game2.html">가위바위보게임</a> </li> </ul> <button type="button" class="btn btn-primary btn-sm" xxxxonclick="logoutCheck()">로그아웃</button> </div> </nav> <div class="container"> <div class="row"> <div class="col-sm-12"> <h2>가위바위보게임<button class="btn btn-warning ml-3 mb-2" xxxxonclick="location.reload()">다시하기</button></h2> <p class="mb-5">가위바위보게임에서 컴퓨터를 이겨보세요~ 사용자측 아이콘을 누르면 시작됩니다.</p> <div class="row"> <div class="col-lg-1 col-sm-2 mb-5"><span class="who">사용자 :</span></div> <div class="btn-group btn-group-lg col-lg-5 col col-sm-10 mb-5" id="userBtnGroup"> <button type="button" class="btn btn-success" id="rock"><i class="fa-regular fa-hand-back-fist"><span>묵</span></i></button> <button type="button" class="btn btn-primary" id="scissors"><i class="fa-regular fa-hand-peace"><span>찌</span></i></button> <button type="button" class="btn btn-info" id="paper"><i class="fa-regular fa-hand"><span>빠</span></i></button> </div> <div class="col-lg-1 col-sm-2 mb-5"><span class="who">컴퓨터 :</span></div> <div class="btn-group btn-group-lg col-lg-5 col col-sm-10 mb-5" id="pcBtnGroup"> <button type="button" class="btn btn-secondary" disabled="true"><i class="fa-regular fa-hand-back-fist"><span>묵</span></i></button> <button type="button" class="btn btn-secondary" disabled="true"><i class="fa-regular fa-hand-peace"><span>찌</span></i></button> <button type="button" class="btn btn-secondary" disabled="true"><i class="fa-regular fa-hand"><span>빠</span></i></button> </div> </div> <div id="res"></div> <!-- 결과표시--> </div> </div> </div> <footer class="jumbotron text-center mb-0">Copyright ⓒ Eunha. All rights reserved.</footer> </body> </html> | cs |
동영상 =====================
첫댓글 디자인이 아주 깔끔하고 예쁘네요..ㅎ.
부트스트랩 템블릿사용도 아주 좋습니다.
게임처리도 시각적으로 예쁘게 잘 만드셨네요. setInterval()함수 사용도 좋습니다. 수고많으셨습니다.