728x90
반응형
안녕하세요!
조신선입니다.
오늘은 일전에 포스팅했던 '오늘의 운세보기' 웹페이지 개발 코드 공유를 드리도록 하겠습니다. 유투버 조코딩님 교육자료를 보고 배워서 따라 만든 코드인데, 제가 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 활용방법
HTML, CSS, JS의 관계 & codepen.io 활용방법
안녕하세요! 조신선입니다. 원래는 CSS 기초 문법을 작성하려고 했지만, 자바 삼총사의 개념을 먼저 잡는 것이 좋을 것 같아서 JAVA의 기초인 삼총사를 먼저 간단하게 짚고 넘어가도록 하겠습니다
jofresh.tistory.com
도메인을 만들기 전에는 codepen.io 사이트를 활용해서 내가 만든 html 코드가 어떻게 실행되는지 미리 살펴보고,
완성되면 클라우드플레어 사이트를 활용해서 실제로 타인이 접속할 수 있는 사이트로 만드시면 됩니다!
2편에서는 node js로 백엔드 코드도 공유드리도록 하겠습니다.
728x90
반응형
'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 |