DEV Community: Nimus

This is my solution to the Character Counter challenge of FrontendMentor.

Nimus — Fri, 25 Apr 2025 06:11:49 +0000

Nimus

Apr 21 '25

Character Counter App | Frontend Project #2

#webdev #react #frontend #javascript

Comments 1

6 min read

Character Counter App | Frontend Project #2

Nimus — Mon, 21 Apr 2025 04:40:55 +0000

An interactive React application offering real-time analysis of user input.

‎
This project is the first React application I built using the concept of state. It provides real-time analysis of user input, including character count, word count, sentence count, estimated reading time, and character density.

‎

Project Requirements

Users should be able to input text and select checkbox options to receive an analysis of the text
✅ Live Text Analysis: Updates character, word, sentence count, and character density with each keystroke
✅ Responsive to User Options: Reflects checkbox options like excluding spaces and setting character limits in the analysis
✅ Character Density Visualization: Displays density as progress bars for each character
✅ Immediate Feedback: Shows alert messages when the character limit is exceeded
✅ Dark/Light Mode Toggle: Allows users to switch between themes via an icon

‎

Tech Stack

Framework: React 19.0.0
Build Tool: Vite 6.2.0
Styling: CSS
Deployment: GitHub Pages

‎

Directory Structure

src
├─ App.css
├─ App.jsx
├─ assets
├─ components
│  ├─ BannerList/
│  ├─ DensityList/
│  ├─ Header/
│  ├─ Main/
│  ├─ Options/
│  ├─ ReadingTime/
│  └─ TextInput/
├─ context
│  └─ TextContext.jsx
├─ index.css
├─ index.jsx
├─ locales
│  └─ en.json
└─ utils
   └─ formatText.js

The components are nested as follows:

<Header> // Logo, theme toggle, 'isDark' state
<Main> // 'content' state
  <TextInput /> // Input field
  <Options /> // Exclude spaces, character limit checkboxes
  <ReadingTime /> // Estimated reading time
  <BannerList /> // Character, word, sentence count
  <DensityList /> // Character density

‎
‎

State Management

‎

State Management Principles

Colocation: States are declared in the components where they’re used
State Lifting: Shared states are lifted to the nearest common parent
Minimal Context: Context API was not necessary for state management, as state lifting was sufficient
Minimal State: Only essential states are declared; derived values (e.g. character counts) are calculated from existing state rather than stored separately

States in the Project

All states are managed locally using useState.

isDark
- Tracks current theme
- Type: Boolean
- Declared in: <Header>
- Used in: <Header>
content
- Stores user input and option selections
- Type: Object
- Declared in: <Main>
- Used in: <Main> and its children
isOpen
- Controls accordion toggle state
- Type: Boolean
- Declared in: <DensityList>
- Used in: <DensityList>

‎ ‎

Key Feature Implementations

‎

Real-Time Input Handling

User input and checkbox values are synced to the content state using event handlers. The content object includes properties like userinput, nospace, limit, and maxlength. All inputs are controlled, meaning their values are tied directly to the state and updated dynamically.

User input → Updates content → Inputs receive value/checked from content

‎

Why Use Controlled Inputs

Using controlled inputs makes sense when:

Input values affect other parts of the UI
You need to validate or modify user input
Input values can be changed programmatically (e.g. resetting fields)

In this project, all inputs are controlled to ensure consistency and allow future scalability—such as trimming characters that exceed the set limit.

‎

Live Text Analysis Based on User Options

Every time the user types or toggles an option, the app re-renders and recalculates the results. There’s no separate state for analysis data—everything is computed on the fly using utility functions based on the current content.

Logic for Character, Word, and Sentence Counts

function noSpaceTotalChars(text) {
  return text.split(" ").join("").length;
}

function countWord(text) {
  const wordList = text.split(" ").filter((item) => item !== "");
  return wordList.length;
}

function countSentence(text) {
  const sentenceList = text
    .split(/[.?!]/) // Split by ".", "?", or "!"
    .map((item) => item.trim())
    .filter((item) => item !== "");
  return sentenceList.length;
}

Logic for Letter Density

function getSortedDensity(text, minThreshold, ignoreCase, displayUpper) {
  const clearedText = removeSpecialCharsSpaces(text);
  const densityCount = getDensity(clearedText, ignoreCase, displayUpper);
  densityCount.sort((a, b) => b[2] - a[2]);
  const rangedDensity = densityCount.filter((item) => item[2] >= minThreshold);
  return rangedDensity;
  // Returns [['char', count, density], ...]
}

Rendering Results

<BannerList> and <DensityList> components pass the analysis data to their child components (<Banner> and <Density>) and render them as JSX arrays.

‎

Immediate Feedback When Character Limit is Exceeded

If the user input goes beyond the defined character limit, the input field’s border changes color, and a warning message is displayed.

This limit check isn’t stored as a separate piece of state—it’s derived directly from the existing content state on every render. The computed value is stored in the isLimitReached variable, which is shared between the <Main> component (for conditionally rendering the alert message) and <TextInput> (for applying visual styles to the input field).

Message Rendering Logic

const isLimitReached =
  content.userinput &&
  content.maxlength &&
  content.userinput.length > content.maxlength;

return (
  <main>
    // ...
    <TextInput
      content={content}
      setContent={setContent}
      isLimitReached={isLimitReached}
    />
    {isLimitReached && <p className="limit-alert">{limitAlert}</p>}
    // ...
  </main>
);

‎

Accordion Toggle for Density List

To keep the UI clean and uncluttered, only the top 5 character densities are displayed by default. The rest are tucked away in an accordion component that the user can expand or collapse.

Shows the top 5 characters by default
Clicking “See more” reveals the full list
Clicking “See less” collapses it back

The open/closed state of the accordion is managed using the isOpen state. Whether the list needs to be split—and which button label to show—is determined dynamically based on the total number of items and the isOpen state.

Accordion Logic

const shouldSplit = densityList.length > 5;
const [isOpen, setIsOpen] = useState(false);
const [firstList, secondList] = cutList(densityList, 5);
const handleClick = () => {
  setIsOpen((prev) => !prev);
};

  return (
    <div>
      <div>
        {firstList}
        {isOpen && secondList}
      </div>
      {shouldSplit && (
        <p onClick={handleClick}>
          {isOpen
            ? text.density_list_close_label
            : text.density_list_open_label}
        </p>
      )}
    </div>
  );
}

‎

Dark/Light Mode Toggle

The app’s theme is controlled by the isDark state. Based on its value, a corresponding class (dark-mode or light-mode) is applied to the <body>, which handles global styling.

Clicking the theme toggle icon updates isDark, triggering a re-render and applying the new theme class.

Why Context Wasn’t Used for Theme Toggling

Since isDark is only used at the top level and doesn’t need to be accessed across many components, there’s no need for React Context. Applying the theme class directly to <body> avoids prop drilling or introducing unnecessary context logic, keeping the solution simple and scalable for an app of this size.

‎

Localization Setup

This project implements a scalable structure that allows for easy future expansion into multiple languages without using a full i18n library.

‎

UI Text in JSON

All display text is stored in locales/en.json. To add more languages, you can simply create files like locales/ko.json. The setup supports dynamic values (e.g., {reading_time_value}) and basic pluralization logic.

{
  "app_title": "Analyze your text in real-time.",
  "input_placeholder": "Start typing here (or paste your text)",
  "option_title_excl_space": "Exclude Spaces",
  "option_title_char_limit": "Set Character Limit",
  "reading_time_display": "Approx. reading time: {reading_time_value}",
  "reading_time_value": {
    "none": "0 minute",
    "one": "< 1 minute",
    "other": "< %d minutes"
  },

‎

Text Formatting Utility

A custom utility function handles placeholder substitution and pluralization logic:

export function formatText(template, values, pluralRules = {}) {
  return template.replace(/\{(\w+)\}/g, (_, key) => {
    if (pluralRules[key]) {
      if (!values[key]) {
        return pluralRules[key].none;
      } else {
        return values[key] === 1
          ? pluralRules[key].one
          : pluralRules[key].other.replace("%d", values[key]);
      }
    }
    return values[key] ?? `{${key}}`;
    // Default to keeping the placeholder if missing
  });
}

‎

Passing UI Text Across the App with Context

A TextContext is used to provide UI text throughout the app, allowing all components to access text content without prop drilling. Since UI text is typically fixed at release and rarely changes during a single session, using context does not introduce unnecessary re-renders.

This approach also improves maintainability by centralizing the management of UI text. It enables easier updates and scalability, such as supporting additional languages, without needing to change the component structure. Language support can be extended by enhancing how the app loads and manages language data.

‎

Continued Development

Use rem unit so the UI scales with the browser default font size
Persist the user’s theme preference using localStorage

‎

Resources

React Reference: <textarea> by React
Application State Management with React by Kent C. Dodds
How to Use React Context effectively by Kent C. Dodds
Data Binding in React by Josh Comeau
Building a custom checkbox in React by Ibadehin Mojeed
How to Make Custom Accessible Checkboxes and Radio Buttons by Sami Keijonen

‎

Author

Nimus-oes, a frontend engineer & localization project manager.

‎

This project is my solution to the Character Counter challenge from FrontendMentor.

Contact Form | Frontend Project #1

Nimus — Tue, 15 Apr 2025 05:43:37 +0000

A responsive static contact form built with HTML, CSS, and React

This is the very first project I built using React, focusing on static page rendering. The app is a single-page contact form that accepts user input. For this project, I concentrated on building a solid foundation for structuring the form and rendering components effectively in React.

Project Requirements
Tech Stack
Features
What I learned
Continued Development
Resources
Author

‎

Project Requirements

Users should be able to provide contact details in the input fields so they can submit the form
Name, email, message, and consent for contact fields must be filled to submit the form

‎
‎

Tech Stack

Framework: React 19.0.0
Build Tool: Vite 6.2.0
Styling: CSS
Deployment: GitHub Pages

‎
‎

Features

A form containing text, email, checkbox, and dropdown input fields
Responsive form layout switching from a single-column on mobile to two-column on desktop using a grid
An achored background image using the pseudo element ::before
Custom dropdown arrow for <select> element
Accessible text and elements that scales with default font size of browsers using a relative unit rem

‎
‎

What I learned

‎

1. Accessibility from the Perspective of Browser Default Font Size

‎

Misunderstanding

One misconception I had in accessibility is that using rem units alone makes elements scalable to the screen sizes and therefore accessible. However, rem only adapts to the default font size settings of the browser - it does not inherently adjust to screen size unless you specify to do so with media queries.

Responsiveness ≠ Accessibility

There are many requirements to making website accessible for people with different needs, ranging from screen reading to keyboard navigation. While creating a responsive website that adapts its layout to different device sizes can help improve accessibility, it’s only one part of the process and not enough on its own. A responsive website responds to screen size whereas an accessible website responds to a users’ access needs. In this context, using rem is more about accessibility, as it allows text to scale based on the user’s preferred default size.

Browser Default Font Sizes Vary

For accessibility, it’s essential to consider that users may increase their browser’s default font size for better readability. Accessible designs maintain a solid layout that doesn't break even when the font size is scaled up significantly.

Why Use rem Instead of px for Accessibility

The rem unit is based on the root font size, so if users increase the default font size on the browser, elements sized in rem will adjust accordingly. In contrast, px remains fixed, regardless of user settings. rem is generally better for font sizes and layout elements that need to be flexible to match user preferences.

rem Isn't a One-Size-Fits-All Solution

There are cases where px is still useful, such as for borders or padding, where scaling with font size isn’t necessary and beneficial to users. Before applying rem to everything, it’s important to consider whether a value actually needs to scale when a user increases their browser’s default font size. Testing these choices by adjusting the browser font size can help determine when to use rem versus px.

No room for padding to be scaled up here. As large paddings don't add value when the space is already limited, padding stays in px.

‎

2. Grid vs. Flexbox

Both CSS Grid and Flexbox could be used to achieve this form layout, but each serves different purposes:

Grid: Ideal for two-dimensional layouts (rows and columns), equal-sized areas, and larger page structures
Flexbox: Best for one-dimensional layouts (row or column), dynamic content alignment, and layouts where content size drives positioning

‎

Choosing the Right Layout for the `<form>`

The form in this project switches between:

Single-column layout on mobile, where all items take full width.
Two-column layout on desktop, where some items remain full-width while others take up half of the form container.

To achieve this with flexbox, you would need to assign flex values to control the width of each form item:

/* 
flex-basis determines the item's base width, 
while flex-grow and flex-shrink allow the items to adjust dynamically.
*/

.desktop-form {
    flex-wrap: wrap;
}

.half-width-item {
    flex: 1 1 48%;
}

.full-width-item {
    flex: 1 1 100%;
}

‎

The same layout can be implemented with grid:

.desktop-form {
    grid-template-columns: 1fr 1fr;
}

.half-width-item {
    grid-column: span 1;
}

.full-width-item {
    grid-column: span 2;
}

‎

For this project, I chose Grid because:

It provides a simpler system with span, making it easier to control column spans.
The grid system is more intuitive to understand the structure
The form layout is not dynamically determined by content size—it has just two fixed types: half-width or full-width.

‎

Aligning Form Items

While the overall form layout benefits from grid, individual form elements like , , and require one-dimensional vertical alignment. For this, I used flexbox as a quick and effective solution.

‎

3. Checklist for Form

Add a <label> for each input field.
Use appropriate type attributes for different input fields.
Set minimum/maximum values for number inputs and define patterns for password inputs.
Assign type, name, id, and value attributes where needed.
Use the required attribute for mandatory fields.
Ensure the <textarea> resize handle behaves correctly according to the design.
Properly adjust the highlight effect for <input> fields.
Maintain adequate spacing between radio buttons/checkboxes and their text labels.
Add padding inside input fields to prevent text from appearing too close to the border.

‎

Continued Development

Would it be better to apply gradient background in CSS rather than using an image file in terms of performance?
Apply basic data validation to form
Remove highlight effect on the input fields
Create a custom dropdown component and apply style to dropdown options

‎

Resources

What is responsive website design and how does it relate to accessibility by Jim Byrne
The Surprising Truth About Pixels and Accessibility by Josh Comeau

‎

Author

Nimus-oes, a frontend engineer & localization project manager.

‎

This project is my solution to the Contact Form challenge from devChallenges.io

DEV Community: Nimus

This is my solution to the Character Counter challenge of FrontendMentor.

Character Counter App | Frontend Project #2

Character Counter App | Frontend Project #2

An interactive React application offering real-time analysis of user input.

Project Requirements

Tech Stack

Directory Structure

State Management

State Management Principles

States in the Project

Key Feature Implementations

Real-Time Input Handling

Why Use Controlled Inputs

Live Text Analysis Based on User Options

Logic for Character, Word, and Sentence Counts

Logic for Letter Density

Rendering Results

Immediate Feedback When Character Limit is Exceeded

Message Rendering Logic

Accordion Toggle for Density List

Accordion Logic

Dark/Light Mode Toggle

Why Context Wasn’t Used for Theme Toggling

Localization Setup

UI Text in JSON

Text Formatting Utility

Passing UI Text Across the App with Context

Continued Development

Resources

Author

Nimus-oes, a frontend engineer & localization project manager.

Contact Form | Frontend Project #1

A responsive static contact form built with HTML, CSS, and React

Table of Contents

Project Requirements

Tech Stack

Features

What I learned

1. Accessibility from the Perspective of Browser Default Font Size

Misunderstanding

Responsiveness ≠ Accessibility

Browser Default Font Sizes Vary

Why Use rem Instead of px for Accessibility

rem Isn't a One-Size-Fits-All Solution

2. Grid vs. Flexbox

Choosing the Right Layout for the <form>

Aligning Form Items

3. Checklist for Form

Continued Development

Resources

Author

Nimus-oes, a frontend engineer & localization project manager.

Choosing the Right Layout for the `<form>`