Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

Add a Number Base Converter tool

Abierto
  • ¿Algo no está bien?
#128 5 comentarios 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 1 día

Nadie ha tomado este issue todavía.

Evaluación

Este issue todavía no se ha evaluado.

Descripción

enhancement good first issue hacktoberfest new tool

Add a tool that converts integers between binary, octal, decimal and hex (and any base from 2 to 36), and shows two's complement for a chosen bit width. Developers do this all the time, and none of our tools cover it. The Base64 "Encodings" tab only shows the hex of text bytes.

Scope

  • Route /number-base-converter. Registry: title "Number Base Converter", tagline "Numbers", heroDim: "", features like ["Binary", "Octal", "Decimal", "Hex", "Two's complement"]
  • lib/number-base.ts using BigInt only:
    • parseInteger(input, base?): handles a sign, detects 0b, 0o and 0x, and accepts _ or spaces as separators. Errors say which character is wrong and where.
    • formatInteger(value, base, { uppercase, groupSize }) for bases 2 to 36
    • toTwosComplement(value, bits) and fromTwosComplement(...) for 8, 16, 32 and 64 bits
  • UI: one input with a base select, outputs for 2, 8, 10 and 16 with Copy buttons, a custom base, and a bit-width select. app/(tools)/base64/ is a good structure to copy.

Acceptance criteria

  • Tests in lib/__tests__/number-base.test.ts: "0xff" gives 255n, "1111_1111" in base 2 gives 255n, "-0b1010" gives -10n, "18446744073709551616" gives hex 10000000000000000 exactly, "0b102" gives an error that names 2, "zz" in base 36 gives 1295n, toTwosComplement(-1n, 8) gives 11111111, and toTwosComplement(128n, 8) gives an error
  • Nothing goes through Number or parseInt, so there's no precision loss above 2^53
  • The standard new-tool checklist below is complete

Standard new-tool checklist

Everything (home grid, metadata, JSON-LD, OG image, sitemap, manifest, command palette) is driven by the registry in lib/tools.ts, so a new tool is mostly one registry entry plus a route.

  • Add an entry to TOOLS in lib/tools.ts filling every field of the Tool interface (lib/tools.ts:19-50). Use applicationCategory: "DeveloperApplication", reuse the CTA_PROJECTS / CTA_CONTACT constants for the CTA links, and set sitemapPriority: 0.9 like the other tools.
  • Pick accentVar from the six theme variables in app/globals.css (--cyan, --amber, --rose, --violet, --sky, --lime; --cyan and --rose aren't used by any tool yet) and set accentHex to that variable's dark-theme value. heroDim must be "" or a substring of heroHeading.
  • Write 3 or 4 FAQs (3 renders as a 3-column grid, see components/shared/ToolPageLayout.tsx:25). Keep metaTitle under 60 characters and metaDescription around 150 to 160.
  • Keep features and ogDescription to plain Latin text and punctuation. The social card font is a subset with no arrow or symbol glyphs (lib/og.tsx:33-36).
  • Create app/(tools)/<slug>/page.tsx, <Name>Client.tsx (with "use client"), and opengraph-image.tsx. Copy page.tsx and opengraph-image.tsx from app/(tools)/base64/ and change the slug.
  • Put all pure logic in lib/<name>.ts (no React, no DOM) with tests in lib/__tests__/<name>.test.ts. Tests can import with @/ like the app does (vitest.config.ts has the alias).
  • Nothing leaves the browser: no network calls with user input, no analytics, no third-party scripts (the CSP in middleware.ts blocks external scripts anyway).
  • Reuse shared pieces: CopyButton, useToast, and optionally useRegisterCommands for command palette actions (example in app/(tools)/base64/Base64Client.tsx:43-53).
  • Every input has a visible label or an aria-label, the tool works with the keyboard alone, and it looks right in both light and dark themes.
  • Add the tool to the "Which tool?" dropdown in .github/ISSUE_TEMPLATE/bug_report.yml.
  • npm run lint && npm run test && npm run build passes.

One new tool per contributor, so more people get a chance. Add your registry entry at the end of TOOLS and rebase on develop before asking for review, since other new tools will touch the same file.

Want to work on this? Comment below and I'll assign it to you. Please take one issue at a time, branch off develop, and open your PR against develop with Closes #128 in the description.

Lenguaje dominante
TypeScript
Estrellas
1
Forks
9
Merge medio
10 h 41 min
PR fusionados (30 d)
85

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de codercops/toolbelt

Todos los issues de codercops/toolbelt

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.