4 files changed, 246 insertions, 0 deletions
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 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Bin2Dec</title>
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <header class="header"><h1 class="branding">Bin2Dec</h1></header>
+    <main class="main">
+      <form action="#" method="POST" class="form">
+        <fieldset class="form__fieldset">
+          <legend class="form__legend">
+            Convert a binary number to decimal
+          </legend>
+          <label class="form__label">Binary:</label>
+          <input
+            type="text"
+            name="binary-string"
+            id="input-field"
+            value=""
+            required
+            pattern="[0-1]{1,}"
+            class="form__input"
+          />
+          <button type="submit" class="btn">Convert</button>
+        </fieldset>
+        <div class="result-box">
+          <p class="result-box__label">Decimal:</p>
+          <p id="result"></p>
+        </div>
+      </form>
+    </main>
+    <footer class="footer">
+      <p class="copyright">Bin2Dec. MIT 2021. Armand Philippot.</p>
+    </footer>
+    <script src="app.js"></script>
+  </body>
+</html>
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;
+}