<button onclick="getPrimeNumbers()">Get me some primes!</button>
<button onclick="resetList()">Reset</button>
<br />
Animated with CSS
<div class="animations">
<div class="transformAnimation"></div>
<div class="marginAnimation"></div>
</div>
Animated with JS
<div class="animations">
<div class="static" id="static"></div>
</div>
</div>
Prime numbers:
<div class="primesContainer">
<ul key={p} class="primes" id="primes">
</ul>
</div>
.primesContainer {
text-align: left;
display: flex;
flex-wrap: wrap;
}
.primes {
padding: 0 10px;
display: flex;
flex-wrap: wrap;
> li {
margin: 5px 30px 5px 0px;
}
}
.animations {
background-color: "red";
width: 300px;
height: 180px;
position: relative;
}
.transformAnimation,
.marginAnimation,
.static {
position: absolute;
left: 0;
width: 50px;
height: 50px;
border-radius: 5px;
margin: 0;
}
.transformAnimation {
top: 30px;
background-color: #55f;
animation: transformLeft 4s infinite linear;
}
.marginAnimation {
top: 100px;
background-color: #f55;
animation: marginLeft 2s infinite linear;
}
.static {
top: 30px;
background-color: #555;
}
@keyframes transformLeft {
from {
transform: translate(0px);
}
to {
transform: translate(300px);
}
}
@keyframes marginLeft {
from {
margin-left: 0px;
}
to {
margin-left: 300px;
}
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
View Compiled
const isPrime = num => {
for (let i = 2; i < num; i++) {
if (num % i === 0) {
return false
}
}
return true
}
const getNext = (current = 0) => {
while (!isPrime(current)) {
current += 1
}
return current
}
appendToList = (content) => {
// Create a <li> node
let node = document.createElement("LI")
// Append the text to <li>
node.appendChild(document.createTextNode(content))
document.getElementById("primes").appendChild(node);
}
getPrimeNumbers = () => {
let primes = [100000000]
while (primes.length < 20) {
const previous = primes[primes.length - 1]
primes.push(getNext(previous + 1))
appendToList(primes[primes.length - 1])
}
}
resetList = () => {
const list = document.getElementById("primes");
while (list.firstChild) {
list.removeChild(list.firstChild);
}
}
let margin = 0
startAnimation = () => {
margin = (margin + 2) % 300
document.getElementById("static").style.marginLeft = `${margin}px`
requestAnimationFrame(startAnimation)
}
requestAnimationFrame(startAnimation)
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.