isdiscodead
2022.02.11
@isdiscodead님이
[JavaScript] DOM 구조 그려보기
포스트에 댓글을 남겼습니다.
jgh0711
2022.01.24
@jgh0711님이
[JavaScript] 챗봇_임의 텍스트 받기
포스트에 댓글을 남겼습니다.
jgh0711
2022.01.24
@jgh0711님이
[JavaScript] 챗봇_임의 텍스트 받기
포스트를 좋아합니다.
Isdew
2022.01.21
@Isdew님이
[JavaScript] 전화걸기
포스트에 댓글을 남겼습니다.
Isdew
2022.01.21
@Isdew님이
[JavaScript] 전화걸기
포스트를 좋아합니다.
mummhy0811
2022.01.21
@mummhy0811님이
[JavaScript] 전화걸기
포스트를 좋아합니다.
heimish
2022.01.20
@heimish님이
[JavaScript] 전화걸기
포스트를 좋아합니다.
Isdew
2022.01.20
@Isdew님이
[JavaScript] 전광판
포스트에 댓글을 남겼습니다.
Isdew
2022.01.20
@Isdew님이
[JavaScript] 전광판
포스트를 좋아합니다.
Isdew
2022.01.18
@Isdew님이
[JavaScript] 스톱워치
포스트에 댓글을 남겼습니다.
Isdew
2022.01.18
@Isdew님이
[JavaScript] 스톱워치
포스트를 좋아합니다.
Isdew
2022.01.14
@Isdew님이
[JavaScript] 카드형 _ 변수 타입 출력
포스트에 댓글을 남겼습니다.
Isdew
2022.01.14
@Isdew님이
[JavaScript] 카드형 _ 변수 타입 출력
포스트를 좋아합니다.
jgh0711
2022.01.13
@jgh0711님이
[JavaScript] 버튼 클릭 이벤트(+console.log)
포스트를 좋아합니다.
Isdew
2022.01.13
@Isdew님이
[JavaScript] 버튼 클릭 이벤트(+console.log)
포스트에 댓글을 남겼습니다.
Isdew
2022.01.13
@Isdew님이
[JavaScript] 버튼 클릭 이벤트(+console.log)
포스트를 좋아합니다.
hjun0917
2022.01.12
@hjun0917님이
[JavaScript] DOM 구조 그려보기
포스트에 댓글을 남겼습니다.
hjun0917
2022.01.12
@hjun0917님이
[JavaScript] DOM 구조 그려보기
포스트를 좋아합니다.
Isdew
2022.01.12
@Isdew님이
[JavaScript] 삼행시
포스트에 댓글을 남겼습니다.
Isdew
2022.01.12
@Isdew님이
[JavaScript] 삼행시
포스트를 좋아합니다.
amanda
2022.01.12
@amanda님이
[JavaScript] 삼행시
포스트에 댓글을 남겼습니다.
amanda
2022.01.12
@amanda님이
[JavaScript] 삼행시
포스트를 좋아합니다.
jiminutive
2022.01.12
@jiminutive님이
[JavaScript] 삼행시
포스트를 좋아합니다.
wozniac
2022.01.12
@wozniac님이
[JavaScript] DOM 구조 그려보기
포스트에 댓글을 남겼습니다.
wozniac
2022.01.12
@wozniac님이
[JavaScript] DOM 구조 그려보기
포스트를 좋아합니다.
jamiee0214
2022.01.11
@jamiee0214님이
[JavaScript] DOM 구조 그려보기
포스트에 댓글을 남겼습니다.
jamiee0214
2022.01.11
@jamiee0214님이
[JavaScript] DOM 구조 그려보기
포스트를 좋아합니다.
jgh0711
2022.01.11
@jgh0711님이
[JavaScript] DOM 구조 그려보기
포스트에 댓글을 남겼습니다.
jgh0711
2022.01.11
@jgh0711님이
[JavaScript] DOM 구조 그려보기
포스트에 댓글을 남겼습니다.
jgh0711
2022.01.11
@jgh0711님이
[JavaScript] DOM 구조 그려보기
포스트를 좋아합니다.
YellowHan
2022.01.06
@YellowHan님이 새 포스트를 작성했습니다.
[JavaScript] CDN 타이핑 애니메이션 활용
테스트 페이지 : https://yellowhan.github.io/chat_bot/ CDN을 사용해서 키워드를 포함하지 않는 입력이 들어오면 최상단에 타이핑 텍스트가 출력되고 setTimeout()을 사용해서 출력부터 15000ms가 지난 뒤 타이핑 텍스트 박스가 숨겨지고 숨겨진 동안 출력 되던 텍스트가 지워지는데 그동안 사용자가 키워드 불포함 입력을 넣어도 타이핑 텍스트가 출력 되지 않도록 setTimeout()를 하나 더 추가했어요. 두 번째 setTimeout()이 없으면 다음 사용자의 키워드 불포함 입력에 display = "block"이 되면서 이전에 출력 했던 내용이 지워지는 게 보여서 완전히 지워지는 시간 동안은 재 출력이 안되게 했어요.  <body>   <div id="container">     <div id="typing">       <div id="app"></div>     </div>     <div class="bot_msg">       <p id="output"></p>     </div> ... 생략 ... #typing {   flex: 0.1; } #app {   display: none;   font-size: 15px;   font-weight: 400; } ... 생략 ...   else {     document.getElementById("output").innerText = "잘 모르겠어요..";     write();     what();   } // CDN  let active = false; const app = document.getElementById('app'); const typewriter = new Typewriter(app, {   loop: false }); const write = () => {   if(!active) {     active = true;     app.style.display = "block";     typewriter     .typeString('라봉이가 알아듣지 못하는 것 같다.')     .pauseFor(1000)     .deleteAll()     .typeString('하단의 ? 버튼을 눌러서 키워드를 확인 해보자')     .pauseFor(5500)     .deleteAll()     .start();     setTimeout(() => {       app.style.display = "none";     },15000);     setTimeout(() => {       active = false;     },16000);   } }
YellowHan
2022.01.05
@YellowHan님이 새 포스트를 작성했습니다.
[JavaScript] 챗봇_ 대화 추가, 코드 개선(중복 제거)
테스트 페이지 : https://yellowhan.github.io/chat_bot/ 오늘은 기존 코드에서 같은 이미지를 설정하는 부분을 함수로 만들고 키워드를 추가해봤어요. 라봉이는 불 꺼달란 말을 잘 안들어요.. 이제 그림 그리기 힘들어서 이미지는 재탕으로..!! 추가된 내용 : 키워드 → '숨바꼭질', '숨어', '찾았다' 텍스트 입력 없이 보내기를 누르면 "하고 싶은 말 없어요?" 출력 키워드를 제외한 입력에는 "잘 모르겠어요.." 출력 불이 켜진 상태에서 '불켜' 입력 시 이미 불이 켜졌다는 메시지 출력 꺼진 상태에서도 꺼졌다는 메시지 출력 html 코드는 키워드 추가 부분의 텍스트만 수정해서 첨부x css 코드는 이전 게시글과 동일해서 첨부x  let inMsg; let lightOn = true; document.getElementById("output").innerText = "통통 튀는 매력의 라봉이와 대화 해봐요-!!"; document.addEventListener("click", (event) => {   const target = event.target;   if (target.id == "send") {     inMsg = document.getElementById("user_msg").value;     check();     document.getElementById("user_msg").value = "";   }   if (target.id == "help") {     if (document.getElementById("pop").style.display == "none") {       document.getElementById("pop").style.display = "inline";     } else {       document.getElementById("pop").style.display = "none";     }   } }); const check = () => {   if (inMsg == "") {     document.getElementById("output").innerText = "하고 싶은 말 없어요?";     what();   } else if (inMsg.includes("안녕")) {     document.getElementById("output").innerText = "안녕하세요오옹~";     imgDefault();   } else if (inMsg.includes("이름")) {     document.getElementById("output").innerText = "라봉이에요오옹~";     imgDefault();   } else if ((inMsg.includes("불") && inMsg.includes("꺼")) || inMsg.includes("끄")) {     if(!lightOn) {       document.getElementById("output").innerText = "이미 불이 꺼져 있는데요?(바보인가..)";     }     else {       switch (random()) {         case 1:           document.getElementById("output").innerText = "네? 뭐라고 하셨어요?";           what();           break;         case 2:           document.getElementById("output").innerText = "??????????";           what();           break;         case 3:           document.getElementById("output").innerText = "넵!!";           imgDefault();           lightOn = false;           document.body.style.background = "black";           document.getElementById("user_msg").style.color = "white";           break;       }     }   } else if (inMsg.includes("불") && inMsg.includes("켜")) {     if(lightOn) {       document.getElementById("output").innerText = "이미 불이 켜져 있는데요?(바보인가..)";     }     else {       lightOn = true;       document.getElementById("output").innerText = "불 켜져랏~ 얍-!!";       document.getElementById("bot_img").style.background = "url(./img/lightOn.png) no-repeat";       document.getElementById("bot_img").style.backgroundSize = "contain";       setTimeout(() => {         document.body.style.background = "white";         document.getElementById("bot_img").style.background = "url(./img/lightOnDone.png) no-repeat";         document.getElementById("bot_img").style.backgroundSize = "contain";         document.getElementById("user_msg").style.color = "black";       }, 1000);     }   } else if (inMsg.includes("바보")) {     document.getElementById("output").innerText = "파.업.";     leafThrow();   } else if (inMsg.includes("미안")) {     document.getElementById("output").innerText = "괜차나요옹~";     imgDefault();   } else if (inMsg.includes("고마워")) {     document.getElementById("output").innerText = "고마움의 표현은 입금으로 ♥_♥";     twinkle();   }   else if (inMsg.includes('숨바꼭질')) {     document.getElementById("output").innerText = "좋아요-!!";     twinkle();   }   else if(inMsg.includes('숨어')) {     document.getElementById("output").innerText = "나 찾아봐라~♬";     switch(random()) {       case 1 :        document.getElementById("bot_img").style.background = "url(./img/find1.png) no-repeat";       document.getElementById("bot_img").style.backgroundSize = "contain";       break;       case 2 :        document.getElementById("bot_img").style.background = "url(./img/find2.png) no-repeat";       document.getElementById("bot_img").style.backgroundSize = "contain";       break;       case 3 :        document.getElementById("bot_img").style.background = "url(./img/find3.png) no-repeat";       document.getElementById("bot_img").style.backgroundSize = "contain";       break;     }   }   else if(inMsg.includes('찾았다')) {     document.getElementById("output").innerText = "에잉.. 들켜버렸네..";     leafThrow();   }   else {     document.getElementById("output").innerText = "잘 모르겠어요..";     what();   } }; const imgDefault = () => {   document.getElementById("bot_img").style.background = "url(./img/default.png) no-repeat";   document.getElementById("bot_img").style.backgroundSize = "contain"; } const what = () => {   document.getElementById("bot_img").style.background = "url(./img/what.png) no-repeat";   document.getElementById("bot_img").style.backgroundSize = "contain"; } const twinkle = () => {   document.getElementById("bot_img").style.background = "url(./img/twinkle.png) no-repeat";   document.getElementById("bot_img").style.backgroundSize = "contain"; } const leafThrow = () => {   document.getElementById("bot_img").style.background = "url(./img/iwont.png) no-repeat";   document.getElementById("bot_img").style.backgroundSize = "contain";   setTimeout(() => {     document.getElementById("bot_img").style.background = "url(./img/iwontDone.png) no-repeat";     document.getElementById("bot_img").style.backgroundSize = "contain";   }, 400); } const random = () => {   return Math.floor(Math.random() * 3) + 1;; }
YellowHan
2022.01.05
@YellowHan님이 새 포스트를 작성했습니다.
[JavaScript] 챗봇_대화 추가, 키워드 안내
테스트 페이지 : https://yellowhan.github.io/chat_bot/ 불을 끄고 켜는 것을 미리 만들어서 오늘은 대화 몇 가지 추가와 보내기 옆 물음표 버튼을 눌렀을 때 캐릭터와 대화 가능한 키워드를 알려주는 창이 작게 뜨게 만들었어요.  <!DOCTYPE html> <html lang="kr"> <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>ChatBot</title>   <link rel="stylesheet" href="./layout.css"> </head> <body>   <div id="container">     <div class="bot_msg">       <p id="output"></p>     </div>     <div id="bot_img"></div>     <div>       <input id="user_msg" type="text" placeholder="메시지를 입력해주세요">       <div class="buttons">         <input id="send" type="button" value="보내기"></input>         <input id="help" type="button" value=" ? "></input>       </div>     </div>   </div>   <div id="pop">     라봉이와 대화 가능한 키워드<br>     <br>     안녕 / 이름 / 불 켜 or 꺼<br>     바보 / 미안 / 고마워    </div>   <script src="./talk.js"></script> </body> </html> body {   margin: 0px;   background: rgb(255, 255, 230);   font-size: 20px;   font-weight: 700; } #container {   margin: 50px auto;   width: 800px;   height: 600px;   display: flex;   flex-direction: column;   text-align: center; } .bot_msg {   flex: 0.6;   background: url(./img/msg.png) no-repeat center;   background-size: 60%;   position: relative; } .bot_msg p {   margin: 0px;   position: absolute;   top: 35%;   left: 50%;   transform: translate(-50%, -50%); } #bot_img {   flex: 1;   margin: auto;   background: url(./img/default.png) no-repeat;   background-size: contain;   width: 300px; } #user_msg {   background: rgba(255, 255, 255, 0);   width: 50%;   height: 30%;   padding: 0px 10px 0px 10px;   text-align: center;   font-size: 15px;   border: 2px solid gray;   border-radius: 10px; } form {   flex: 0.4;   margin-top: 30px; } .buttons {   margin: 30px auto; } .buttons input {   background: rgb(255, 238, 0);   padding: 15px;   border-radius: 25px;   border: none;   color: gray;   font-size: 20px;   font-weight: 600;   box-shadow: 2px 2px 5px 0px gray; } #send {   width: 40%; } #pop {   display: none;   border: 1px dotted gray;   border-radius: 10px;   background: white;   padding: 15px;   position: fixed;   top: 180px;   left: 10px;   font-size: 15px;   font-weight: 400; } let inMsg; document.getElementById("output").innerText =   "통통 튀는 매력의 라봉이와 대화 해봐요-!!"; document.addEventListener("click", (event) => {   const target = event.target;   if (target.id == "send") {     inMsg = document.getElementById("user_msg").value;     check();     document.getElementById("user_msg").value = "";   }   if (target.id == "help") {     if(document.getElementById('pop').style.display == "none") {       document.getElementById('pop').style.display = "inline";     }     else {       document.getElementById('pop').style.display = "none";     }   } }); const check = () => {   if (inMsg.includes("안녕")) {     document.getElementById("output").innerText = "안녕하세요오옹~";   } else if (inMsg.includes("이름")) {     document.getElementById("output").innerText = "라봉이에요오옹~";   } else if (     (inMsg.includes("불") && inMsg.includes("꺼")) || inMsg.includes("끄")) {     let random = Math.floor(Math.random() * 3) + 1;     switch (random) {       case 1:         document.getElementById("output").innerText = "네? 뭐라고 하셨어요?";         break;       case 2:         document.getElementById("output").innerText = "??????????";         break;       case 3:         document.getElementById("output").innerText = "넵!!";         document.body.style.background = "black";         document.getElementById("user_msg").style.color = "white";         break;     }   } else if (inMsg.includes("불") && inMsg.includes("켜")) {     document.getElementById("output").innerText = "불 켜져랏~ 얍-!!";     document.getElementById("bot_img").style.background =       "url(./img/lightOn.png) no-repeat";     document.getElementById("bot_img").style.backgroundSize = "contain";     setTimeout(() => {       document.body.style.background = "white";       document.getElementById("bot_img").style.background =         "url(./img/lightOnDone.png) no-repeat";       document.getElementById("bot_img").style.backgroundSize = "contain";       document.getElementById("user_msg").style.color = "black";     }, 1000);   } else if (inMsg.includes("바보")) {     document.getElementById("output").innerText = "파.업.";     document.getElementById("bot_img").style.background =       "url(./img/iwont.png) no-repeat";     document.getElementById("bot_img").style.backgroundSize = "contain";     setTimeout(() => {       document.getElementById("bot_img").style.background =         "url(./img/iwontDone.png) no-repeat";       document.getElementById("bot_img").style.backgroundSize = "contain";     }, 400);   } else if (inMsg.includes("미안")) {     document.getElementById("output").innerText = "괜차나요옹~";     document.getElementById("bot_img").style.background =       "url(./img/default.png) no-repeat";     document.getElementById("bot_img").style.backgroundSize = "contain";   } else if (inMsg.includes('고마워')) {     document.getElementById("output").innerText =       "고마움의 표현은 입금으로 ♥_♥";     document.getElementById("bot_img").style.background =       "url(./img/twinkle.png) no-repeat";     document.getElementById("bot_img").style.backgroundSize = "contain";   } else {     document.getElementById("output").innerText = "잘 모르겠어요..";     document.getElementById("bot_img").style.background =       "url(./img/what.png) no-repeat";     document.getElementById("bot_img").style.backgroundSize = "contain";   } };
YellowHan
2022.01.05
@YellowHan님이 새 포스트를 작성했습니다.
[JavaScript] 챗봇_임의 텍스트 받기
테스트 페이지 : https://yellowhan.github.io/chat_bot/ innerText와 console에 출력 되는 내용을 다르게 만들어 봤어요. includes를 사용해서 안녕, 이름, 불/꺼/켜 키워드가 들어가면 어떤 문장을 입력 하더라도 키워드에 맞는 대답을 하게 했어요. 불을 켤 때는 setTimeout으로 1초 뒤에 배경이 바뀌도록 설정했습니다.  <!DOCTYPE html> <html lang="kr"> <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>ChatBot</title>   <link rel="stylesheet" href="./layout.css"> </head> <body>   <div id="container">     <div class="bot_msg">       <p id="output"></p>     </div>     <div id="bot_img"></div>     <div>       <input id="user_msg" type="text" placeholder="메시지를 입력해주세요">       <div class="buttons">         <input id="send" type="button" value="보내기"></input>         <input id="cancel" type="button" value="취소"></input>       </div>     </div>   </div>   <script src="./talk.js"></script> </body> </html> body {   margin: 0px;   background: rgb(255, 255, 230);   font-size: 20px;   font-weight: 700; } #container {   margin: 50px auto;   width: 800px;   height: 600px;   display: flex;   flex-direction: column;   text-align: center; } .bot_msg {   flex: 0.6;   background: url(./img/msg.png) no-repeat center;   background-size: 60%;   position: relative; } .bot_msg p {   margin: 0px;   position: absolute;   top: 35%;   left: 50%;   transform: translate(-50%, -50%); } #bot_img {   flex: 1;   margin: auto;   background: url(./img/rabong_default.png) no-repeat;   background-size: contain;   width: 300px; } #user_msg {   background: rgba(255, 255, 255, 0);   width: 50%;   height: 30%;   padding: 0px 10px 0px 10px;   text-align: center;   font-size: 15px;   border: 2px solid gray;   border-radius: 10px; } form {   flex: 0.4;   margin-top: 30px; } .buttons {   margin: 30px auto; } .buttons input {   background: rgb(255, 238, 0);   padding: 15px;   border-radius: 25px;   border: none;   color: gray;   font-size: 20px;   font-weight: 600;   box-shadow: 2px 2px 5px 0px gray; } #send {   width: 40%; } let inMsg; document.getElementById("output").innerText = "통통 튀는 매력의 라봉이와 대화 해봐요-!!"; document.addEventListener("click", (event) => {   const target = event.target;   if (target.id == "send") {     inMsg = document.getElementById("user_msg").value;     check();     inner();     document.getElementById("user_msg").value = "";   } }); const check = () => {   if(inMsg.includes('안녕')) {     document.getElementById("output").innerText = "안녕하세요오옹~";   }   if(inMsg.includes('이름')) {     document.getElementById("output").innerText = "라봉이에요오옹~";   }   if(inMsg.includes('불') && inMsg.includes('꺼') || inMsg.includes('끄')) {     let random = Math.floor(Math.random()*3)+1;     switch(random) {       case 1 : document.getElementById("output").innerText = "네? 뭐라고 하셨어요?";       break;       case 2 : document.getElementById("output").innerText = "??????????";       break;       case 3 : document.getElementById("output").innerText = "넵!!";       document.body.style.background = "black";       document.getElementById('user_msg').style.color = "white";       break;     }   }   if(inMsg.includes('불') && inMsg.includes('켜')) {     document.getElementById("output").innerText = "불 켜져랏~ 얍-!!";     document.getElementById("bot_img").style.background = "url(./img/lightOn.png) no-repeat";     document.getElementById("bot_img").style.backgroundSize = "contain";     setTimeout(() => {       document.body.style.background = "white";       document.getElementById("bot_img").style.background = "url(./img/lightOnDone.png) no-repeat";       document.getElementById("bot_img").style.backgroundSize = "contain";       document.getElementById('user_msg').style.color = "black";     },1000);   } }; const inner = () => {   if(inMsg.includes('안녕')) {     console.log('어, 그래~');   }   if(inMsg.includes('이름')) {     console.log('알아서 뭐하게?');   }   if(inMsg.includes('불') && inMsg.includes('꺼')) {     console.log('아, 귀찮게 하네');   }   if(inMsg.includes('불') && inMsg.includes('켜')) {     console.log('으휴.. 니가 켜라!');   } }
YellowHan
2022.01.04
@YellowHan님이 새 포스트를 작성했습니다.
[JavaScript] 전화걸기
테스트 페이지 : https://yellowhan.github.io/phone/ 좌측 상단의 시간 : Date()를 사용해서 현재 시간을 출력(새로고침 할 때마다 현재 시간으로 바뀜)   숫자 버튼 : 해당 버튼의 숫자 값을 상단에 출력   통화 버튼(초록색) : 클릭 후 1000ms 뒤 통화 연결 중으로 변경 통화 버튼(빨간색) : 클릭 후 1000ms 뒤 번호 입력으로 변경   addEventListener()를 사용하여 click 이벤트를 발생 시킨 target의 value가 0~9이면 길이에 따라 010-1234-5678 형식으로 출력 되도록 구현 Audio()로 통화 연결음.mp3 연결, 통화 종료 버튼을 누르면 pause()로 정지 배열과 랜덤 함수 사용으로 통화 수신자 이름을 랜덤으로 출력하게 구현 <!DOCTYPE html> <html lang="kr"> <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>MyPhone</title>   <link rel="stylesheet" href="./layout.css"> </head> <body>   <div class="container">     <div class="top">       <span id="time"></span>       <img id="state" src="./img/state.png"></img>     </div>     <div id="middle">       <p id="number"></p>       <span id="calling">연결 중<span id="dot"></span></span><span id="dot"></span>     </div>     <div id="buttons">       <button value="1">1</button>       <button value="2">2</button>       <button value="3">3</button>       <button value="4">4</button>       <button value="5">5</button>       <button value="6">6</button>       <button value="7">7</button>       <button value="8">8</button>       <button value="9">9</button>       <button value="*">*</button>       <button value="0">0</button>       <button value="#">#</button>       <input type="button" id="call" value="call"></input>     </div>     <div id="options">       <img src="./img/options.png">       <button id="endCall" value="endCall"></button>     </div>   </div>   <script src="./call.js"></script> </body> </html> body {   background: rgb(20, 20, 20);   color: white; } .container {   width: 350px;   height: 100%;   margin: auto; } .top {   width: 100%;   height: 20px;   margin-top: 20px; } #time {   font-size: 18px;   font-weight: 700; } #state {   float: right;   height: 100%; } #middle {   margin-top: 50px;   height: 80px;   position: relative; } #number {   margin: 0px;   position: absolute;   left: 50%;   transform: translateX(-50%);   width: 100%;   font-size: 35px;   text-align: center;   color: white;   overflow: hidden;   text-overflow: clip;   white-space: nowrap; } #calling {   position: absolute;   top: 70%;   left: 50%;   transform: translateX(-50%); } #buttons {   height: 450px;   margin: 0px 50px 0px 50px;   display: grid;   grid-template-rows: repeat(5, 1fr);   grid-template-columns: repeat(3, 1fr) ;   grid-gap: 15px; } #options {   margin: 30px 10px 30px 10px;   height: 350px;   text-align: center; } #buttons button{   border: none;   font-size: 35px;   font-weight: 700;   border-radius: 50%;   background: rgb(200, 200, 200); } #call {   grid-column: 2/3;   background: url(./img/call.png) no-repeat; /* 이미지 바꿀 것 */   background-size: 100%;   color: rgba(0, 0, 0, 0);   border: none; } #options img {   width: 100%;   background: url(./img/options.png) no-repeat; } #endCall {   margin-top: 50px;   width: 70px;   height: 70px;   background: url(./img/endCall.png) no-repeat; } #options button {   background-size: 100%;   border: none;   padding: 0px; } let now = new Date(); let time = String(now.getHours()) + ":" + String(now.getMinutes() < 10 ? "0" + now.getMinutes() : now.getMinutes()); let count = 0; let valueLangth = 0; let arr = ["김변수", "이에러", "오자바", "방코딩", "치킨집♥"]; const callAudio = new Audio(); callAudio.src = "./calling.mp3"; document.getElementById("time").innerText = time; document.getElementById("options").style.display = "none"; document.getElementById("calling").style.display = "none"; document.addEventListener("click", (event) => {   const target = event.target;ㅁ   const btnValue = target.value;   if (btnValue == "call") {     setTimeout(() => {       document.getElementById("buttons").style.display = "none";       document.getElementById("options").style.display = "block";       document.getElementById("calling").style.display = "block";       document.getElementById("number").innerText = arr[Math.floor(Math.random() * 5)];       callAudio.play();       timeoutId = setInterval(() => {         let dot = ".";         if (count > 2) {           count = 0;           document.getElementById("dot").innerText = "";         } else {           document.getElementById("dot").innerText += dot;           count++;         }       }, 500);     }, 1000);   }   if ((btnValue >= 0 && btnValue <= 9) || btnValue == "*" || btnValue == "#") {     if (valueLangth == 3 || valueLangth == 7) {       document.querySelector("#number").innerText += "-";     }     document.querySelector("#number").innerText += btnValue;     valueLangth++;   }   if (btnValue == "endCall") {     setTimeout(() => {       document.getElementById("options").style.display = "none";       document.getElementById("buttons").style.display = "grid";       document.getElementById("calling").style.display = "none";       document.getElementById("number").innerText = "";       clearInterval(timeoutId);       callAudio.pause();       count = 0;     },1000);   } });
YellowHan
2022.01.01
@YellowHan님이 새 포스트를 작성했습니다.
[JavaScript] 전광판
테스트 페이지 : https://yellowhan.github.io/lightBoard/    Step : 한 문자씩 출력   Play : 200ms당 한 문자씩 자동 출력    -> setInterval 함수 사용   Stop : 자동 출력 정지    -> clearInterval 함수 사용   Write : 유저가 직접 전광판에 들어갈 텍스트 입력 가능  -> Write 버튼 클릭 시 Save 버튼으로 변환    -> 입력 없이 Save 버튼 클릭 시 기존 텍스트 출력      텍스트의 길이가 board 라인을 벗어나지 않도록 초과되는 부분 만큼 텍스트가 좌측으로 이동    -> CSS : overflow / text-overflow / white-space 사용    -> JS : offsetWidth 사용, CSS 조작      모바일 : Android에서는 정상 출력 되나 ios에서는 가로 버전일 때, 문장 내 빈 공간(SpaceBar)이 생길 시       텍스트 위에 실 선이 나타나는 문제가 있음   <!DOCTYPE html> <html lang="kr">   <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="./layout.css" />   </head>   <body>     <div class="container">       <div id="board">         <span id="text"></span>         <input id="userText" type="text" placeholder="내용을 입력해주세요." value="" />       </div>       <div class="buttons">         <input id="step" type="button" value="Step" />         <input id="play" type="button" value="play" />         <input id="stop" type="button" value="stop" />         <input id="write" type="button" value="write" />         <input id="save" type="button" value="save" />       </div>     </div>     <script src="./lightBoard.js"></script>   </body> </html> @import url('https://fonts.googleapis.com/css2?family=Jua&display=swap'); body {   margin: 0;   background: black;   color: white;   font-family: 'Jua', sans-serif; } .container {   width: 90vw;   margin: auto; } #board {   height: 60vh;   margin: 30px;   border: 1px solid white;   border-radius: 10px;   font-size: 10rem;   overflow: hidden;   text-overflow: clip;   white-space: nowrap;   position: relative; } #text {   display: block;   position: absolute;   top: 50%;   left: 0%;   transform: translateY(-50%);   background: linear-gradient(to right bottom, yellow, rgb(255, 255, 255));   background-clip: text;   -webkit-background-clip: text;   color: transparent; } #userText {   display: none;   position: absolute;   top: 50%;   transform: translateY(-50%);   padding: 10px;   background: black;   font-size: 5rem;   color: white; } .buttons {   text-align: center; } .buttons input {   color: white;   background: black;   padding: 10px 30px 10px 30px;   margin: 10px;   border-radius: 10px; } #save {   display: none; } let str = "새해에는 부지런해질거야-!!"; let result = ""; let count = 0; let active = false; document.getElementById("step").onclick = function () {   if (active) {     clearInterval(timeoutId);     active = false;   }   if (str.length < count) {     reset();   } else {     check();     play();   } }; document.getElementById("play").onclick = function () {   if (!active) {     timeoutId = setInterval(function () {       if (str.length < count) {         reset();       }       active = true;       check()       play();     }, 200);   } }; document.getElementById("stop").onclick = function () {   if (active) {     clearInterval(timeoutId);     active = false;   } }; document.getElementById("write").onclick = function () {   document.getElementById("text").style.display = "none";   document.getElementById("userText").style.display = "block";   document.getElementById("write").style.display = "none";   document.getElementById("save").style.display = "inline-block";   document.getElementById("userText").value = ""; }; document.getElementById("save").onclick = function () {   result = "";   document.getElementById("text").innerText = result;   if (document.getElementById("userText").value != "") {     str = document.getElementById("userText").value;   }   document.getElementById("save").style.display = "none";   document.getElementById("write").style.display = "inline-block";   document.getElementById("text").style.display = "block";   document.getElementById("userText").style.display = "none"; }; function play() {   result += str.charAt(count);   document.getElementById("text").innerText = result;   count++; } function reset() {   document.getElementById("text").innerText = "";   result = "";   count = 0; } function check() {   if (document.getElementById("text").offsetWidth >= document.getElementById("board").offsetWidth) {     let gap = document.getElementById("text").offsetWidth - document.getElementById("board").offsetWidth;     document.getElementById("text").style.left = "-" + gap + "px";   }   else {     document.getElementById("text").style.left = "0px";   } }
YellowHan
2022.01.01
@YellowHan님이 새 포스트를 작성했습니다.
[JavaScript] 스톱워치
테스트 페이지 : https://yellowhan.github.io/timer/ https://yellowhan.github.io/timer_records/ 시, 분, 초로 출력 되는 스톱워치 (아래의 내용은 readme에 적었던 내용을 그래도 가져왔습니다.) Start : 시작 Stop : 정지 - Start를 누르면 다시 진행 Record : 현재 경과 시간을 타이머 하단에 출력 Circle Button : 시간 초기화(reset) ..... setInterval 사용으로 1000ms당 second(초)가 1씩 증가하여 59까지 출력 후 60이 되면 second = 0;으로 초기화 후 minute(분) 1증가 -> minute도 동일하게 59까지 출력 후 60이 되면 minute = 0;으로 초기화 후 hour(시) 1증가 하는 방법으로 구현 setInterval은 타이머가 취소 될 때까지 반복 -> clearInterval 함수로 호출 스케줄링 취소 setInterval 함수 사용 시 실행에 대한 제약이 없으면 setInterval를 호출(스톱워치의 경우 Start 버튼 클릭으로 호출)할 때마다 setInterval 호출이 늘어나 배속 증가 현상이 생기며 완전 정지를 위해 호출 된 횟수만큼 취소해야 함 setInterval의 중복 해결 방법 : active = false;로 선언 및 초기화 후 Start 버튼을 클릭 할 때 if문으로 조건 확인 후 실행 -> false일 때, 타이머 실행 및 false -> true -> true일 때, 현재 타이머 실행 중으로 Start 버튼을 눌러도 호출 X <!DOCTYPE html> <html lang="kr"> <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>Document</title> <link rel="stylesheet" href="./layout.css" /> </head> <body> <div class="container"> <div class="timerCover"> <div class="timeView"> <span id="time">00:00:00</span> </div> <div class="buttons"> <input id="start" type="button" value="Start" /> <input id="stop" type="button" value="Stop" /> <input id="record" type="button" value="Record" /> <input id="reset" type="button" /> </div> </div> <div id="recordsCover"> <p id="recordList"></p> </div> </div> <script src="./timer.js"></script> <script src="./record.js"></script> </body> </html> @import url("https://fonts.googleapis.com/css2?family=Dongle:wght@300&display=swap"); body { margin: 0px; } .container { width: 350px; margin: auto; } .timerCover { border: 1px solid gray; border-radius: 10px; margin: 30px; background: rgb(255, 255, 127); } .timeView { height: 50px; margin: 30px; border: 1px solid gray; border-radius: 10px; background: white; text-align: right; padding: 0px 10px 0px 10px; } #time { font-family: "Dongle", sans-serif; font-size: 35px; font-weight: 700; } .buttons { margin: 15px; padding-left: 15px; position: relative; } input { padding: 5px 10px 5px 10px; margin: 5px; border: 1px solid gray; border-radius: 10px; background-color: rgb(176, 246, 255); font-family: "Dongle", sans-serif; font-size: 20px; font-weight: 700; } #recordsCover { width: 80%; height: 100%; margin: auto; } #recordList { text-align: center; font-family: "Dongle", sans-serif; font-size: 30px; } #reset { border-radius: 50%; height: 20px; position: absolute; top: 50%; transform: translateY(-50%); } let hour = 0; let minute = 0; let second = 0; let active = false; document.getElementById("start").onclick = function () { if (active == false) { active = true; timeoutId = setInterval(function () { second++; if (second > 59) { second = 0; minute++; if (minute > 59) { minute = 0; hour++; if (hour > 59) { hour = 0; } } } document.getElementById("time").innerText = (hour < 10 ? "0" + hour : hour) + ":" + (minute < 10 ? "0" + minute : minute) + ":" + (second < 10 ? "0" + second : second); }, 1000); } }; document.getElementById("stop").onclick = function () { clearInterval(timeoutId); active = false; }; document.getElementById("reset").onclick = function () { clearInterval(timeoutId); active = false; hour = 0; minute = 0; second = 0; document.getElementById("time").innerText = "00:00:00"; }; let records = ""; document.getElementById("record").onclick = function () { records += document.getElementById("time").innerText + "\n"; document.getElementById("recordList").innerText = records; };
YellowHan
2022.01.01
@YellowHan님이 새 포스트를 작성했습니다.
[JavaScript] 사칙연산 계산기
테스트 페이지 : https://yellowhan.github.io/calculator_circle/ 처음 계산기를 만들 때 한번에 한 가지 연산만 되게 만들었었는데 코드를 수정해서 여러 연산자를 한번에 넣어도 결괏값이 출력 되게 바꿨어요. 1+2+3+ 와 같이 마지막이 연산자로 끝날 경우 마지막 연산자를 제외해서 결괏값이 NaN으로 나오지 않게 했고 결괏값에 추가 연산이 가능한데 연산자로 끝났을 때 "="를 누른 후 바로 숫자를 넣으면 NaN으로 값이 나오기 때문에 "="을 누른 후에는 연산자를 한번 눌러주고 숫자를 입력해야 정상 값이 나옵니다. view에는 과정과 결괏값을 볼 수 있도록 상하로 나누고 리셋 버튼을 추가해서 초기화 할 수 있도록 만들었고 현재는 콘솔에 출력 되는 값이 없지만 .js에서 //print 부분에 console.log(result);를 추가하면 콘솔에서도 결괏값을 확인할 수 있어요. <!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>Document</title> <link rel="stylesheet" href="./layout.css"> </head> <body> <div class="container"> <div class="cal"> <div class="view"> <span id="record"></span> <span id="result"></span> </div> <span id="reset">reset</span> <div class="wrapper"> <div class="numbers"> <div id="num1" onclick="play('1')">1</div> <div id="num2" onclick="play('2')">2</div> <div id="num3" onclick="play('3')">3</div> <div id="num4" onclick="play('4')">4</div> <div id="num5" onclick="play('5')">5</div> <div id="num6" onclick="play('6')">6</div> <div id="num7" onclick="play('7')">7</div> <div id="num8" onclick="play('8')">8</div> <div id="num9" onclick="play('9')">9</div> <div id="C" onclick="play('.')">.</div> <div id="num0" onclick="play('0')">0</div> <div id="equal" onclick="play('equal')">=</div> </div> <div class="operator"> <div id="add" onclick="play('+')">+</div> <div id="sub" onclick="play('-')">−</div> <div id="mul" onclick="play('*')">×</div> <div id="div" onclick="play('/')">÷</div> </div> </div> </div> </div> <script src="./calculator.js"></script> </body> </html> body { margin: 0px; background-color: black; } .container { width: 800px; height: 800px; margin: auto; text-align: center; background: url(./img/bg.png); background-size: 100%; position: relative; } .cal { width: 100%; height: 520px; position: absolute; top: 50%; transform: translateY(-50%); } .view { width: 50%; height: 80px; border: 1px solid gray; margin: 15px auto; text-align: right; padding: 0px 10px 0px 10px; font-size: 30px; background: white; border-radius: 5px; } #reset { float: right; margin-right: 200px; } .wrapper { display: flex; width: 80%; padding-left: 182px; margin: auto; } .operator { width: 100%; display: grid; grid-template-rows: repeat(4, 1fr); grid-gap: 10px; font-size: 35px; font-weight: 700; padding: 10px 10px 10px 0px; border-radius: 5px; flex: 0.16; } #add { border: 1px solid; border-radius: 5px; background: white; padding-top: 20px; } #sub { border: 1px solid; border-radius: 5px; background: white; padding-top: 20px; } #mul { border: 1px solid; border-radius: 5px; background: white; padding-top: 20px; } #div { border: 1px solid; border-radius: 5px; background: white; padding-top: 20px; } .numbers { width: 100%; height: 400px; padding: 10px; display: grid; grid-template-rows: repeat(4, 1fr); grid-template-columns: repeat(3, 1fr); grid-gap: 10px; font-size: 20px; font-weight: 700; border-radius: 5px; flex: 0.5; } #num1, #num2, #num3, #num4, #num5, #num6, #num7, #num8, #num9, #num0, #C, #equal { border: 1px solid black; border-radius: 5px; padding-top: 30px; background: white; } #record { display: block; font-size: 18px; } #reset { display: block; font-size: 20px; } let arrNum = new Array(); let arrOpe = new Array(); let i = 0; let result = 0.0; // input function play(n) { document.getElementById('record').innerText += n; if (parseInt(n) >= 0 && parseInt(n) < 10) { document.getElementById('result').innerText += n; } else { arrOpe[i] = n; arrNum[i] = document.getElementById('result').innerText; document.getElementById('result').innerText = ""; i++; } } document.getElementById('equal').onclick = function () { // calculate result = parseInt(arrNum[0]); arrNum[i] = document.getElementById('result').innerText; for (i = 0; i < arrOpe.length; i++) { if (arrOpe[i] == '+') { if(arrNum[i + 1] == "") { break; } else { result += parseInt(arrNum[i + 1]); } } if (arrOpe[i] == '-') { if(arrNum[i + 1] == "") { break; } else { result -= parseInt(arrNum[i + 1]); } } if (arrOpe[i] == '*') { if(arrNum[i + 1] == "") { break; } else { result *= parseInt(arrNum[i + 1]); } } if (arrOpe[i] == '/') { if(arrNum[i + 1] == "") { break; } else { result /= parseInt(arrNum[i + 1]); } } } // print document.getElementById('result').innerText = result; arrNum.splice(0, arrNum.length); arrOpe.splice(0, arrOpe.length); i = 0; } // reset document.getElementById('reset').onclick = function () { document.getElementById('result').innerText = ""; document.getElementById('record').innerText = ""; result = 0.0; arrNum.splice(0, arrNum.length); arrOpe.splice(0, arrOpe.length); i = 0; }
YellowHan
2021.12.31
@YellowHan님이 새 포스트를 작성했습니다.
[JavaScript] 카드형 _ 변수 타입 출력
테스트 페이지 : https://yellowhan.github.io/javascript_typeof/ 변수 타입, 선언 방법에 대해 복습 할 수 있도록 카드형으로 만들었어요. 카드를 뒤집으면 해당 타입의 설명을 볼 수 있고 콘솔에 타입이 출력됩니다. <!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>Console Check</title> <link rel="stylesheet" href="./layout.css"> </head> <body> <div class="container"> <h2>JavaScript의 타입에 대해 알아보아요-!!</h2> <div class="wrapper"> <div id="cover_1" class="cover"> Number </div> <div id="content_1"> <p> 나는 <b>숫자</b>예요!&#128512;<br> 다른 언어와 다르게<br> <span>정수와 실수를 구분하지 않아요.</span><br> <br> let age = 33;<br> let age = 33.333; </p> </div> <div id="cover_2" class="cover"> String </div> <div id="content_2"> <p> 나는 <b>문자열</b>이에요.&#128539;<br> <br> let str = "까꿍!";<br> let st = "밥뭇나~"; </p> </div> <div id="cover_3" class="cover"> Boolean </div> <div id="content_3"> <p> 나는 <b>참</b>과 <b>거짓</b>을 표현해요.&#128526;<br> 진실은 하나!!<br> <br> let u_like_chicken = true;<br> let u_like_vegetable = false; </p> </div> <div id="cover_4" class="cover"> Null </div> <div id="content_4"> <p> '<b>값</b>'이 정해지지 않았어요!&#128561;<br> 난 수수께끼~♬♪<br> <br> let what = null; </p> </div> <div id="cover_5" class="cover"> Nnderfined </div> <div id="content_5"> <p> 변수 선언은 했는데...<br> <b>타입</b>이 정해지지 않았어요!!&#128561;<br> <br> let kkk;<br> <br> </p> </div> <div id="cover_6" class="cover"> Object </div> <div id="content_6"> <p> <b>key</b>와 <b>value</b>를 갖고 있어요.&#128518;<br> <br> let info = { name : "꿀꿀", weight : 100 }<br> <br> key = name, weight<br> value = "꿀꿀", 100 </p> </div> </div> </div> <script src="./typeOf.js"></script> </body> </html> @import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic&display=swap'); body { margin: 0px; } .container { width: 800px; margin: 50px auto; font-family: 'Nanum Gothic', sans-serif; } h2 { margin-bottom: 50px; text-align: center; } .wrapper { width: 100%; height: 400px; display: grid; grid-template-rows: repeat(2, 2fr); grid-template-columns: repeat(3, 2fr); grid-gap: 10px; border-radius: 10px; } .cover { width: 100%; text-align: center; border-radius: 10px; font-weight: 700; padding: 85px 0px 85px 0px; } #content_1, #content_2, #content_3, #content_4, #content_5, #content_6 { display: none; padding: 10px; background: rgb(255, 215, 230); border-radius: 10px; } span { color: rgb(255, 0, 200); font-weight: 700; } #cover_1 { display: block; background: pink; } #cover_2 { display: block; background: pink; } #cover_3 { display: block; background: pink; } #cover_4 { display: block; background: pink; } #cover_5 { display: block; background: pink; } #cover_6 { display: block; background: pink; } document.getElementById('cover_1').onclick = function() { document.getElementById('cover_1').style.display = "none"; document.getElementById('content_1').style.display = "block"; let num = 0; console.log(typeof(num)); } document.getElementById('content_1').onclick = function() { document.getElementById('cover_1').style.display = "block"; document.getElementById('content_1').style.display = "none"; } document.getElementById('cover_2').onclick = function() { document.getElementById('cover_2').style.display = "none"; document.getElementById('content_2').style.display = "block"; let str = "치킨은 사랑입니다."; console.log(typeof(str)); } document.getElementById('content_2').onclick = function() { document.getElementById('cover_2').style.display = "block"; document.getElementById('content_2').style.display = "none"; } document.getElementById('content_2').onclick = function() { document.getElementById('cover_2').style.display = "block"; document.getElementById('content_2').style.display = "none"; } document.getElementById('cover_3').onclick = function() { document.getElementById('cover_3').style.display = "none"; document.getElementById('content_3').style.display = "block"; let u_like_chicken = true; console.log(typeof(u_like_chicken)); } document.getElementById('content_3').onclick = function() { document.getElementById('cover_3').style.display = "block"; document.getElementById('content_3').style.display = "none"; } document.getElementById('cover_4').onclick = function() { document.getElementById('cover_4').style.display = "none"; document.getElementById('content_4').style.display = "block"; let what = null; console.log("null의 type은 "+typeof(what)); //값이 존재하지 않아 typeof는 object가 출력 } document.getElementById('content_4').onclick = function() { document.getElementById('cover_4').style.display = "block"; document.getElementById('content_4').style.display = "none"; } document.getElementById('cover_5').onclick = function() { document.getElementById('cover_5').style.display = "none"; document.getElementById('content_5').style.display = "block"; let chicken; console.log(typeof(chicken)); } document.getElementById('content_5').onclick = function() { document.getElementById('cover_5').style.display = "block"; document.getElementById('content_5').style.display = "none"; } document.getElementById('cover_6').onclick = function() { document.getElementById('cover_6').style.display = "none"; document.getElementById('content_6').style.display = "block"; let info = { name : "꿀꿀", weight : 100 }; console.log(typeof(info)); } document.getElementById('content_6').onclick = function() { document.getElementById('cover_6').style.display = "block"; document.getElementById('content_6').style.display = "none"; }
YellowHan
2021.12.30
@YellowHan님이 새 포스트를 작성했습니다.
[JavaScript] 버튼 클릭 이벤트(+console.log)
테스트 페이지 : https://yellowhan.github.io/eat_pig/ 버튼 클릭 이벤트에 재미를 더하기 위해 이미지 파일(gif)을 만들어서 클릭 이벤트가 발생할 때마다 돼지가 빵을 먹는 것처럼 보이게 만들고 상단에 클릭한 수 만큼 숫자가 보이게 했다. console에서도 증가 값을 확인 할 수 있다. 클릭 했을 때만 빵을 먹는 것처럼 보이기 위해 setTimeout함수를 이용하여 클릭 하지 않았을 때는 정적 이미지를 보여주고 클릭 후 300ms 동안 gif 이미지가 보여지게 만들었다. <!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>Console Check</title> <link rel="stylesheet" href="./layout.css"> </head> <body> <div class="container"> <h3> 꿀꿀이의 먹방을 시작합니다</h3> <div class="countBox"> <p>꿀꿀이가 먹은 빵의 갯수는?</p> <p id="count">...</p> </div> <a id="pig"></a> <img id="eat_pig" src="./img/eat_pig.gif"> </div> <script src="./eatPig.js"></script> </body> </html> @import url('https://fonts.googleapis.com/css2?family=Single+Day&display=swap'); body { margin: 0px; } .container { width: 500px; height: 550px; margin: 50px auto; font-family: 'Single Day', cursive; text-align: center; } .countBox { width: 100%; height: 200px; padding-top: 50px; background: url(./img/cloudBox.png) no-repeat; } p { font-size: 15px; font-weight: 700; } #count { font-size: 40px; font-weight: 700; margin: 0px; } #pig { display: block; width: 100%; height: 300px; background: url(./img/bg_pig.png) no-repeat; background-size: 100%; } #eat_pig { display: none; width: 100%; } let count = 0; document.getElementById('pig').onclick = function() { document.getElementById('pig').style.display = "none"; document.getElementById('eat_pig').style.display = "block"; setTimeout(function() { document.getElementById('pig').style.display = "block"; document.getElementById('eat_pig').style.display = "none"; },300); ++count; document.getElementById('count').innerText = count; console.log(count); }
YellowHan
2021.12.30
@YellowHan님이 새 포스트를 작성했습니다.
[JavaScript] 삼행시
테스트 페이지 : https://yellowhan.github.io/three_lines/ 모 각 코 버튼을 누르면 각 운에 맞는 텍스트가 출력 되도록 만들고 유저가 직접 모 각 코에 맞게 삼행시를 만들고 출력해 볼 수 있도록 만들었다. 텍스트 입력 창에 아무것도 적지 않으면 기본으로 입력되어 있는 텍스트 또는 이전에 유저가 입력했던 텍스트가 나오고 입력 중 취소를 누르면 BackSpace를 누를 필요 없이 텍스트 입력 창에 적힌 내용이 지워진다. <!DOCTYPE html> <html lang="kr"> <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>Document</title> <link rel="stylesheet" href="./layout.css" /> </head> <body> <div class="container"> <main> <h2>모각코로 삼행시를 지어봐요♬♪</h2> <div class="buttons"> <button id="mo">모</button> <button id="gak">각</button> <button id="ko">코</button> </div> <div class="wrapper"> <div class="msg"> <p id="hidden_mo">모여봐요! 코딩친구들!</p> <p id="hidden_gak">각자하는 코딩은 외롭지만..</p> <p id="hidden_ko">코뮤니티에서 함께하면 외롭지 않아-!!</p> </div> <img class="rabong"src="./img/rabong_jump.gif" alt="점프하는 한라봉"> <img class="rabong" src="./img/rabong_jump.gif" alt="점프하는 한라봉"> </div> <div id="user_text"> <span>>> 내가 짓는 '모각코' 삼행시</span> <form> <label>모<input id="user_mo" type="text" value=""></label><br> <label>각<input id="user_gak" type="text" value=""></label><br> <label>코<input id="user_ko" type="text" value=""></label><br> <input id="send" class="user_btn" type="button" value="저장"> <input id="reset" class="user_btn" type="reset" value="취소"> </form> </div> </main> </div> <script src="./threeLines.js"></script> </body> </html> @import url('https://fonts.googleapis.com/css2?family=Dongle&family=Single+Day&display=swap'); body { margin: 0px; background: rgb(254, 255, 185); } .container { width: 80vw; height: 100%; font-size: 1rem; margin: auto; } main { font-family: 'Single Day', cursive; } main h2 { margin-bottom: 30px; } .wrapper { width: 100%; height: 200px; display: flex; flex-direction: row; float: left; margin-bottom: 30px; } .rabong { flex: 0.2; } main button { width: 50px; height: 50px; border: 1px solid gray; border-radius: 5px; font-family: 'Single Day', cursive; font-size: 20px; font-weight: 700; text-align: center; margin: 15px; cursor: pointer; box-shadow: 1px 1px 4px 0px; } .msg { width: 100%; flex: 0.5; font-size: 1.4rem; display: flex; flex-direction: column; } .msg > p { flex: 1; } #hidden_mo { display: none; } #hidden_gak { display: none; } #hidden_ko { display: none; } input { display: inline-block; width: 250px; height: 25px; margin: 15px; } .user_btn { width: 80px; height: 80px; margin-left: 40px; background: url(./img/rabong_btn.png); background-size: 100%; border: 0px; font-size: 20px; font-family: 'Single Day', cursive; } document.getElementById('mo').onclick = function() { document.getElementById('hidden_mo').style.display = "block"; } document.getElementById('gak').onclick = function() { document.getElementById('hidden_gak').style.display = "block"; } document.getElementById('ko').onclick = function() { document.getElementById('hidden_ko').style.display = "block"; } document.querySelector('#send').onclick = function() { var mo = document.getElementById('user_mo').value; let gak = document.querySelector('#user_gak').value; let ko = document.querySelector('#user_ko').value; if(mo != "") { document.getElementById('hidden_mo').innerHTML = mo; } if(gak != "") { document.getElementById('hidden_gak').innerHTML = gak; } if(ko != "") { document.getElementById('hidden_ko').innerHTML = ko; } document.getElementById('hidden_mo').style.display = "none"; document.getElementById('hidden_gak').style.display = "none"; document.getElementById('hidden_ko').style.display = "none"; document.getElementById('user_mo').value = ""; document.getElementById('user_gak').value = ""; document.getElementById('user_ko').value = ""; }
YellowHan
2021.12.30
@YellowHan님이 새 포스트를 작성했습니다.
[JavaScript] ChatBot layout 만들기
테스트 페이지 : https://yellowhan.github.io/chat_bot/ HTML+CSS 과정 수료 후 참여하는 자바스크립트 과정이라 예시처럼 만드는 것은 어렵지 않았다. 아직은 html, css로만 만들어진 페이지라서 취소 버튼 외에 활성화된 기능은 없다. (취소 버튼 : 텍스트 창에 입력된 내용 지우기) 챗봇이 하는 말을 넣을 부분은 네모난 박스보다 말풍선 모양이 더 재미있을 것 같아서 이미지를 직접 그려서 background에 넣었다. 캐릭터도 문답에 어울리는 행동을 취하는 모습을 보여주기 위해 gif파일로 만들 예정이다. 예시에는 없지만 취소 버튼을 넣은 이유는 유저가 텍스트를 입력하고 보내기 후 입력 텍스트에 그대로 남는 문장을 지우기 위한 용도인데 보내기를 눌렀을 때, 바로 지워지게 만들면 무슨 문장을 적고 봇이 대답을 했는지 확인이 어려울 것 같아 추가했다. <!DOCTYPE html> <html lang="kr"> <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>ChatBot</title> <link rel="stylesheet" href="./layout.css"> </head> <body> <div id="container"> <div class="bot_msg"> <p>겨울엔 비타민C 가득한<br> 한라봉이 최고지-!!</p> </div> <div class="bot_img"> <img src="./img/default.png"> </div> <form> <input class="user_msg" type="text" placeholder="메시지를 입력해주세요"> <div class="buttons"> <button class="send" type="submit">보내기</button> <button class="cancel" type="reset">취소</button> </div> </form> </div> </body> </html> body { margin: 0px; background: rgb(255, 255, 230); } #container { margin: 50px auto; width: 800px; height: 600px; display: flex; flex-direction: column; text-align: center; } .bot_msg { flex: 0.6; background: url(./img/msg.png) no-repeat center; background-size: 60%; font: 20px; position: relative; } .bot_msg p { margin: 0px; position: absolute; top: 35%; left: 50%; transform: translate(-50%, -50%); } .bot_img { flex: 1; margin: auto; } .bot_img > img { height: 260px; } .user_msg { background: rgba(255, 255, 255, 0); width: 50%; height: 30%; padding: 0px 10px 0px 10px; text-align: center; font-size: 15px; border: 2px solid gray; border-radius: 10px; } form { flex: 0.4; margin-top: 30px; } .buttons { margin: 30px auto; } button { background: rgb(255, 238, 0); padding: 15px; border-radius: 25px; border: none; color: gray; font-size: 20px; font-weight: 600; box-shadow: 2px 2px 5px 0px gray; } .send { width: 40%; }