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: yellow;
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 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, length=5){
const stars = []
const scoreFloat = score - Math.floor(score)
if(score === undefined || score === null || score < 0 || score > length || (scoreFloat !== 0 && scoreFloat !== 0.5) ){
return ''
}
for (let i = 0; i < length; i++) {
if(score >= 1){
stars.push('<i class="fa-solid fa-star"></i>')
score -= 1
}else if(score > 0){
stars.push('<i class="fa-sharp fa-regular fa-star-half-stroke"></i>')
score -= 0.5
}else if(score === 0){
stars.push('<i class="fa-regular fa-star"></i>')
}
}
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)}</div>
</div>
`).join('')728x90
'프론트엔드 > 컴포넌트' 카테고리의 다른 글
| 자바스크립트없이 드롭다운 메뉴 만들기 (2) (0) | 2023.04.14 |
|---|---|
| 카드 컴포넌트 및 리뷰 컴포넌트 만들기 (2) (0) | 2023.04.14 |
| 배경이 비취는 투명 텍스트 효과 만들기 (2) | 2023.04.14 |
| 시스루 배경 만들기 (0) | 2023.04.14 |
| 자바스크립트 없이 드롭다운 메뉴 만들기 (0) | 2023.04.13 |