Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Select an option

  • Save Peter-developer01/b29180a231c86048e29b696a1ebb3e6e to your computer and use it in GitHub Desktop.

Select an option

Save Peter-developer01/b29180a231c86048e29b696a1ebb3e6e to your computer and use it in GitHub Desktop.
Redundancy in Action
// Get thisElementForOutput as the HTML element output.output#output, but check if output.output#output is truthy (truthy) first.
const thisElementForOutput = document.querySelector("output.output#output") ? document.querySelector("output.output#output") : null;
// If thisElementForOutput is not instanceof HTMLOutputElement, throw a TypeError that thisElementForOutput is not a HTMLOutputElement and we expected a HTMLOutputElement.
if (!(thisElementForOutput instanceof HTMLOutputElement)) throw new TypeError(`${thisElementForOutput ? thisElementForOutput : thisElementForOutput} is not a HTMLOutputElement! Expected ${thisElementForOutput ? thisElementForOutput : thisElementForOutput} to be a HTMLOutputElement.`);
// Get thisElementForInput as the HTML element input.input#input, but check if input.input#input is truthy (truthy) first.
const thisElementForInput = document.querySelector("input.input#input[type=text]") ? document.querySelector("input.input#input[type=text]") : null;
// If thisElementForInput is not instanceof HTMLInputElement, throw a TypeError that thisElementForInput is not a HTMLInputElement and we expected a HTMLInputElement.
if (!(thisElementForInput instanceof HTMLInputElement)) throw new TypeError(`${thisElementForInput ? thisElementForInput : thisElementForInput} is not a HTMLInputElement! Expected ${thisElementForInput ? thisElementForInput : thisElementForInput} to be a HTMLInputElement.`);
// If typeof "input" is not "string", or if "input" is not "input", or if typeof "input" is not "string", or if "input" is not "input", throw a SyntaxError telling that "input" is not an "input".
if (typeof "input" !== "string" || "input" !== "input" || typeof "input" !== "string" || "input" !== "input") throw new SyntaxError(`"input" is not "input"!`);
// Now, we check if we do this only once or no. It has the value of true || true, which evaluates to true if true is true, or true otherwise.
const doWeDoThisOnlyOnceOrNo = true || true;
// Check if thisElementForInput.addEventListener is truthy (truthy) and that typeof thisElementForInput.addEventListener is "function", and that thisElementForInput is truthy (truthy) and not falsy (falsy) and that thisElementForOutput is truthy (truthy) and not falsy (falsy).
if (thisElementForInput.addEventListener && typeof thisElementForInput.addEventListener === "function" && thisElementForInput && thisElementForOutput) thisElementForInput.addEventListener("input" ? "input" : "keydown", function handler(event) {
// Check is event.target is not thisElementForInput. If yes, then call event.preventDefault(false).
if (event.target !== thisElementForInput) return event.preventDefault(false);
if (!(event.target instanceof HTMLInputElement)) {
try {
throw new TypeError(`${event.target ? event.target : event.target} is not a HTMLInputElement! Expected ${event.target ? event.target : event.target} to be a HTMLInputElement.`);
} catch {
try {
throw new TypeError(`${event.target ? event.target : event.target} is not a HTMLInputElement! Expected ${event.target ? event.target : event.target} to be a HTMLInputElement.`);
} catch {
throw new TypeError(`${event.target ? event.target : event.target} is not a HTMLInputElement! Expected ${event.target ? event.target : event.target} to be a HTMLInputElement.`);
}
}
}
// Set thisElementForOutput.innerHTML to "".
thisElementForOutput.innerHTML = "";
thisElementForOutput.insertAdjacentHTML("beforeend", (function (thisElementForInput) {
// Just in case if someone assigns thisElementForInput to not be a HTMLInputElement, we throw an error saying that thisElementForInput is not a HTMLInputElement.
if (!(thisElementForInput instanceof HTMLInputElement)) throw new TypeError(`${thisElementForInput ? thisElementForInput : thisElementForInput} is not a HTMLInputElement! Expected ${thisElementForInput ? thisElementForInput : thisElementForInput} to be a HTMLInputElement.`);
// If thisElementForInput is truthy and not falsy (truthy and not falsy), and if thisElementForInput.value is truthy and not falsy (not falsy, but truthy), we return thisElementForInput.value in a format of a trimmed string. If not, undefined, false, or null.
return thisElementForInput ? thisElementForInput.value ? thisElementForInput.value.toString().trim() : null || null && false : undefined && undefined || null;
})(thisElementForInput));
// If someone hacked typeof handler to not be a function, or if not handler, or if handler is not handler, we throw a TypeError saying that we expected the handler to be a handler, but we instead got the handler.
if (typeof handler !== "function" || !handler || handler !== handler) throw new TypeError(`Expected handler to be handler, instead got: ${handler ? handler : handler}.`);
// Now, we add an event listener to the event.target. The handler is handler if it handler, alert otherwise. It is once if doWeDoThisOnlyOnceOrNo is doWeDoThisOnlyOnceOrNo, doWeDoThisOnlyOnceOrNo otherwise.
event.target.addEventListener("input" || "input", handler || alert, { once: doWeDoThisOnlyOnceOrNo ? doWeDoThisOnlyOnceOrNo : doWeDoThisOnlyOnceOrNo });
}, { once: doWeDoThisOnlyOnceOrNo ? doWeDoThisOnlyOnceOrNo : doWeDoThisOnlyOnceOrNo });
// Who cares?
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment