Skip to content

added the feature of word count and fixed the misalignment #377

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
RashiS26 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

added the feature of word count and fixed the misalignment #377

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 14 additions & 0 deletions eduaid_web/src/App.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,20 @@
color: #61dafb;
}

.word-count {
margin-top: 8px;
text-align: right;
position: absolute;
right: 16px;
font-size: 13px;
color: #e5e7eb;
opacity: 0.85;
bottom: 8px;
pointer-events: none;
}



@keyframes App-logo-spin {
from {
transform: rotate(0deg);
Expand Down
41 changes: 35 additions & 6 deletions eduaid_web/src/pages/Text_Input.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,8 @@ import Switch from "react-switch";
import { Link } from "react-router-dom";
import apiClient from "../utils/apiClient";



const Text_Input = () => {
const [text, setText] = useState("");
const [difficulty, setDifficulty] = useState("Easy Difficulty");
Expand All @@ -18,6 +20,17 @@ const Text_Input = () => {
const [docUrl, setDocUrl] = useState("");
const [isToggleOn, setIsToggleOn] = useState(0);

const handleChange = (e) => {
setText(e.target.value);
};

const wordCount = text
.trim()
.split(/\s+/)
.filter(word => word.length > 0).length;



const toggleSwitch = () => {
setIsToggleOn((isToggleOn + 1) % 2);
};
Expand Down Expand Up @@ -165,19 +178,35 @@ const Text_Input = () => {
</div>

{/* Textarea */}
<div className="relative bg-[#83b6cc40] mx-4 sm:mx-8 rounded-2xl p-4 min-h-[160px] sm:min-h-[200px] mt-4">
<button className="absolute top-0 left-0 p-2 text-white focus:outline-none">
<FaClipboard className="h-[24px] w-[24px]" />
</button>
<div className="relative bg-[#83b6cc40] mx-4 sm:mx-8 rounded-2xl p-4 min-h-[160px] sm:min-h-[200px] mt-4">

{/* ICON */}
<button className="absolute top-6 left-6 text-white opacity-80 focus:outline-none translate-y-[1.5px]">
<FaClipboard className="h-[20px] w-[20px]" />
</button>
<textarea
className="absolute inset-0 p-8 pt-6 bg-[#83b6cc40] text-lg sm:text-xl rounded-2xl outline-none resize-none h-full overflow-y-auto text-white caret-white"
className="absolute inset-0 bg-transparent
pl-14 pr-6 pt-6 pb-6
text-lg sm:text-xl
rounded-2xl
outline-none resize-none
overflow-y-auto
text-white caret-white
leading-[1.35]
translate-y-[-1.5px]"

style={{ scrollbarWidth: "none", msOverflowStyle: "none" }}
value={text}
onChange={(e) => setText(e.target.value)}
onChange={handleChange}
/>
<style>{`textarea::-webkit-scrollbar { display: none; }`}</style>
<div className="word-count">
Word Count: <strong>{wordCount}</strong>
</div>
</div>



{/* Separator */}
<div className="text-white text-center my-4 text-lg">or</div>

Expand Down
53 changes: 53 additions & 0 deletions eduaid_web/src/workers/app.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
import React, { useState } from 'react';
// These icons come from the lucide-react library shown in your photo
import { AlignLeft, Hash, Type } from 'lucide-react';
Comment on lines +1 to +3
Copy link

@coderabbitai coderabbitai bot Jan 19, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🔴 Critical

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
# Verify lucide-react is declared in package.json files
fd -a 'package\.json$' -x rg -n '"lucide-react"' {}

Repository: AOSSIE-Org/EduAid

Length of output: 43

🏁 Script executed:

#!/bin/bash
# Find all package.json files
fd -a 'package\.json$' -x sh -c 'echo "=== {} ===" && cat {}'

Repository: AOSSIE-Org/EduAid

Length of output: 3618

Add lucide-react to dependencies in eduaid_web/package.json.

The import statement uses icons from lucide-react, but this dependency is not declared in the package.json. The build will fail with a module not found error.

🤖 Prompt for AI Agents 
In `@eduaid_web/src/workers/app.tsx` around lines 1 - 3, The project imports icons
from lucide-react in eduaid_web/src/workers/app.tsx (see import of AlignLeft,
Hash, Type), but lucide-react is missing from package.json; add "lucide-react"
to eduaid_web/package.json dependencies (or run yarn add / npm install --save
lucide-react) and then reinstall dependencies so the import in app.tsx resolves
at build time.


export default function App() {
// 1. Logic to track the text
const [text, setText] = useState("");

// 2. Calculation logic
const wordCount = text.trim() ? text.trim().split(/\s+/).length : 0;
const charCount = text.length;

return (
<div className="min-h-screen bg-gray-50 flex flex-col items-center justify-center p-6">
<div className="w-full max-w-2xl bg-white p-8 rounded-3xl shadow-xl border border-gray-100">

<div className="mb-6 flex items-center gap-3">
<div className="p-2 bg-blue-600 rounded-lg">
<Type className="text-white" size={24} />
</div>
<h1 className="text-2xl font-bold text-gray-800">Live Word Counter</h1>
</div>

{/* 3. The Text Box Area */}
<div className="relative w-full">
<textarea
value={text}
onChange={(e) => setText(e.target.value)}
placeholder="Start typing your content here..."
className="w-full h-80 p-6 border-2 border-gray-200 rounded-2xl focus:border-blue-500 focus:ring-4 focus:ring-blue-50 outline-none resize-none text-lg transition-all"
/>

{/* 4. The Counter Overlay inside the box */}
<div className="absolute bottom-6 right-6 flex items-center gap-4 bg-white/90 backdrop-blur-md px-4 py-2 rounded-full border border-gray-200 shadow-sm pointer-events-none select-none">
<div className="flex items-center gap-2 text-sm font-bold text-blue-600">
<AlignLeft size={16} />
<span>{wordCount} words</span>
</div>
<div className="w-px h-4 bg-gray-300"></div>
<div className="flex items-center gap-2 text-sm font-bold text-gray-600">
<Hash size={16} />
<span>{charCount} characters</span>
</div>
</div>
</div>

<p className="mt-4 text-center text-gray-400 text-sm">
Your text is automatically saved as you type.
</p>
</div>
</div>
);
}
6 changes: 6 additions & 0 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.