Skip to content

feat: added simple character counter play #1632

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
prateekmtri wants to merge 1 commit into
base: main
Choose a base branch
from
Open

feat: added simple character counter play #1632

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
115 changes: 115 additions & 0 deletions src/plays/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,115 @@
// Do not modify the content of this file
export { default as CodeEditor } from 'plays/code-editor/CodeEditor';
export { default as CdTimerComp } from 'plays/date-time-counter/CdTimerComp';
export { default as AnalogClock } from 'plays/analog-clock/AnalogClock';
export { default as RegistrationForm } from 'plays/registration-form/RegistrationForm';
export { default as NetlifyCardGame } from 'plays/memory-game/NetlifyCardGame';
export { default as TicTacToeGame } from 'plays/tic-tac-toe-game/TicTacToeGame';
export { default as QuoteGenerator } from 'plays/quote-generator/QuoteGenerator';
export { default as FlipCardEffect } from 'plays/flip-card-effect/FlipCardEffect';
export { default as DynamicRoutes } from 'plays/dynamic-routes/DynamicRoutes';
export { default as BasicTree } from 'plays/org-tree/BasicTree';
export { default as Calendar } from 'plays/calendar/Calendar';
export { default as States } from 'plays/states/States';
export { default as CurrentTimer } from 'plays/clock/CurrentTimer';
export { default as MovieContainer } from 'plays/movies/MovieContainer';
export { default as SocialCard } from 'plays/social-card/SocialCard';
export { default as ReactTodoApp } from 'plays/react-todo-app/ReactTodoApp';
export { default as CounterApp } from 'plays/counter/CounterApp';
export { default as RandomMemeGenerator } from 'plays/random-meme-generator/RandomMemeGenerator';
export { default as Keeper } from 'plays/keeper/Keeper';
export { default as Quizeo } from 'plays/quizeo/Quizeo';
export { default as NavBar } from 'plays/navbar/NavBar';
export { default as ImageCarousel } from 'plays/image-carousel/ImageCarousel';
export { default as SimpleLiveChat } from 'plays/simple-live-chat/SimpleLiveChat';
export { default as WhyReact } from 'plays/why-react/WhyReact';
export { default as ExpandingCards } from 'plays/expanding-cards/ExpandingCards';
export { default as Imagegallery } from 'plays/image-gallery/Imagegallery';
export { default as ReactGradients } from 'plays/react-gradients/ReactGradients';
export { default as MarkdownEditor } from 'plays/markdown-editor/MarkdownEditor';
export { default as StarRating } from 'plays/star-rating/StarRating';
export { default as DevJokes } from 'plays/dev-jokes/DevJokes';
export { default as CountriesStatics } from 'plays/countries-statics/CountriesStatics';
export { default as ContextWithRealUsecases } from 'plays/context-with-real-usecases/ContextWithRealUsecases';
export { default as QrCodeGenerator } from 'plays/qr-code-generator/QrCodeGenerator';
export { default as GithubProfileSearch } from 'plays/git-hub-profile-search/GithubProfileSearch';
export { default as PersonalProfileCard } from 'plays/personal-profile-card/PersonalProfileCard';
export { default as InspirationalQuotes } from 'plays/inspirational-quotes/InspirationalQuotes';
export { default as TypingSpeedTest } from 'plays/typing-speed-test/TypingSpeedTest';
export { default as ImageCollector } from 'plays/image-collector/ImageCollector';
export { default as TextAvatar } from 'plays/text-avatar/TextAvatar';
export { default as NewsFeedApplication } from 'plays/news-feed-application/NewsFeedApplication';
export { default as TwentyFourtyEight } from 'plays/2048/TwentyFourtyEight';
export { default as Emojipedia } from 'plays/emojipedia/Emojipedia';
export { default as DownloadFetchResponse } from 'plays/download-fetch-response/DownloadFetchResponse';
export { default as Weather } from 'plays/weather/Weather';
export { default as PokemonStats } from 'plays/pokemon-stats/PokemonStats';
export { default as QuizApp } from 'plays/quiz-app/QuizApp';
export { default as MultiselectComponent } from 'plays/multiselect-component/MultiselectComponent';
export { default as PlayFairCipher } from 'plays/play-fair-cipher/PlayFairCipher';
export { default as SierpinskiTriangle } from 'plays/sierpinski-triangle/SierpinskiTriangle';
export { default as MotivateMe } from 'plays/motivate-me/MotivateMe';
export { default as SavingsCalculator } from 'plays/savings-calculator/SavingsCalculator';
export { default as ImageCompressor } from 'plays/image-compressor/ImageCompressor';
export { default as ShoppingCart } from 'plays/shopping-cart/ShoppingCart';
export { default as InfiniteScrolling } from 'plays/infinite-scrolling/InfiniteScrolling';
export { default as PasswordGenerator } from 'plays/password-generator/PasswordGenerator';
export { default as FunQuiz } from 'plays/fun-quiz/FunQuiz';
export { default as ReactMultistepForm } from 'plays/react-multistep-form/ReactMultistepForm';
export { default as WhyTypescript } from 'plays/why-typescript/WhyTypescript';
export { default as SimpleSeoComponent } from 'plays/simple-seo-component/SimpleSeoComponent';
export { default as TenziesGame } from 'plays/tenzies-game/TenziesGame';
export { default as SmartTodoList } from 'plays/smart-todo-list/SmartTodoList';
export { default as ExpensesTracker } from 'plays/expenses-tracker/ExpensesTracker';
export { default as DadJokes } from 'plays/dad-jokes/DadJokes';
export { default as ImageGalleryUsingUnsplashApi } from 'plays/image-gallery-using-unsplash-api/ImageGalleryUsingUnsplashApi';
export { default as SimpleCalculator } from 'plays/simple-calculator/SimpleCalculator';
export { default as TextAnalyzer } from 'plays/text-analyzer/TextAnalyzer';
export { default as RandomQuoteCardGenerator } from 'plays/random-quote-card-generator/RandomQuoteCardGenerator';
export { default as Pagination } from 'plays/pagination/Pagination';
export { default as StickyNotes } from 'plays/sticky-notes/StickyNotes';
export { default as GithubUserFinder } from 'plays/github-user-finder/GithubUserFinder';
export { default as Notehack } from 'plays/notehack/Notehack';
export { default as Pixy } from 'plays/pixy/Pixy';
export { default as Tube2tunes } from 'plays/tube2tunes/Tube2tunes';
export { default as Devblog } from 'plays/devblog/Devblog';
export { default as CricketGame } from 'plays/cricket-game/CricketGame';
export { default as ObjectDetector } from 'plays/object-detector/ObjectDetector';
export { default as Photoshopapp } from 'plays/photoshopapp/Photoshopapp';
export { default as RollTheDice } from 'plays/roll-the-dice/RollTheDice';
export { default as DigitsDelight } from 'plays/digital-delight/DigitsDelight';
export { default as BasicCalculator } from 'plays/basic-calculator/BasicCalculator';
export { default as TravelAdvisor } from 'plays/travel-advisor/TravelAdvisor';
export { default as ColorPalettesGenerator } from 'plays/color-palettes-generator/ColorPalettesGenerator';
export { default as EmojiGame } from 'plays/emoji-game/EmojiGame';
export { default as PlayDictionary } from 'plays/play-dictionary/PlayDictionary';
export { default as SelfClickingButton } from 'plays/self-clicking-button/SelfClickingButton';
export { default as SmartConverter } from 'plays/smart-converter/SmartConverter';
export { default as Codenchill } from 'plays/codenchill/Codenchill';
export { default as Wordle } from 'plays/wordle/Wordle';
export { default as MultiplayerTicTacToe } from 'plays/multiplayer-tic-tac-toe/MultiplayerTicTacToe';
export { default as InfiniteScrollWithDebouncingConcept } from 'plays/infinite-scroll-with-debouncing-concept/InfiniteScrollWithDebouncingConcept';
export { default as VideoPreview } from 'plays/video-preview/VideoPreview';
export { default as Custommemesgenerator } from 'plays/custommemesgenerator/Custommemesgenerator';
export { default as ReactTransitions } from 'plays/react-transitions/ReactTransitions';
export { default as CalculatorByTea } from 'plays/calculator-by-tea/CalculatorByTea';
export { default as GitHubUserSearch } from 'plays/github-user-search/GitHubUserSearch';
export { default as UrlShortner } from 'plays/url-shortner/UrlShortner';
export { default as TipCalculator } from 'plays/tip-calculator/TipCalculator';
export { default as HangmanGame } from 'plays/hangman-game/HangmanGame';
export { default as AirbnbExperiencesClone } from 'plays/airbnb-experiences-clone/AirbnbExperiencesClone';
export { default as SchulteTables } from 'plays/schulte-tables/SchulteTables';
export { default as DiceSimulator } from 'plays/dice-simulator/DiceSimulator';
export { default as Accordian } from 'plays/accordian/Accordian';
export { default as LanguageTranslater } from 'plays/language-translater/LanguageTranslater';
export { default as Currencyconverter } from 'plays/currencyconverter/Currencyconverter';
export { default as Zoomlogin } from 'plays/zoomlogin/Zoomlogin';
export { default as Cheesylines } from 'plays/cheesylines/Cheesylines';
export { default as RandomAvatar } from 'plays/random-avatar/RandomAvatar';
export { default as BodymassindexCalculator } from 'plays/bodymassindex-calculator/BodymassindexCalculator';
export { default as DailyJournal } from 'plays/daily-journa/DailyJournal';
export { default as Dictionary } from 'plays/dictionary/Dictionary';
export { default as Steps } from 'plays/steps/Steps';
export { default as TextToSpeech } from 'plays/text-to-speech/TextToSpeech';
export { default as SimpleTodoApp } from 'plays/simple-todo-app/SimpleTodoApp';
export { default as SimpleCharacterCounter } from 'plays/simple-character-counter/SimpleCharacterCounter';
68 changes: 68 additions & 0 deletions src/plays/simple-character-counter/SimpleCharacterCounter.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
import React, { useState } from 'react';
import PlayHeader from 'common/playlists/PlayHeader';

function SimpleCharacterCounter(props) {
// Your Code Starts Here
const [text, setText] = useState('');

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

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

// Your Code Ends Here

return (
<>
<div className="play-details">
<PlayHeader play={props} />
<div className="play-container">
{/* Your Render Starts Here */}
<div className="counter-wrapper" style={{ textAlign: 'center', marginTop: '20px' }}>
<textarea
cols="50"
placeholder="Type or paste your text here..."
rows="10"
style={{
width: '80%',
padding: '10px',
fontSize: '16px',
borderRadius: '8px',
border: '2px solid #ccc'
}}
value={text}
onChange={handleChange}
/>
<div style={{ marginTop: '20px', fontSize: '1.2rem' }}>
<span style={{ marginRight: '20px' }}>
<strong>Characters:</strong> {charCount}
</span>
<span>
<strong>Words:</strong> {wordCount}
</span>
</div>
<button
style={{
marginTop: '15px',
padding: '8px 16px',
backgroundColor: '#ef4444',
color: 'white',
border: 'none',
borderRadius: '4px',
cursor: 'pointer'
}}
onClick={() => setText('')}
>
Clear Text
</button>
</div>
{/* My Render Ends Here */}
</div>
</div>
</>
);
}

export default SimpleCharacterCounter;