티스토리 뷰
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Simple Twitter Clone</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div id="input_container">
<input type="text" id="tweetInput" placeholder="메시지를 입력하세요." />
<button id="postTweet">게시</button>
</div>
<div id="tweets_container"></div>
<script src="script.js"></script>
</body>
</html>
CSS
body {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
max-width: 600px;
margin: auto;
padding: 20px;
background-color: #f0f2f5;
color: #444;
}
#input_container {
display: flex;
}
#tweetInput {
width: 100%;
padding: 10px 15px;
border: 2px solid #1da1f2;
border-radius: 20px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
outline: none;
font-size: 16px;
}
#postTweet {
padding: 10px 20px;
background-color: #1da1f2;
color: white;
border: none;
border-radius: 20px;
cursor: pointer;
font-weight: bold;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
transition: background-color 0.2s;
width: 120px;
margin-left: 12px;
}
#postTweet:hover {
background-color: #1482c6;
}
#tweets_container {
margin-top: 20px;
background-color: white;
border-radius: 10px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
overflow: hidden;
}
.tweet {
display: flex;
align-items: center;
justify-content: space-between;
padding: 15px;
border-bottom: 1px solid #e1e8ed;
}
.tweet:last-child {
border-bottom: none;
}
.tweet-text {
flex-grow: 1;
margin-right: 10px;
}
.like-button {
cursor: pointer;
background: none;
border: none;
color: #657786;
font-size: 20px;
}
.like-button:hover {
color: #1da1f2;
}
.like-counter {
font-size: 16px;
color: #657786;
margin-left: 5px;
}
JS
/* -----------------------------------------------------------------------------*/
// <요구사항>
// 1. input에 트윗을 입력하고 '게시'버튼을 누르면 트윗이 생성되어야 합니다.
// 2. 생성된 트윗은 게시글, 좋아요 버튼, 좋아요 카운트하는 요소를 포함해야 합니다.
// 3. input에 아무것도 입력되어 있지 않으면 트윗이 생성되지 않아야 합니다. (if문)
// 4. 좋아요 버튼을 클릭하면 좋아요 카운트가 1씩 증가해야 합니다.
// 5. styles.css 파일을 보고 새롭게 생성한 요소에 class를 추가하면 미리 작성해둔 스타일이 적용됩니다.
// 6. 스타일은 마음껏 수정해도 좋습니다.
/* -----------------------------------------------------------------------------*/
// 트윗 게시 버튼 요소
const postTweet = document.querySelector('#postTweet');
postTweet.addEventListener('click', function () {
// 트윗을 입력할 input 요소
const tweetInput = document.querySelector('#tweetInput');
// 트윗이 게시될 컨테이너
let div = document.createElement('div');
div.className = 'tweet';
// 트윗 내용
let p = document.createElement('p');
p.className = 'tweet-text';
p.textContent = tweetInput.value;
// 좋아요 버튼
let like = document.createElement('button');
like.textContent = '💙';
like.className = 'like-button';
// 좋아요 카운트
let counterContainer = document.createElement('span');
counterContainer.className = 'like-counter';
let counter = 0;
counterContainer.textContent = counter;
const tweetsContainer = document.querySelector('#tweets_container');
// 여기에 코드를 입력하세요.
// 카운트 증가
like.addEventListener('click', function () {
counter += 1;
counterContainer.textContent = counter;
});
if (tweetInput.value === '') {
alert('내용을 입력해 주세요.');
} else {
tweetsContainer.appendChild(div);
div.appendChild(p);
div.appendChild(like);
div.appendChild(counterContainer);
}
});
카운트 증가를 할 때, counter += 1 을 주고
counterContainer.textContent = counter; 을 줘야하는걸 항상 까먹는 것 같다.
또 value 와 textContent 를 헷갈리지 말아야 한다.
'실습' 카테고리의 다른 글
| 햄버거 주문서 만들기 (0) | 2024.04.12 |
|---|---|
| 시계만들기 (1) | 2024.04.12 |
| 회원가입 폼 만들기 (0) | 2024.04.12 |
| 문자열의 길이만큼 div 생성하기 (1) | 2024.04.05 |
| todo 만들기 (0) | 2024.04.03 |