document.querySelectorAll('.item-btn').forEach((itemBtn, index) => {});
document.querySelectorAll('.item-btn').forEach(itemBtn => {
const itemType = itemBtn.classList[1];
const btnSpan = itemBtn.querySelector('span');
if (typeof data[itemType] != "undefined") {
const upgrade_data = data[itemType].split(",");
btnSpan.innerHTML = `Купить за ${upgrade_data[1]}`;
}
});
const scroll_bar = document.querySelectorAll(".scroll_bar-item-multiplier");
let data = JSON.parse(response.data);
score.innerHTML = data["score"];
document.querySelectorAll('.item-btn').forEach(itemBtn => {
const itemType = itemBtn.classList[1];
const btnSpan = itemBtn.querySelector('span');
if (typeof data[itemType] != "undefined") {
const upgrade_data = data[itemType].split(",");
btnSpan.innerHTML = `Купить за ${upgrade_data[1]}`;
scroll_bar[itemType].innerHTML = upgrade_data[0];
}
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="font/font.css">
<link rel="stylesheet" type="text/css" href="style/style.css">
<title>Алёна</title>
</head>
<body>
<section class="top">
<div class="top__menu">
<div class="top_menu-items">
<div class="menu-item">Главная</div>
<div class="menu-item">Обо мне</div>
<div class="menu-item">Портфолио</div>
<div class="menu-item">Услуги</div>
<div class="menu-item">Отзывы</div>
<div class="menu-item">Контакты</div>
</div>
<div class="top__menu-social">
<a class="top_social-item">
</a>
<a class="top_social-item">
</a>
</div>
</div>
<div class="top__main">
<div class="top_main-bg">
<img src="img/top-bg.png">
</div>
<div class="top_main-description">
Создаю эффективный инструмент<br>
продаж - удобные и понятные сайты
</div>
<div class="top__footer">
sdf
</div>
</div>
</section>
</body>
</html>
html, body{
font-family: sans-serif;
margin: 0;
height: 100%
}
*{
box-sizing: border-box;
}
a{
text-decoration: none;
}
.top{
width: 100%;
min-height: 100vh;
background: #FFBEA1;
}
.top__menu{
width: 100%;
min-height: 80px;
display: flex;
padding: 20px;
justify-content: center;
}
.top__menu-social{
display: flex;
align-items: center;
justify-content: center;
}
.top_social-item{
max-width: 48px;
width: 100%;
background: #000;
}
.top_menu-items{
display: flex;
align-items: center;
}
.menu-item{
padding: 0 18px;
cursor: pointer;
}
.menu-item:hover{
text-decoration: underline;
}
.top__main{
position: relative;
}
.top_main-bg{
padding: 90px 70px;
}
.top_main-bg img{
max-width: 100%;
width: 100%;
}
.top_main-description{
position: absolute;
right: 60px;
bottom: 30px;
font-family: 'TT Norms';
font-style: normal;
font-weight: 300;
font-size: 1.2rem;
line-height: 124.9%;
}
.top__footer{
display: flex;
background: #000;
align-items: stretch;
flex-direction: row;
}