Add random number generator (#54)

* Add random number generator

* Add line break

---------

Co-authored-by: Juliano Costa <[email protected]>

Author: KatharinaSick

_includes/random-number-generator.html

@@ -0,0 +1,21 @@
+<script src="{{ site.baseurl }}/assets/scripts/generate-random-numbers.js"></script>
+<div style="display: flex; flex-direction: column; align-items: center;">
+  <div style="display: flex; flex-direction: row; gap: 24px;">
+    <div class="input__wrapper field">
+        <input type="number" class="input__field" placeholder="⬇️ Minimum Value" name="min" id='min' required />
+        <label for="min" class="input__label">⬇️ Minimum Value</label>
+      </div>
+
+      <div class="input__wrapper field">
+        <input type="number" class="input__field" placeholder="⬆️ Maximum Value" name="max" id='max' required />
+        <label for="max" class="input__label">⬆️ Maximum Value</label>
+      </div>
+    </div>
+      <div class="input__wrapper field">
+        <input type="number" class="input__field" placeholder="🔁 Spins" name="spins" id='spins' required />
+        <label for="spins" class="input__label">🔁 Spins</label>
+      </div>
+    <button onclick="generateRandomNumbers()">🎲 Generate</button>
+    <strong id="result-header"></strong>
+    <p id="result"></p>
+</div>

_layouts/default.html

@@ -35,6 +35,7 @@ <h1 class="site-name"><a href="{{ site.baseurl }}/">{{ site.name }}</a></h1>
               <a href="{{ site.baseurl }}/speaker-info">Speaker Info</a>
               <a href="{{ site.baseurl }}/slides">Slides & Content</a>
               <a href="{{ site.baseurl }}/statistics">Events</a>
+              <a href="{{ site.baseurl }}/random-number-generator">🎲</a>
               <!--
               <a href="{{ site.baseurl }}/search">Search</a>
               <a href="{{ site.baseurl }}/archive">Archive</a>

_pages/random-number-generator.md

@@ -0,0 +1,7 @@
+---
+layout: page
+title: Random Number Generator
+permalink: /random-number-generator/
+---
+
+{% include random-number-generator.html %}

assets/scripts/generate-random-numbers.js

@@ -0,0 +1,27 @@
+function generateRandomNumbers() {
+    document.getElementById('result-header').innerText = '';
+    document.getElementById('result').innerText = '';
+
+    const min = parseInt(document.getElementById('min').value, 10);
+    const max = parseInt(document.getElementById('max').value, 10);
+    const spins = parseInt(document.getElementById('spins').value, 10);
+
+    if (
+        !min || isNaN(min) || min < 0 ||
+        !max || isNaN(max) || max <= min ||
+        !spins || isNaN(spins) || spins <= 0 || spins > max - min + 1
+    ) {
+        document.getElementById('result-header').innerText = 'Invalid input';
+        return
+    }
+
+
+    const generatedNumbers = new Set();
+    while (generatedNumbers.size < spins) {
+        const randomNumber = Math.floor(Math.random() * (max - min + 1)) + min;
+        generatedNumbers.add(randomNumber);
+    }
+
+    document.getElementById('result-header').innerText = 'Your lucky numbers are:';
+    document.getElementById('result').innerText = Array.from(generatedNumbers).join(', ');
+}

assets/style.scss

@@ -256,6 +256,78 @@ p > img {
     clear: both;
 }
 
+// Forms
+.input__wrapper {
+  position: relative;
+  padding: 16px 0 0;
+  margin-top: 10px;
+}
+
+.input__field {
+  border: 0;
+  border-bottom: 1px solid $gray;
+  outline: 0;
+  padding: 8px 0;
+  background: transparent;
+  transition: border-color 0.2s;
+  font-size: 16px;
+
+  &::placeholder {
+    color: transparent;
+  }
+
+  &:placeholder-shown ~ .input__label {
+    cursor: text;
+    top: 20px;
+    font-size: 16px; 
+  }
+}
+
+.input__label {
+  position: absolute;
+  top: 0;
+  display: block;
+  transition: 0.2s;
+  color: $gray;
+  font-size: 10px; 
+}
+
+.input__field:focus {
+  ~ .input__label {
+    position: absolute;
+    top: 0;
+    display: block;
+    transition: 0.2s;
+    color: $blue;
+    font-weight: bold;   
+    font-size: 10px; 
+  }
+  border-width: 3px;
+  border-color: $blue;
+}
+
+/* reset input */
+.input__field{
+  &:required,&:invalid { box-shadow:none; }
+}
+
+button {
+  background-color: $white;
+  border-radius: 8px;
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+
+  color: $blue;
+  border: 1px solid $blue;
+  padding: 6px 16px;
+  margin: 24px;
+  font-size: 18px;
+}
+
+button:hover{
+  background-color: $blue;
+  color: $white;
+}
+
 /*********************/
 /* LAYOUT / SECTIONS */
 /*********************/