Feature: Calculate String Function Implementation

src/App.tsx

@@ -1,46 +1,101 @@
 import { useState } from 'react';
+import getSum, { defaultSeprator } from "./stringCalculator"
 
 const App = () => {
-  const [input, setInput] = useState('');
-  const [result] = useState(null);
+  const [input, setInput] = useState<string>('');
+  const [limiter, setLimiter] = useState<string>(defaultSeprator);
+  const [result, setResult] = useState<number | null>(null);
+  const [errorMessage, setErrorMessage] = useState<string | null>(null)
 
-  const handleCalculate = () => {};
+  const handleCalculate = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    setErrorMessage(null);
+    if (!input) {
+      setErrorMessage("Please enter a non empty input")
+      return;
+    }
+
+    try {
+      const sum = getSum(input, limiter)
+      setResult(sum)
+
+    } catch (error) {
+      setErrorMessage((error as Error).message)
+    }
+  };
 
   return (
-    <div style={{ padding: '20px', backgroundColor: '#fff', color: '#aaa' }}>
+    <div style={{ padding: '20px', backgroundColor: '#fff', color: '#55504bff' }}>
       <img
+        alt="Calculator application banner showing mathematical symbols and numbers"
         src='https://images.unsplash.com/photo-1594352161389-11756265d1b5?q=80&w=2574&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'
         width={600}
         height={400}
       />
 
-      <h2>String Calculator</h2>
+      <h1>String Calculator</h1>
 
-      <h1 style={{ fontSize: '20px' }}>Enter numbers</h1>
+      <form onSubmit={handleCalculate}>
 
-      <textarea
-        style={{ margin: '10px 0', color: '#aaa' }}
-        placeholder='Enter numbers'
-        value={input}
-        onChange={(e) => setInput(e.target.value)}
-      />
 
-      <div
-        onClick={handleCalculate}
-        style={{
-          padding: '10px',
-          backgroundColor: '#008cba',
-          color: '#fff',
-          border: 'none',
-        }}>
-        Calculate
-      </div>
-
-      {result !== null && <p style={{ color: 'green' }}>Result: {result}</p>}
-
-      <div role='alert'>
-        <p>Make sure you enter numbers correctly!</p>
-      </div>
+        <label
+          htmlFor="numbers-input"
+          style={{ display: 'block', marginBottom: '5px', fontWeight: 'bold', color: '#black' }}
+        >
+          Enter numbers <span aria-label="required">*</span>
+        </label>
+        <input
+          id="numbers-input"
+          type="text"
+          style={{ margin: '10px 0', color: '#black' }}
+          placeholder='Enter numbers'
+          value={input}
+          onChange={(e) => setInput(e.target.value)}
+          required
+          aria-required="true"
+          aria-invalid={errorMessage ? "true" : "false"}
+          aria-describedby={errorMessage ? "error-message" : undefined}
+        />
+
+        <label
+          htmlFor="limiter-input"
+          style={{ display: 'block', marginBottom: '5px', fontWeight: 'bold', color: 'black' }}
+        >
+          Enter Custom Limiter (Optional)
+        </label>
+        <input
+          id="limiter-input"
+          type="text"
+          style={{ margin: '10px 0', color: 'black' }}
+          placeholder='Enter Limiter to split by (Optional)'
+          value={limiter}
+          onChange={(e) => setLimiter(e.target.value)}
+        />
+        <br />
+        <button
+          type="submit"
+          style={{
+            padding: '10px',
+            backgroundColor: '#008cba',
+            color: '#fff',
+            border: 'none',
+          }}>
+          Calculate
+        </button>
+      </form>
+
+      {result !== null &&
+        <strong
+          id="result"
+          style={{ color: 'green' }}>Result: {result}</strong>
+      }
+      <p id="numbers-help">Make sure you enter numbers correctly!</p>
+      {
+        errorMessage &&
+        <strong id="error-message"
+          style={{ color: 'red' }}>{errorMessage}</strong>
+      }
+
     </div>
   );
 };

src/stringCalculator.test.ts

@@ -0,0 +1,41 @@
+import {describe, test, expect } from 'vitest'
+import getStringSum from "./stringCalculator"
+
+ describe('getStringSum', () => {
+  test('returns 0 for empty string', () => {
+    expect(getStringSum("")).toBe(0)
+  })
+
+  test('returns the number testself for a single number string', () => {
+    expect(getStringSum("12")).toBe(12)
+  })
+
+  test('returns sum for comma-separated numbers', () => {
+    expect(getStringSum("1,2")).toBe(3)
+    expect(getStringSum("1,2,3,4")).toBe(10)
+  })
+
+  test('handles custom separator', () => {
+    expect(getStringSum("1-2-3-4", "-")).toBe(10)
+  })
+
+  test('handles negative numbers', () => {
+    expect(getStringSum("1,2,-3,4")).toBe(4)
+  })
+
+  test('handles extra spaces', () => {
+    expect(getStringSum("1 , 2 , 3  , 4")).toBe(10)
+  })
+
+  test('throws error if any number is invalid due to internal spaces', () => {
+    expect(() => getStringSum("1, 2, - 3, 4")).toThrowError(
+      new Error("input is not a list of valid number")
+    )
+  })
+
+  test('throws error for invalid input like 1--2-3-4', () => {
+    expect(() => getStringSum("1--2-3-4", "-")).toThrowError(
+      new Error("input is not a list of valid number")
+    )
+  })
+})

src/stringCalculator.ts

@@ -0,0 +1,22 @@
+export const  defaultSeprator : string = ","
+
+export default function getStringSum(input: string, seprator: string = defaultSeprator): number {
+    const trimmed = input.trim()
+
+    if (trimmed.length === 0) {
+        return 0;
+    }
+
+
+    const numbers = trimmed.split(seprator).map(num => {
+        const value = Number(num.trim())
+
+        if (!num.length || Number.isNaN(value)) {
+            throw new Error("input is not a list of valid number")
+        }
+
+        return value
+    })
+
+    return numbers.reduce((acc, number) => acc += number, 0)
+}