<main>
<p>Enter some numbers...</p>
<form id="data_form">
<input id="data_input" type="text" />
<button id="data_submit" type="button">submit</button>
</form>
<div class="info">
<div>collection: </div>
<div id="collection"></div>
</div>
<p>Get manipulated data returned...</p>
<div class="panel">
<button id="data_sort" type="button">sort</button>
<button id="data_sum" type="button">sum</button>
<button id="data_average" type="button">average</button>
<button id="data_clear" type="button">clear</button>
</div>
<div class="info">
<div>message: </div>
<div id="message"></div>
</div>
</main>
@import url('https://fonts.googleapis.com/css?family=Open+Sans:700&display=swap');
html,
body {
height: 100vh;
margin: 0;
padding: 0;
}
body {
display: grid;
place-items: center;
}
main {
display: flex;
flex-direction: column;
width: 400px;
}
main p {
font-family: 'Open Sans', sans-serif;
font-size: 16px;
margin-bottom: 0;
}
main input {
border: 2px solid rebeccapurple;
font-family: 'Open Sans', sans-serif;
font-size: 16px;
margin-bottom: 8px;
padding: 8px 16px;
}
main button {
background-color: white;
border: 3px solid rebeccapurple;
border-radius: 7px;
color: rebeccapurple;
cursor: pointer;
font-family: 'Open Sans', sans-serif;
font-size: 16px;
font-weight: 700;
padding: 8px 16px;
}
main button:hover {
background-color: lavender;
}
main button:active {
background-color: rebeccapurple;
color: white;
}
main button:focus-visible {
box-shadow: 0 0 0 2px white, 0 0 0 5px rebeccapurple;
outline: none;
}
main .info {
display: flex;
font-family: 'Open Sans', sans-serif;
font-size: 16px;
margin: 8px 0 16px;
}
main .panel {
display: flex;
margin-bottom: 8px;
}
main .panel button {
margin-right: 8px;
}
#message.error {
color: red;
}
const dataInput = document.querySelector('#data_input');
const dataForm = document.querySelector('#data_form');
const dataSubmit = document.querySelector('#data_submit');
const dataSort = document.querySelector('#data_sort');
const dataSum = document.querySelector('#data_sum');
const dataAverage = document.querySelector('#data_average');
const dataClear = document.querySelector('#data_clear');
const collection = document.querySelector('#collection');
const message = document.querySelector('#message');
const numbers = new Proxy([],
{
get: function (target, prop) {
message.classList.remove('error');
if (prop === 'sort') return [...target].sort((a, b) => a - b);
if (prop === 'sum') return [...target].reduce((a, b) => a + b);
if (prop === 'average') return [...target].reduce((a, b) => a + b) / target.length;
if (prop === 'clear') {
message.innerText = `${target.length} number${target.length === 1 ? '' : 's'} cleared!`;
target.splice(0, target.length);
collection.innerText = target;
}
return target[prop];
},
set: function (target, prop, value) {
if (prop === 'length') return true;
dataInput.value = '';
message.classList.remove('error');
if (!Number.isInteger(value)) {
console.error('Data provided is not a number!');
message.innerText = 'Data provided is not a number!';
message.classList.add('error');
return false;
}
if (target.includes(value)) {
console.error(`Number ${value} has already been submitted!`);
message.innerText = `Number ${value} has already been submitted!`;
message.classList.add('error');
return false;
}
target[prop] = value;
collection.innerText = target;
message.innerText = `Number ${value} added!`;
return true;
}
});
dataForm.addEventListener('submit', (e) => {
e.preventDefault();
numbers.push(Number.parseInt(dataInput.value));
});
dataSubmit.addEventListener('click', () => {
numbers.push(Number.parseInt(dataInput.value));
});
dataSort.addEventListener('click', () => {
message.innerText = numbers.sort;
});
dataSum.addEventListener('click', () => {
message.innerText = numbers.sum;
});
dataAverage.addEventListener('click', () => {
message.innerText = numbers.average;
});
dataClear.addEventListener('click', () => {
numbers.clear;
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.