495 is a special number

495-is-a-special-number.markdown

495 is a special number

Enter a three digit number. Each digit can only be there once. The algoritm is: sort the digits with largets digits first, and smallest digits first. Then subtract them from each other. You will always end up on 495 I discovered this in a video on TikTok

A Pen by Osvaldo on CodePen.

License.

index.html

<input type="number" value="123" min="102" max="987">
<div class="o">
	<div class="output"></div>
	<svg viewBox="0 0 500 1000"></svg>
</div>
<h2>Follow these rules and you will always get 495</h2>
<blockquote>Enter a three digit number. Each digit can only be there once.<br><em>The algoritm is: sort the digits with largets digits first, and smallest digits first. Then subtract them from each other.<br>
		You will always end up on <strong>495</strong>!<br>
		I discovered this in a <a href="https://vm.tiktok.com/ZMNfpksse/?k=1">video on TikTok</a>
	</em></blockquote>

script.js

const svg = document.querySelector("svg");
const input = document.querySelector("input");
const output = document.querySelector(".output");
input.addEventListener("input", action);
let response = [];
let max = 0;

function action() {
	let start = input.value;
	response = [];
	max = 10;
	let valid = true;
	if (start.length < 3) {
		response.push("Must be a 3 digit number");
	}
	let digits = start.split("");
	let onlyOnce = true;
	digits.map((digit, i) => {
		onlyOnce =
			start.substr(i + 1, start.length).indexOf(digit) !== -1 ? false : onlyOnce;
	});
	if (!onlyOnce) {
		response.push("Each digit needs to be there only once");
	}
	if (response.length === 0) {
		output.innerHTML = "";
		const plots = calc(start, []);
		plot(plots);
	} else {
		output.innerHTML = `<pre>${response.join("<br>")}</pre>`;
	}
}

function plot(plots) {
	let d = "M ";
	let mx = plots.length * 100;
	plots.map((p, i) => {
		const x = mx - 80 * i;
		const y = 1000 - p;
		d += `${x} ${y} `;
		if (i === 0) {
			d += " L ";
		}
	});
	svg.innerHTML = `${svg.innerHTML} <path fill="none" stroke="black" d="${d}" />`;
}

function calc(number, plots) {
	let numbers = getNumbers(number);

	let result = subtract(numbers);
	output.innerHTML = `${output.innerHTML}
	<div class="col">
	<div class="start">${number}</div>
	<div class="big">${numbers.big}</div>
	<div class="small">-${numbers.small}</div>
	<div class="result">  ${result}</div>
	</div>`;
	plots.push(typeof number === "string" ? parseInt(number) : number);
	if (result !== 495) {
		output.innerHTML = `${output.innerHTML}<div class="col"> =&gt; </div>`;
		return calc(result, plots);
	} else {
		return plots;
	}
}

function getNumbers(number) {
	return {
		big: dec(number).join(""),
		small: asc(number).join("")
	};
}

function subtract(numbers) {
	return parseInt(numbers.big) - parseInt(numbers.small);
}

function asc(number) {
	return number
		.toString()
		.split("")
		.sort((a, b) => (a > b ? 1 : -1));
}

function dec(number) {
	return number
		.toString()
		.split("")
		.sort((a, b) => (a > b ? -1 : 1));
}
action();

style.css

input {
	font-size: 24pt;
}
.output {
	padding: 10px;
	font-size: 24pt;
	display: flex;
	gap: 10px;
}
.col {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}
.start {
	font-weight: bold;
	margin-bottom: 4px;
	border-bottom: solid 1px #333;
}

.big {
}
.small {
	border-bottom: solid 1px #333;
}
svg {
	height: 200px;
}
.o {
	display: flex;
	justify-content: space-between;
}