$(function(){
platformArr = ['๋ทํ๋ฆญ์ค','์จ์ด๋ธ','ํฐ๋น'];
// ๋ฐฐ์ด์ ๋ง๋ ๋ค (๋ฐฐ์ด์ ๊ธธ์ด๋ 3)
let i = 0;
// ๋ณ์ ์์ฑ, i=0์ด๋ผ๊ณ ์
ํ
ํ ๊ฒ. ๊ทธ๋ผ ๋น์ฐํ 0๋ฒ์งธ์ธ ๋ทํ๋ฆญ์ค๊ฐ ์คํ๋ ๊ฒ
setInterval(() => {
console.log(i);
if(i > platformArr.length-1){
i = 0;
}
headlineEl = `์ค๋์ '${platformArr[i]}' ๋ญํน`;
$('.sc-ranking .headline').html(headlineEl);
rank(i);
// rank๋ผ๋ ํจ์ ๋ง๋ค๊ณ , (i)๋ฅผ ๋ฟ๋ฆฐ๋ค๋ ๋ป
i++; // ๊ณ์ ์ฆ๊ฐ๋๋ค
}, 4000); // 4์ด ๋ค์ ์คํ
rank(0); // ์ต์ด 1ํ ์คํ์ ํด์ผํจ, 0๋ฒ์ด ๋์์ค์ผ ํจ
setTimeout
: ์ผ์ ์๊ฐ ๋ค์ ์คํ
setInterval
: ์ผ์ ์๊ฐ ๋ค์ ๊ณ์ ์คํ
if(i > platformArr.length-1){
ํ๋ซํผ ๋ฐฐ์ด์ ๊ธธ์ด์์ 1์ ๋บ ๊ฐ(=2)๋ณด๋ค i๊ฐ ํฌ๋ค๋ฉด,
i = 0;
i๋ 0์ด ๋๋ค = ๋ฌดํ๊ฐ์ ๋ฐฐ์ด์ด ์์ด๋ ๋ค์ 0์ผ๋ก ๋์๊ฐ ๋ฐ๋ณต์คํ ๋๋ค.
headlineEl =
์ค๋์ '${platformArr[i]}' ๋ญํน
;
๋ณ์ ์ฒ๋ฆฌํ ์์ญ์ ๋ฐฑํฑ์ผ๋ก ์ค์ ํ๋ค.
๐ ${๋ณ์๋ช
[i]}
i๋ ์์๊ฐ ๋๋ค.
$('.sc-ranking .headline').html(headlineEl);
๐ headline ๋ถ๋ถ์ headlineEl
๋ด์ฉ์ผ๋ก ์ฌ๊ตฌ์ฑํ๋ค๋ ์๋ฏธ
fetch(์ฃผ์ or ํ์ผ) // json ํ์ผ ๊ฐ์ ธ์ค๊ธฐ
.then((response)=>response.json()) // ๊ฐ์ ธ์จ ๋ฐ์ดํฐ๋ฅผ json ํ์ผ๋ก ๋ถ๋ฌ์ค๊ธฐ
.then((json)=>{ //json = ๋ชจ๋ ๋ฐ์ดํฐ
//์คํ ๋ถ๋ถ
});
function rank(num){
fetch('./assets/data/rankData.json')
.then((response)=>response.json())
.then((json)=>{
allData = json.items;
result = allData.filter(function(parm){
return parm.platform == num; // ํ๋ซํผ์ด num์ธ ๊ฒ
});
let html = ''; // ๋น ๋ฌธ์์ด ์์ฑ
let rank = 1;
// rank=1์ด๋ผ๋ ๋ณ์ ์์ฑ (๋ญํน 1~3์ ์์ญ). ๋น์ฐํ 1๋ถํฐ ๋ด์ฉ์ด ๋ค์ด๊ฐ๋ค.
result.forEach(element => {
// result, ๊ฐ์ ์จ์ผ์ง allData๋ฅผ ์ฐ๋ฉด ์๋จ
// ์์ ๋ณ๋ ํ์๋ฅผ ์ํ if๋ฌธ
if(element.change > 0){
changeEl = `<span class="num up">${element.change}</span>`
}else if(element.change < 0){
changeEl = `<span class="num down">${(element.change)*-1}</span>`
}else{
changeEl = `<span class="num">-</span>`
}
html+=`<li class="rank-item">
<a href="" class="item-wrapper">
<img src="${element.thumb}" alt class="poster">
<div class="text-box">
<img src="./assets/img/ic-rank-${rank}.svg" alt="${rank}์" class="ic-ranknum">
<span class="title">${element.title}</span>
</div>
<div class="updown-box">
${changeEl}
</div>
</a>
</li>`;
rank++;
// forEach๊ฐ ๋๋ ๋์ฏค rank๋ฅผ ์ฆ๊ฐ์ํจ๋ค
});
$('#rankList').html(html)
});
};
});
์ค๋ฅธ์ชฝ ์์ ๋ณ๋ ์ ๋ณด๋ฅผ ๋ํ๋ด๋ ์คํฌ๋ฆฝํธ
if(element.change > 0){
changeEl =<span class="num up">${element.change}</span>
์์ ๋ณ๋ ์์น๊ฐ 0๋ณด๋ค ํฌ๋ฉด(up)
์ปฌ๋ฌ๋ up ํด๋์ค ์์ฑ์ธ ๊ทธ๋ฆฐ์ผ๋ก ๋ณด์ฌ์ง๊ณ
}else if(element.change < 0){
changeEl =<span class="num down">${(element.change)*-1}</span>
์์ ๋ณ๋ ์์น๊ฐ 0๋ณด๋ค ์์ผ๋ฉด(down)
*-1
= ๊ณฑํ๊ธฐ ๋ง์ด๋์ค1
์์x์์=์์๊ฐ ๋์ด ์ซ์๋ ๊ทธ๋๋ก ํ๊ธฐ๋๋ฉฐ ์ปฌ๋ฌ๋ down ํด๋์ค ์์ฑ์ธ ๋ ๋๋ก ๋ณด์ฌ์ง๋ค.
}else{
changeEl =<span class="num">-</span>
}
์์ ๋ณ๋์ด ์์ผ๋ฉด - ๋ก ํ์
JSON์ ๊ดํ ์ ๋ฆฌ๋ ์ฌ๊ธฐ ๐ https://velog.io/@imyoox/JSON
{
"items":[
{
"thumb":"https://---.jpg",
"title":"๋ ๊ธ๋ก๋ฆฌ ํํธ 2",
"change":0,
"platform":1
},
{
"thumb":"https://---.jpg",
"title":"๋ ๊ธ๋ก๋ฆฌ",
"change":1,
"platform":1
},
{
"thumb":"https://---.jpg",
"title":"์ผํ์ค์บ๋ค",
"change":-2,
"platform":1
},
...(์๋ต)
]
}
html+=`<li class="rank-item">
<a href="" class="item-wrapper">
<img src="${element.thumb}" alt class="poster">
<div class="text-box">
<img src="./assets/img/ic-rank-${rank}.svg" alt="${rank}์" class="ic-ranknum">
<span class="title">${element.title}</span>
</div>
<div class="updown-box">
${changeEl}
</div>
</a>
</li>`;
๐ html ์ฝ๋ ์ฌ์ด, ๋ณ์์ ํด๋นํ๋ ๋ถ๋ถ์ thumb
title
change
platform
๋ฑ ํ์ํ ๊ฐ์
${elemnt.000}
ํ์์ผ๋ก ๊ธฐ์ฌํ๋ฉด ๋ฐ์ดํฐ๊ฐ ์ฝ์
๋๋ค.
๋ณดํต ํญ๋ชฉ์ ํด๋ฆญํ์ง ์๊ณ ๋ ํญ๋ชฉ์ ๋ํ ์ ๋ณด๋ฅผ ํ์ํ๋ ๊ทธ๋ํฝ ์ฌ์ฉ์ ์ธํฐํ์ด์ค (GUI) ์์์ด๋ค. ๋ถ์ฐ์ค๋ช ์ ๋์ ์ ์ ๊ฐ ์ดํดํ๊ธฐ ์ฌ์ด ํ์ด์ง๋ก ๋ง๋ค์ด์ค๋ค.
<div class="tooltip">
<span class="text">๐ฉ๐จ์ฑ๋ณ๊ณผ ์ฐ๋ น ์ถ์ฒ์ด ๊ฐ๋ฅํด์!</span>
<i class="ic-close"><span class="blind">๋ซ๊ธฐ</span></i>
</div>
.sc-recomm .tooltip{
position: absolute;
top: 40px; left: 16px;
height: 40px;
display: flex;
padding: 0 16px;
justify-content: space-between;
align-items: center;
z-index: 100;
background: #4263eb;
border-radius: 30px;
}
.sc-recomm .tooltip::before{
content: '';
position: absolute;
top: -24px; left: 10px;
border: 15px solid transparent;
border-bottom-color: #4263eb;
}
$('.sc-recomm .tooltip .ic-close').click(function(){
$('.sc-recomm .tooltip').addClass('on')
});