안녕하세요!
조신선입니다.
오늘은 일전에 포스팅했던 '오늘의 운세보기' 웹페이지 개발 코드 공유를 드리도록 하겠습니다. 유투버 조코딩님 교육자료를 보고 배워서 따라 만든 코드인데, 제가 css를 조금 더 변경했습니다.
초보자분들은 사실 이 코드만 보면 바로 이해가 안 되시겠지만, 저도 보고 배운거라 교육자료를 따로 올리기 보다는 코드만 공유하는 쪽으로 방향을 정했습니다.
아직 광고 승인은 안 났지만, 구글애드센스 신청을 해놓은 상태입니다.
완성코드에 보면 위와 같은 광고 애드센스 코드가 추가되어 있습니다.
우선 프론트엔드 코드 먼저 공유드릴께요.
코드 실행 화면
생년월일을 입력해주세요.
사주 명리학을 근간으로 당신의 운세를 알려드릴께요🪐
아래 코드를 실행하면 첫번째 페이지에 아래 이미지와 같은 웹페이지가 노출됩니다.
그리고 생년월일과 태어난 시간을 입력하고 오늘의 운세보기를 클릭하면
아래 챗봇 페이지로 이동을 합니다.
코드 설명
해당 코드는 HTML과 CSS로 이루어진 웹 페이지를 만들기 위한 코드입니다.
HTML은 웹 페이지의 구조를 정의하는 마크업 언어이며, CSS는 웹 페이지의 스타일을 지정하는 스타일 시트 언어입니다.
해당 코드는 오늘의 운세를 제공하는 챗봇을 만들기 위한 코드입니다.
코드에서는 먼저 HTML 태그를 사용하여 웹 페이지의 구조를 정의합니다.
<head> 태그 안에서는 문서의 메타데이터를 정의하고, 스타일 시트와 외부 라이브러리를 로드합니다.
<body> 태그 안에서는 실제 웹 페이지의 내용을 정의합니다.
CSS를 사용하여 웹 페이지의 스타일을 지정하고, 페이지의 요소들을 배치합니다.
페이지의 배경 이미지, 챗박스, 챗 입력창 등이 CSS로 스타일링되어 있으며, 챗 메시지의 스타일과 색상, 댓글 창의 크기 등이 정의되어 있습니다.
이 코드는 또한 Font Awesome과 같은 외부 라이브러리도 사용하고 있습니다. 이 라이브러리는 웹 페이지에서 아이콘을 쉽게 사용할 수 있도록 도와줍니다.
※완성 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>오늘의 운세 - 챗신선🪐.</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css"
integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<style>
body {
background-image: url('https://www.marcoguglie.it/Codepen/AnimatedHeaderBg/demo-1/img/demo-1-bg.jpg');
background-size: cover;
background-position: center;
}
.intro-container {
background-color: rgba(0, 0, 0, 0.8);
color: #fff;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.chat-box {
background-color: rgba(255, 255, 255, 0.3);
/* 배경색 변경 */
padding: 10px;
border-radius: 10px;
margin-bottom: 20px;
overflow-y: scroll;
min-height: 250px;
max-height: 700px;
min-width: 700;
max-width: 1200;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
/* 그림자 추가 */
}
.chat-message {
background-color: rgba(255, 255, 255, 0.8);
/* 배경색 변경 */
padding: 10px;
border-radius: 10px;
margin-bottom: 10px;
color: #000;
/* 글자색 변경 */
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
/* 그림자 추가 */
font-size: 30px;
}
.chat-container {
background-color: rgba(0, 0, 0, 0.8);
color: #fff;
max-height: 1500px;
display: flex;
margin: 0 auto;
max-width: 800px;
}
.chat-input {
display: flex;
margin-top: 20px;
font-size: 30px;
}
.chat-input input {
flex: 1;
padding: 10px;
border: none;
border-radius: 5px;
margin-right: 10px;
font-size: 30px;
}
.chat-input button {
background-color: #4CAF50;
color: #fff;
border: none;
padding: 10px;
border-radius: 5px;
cursor: pointer;
}
.chat-input button:hover {
background-color: #3e8e41;
}
.assistant {
color: #e1a95f;
/* 글자색 변경 */
font-weight: bold;
}
.intro-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: white;
}
.intro-container img {
width: 50%;
min-width: 300px;
}
#loader {
font-size: 25px;
text-align: center;
}
img {
max-width: 500px;
/* Set the width to 200 pixels */
max-height: 550px;
/* Set the height to 150 pixels */
border: 1px solid rgba(255, 255, 255, 0.2);
/* Border with translucent white color */
border-radius: 10px;
/* Border radius for rounded corners */
opacity: 0.7;
/* Opacity for translucency */
}
.pop-up {
position: fixed;
margin: 5% auto;
left: 0;
right: 0;
z-index: 2;
}
.box {
width: 300px;
/* 추가된 속성 */
background-color: whitesmoke;
text-align: center;
margin-left: auto;
margin-right: auto;
margin-top: 10%;
position: relative;
-webkit-box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.1);
box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.1);
}
.button {
margin: auto;
background-color: #000000;
margin-bottom: 33px;
}
.button:hover {
background-color: #7CCF29;
-webkit-box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.1);
box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.1);
}
.close-button {
transition: all 0.5s ease;
position: absolute;
background-color: #000000;
padding: 1.5px 7px;
left: 0;
margin-left: -10px;
margin-top: -9px;
border-radius: 50%;
border: 2px solid #fff;
color: white;
-webkit-box-shadow: -4px -2px 6px 0px rgba(0, 0, 0, 0.1);
-moz-box-shadow: -4px -2px 6px 0px rgba(0, 0, 0, 0.1);
box-shadow: -3px 1px 6px 0px rgba(0, 0, 0, 0.1);
}
.close-button:hover {
background-color: tomato;
color: #fff;
}
h3 {
text-align: center;
padding-top: 15px;
padding-bottom: 15px;
color: #fff;
background-color: #000000;
}
p {
padding: 20px 65px 10px 65px;
color: dimgray;
}
h1 {
text-align: center;
font-size: 40px;
}
.label {
font-size: 35px;
/* You can adjust the font size as needed */
}
.input {
font-size: 35px;
/* You can adjust the font size as needed */
}
.button2 {
font-size: 35px;
/* You can adjust the font size as needed */
}
</style>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-2076538781212133"
crossorigin="anonymous"></script>
</head>
<body>
<div id="intro" class="intro-container">
<h1> 생년월일을 입력해주세요. <br> 사주 명리학을 근간으로 당신의 운세를 알려드릴께요🪐 </h1>
<img src="https://chatdoge-jofresh.pages.dev/doge.png" alt="chatdoge">
<label for="date" class="label">생년월일</label>
<input id="date" type="date" class="input">
<label for="hour" class="label">태어난 시간</label>
<select id="hour" name="hour" class="input">
<option value="">모름</option>
<option value="00">00</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
</select>
<button onclick="start()" class="button2">오늘의 운세보기</button>
</div>
<div id="chat" class="chat-container" style="display: none;">
<div class="chat-box">
<div class="chat-message">
<p class="assistant">운세에 대해서 물어봐 주세요. 사랑, 건강, 일 무엇이든 대답해드릴께요. </p>
</div>
</div>
<div id="loader" class="loader" style="display: none;">
<i class="fa fa-spinner fa-spin"></i>
</div>
<div class="chat-input">
<input type="text" placeholder="Type your message here..." onkeydown="handleKeyPress(event)">
<button id="btn" onclick="spinner()">Send</button>
</div>
</div>
<script>
const chatBox = document.querySelector('.chat-box');
let userMessages = [];
let assistantMessages = [];
let myDateTime = ''
function spinner() {
document.getElementById('loader').style.display = "block";
}
function start() {
const date = document.getElementById('date').value;
const hour = document.getElementById('hour').value;
if (date === '') {
alert('생년월일을 입력해주세요.');
return;
}
myDateTime = date + hour;
document.getElementById("intro").style.display = "none";
document.getElementById("chat").style.display = "block";
}
const sendMessage = async () => {
const chatInput = document.querySelector('.chat-input input');
const chatMessage = document.createElement('div');
chatMessage.classList.add('chat-message');
chatMessage.innerHTML = `
<p>${chatInput.value}</p>
`;
chatBox.appendChild(chatMessage);
//userMessage 메세지 추가
userMessages.push(chatInput.value);
chatInput.value = '';
const response = await fetch('https://q7b1bwkay8.execute-api.ap-southeast-2.amazonaws.com/prod/4ju8ja', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
myDateTime: myDateTime,
userMessages: userMessages,
assistantMessages: assistantMessages,
})
});
const data = await response.json();
document.getElementById('loader').style.display = "none";
//assistantMessage 메세지 추가
assistantMessages.push(data.assistant);
const astrologerMessage = document.createElement('div');
astrologerMessage.classList.add('chat-message');
astrologerMessage.innerHTML = `<p class='assistant'>${data.assistant}</p>`;
const p = document.createElement('p');
p.innerHTML = '💗추가로 링크를 눌러 작은 정성 배풀어주시면 행운 가득한 하루가 되실겁니다💗. => ';
p.classList.add("assistant");
const link = document.createElement('a');
link.href = 'https://toss.me/우주의조신선';
link.innerHTML = '복채 보내기';
p.appendChild(link);
astrologerMessage.appendChild(p);
"<p> <a href='https://toss.me/우주의조신선'>복채 보내기</a></p>";
chatBox.appendChild(astrologerMessage);
};
document.querySelector('.chat-input button').addEventListener('click', sendMessage);
function handleKeyPress(event) {
if (event.keyCode === 13) { // 13 represents the "Enter" key
event.preventDefault(); // Prevents the default behavior of the "Enter" key in input field
document.getElementById("btn").click(); // Simulates the click of the "Send" button
}
}
</script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(function () {
$('.pop-up').hide();
$('.pop-up').fadeIn(1000);
$('.close-button').click(function (e) {
$('.pop-up').fadeOut(700);
$('#overlay').removeClass('blur-in');
$('#overlay').addClass('blur-out');
e.stopPropagation();
});
});
</script>
</body>
</html>
https://dash.cloudflare.com/
위 사이트는 프론트엔드 도메인 코드를 무료로 배포할 수 있는 사이트입니다.
2023.04.18 - [programming/JAVA] - HTML, CSS, JS의 관계 & codepen.io 활용방법
도메인을 만들기 전에는 codepen.io 사이트를 활용해서 내가 만든 html 코드가 어떻게 실행되는지 미리 살펴보고,
완성되면 클라우드플레어 사이트를 활용해서 실제로 타인이 접속할 수 있는 사이트로 만드시면 됩니다!
2편에서는 node js로 백엔드 코드도 공유드리도록 하겠습니다.
'programming > JavaScript' 카테고리의 다른 글
[html/next.js] next.js 공부해야 하는 이유! (사용,설치 방법&기초 문법 포함) (0) | 2023.05.10 |
---|---|
[웹개발/html] 2탄_백엔드_OPENAI API를 활용한 '오늘의 운세보기' 웹페이지 개발 (0) | 2023.05.05 |
[JAVA/API활용] kakao maps API 활용해서 지도 만들기!! (0) | 2023.04.21 |
node js 기초 문법 강의&필수 모듈(ex:express) 이용 방법 (0) | 2023.04.19 |
HTML, CSS, JS의 관계 & codepen.io 활용방법 (0) | 2023.04.18 |