{"id":21653834,"url":"https://github.com/epranka/dec2bin","last_synced_at":"2025-12-31T00:08:57.140Z","repository":{"id":41708900,"uuid":"242509220","full_name":"epranka/dec2bin","owner":"epranka","description":"Simple Dec2Bin converter created in CRA which helps to convert the number from decimal to binary","archived":false,"fork":false,"pushed_at":"2023-01-05T08:04:38.000Z","size":4578,"stargazers_count":0,"open_issues_count":23,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-25T06:11:31.263Z","etag":null,"topics":["binary","converter","cra","create-react-app","css","dec2bin","decimal","decimal-to-binary","javascript","react","tool","tutorial","webdesign","website"],"latest_commit_sha":null,"homepage":"https://dec2bin.now.sh","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/epranka.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-02-23T12:02:30.000Z","updated_at":"2021-11-15T15:16:58.000Z","dependencies_parsed_at":"2023-02-03T19:30:37.800Z","dependency_job_id":null,"html_url":"https://github.com/epranka/dec2bin","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/epranka%2Fdec2bin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/epranka%2Fdec2bin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/epranka%2Fdec2bin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/epranka%2Fdec2bin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/epranka","download_url":"https://codeload.github.com/epranka/dec2bin/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244553277,"owners_count":20471169,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["binary","converter","cra","create-react-app","css","dec2bin","decimal","decimal-to-binary","javascript","react","tool","tutorial","webdesign","website"],"created_at":"2024-11-25T08:20:57.612Z","updated_at":"2025-12-31T00:08:57.103Z","avatar_url":"https://github.com/epranka.png","language":"JavaScript","readme":"\u003ch1 align=\"center\" style=\"border-bottom: none;\"\u003eDec2Bin\u003c/h1\u003e\n\n\u003ch3 align=\"center\"\u003eDecimal to binary converter\u003c/h3\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://twitter.com/epranka\" title=\"follow on twitter\"\u003e\n    \u003cimg alt=\"twitter badge\" src=\"https://badgen.net/badge/icon/twitter/00acee?icon=twitter\u0026label\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://linkedin.com/in/epranka\" title=\"connect on linkedin\"\u003e\n      \u003cimg alt=\"linkedin badge\" src=\"https://badgen.net/badge/icon/linkedin/2867B2?label\u0026icon=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8%2BCjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgaWQ9InN2ZzQiCiAgIHZlcnNpb249IjEuMSIKICAgdmlld0JveD0iMCAwIDI0IDI0IgogICBoZWlnaHQ9IjI0IgogICB3aWR0aD0iMjQiPgogIDxtZXRhZGF0YQogICAgIGlkPSJtZXRhZGF0YTEwIj4KICAgIDxyZGY6UkRGPgogICAgICA8Y2M6V29yawogICAgICAgICByZGY6YWJvdXQ9IiI%2BCiAgICAgICAgPGRjOmZvcm1hdD5pbWFnZS9zdmcreG1sPC9kYzpmb3JtYXQ%2BCiAgICAgICAgPGRjOnR5cGUKICAgICAgICAgICByZGY6cmVzb3VyY2U9Imh0dHA6Ly9wdXJsLm9yZy9kYy9kY21pdHlwZS9TdGlsbEltYWdlIiAvPgogICAgICAgIDxkYzp0aXRsZT48L2RjOnRpdGxlPgogICAgICA8L2NjOldvcms%2BCiAgICA8L3JkZjpSREY%2BCiAgPC9tZXRhZGF0YT4KICA8ZGVmcwogICAgIGlkPSJkZWZzOCIgLz4KICA8cGF0aAogICAgIHN0eWxlPSJmaWxsOiNmZmZmZmYiCiAgICAgaWQ9InBhdGg4MjEiCiAgICAgZD0iTSA4LDE5IEggNSBWIDggaCAzIHoiIC8%2BCiAgPHBhdGgKICAgICBzdHlsZT0iZmlsbDojZmZmZmZmIgogICAgIGlkPSJwYXRoODE5IgogICAgIGQ9Im0gNi41LDYuNzMyIGMgLTAuOTY2LDAgLTEuNzUsLTAuNzkgLTEuNzUsLTEuNzY0IDAsLTAuOTc0IDAuNzg0LC0xLjc2NCAxLjc1LC0xLjc2NCAwLjk2NiwwIDEuNzUsMC43OSAxLjc1LDEuNzY0IDAsMC45NzQgLTAuNzgzLDEuNzY0IC0xLjc1LDEuNzY0IHoiIC8%2BCiAgPHBhdGgKICAgICBzdHlsZT0iZmlsbDojZmZmZmZmIgogICAgIGlkPSJwYXRoMiIKICAgICBkPSJtIDIwLDE5IGggLTMgdiAtNS42MDQgYyAwLC0zLjM2OCAtNCwtMy4xMTMgLTQsMCBWIDE5IEggMTAgViA4IGggMyB2IDEuNzY1IGMgMS4zOTYsLTIuNTg2IDcsLTIuNzc3IDcsMi40NzYgeiIgLz4KPC9zdmc%2BCg%3D%3D\" /\u003e\u003c/a\u003e \n  \u003ca href=\"https://dev.to/epranka\" title=\"follow on dev.to\"\u003e\n    \u003cimg alt=\"dev.to badge\" src=\"https://badgen.net/badge/icon/dev.to/232221?label\u0026icon=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8%2BCjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgaWQ9InN2ZzQiCiAgIHZlcnNpb249IjEuMSIKICAgaGVpZ2h0PSIyMzIxIgogICB3aWR0aD0iMjUwMCIKICAgdmlld0JveD0iMCAzMiA0NDcuOTk5OTk5OTk5OTk5OTQgNDQ4Ij4KICA8bWV0YWRhdGEKICAgICBpZD0ibWV0YWRhdGExMCI%2BCiAgICA8cmRmOlJERj4KICAgICAgPGNjOldvcmsKICAgICAgICAgcmRmOmFib3V0PSIiPgogICAgICAgIDxkYzpmb3JtYXQ%2BaW1hZ2Uvc3ZnK3htbDwvZGM6Zm9ybWF0PgogICAgICAgIDxkYzp0eXBlCiAgICAgICAgICAgcmRmOnJlc291cmNlPSJodHRwOi8vcHVybC5vcmcvZGMvZGNtaXR5cGUvU3RpbGxJbWFnZSIgLz4KICAgICAgICA8ZGM6dGl0bGU%2BPC9kYzp0aXRsZT4KICAgICAgPC9jYzpXb3JrPgogICAgPC9yZGY6UkRGPgogIDwvbWV0YWRhdGE%2BCiAgPGRlZnMKICAgICBpZD0iZGVmczgiIC8%2BCiAgPHBhdGgKICAgICBkPSJNIDcxLjgxNTI4MiwxOTguNDUwNDUgSCA5MS4xNjI1MiBjIDQuMzA0NDAzLDAgOC42MjAxMjMsMS42MDg3MyAxMi45MjQ1MSw0LjgyNTkzIDQuMjkzMzEsMy4yMTcyMSA2LjQ1NjM5LDguMDUzODYgNi40Njc0OSwxNC40ODgyNyB2IDc3LjI2ODUxIGMgMCw2LjQ0NTUxIC0yLjE1MjIyLDExLjI3MTQ5IC02LjQ1NjYxLDE0LjQ4ODY5IC00LjMwNDM5NywzLjIxNzIyIC04LjYxOTY5Nyw0LjgyNTUyIC0xMi45MjQwOSw0LjgyNTUyIEggNzEuODE1MjgyIFogTSAzNi43Njk4MzksMTY0LjEwNDI4IFYgMzQ3LjY2MjE5IEggODguMjQ0OTYgYyA0MC43Njk3NCwwLjA2NjYgNTMuNjQ5OTIsLTMxLjU1MDc5IDUzLjY0OTkyLC01Mi40MTgyMyBsIC0wLjAxMTMsLTc4LjY4ODQxIGMgLTAuMDExMSwtMjAuODc4NTQgLTEzLjIzNDc5LC01Mi40NTEyNyAtNTIuNTUxMjMsLTUyLjQ1MTI3IHogbSAyMzYuNDE5ODYxLDAuMDQ0MyA0Mi43NDQ2MSwxNjAuNjM4MTUgYyAxMS43NDgzNCwyNy4zMjQwNCAzNy45ODUyMSwzNC4xMTM0NyA1Mi42MjkwMywwIEwgNDExLjIzMDE2LDE2NC4xNDg2MSBIIDM3NS4wODY0NSBMIDM0Mi4yODE4NywyOTAuMzA3MTkgMzA5LjMyMjU1LDE2NC4xNDg2MSBaIG0gLTg5LjY5MzIzLC0wLjAxMTMgYyAtMTIuMzY5NiwwLjMxMDYzIC0yMi4xNjUzNSwxMC41ODM2MiAtMjEuODY1ODIsMjIuOTUzMjEgdiAxMzguNzk0NSBjIDAuMzEwNjMsMTIuMzgwNjkgMTAuNjA1NTYsMjIuMTY1MzYgMjIuOTg2MjUsMjEuODQzNjUgaCA2OC45ODEzMyB2IC0zMi44MDQxNSBoIC01OS4xMTkwOSB2IC00Mi42MTE2MiBoIDM2LjEzMjg1IHYgLTMyLjgwNDE2IGggLTM2LjEzMjg1IHYgLTQyLjYyMjQ5IGggNTkuMTA3NzkgbCAwLjAxMTMsLTMyLjc0ODk1IHoiCiAgICAgc3R5bGU9ImZpbGw6I2ZmZmZmZjtzdHJva2Utd2lkdGg6MS4xMDkzODA2IgogICAgIGlkPSJwYXRoMiIgLz4KPC9zdmc%2BCg%3D%3D\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://medium.com/@epranka\" title=\"follow on medium\"\u003e\n      \u003cimg alt=\"medium badge\" src=\"https://badgen.net/badge/icon/medium/black?label\u0026icon=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8%2BCjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgaWQ9InN2ZzQiCiAgIHZlcnNpb249IjEuMSIKICAgY2xpcC1ydWxlPSJldmVub2RkIgogICBmaWxsLXJ1bGU9ImV2ZW5vZGQiCiAgIGhlaWdodD0iMjQiCiAgIHdpZHRoPSIyNCI%2BCiAgPG1ldGFkYXRhCiAgICAgaWQ9Im1ldGFkYXRhMTAiPgogICAgPHJkZjpSREY%2BCiAgICAgIDxjYzpXb3JrCiAgICAgICAgIHJkZjphYm91dD0iIj4KICAgICAgICA8ZGM6Zm9ybWF0PmltYWdlL3N2Zyt4bWw8L2RjOmZvcm1hdD4KICAgICAgICA8ZGM6dHlwZQogICAgICAgICAgIHJkZjpyZXNvdXJjZT0iaHR0cDovL3B1cmwub3JnL2RjL2RjbWl0eXBlL1N0aWxsSW1hZ2UiIC8%2BCiAgICAgICAgPGRjOnRpdGxlPjwvZGM6dGl0bGU%2BCiAgICAgIDwvY2M6V29yaz4KICAgIDwvcmRmOlJERj4KICA8L21ldGFkYXRhPgogIDxkZWZzCiAgICAgaWQ9ImRlZnM4IiAvPgogIDxwYXRoCiAgICAgc3R5bGU9ImZpbGw6I2ZmZmZmZiIKICAgICBpZD0icGF0aDIiCiAgICAgZD0iTTIuODQ2IDYuODg3Yy4wMy0uMjk1LS4wODMtLjU4Ni0uMzAzLS43ODRsLTIuMjQtMi43di0uNDAzaDYuOTU4bDUuMzc4IDExLjc5NSA0LjcyOC0xMS43OTVoNi42MzN2LjQwM2wtMS45MTYgMS44MzdjLS4xNjUuMTI2LS4yNDcuMzMzLS4yMTMuNTM4djEzLjQ5OGMtLjAzNC4yMDQuMDQ4LjQxMS4yMTMuNTM3bDEuODcxIDEuODM3di40MDNoLTkuNDEydi0uNDAzbDEuOTM5LTEuODgyYy4xOS0uMTkuMTktLjI0Ni4xOS0uNTM3di0xMC45MWwtNS4zODkgMTMuNjg4aC0uNzI4bC02LjI3NS0xMy42ODh2OS4xNzRjLS4wNTIuMzg1LjA3Ni43NzQuMzQ3IDEuMDUybDIuNTIxIDMuMDU4di40MDRoLTcuMTQ4di0uNDA0bDIuNTIxLTMuMDU4Yy4yNy0uMjc5LjM5LS42Ny4zMjUtMS4wNTJ2LTEwLjYwOHoiIC8%2BCjwvc3ZnPgo%3D\" /\u003e  \n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003cbr /\u003e\n\nThe live converter you can find by pressing the following link [dec2bin.now.sh](https://dec2bin.now.sh).\n\nIt's created using the React Create App (CRA) boilerplate.\n\nThe inverted version of the converter **(bin2dec)** you can find there [bin2dec.now.sh](https://bin2dec.now.sh).\n\n![dec2bin landing page animation](https://dec2bin.now.sh/dec2bin.gif)\n\n\u003cbr /\u003e\n\n### The main _App_ component\n\n```jsx\nimport React, { useEffect, useState } from \"react\";\nimport \"./App.css\";\n\nfunction App() {\n  const [decimalIsValid, setDecimalIsValid] = useState(true);\n  const [binaryValue, setBinaryValue] = useState(\"\");\n  const [decimalValue, setDecimalValue] = useState(\"\");\n\n  const formatValue = value =\u003e {\n    return value.replace(/\\s+/g, \"\");\n  };\n\n  const handleDecimalValueChange = e =\u003e {\n    let value = String(e.target.value);\n    if (!value) {\n      setDecimalValue(\"\");\n      setDecimalIsValid(true);\n    } else {\n      setDecimalIsValid(/^([0-9]+)$/.test(value));\n      setDecimalValue(formatValue(value));\n    }\n  };\n\n  const calculateBinary = decimalNumber =\u003e {\n    return decimalNumber\n      .toString(2)\n      .replace(/(\\d{4})/g, \"$1 \")\n      .trim();\n  };\n\n  useEffect(() =\u003e {\n    if (decimalIsValid \u0026\u0026 decimalValue) {\n      const decimalNumber = parseInt(decimalValue.replace(/[^0-9]/g, \"\"));\n      const binaryValue = calculateBinary(decimalNumber);\n      setBinaryValue(binaryValue);\n    } else {\n      setBinaryValue(\"\");\n    }\n  }, [decimalValue, decimalIsValid]);\n\n  return (\n    \u003cdiv id=\"dec2bin\"\u003e\n      \u003ch1 id=\"header\"\u003eDec2Bin\u003c/h1\u003e\n      \u003cinput\n        id=\"decimal\"\n        className={decimalIsValid ? \"\" : \"invalid\"}\n        type=\"text\"\n        placeholder=\"1234\"\n        value={decimalValue}\n        onChange={handleDecimalValueChange}\n      /\u003e\n      \u003cdiv id=\"binary\"\u003e{binaryValue}\u003c/div\u003e\n    \u003c/div\u003e\n  );\n}\n\nexport default App;\n```\n\n\u003cbr /\u003e\n\n### The main _App_ styles\n\n```css\n#dec2bin {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n}\n\n#header {\n  font-size: 42px;\n}\n\n#decimal {\n  width: 100%;\n  display: block;\n  max-width: 350px;\n  margin: 0 20px;\n  font-size: 42px;\n  text-align: center;\n  background: transparent;\n  color: white;\n  border: 0;\n  outline: 0;\n  border-bottom: 1px solid white;\n  margin-bottom: 30px;\n}\n\n#decimal.invalid {\n  color: #943838;\n}\n\n#binary {\n  font-size: 64px;\n  height: 100px;\n}\n```\n\n\u003cbr /\u003e\n\n### The global styles\n\n```css\nbody {\n  margin: 0;\n  font-family: \"Karla\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\",\n    \"Oxygen\", \"Ubuntu\", \"Cantarell\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\",\n    sans-serif;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\ncode {\n  font-family: source-code-pro, Menlo, Monaco, Consolas, \"Courier New\",\n    monospace;\n}\n\nbody,\nhtml {\n  margin: 0;\n  padding: 0;\n  background: #222222;\n  color: white;\n}\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fepranka%2Fdec2bin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fepranka%2Fdec2bin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fepranka%2Fdec2bin/lists"}