Bin2Dec

From 73a5c7fae9ffbe9ada721148c8c454a643aceebe Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Sun, 20 Feb 2022 16:11:50 +0100 Subject: chore!: restructure repo I separated public files from the config/dev files. It improves repo readability. I also moved dotenv helper to public/inc directory and extract the Matomo tracker in the same directory. --- public/projects/js-small-apps/bin2dec/README.md | 13 +++ public/projects/js-small-apps/bin2dec/app.js | 74 ++++++++++++++ public/projects/js-small-apps/bin2dec/index.html | 41 ++++++++ public/projects/js-small-apps/bin2dec/style.css | 118 +++++++++++++++++++++++ 4 files changed, 246 insertions(+) create mode 100644 public/projects/js-small-apps/bin2dec/README.md create mode 100644 public/projects/js-small-apps/bin2dec/app.js create mode 100644 public/projects/js-small-apps/bin2dec/index.html create mode 100644 public/projects/js-small-apps/bin2dec/style.css (limited to 'public/projects/js-small-apps/bin2dec') diff --git a/public/projects/js-small-apps/bin2dec/README.md b/public/projects/js-small-apps/bin2dec/README.md new file mode 100644 index 0000000..01a3756 --- /dev/null +++ b/public/projects/js-small-apps/bin2dec/README.md @@ -0,0 +1,13 @@ +# Bin2Dec + +An app to convert binary strings to decimal number. + +You can find more details about the implementation here: https://github.com/florinpop17/app-ideas/blob/master/Projects/1-Beginner/Bin2Dec-App.md + +## Preview + +You can see a live preview here: https://demo.armandphilippot.com/#bin2dec + +## License + +This project is open-source and available under the [MIT License](../LICENSE). diff --git a/public/projects/js-small-apps/bin2dec/app.js b/public/projects/js-small-apps/bin2dec/app.js new file mode 100644 index 0000000..ccdaee0 --- /dev/null +++ b/public/projects/js-small-apps/bin2dec/app.js @@ -0,0 +1,74 @@ +function setErrorBox() { + const main = document.querySelector(".main"); + const form = document.querySelector(".form"); + const errorBox = document.createElement("div"); + errorBox.classList.add("error-box"); + main.insertBefore(errorBox, form); +} + +function getErrorBox() { + let errorBox = document.querySelector(".error-box"); + + if (!errorBox) { + setErrorBox(); + errorBox = document.querySelector(".error-box"); + } + + return errorBox; +} + +function removeErrorBox() { + const errorBox = getErrorBox(); + errorBox.remove(); +} + +function printError(error) { + const errorBox = getErrorBox(); + errorBox.textContent = error; +} + +function isValidInput(key) { + return key === "0" || key === "1"; +} + +function hasInvalidChar(string) { + const regex = /(?![01])./g; + const invalid = string.search(regex); + return invalid === -1 ? false : true; +} + +function handleInput(value) { + if (hasInvalidChar(value)) { + const error = "Error: valid characters are 0 or 1."; + printError(error); + } else { + removeErrorBox(); + } +} + +function convertBinToDec(bin) { + let result = 0; + + for (const char of bin) { + result = result * 2 + Number(char); + } + + return result; +} + +function handleSubmit(e) { + e.preventDefault(); + const input = document.querySelector(".form__input"); + const result = document.getElementById("result"); + result.textContent = convertBinToDec(input.value); +} + +function init() { + const form = document.querySelector(".form"); + const input = document.querySelector(".form__input"); + handleInput(input.value); + form.addEventListener("submit", handleSubmit); + input.addEventListener("keyup", (e) => handleInput(e.target.value)); +} + +init(); diff --git a/public/projects/js-small-apps/bin2dec/index.html b/public/projects/js-small-apps/bin2dec/index.html new file mode 100644 index 0000000..dd8951d --- /dev/null +++ b/public/projects/js-small-apps/bin2dec/index.html @@ -0,0 +1,41 @@ + + + + + + + Bin2Dec + + + + +

+ +

+ + + + diff --git a/public/projects/js-small-apps/bin2dec/style.css b/public/projects/js-small-apps/bin2dec/style.css new file mode 100644 index 0000000..22db30a --- /dev/null +++ b/public/projects/js-small-apps/bin2dec/style.css @@ -0,0 +1,118 @@ +*, +*::after, +*::before { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +body { + background: #fff; + color: #000; + font-family: Arial, Helvetica, sans-serif; + font-size: 1rem; + line-height: 1.618; + display: flex; + flex-flow: column nowrap; + min-height: 100vh; +} + +.header, +.main, +.footer { + width: min(calc(100vw - 2rem), 80ch); + margin-left: auto; + margin-right: auto; +} + +.header { + padding: 2rem 0 3rem; + text-align: center; +} + +.main { + flex: 1; + display: flex; + flex-flow: column nowrap; + align-content: flex-start; +} + +.footer { + margin-top: 2rem; + padding: 1rem 0; +} + +.copyright { + font-size: 0.9rem; + text-align: center; +} + +.form { + border: solid 2px hsl(219, 64%, 35%); + border-radius: 5px; + padding: 1rem; + margin: 0 auto; +} + +.form__fieldset { + border: none; + display: flex; + flex-flow: row wrap; + align-items: center; + gap: 0.5rem; +} + +.form__legend { + color: hsl(219, 64%, 35%); + font-weight: 600; + font-size: 1.1rem; + margin-bottom: 2rem; +} + +.form__label { + cursor: pointer; + font-weight: 600; +} + +.form__input { + border: 1px solid hsl(219, 64%, 35%); + font: inherit; + line-height: inherit; + padding: 0.2rem 0.5rem; +} + +.btn { + background: #fff; + border: 2px solid hsl(219, 64%, 35%); + color: hsl(219, 64%, 35%); + font: inherit; + font-weight: 600; + line-height: inherit; + padding: 0.2rem 0.5rem; + cursor: pointer; +} + +.btn:hover, +.btn:focus { + background: hsl(219, 64%, 35%); + color: #fff; +} + +.error-box { + border: 1px solid hsl(0, 75%, 38%); + color: hsl(0, 75%, 38%); + font-weight: 600; + margin: 0 auto 2rem; + padding: 1rem; + width: max-content; +} + +.result-box { + display: flex; + gap: 0.5rem; + margin-top: 2rem; +} + +.result-box__label { + font-weight: 600; +} -- cgit v1.2.3