typescript и handlebars
This commit is contained in:
grinikita
37
src/components/carusel.ts
Normal file
37
src/components/carusel.ts
Normal file
@@ -0,0 +1,37 @@
|
||||
import './logger'
|
||||
|
||||
const moveContainer = (container: HTMLElement, btnLeft: HTMLButtonElement, btnRight: HTMLButtonElement, prevOffset: number, offset: number) => {
|
||||
const containerWidth = container.scrollWidth
|
||||
|
||||
let newOffset = prevOffset + offset
|
||||
const minOffset = (containerWidth - document.body.clientWidth) * -1
|
||||
const maxOffset = 0;
|
||||
newOffset = Math.min(Math.max(minOffset, newOffset), maxOffset);
|
||||
container.style.transform = `translateX(${newOffset}px)`
|
||||
|
||||
btnLeft.disabled = newOffset >= maxOffset;
|
||||
btnRight.disabled = newOffset <= minOffset;
|
||||
|
||||
return newOffset;
|
||||
}
|
||||
|
||||
/**
|
||||
* Инициализация карусели
|
||||
* @param container html элемент
|
||||
* @param btnLeft
|
||||
* @param btnRight
|
||||
*/
|
||||
export function initCarusel(container: HTMLElement, btnLeft: HTMLButtonElement, btnRight: HTMLButtonElement) {
|
||||
let containerOffset = 0;
|
||||
|
||||
containerOffset = moveContainer(container, btnLeft, btnRight, containerOffset, 0)
|
||||
|
||||
btnLeft.addEventListener('click', () => {
|
||||
containerOffset = moveContainer(container, btnLeft, btnRight, containerOffset, 285)
|
||||
})
|
||||
|
||||
btnRight.addEventListener('click', () => {
|
||||
containerOffset = moveContainer(container, btnLeft, btnRight, containerOffset, -285)
|
||||
})
|
||||
}
|
||||
|
||||
1
src/components/logger.ts
Normal file
1
src/components/logger.ts
Normal file
@@ -0,0 +1 @@
|
||||
console.log('hello world')
|
||||
24
src/index.hbs
Normal file
24
src/index.hbs
Normal file
@@ -0,0 +1,24 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport"
|
||||
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title>Document</title>
|
||||
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900"
|
||||
rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900"
|
||||
rel="stylesheet">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
{{> views/header }}
|
||||
<main>
|
||||
{{> views/carusel }}
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
189
src/index.html
189
src/index.html
@@ -1,189 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport"
|
||||
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title>Document</title>
|
||||
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900"
|
||||
rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900"
|
||||
rel="stylesheet">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header class="header container">
|
||||
<a href="index.html"><img class="logo" src="../src/images/logo.svg" alt=""></a>
|
||||
<nav>
|
||||
<ul class="nav-list">
|
||||
<li><a href="../src/discover.html">Discover</a></li>
|
||||
<li><a href="../src/creators.html">creators</a></li>
|
||||
<li><a href="../src/creators.html">Sell</a></li>
|
||||
<li><a href="../src/creators.html">stats</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<button class="button">Connect Wallet</button>
|
||||
</header>
|
||||
<main>
|
||||
<div class="top-nft">
|
||||
<h2 class="top-nft__title">Weakly - Top NFT</h2>
|
||||
<div class="nft-card-container">
|
||||
<div class="nft-card">
|
||||
<div class="nft-card__img">
|
||||
<div class="nft-card__time">07h 09m 12s</div>
|
||||
</div>
|
||||
<div class="nft-card__content">
|
||||
<h3 class="nft-card__title">Sun-Glass</h3>
|
||||
<div class="nft-card__footer">
|
||||
<div>
|
||||
<p class="nft-card__description">Current bid</p>
|
||||
<div class="nft-card__price">
|
||||
<svg width="22" height="22" viewBox="0 0 22 22" fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M11.376 1.63574L5.8623 10.8988L11.376 14.207L16.8897 10.8988L11.376 1.63574ZM5.8623 12.0015L11.376 19.7207L16.8897 12.0015L11.376 15.3098L5.8623 12.0015Z"
|
||||
fill="#141416"/>
|
||||
</svg>
|
||||
<div>
|
||||
1.75
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="button">Place bid</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nft-card">
|
||||
<div class="nft-card__img">
|
||||
<div class="nft-card__time">07h 09m 12s</div>
|
||||
</div>
|
||||
<div class="nft-card__content">
|
||||
<h3 class="nft-card__title">Sun-Glass</h3>
|
||||
<div class="nft-card__footer">
|
||||
<div>
|
||||
<p class="nft-card__description">Current bid</p>
|
||||
<div class="nft-card__price">
|
||||
<svg width="22" height="22" viewBox="0 0 22 22" fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M11.376 1.63574L5.8623 10.8988L11.376 14.207L16.8897 10.8988L11.376 1.63574ZM5.8623 12.0015L11.376 19.7207L16.8897 12.0015L11.376 15.3098L5.8623 12.0015Z"
|
||||
fill="#141416"/>
|
||||
</svg>
|
||||
<div>
|
||||
1.75
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="button">Place bid</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nft-card">
|
||||
<div class="nft-card__img">
|
||||
<div class="nft-card__time">07h 09m 12s</div>
|
||||
</div>
|
||||
<div class="nft-card__content">
|
||||
<h3 class="nft-card__title">Sun-Glass</h3>
|
||||
<div class="nft-card__footer">
|
||||
<div>
|
||||
<p class="nft-card__description">Current bid</p>
|
||||
<div class="nft-card__price">
|
||||
<svg width="22" height="22" viewBox="0 0 22 22" fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M11.376 1.63574L5.8623 10.8988L11.376 14.207L16.8897 10.8988L11.376 1.63574ZM5.8623 12.0015L11.376 19.7207L16.8897 12.0015L11.376 15.3098L5.8623 12.0015Z"
|
||||
fill="#141416"/>
|
||||
</svg>
|
||||
<div>
|
||||
1.75
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="button">Place bid</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nft-card">
|
||||
<div class="nft-card__img">
|
||||
<div class="nft-card__time">07h 09m 12s</div>
|
||||
</div>
|
||||
<div class="nft-card__content">
|
||||
<h3 class="nft-card__title">Sun-Glass</h3>
|
||||
<div class="nft-card__footer">
|
||||
<div>
|
||||
<p class="nft-card__description">Current bid</p>
|
||||
<div class="nft-card__price">
|
||||
<svg width="22" height="22" viewBox="0 0 22 22" fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M11.376 1.63574L5.8623 10.8988L11.376 14.207L16.8897 10.8988L11.376 1.63574ZM5.8623 12.0015L11.376 19.7207L16.8897 12.0015L11.376 15.3098L5.8623 12.0015Z"
|
||||
fill="#141416"/>
|
||||
</svg>
|
||||
<div>
|
||||
1.75
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="button">Place bid</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nft-card">
|
||||
<div class="nft-card__img">
|
||||
<div class="nft-card__time">07h 09m 12s</div>
|
||||
</div>
|
||||
<div class="nft-card__content">
|
||||
<h3 class="nft-card__title">Sun-Glass</h3>
|
||||
<div class="nft-card__footer">
|
||||
<div>
|
||||
<p class="nft-card__description">Current bid</p>
|
||||
<div class="nft-card__price">
|
||||
<svg width="22" height="22" viewBox="0 0 22 22" fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M11.376 1.63574L5.8623 10.8988L11.376 14.207L16.8897 10.8988L11.376 1.63574ZM5.8623 12.0015L11.376 19.7207L16.8897 12.0015L11.376 15.3098L5.8623 12.0015Z"
|
||||
fill="#141416"/>
|
||||
</svg>
|
||||
<div>
|
||||
1.75
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="button">Place bid</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nft-card">
|
||||
<div class="nft-card__img">
|
||||
<div class="nft-card__time">07h 09m 12s</div>
|
||||
</div>
|
||||
<div class="nft-card__content">
|
||||
<h3 class="nft-card__title">Sun-Glass</h3>
|
||||
<div class="nft-card__footer">
|
||||
<div>
|
||||
<p class="nft-card__description">Current bid</p>
|
||||
<div class="nft-card__price">
|
||||
<svg width="22" height="22" viewBox="0 0 22 22" fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M11.376 1.63574L5.8623 10.8988L11.376 14.207L16.8897 10.8988L11.376 1.63574ZM5.8623 12.0015L11.376 19.7207L16.8897 12.0015L11.376 15.3098L5.8623 12.0015Z"
|
||||
fill="#141416"/>
|
||||
</svg>
|
||||
<div>
|
||||
1.75
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="button">Place bid</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<button class="button btn-left">left</button>
|
||||
<button class="button btn-right">right</button>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
34
src/index.js
34
src/index.js
@@ -1,34 +0,0 @@
|
||||
const name = 'File'
|
||||
|
||||
import { name as name2 } from './index2.js'
|
||||
|
||||
console.log('From index.js log name', name2)
|
||||
|
||||
const btnLeft = document.querySelector('.top-nft .btn-left')
|
||||
const btnRight = document.querySelector('.top-nft .btn-right')
|
||||
const container = document.querySelector('.nft-card-container')
|
||||
|
||||
let containerOffset = 0;
|
||||
|
||||
const moveContainer = (offset) => {
|
||||
const containerWidth = container.scrollWidth
|
||||
|
||||
const newOffset = containerOffset + offset
|
||||
const minOffset = (containerWidth - document.body.clientWidth) * -1
|
||||
const maxOffset = 0;
|
||||
containerOffset = Math.min(Math.max(minOffset, newOffset), maxOffset);
|
||||
container.style.transform = `translateX(${containerOffset}px)`
|
||||
|
||||
btnLeft.disabled = containerOffset >= maxOffset ? true : null;
|
||||
btnRight.disabled = containerOffset <= minOffset;
|
||||
}
|
||||
|
||||
moveContainer(0)
|
||||
|
||||
btnLeft.addEventListener('click', () => {
|
||||
moveContainer(285)
|
||||
})
|
||||
|
||||
btnRight.addEventListener('click', () => {
|
||||
moveContainer(-285)
|
||||
})
|
||||
8
src/index.ts
Normal file
8
src/index.ts
Normal file
@@ -0,0 +1,8 @@
|
||||
import { initCarusel } from './components/carusel'
|
||||
|
||||
const container = document.querySelector<HTMLElement>('.nft-card-container')
|
||||
const btnLeft = document.querySelector<HTMLButtonElement>('.top-nft .btn-left')
|
||||
const btnRight = document.querySelector<HTMLButtonElement>('.top-nft .btn-right')
|
||||
if (container && btnLeft && btnRight) {
|
||||
initCarusel(container, btnLeft, btnRight)
|
||||
}
|
||||
@@ -1 +0,0 @@
|
||||
export const name = "Vasya"
|
||||
16
src/views/carusel.hbs
Normal file
16
src/views/carusel.hbs
Normal file
@@ -0,0 +1,16 @@
|
||||
<div class="top-nft">
|
||||
<h2 class="top-nft__title">Weakly - Top NFT</h2>
|
||||
<div class="nft-card-container nft-card-container-2">
|
||||
{{> nft-card title="Sun-Glass" price=1.75 }}
|
||||
{{> nft-card title="Sun-Glass2" price=5}}
|
||||
{{> nft-card title="Sun-Glass3" price=2.15}}
|
||||
{{> nft-card title="Sun-Glass4" price=1.1}}
|
||||
{{> nft-card title="Sun-Glass5" price=1.75}}
|
||||
{{> nft-card title="Sun-Glass6" price=1.75}}
|
||||
{{> nft-card title="Sun-Glass7" price=1.75}}
|
||||
</div>
|
||||
<div>
|
||||
<button class="button btn-left btn-2">left</button>
|
||||
<button class="button btn-right btn-2">right</button>
|
||||
</div>
|
||||
</div>
|
||||
12
src/views/header.hbs
Normal file
12
src/views/header.hbs
Normal file
@@ -0,0 +1,12 @@
|
||||
<header class="header container">
|
||||
<a href="index.html"><img class="logo" src="../src/images/logo.svg" alt=""></a>
|
||||
<nav>
|
||||
<ul class="nav-list">
|
||||
<li><a href="../src/discover.html">Discover</a></li>
|
||||
<li><a href="../src/creators.html">creators</a></li>
|
||||
<li><a href="../src/creators.html">Sell</a></li>
|
||||
<li><a href="../src/creators.html">stats</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<button class="button">Connect Wallet</button>
|
||||
</header>
|
||||
24
src/views/nft-card.hbs
Normal file
24
src/views/nft-card.hbs
Normal file
@@ -0,0 +1,24 @@
|
||||
<div class="nft-card">
|
||||
<div class="nft-card__img">
|
||||
<div class="nft-card__time">07h 09m 12s</div>
|
||||
</div>
|
||||
<div class="nft-card__content">
|
||||
<h3 class="nft-card__title">{{title}}</h3>
|
||||
<div class="nft-card__footer">
|
||||
<div>
|
||||
<p class="nft-card__description">Current bid</p>
|
||||
<div class="nft-card__price">
|
||||
<svg width="22" height="22" viewBox="0 0 22 22" fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M11.376 1.63574L5.8623 10.8988L11.376 14.207L16.8897 10.8988L11.376 1.63574ZM5.8623 12.0015L11.376 19.7207L16.8897 12.0015L11.376 15.3098L5.8623 12.0015Z"
|
||||
fill="#141416"/>
|
||||
</svg>
|
||||
<div>
|
||||
{{ price }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="button">Place bid</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user