오늘은 리뷰만들기를 해보겠습니다.
다음은 app.js파일의 설명입니다.
1. reviews 배열은 리뷰 데이터를 저장합니다. 각 리뷰는 사람의 이름, 직업, 이미지 URL, 그리고 리뷰 텍스트를 포함하는 객체입니다.
2. document.getElementById와 document.querySelector를 사용해 HTML 문서의 요소들을 선택합니다.
3. window.addEventListener('DOMContentLoaded', function () {...}); 코드는 문서의 로딩이 완료되었을 때 초기 리뷰를 화면에 표시하기 위해 사용됩니다.
4. showPerson 함수는 주어진 person 인덱스에 해당하는 리뷰 정보를 UI에 표시합니다.
5. nextBtn, prevBtn, randomBtn에 대한 이벤트 리스너를 설정하여 버튼 클릭 시 해당 동작을 수행합니다. 다음 버튼은 배열의 다음 리뷰를, 이전 버튼은 이전 리뷰를, 랜덤 버튼은 랜덤한 리뷰를 표시합니다. 또한, 배열의 범위를 넘어서지 않도록 조건문을 사용하여 인덱스를 관리합니다.
app.js
// 로컬 리뷰 데이터
const reviews = [
// 각 객체는 하나의 리뷰를 나타냄: id, 이름, 직업, 이미지 URL, 리뷰 텍스트 포함
{
id: 1,
name: 'susan smith',
job: 'web developer',
img: 'https://www.course-api.com/images/people/person-1.jpeg',
text: "I'm baby meggings twee health goth +1. Bicycle rights tumeric chartreuse before they sold out chambray pop-up. Shaman humblebrag pickled coloring book salvia hoodie, cold-pressed four dollar toast everyday carry",
},
{
id: 2,
name: 'anna johnson',
job: 'web designer',
img: 'https://www.course-api.com/images/people/person-2.jpeg',
text: 'Helvetica artisan kinfolk thundercats lumbersexual blue bottle. Disrupt glossier gastropub deep v vice franzen hell of brooklyn twee enamel pin fashion axe.photo booth jean shorts artisan narwhal.',
},
{
id: 3,
name: 'peter jones',
job: 'intern',
img: 'https://www.course-api.com/images/people/person-4.jpeg',
text: 'Sriracha literally flexitarian irony, vape marfa unicorn. Glossier tattooed 8-bit, fixie waistcoat offal activated charcoal slow-carb marfa hell of pabst raclette post-ironic jianbing swag.',
},
{
id: 4,
name: 'bill anderson',
job: 'the boss',
img: 'https://www.course-api.com/images/people/person-3.jpeg',
text: 'Edison bulb put a bird on it humblebrag, marfa pok pok heirloom fashion axe cray stumptown venmo actually seitan. VHS farm-to-table schlitz, edison bulb pop-up 3 wolf moon tote bag street art shabby chic. ',
},
];
// DOM 요소 선택
const img = document.getElementById('person-img'); // 이미지
const author = document.getElementById('author'); // 저자 이름
const job = document.getElementById('job'); // 직업
const info = document.getElementById('info'); // 리뷰 텍스트
const prevBtn = document.querySelector('.prev-btn'); // 이전 버튼
const nextBtn = document.querySelector('.next-btn'); // 다음 버튼
const randomBtn = document.querySelector('.random-btn'); // 랜덤 버튼
// 시작 아이템 설정
let currentItem = 0;
// 초기 아이템 로드
window.addEventListener('DOMContentLoaded', function () {
// 페이지 로드 시 첫 번째 리뷰 표시
const item = reviews[currentItem];
img.src = item.img;
author.textContent = item.name;
job.textContent = item.job;
info.textContent = item.text;
});
// person을 기반으로 한 사람 표시
function showPerson(person) {
// 특정 리뷰를 UI에 표시
const item = reviews[person];
img.src = item.img;
author.textContent = item.name;
job.textContent = item.job;
info.textContent = item.text;
}
// 다음 사람 표시 이벤트 리스너
nextBtn.addEventListener('click', function () {
// 다음 버튼 클릭 시 다음 리뷰 표시, 마지막 리뷰 후에는 첫 번째 리뷰로 돌아감
currentItem++;
if (currentItem > reviews.length - 1) {
currentItem = 0;
}
showPerson(currentItem);
});
// 이전 사람 표시 이벤트 리스너
prevBtn.addEventListener('click', function () {
// 이전 버튼 클릭 시 이전 리뷰 표시, 첫 번째 리뷰에서 이전 버튼 클릭 시 마지막 리뷰로 이동
currentItem--;
if (currentItem < 0) {
currentItem = reviews.length - 1;
}
showPerson(currentItem);
});
// 랜덤 사람 표시 이벤트 리스너
randomBtn.addEventListener('click', function () {
// 랜덤 버튼 클릭 시 랜덤 리뷰 표시
console.log('hello');
currentItem = Math.floor(Math.random() * reviews.length);
showPerson(currentItem);
});
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Starter</title>
<!-- font-awesome -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
/>
<!-- styles -->
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<main>
<section class="container">
<!-- title -->
<div class="title">
<h2>our reviews</h2>
<div class="underline"></div>
</div>
<!-- review -->
<article class="review">
<div class="img-container">
<img src="https://www.course-api.com/images/people/person-1.jpeg" id="person-img" alt="" />
</div>
<h4 id="author">sara jones</h4>
<p id="job">ux designer</p>
<p id="info">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto
asperiores debitis incidunt, eius earum ipsam cupiditate libero?
Iste, doloremque nihil?
</p>
<!-- prev next buttons-->
<div class="button-container">
<button class="prev-btn">
<i class="fas fa-chevron-left"></i>
</button>
<button class="next-btn">
<i class="fas fa-chevron-right"></i>
</button>
</div>
<!-- random button -->
<button class="random-btn">surprise me</button>
</article>
</section>
</main>
<!-- javascript -->
<script src="app.js"></script>
</body>
</html>
styles.css
/*
===============
Fonts
===============
*/
@import url("https://fonts.googleapis.com/css?family=Open+Sans|Roboto:400,700&display=swap");
/*
===============
Variables
===============
*/
:root {
/* dark shades of primary color*/
--clr-primary-1: hsl(205, 86%, 17%);
--clr-primary-2: hsl(205, 77%, 27%);
--clr-primary-3: hsl(205, 72%, 37%);
--clr-primary-4: hsl(205, 63%, 48%);
/* primary/main color */
--clr-primary-5: hsl(205, 78%, 60%);
/* lighter shades of primary color */
--clr-primary-6: hsl(205, 89%, 70%);
--clr-primary-7: hsl(205, 90%, 76%);
--clr-primary-8: hsl(205, 86%, 81%);
--clr-primary-9: hsl(205, 90%, 88%);
--clr-primary-10: hsl(205, 100%, 96%);
/* darkest grey - used for headings */
--clr-grey-1: hsl(209, 61%, 16%);
--clr-grey-2: hsl(211, 39%, 23%);
--clr-grey-3: hsl(209, 34%, 30%);
--clr-grey-4: hsl(209, 28%, 39%);
/* grey used for paragraphs */
--clr-grey-5: hsl(210, 22%, 49%);
--clr-grey-6: hsl(209, 23%, 60%);
--clr-grey-7: hsl(211, 27%, 70%);
--clr-grey-8: hsl(210, 31%, 80%);
--clr-grey-9: hsl(212, 33%, 89%);
--clr-grey-10: hsl(210, 36%, 96%);
--clr-white: #fff;
--clr-red-dark: hsl(360, 67%, 44%);
--clr-red-light: hsl(360, 71%, 66%);
--clr-green-dark: hsl(125, 67%, 44%);
--clr-green-light: hsl(125, 71%, 66%);
--clr-black: #222;
--ff-primary: "Roboto", sans-serif;
--ff-secondary: "Open Sans", sans-serif;
--transition: all 0.3s linear;
--spacing: 0.1rem;
--radius: 0.25rem;
--light-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
--dark-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
--max-width: 1170px;
--fixed-width: 620px;
}
/*
===============
Global Styles
===============
*/
*,
::after,
::before {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: var(--ff-secondary);
background: var(--clr-grey-10);
color: var(--clr-grey-1);
line-height: 1.5;
font-size: 0.875rem;
}
ul {
list-style-type: none;
}
a {
text-decoration: none;
}
h1,
h2,
h3,
h4 {
letter-spacing: var(--spacing);
text-transform: capitalize;
line-height: 1.25;
margin-bottom: 0.75rem;
font-family: var(--ff-primary);
}
h1 {
font-size: 3rem;
}
h2 {
font-size: 2rem;
}
h3 {
font-size: 1.25rem;
}
h4 {
font-size: 0.875rem;
}
p {
margin-bottom: 1.25rem;
color: var(--clr-grey-5);
}
@media screen and (min-width: 800px) {
h1 {
font-size: 4rem;
}
h2 {
font-size: 2.5rem;
}
h3 {
font-size: 1.75rem;
}
h4 {
font-size: 1rem;
}
body {
font-size: 1rem;
}
h1,
h2,
h3,
h4 {
line-height: 1;
}
}
/* global classes */
/* section */
.section {
padding: 5rem 0;
}
.section-center {
width: 90vw;
margin: 0 auto;
max-width: 1170px;
}
@media screen and (min-width: 992px) {
.section-center {
width: 95vw;
}
}
main {
min-height: 100vh;
display: grid;
place-items: center;
}
/*
===============
Reviews
===============
*/
main {
min-height: 100vh;
display: grid;
place-items: center;
}
.title {
text-align: center;
margin-bottom: 4rem;
}
.underline {
height: 0.25rem;
width: 5rem;
background: var(--clr-primary-5);
margin-left: auto;
margin-right: auto;
}
.container {
width: 80vw;
max-width: var(--fixed-width);
}
.review {
background: var(--clr-white);
padding: 1.5rem 2rem;
border-radius: var(--radius);
box-shadow: var(--light-shadow);
transition: var(--transition);
text-align: center;
}
.review:hover {
box-shadow: var(--dark-shadow);
}
.img-container {
position: relative;
width: 150px;
height: 150px;
border-radius: 50%;
margin: 0 auto;
margin-bottom: 1.5rem;
}
#person-img {
width: 100%;
display: block;
height: 100%;
object-fit: cover;
border-radius: 50%;
position: relative;
}
.img-container::after {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f10e";
position: absolute;
top: 0;
left: 0;
width: 2.5rem;
height: 2.5rem;
display: grid;
place-items: center;
border-radius: 50%;
transform: translateY(25%);
background: var(--clr-primary-5);
color: var(--clr-white);
}
.img-container::before {
content: "";
width: 100%;
height: 100%;
background: var(--clr-primary-5);
position: absolute;
top: -0.25rem;
right: -0.5rem;
border-radius: 50%;
}
#author {
margin-bottom: 0.25rem;
}
#job {
margin-bottom: 0.5rem;
text-transform: uppercase;
color: var(--clr-primary-5);
font-size: 0.85rem;
}
#info {
margin-bottom: 0.75rem;
}
.prev-btn,
.next-btn {
color: var(--clr-primary-7);
font-size: 1.25rem;
background: transparent;
border-color: transparent;
margin: 0 0.5rem;
transition: var(--transition);
cursor: pointer;
}
.prev-btn:hover,
.next-btn:hover {
color: var(--clr-primary-5);
}
.random-btn {
margin-top: 0.5rem;
background: var(--clr-primary-10);
color: var(--clr-primary-5);
padding: 0.25rem 0.5rem;
text-transform: capitalize;
border-radius: var(--radius);
transition: var(--transition);
border-color: var(--clr-primary-5);
cursor: pointer;
}
.random-btn:hover {
background: var(--clr-primary-5);
color: var(--clr-primary-1);
}
결과
버튼을 눌러 동작을 확인해보세요.
'JavaScript' 카테고리의 다른 글
| [JavaScript] CoinGecko API 와 chart api를 사용하여 기간에 따른 암호화폐 가격 변동을 라인 차트로 표시하기 (0) | 2024.03.28 |
|---|---|
| [JavaScript] 탭 레이아웃 만들기 (0) | 2024.03.24 |
| [JavaScript] Bootstrap 버튼 클릭 스크롤 위치 이동 기능 만들기 (0) | 2024.03.22 |
| [JavaScript] CoinGecko API 와 chart api를 사용하여 암호화폐 시장 데이터를 실시간으로 받아와 차트로 시각화하기 (0) | 2024.03.19 |
| [JavaScript] 카운터 만들기 (0) | 2024.03.17 |
