반응형
깨깨오톡
주어진 HTML/CSS 코드를 분석한 후, 자바스크립트로 아래의 조건들을 따라서 기능을 추가해주세요:
- 메시지를 입력하고 '전송' 버튼을 클릭하면 새로운 말풍선이 생깁니다.
- 친구가 보낸 말풍선은 .friend-bubble 클래스를 갖고 있지만, 내가 보낸 말풍선은 .my-bubble 클래스를 갖고 있습니다.
- 메시지가 전송되면 <textarea>는 다시 빈 칸이 됩니다.
- <textarea>가 비어 있으면 메시지는 보내지지 않습니다.
<!DOCTYPE html>
<html>
<head>
<title>깨깨오톡</title>
<meta charset="utf-8">
<link rel="stylesheet" href="styles.css">
<link href="https://fonts.googleapis.com/earlyaccess/notosanskr.css" rel="stylesheet">
</head>
<body>
<div class="chat-container">
<div class="chat-header">
<button id="close" class="header-btn"></button>
<button id="minimize" class="header-btn"></button>
<button id="maximize" class="header-btn"></button>
<img id="profile-pic" src="siri.jpeg" width="50" height="50">
<span id="username">siri</span>
</div>
<div class="chatbox">
<div class="friend-bubble bubble">
잘 지내?
</div>
<div class="friend-bubble bubble">
자니?
</div>
</div>
<div class="text-box">
<textarea id="new-message" placeholder="대화내용이 들어갑니다."></textarea>
<button id="send">전송</button>
<div class="clearfix"></div>
</div>
</div>
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<script src="script.js"></script>
</body>
</html>* {
box-sizing: border-box;
}
body {
background-image: url('background.jpg');
font-family: 'Noto Sans KR', sans-serif;
}
.chat-container {
margin: 60px auto;
width: 400px;
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.50);
transition: width 0.3s ease;
}
.chat-header {
background-color: white;
position: relative;
padding: 30px 8px 8px 8px;
}
.chat-header .header-btn {
border-radius: 50%;
border: none;
width: 12px;
height: 12px;
cursor: pointer;
position: absolute;
top: 8px;
padding: 0;
}
.chat-header #close {
background-color: #ff6059;
left: 8px;
}
.chat-header #minimize {
background-color: #ffbf2f;
left: 26px;
}
.chat-header #maximize {
background-color: #29cd42;
left: 44px;
}
.chat-header #profile-pic {
vertical-align: middle;
border-radius: 50%;
}
.chat-header #username {
vertical-align: middle;
font-size: 14px;
font-weight: 500;
margin-left: 5px;
color: #343434;
}
/* chat box */
.chatbox {
height: 400px;
background-color: #d7e4f2;
padding: 10px;
overflow-y: scroll;
position: relative;
}
.bubble {
margin: 5px 0;
display: inline-block;
max-width: 300px;
font-size: 14px;
position: relative;
}
.friend-bubble {
background-color: white;
border-radius: 14px 14px 14px 0;
padding: 7px 15px 7px 15px;
float: left;
clear: both;
}
.my-bubble {
background-color: #fff46d;
border-radius: 14px 14px 0px 14px;
padding: 7px 15px 7px 15px;
float: right;
clear: both;
}
/* text box */
.text-box {
background-color: #fafafa;
padding: 10px;
}
.text-box textarea {
height: 60px;
float: left;
width: calc(100% - 70px);
border-radius: 3px;
background-color: #ffffff;
border: solid 0.5px #d7d7d7;
resize: none;
padding: 10px;
font-size: 14px;
}
#send {
background-color: #4a90e2;
width: 60px;
height: 60px;
color: white;
border: none;
border-radius: 3px;
cursor: pointer;
margin-left: 10px;
float: left;
}
.clearfix {
clear: both;
}$('#send').on('click', sendText);
function sendText() {
var newMessage = $('#new-message').val();
if (newMessage != '') {
$('.chatbox').append('<div class="my-bubble bubble">' + newMessage + '</div>');
$('#new-message').val('');
}
}본 내용은 Codeit의 'jQuery' 강의를
참고하여 작성한 내용입니다.
반응형
'Front-end > jQuery' 카테고리의 다른 글
| [jQuery 활용하기] 03. jQuery 2 (0) | 2021.02.22 |
|---|---|
| [jQuery 활용하기] 03. jQuery 2 (0) | 2021.02.21 |
| [jQuery 활용하기] 01. jQuery 1 (0) | 2021.02.19 |
| [jQuery 활용하기] 01. jQuery 1 (0) | 2021.02.19 |
| [jQuery 시작하기] 04. 프로젝트: 드럼 시퀀서 (0) | 2021.02.19 |