728x90
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>design practice</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="card-container">
</div>
<script src="app.js"></script>
</body>
</html>:root{
--num-of-column: 6;
}
h3, p{
margin: 0;
}
.card-container{
display: flex;
justify-content: space-around;
flex-wrap: wrap;
margin-top: 2rem;
}
.card-container .card{
width: calc(100vw / var(--num-of-column));
height: 15rem;
background: #eee;
box-shadow: 0rem 0rem .5rem rgba(0, 0, 0, .3);
padding: 1rem;
display: flex;
flex-flow: column;
justify-content: space-between;
margin-bottom: 1rem;
}
.card-container .card p{
overflow: hidden;
}
.card-container .card .stars i{
color: red;
font-size: 1rem;
}
@media (max-width: 1200px){
.card-container .card{
width: 20vw;
}
}
@media (max-width: 900px){
.card-container .card{
width: 25vw;
}
}
@media (max-width: 650px){
.card-container .card{
width: 40vw;
}
}
@media (max-width: 430px){
.card-container .card{
width: 80vw;
}
}const cardContainer = document.querySelector('.card-container')
const shapes = [ // 문자열 배열
'<i class="fa-solid fa-heart"></i>',
'<i class="fa-solid fa-heart-pulse"></i>',
'<i class="fa-regular fa-heart"></i>'
]
// const shapes = ['♜', '♘', '☃']
// const shapes = [
// '<i class="fa-solid fa-star"></i>',
// '<i class="fa-sharp fa-regular fa-star-half-stroke"></i>',
// '<i class="fa-regular fa-star"></i>'
// ]
const cardInfos = [
{
title: 'HTML',
comment: 'HTML is markup language for building web.',
score: 3.5
},
{
title: 'CSS',
comment: 'CSS is used for styling web.',
score: 4.5
},
{
title: 'JAVASCRIPT',
comment: 'JAVASCRIPT is programming language for giving dinamic effect to web.JAVASCRIPT is programming language for giving dinamic effect to web.JAVASCRIPT is programming language for giving dinamic effect to web.JAVASCRIPT is programming language for giving dinamic effect to web.',
score: 2.5
},
{
title: 'HTML',
comment: 'HTML is markup language for building web.',
score: 3.5
},
{
title: 'CSS',
comment: 'CSS is used for styling web.',
score: 4.5
},
{
title: 'JAVASCRIPT',
comment: 'JAVASCRIPT is programming language for giving dinamic effect to web.',
score: 2.5
},
{
title: 'HTML',
comment: 'HTML is markup language for building web.',
score: 3.5
},
{
title: 'CSS',
comment: 'CSS is used for styling web.',
score: 4.5
},
{
title: 'JAVASCRIPT',
comment: 'JAVASCRIPT is programming language for giving dinamic effect to web.',
score: 2.5
},
{
title: 'HTML',
comment: 'HTML is markup language for building web.',
score: 3.5
},
{
title: 'CSS',
comment: 'CSS is used for styling web.',
score: 4.5
},
{
title: 'JAVASCRIPT',
comment: 'JAVASCRIPT is programming language for giving dinamic effect to web.',
score: 2.5
},
{
title: 'HTML',
comment: 'HTML is markup language for building web.',
score: 3.5
},
{
title: 'CSS',
comment: 'CSS is used for styling web.',
score: 4.5
},
{
title: 'JAVASCRIPT',
comment: 'JAVASCRIPT is programming language for giving dinamic effect to web.',
score: 2.5
},
]
function buildStars(score=0, length=5, shapes=[]){
const stars = []
const scoreFloat = score - Math.floor(score)
console.log(shapes.every(shape => typeof shape === 'string'))
if(typeof score !== 'number' || score < 0 || score > length || (scoreFloat !== 0 && scoreFloat !== 0.5) ){
return ''
}
if(typeof length !== 'number' || !Number.isInteger(length)){
return ''
}
if(!Array.isArray(shapes) || shapes.length < 3 || !shapes.every(shape => typeof shape === 'string' && shape.trim() !== '')){
return ''
}
for (let i = 0; i < length; i++) {
if(score >= 1){
stars.push(shapes[0])
score -= 1
}else if(score > 0){
stars.push(shapes[1])
score -= 0.5
}else if(score === 0){
stars.push(shapes[2])
}
}
return stars.join('')
}
cardContainer.innerHTML = cardInfos.map(cardInfo => `
<div class="card">
<h3>${cardInfo.title}</h3>
<p>${cardInfo.comment}</p>
<div class="stars">${buildStars(cardInfo.score, 4.0, shapes)}</div>
</div>
`).join('')한계점은 score 가 length 보다 큰 경우에는 그려지지 않는다. 하지만 만약 5점 만점에 3.5점인데 length 파라미터에 4.0을 입력하더라도 리뷰가 보인다.
728x90
'프론트엔드 > 컴포넌트' 카테고리의 다른 글
| 자바스크립트없이 드롭다운 메뉴 만들기 (3) (0) | 2023.04.14 |
|---|---|
| 자바스크립트없이 드롭다운 메뉴 만들기 (2) (0) | 2023.04.14 |
| 배경이 비취는 투명 텍스트 효과 만들기 (2) | 2023.04.14 |
| 시스루 배경 만들기 (0) | 2023.04.14 |
| 카드 컴포넌트 및 리뷰 컴포넌트 만들기 (0) | 2023.04.13 |