Skip to content

Commit f065b25

Browse files
jetzlstorferjetzlstorfer
committed
add random number generator
1 parent b5d2518 commit f065b25

File tree

5 files changed

+244
-27
lines changed

5 files changed

+244
-27
lines changed

‎_config.yml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@ footer-links:
3636
playconsole:
3737
meetup: Cloud-Native-Linz
3838
cncf: linz
39+
random-number-generator: true
3940

4041

4142
# Enter your Disqus shortname (not your username) to enable commenting on posts

‎_includes/random-number-generator.html‎

Lines changed: 201 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,206 @@
11
<script src="{{ site.baseurl }}/assets/scripts/generate-random-numbers.js"></script>
2-
<div style="display: flex; flex-direction: column; align-items: center;">
3-
<div style="display: flex; flex-direction: row; gap: 24px;">
4-
<div class="input__wrapper field">
5-
<input type="number" class="input__field" placeholder="⬇️ Minimum Value" name="min" id='min' required />
6-
<label for="min" class="input__label">⬇️ Minimum Value</label>
7-
</div>
82

9-
<div class="input__wrapper field">
10-
<input type="number" class="input__field" placeholder="⬆️ Maximum Value" name="max" id='max' required />
11-
<label for="max" class="input__label">⬆️ Maximum Value</label>
12-
</div>
3+
<div class="random-generator-container">
4+
<!-- Header Card -->
5+
<div class="card gradient-card">
6+
<div class="card-content">
7+
<h2 class="generator-title">🎲 Random Number Generator</h2>
8+
<p class="generator-subtitle">Generate your lucky numbers with style! Perfect for drawings, games, or any random selection needs.</p>
139
</div>
14-
<div class="input__wrapper field">
15-
<input type="number" class="input__field" placeholder="🔁 Spins" name="spins" id='spins' required />
16-
<label for="spins" class="input__label">🔁 Spins</label>
10+
</div>
11+
12+
<!-- Input Form Card -->
13+
<div class="card">
14+
<div class="card-content">
15+
<div class="generator-form">
16+
<div class="form-row">
17+
<div class="form-group">
18+
<label for="min" class="form-label">⬇️ Minimum Value</label>
19+
<input type="number" id="min" name="min" class="form-input" placeholder="e.g., 1" required />
20+
</div>
21+
22+
<div class="form-group">
23+
<label for="max" class="form-label">⬆️ Maximum Value</label>
24+
<input type="number" id="max" name="max" class="form-input" placeholder="e.g., 100" required />
25+
</div>
26+
</div>
27+
28+
<div class="form-row">
29+
<div class="form-group">
30+
<label for="spins" class="form-label">🔁 Number of Results</label>
31+
<input type="number" id="spins" name="spins" class="form-input" placeholder="e.g., 5" required />
32+
</div>
33+
</div>
34+
35+
<button onclick="generateRandomNumbers()" class="btn btn-primary btn-large">
36+
🎲 Generate Random Numbers
37+
</button>
1738
</div>
18-
<button onclick="generateRandomNumbers()">🎲 Generate</button>
19-
<strong id="result-header"></strong>
20-
<p id="result"></p>
39+
</div>
40+
</div>
41+
42+
<!-- Results Card -->
43+
<div class="card result-card" id="result-card" style="display: none;">
44+
<div class="card-content">
45+
<h3 id="result-header" class="result-header"></h3>
46+
<div id="result" class="result-numbers"></div>
47+
</div>
48+
</div>
2149
</div>
50+
51+
<style>
52+
.random-generator-container {
53+
max-width: 600px;
54+
margin: 0 auto;
55+
padding: 2rem 0;
56+
}
57+
58+
.generator-title {
59+
font-size: 2rem;
60+
font-weight: 700;
61+
margin-bottom: 0.5rem;
62+
text-align: center;
63+
}
64+
65+
.generator-subtitle {
66+
font-size: 1.1rem;
67+
opacity: 0.9;
68+
text-align: center;
69+
margin-bottom: 0;
70+
}
71+
72+
.generator-form {
73+
display: flex;
74+
flex-direction: column;
75+
gap: 1.5rem;
76+
}
77+
78+
.form-row {
79+
display: grid;
80+
grid-template-columns: 1fr 1fr;
81+
gap: 1rem;
82+
}
83+
84+
.form-row:last-of-type {
85+
grid-template-columns: 1fr;
86+
max-width: 300px;
87+
margin: 0 auto;
88+
}
89+
90+
.form-group {
91+
display: flex;
92+
flex-direction: column;
93+
gap: 0.5rem;
94+
}
95+
96+
.form-label {
97+
font-weight: 600;
98+
color: #374151;
99+
font-size: 0.9rem;
100+
}
101+
102+
.form-input {
103+
padding: 0.75rem 1rem;
104+
border: 2px solid #e5e7eb;
105+
border-radius: 0.5rem;
106+
font-size: 1rem;
107+
transition: all 0.3s ease;
108+
background: #f9fafb;
109+
}
110+
111+
.form-input:focus {
112+
outline: none;
113+
border-color: #667eea;
114+
background: white;
115+
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
116+
}
117+
118+
.form-input:hover {
119+
border-color: #d1d5db;
120+
background: white;
121+
}
122+
123+
.btn-large {
124+
padding: 1rem 2rem;
125+
font-size: 1.1rem;
126+
font-weight: 700;
127+
width: 100%;
128+
margin-top: 0.5rem;
129+
}
130+
131+
.result-card {
132+
border: 2px solid #10b981;
133+
background: linear-gradient(135deg, #ecfdf5 0%, #f0fdf4 100%);
134+
}
135+
136+
.result-header {
137+
color: #065f46;
138+
text-align: center;
139+
margin-bottom: 1rem;
140+
font-size: 1.3rem;
141+
font-weight: 600;
142+
}
143+
144+
.result-numbers {
145+
display: flex;
146+
flex-wrap: wrap;
147+
justify-content: center;
148+
gap: 0.75rem;
149+
margin-top: 1rem;
150+
}
151+
152+
.result-numbers::before {
153+
content: attr(data-numbers);
154+
}
155+
156+
.result-number {
157+
display: inline-flex;
158+
align-items: center;
159+
justify-content: center;
160+
min-width: 3rem;
161+
height: 3rem;
162+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
163+
color: white;
164+
font-weight: 700;
165+
font-size: 1.1rem;
166+
border-radius: 50%;
167+
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
168+
transition: all 0.3s ease;
169+
animation: fadeInScale 0.5s ease forwards;
170+
}
171+
172+
.result-number:hover {
173+
transform: scale(1.1);
174+
box-shadow: 0 8px 12px -2px rgba(0, 0, 0, 0.15);
175+
}
176+
177+
@keyframes fadeInScale {
178+
from {
179+
opacity: 0;
180+
transform: scale(0.8);
181+
}
182+
to {
183+
opacity: 1;
184+
transform: scale(1);
185+
}
186+
}
187+
188+
/* Mobile responsive */
189+
@media (max-width: 640px) {
190+
.random-generator-container {
191+
padding: 1rem;
192+
}
193+
194+
.form-row {
195+
grid-template-columns: 1fr;
196+
}
197+
198+
.generator-title {
199+
font-size: 1.75rem;
200+
}
201+
202+
.generator-subtitle {
203+
font-size: 1rem;
204+
}
205+
}
206+
</style>

‎_includes/svg-icons.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,3 +14,4 @@
1414
{% if site.footer-links.playconsole %}<a href="https://play.google.com/store/apps/dev?id={{ site.footer-links.playconsole }}"><i class="svg-icon playconsole"></i></a>{% endif %}
1515
{% if site.footer-links.cncf %}<a href="https://community.cncf.io/{{ site.footer-links.cncf }}"><i class="svg-icon cncf"></i></a>{% endif %}
1616
{% if site.footer-links.meetup %}<a href="https://meetup.com/{{ site.footer-links.meetup }}"><i class="svg-icon meetup"></i></a>{% endif %}
17+
{% if site.footer-links.random-number-generator %}<a href="{{ site.baseurl }}/random-number-generator/" style="font-size: 1.2em; text-decoration: none;">🎲</a>{% endif %}

‎_pages/random-number-generator.md‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,11 @@
11
---
22
layout: page
3-
title: Random Number Generator
3+
title: 🎲 Random Number Generator
44
permalink: /random-number-generator/
55
---
66

7+
<center>
8+
We love to do raffles and to make it fun, we do it via random numbers so everyone has a fair chance to win!
9+
</center>
10+
711
{% include random-number-generator.html %}

‎assets/scripts/generate-random-numbers.js‎

Lines changed: 36 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,53 @@
11
function generateRandomNumbers() {
2-
document.getElementById('result-header').innerText = '';
3-
document.getElementById('result').innerText = '';
2+
const resultCard = document.getElementById('result-card');
3+
const resultHeader = document.getElementById('result-header');
4+
const resultContainer = document.getElementById('result');
5+
6+
// Clear previous results
7+
resultHeader.innerText = '';
8+
resultContainer.innerHTML = '';
9+
resultCard.style.display = 'none';
410

511
const min = parseInt(document.getElementById('min').value, 10);
612
const max = parseInt(document.getElementById('max').value, 10);
713
const spins = parseInt(document.getElementById('spins').value, 10);
814

915
if (
10-
!min || isNaN(min) || min < 0 ||
11-
!max || isNaN(max) || max <= min ||
12-
!spins || isNaN(spins) || spins <= 0 || spins > max - min + 1
16+
isNaN(min) || min < 0 ||
17+
isNaN(max) || max < min ||
18+
isNaN(spins) || spins <= 0 || spins > max - min + 1
1319
) {
14-
document.getElementById('result-header').innerText = 'Invalid input';
15-
return
20+
resultHeader.innerText = '❌ Invalid input';
21+
resultHeader.style.color = '#dc2626';
22+
resultContainer.innerHTML = '<p style="text-align: center; color: #6b7280;">Please check your input values. Make sure minimum < maximum and number of results ≤ range size.</p>';
23+
resultCard.style.display = 'block';
24+
resultCard.style.border = '2px solid #ef4444';
25+
resultCard.style.background = 'linear-gradient(135deg, #fef2f2 0%, #fef7f7 100%)';
26+
return;
1627
}
1728

18-
1929
const generatedNumbers = new Set();
2030
while (generatedNumbers.size < spins) {
2131
const randomNumber = Math.floor(Math.random() * (max - min + 1)) + min;
2232
generatedNumbers.add(randomNumber);
2333
}
2434

25-
document.getElementById('result-header').innerText = 'Your lucky numbers are:';
26-
document.getElementById('result').innerText = Array.from(generatedNumbers).join(', ');
35+
// Show success results
36+
resultHeader.innerText = '🎉 Your lucky numbers are:';
37+
resultHeader.style.color = '#065f46';
38+
39+
const numbersArray = Array.from(generatedNumbers).sort((a, b) => a - b);
40+
const numbersHTML = numbersArray.map(num =>
41+
`<span class="result-number">${num}</span>`
42+
).join('');
43+
44+
resultContainer.innerHTML = numbersHTML;
45+
resultCard.style.border = '2px solid #10b981';
46+
resultCard.style.background = 'linear-gradient(135deg, #ecfdf5 0%, #f0fdf4 100%)';
47+
resultCard.style.display = 'block';
48+
49+
// Smooth scroll to results
50+
setTimeout(() => {
51+
resultCard.scrollIntoView({ behavior: 'smooth', block: 'center' });
52+
}, 100);
2753
}

0 commit comments

Comments
 (0)