Skip to content

Instantly share code, notes, and snippets.

@MassivDash
Created February 2, 2021 22:04
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save MassivDash/fc6c5caf97fe66994fa2757a41e1bbf7 to your computer and use it in GitHub Desktop.
Save MassivDash/fc6c5caf97fe66994fa2757a41e1bbf7 to your computer and use it in GitHub Desktop.
Svelte counter with lego figures vs https://codepen.io/dashmassiv/pen/BaQyMdy
<script>
let count = 2;
$: arrayOfKeys = [...Array(count).keys()]
function randomInteger(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
const imgUrl = ['https://poszukiwaczefrajdy.pl/services/picasso/thumb/4fd625949e896384e11ef6797aa66551.jpg' , 'https://a.allegroimg.com/s1024/0c8701/5b77fff3466b91a9e75ec4fe3b7b.jpg', 'https://thumbs.img-sprzedajemy.pl/1000x901c/a1/59/d7/lego-ninjago-jay-ninja-oryginalna-nowa-figurka-plastik-lodz-352890867.jpg', 'https://0.allegroimg.com/s1024/0c125e/7135eba343498612667b2372b0c0',
'https://totti.pl/pol_pl_LEGO-NINJAGO-Wyscig-uliczny-Wezowego-Jaguara-70639-22333_3.jpg', 'https://b.allegroimg.com/s512/03ca8a/2b6c05a94a92a76edbf889ae605b/LEGO-FIGURKA-LUDZIK-NINJAGO-KAI', 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQq9q3gdELan1auZZyJgWK_ZvTlMA8SHdiLMQ&usqp=CAU' , 'https://lh3.googleusercontent.com/proxy/DT_yQ0MZYwfBRf3-2fPS_yRg9yMaS3uZOf6GQZ44t6YOQAbmlCvpEoTBvAoTNfwrHv9K3aXZ08562Y5tbbtdh_oh4nEx7Ej1DkZFm3N7ZJTo7DTwnxeZOyaw5kQiA_Q6cm8u', 'https://zklockow.pl/img/1600/lego-minifigures-71019-lego-ninjago-movie-15.jpg', 'https://lh3.googleusercontent.com/proxy/d5uEncq7XPW5IUMnxAVru5DKMax-E2G2AwaSvjyHhaCzUyt_VMqLJiuSdSCncjNz6McvcbBlsINyHT1_TT6Xx46u2pyoS7N33f3jodXCVdUgT0LMT1rXqhddvbMk', 'https://extraextrabricks.pl/environment/cache/images/300_300_productGfx_212/LEGO-Ninjago---figurka-Lloyd.jpg', 'https://img.brickowl.com/files/image_cache/larger/lego-nrg-jay-minifigure-28-593095.jpg']
</script>
<!-- https://github.com/eugenkiss/7guis/wiki#counter -->
<div class="root">
<div class="grid">
{#each arrayOfKeys as Arr, i}
<img alt="hello" src={imgUrl[randomInteger(0, imgUrl.length - 1)]} />
{/each}
</div>
<div class="flex">
<input class="span" type=number bind:value={count}>
<button on:click="{() => count += 1}">count</button>
</div>
</div>
<style>
.flex {
display: flex;
height: 100%;
width: 100%;
justify-content: center;
align-items: center;
}
.root {
display: flex;
height: 100%;
width: 100%;
min-height: 100vh;
flex-direction: column;
justify-content: center;
align-items: center;
padding:0;
margin: 0;
overflow-x: hidden;
}
button {
margin: 20px;
width: 120px;
height: 100px;
font-size: 25px;
}
.span {
font-size: 25px;
margin: 25px;
}
.grid {
display: grid;
max-width: 90vw;
grid-template-columns:
repeat(10, 1fr);
grid-template-row: auto;
grid-row-gap: 15px;
}
img {
max-width: 200px;
max-height: 200px;
}
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment