OP Random Number Generator

On GitHub: https://dabluepiano.github.io/Overpowered-Random-Number-Generator/

index.html

<!DOCTYPE html>

<head>

<title>Overpowered Random Number Generator</title>

</head>

<body>

<h1>Overpowered Random Number Generator</h1>

<span class="tooltiptext">Enter minimum value</span>

</div>

<span class="tooltiptext">Enter maximum value</span>

</div>

<label for="decimals">Decimals:</label>

<span class="tooltiptext">Select number of decimal places</span>

</div>

<label for="output">Number of Outputs:</label>

<span class="tooltiptext">Select number of outputs</span>

</div>

<label><input type="checkbox" id="median" checked> Median</label>

<label><input type="checkbox" id="stdDev" checked> Standard Deviation</label>

<label><input type="checkbox" id="mad" checked> Mean Absolute Deviation (MAD)</label>

<label><input type="checkbox" id="variance" checked> Variance</label>

<label><input type="checkbox" id="range" checked> Range</label>

<label><input type="checkbox" id="q1" checked> Q1 (25th Percentile)</label>

<label><input type="checkbox" id="q3" checked> Q3 (75th Percentile)</label>

<label><input type="checkbox" id="iqr" checked> Interquartile Range (IQR)</label>

<label><input type="checkbox" id="skewness" checked> Skewness</label>

<label><input type="checkbox" id="kurtosis" checked> Kurtosis</label>

<label><input type="checkbox" id="geometricMean" checked> Geometric Mean</label>

<label><input type="checkbox" id="harmonicMean" checked> Harmonic Mean</label>

</div>

<button onclick="generateRandomNumbers()">Generate</button>

<button onclick="copyToClipboard('numbers')">Copy Numbers to Clipboard</button>

<button onclick="copyToClipboard('statistics')">Copy Statistics to Clipboard</button>

<button onclick="copyToClipboard('both')">Copy Both to Clipboard</button>

</div>

let generatedNumbers = [];

function updateDecimalValue(value) {

document.getElementById('decimals').value = value;

}

function updateOutputValue(value) {

document.getElementById('output').value = value;

}

function generateRandomNumbers() {

const min = parseFloat(document.getElementById('min').value);

const max = parseFloat(document.getElementById('max').value);

const decimals = parseInt(document.getElementById('decimals').value);

const numOutputs = parseInt(document.getElementById('output').value);

const resultsContainer = document.getElementById('results');

resultsContainer.innerHTML = '';

resultsContainer.style.display = 'grid';

const loadingSpinner = document.getElementById('loadingSpinner');

loadingSpinner.style.display = 'block';

setTimeout(() => {

generatedNumbers = [];

for (let i = 0; i < numOutputs; i++) {

const randomNum = (Math.random() * (max - min) + min).toFixed(decimals);

generatedNumbers.push(parseFloat(randomNum));

const resultParagraph = document.createElement('p');

resultParagraph.innerText = randomNum;

resultsContainer.appendChild(resultParagraph);

}

displayStatistics();

loadingSpinner.style.display = 'none';

}, 1000);

}

function displayStatistics() {

const statisticsContainer = document.getElementById('statistics');

statisticsContainer.innerHTML = '';

statisticsContainer.style.display = 'block';

const statsToDisplay = [

{ id: 'median', func: calculateMedian, label: 'Median' },

{ id: 'mode', func: calculateMode, label: 'Mode' },

{ id: 'mean', func: calculateMean, label: 'Mean' },

{ id: 'stdDev', func: calculateStdDev, label: 'Standard Deviation' },

{ id: 'mad', func: calculateMad, label: 'Mean Absolute Deviation (MAD)' },

{ id: 'variance', func: calculateVariance, label: 'Variance' },

{ id: 'range', func: calculateRange, label: 'Range' },

{ id: 'q1', func: calculateQ1, label: 'Q1 (25th Percentile)' },

{ id: 'q3', func: calculateQ3, label: 'Q3 (75th Percentile)' },

{ id: 'iqr', func: calculateIqr, label: 'Interquartile Range (IQR)' },

{ id: 'skewness', func: calculateSkewness, label: 'Skewness' },

{ id: 'kurtosis', func: calculateKurtosis, label: 'Kurtosis' },

{ id: 'geometricMean', func: calculateGeometricMean, label: 'Geometric Mean' },

{ id: 'harmonicMean', func: calculateHarmonicMean, label: 'Harmonic Mean' },

];

statsToDisplay.forEach(stat => {

if (document.getElementById(stat.id).checked) {

const statValue = stat.func(generatedNumbers);

const statParagraph = document.createElement('p');

statParagraph.innerText = `${stat.label}: ${statValue}`;

statisticsContainer.appendChild(statParagraph);

}

});

}

function calculateMedian(arr) {

arr.sort((a, b) => a - b);

const mid = Math.floor(arr.length / 2);

return arr.length % 2 !== 0 ? arr[mid] : ((arr[mid - 1] + arr[mid]) / 2).toFixed(2);

}

function calculateMode(arr) {

const freqMap = {};

arr.forEach(num => freqMap[num] = (freqMap[num] || 0) + 1);

const maxFreq = Math.max(...Object.values(freqMap));

const modes = Object.keys(freqMap).filter(num => freqMap[num] === maxFreq);

return modes.length === arr.length ? 'No mode' : modes.join(', ');

}

function calculateMean(arr) {

const sum = arr.reduce((acc, num) => acc + num, 0);

return (sum / arr.length).toFixed(2);

}

function calculateStdDev(arr) {

const mean = calculateMean(arr);

const variance = calculateVariance(arr);

return Math.sqrt(variance).toFixed(2);

}

function calculateMad(arr) {

const mean = calculateMean(arr);

const mad = arr.reduce((acc, num) => acc + Math.abs(num - mean), 0) / arr.length;

return mad.toFixed(2);

}

function calculateVariance(arr) {

const mean = calculateMean(arr);

const variance = arr.reduce((acc, num) => acc + Math.pow(num - mean, 2), 0) / arr.length;

return variance.toFixed(2);

}

function calculateRange(arr) {

return (Math.max(...arr) - Math.min(...arr)).toFixed(2);

}

function calculateQ1(arr) {

arr.sort((a, b) => a - b);

const q1Pos = (arr.length + 1) / 4;

if (q1Pos % 1 === 0) return arr[q1Pos - 1].toFixed(2);

const lower = arr[Math.floor(q1Pos) - 1];

const upper = arr[Math.ceil(q1Pos) - 1];

return ((lower + upper) / 2).toFixed(2);

}

function calculateQ3(arr) {

arr.sort((a, b) => a - b);

const q3Pos = (3 * (arr.length + 1)) / 4;

if (q3Pos % 1 === 0) return arr[q3Pos - 1].toFixed(2);

const lower = arr[Math.floor(q3Pos) - 1];

const upper = arr[Math.ceil(q3Pos) - 1];

return ((lower + upper) / 2).toFixed(2);

}

function calculateIqr(arr) {

return (calculateQ3(arr) - calculateQ1(arr)).toFixed(2);

}

function calculateSkewness(arr) {

const mean = calculateMean(arr);

const stdDev = calculateStdDev(arr);

const skewness = arr.reduce((acc, num) => acc + Math.pow((num - mean) / stdDev, 3), 0) / arr.length;

return skewness.toFixed(2);

}

function calculateKurtosis(arr) {

const mean = calculateMean(arr);

const stdDev = calculateStdDev(arr);

const kurtosis = arr.reduce((acc, num) => acc + Math.pow((num - mean) / stdDev, 4), 0) / arr.length;

return (kurtosis - 3).toFixed(2);

}

function calculateGeometricMean(arr) {

const product = arr.reduce((acc, num) => acc * num, 1);

return Math.pow(product, 1 / arr.length).toFixed(2);

}

function calculateHarmonicMean(arr) {

const harmonicSum = arr.reduce((acc, num) => acc + (1 / num), 0);

return (arr.length / harmonicSum).toFixed(2);

}

function copyToClipboard(type) {

let textToCopy = '';

if (type === 'numbers' || type === 'both') {

textToCopy += 'Generated Numbers:\n' + generatedNumbers.join('\n') + '\n\n';

}

if (type === 'statistics' || type === 'both') {

const statisticsText = Array.from(document.getElementById('statistics').children).map(p => p.innerText).join('\n');

textToCopy += 'Statistics:\n' + statisticsText;

}

navigator.clipboard.writeText(textToCopy).then(() => {

alert('Copied to clipboard');

}).catch(err => {

console.error('Could not copy text: ', err);

});

}

</script>

</body>

</html>

styles.css

body {

background-color: #121212;

color: #FFFFFF;

font-family: 'DM Sans', sans-serif;

margin: 0;

height: 100vh;

overflow: auto;

}

.container {

background-color: #1E1E1E;

border-radius: 12px;

padding: 20px;

box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

max-width: 500px;

width: 100%;

margin: 20px auto;

}

h1 {

font-size: 24px;

text-align: center;

margin-bottom: 20px;

color: #4A90E2;

}

.input-group,

.checkbox-group {

margin-bottom: 15px;

}

.input-group label,

.checkbox-group label {

display: block;

font-weight: 500;

margin-bottom: 5px;

}

input[type="number"],

input[type="range"] {

width: 100%;

padding: 8px;

margin-top: 5px;

border: 1px solid #333;

border-radius: 6px;

background-color: #2C2C2C;

color: #FFFFFF;

font-family: 'DM Sans', sans-serif;

}

/* Sliders */

input[type="range"] {

-webkit-appearance: none;

appearance: none;

height: 8px;

background: #4A90E2;

border-radius: 5px;

outline: none;

}

input[type="range"]::-webkit-slider-thumb {

-webkit-appearance: none;

appearance: none;

width: 20px;

height: 20px;

background: #FFFFFF;

border: 2px solid #4A90E2;

border-radius: 50%;

cursor: pointer;

}

input[type="range"]::-moz-range-thumb {

width: 20px;

height: 20px;

background: #FFFFFF;

border: 2px solid #4A90E2;

border-radius: 50%;

cursor: pointer;

}

.results p,

.statistics p {

background-color: #252525;

padding: 10px;

border-radius: 6px;

margin: 5px 0;

border: 2px solid #4A90E2;

}

.results {

display: grid;

grid-template-columns: repeat(3, 1fr);

gap: 10px;

margin-top: 15px;

}

.statistics {

padding: 20px;

border-radius: 8px;

margin-top: 20px;

background-color: #1E1E1E;

font-family: 'DM Sans', sans-serif;

}

/* Hide the results and statistics containers by default */

.results, .statistics {

display: none;

}

button {

width: 100%;

padding: 10px;

border: none;

border-radius: 6px;

background-color: #4A90E2;

color: #FFF;

font-size: 16px;

font-weight: 700;

cursor: pointer;

margin-bottom: 15px;

transition: background-color 0.3s ease;

font-family: 'DM Sans', sans-serif;

}

button:hover {

background-color: #357ABD;

}

.loading-spinner {

border: 4px solid rgba(255, 255, 255, 0.3);

border-top: 4px solid #4A90E2;

border-radius: 50%;

width: 40px;

height: 40px;

animation: spin 1s linear infinite;

display: none;

margin: 20px auto;

}

@keyframes spin {

0% { transform: rotate(0deg); }

100% { transform: rotate(360deg); }

}

/* Tooltips */

.tooltip {

position: relative;

display: inline-block;

}

.tooltip .tooltiptext {

visibility: hidden;

width: 200px;

background-color: #4A90E2;

color: #fff;

text-align: center;

padding: 5px;

border-radius: 6px;

position: absolute;

z-index: 1;

bottom: 125%;

left: 50%;

margin-left: -100px;

opacity: 0;

transition: opacity 0.3s;

}

.tooltip:hover .tooltiptext {

visibility: visible;

opacity: 1;

}

/* Scrollbar styling */

::-webkit-scrollbar {

width: 12px;

}

::-webkit-scrollbar-track {

background: #121212;

border-radius: 6px;

}

::-webkit-scrollbar-thumb {

background: #4A90E2;

border-radius: 6px;

}

::-webkit-scrollbar-thumb:hover {

background: #357ABD;

}