diff --git a/bin2dec-app/index.html b/bin2dec-app/index.html new file mode 100644 index 00000000..754541e8 --- /dev/null +++ b/bin2dec-app/index.html @@ -0,0 +1,50 @@ + + + + + + Bin2Dec Practice App + + + + + + +
+
+

CommitVerse Practice

+

Binary to Decimal Converter

+

Enter a binary number and get its base-10 value.

+ +
+ + +

Up to 8 digits (0 or 1 only)

+ + + + +
+ + + + + - +
+
+ + + + diff --git a/bin2dec-app/script.js b/bin2dec-app/script.js new file mode 100644 index 00000000..4dff0e2a --- /dev/null +++ b/bin2dec-app/script.js @@ -0,0 +1,69 @@ +const form = document.getElementById("converter-form"); +const binaryInput = document.getElementById("binary-input"); +const allowVariableLength = document.getElementById("allow-variable-length"); +const errorText = document.getElementById("error-text"); +const decimalOutput = document.getElementById("decimal-output"); + +function setError(message) { + errorText.textContent = message; +} + +function sanitizeInput(value) { + return value.trim(); +} + +function isBinaryString(value) { + return /^[01]+$/.test(value); +} + +function binaryToDecimal(binaryValue) { + let decimalValue = 0; + let positionFromRight = 0; + + for (let i = binaryValue.length - 1; i >= 0; i -= 1) { + if (binaryValue[i] === "1") { + decimalValue += Math.pow(2, positionFromRight); + } + positionFromRight += 1; + } + + return decimalValue; +} + +function validateInput(binaryValue, allowLongInput) { + if (!binaryValue) { + return "Please enter a binary number."; + } + + if (!isBinaryString(binaryValue)) { + return "Only 0 and 1 are allowed."; + } + + if (!allowLongInput && binaryValue.length > 8) { + return "Use up to 8 digits, or enable bonus mode."; + } + + return ""; +} + +allowVariableLength.addEventListener("change", () => { + binaryInput.maxLength = allowVariableLength.checked ? 64 : 8; + setError(""); +}); + +form.addEventListener("submit", (event) => { + event.preventDefault(); + setError(""); + + const binaryValue = sanitizeInput(binaryInput.value); + const validationMessage = validateInput(binaryValue, allowVariableLength.checked); + + if (validationMessage) { + decimalOutput.textContent = "-"; + setError(validationMessage); + return; + } + + const result = binaryToDecimal(binaryValue); + decimalOutput.textContent = String(result); +}); diff --git a/bin2dec-app/style.css b/bin2dec-app/style.css new file mode 100644 index 00000000..2fe28d8f --- /dev/null +++ b/bin2dec-app/style.css @@ -0,0 +1,157 @@ +:root { + --bg-a: #fbf3ea; + --bg-b: #d6efe2; + --card-bg: rgba(255, 255, 255, 0.82); + --text-main: #1f2937; + --text-muted: #5b6878; + --accent: #006d77; + --accent-strong: #00545c; + --danger: #bf1f2f; + --ring: rgba(0, 109, 119, 0.28); +} + +* { + box-sizing: border-box; +} + +body { + margin: 0; + min-height: 100vh; + font-family: "Space Grotesk", sans-serif; + color: var(--text-main); + background: + radial-gradient(circle at 12% 20%, rgba(250, 173, 20, 0.2), transparent 42%), + radial-gradient(circle at 82% 15%, rgba(0, 109, 119, 0.23), transparent 36%), + linear-gradient(145deg, var(--bg-a), var(--bg-b)); + display: grid; + place-items: center; + padding: 24px; +} + +.app-shell { + width: min(640px, 100%); +} + +.card { + border-radius: 24px; + padding: 28px; + background: var(--card-bg); + border: 1px solid rgba(255, 255, 255, 0.65); + backdrop-filter: blur(8px); + box-shadow: 0 24px 60px rgba(18, 38, 63, 0.18); + animation: rise-in 420ms ease-out; +} + +.eyebrow { + margin: 0; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.08em; + color: var(--accent); + font-size: 0.76rem; +} + +h1 { + margin: 10px 0 6px; + font-size: clamp(1.5rem, 3.2vw, 2rem); +} + +.subtitle { + margin: 0 0 18px; + color: var(--text-muted); +} + +form { + display: grid; + gap: 10px; +} + +label { + font-weight: 600; +} + +input[type="text"] { + width: 100%; + border: 1px solid rgba(31, 41, 55, 0.26); + border-radius: 12px; + padding: 11px 12px; + font: inherit; + transition: border-color 160ms ease, box-shadow 160ms ease; +} + +input[type="text"]:focus { + outline: none; + border-color: var(--accent); + box-shadow: 0 0 0 4px var(--ring); +} + +.hint { + margin: 0 0 6px; + color: var(--text-muted); + font-size: 0.9rem; +} + +.toggle-row { + display: flex; + align-items: center; + gap: 8px; + font-size: 0.92rem; + font-weight: 500; + color: var(--text-muted); + margin: 2px 0 8px; +} + +button { + border: none; + border-radius: 12px; + padding: 12px; + font: inherit; + font-weight: 700; + background: var(--accent); + color: #fff; + cursor: pointer; + transition: transform 140ms ease, background-color 140ms ease; +} + +button:hover { + background: var(--accent-strong); + transform: translateY(-1px); +} + +.error { + min-height: 1.4em; + margin: 14px 0 8px; + color: var(--danger); + font-weight: 600; +} + +.output { + display: block; + width: 100%; + margin-top: 8px; + border: 1px dashed rgba(31, 41, 55, 0.35); + background: rgba(255, 255, 255, 0.7); + border-radius: 12px; + padding: 12px; + font-size: 1.15rem; + font-weight: 700; + min-height: 50px; +} + +@keyframes rise-in { + from { + opacity: 0; + transform: translateY(14px) scale(0.985); + } + to { + opacity: 1; + transform: translateY(0) scale(1); + } +} + +@media (max-width: 640px) { + .card { + padding: 22px; + border-radius: 18px; + } +}