-
Notifications
You must be signed in to change notification settings - Fork 0
/
template.js
85 lines (80 loc) · 3.56 KB
/
template.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
const getPrimeFactors = require('get-prime-factors')
module.exports = (number, primeFactors) => `
<html lang="en">
<meta charset="utf-8">
<title>${number} — Primebot</title>
<meta name="description" content="Find prime numbers">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<link rel="icon" href="apple-touch-icon.png">
<link rel="stylesheet" href="styles/main.css">
<body class="bg-silver">
<div class="bg-white overflow-hidden">
<svg class="graph" role="presentation" viewBox="0 0 70 90" xmlns="http://www.w3.org/2000/svg">
${(function () {
let string = ''
const drawnFactors = []
const numbers = [
number - 3,
number - 2,
number - 1,
number,
number + 1,
number + 2,
number + 3
]
numbers.map((number, numberIndex) => {
const numberPosition = (numberIndex + 1) * 10 - 5
getPrimeFactors(number).map((factor) => {
if (!drawnFactors.includes(factor)) {
const circleCount = 9
const radius = factor * 5
for (let i = 0; i < circleCount; i++) {
string += `<circle fill="none" stroke="#F012BE" stroke-width=".1" stroke-opacity="${(1 / factor) / 2 + 0.15}" cx="${(i * 2 * radius) - radius + numberPosition}" cy="35" r="${radius}"/>`
}
drawnFactors.push(factor)
}
})
})
numbers.map((number, index) => {
string += `<text x="${index * 10 + 5}" text-anchor="middle" width="10" y="${35 + 1}" font-size="2" style="text-align: center">${number}</text>`
})
return string
})()}
</svg>
<main class="max-width-2 mx-auto mt-big px1 py2">
${primeFactors
? `${primeFactors.length === 1 && primeFactors[0] === number
? `<h1>${number} is a prime number</h1>`
: `<h1>${number} is not a prime number.</h1>
${number !== 1
? `<p>It is divisable by the prime
factor${primeFactors.length > 1
? `s ${primeFactors.slice(0, -1).join(', ')}, and` : ''
}
${primeFactors[primeFactors.length - 1]}.
</p>`
: ''}`
}`
: `<h1>${number} is not a ${number === 0 ? 'prime ' : ''}number</h1>` // Dirty fix for zero
}
<p>A prime number is any natural number greater than 1 that can only be divided by 1 and itself.</p>
<form class="mt2" action="/" method="get">
<label for="n" class="label">Enter a number</label>
<input value="${number + 1}" name="n" id="n" type="number" autofocus class="input" onInput="btn()">
<input type="submit" class="btn btn-primary" id="s" value="Is this a prime number?">
</form>
</main>
</div>
<footer class="px1 py2">
<div class="max-width-2 mx-auto">
Built by <a href="https://twitter.com/fredericmarx/status/775998450869624832">@fredericmarx</a> using <a href="https://nodejs.org/en/">Node.js</a>, <a href="https://www.npmjs.com/">npm</a>, <a href="https://expressjs.com/">Express</a>, and the <a href="http://www.basscss.com/">Basscss</a> toolkit. Prime factors are generated with <a href="https://www.npmjs.com/package/get-prime-factors">get-prime-factors</a> by <a href="https://www.npmjs.com/~janjarfalk">janjarfalk</a>. <a href="https://github.com/fredericmarx/primebot">View on Github</a>.
</div>
</footer>
<script>
function btn () {
document.getElementById('s').value = 'Is ' + document.getElementById('n').value + ' a prime number?'
}
btn()
</script>
`