\n\n\n```\n\nUnderstanding the HTML:\n\n- The .stats-grid : This holds four separate boxes to show the counts. Each number has a unique id (like wordCount ) so JavaScript can find and update it easily.\n\n- The : This is the main input box where users will type or paste their content.\n\n- The <script> tag: This connects your HTML to the logic you will write in the next steps.\n\n## Step 3: Style the Tool with CSS\n\nNext, you'll give your tool a modern, professional look. You'll use CSS Grid to align the statistics boxes perfectly.\n\nOpen your style.css file and add this code:\n\n```\n:root {\n --primary-color: #007bff;\n --bg-color: #f8f9fa;\n --text-dark: #202124;\n --text-muted: #5f6368;\n --border-color: #dadce0;\n --panel-bg: #ffffff;\n}\n\nbody {\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n background-color: var(--bg-color);\n color: var(--text-dark);\n margin: 0;\n padding: 40px 20px;\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n\n.header-section {\n text-align: center;\n margin-bottom: 30px;\n}\n\nh1 {\n font-size: 2.5rem;\n margin: 0 0 10px 0;\n font-weight: 800;\n}\n\np.description {\n color: var(--text-muted);\n max-width: 600px;\n margin: 0 auto;\n line-height: 1.6;\n font-size: 1.1rem;\n}\n\n.tool-container {\n background-color: var(--panel-bg);\n border: 1px solid var(--border-color);\n border-radius: 12px;\n padding: 24px;\n width: 100%;\n max-width: 900px;\n box-shadow: 0 4px 12px rgba(0,0,0,0.05);\n}\n\n/* Stats Grid */\n.stats-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));\n gap: 16px;\n margin-bottom: 24px;\n}\n\n.stat-box {\n background-color: var(--bg-color);\n border: 1px solid var(--border-color);\n border-radius: 8px;\n padding: 16px;\n text-align: center;\n}\n\n.stat-value {\n font-size: 2rem;\n font-weight: 700;\n color: var(--primary-color);\n margin-bottom: 4px;\n}\n\n.stat-label {\n font-size: 0.9rem;\n color: var(--text-muted);\n text-transform: uppercase;\n letter-spacing: 0.5px;\n font-weight: 600;\n}\n\n/* Text Area */\ntextarea {\n width: 100%;\n height: 250px;\n padding: 16px;\n border: 1px solid var(--border-color);\n border-radius: 8px;\n font-size: 1rem;\n line-height: 1.6;\n resize: vertical;\n box-sizing: border-box;\n font-family: inherit;\n margin-bottom: 20px;\n transition: border-color 0.2s ease;\n}\n\ntextarea:focus {\n outline: none;\n border-color: var(--primary-color);\n}\n\n/* Buttons */\n.controls {\n display: flex;\n gap: 12px;\n}\n\nbutton {\n padding: 10px 20px;\n font-size: 1rem;\n font-weight: 600;\n border-radius: 6px;\n cursor: pointer;\n border: none;\n transition: background-color 0.2s ease;\n}\n\n.btn-primary {\n background-color: var(--primary-color);\n color: #ffffff;\n}\n\n.btn-primary:hover {\n background-color: #0056b3;\n}\n\n.btn-secondary {\n background-color: transparent;\n color: var(--text-dark);\n border: 1px solid var(--border-color);\n}\n\n.btn-secondary:hover {\n background-color: var(--bg-color);\n}\n```\n\nUnderstanding the CSS:\n\n- CSS Grid: The .stats-grid class uses grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); . This makes the four stat boxes automatically stack neatly on top of each other if a user views the tool on a small mobile screen.\n\n- CSS Variables: Using :root at the top allows you to quickly change the brand color later if you want to use something other than the default blue ( #007bff ).\n\nAt this point, the visual design of your tool is complete. Here's what the final Word Counter will look like in your browser:\n\n## Step 4: Add the JavaScript Logic\n\nNow you need to make the tool count the text. You'll use an event listener that watches every keystroke. Every time the user types, it recalculates the words, characters, sentences, and paragraphs.\n\nOpen your script.js file and paste this code:\n\n```\nconst textInput = document.getElementById('textInput');\nconst wordCountDisplay = document.getElementById('wordCount');\nconst charCountDisplay = document.getElementById('charCount');\nconst sentenceCountDisplay = document.getElementById('sentenceCount');\nconst paragraphCountDisplay = document.getElementById('paragraphCount');\nconst copyBtn = document.getElementById('copyBtn');\n\n// 1. Listen for user input in real-time\ntextInput.addEventListener('input', updateStatistics);\n\n// 2. The Core Counting Logic\nfunction updateStatistics() {\n const text = textInput.value;\n\n // Character Count (includes spaces)\n charCountDisplay.textContent = text.length;\n\n // Word Count\n const words = text.match(/\\S+/g) || [];\n wordCountDisplay.textContent = words.length;\n\n // Sentence Count\n const sentences = text.split(/[.!?]+(?=\\s|$)/).filter(sentence => sentence.trim().length > 0);\n sentenceCountDisplay.textContent = sentences.length;\n\n // Paragraph Count\n const paragraphs = text.split(/\\n+/).filter(paragraph => paragraph.trim().length > 0);\n paragraphCountDisplay.textContent = paragraphs.length;\n}\n\n// 3. Copy functionality\nfunction copyText() {\n if (!textInput.value) return;\n \n textInput.select();\n document.execCommand('copy');\n \n // Provide visual feedback\n copyBtn.textContent = 'Copied!';\n setTimeout(() => {\n copyBtn.textContent = 'Copy Text';\n }, 1500);\n}\n\n// 4. Clear functionality\nfunction clearText() {\n textInput.value = '';\n updateStatistics(); // Reset counts to zero\n}\n```\n\nUnderstanding the JavaScript:\n\n- The input Event: textInput.addEventListener('input', ...) is the secret to real-time updates. It triggers the counting function the exact moment a key is pressed or text is pasted.\n\n- Counting Words: text.match(/\\S+/g) is a Regular Expression that looks for unbroken strings of non-whitespace characters. This is much more accurate than just splitting the text by spaces, because it ignores extra empty spaces left by mistake.\n\n- Counting Sentences: The .split(/[.!?]+(?=\\s|$)/) logic cuts the text into pieces every time it sees a period, exclamation mark, or question mark followed by a space.\n\n## Step 5: Test Your Application\n\nYou're completely done coding! Now it's time to verify that your logic works correctly.\n\n- Open your word-counter-app folder.\n\n- Double-click the index.html file to open it in your web browser.\n\n- Type a few sentences into the text area. Watch the numbers at the top update instantly.\n\n- Try adding double spaces or hitting the \"Enter\" key to make new paragraphs, and ensure the logic counts them accurately.\n\n- Click Copy Text to test the clipboard feature, and Clear to reset the board.\n\nBy completing this project, you've built a fast, client-side utility tool using pure vanilla JavaScript. You learned how to manipulate strings, use Regular Expressions for text analysis, and create responsive UI grids.\n\nIf you want to see this exact codebase running in a live production environment, you can try out this Online Word Counter . Keep building, and happy coding!\n\nRecommended courses from our partners\n\n(opens in a new tab)\n\nADVERTISEMENT\n\n- On Udemy HTML, CSS, JavaScript, React - Online Certification Course YouAccel Training and Blue Digital Media 4.4 out of 5 stars (1,161) from 1,161 ratings 15h 48m 15 hours 48 minutes Beginner Certificate View course (opens in a new tab)\n\n- On Coursera React Beginner Project: Build a Color Picker Tool James Q Quick 1h 50m 1 hour 50 minutes Intermediate Certificate View course (opens in a new tab)\n\n- On Udemy Complete FrontEnd Web Development and Design HTML CSS JS Laurence Svekis 4.5 out of 5 stars (1,108) from 1,108 ratings 22h 10m 22 hours 10 minutes Beginner Certificate View course (opens in a new tab)\n\n- On Skillshare Code your own portfolio – HTML & CSS basics Aga Naplocha 4.5 out of 5 stars (188) from 188 ratings 3h 2m 3 hours 2 minutes Beginner View course (opens in a new tab)\n\nMore HTML & CSS courses on Class Central\n\n→\n\nBansidhar Kadiya is a WordPress Developer and SEO specialist focused on building fast, practical web experiences. He is the creator of 99tools.net, a growing collection of free browser-based utilities designed to help developers, creators, and everyday users complete common tasks quickly and efficiently.\n\nIf you read this far, thank the author to show them you care. Say Thanks\n\nLearn to code for free. freeCodeCamp's open source curriculum has helped more than 40,000 people get jobs as developers. Get started","speakable":{"@type":"SpeakableSpecification","cssSelector":["[data-speakable='summary']","[data-speakable='takeaways']"]},"author":{"@type":"Organization","name":"freeCodeCamp.org","url":"https://www.freecodecamp.org"},"publisher":{"@type":"Organization","name":"traeai","url":"https://www.traeai.com","logo":{"@type":"ImageObject","url":"https://www.traeai.com/icon.svg"},"sameAs":["https://github.com/cq0206/traeai"]},"mainEntityOfPage":"https://www.traeai.com/articles/ad6a0ea4-243c-44fb-b8d2-ae2fe4b80592"},{"@type":"WebSite","@id":"https://www.traeai.com/#website","url":"https://www.traeai.com","name":"traeai","description":"traeai 为开发者、研究员和内容团队筛选高质量 AI 技术内容，提供摘要、评分、趋势雷达与知识库产出。","inLanguage":["zh-CN","en"],"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://www.traeai.com/?q={search_term_string}"},"query-input":"required name=search_term_string"}},{"@type":"BreadcrumbList","@id":"https://www.traeai.com/articles/ad6a0ea4-243c-44fb-b8d2-ae2fe4b80592#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"首页","item":"https://www.traeai.com/"},{"@type":"ListItem","position":2,"name":"文章","item":"https://www.traeai.com/brief"},{"@type":"ListItem","position":3,"name":"freeCodeCamp.org","item":"https://www.traeai.com/sources"},{"@type":"ListItem","position":4,"name":"How to Build a Real-Time Word Counter Tool with HTML, CSS, and JavaScript","item":"https://www.traeai.com/articles/ad6a0ea4-243c-44fb-b8d2-ae2fe4b80592"}]}]}</script><article class="mx-auto max-w-3xl"><div class="mb-6 flex flex-wrap items-center gap-2 text-[13px] font-medium text-slate-500"><span class="rounded-md bg-slate-100 px-2 py-1 text-slate-700">freeCodeCamp.org</span><span aria-hidden="true">·</span><time dateTime="2026-09-30T05:55:08+00:00">2026年9月30日</time></div><div class="mb-5 flex items-start justify-between gap-4"><h1 class="text-[30px] font-black leading-tight text-slate-950 sm:text-[38px]">How to Build a Real-Time Word Counter Tool with HTML, CSS, and JavaScript</h1><div aria-label="内容质量分 7.1" class="flex shrink-0 items-center gap-1.5 rounded-md border border-amber-200 bg-amber-50 px-2.5 py-1 text-amber-800" title="内容质量分 7.1"><span class="font-mono text-[15px] font-bold leading-none">7.1</span><span class="text-[11px] font-semibold">内容质量</span></div></div><div class="mb-6 flex flex-wrap items-center gap-2"><span class="inline-flex items-center gap-2" data-no-navigate="true"><button aria-label="保存到知识库" class="inline-flex min-h-7 items-center rounded-md border border-slate-200 bg-white px-2.5 py-1 text-xs font-semibold leading-tight text-slate-600 hover:border-cyan-200 hover:text-cyan-700 disabled:cursor-wait disabled:opacity-70 px-3 py-2 text-[13px]" type="button">保存到知识库</button></span><button class="inline-flex items-center gap-1.5 rounded-md border border-slate-200 font-semibold text-slate-600 hover:bg-slate-50 disabled:opacity-50 px-3 py-2 text-[13px]" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file-text h-3.5 w-3.5" aria-hidden="true"><path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"></path><path d="M14 2v5a1 1 0 0 0 1 1h5"></path><path d="M10 9H8"></path><path d="M16 13H8"></path><path d="M16 17H8"></path></svg>保存为笔记</button></div><figure class="mb-6 flex justify-center rounded-lg border border-slate-200 bg-white p-2"><img alt="How to Build a Real-Time Word Counter Tool with HTML, CSS, and JavaScript" class="max-h-[520px] max-w-full rounded-md object-contain" decoding="async" loading="eager" referrerPolicy="no-referrer" src="/api/img-proxy?url=https%3A%2F%2Fcdn.hashnode.com%2Fuploads%2Fcovers%2F699c7b22cf5def0f6aaf982b%2Fdc292767-ac0f-4e87-b88c-d64fab38f370.png" style="aspect-ratio:16 / 9"/></figure><section aria-label="文章核心摘要" class="mb-6 rounded-lg border border-cyan-100 bg-cyan-50 p-4" data-ai-content="tldr"><div class="mb-3 flex items-center gap-2"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sparkles h-4 w-4 text-cyan-700" aria-hidden="true"><path d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z"></path><path d="M20 2v4"></path><path d="M22 4h-4"></path><circle cx="4" cy="20" r="2"></circle></svg><h2 class="text-[16px] font-bold text-cyan-900">TL;DR · AI 摘要</h2></div><p class="mb-3 text-[14px] leading-7 text-slate-700" data-speakable="summary">How to Build a Real-Time Word Counter Tool with HTML, CSS, and JavaScript September 30, 2026 / JavaScript Bansidhar Kadi...</p><h3 class="mb-2 text-[13px] font-semibold text-slate-500">核心要点</h3><ul class="space-y-2" data-speakable="takeaways"><li class="flex items-start gap-2 text-[14px] leading-6 text-slate-700"><span aria-hidden="true" class="mt-2 h-1.5 w-1.5 shrink-0 rounded-md bg-cyan-500"></span><span>主题聚焦：How to Build a Real-Time Word Counter Tool with </span></li><li class="flex items-start gap-2 text-[14px] leading-6 text-slate-700"><span aria-hidden="true" class="mt-2 h-1.5 w-1.5 shrink-0 rounded-md bg-cyan-500"></span><span>来源：freeCodeCamp.org，建议结合原文判断细节。</span></li><li class="flex items-start gap-2 text-[14px] leading-6 text-slate-700"><span aria-hidden="true" class="mt-2 h-1.5 w-1.5 shrink-0 rounded-md bg-cyan-500"></span><span>AI 分析暂不可用，本条为保底评分与摘要。</span></li></ul></section><div class="mb-8 flex flex-wrap items-center justify-between gap-3 border-b border-slate-200 pb-6"><div class="flex flex-wrap gap-2"><span class="rounded-md border border-slate-200 bg-white px-2.5 py-1 text-[12px] font-medium text-slate-600">#<!-- -->AI</span><span class="rounded-md border border-slate-200 bg-white px-2.5 py-1 text-[12px] font-medium text-slate-600">#<!-- -->编程</span><span class="rounded-md border border-slate-200 bg-white px-2.5 py-1 text-[12px] font-medium text-slate-600">#<!-- -->前端</span><span class="rounded-md border border-slate-200 bg-white px-2.5 py-1 text-[12px] font-medium text-slate-600">#<!-- -->安全</span><span class="rounded-md border border-slate-200 bg-white px-2.5 py-1 text-[12px] font-medium text-slate-600">#<!-- -->产品</span></div><a class="inline-flex items-center gap-2 rounded-md border border-slate-200 px-3 py-2 text-[13px] font-semibold text-slate-600 hover:border-cyan-200 hover:text-cyan-700" href="https://www.freecodecamp.org/news/how-to-build-a-real-time-word-counter-tool-with-html-css-and-javascript/" rel="noopener noreferrer" target="_blank">打开原文<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-external-link h-3.5 w-3.5" aria-hidden="true"><path d="M15 3h6v6"></path><path d="M10 14 21 3"></path><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path></svg></a></div><div><h2 class="mt-10 mb-3 text-[24px] font-bold leading-tight text-slate-950 scroll-mt-24">How to Build a Real-Time Word Counter Tool with HTML, CSS, and JavaScript</h2><p class="my-4 text-[17px] leading-8 text-slate-800 break-words">September 30, 2026</p><p class="my-4 text-[17px] leading-8 text-slate-800 break-words">/</p><p class="my-4 text-[17px] leading-8 text-slate-800 break-words">#JavaScript</p><p class="my-4 text-[17px] leading-8 text-slate-800 break-words">Bansidhar Kadiya</p><p class="my-4 text-[17px] leading-8 text-slate-800 break-words">Whether you're writing an essay, a tweet, or a blog post, keeping track of your word and character count is very important.</p><p class="my-4 text-[17px] leading-8 text-slate-800 break-words">In this tutorial, you'll build a fully functional, real-time Word Counter tool from scratch. You'll use HTML for the structure, CSS for a clean design, and vanilla JavaScript to handle the counting logic.</p><p class="my-4 text-[17px] leading-8 text-slate-800 break-words">Because this tool runs completely in the browser, it works instantly as you type and keeps your text data completely private.</p><p class="my-4 text-[17px] leading-8 text-slate-800 break-words">Let's get started.</p><h3 class="mt-8 mb-2 text-[20px] font-bold leading-tight text-slate-950 scroll-mt-24">Prerequisites</h3><p class="my-4 text-[17px] leading-8 text-slate-800 break-words">To follow this guide easily, you should have:</p><ul class="my-4 list-disc space-y-2.5 pl-6 text-[17px] leading-8 text-slate-800 marker:text-slate-400"><li>A basic understanding of HTML tags and CSS styling.</li></ul><ul class="my-4 list-disc space-y-2.5 pl-6 text-[17px] leading-8 text-slate-800 marker:text-slate-400"><li>Familiarity with JavaScript concepts like functions, event listeners, and basic Regular Expressions (Regex).</li></ul><ul class="my-4 list-disc space-y-2.5 pl-6 text-[17px] leading-8 text-slate-800 marker:text-slate-400"><li>A code editor (like VS Code) and a web browser.</li></ul><h3 class="mt-8 mb-2 text-[20px] font-bold leading-tight text-slate-950 scroll-mt-24">Table of Contents</h3><ul class="my-4 list-disc space-y-2.5 pl-6 text-[17px] leading-8 text-slate-800 marker:text-slate-400"><li>Step 1: Set Up Your Project</li></ul><ul class="my-4 list-disc space-y-2.5 pl-6 text-[17px] leading-8 text-slate-800 marker:text-slate-400"><li>Step 2: Build the HTML Structure Understanding the HTML:</li></ul><ul class="my-4 list-disc space-y-2.5 pl-6 text-[17px] leading-8 text-slate-800 marker:text-slate-400"><li>Step 3: Style the Tool with CSS Understanding the CSS:</li></ul><ul class="my-4 list-disc space-y-2.5 pl-6 text-[17px] leading-8 text-slate-800 marker:text-slate-400"><li>Step 4: Add the JavaScript Logic Understanding the JavaScript:</li></ul><ul class="my-4 list-disc space-y-2.5 pl-6 text-[17px] leading-8 text-slate-800 marker:text-slate-400"><li>Step 5: Test Your Application</li></ul><h3 class="mt-8 mb-2 text-[20px] font-bold leading-tight text-slate-950 scroll-mt-24">Step 1: Set Up Your Project</h3><p class="my-4 text-[17px] leading-8 text-slate-800 break-words">First, you need to set up your workspace. Create a new folder on your computer and name it word-counter-app .</p><p class="my-4 text-[17px] leading-8 text-slate-800 break-words">Inside this folder, create three empty files:</p><ul class="my-4 list-disc space-y-2.5 pl-6 text-[17px] leading-8 text-slate-800 marker:text-slate-400"><li>index.html</li></ul><ul class="my-4 list-disc space-y-2.5 pl-6 text-[17px] leading-8 text-slate-800 marker:text-slate-400"><li>style.css</li></ul><ul class="my-4 list-disc space-y-2.5 pl-6 text-[17px] leading-8 text-slate-800 marker:text-slate-400"><li>script.js</li></ul><h3 class="mt-8 mb-2 text-[20px] font-bold leading-tight text-slate-950 scroll-mt-24">Step 2: Build the HTML Structure</h3><p class="my-4 text-[17px] leading-8 text-slate-800 break-words">Open your index.html file. You need to create a layout that includes a header, a grid to display the real-time statistics, a text area for the user to type in, and buttons to copy or clear the text.</p><p class="my-4 text-[17px] leading-8 text-slate-800 break-words">Add the following code into your HTML file:</p><div class="code-block group relative my-5 "><div class="flex items-center justify-between rounded-t-lg border border-slate-700 bg-slate-800 px-4 py-2"><span class="select-none text-xs font-medium uppercase tracking-wide text-slate-400">code</span><button aria-label="复制代码" class="flex items-center gap-1.5 rounded-md px-2 py-1 text-xs text-slate-400 transition-colors hover:bg-slate-700 hover:text-slate-200" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy h-3.5 w-3.5" aria-hidden="true"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path></svg><span>复制</span></button></div><div class="overflow-x-auto rounded-b-lg border border-t-0 border-slate-700 bg-[#24292e] text-[13px] leading-6 [&_pre]:!m-0 [&_pre]:!rounded-none [&_pre]:!border-0 [&_pre]:!p-4"><pre class="!m-0 !rounded-none !border-0 !bg-transparent !p-4"><code class="text-slate-50"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Word Counter Tool</title> <link rel="stylesheet" href="style.css"> </head> <body> <header class="header-section"> <h1>Word Counter</h1> <p class="description">Paste or type your text below to get a real-time count of words, characters, sentences, and paragraphs.</p> </header> <main class="tool-container"> <!-- Statistics Panel --> <div class="stats-grid"> <div class="stat-box"> <div class="stat-value" id="wordCount">0</div> <div class="stat-label">Words</div> </div> <div class="stat-box"> <div class="stat-value" id="charCount">0</div> <div class="stat-label">Characters</div> </div> <div class="stat-box"> <div class="stat-value" id="sentenceCount">0</div> <div class="stat-label">Sentences</div> </div> <div class="stat-box"> <div class="stat-value" id="paragraphCount">0</div> <div class="stat-label">Paragraphs</div> </div> </div> <!-- User Input Area --> <textarea id="textInput" placeholder="Start typing or paste your text here..."></textarea> <!-- Action Buttons --> <div class="controls"> <button class="btn-primary" onclick="copyText()" id="copyBtn">Copy Text</button> <button class="btn-secondary" onclick="clearText()">Clear</button> </div> </main> <script src="script.js"></script> </body> </html></code></pre></div></div><p class="my-4 text-[17px] leading-8 text-slate-800 break-words">Understanding the HTML:</p><ul class="my-4 list-disc space-y-2.5 pl-6 text-[17px] leading-8 text-slate-800 marker:text-slate-400"><li>The .stats-grid : This holds four separate boxes to show the counts. Each number has a unique id (like wordCount ) so JavaScript can find and update it easily.</li></ul><ul class="my-4 list-disc space-y-2.5 pl-6 text-[17px] leading-8 text-slate-800 marker:text-slate-400"><li>The <textarea> : This is the main input box where users will type or paste their content.</li></ul><ul class="my-4 list-disc space-y-2.5 pl-6 text-[17px] leading-8 text-slate-800 marker:text-slate-400"><li>The <script> tag: This connects your HTML to the logic you will write in the next steps.</li></ul><h3 class="mt-8 mb-2 text-[20px] font-bold leading-tight text-slate-950 scroll-mt-24">Step 3: Style the Tool with CSS</h3><p class="my-4 text-[17px] leading-8 text-slate-800 break-words">Next, you'll give your tool a modern, professional look. You'll use CSS Grid to align the statistics boxes perfectly.</p><p class="my-4 text-[17px] leading-8 text-slate-800 break-words">Open your style.css file and add this code:</p><div class="code-block group relative my-5 "><div class="flex items-center justify-between rounded-t-lg border border-slate-700 bg-slate-800 px-4 py-2"><span class="select-none text-xs font-medium uppercase tracking-wide text-slate-400">code</span><button aria-label="复制代码" class="flex items-center gap-1.5 rounded-md px-2 py-1 text-xs text-slate-400 transition-colors hover:bg-slate-700 hover:text-slate-200" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy h-3.5 w-3.5" aria-hidden="true"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path></svg><span>复制</span></button></div><div class="overflow-x-auto rounded-b-lg border border-t-0 border-slate-700 bg-[#24292e] text-[13px] leading-6 [&_pre]:!m-0 [&_pre]:!rounded-none [&_pre]:!border-0 [&_pre]:!p-4"><pre class="!m-0 !rounded-none !border-0 !bg-transparent !p-4"><code class="text-slate-50">:root { --primary-color: #007bff; --bg-color: #f8f9fa; --text-dark: #202124; --text-muted: #5f6368; --border-color: #dadce0; --panel-bg: #ffffff; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background-color: var(--bg-color); color: var(--text-dark); margin: 0; padding: 40px 20px; display: flex; flex-direction: column; align-items: center; } .header-section { text-align: center; margin-bottom: 30px; } h1 { font-size: 2.5rem; margin: 0 0 10px 0; font-weight: 800; } p.description { color: var(--text-muted); max-width: 600px; margin: 0 auto; line-height: 1.6; font-size: 1.1rem; } .tool-container { background-color: var(--panel-bg); border: 1px solid var(--border-color); border-radius: 12px; padding: 24px; width: 100%; max-width: 900px; box-shadow: 0 4px 12px rgba(0,0,0,0.05); } /* Stats Grid */ .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; margin-bottom: 24px; } .stat-box { background-color: var(--bg-color); border: 1px solid var(--border-color); border-radius: 8px; padding: 16px; text-align: center; } .stat-value { font-size: 2rem; font-weight: 700; color: var(--primary-color); margin-bottom: 4px; } .stat-label { font-size: 0.9rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; } /* Text Area */ textarea { width: 100%; height: 250px; padding: 16px; border: 1px solid var(--border-color); border-radius: 8px; font-size: 1rem; line-height: 1.6; resize: vertical; box-sizing: border-box; font-family: inherit; margin-bottom: 20px; transition: border-color 0.2s ease; } textarea:focus { outline: none; border-color: var(--primary-color); } /* Buttons */ .controls { display: flex; gap: 12px; } button { padding: 10px 20px; font-size: 1rem; font-weight: 600; border-radius: 6px; cursor: pointer; border: none; transition: background-color 0.2s ease; } .btn-primary { background-color: var(--primary-color); color: #ffffff; } .btn-primary:hover { background-color: #0056b3; } .btn-secondary { background-color: transparent; color: var(--text-dark); border: 1px solid var(--border-color); } .btn-secondary:hover { background-color: var(--bg-color); }</code></pre></div></div><p class="my-4 text-[17px] leading-8 text-slate-800 break-words">Understanding the CSS:</p><ul class="my-4 list-disc space-y-2.5 pl-6 text-[17px] leading-8 text-slate-800 marker:text-slate-400"><li>CSS Grid: The .stats-grid class uses grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); . This makes the four stat boxes automatically stack neatly on top of each other if a user views the tool on a small mobile screen.</li></ul><ul class="my-4 list-disc space-y-2.5 pl-6 text-[17px] leading-8 text-slate-800 marker:text-slate-400"><li>CSS Variables: Using :root at the top allows you to quickly change the brand color later if you want to use something other than the default blue ( #007bff ).</li></ul><p class="my-4 text-[17px] leading-8 text-slate-800 break-words">At this point, the visual design of your tool is complete. Here's what the final Word Counter will look like in your browser:</p><h3 class="mt-8 mb-2 text-[20px] font-bold leading-tight text-slate-950 scroll-mt-24">Step 4: Add the JavaScript Logic</h3><p class="my-4 text-[17px] leading-8 text-slate-800 break-words">Now you need to make the tool count the text. You'll use an event listener that watches every keystroke. Every time the user types, it recalculates the words, characters, sentences, and paragraphs.</p><p class="my-4 text-[17px] leading-8 text-slate-800 break-words">Open your script.js file and paste this code:</p><div class="code-block group relative my-5 "><div class="flex items-center justify-between rounded-t-lg border border-slate-700 bg-slate-800 px-4 py-2"><span class="select-none text-xs font-medium uppercase tracking-wide text-slate-400">code</span><button aria-label="复制代码" class="flex items-center gap-1.5 rounded-md px-2 py-1 text-xs text-slate-400 transition-colors hover:bg-slate-700 hover:text-slate-200" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy h-3.5 w-3.5" aria-hidden="true"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path></svg><span>复制</span></button></div><div class="overflow-x-auto rounded-b-lg border border-t-0 border-slate-700 bg-[#24292e] text-[13px] leading-6 [&_pre]:!m-0 [&_pre]:!rounded-none [&_pre]:!border-0 [&_pre]:!p-4"><pre class="!m-0 !rounded-none !border-0 !bg-transparent !p-4"><code class="text-slate-50">const textInput = document.getElementById('textInput'); const wordCountDisplay = document.getElementById('wordCount'); const charCountDisplay = document.getElementById('charCount'); const sentenceCountDisplay = document.getElementById('sentenceCount'); const paragraphCountDisplay = document.getElementById('paragraphCount'); const copyBtn = document.getElementById('copyBtn'); // 1. Listen for user input in real-time textInput.addEventListener('input', updateStatistics); // 2. The Core Counting Logic function updateStatistics() { const text = textInput.value; // Character Count (includes spaces) charCountDisplay.textContent = text.length; // Word Count const words = text.match(/\S+/g) || []; wordCountDisplay.textContent = words.length; // Sentence Count const sentences = text.split(/[.!?]+(?=\s|$)/).filter(sentence => sentence.trim().length > 0); sentenceCountDisplay.textContent = sentences.length; // Paragraph Count const paragraphs = text.split(/\n+/).filter(paragraph => paragraph.trim().length > 0); paragraphCountDisplay.textContent = paragraphs.length; } // 3. Copy functionality function copyText() { if (!textInput.value) return; textInput.select(); document.execCommand('copy'); // Provide visual feedback copyBtn.textContent = 'Copied!'; setTimeout(() => { copyBtn.textContent = 'Copy Text'; }, 1500); } // 4. Clear functionality function clearText() { textInput.value = ''; updateStatistics(); // Reset counts to zero }</code></pre></div></div><p class="my-4 text-[17px] leading-8 text-slate-800 break-words">Understanding the JavaScript:</p><ul class="my-4 list-disc space-y-2.5 pl-6 text-[17px] leading-8 text-slate-800 marker:text-slate-400"><li>The input Event: textInput.addEventListener('input', ...) is the secret to real-time updates. It triggers the counting function the exact moment a key is pressed or text is pasted.</li></ul><ul class="my-4 list-disc space-y-2.5 pl-6 text-[17px] leading-8 text-slate-800 marker:text-slate-400"><li>Counting Words: text.match(/\S+/g) is a Regular Expression that looks for unbroken strings of non-whitespace characters. This is much more accurate than just splitting the text by spaces, because it ignores extra empty spaces left by mistake.</li></ul><ul class="my-4 list-disc space-y-2.5 pl-6 text-[17px] leading-8 text-slate-800 marker:text-slate-400"><li>Counting Sentences: The .split(/[.!?]+(?=\s|$)/) logic cuts the text into pieces every time it sees a period, exclamation mark, or question mark followed by a space.</li></ul><h3 class="mt-8 mb-2 text-[20px] font-bold leading-tight text-slate-950 scroll-mt-24">Step 5: Test Your Application</h3><p class="my-4 text-[17px] leading-8 text-slate-800 break-words">You're completely done coding! Now it's time to verify that your logic works correctly.</p><ul class="my-4 list-disc space-y-2.5 pl-6 text-[17px] leading-8 text-slate-800 marker:text-slate-400"><li>Open your word-counter-app folder.</li></ul><ul class="my-4 list-disc space-y-2.5 pl-6 text-[17px] leading-8 text-slate-800 marker:text-slate-400"><li>Double-click the index.html file to open it in your web browser.</li></ul><ul class="my-4 list-disc space-y-2.5 pl-6 text-[17px] leading-8 text-slate-800 marker:text-slate-400"><li>Type a few sentences into the text area. Watch the numbers at the top update instantly.</li></ul><ul class="my-4 list-disc space-y-2.5 pl-6 text-[17px] leading-8 text-slate-800 marker:text-slate-400"><li>Try adding double spaces or hitting the "Enter" key to make new paragraphs, and ensure the logic counts them accurately.</li></ul><ul class="my-4 list-disc space-y-2.5 pl-6 text-[17px] leading-8 text-slate-800 marker:text-slate-400"><li>Click Copy Text to test the clipboard feature, and Clear to reset the board.</li></ul><p class="my-4 text-[17px] leading-8 text-slate-800 break-words">By completing this project, you've built a fast, client-side utility tool using pure vanilla JavaScript. You learned how to manipulate strings, use Regular Expressions for text analysis, and create responsive UI grids.</p><p class="my-4 text-[17px] leading-8 text-slate-800 break-words">If you want to see this exact codebase running in a live production environment, you can try out this Online Word Counter . Keep building, and happy coding!</p><p class="my-4 text-[17px] leading-8 text-slate-800 break-words">Recommended courses from our partners</p><p class="my-4 text-[17px] leading-8 text-slate-800 break-words">(opens in a new tab)</p><p class="my-4 text-[17px] leading-8 text-slate-800 break-words">ADVERTISEMENT</p><ul class="my-4 list-disc space-y-2.5 pl-6 text-[17px] leading-8 text-slate-800 marker:text-slate-400"><li>On Udemy HTML, CSS, JavaScript, React - Online Certification Course YouAccel Training and Blue Digital Media 4.4 out of 5 stars (1,161) from 1,161 ratings 15h 48m 15 hours 48 minutes Beginner Certificate View course (opens in a new tab)</li></ul><ul class="my-4 list-disc space-y-2.5 pl-6 text-[17px] leading-8 text-slate-800 marker:text-slate-400"><li>On Coursera React Beginner Project: Build a Color Picker Tool James Q Quick 1h 50m 1 hour 50 minutes Intermediate Certificate View course (opens in a new tab)</li></ul><ul class="my-4 list-disc space-y-2.5 pl-6 text-[17px] leading-8 text-slate-800 marker:text-slate-400"><li>On Udemy Complete FrontEnd Web Development and Design HTML CSS JS Laurence Svekis 4.5 out of 5 stars (1,108) from 1,108 ratings 22h 10m 22 hours 10 minutes Beginner Certificate View course (opens in a new tab)</li></ul><ul class="my-4 list-disc space-y-2.5 pl-6 text-[17px] leading-8 text-slate-800 marker:text-slate-400"><li>On Skillshare Code your own portfolio – HTML & CSS basics Aga Naplocha 4.5 out of 5 stars (188) from 188 ratings 3h 2m 3 hours 2 minutes Beginner View course (opens in a new tab)</li></ul><p class="my-4 text-[17px] leading-8 text-slate-800 break-words">More HTML & CSS courses on Class Central</p><p class="my-4 text-[17px] leading-8 text-slate-800 break-words">→</p><p class="my-4 text-[17px] leading-8 text-slate-800 break-words">Bansidhar Kadiya is a WordPress Developer and SEO specialist focused on building fast, practical web experiences. He is the creator of 99tools.net, a growing collection of free browser-based utilities designed to help developers, creators, and everyday users complete common tasks quickly and efficiently.</p><p class="my-4 text-[17px] leading-8 text-slate-800 break-words">If you read this far, thank the author to show them you care. Say Thanks</p><p class="my-4 text-[17px] leading-8 text-slate-800 break-words">Learn to code for free. freeCodeCamp's open source curriculum has helped more than 40,000 people get jobs as developers. Get started</p></div><button aria-label="AI 伴读" class="fixed bottom-6 right-6 z-50 flex items-center gap-2 rounded-full bg-cyan-600 px-4 py-3 text-[14px] font-semibold text-white shadow-lg transition-all hover:bg-cyan-700 hover:shadow-xl active:scale-95" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-message-circle h-5 w-5" aria-hidden="true"><path d="M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719"></path></svg>AI 伴读</button><div aria-hidden="true" class="sr-only" data-ai-content="machine-digest" role="presentation"><p data-field="title">How to Build a Real-Time Word Counter Tool with HTML, CSS, and JavaScript</p><p data-field="source">freeCodeCamp.org</p><p data-field="summary">How to Build a Real-Time Word Counter Tool with HTML, CSS, and JavaScript September 30, 2026 / JavaScript Bansidhar Kadi...</p><p data-field="takeaways">1. 主题聚焦：How to Build a Real-Time Word Counter Tool with 2. 来源：freeCodeCamp.org，建议结合原文判断细节。 3. AI 分析暂不可用，本条为保底评分与摘要。</p><p data-field="tags">AI, 编程, 前端, 安全, 产品</p></div></article></main></div><!--$--><!--/$--><script type="application/ld+json">{"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://www.traeai.com/#organization","name":"traeai","url":"https://www.traeai.com","sameAs":["https://github.com/cq0206/traeai"]},{"@type":"WebSite","@id":"https://www.traeai.com/#website","name":"traeai","url":"https://www.traeai.com","description":"traeai 为开发者、研究员和内容团队筛选高质量 AI 技术内容，提供摘要、评分、趋势雷达与知识库产出。","inLanguage":["zh-CN","en"],"publisher":{"@id":"https://www.traeai.com/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://www.traeai.com/?q={search_term_string}"},"query-input":"required name=search_term_string"}},{"@type":"SoftwareApplication","@id":"https://www.traeai.com/#app","name":"traeai","url":"https://www.traeai.com","description":"traeai 为开发者、研究员和内容团队筛选高质量 AI 技术内容，提供摘要、评分、趋势雷达与知识库产出。","applicationCategory":"BusinessApplication","operatingSystem":"Web","availableLanguage":["zh-CN","en"],"offers":{"@type":"Offer","price":"0","priceCurrency":"USD"},"featureList":["AI 技术内容筛选","摘要与评分","趋势雷达","知识库素材库","研究报告与社媒内容生成"]}]}</script><script src="/_next/static/chunks/webpack-5e28ce9a93e0f077.js" id="_R_" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0])</script><script>self.__next_f.push([1,"1:\"$Sreact.fragment\"\n2:I[52748,[],\"\"]\n3:I[82778,[],\"\"]\n4:I[15344,[\"4345\",\"static/chunks/app/not-found-03edda9b12bfb15e.js\"],\"NotFoundTracker\"]\n7:I[45433,[],\"OutletBoundary\"]\n8:\"$Sreact.suspense\"\nb:I[45433,[],\"ViewportBoundary\"]\nd:I[45433,[],\"MetadataBoundary\"]\nf:I[9608,[],\"default\",1]\n:HL[\"/_next/static/css/44a7134226832833.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"0:{\"P\":null,\"c\":[\"\",\"articles\",\"ad6a0ea4-243c-44fb-b8d2-ae2fe4b80592\"],\"q\":\"\",\"i\":false,\"f\":[[[\"\",{\"children\":[[\"locale\",\"zh\",\"d\",null],{\"children\":[\"articles\",{\"children\":[[\"id\",\"ad6a0ea4-243c-44fb-b8d2-ae2fe4b80592\",\"d\",null],{\"children\":[\"__PAGE__\",{}]}]}]}]},\"$undefined\",\"$undefined\",16],[[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/44a7134226832833.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}]],[\"$\",\"$L2\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L3\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"html\",null,{\"lang\":\"zh\",\"children\":[\"$\",\"body\",null,{\"className\":\"flex min-h-screen items-center justify-center bg-slate-50 font-sans text-slate-900\",\"children\":[[\"$\",\"$L4\",null,{}],[\"$\",\"main\",null,{\"className\":\"mx-auto max-w-md px-6 py-16 text-center\",\"children\":[[\"$\",\"h1\",null,{\"className\":\"text-[64px] font-black tracking-tight text-slate-300\",\"children\":\"404\"}],[\"$\",\"p\",null,{\"className\":\"mt-4 text-[16px] leading-7 text-slate-600\",\"children\":\"找不到这个页面。它可能已被移除、合并或尚未创建。\"}],[\"$\",\"a\",null,{\"className\":\"mt-6 inline-block rounded-md border border-slate-200 px-4 py-2 text-[14px] font-semibold text-slate-700 hover:bg-slate-100\",\"href\":\"/\",\"children\":\"返回首页\"}]]}]]}]}],[]],\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}],{\"children\":[[\"$\",\"$1\",\"c\",{\"children\":[null,\"$L5\"]}],{\"children\":[[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L2\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L3\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}],{\"children\":[[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L2\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L3\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}],{\"children\":[[\"$\",\"$1\",\"c\",{\"children\":[\"$L6\",null,[\"$\",\"$L7\",null,{\"children\":[\"$\",\"$8\",null,{\"name\":\"Next.MetadataOutlet\",\"children\":\"$@9\"}]}]]}],{},null,false,null]},null,false,\"$@a\"]},null,false,\"$@a\"]},null,false,null]},null,false,null],[\"$\",\"$1\",\"h\",{\"children\":[null,[\"$\",\"$Lb\",null,{\"children\":\"$Lc\"}],[\"$\",\"div\",null,{\"hidden\":true,\"children\":[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"$8\",null,{\"name\":\"Next.Metadata\",\"children\":\"$Le\"}]}]}],null]}],false]],\"m\":\"$undefined\",\"G\":[\"$f\",[]],\"S\":true,\"h\":null,\"s\":\"$undefined\",\"l\":\"$undefined\",\"p\":\"$undefined\",\"d\":\"$undefined\",\"b\":\"KWVz4QWEesdBvhBuQJAKd\"}\n"])</script><script>self.__next_f.push([1,"10:[]\na:\"$W10\"\n"])</script><script>self.__next_f.push([1,"13:I[24680,[\"299\",\"static/chunks/299-adffce14862fb047.js\",\"8450\",\"static/chunks/app/%5Blocale%5D/layout-4de1e28806a4e1c6.js\"],\"\"]\n12:T519,{\"@context\":\"https://schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https://www.traeai.com/#organization\",\"name\":\"traeai\",\"url\":\"https://www.traeai.com\",\"sameAs\":[\"https://github.com/cq0206/traeai\"]},{\"@type\":\"WebSite\",\"@id\":\"https://www.traeai.com/#website\",\"name\":\"traeai\",\"url\":\"https://www.traeai.com\",\"description\":\"traeai 为开发者、研究员和内容团队筛选高质量 AI 技术内容，提供摘要、评分、趋势雷达与知识库产出。\",\"inLanguage\":[\"zh-CN\",\"en\"],\"publisher\":{\"@id\":\"https://www.traeai.com/#organization\"},\"potentialAction\":{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https://www.traeai.com/?q={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}},{\"@type\":\"SoftwareApplication\",\"@id\":\"https://www.traeai.com/#app\",\"name\":\"traeai\",\"url\":\"https://www.traeai.com\",\"description\":\"traeai 为开发者、研究员和内容团队筛选高质量 AI 技术内容，提供摘要、评分、趋势雷达与知识库产出。\",\"applicationCategory\":\"BusinessApplication\",\"operatingSystem\":\"Web\",\"availableLanguage\":[\"zh-CN\",\"en\"],\"offers\":{\"@type\":\"Offer\",\"price\":\"0\",\"priceCurrency\":\"USD\"},\"featureList\":[\"AI 技术内容筛选\",\"摘要与评分\",\"趋势雷达\",\"知识库素材库\",\"研究报告与社媒内容生成\"]}]}"])</script><script>self.__next_f.push([1,"5:[\"$\",\"html\",null,{\"lang\":\"zh-CN\",\"children\":[[\"$\",\"head\",null,{\"children\":[[\"$\",\"link\",null,{\"rel\":\"preconnect\",\"href\":\"https://www.google.com\",\"crossOrigin\":\"anonymous\"}],[\"$\",\"link\",null,{\"rel\":\"preconnect\",\"href\":\"https://www.googletagmanager.com\",\"crossOrigin\":\"anonymous\"}],[\"$\",\"link\",null,{\"rel\":\"dns-prefetch\",\"href\":\"https://pagead2.googlesyndication.com\"}],[\"$\",\"link\",null,{\"rel\":\"dns-prefetch\",\"href\":\"https://zz.bdstatic.com\"}],[\"$\",\"link\",null,{\"rel\":\"alternate\",\"type\":\"text/plain\",\"title\":\"LLMs.txt\",\"href\":\"/llms.txt\"}],[\"$\",\"link\",null,{\"rel\":\"alternate\",\"type\":\"text/plain\",\"title\":\"LLMs Full Content Index\",\"href\":\"/llms-full.txt\"}]]}],[\"$\",\"body\",null,{\"className\":\"bg-slate-50 text-slate-950 antialiased selection:bg-cyan-100\",\"children\":[\"$L11\",[\"$\",\"script\",null,{\"type\":\"application/ld+json\",\"dangerouslySetInnerHTML\":{\"__html\":\"$12\"}}],[\"$\",\"$L13\",null,{\"async\":true,\"crossOrigin\":\"anonymous\",\"src\":\"https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-9317462882514012\",\"strategy\":\"lazyOnload\"}],[\"$\",\"$L13\",null,{\"id\":\"baidu-push\",\"strategy\":\"lazyOnload\",\"children\":\"(function(){var bp=document.createElement('script');bp.src='https://zz.bdstatic.com/linksubmit/push.js';var s=document.getElementsByTagName(\\\"script\\\")[0];s.parentNode.insertBefore(bp,s);})();\"}],[[\"$\",\"$L13\",null,{\"async\":true,\"data-testid\":\"ga-loader\",\"src\":\"https://www.googletagmanager.com/gtag/js?id=G-L0D70NX8GR\",\"strategy\":\"afterInteractive\"}],[\"$\",\"$L13\",null,{\"data-testid\":\"ga-config\",\"id\":\"google-analytics\",\"strategy\":\"afterInteractive\",\"children\":\"\\n window.dataLayer = window.dataLayer || [];\\n function gtag(){dataLayer.push(arguments);}\\n gtag('js', new Date());\\n gtag('config', 'G-L0D70NX8GR');\\n \"}]]]}]]}]\n"])</script><script>self.__next_f.push([1,"14:I[30299,[\"1562\",\"static/chunks/ed027683-fb3d1010fb1dd056.js\",\"48\",\"static/chunks/48-081bd7173bc0d1b7.js\",\"299\",\"static/chunks/299-adffce14862fb047.js\",\"2659\",\"static/chunks/2659-e618985a38010c5a.js\",\"1312\",\"static/chunks/1312-59cbdfb1752d5335.js\",\"4137\",\"static/chunks/app/%5Blocale%5D/articles/%5Bid%5D/page-63996a2c334b7d86.js\"],\"default\"]\n"])</script><script>self.__next_f.push([1,"11:[\"$\",\"$L14\",null,{\"formats\":\"$undefined\",\"locale\":\"zh\",\"messages\":{\"nav\":{\"home\":\"首页\",\"daily\":\"今日\",\"topics\":\"专题\",\"entities\":\"实体\",\"stats\":\"数据看板\",\"bookmarks\":\"书签\",\"history\":\"历史\",\"workspace\":\"知识库\",\"myBrief\":\"我的简报\",\"settings\":\"设置\",\"signin\":\"登录\",\"more\":\"更多\",\"subscriptions\":\"订阅源\",\"sources\":\"来源\",\"recommendations\":\"为你推荐\",\"about\":\"关于\",\"privacy\":\"隐私\"},\"footer\":{\"tagline\":\"AI 内容雷达:多源订阅 · AI 摘要 · 跨材料深读 · Skill 知识库\",\"rss\":\"RSS\",\"openapi\":\"OpenAPI\",\"feedback\":\"反馈\",\"copyright\":\"© {year} traeai\",\"language\":\"语言\"},\"home\":{\"heroTitle\":\"你的 AI 内容雷达\",\"heroDescription\":\"多源 RSS / 公众号 / 播客 / 视频 自动入库 + AI 摘要 + 跨材料深读，专为 AI 创作者设计。\",\"ctaPrimary\":\"立即开始\",\"ctaSecondary\":\"了解更多\"},\"subscribe\":{\"heading\":\"每周精华简报\",\"description\":\"把本周最有用的 AI 内容打包送到你邮箱。每周日 06:30 北京时间一封，可一键退订。\",\"placeholder\":\"your@email.com\",\"button\":\"订阅\",\"submitting\":\"提交中…\",\"success\":\"已订阅，请到邮箱确认。\",\"alreadySubscribed\":\"已订阅，无需重复订阅。\",\"errorEmail\":\"邮箱格式不正确\",\"errorGeneric\":\"订阅失败，请稍后再试。\"},\"language\":{\"zh\":\"中文\",\"en\":\"English\",\"switchTo\":\"切换为 {label}\"},\"common\":{\"loading\":\"加载中…\",\"error\":\"出错了\",\"retry\":\"重试\",\"close\":\"关闭\",\"submit\":\"提交\",\"cancel\":\"取消\",\"today\":\"今天\",\"yesterday\":\"昨天\",\"featured\":\"精选\",\"followedSource\":\"关注源\",\"contentQuality\":\"内容质量\",\"contentQualityScore\":\"内容质量分 {score}\"},\"contentType\":{\"article\":\"文章\",\"podcast\":\"播客\",\"video\":\"视频\",\"tweet\":\"推文\",\"trending\":\"热榜\"},\"deepRead\":{\"highlightsHeading\":\"金句 / Highlights\",\"highlightsDescription\":\"值得收藏与分享的关键句。\",\"outlineHeading\":\"结构提纲\",\"outlineDescription\":\"按章节快速跳转。\",\"mindmapHeading\":\"思维导图\",\"mindmapDescription\":\"用一张图看清主题之间的关系。\"},\"scopeChat\":{\"heading\":\"跨材料问答\",\"placeholder\":\"比如：今天最值得关注的趋势是什么？这些材料里有哪些共同的判断？\",\"submit\":\"跨材料提问\",\"submitting\":\"AI 跨材料生成中…\",\"ariaLabel\":\"跨材料问题\",\"errorFallback\":\"请求失败\",\"citationsLabel\":\"引用材料\"},\"daily\":{\"heroEyebrow\":\"每日 AI 资讯雷达\",\"indexTitle\":\"每日 AI 资讯\",\"indexDescription\":\"按日期归档的 AI 内容，结合 AI 摘要与趋势分析。\",\"breadcrumbHome\":\"首页\",\"breadcrumbDaily\":\"每日 AI 资讯\"},\"weekly\":{\"heroEyebrow\":\"每周 AI 趋势雷达\",\"indexTitle\":\"精选周刊\",\"indexDescription\":\"按周回看最重要的 AI 与技术趋势，保留每期 AI 周报与引用材料。\",\"historyAria\":\"精选周刊历史\",\"cardTitle\":\"精选周刊\",\"dateRange\":\"至\",\"empty\":\"周报还在整理中，生成后会出现在这里。\",\"detailTitle\":\"精选周刊 {start} | traeai\",\"detailDescription\":\"{start} 至 {end} 的 traeai 精选周刊，基于 {count} 篇高信号内容生成。\",\"notFoundTitle\":\"周报不存在 | traeai\",\"notFoundDescription\":\"这期精选周刊暂时不存在或还没有生成。\"},\"articleDetail\":{\"unknownTime\":\"未知时间\",\"takeawayFallback\":\"要点\",\"exportMarkdown\":\"Markdown\",\"exportLlmsTxt\":\"AI 摘要\",\"podcast\":\"播客\",\"video\":\"视频\",\"playPodcast\":\"播放{title}\",\"playVideo\":\"播放{title}\",\"podcastPlayerPlaceholder\":\"当前版本先保留原播客入口；后续补齐音频地址后，会在这里加入播放器、章节和转录。\",\"openOriginalPodcast\":\"打开原播客收听\",\"audioDuration\":\"时长 {duration}\",\"audioPlayable\":\"可直接在线播放\",\"originalPodcastPage\":\"原播客页面\",\"podcastListenHeading\":\"播客收听\",\"readingMinutes\":\"{minutes} 分钟收听参考\",\"podcastNavLabel\":\"播客内容\",\"navOverview\":\"概览\",\"navChapters\":\"章节\",\"navTranscript\":\"转录\",\"navNotes\":\"笔记\",\"navAsk\":\"提问\",\"episodeTakeaways\":\"本集要点\",\"showSummaryHeading\":\"节目简介\",\"showSummaryFallback\":\"这期播客暂时没有简介。\",\"chaptersHeading\":\"章节\",\"transcriptHeading\":\"转录\",\"transcriptEmpty\":\"这期还没有可搜索转录。后续抓到带时间戳的内容后会自动补到这里。\",\"showNotesHeading\":\"节目笔记\",\"showNotesEmpty1\":\"这期播客暂时没有节目笔记。\",\"showNotesEmpty2\":\"你可以先打开原播客收听，后续会逐步补齐音频、章节和转录。\",\"openOriginalVideo\":\"打开原视频\",\"videoPlayable\":\"可直接观看的视频资源\",\"videoTakeaways\":\"视频要点\",\"videoSummaryHeading\":\"视频简介\",\"videoSummaryFallback\":\"这个视频暂时没有简介。\",\"videoNotesHeading\":\"视频笔记\",\"aiDeepDigest\":\"AI 深度提炼\",\"tldrHeading\":\"TL;DR · AI 摘要\",\"tldrLabel\":\"文章核心摘要\",\"keyTakeaways\":\"核心要点\",\"openOriginalArticle\":\"打开原文\",\"articleNoContent1\":\"这篇文章暂时没有正文缓存。\",\"articleNoContent2\":\"你可以先打开原文阅读，新的抓取任务会为后续文章保存完整正文。\"},\"personal\":{\"verifyingSession\":\"正在确认你的登录状态。\",\"verifying\":\"确认中\",\"signInToUnlock\":\"登录启用\",\"viewPublicBrief\":\"先看公共早报\",\"defaultPrimary\":\"打开知识库\",\"defaultSecondary\":\"浏览内容广场\",\"settings\":{\"title\":\"设置\",\"description\":\"登录后管理早报、周刊、订阅和账号偏好。\",\"signedIn\":\"设置页已经接入登录态。下一步会把早报、周刊、订阅和账号偏好写入这里。\",\"primary\":\"管理订阅入口\",\"secondary\":\"查看我的早报\"},\"bookmarks\":{\"title\":\"我的收藏\",\"description\":\"登录后保存你想反复阅读的内容，并把它们放进后续推荐和生成工作流。\",\"signedIn\":\"收藏区已经识别到你的登录状态。当前可先把内容保存到知识库，收藏表会在下一步接上。\",\"primary\":\"查看知识库素材\",\"secondary\":\"继续发现内容\"},\"history\":{\"title\":\"阅读历史\",\"description\":\"登录后会记录你读过的文章、播客、视频和推文，方便继续找回。\",\"signedIn\":\"阅读历史已经接入登录态。下一步会把文章详情页的阅读事件写入这里。\",\"primary\":\"继续阅读\",\"secondary\":\"打开知识库\"},\"myBrief\":{\"title\":\"我的早报\",\"description\":\"登录后根据你的订阅偏好生成个性化早报。没有订阅？先看看公共早报。\",\"signedIn\":\"根据你的订阅和偏好设置，每天为你筛选最相关的 AI 资讯。\",\"primary\":\"查看我的早报\",\"secondary\":\"查看公共早报\"},\"workspace\":{\"chromeClip\":\"Chrome 剪藏\"}},\"workspace\":{\"signInTitle\":\"知识库需要登录后使用\",\"signInBody\":\"登录后可以收集素材、编排 Skill、生成内容并保存历史。\",\"signInCta\":\"去登录\",\"loading\":\"加载中…\",\"untitledSession\":\"未命名会话\",\"fallbackPrefix\":\"当前使用 fallback 文案：\",\"fallbackDefault\":\"未配置 OPENAI_API_KEY 或调用失败\",\"fallbackSuffix\":\"。内容仅作骨架参考。\",\"networkError\":\"网络请求失败\",\"streamIncomplete\":\"流式响应未完成\",\"tabMaterials\":\"素材\",\"tabCollections\":\"收藏集\",\"tabHistory\":\"历史\",\"noCollections\":\"还没有收藏集，在知识库中创建\",\"typeArticle\":\"文章\",\"typePodcast\":\"播客\",\"typeVideo\":\"视频\",\"typeTweet\":\"推文\",\"typeTrend\":\"趋势\",\"typeTrending\":\"共振\",\"typeCustom\":\"自定义\",\"sidebarSearchPlaceholder\":\"搜索素材\",\"sidebarAddAria\":\"添加素材\",\"sidebarAddBtn\":\"添加\",\"quickUrlPlaceholder\":\"粘贴文章链接，回车添加素材\",\"emptyTitle\":\"开始创作\",\"emptyDescription\":\"在左侧添加文章、URL 或自定义内容作为素材，选好格式后点击生成。\",\"emptyAddMaterial\":\"添加素材\",\"sidebarFilterAll\":\"全部\",\"sidebarEmpty\":\"还没有素材。点击右上角「添加」开始收集内容。\",\"sidebarRemoveAria\":\"删除素材\",\"sidebarRemoveConfirm\":\"删除素材“{title}”？\",\"addDialogTitle\":\"添加素材\",\"addDialogTabUrl\":\"贴链接\",\"addDialogTabText\":\"粘贴正文\",\"addDialogUrlLabel\":\"文章 / 博客 / 新闻链接\",\"addDialogUrlHelp\":\"系统会尝试抓取正文并转为 Markdown 存入素材池。抓不到也会保留链接和标题。\",\"addDialogTitlePlaceholder\":\"标题\",\"addDialogBodyPlaceholder\":\"粘贴 Markdown 或纯文本...\",\"addDialogErrorUrlEmpty\":\"请填入链接\",\"addDialogErrorTitleBodyEmpty\":\"标题和正文不能为空\",\"addDialogCancel\":\"取消\",\"addDialogSubmit\":\"加入素材池\",\"addDialogSubmitting\":\"处理中…\",\"historyEmpty\":\"还没有历史，生成一次会自动保存。\",\"historyRemoveAria\":\"删除历史\",\"historyRemoveConfirm\":\"删除这条历史？\",\"editorThemeTitle\":\"切换主题\",\"editorCopy\":\"复制\",\"editorCopied\":\"已复制\",\"editorDownloadMd\":\"下载 .md\",\"editorPreview\":\"预览区\",\"editorSourceAria\":\"Markdown 源码\",\"editorPlaceholder\":\"生成内容会出现在这里，也可以直接编辑...\",\"versionHistory\":\"版本：\",\"restoreVersion\":\"恢复此版本\",\"distributeLabel\":\"分发\",\"distributeCopyFailed\":\"复制失败，请手动复制后打开{label}\",\"distributeWechatToast\":\"已复制，请在公众号后台新建文章后粘贴\",\"distributeWeiboToast\":\"已复制全文，请在微博编辑器中粘贴\",\"distributeOpenedToast\":\"已复制并打开{label}\",\"refinePlaceholderDisabled\":\"先生成一份初稿再追问\",\"refinePlaceholder\":\"追问或修改要求... (⌘/Ctrl + Enter 发送)\",\"refineSend\":\"发送\",\"refineSending\":\"发送中…\",\"skillBarSelectSkill\":\"选择 Skill\",\"skillBarSelectFormat\":\"选择格式\",\"skillBarBuiltin\":\"内置\",\"skillBarCustom\":\"自定义\",\"skillBarManage\":\"管理 / 新建 Skill…\",\"skillBarGenerate\":\"生成\",\"skillBarGenerating\":\"生成中…\",\"skillManagerMy\":\"我的 Skill\",\"skillManagerNew\":\"新建\",\"skillManagerEmpty\":\"还没有自定义 Skill。\",\"skillManagerDeleteAria\":\"删除 Skill\",\"skillManagerDeleteConfirm\":\"删除 Skill \\\"{name}\\\"？\",\"skillManagerEdit\":\"编辑 Skill\",\"skillManagerCreate\":\"新建 Skill\",\"skillManagerFieldName\":\"名称\",\"skillManagerNamePlaceholder\":\"例如：产品经理、学术写作...\",\"skillManagerFieldDescription\":\"描述(可选)\",\"skillManagerFieldInstructions\":\"Instructions（角色指令 / 基础原则）\",\"skillManagerInstructionsPlaceholder\":\"你是...\",\"skillManagerFormatsTitle\":\"Formats（格式模板）\",\"skillManagerAddFormat\":\"新增\",\"skillManagerFormatLabelPlaceholder\":\"格式名称\",\"skillManagerFormatTemplatePlaceholder\":\"输出要求、结构、风格...\",\"skillManagerDefaultFormatLabel\":\"默认格式\",\"skillManagerNewFormatLabel\":\"新格式\",\"skillManagerClose\":\"关闭\",\"skillManagerSave\":\"保存\",\"skillManagerSaving\":\"保存中…\",\"skillManagerCreateBtn\":\"创建\"},\"aiTools\":{\"heading\":\"工具箱\",\"subheading\":\"用 AI 把你阅读的文章转化为可变现的社交媒体内容。选择一个工具，输入素材，一键生成。\",\"group_社媒\":\"社交媒体\",\"group_长文\":\"长文写作\",\"group_视频\":\"视频创作\",\"moreTools\":\"更多工具\",\"cta\":\"💡 更多工具持续开发中 · 升级 Pro 解锁无限次生成\",\"clipTitle\":\"剪贴内容\",\"group_实用工具\":\"实用工具\",\"toolMdToPng\":\"Markdown 转图片\",\"toolMdToPngDesc\":\"粘贴 Markdown，实时预览排版，一键导出高清 PNG 图片。\",\"toolTextSlicer\":\"长文切片\",\"toolTextSlicerDesc\":\"把长文章自动切成多张适合社交平台的图片卡片。\",\"toolWordCount\":\"字数统计\",\"toolWordCountDesc\":\"实时统计中英文字数、字符数与预计阅读时间。\",\"toolCoverMaker\":\"封面生成\",\"toolCoverMakerDesc\":\"输入标题，选择模板，快速生成公众号或小报童封面图。\",\"mdToPng\":{\"inputLabel\":\"输入 · Markdown\",\"previewLabel\":\"预览 · 导出区域\",\"widthMobile\":\"📱 手机\",\"widthTablet\":\"📋 平板\",\"widthDesktop\":\"🖥 桌面\",\"themeLight\":\"浅色\",\"themeDark\":\"深色\",\"scale2x\":\"2x 清晰\",\"scale3x\":\"3x 超清\",\"scale1x\":\"1x 标准\",\"exportBtn\":\"导出 PNG\",\"exporting\":\"生成中…\",\"exportFail\":\"导出失败\"},\"textSlicer\":{\"inputPlaceholder\":\"粘贴长文内容…\",\"sliceBtn\":\"切片\",\"downloadAll\":\"全部下载\",\"downloadOne\":\"下载\",\"sliceCount\":\"{count} 张卡片\",\"emptyHint\":\"粘贴文字后点击「切片」\"},\"wordCount\":{\"inputPlaceholder\":\"在此输入或粘贴文本…\",\"chineseChars\":\"中文字数\",\"englishWords\":\"英文单词\",\"totalChars\":\"总字符\",\"charsNoSpace\":\"不含空格\",\"readingTime\":\"阅读时间\",\"minutes\":\"分钟\"},\"coverMaker\":{\"titlePlaceholder\":\"输入标题\",\"subtitlePlaceholder\":\"输入副标题（可选）\",\"templateLabel\":\"选择模板\",\"sizeLabel\":\"尺寸\",\"sizeWechat\":\"公众号 (900×500)\",\"sizeXiaobaoTong\":\"小报童 (750×422)\",\"exportBtn\":\"导出封面\",\"exporting\":\"生成中…\"},\"toolPlatformFormatter\":\"多平台排版\",\"toolPlatformFormatterDesc\":\"粘贴内容，一键生成小红书、微博、推特、微信四个平台的适配版本。\",\"platformFormatter\":{\"inputPlaceholder\":\"粘贴你的原始内容…\",\"convertBtn\":\"一键转换\",\"converting\":\"转换中…\",\"platformXiaohongshu\":\"小红书\",\"platformWeibo\":\"微博\",\"platformTwitter\":\"Twitter / X\",\"platformWechat\":\"微信公众号\",\"charCount\":\"{count} 字\",\"charLimit\":\"上限 {limit} 字\",\"noLimit\":\"无字数限制\",\"threadCount\":\"{count} 条推文\",\"truncated\":\"已截断\",\"copyBtn\":\"复制\",\"copied\":\"已复制\",\"polishBtn\":\"AI 润色\",\"polishing\":\"润色中…\",\"polishDone\":\"润色完成\",\"polishFail\":\"润色失败，已恢复原文\",\"showOriginal\":\"显示原版\",\"showPolished\":\"显示润色版\",\"hashtagsLabel\":\"标签\",\"emptyHint\":\"粘贴文字后点击「一键转换」\",\"selectAll\":\"全选\",\"deselectAll\":\"取消全选\"}},\"sources\":{\"title\":\"内容来源\",\"intro\":\"把优质博客、播客、视频和推文源加入你的订阅池，后续早报和推荐会优先读取它们。\",\"countSuffix\":\"{count} 个来源\",\"catalogCount\":\"已收录 {count} 个公开来源\",\"groupCountSuffix\":\"{count} 个\",\"searchAria\":\"搜索来源\",\"searchPlaceholder\":\"搜索来源名称或 RSS 地址\",\"typeAria\":\"类型\",\"typeAll\":\"全部类型\",\"typeArticle\":\"文章\",\"typePodcast\":\"播客\",\"typeVideo\":\"视频\",\"typeTweet\":\"推文\",\"submit\":\"筛选来源\",\"hint\":\"找到常读来源后点“关注”，会带着来源地址进入你的订阅设置；未登录时会先完成登录再回来。\",\"emptyGroup\":\"当前筛选下暂无来源。\",\"follow\":\"关注\"},\"sourceHealth\":{\"title\":\"来源健康\",\"intro\":\"看清哪些 RSS、播客、视频和推文源正在稳定产出，哪些需要替换、降频或修复。\",\"countSuffix\":\"{count} 个来源\",\"statusOk\":\"正常\",\"statusEmpty\":\"空源\",\"statusDegraded\":\"降级\",\"statusFailed\":\"异常\",\"typeArticle\":\"文章\",\"typePodcast\":\"播客\",\"typeVideo\":\"视频\",\"typeTweet\":\"推文\",\"typeTrending\":\"热榜\",\"noRecord\":\"暂无记录\",\"noSuccess\":\"暂无成功\",\"consecFailures\":\"连续失败 {count} 次\",\"imageCoverage\":\"图片覆盖\",\"contentCoverage\":\"内容入库\",\"signalDensity\":\"信号密度\",\"coverageQuality\":\"覆盖质量\",\"coverageTitle\":\"覆盖质量\",\"coverageIntro\":\"把抓取稳定性、入库转化、正文和图片覆盖合成一个来源质量视图，帮助识别高信号源和低信号噪音源。\",\"avgQuality\":\"平均质量\",\"highSignal\":\"高信号源\",\"healthyHighSignal\":\"稳定高信号\",\"lowSignal\":\"低信号源\",\"lastChecked\":\"最近检查\",\"lastSuccess\":\"最近成功\",\"fetchedInserted\":\"抓取 / 入库\",\"statAll\":\"全部\",\"previousPage\":\"上一页\",\"nextPage\":\"下一页\",\"pageStatus\":\"第 {page} / {totalPages} 页\",\"emptyTitle\":\"还没有来源健康记录\",\"emptyHint\":\"下一次抓取运行后，这里会出现每个来源的状态。\"},\"subscriptions\":{\"addSources\":\"添加来源\",\"affectsBody\":\"每日早报排序、个人推荐和内容筛选都会根据你的订阅偏好定制。\",\"affectsTitle\":\"订阅偏好影响什么\",\"creatorProfileTitle\":\"创作者口味\",\"audienceLabel\":\"目标读者\",\"audiencePlaceholder\":\"例如：关注 AI 产品和增长的一线从业者\",\"platformLabel\":\"发布平台\",\"toneLabel\":\"内容语气\",\"toneAnalytical\":\"克制分析\",\"tonePractical\":\"实用教程\",\"toneOpinionated\":\"鲜明观点\",\"riskLabel\":\"选题风险偏好\",\"riskConservative\":\"保守，只用强证据\",\"riskBalanced\":\"平衡\",\"riskExperimental\":\"探索，允许早期信号\",\"goalsLabel\":\"内容目标\",\"goalsPlaceholder\":\"涨粉, 建立专业可信度, 引导讨论\",\"editorialPromptLabel\":\"长期编辑要求\",\"editorialPromptPlaceholder\":\"例如：优先一手来源，不使用夸张标题，明确标注尚未确认的判断。\",\"emptyFeed\":\"还没有关注任何来源\",\"emptyFeedHint\":\"关注你感兴趣的来源后，这里会展示最近的文章\",\"excludeLabel\":\"排除词\",\"excludePlaceholder\":\"招聘, 融资, 课程广告\",\"feedDesc\":\"关注了 {count} 个来源，最近7天更新\",\"followedEmpty\":\"从来源库点击关注后，会先出现在这里。\",\"followedTitle\":\"已关注来源\",\"freqDaily\":\"每日\",\"freqDailyDesc\":\"适合默认早报节奏。\",\"freqLabel\":\"推送频率\",\"freqSixHourly\":\"每 6 小时\",\"freqSixHourlyDesc\":\"适合正在跟进的主题。\",\"freqWeekly\":\"每周\",\"freqWeeklyDesc\":\"适合低噪音回顾。\",\"interestLabel\":\"我想关注什么\",\"interestPlaceholder\":\"例如：帮我盯 AI 产品设计、Website-to-Video、Claude Design、内容工作流和可落地的工程实践。\",\"intro\":\"选择你关注的来源，设定兴趣关键词和排除词。每日早报和推荐内容会根据这些偏好为你定制。\",\"keywordsLabel\":\"关键词\",\"keywordsPlaceholder\":\"Claude Design, HeyGen, HyperFrames\",\"langAll\":\"不限\",\"langDesc\":\"偏好语言的文章会获得推荐加权。\",\"langEn\":\"偏好英文\",\"langLabel\":\"语言偏好\",\"langZh\":\"偏好中文\",\"loading\":\"正在加载订阅设置…\",\"pendingPrefix\":\"待加入来源：\",\"publicBriefCta\":\"先看公共早报\",\"samplesTitle\":\"源库样例\",\"save\":\"保存订阅设置\",\"saveError\":\"保存失败，请稍后再试。\",\"saved\":\"已保存，后续内容将按此偏好筛选。\",\"settingsBtn\":\"订阅设置\",\"settingsTitle\":\"订阅设置\",\"signInCta\":\"登录管理订阅\",\"signInDesc\":\"登录后关注来源，这里会展示你关注来源的最新内容\",\"signInIntro\":\"登录后自定义你的订阅：选择感兴趣的来源、关键词和推送频率，traeai 每天为你筛选最相关的内容。\",\"signInPrompt\":\"登录查看你的订阅内容\",\"sourceInfoBody\":\"源库覆盖 {count} 个入口，按来源类型分组追踪。\",\"sourceInfoTitle\":\"来源信息\",\"tabPreferences\":\"偏好设置\",\"tabSources\":\"关注来源\",\"title\":\"我的订阅\",\"titleEyebrow\":\"Subscription\",\"typeArticle\":\"文章\",\"typePodcast\":\"播客\",\"typeTrending\":\"热榜\",\"typeTweet\":\"推文\",\"typeVideo\":\"视频\"},\"recommendations\":{\"loading\":\"正在根据你的订阅偏好计算 personal_score。\",\"publicScore\":\"内容质量分 {score}\",\"fallbackSummary\":\"这条内容和你的订阅偏好有相关信号。\",\"personalScoreLabel\":\"个人相关度\",\"toWorkspace\":\"放进知识库\",\"signedOutTitle\":\"为你推荐\",\"signedOutBody\":\"登录后，我会根据你的订阅偏好给每条内容计算个人相关度。\",\"signInCta\":\"登录查看推荐\",\"needRadarTitle\":\"先设置订阅偏好\",\"needRadarBody\":\"写下你想长期关注的方向，我才能把公共高分内容变成你的个人推荐队列。\",\"openRadarCta\":\"设置我的订阅\",\"errorTitle\":\"推荐暂时不可用\",\"errorBody\":\"内容池读取失败，请稍后再试。\",\"eyebrow\":\"Personal Score\",\"title\":\"为你推荐\",\"intro\":\"保留内容质量分，同时按你的订阅偏好计算个人相关度。分数越高，越适合放进知识库继续产出。\"},\"opsDashboard\":{\"loading\":\"正在加载运营数据…\",\"missingConfig\":\"Supabase 浏览器配置缺失，无法访问运营报表。\",\"anonymousTitle\":\"运营报表\",\"anonymousBody\":\"请先登录，再以管理员身份访问。\",\"signIn\":\"登录\",\"forbiddenTitle\":\"无权访问\",\"forbiddenHint\":\"要把当前账号加入白名单，请把 Supabase user id 追加到 `ADMIN_USER_IDS` 环境变量（逗号分隔）。\",\"errorPrefix\":\"加载失败：\",\"title\":\"运营报表\",\"subtitle\":\"Chat / Skill / Export 调用量统计 · 数据生成于 {time}\",\"tableMissing\":\"尚未在 Supabase 中创建 `ops_events` 表，所有指标暂为 0。请执行最新的 schema.sql。\",\"exportLabel\":\"导出窗口：\",\"range1\":\"近 1 天\",\"range7\":\"近 7 天\",\"range30\":\"近 30 天\",\"range90\":\"近 90 天\",\"downloadCsv\":\"下载 CSV\",\"downloading\":\"下载中…\",\"statToday\":\"今日 (UTC)\",\"statLast7\":\"近 7 日\",\"statLast30\":\"近 30 日\",\"statTotal\":\"累计\",\"byType7d\":\"近 7 日按事件类型分布\",\"topArticles30d\":\"近 30 日 Top 文章\",\"noData\":\"暂无数据\",\"recent50\":\"最近 50 条事件\",\"colTime\":\"时间\",\"colType\":\"类型\",\"requestFailed\":\"请求失败\",\"downloadFailed\":\"下载失败\",\"forbiddenDefault\":\"无权访问\",\"typeChatMaterial\":\"单材料 Chat\",\"typeChatScope\":\"跨材料 Chat\",\"typeExportMarkdown\":\"导出 Markdown\",\"typeExportReadwise\":\"导出 Readwise\"},\"stats\":{\"metaTitle\":\"数据看板 · traeai\",\"metaDescription\":\"traeai 公开运营数据：累计入库的 AI 技术文章、订阅源、实体词条、近 14 天入库节奏与 Top 来源 / 实体。\",\"eyebrow\":\"公开数据看板\",\"title\":\"traeai 数据看板\",\"intro\":\"traeai 是一个面向 AI 技术从业者的多源资讯雷达，所有运营数据公开透明。下方统计来自实时数据库，每小时自动刷新。\",\"coreLabel\":\"核心数字\",\"totalArticles\":\"累计文章\",\"totalSources\":\"覆盖订阅源\",\"totalSourcesHint\":\"近 90 天活跃来源\",\"totalEntities\":\"实体词条\",\"totalEntitiesHint\":\"人物 / 公司 / 模型 / 论文 / 产品 / 概念\",\"last30d\":\"近 30 天新增\",\"last7d\":\"近 7 天新增\",\"dailyHeading\":\"近 14 天入库节奏\",\"dailyDescription\":\"共 {count} 篇 · 反映 traeai 的内容刷新速度。\",\"topSourcesHeading\":\"Top 来源（近 90 天）\",\"topSourcesDescription\":\"按入库文章数排序，点击跳转到来源筛选。\",\"topEntitiesHeading\":\"Top 实体\",\"topEntitiesDescription\":\"按关联文章数排序。\",\"noData\":\"暂无数据。\",\"generatedAt\":\"生成时间：{time} · 数据每小时刷新。\",\"datasetName\":\"traeai 内容雷达运营数据\",\"datasetKeywords\":\"AI 资讯, RSS 雷达, 运营数据, Open metrics\",\"varTotalArticles\":\"累计文章\",\"varTotalSources\":\"覆盖来源\",\"varTotalEntities\":\"实体词条\",\"varLast30d\":\"近 30 天新增文章\"},\"exploreLayout\":{\"groupYours\":\"你的\",\"groupPublic\":\"公共精选\",\"more\":\"更多\",\"primaryNavMyBrief\":\"我的早报\",\"primaryNavBrain\":\"知识库\",\"primaryNavAiTools\":\"工具箱\",\"primaryNavRecommendations\":\"为你推荐\",\"publicNavSquare\":\"内容广场\",\"publicNavBrief\":\"每日早报\",\"publicNavSources\":\"内容来源\",\"moreNavSubscriptions\":\"我的订阅\",\"moreNavBookmarks\":\"我的收藏\",\"moreNavHistory\":\"阅读历史\",\"moreNavWeekly\":\"精选周刊\",\"moreNavSourceHealth\":\"来源健康\",\"moreNavStats\":\"数据看板\",\"moreNavSettings\":\"设置\",\"moreNavAbout\":\"关于 traeai\",\"ariaPrimaryNav\":\"主导航\",\"ariaReadingNav\":\"阅读导航\",\"ariaMobileNav\":\"移动导航\",\"ariaHome\":\"traeai 首页\",\"mobileSquare\":\"广场\",\"mobileBrain\":\"知识库\",\"mobileBrief\":\"早报\",\"mobileMy\":\"我的\",\"heroBadge\":\"AI 内容 + 工具 + 创作平台\",\"heroTitle\":\"发现 AI 动态，用工具箱，做 AI 内容\",\"heroLead\":\"traeai 每天追踪全球 AI 领域的博客、播客、视频和推文，提供 AI 内容创作工具集，帮你从阅读到创作一站式完成。\",\"heroPrimary\":\"开始阅读\",\"heroSecondary\":\"打开知识库\",\"heroLearnMore\":\"了解更多 →\",\"heroPopular\":\"热门主题\",\"squareTitle\":\"今日精选\",\"squareCount\":\"AI 领域高质量内容精选 · 已收录 {count} 条\",\"ariaContentTypes\":\"内容类型\",\"tabAll\":\"全部\",\"tabArticle\":\"文章\",\"tabPodcast\":\"播客\",\"tabVideo\":\"视频\",\"tabTweet\":\"推文\",\"tabTrending\":\"热榜\",\"filterWeekly\":\"本周精选\",\"filterToday\":\"今日更新\",\"filterTop\":\"高分内容\",\"filtersBtn\":\"筛选\",\"sortLabel\":\"排序\",\"sortDefault\":\"默认\",\"sortLatest\":\"最新\",\"viewLabel\":\"视图\",\"viewListAria\":\"列表视图\",\"viewGridAria\":\"网格视图\",\"viewList\":\"列表\",\"viewGrid\":\"网格\",\"rightDailyTitle\":\"今日早报\",\"rightSeeAll\":\"查看全部\",\"rightWeeklyTitle\":\"精选周刊\",\"rightWeeklyDesc\":\"每周回看最值得跟进的 AI 技术信号。\",\"rightWeeklyCta\":\"查看周刊\",\"emptyTitle\":\"暂时还没有可展示的文章\",\"emptyHint\":\"试试放宽筛选条件，或稍后再来看看。\",\"digestPromoTitle\":\"traeai 精选周刊\",\"digestPromoDesc\":\"每周把过去 7 天的最高分内容、新出现的实体、值得读的播客整理成站内周报，支持随时回看历史。\",\"digestPromoPrimary\":\"查看周刊\",\"digestPromoSecondary\":\"今日简报\",\"collectionName\":\"traeai 今日更新\",\"personalizedHint\":\"已根据你的订阅偏好排序\",\"primaryNavAiMoney\":\"AI 赚钱\",\"heroPillarDiscover\":\"内容发现\",\"heroPillarDiscoverDesc\":\"博客、播客、视频、推文，每天精选高质量 AI 内容\",\"heroPillarTools\":\"工具箱\",\"heroPillarToolsDesc\":\"文章改写、摘要生成、多平台发布等 AI 创作工具\",\"heroPillarCreate\":\"知识管理\",\"heroPillarCreateDesc\":\"收藏、笔记、知识图谱，把内容变成你的知识库\",\"rightQuickTitle\":\"快捷入口\",\"rightQuickBrief\":\"今日早报\",\"rightQuickTools\":\"工具箱\",\"rightQuickSources\":\"内容来源\",\"rightHotTitle\":\"热门话题\",\"rightDailyDesc\":\"每天早上自动生成 AI 领域要闻摘要，助你快速掌握当日动态。\"},\"chrome\":{\"signIn\":\"登录\",\"signOut\":\"退出\",\"searchTrigger\":\"搜索内容、来源、标签\",\"searchTitle\":\"搜索 traeai\",\"searchSubtitle\":\"直接找文章，也可以跳到常用视图\",\"searchClose\":\"关闭搜索\",\"searchCloseOverlay\":\"关闭搜索遮罩\",\"searchInputLabel\":\"搜索内容\",\"searchInputPlaceholder\":\"搜索标题、摘要、来源或标签\",\"searchQuickAria\":\"快速搜索入口\",\"qlTodayLabel\":\"今日更新\",\"qlTodayHint\":\"最新入库\",\"qlTopLabel\":\"高分内容\",\"qlTopHint\":\"质量优先\",\"qlBriefLabel\":\"每日早报\",\"qlBriefHint\":\"摘要速读\",\"qlSourceHealthLabel\":\"来源健康\",\"qlSourceHealthHint\":\"抓取状态\"},\"pageMeta\":{\"about\":{\"title\":\"关于 traeai - AI 技术雷达 + 知识库\",\"description\":\"traeai 把全网 AI 领域高信号内容筛选、摘要、评分，再一键变成报告、笔记和社媒素材。\"},\"daily\":{\"title\":\"每日 AI 资讯雷达 | traeai\",\"description\":\"按日期回看 traeai 的 AI 技术与产品雷达：每日筛选、AI 摘要、要点和评分一目了然。\"},\"brief\":{\"title\":\"今日早报 | traeai\",\"description\":\"聚合今天最值得看的 AI 与技术内容，快速浏览摘要、要点与评分。\"},\"weekly\":{\"title\":\"精选周刊 | traeai\",\"description\":\"按周回看 traeai 生成的 AI 与技术趋势周报，每期都保留综述和引用材料。\"},\"sources\":{\"title\":\"来源库 | traeai\",\"description\":\"查看 traeai 持续跟踪的博客、播客、视频与推文来源，理解内容覆盖范围。\"},\"topics\":{\"title\":\"AI 技术专题库 | traeai\",\"description\":\"按 AI Agent、AI 编程、大模型基础设施、向量检索、AI 视频和机器人等专题浏览 traeai 精选内容。\"},\"entities\":{\"title\":\"实体雷达 | traeai\",\"description\":\"traeai 自动从最新 AI 资讯里抽取的关键实体（人物、公司、模型、论文、产品、概念）按热度聚合页。\"},\"recommendations\":{\"title\":\"为你推荐 | traeai\",\"description\":\"登录后查看个性化推荐内容。\"},\"subscriptions\":{\"title\":\"我的订阅 | traeai\",\"description\":\"登录后管理你的订阅来源。\"},\"sourceHealth\":{\"title\":\"来源健康 | traeai\",\"description\":\"来源健康监控页仅用于内部运维观察，不对搜索引擎开放索引。\"},\"workspace\":{\"title\":\"知识库 | traeai\",\"description\":\"登录后使用知识库整理素材并生成内容资产。\"},\"agent\":{\"title\":\"traeai Agent - AI 情报与内容执行助手\",\"description\":\"委派 AI 研究与内容任务，traeai Agent 会核对来源并交付文章、平台内容、图片和可编辑 PPT。\"},\"projects\":{\"title\":\"项目与记忆 | traeai Agent\",\"description\":\"管理 traeai Agent 的长期项目、任务上下文、记忆、产物和自动化。\"},\"aiTools\":{\"title\":\"工具箱 | traeai\",\"description\":\"用 AI 把文章转化为社交媒体帖子、公众号文章、视频方案，助你变现内容。\"},\"notes\":{\"title\":\"我的笔记 | traeai\",\"description\":\"在知识库中管理你的个人知识笔记。\"},\"bookmarks\":{\"title\":\"我的收藏 | traeai\",\"description\":\"登录后查看和管理你的收藏内容。\"},\"signin\":{\"title\":\"登录 | traeai\",\"description\":\"登录 traeai，管理你的订阅、知识库与个人阅读流程。\"},\"settings\":{\"title\":\"设置 | traeai\",\"description\":\"登录后管理你的账号、订阅与通知设置。\"},\"history\":{\"title\":\"阅读历史 | traeai\",\"description\":\"登录后查看你的阅读历史和继续阅读队列。\"},\"myBrief\":{\"title\":\"我的早报 | traeai\",\"description\":\"登录后查看和生成你的个性化早报。\"},\"adminOps\":{\"title\":\"运营报表 | traeai\",\"description\":\"Chat / Skill / Export 调用量统计（仅管理员可见）。\"},\"adminFeedback\":{\"title\":\"反馈管理 | traeai\",\"description\":\"用户反馈管理后台（仅管理员可见）。\"},\"privacy\":{\"title\":\"隐私政策 - traeai\",\"description\":\"traeai 与 traeai Chrome 扩展的隐私政策，说明保存网页、选中文本、账号登录和数据使用方式。\"},\"aiMoney\":{\"title\":\"AI 赚钱方法库 | traeai\",\"description\":\"从 YouTube 视频中提取的 AI 副业赚钱方法，涵盖无人出镜频道、AI SaaS、代理服务等多个赛道。\"},\"glossary\":{\"title\":\"AI 术语表 | traeai\",\"description\":\"全面的 AI 术语表与概念解释。覆盖人工智能领域的公司、模型、产品、人物、论文和核心概念。\"},\"compare\":{\"title\":\"AI 对比 | traeai\",\"description\":\"对比 AI 领域的模型、公司和产品。基于 500+ 信息源的真实报道数据。\"}},\"pageDynamic\":{\"dailyDateTitle\":\"AI 今日新闻 · {date}\",\"dailyDateTitleSuffix\":\"AI 今日新闻 · {date} | traeai\",\"dailyDateDescEmpty\":\"{date} 当日 traeai 收录的 AI 资讯雷达（暂无更新，明日再来）。\",\"dailyDateDescCount\":\"{date} 当日 traeai 收录 {count} 条 AI 技术与产品资讯，按评分排序，每条带 AI 摘要、要点与原文链接。\",\"dailyDateNotFoundTitle\":\"日期未找到 | traeai\",\"dailyDateNotFoundDesc\":\"这个日期不可用。\",\"topicNotFoundTitle\":\"专题未找到 | traeai\",\"topicNotFoundDesc\":\"这个专题暂时不可用。\",\"topicTitle\":\"{name} | traeai\",\"entityNotFoundTitle\":\"实体未找到 | traeai\",\"entityNotFoundDesc\":\"这个实体暂时没有入库内容。\",\"entityTitle\":\"{name} | {kind} | traeai\",\"entityDescFallback\":\"{name}（{kind}）在 traeai 上的最新讨论、相关材料与 AI 综述。\",\"glossaryNotFoundTitle\":\"AI 术语未找到 | traeai\",\"glossaryNotFoundDesc\":\"这个术语暂时没有收录。\",\"glossaryTitle\":\"什么是 {name}？| AI 术语表 | traeai\",\"glossaryDescFallback\":\"{name}（{kind}）是什么？阅读 traeai 对 {name} 的定义解释、最新动态和相关材料。\",\"compareNotFoundTitle\":\"对比页未找到 | traeai\",\"compareNotFoundDesc\":\"这个对比组合暂时无法生成。\",\"compareTitle\":\"{nameA} vs {nameB} | AI 对比 | traeai\",\"compareDesc\":\"{nameA} 和 {nameB} 有什么区别？基于 traeai 收录的真实报道数据，全面对比两者的特点、优势和最新动态。\"},\"aboutPage\":{\"eyebrow\":\"关于 traeai\",\"heroTitle\":\"每天 10 分钟，跟上 AI 领域真正重要的变化\",\"heroLead\":\"traeai 先替你读博客、播客、视频和推文，把高信号内容整理成摘要、评分、趋势，再一键变成研究报告、深读笔记和社媒素材。\",\"heroPrimary\":\"开始阅读\",\"heroSecondary\":\"打开知识库\",\"valuePropTitle\":\"为什么团队会反复打开 traeai\",\"valueRadarTitle\":\"雷达 · 不漏掉重要信号\",\"valueRadarDesc\":\"每天从博客、播客、视频、推文中筛出高质量内容，补足摘要 / 评分 / 标签。\",\"valueTrendTitle\":\"趋势 · 看见信息背后的变化\",\"valueTrendDesc\":\"把同主题的信号聚合成趋势线，帮你判断什么在升温、什么在降温。\",\"valueWorkspaceTitle\":\"知识库 · 从阅读到产出\",\"valueWorkspaceDesc\":\"勾选素材、选择能力（Skill），一键生成研究报告、深读笔记、社媒素材。\",\"audiencesTitle\":\"谁在用\",\"audiencePmTitle\":\"产品经理 / 创始人\",\"audiencePmDesc\":\"快速判断新技术和竞品动向，转成周报和汇报素材。\",\"audienceDevTitle\":\"研发 / 研究员\",\"audienceDevDesc\":\"聚焦领域内真正值得读的内容，沉淀成可复用的深读笔记。\",\"audienceCreatorTitle\":\"内容创作者\",\"audienceCreatorDesc\":\"从信号到推文、长文、视频脚本，一个知识库搞定。\",\"flowTitle\":\"从信号到产出，只要三步\",\"flowStep1Title\":\"订阅雷达\",\"flowStep1Desc\":\"从公共池选主题，或配置自己的信源组合。\",\"flowStep2Title\":\"阅读广场\",\"flowStep2Desc\":\"通过摘要、评分、趋势快速判断什么值得深读。\",\"flowStep3Title\":\"知识库产出\",\"flowStep3Desc\":\"勾选素材 + 选择 Skill，一键生成报告或笔记。\",\"flowCta\":\"开始使用知识库\"},\"privacyPage\":{\"eyebrow\":\"Privacy Policy\",\"heroTitle\":\"隐私政策\",\"heroLead\":\"本政策适用于 traeai 网站和 traeai Chrome 扩展。我们只在你主动使用相关功能时处理必要数据，用于把网页素材保存到你的 traeai 知识库，或通过 traeai AI 生成多平台分发草稿。\",\"lastUpdated\":\"最近更新：2026 年 4 月 24 日\",\"section1Title\":\"我们收集的信息\",\"section1Item1\":\"当你主动使用 traeai Chrome 扩展保存当前页面时，插件会发送页面标题、页面 URL 和保存时间。\",\"section1Item2\":\"当你主动使用“保存选中文本”时，插件会额外发送你在当前网页中选中的文字。\",\"section1Item3\":\"当你主动使用 AI 分发入口并选择目标平台时，插件会把页面标题、页面 URL 和页面正文或选中文本发送到 traeai API，用于生成对应平台草稿。\",\"section1Item4\":\"当你登录 traeai 时，网站会使用 Supabase 提供的认证会话来识别你的账号。\",\"section1Item5\":\"网站可能使用基础分析数据了解页面访问情况，用于改进产品体验。\",\"section2Title\":\"我们如何使用这些信息\",\"section2Item1\":\"把你主动保存的网页和选中文本写入你的 traeai 知识库。\",\"section2Item2\":\"在知识库中帮助你整理素材、生成摘要、改写内容和管理后续任务。\",\"section2Item3\":\"维护账号登录状态、排查错误并提升服务稳定性。\",\"section3Title\":\"Chrome 扩展的行为边界\",\"section3Item1\":\"插件不会在后台自动抓取网页内容。\",\"section3Item2\":\"插件不会读取你的浏览历史、密码、支付信息、通讯录或本地文件。\",\"section3Item3\":\"插件只在你点击保存按钮时处理当前页面信息或你选中的文本。\",\"section3Item4\":\"插件不会自动发布内容；AI 分发入口只生成草稿和打开目标平台，最终发布需要你在目标平台人工确认。\",\"section3Item5\":\"插件的可执行代码都随扩展包一起发布，不会从远程服务器下载并执行新的 JavaScript 代码。\",\"section4Title\":\"数据共享\",\"section4Item1\":\"我们不会出售你的个人数据。\",\"section4Item2\":\"我们不会把你保存的内容用于与 traeai 核心功能无关的广告、授信或转售用途。\",\"section4Item3\":\"为了提供服务，数据可能由 Supabase、Vercel 等基础设施服务商处理。\",\"section5Title\":\"数据控制\",\"section5Item1\":\"你可以在 traeai 知识库中管理自己保存的内容。\",\"section5Item2\":\"如果你希望删除账号相关数据或提出隐私问题，可以通过联系邮箱与我们沟通。\",\"contactTitle\":\"联系我们\",\"contactDesc\":\"如果你对隐私政策、数据删除或 Chrome 扩展的数据处理有问题，请使用 Chrome Web Store 开发者账号中公开的联系邮箱联系我们。\"},\"topics\":{\"heroEyebrow\":\"面向搜索的专题入口\",\"indexTitle\":\"AI 技术专题库\",\"indexDescription\":\"把动态资讯与深度研究组织成独立专题站，方便你按问题、技术方向和工作流持续追踪。\",\"viewContent\":\"查看精选内容\",\"breadcrumbTopics\":\"专题库\",\"radarEyebrow\":\"traeai 专题雷达\",\"searchIntent\":\"搜索用户通常想解决什么\",\"whyItMatters\":\"为什么值得持续追踪\",\"keywords\":\"关键词\",\"featuredContent\":\"精选内容\",\"featuredDescription\":\"按相关度、评分和更新时间筛出的可读内容。\",\"searchMore\":\"搜索更多\",\"emptyState\":\"这个专题正在等待更多高质量内容进入精选池。你可以先从相关专题继续阅读。\",\"relatedTopics\":\"相关专题\"},\"aiCompanion\":{\"title\":\"AI 伴读\",\"close\":\"关闭\",\"disclaimer\":\"仅基于本篇材料\",\"tryAsking\":\"试试问这些：\",\"prompt1\":\"这篇内容的核心观点是什么？\",\"prompt2\":\"对工程师来说有哪些可执行的启发？\",\"prompt3\":\"作者的论证有哪些可以质疑的地方？\",\"thinking\":\"AI 正在阅读材料并回答…\",\"requestFailed\":\"请求失败：\",\"inputPlaceholder\":\"向 AI 提问关于这篇内容的问题…\",\"send\":\"发送\"},\"brain\":{\"signInTitle\":\"知识库需要登录后使用\",\"signInBody\":\"登录后可以创建笔记、收集素材、整理知识。\",\"signInCta\":\"去登录\",\"notesTitle\":\"我的笔记\",\"newNote\":\"新建笔记\",\"searchNotes\":\"搜索笔记…\",\"noNotes\":\"还没有笔记\",\"noNotesHint\":\"点击右上角新建一条笔记，或从文章详情页保存\",\"backToNotes\":\"返回笔记\",\"saving\":\"保存中…\",\"togglePin\":\"置顶\",\"deleteNote\":\"删除笔记\",\"deleteConfirm\":\"确定要删除这条笔记吗？\",\"noteNotFound\":\"笔记不存在\",\"titlePlaceholder\":\"笔记标题\",\"bodyPlaceholder\":\"用 Markdown 写下你的想法…\",\"saveAsNote\":\"保存为笔记\",\"tabCreate\":\"创作\",\"tabNotes\":\"笔记\",\"tabCollections\":\"收藏集\",\"tabGraph\":\"图谱\",\"tabFeed\":\"知识库\",\"tabMaterials\":\"素材库\",\"untitledNote\":\"未命名笔记\",\"feedTitle\":\"知识动态\",\"feedEmpty\":\"还没有任何内容\",\"feedEmptyHint\":\"从首页收藏文章、写笔记或创作内容，这里会自动汇聚\",\"quickCapturePlaceholder\":\"记下一个想法…\",\"quickCaptureSave\":\"保存\",\"feedToday\":\"今日\",\"feedYesterday\":\"昨天\",\"feedThisWeek\":\"本周\",\"feedEarlier\":\"更早\",\"feedMaterial\":\"素材\",\"feedNote\":\"笔记\",\"feedSession\":\"创作\",\"searchPlaceholder\":\"搜索知识库…\",\"searching\":\"搜索中…\",\"searchNoResults\":\"没有找到匹配的内容\",\"searchResultCount\":\"找到 {count} 条结果\",\"collectionsTitle\":\"收藏集\",\"newCollection\":\"新建收藏集\",\"createCollection\":\"创建\",\"cancel\":\"取消\",\"collectionNamePlaceholder\":\"收藏集名称\",\"collectionDescPlaceholder\":\"描述（可选）\",\"noCollections\":\"还没有收藏集\",\"noCollectionsHint\":\"创建收藏集来分组整理你的素材和笔记\",\"deleteCollectionConfirm\":\"确定要删除这个收藏集吗？\",\"collectionNotFound\":\"收藏集不存在\",\"backToCollections\":\"返回收藏集\",\"emptyCollection\":\"收藏集是空的\",\"emptyCollectionHint\":\"从知识库动态或笔记中添加内容到收藏集\",\"addToCollection\":\"加入收藏集\",\"newCollectionQuick\":\"新建收藏集…\",\"modeEdit\":\"编辑\",\"modePreview\":\"预览\",\"filterAll\":\"全部\",\"graphEmpty\":\"还没有标签数据\",\"graphEmptyHint\":\"在笔记中使用 #标签 来构建知识图谱\",\"graphTagCloud\":\"标签云\",\"graphConnections\":\"标签关联\",\"graphTopNotes\":\"关联最多的笔记\"},\"sourceBrowser\":{\"title\":\"源库\",\"titleDesc\":\"从 {count} 个内容源中选择关注，精选内容将优先出现在你的订阅和每日简报中。\",\"searchPlaceholder\":\"搜索来源名称…\",\"filterAll\":\"全部\",\"filterArticle\":\"文章\",\"filterPodcast\":\"播客\",\"filterVideo\":\"视频\",\"filterTweet\":\"推文\",\"filterTrending\":\"热榜\",\"groupArticle\":\"文章源\",\"groupPodcast\":\"播客源\",\"groupVideo\":\"视频源\",\"groupTweet\":\"推文源\",\"groupTrending\":\"热榜源\",\"itemCount\":\"条\",\"follow\":\"关注\",\"following\":\"已关注\",\"followedCount\":\"已关注 {count} 个来源\",\"noResults\":\"没有找到匹配的来源。\",\"signInToFollow\":\"登录后可关注来源\",\"saving\":\"保存中…\",\"showMore\":\"显示全部 {count} 个\",\"showLess\":\"收起\",\"quickAddTitle\":\"从站内源快速添加\",\"quickAddDesc\":\"搜索本站已收录的来源，点击即可关注。\",\"quickAddPlaceholder\":\"输入来源名称搜索…\",\"quickAddEmpty\":\"没有匹配的未关注来源\",\"quickAddAllFollowed\":\"所有匹配来源均已关注\",\"customTitle\":\"自定义订阅源\",\"customDesc\":\"添加任意 RSS/Atom 源，也支持 OPML 文件批量导入。\",\"customToggle\":\"手动添加 RSS 链接\",\"customUrlPlaceholder\":\"粘贴 RSS 或 Atom 链接…\",\"customUrlInvalid\":\"请输入有效的 URL（以 http:// 或 https:// 开头）\",\"customUrlDuplicate\":\"该来源已在关注列表中\",\"customUrlSaveError\":\"保存失败，请稍后再试\",\"customAdd\":\"添加\",\"customRemove\":\"移除\",\"customList\":\"自定义来源（{count}）\",\"opmlImport\":\"导入 OPML\",\"opmlEmpty\":\"OPML 文件中没有找到 RSS 源\",\"opmlAllExist\":\"所有源已在关注列表中\",\"opmlSuccess\":\"成功导入 {added}/{total} 个源\",\"opmlSaveError\":\"保存失败，请稍后再试\",\"opmlParseError\":\"OPML 文件解析失败，请检查格式\"},\"feedback\":{\"title\":\"反馈\",\"close\":\"关闭\",\"placeholder\":\"告诉我们你的想法、遇到的问题，或功能建议…\",\"cat_bug\":\"🐛 Bug\",\"cat_feature\":\"💡 建议\",\"cat_content\":\"📰 内容\",\"cat_general\":\"💬 其他\",\"send\":\"发送\",\"sending\":\"发送中…\",\"contactPlaceholder\":\"联系方式（邮箱/微信，选填）\",\"success\":\"感谢你的反馈！✨\",\"error\":\"发送失败，请稍后再试\"},\"feedbackAdmin\":{\"title\":\"反馈管理\",\"loading\":\"加载中…\",\"missingConfig\":\"Supabase 配置缺失\",\"loginRequired\":\"需要登录\",\"loginHint\":\"请先登录管理员账号\",\"loginButton\":\"去登录\",\"forbidden\":\"当前账号无权访问反馈管理\",\"empty\":\"暂无反馈\",\"allStatus\":\"全部状态\",\"allCategory\":\"全部分类\",\"status_new\":\"新\",\"status_read\":\"已读\",\"status_resolved\":\"已解决\",\"status_archived\":\"已归档\",\"cat_bug\":\"Bug\",\"cat_feature\":\"建议\",\"cat_content\":\"内容\",\"cat_general\":\"其他\",\"action_new\":\"标为新\",\"action_read\":\"标为已读\",\"action_resolved\":\"标为已解决\",\"action_archived\":\"归档\",\"anonymous\":\"匿名用户\"},\"aiMoney\":{\"heading\":\"AI 赚钱方法库\",\"subheading\":\"从 500+ YouTube 视频中提取的结构化 AI 副业方法。每个方法包含流量获取、产品形态、定价策略和所需工具。\",\"featured\":\"精选\",\"productType\":\"产品类型\",\"sourceVideo\":\"来源视频\",\"statsMethods\":\"个方法\",\"statsCategories\":\"个赛道\",\"statsFeatured\":\"个精选\",\"emptyTitle\":\"即将上线\",\"emptyDescription\":\"AI 赚钱方法库正在数据采集中，敬请期待。我们将从 YouTube 热门视频中自动提取结构化的 AI 副业方法。\",\"cta\":\"💡 每月自动更新 · 数据来自 YouTube 热门 AI 赚钱视频\",\"searchPlaceholder\":\"搜索方法、工具、平台...\",\"filterAll\":\"全部\",\"showingResults\":\"展示 {count}/{total} 个方法\",\"noResults\":\"没有找到匹配的方法，试试其他关键词或筛选条件\",\"backToList\":\"返回方法库\",\"difficulty\":\"难度\",\"trafficPlatform\":\"流量平台\",\"trafficMethod\":\"获客方式\",\"salesPlatform\":\"销售平台\",\"priceRange\":\"价格区间\",\"businessModel\":\"商业模式\",\"toolsUsed\":\"所需 AI 工具\",\"toolCost\":\"工具成本\",\"operations\":\"运营要求\",\"niche\":\"推荐赛道\",\"logistics\":\"需要物流\",\"customerService\":\"需要客服\",\"sourceVideoSection\":\"来源视频\",\"contentArticle\":\"详细解析\"},\"authGate\":{\"title\":\"登录后查看完整内容\",\"description\":\"登录即可解锁完整的方法详情、工具列表和来源视频。\",\"signIn\":\"登录 / 注册\"},\"homeHero\":{\"titleLine1\":\"发现好内容\",\"titleLine2\":\"AI 帮你读懂全世界\",\"description\":\"从优质订阅源中自动筛选博客、播客、视频和推文，结合你的兴趣和阅读行为，每天整理真正适合你的高质量 AI 资讯。\",\"searchPlaceholder\":\"今天想了解什么 AI 资讯？\",\"searchButton\":\"AI 搜索\"},\"promotedServices\":{\"advertisementLabel\":\"推广\",\"eyebrow\":\"精选服务\",\"title\":\"更快用上 AI\",\"note\":\"充值为独立第三方服务\",\"rechargeLabel\":\"国内充值\",\"rechargeTitle\":\"ChatGPT / Codex 充值\",\"rechargeDescription\":\"无需 OpenAI 账号，按商品页说明下单交付。\",\"rechargeFrom\":\"低门槛体验\",\"rechargeOffer\":\"¥100 档标注 $200 额度\",\"rechargeCta\":\"查看充值优惠\"},\"feedCard\":{\"readTime\":\"{min} 分钟阅读\",\"typeArticle\":\"资讯\",\"typePodcast\":\"播客\",\"typeVideo\":\"视频\",\"typeTweet\":\"推文\",\"typeTrending\":\"趋势\"},\"leftNav\":{\"navHome\":\"情报库\",\"navBrief\":\"每日情报\",\"navAgent\":\"任务\",\"navBrain\":\"项目与记忆\",\"navDiscover\":\"情报库\",\"navArtifacts\":\"产物\",\"navAiTools\":\"工具箱\",\"navAiMoney\":\"AI 赚钱\",\"navRecommend\":\"为你推荐\",\"navTopics\":\"专题\",\"navGuides\":\"搜索指南\",\"navStats\":\"数据追踪\",\"navSources\":\"来源\",\"navSubscriptions\":\"我的订阅\",\"navLearn\":\"学 AI\",\"navSettings\":\"设置\",\"collapse\":\"收起侧边栏\",\"expand\":\"展开侧边栏\"},\"agent\":{\"signInTitle\":\"登录你的个人创作工作台\",\"signInBody\":\"发现今日选题、调用知识库完成创作，并把成稿与视觉素材沉淀为个人内容资产。\",\"signInCta\":\"登录并开始创作\",\"newTask\":\"新建任务\",\"newCreation\":\"开始创作\",\"todayOverview\":\"今日总览\",\"recentTasks\":\"最近任务\",\"recentCreations\":\"最近任务\",\"noTasks\":\"还没有任务记录。创建第一个研究或内容任务。\",\"noCreations\":\"还没有任务记录，先委派一个结果目标。\",\"workspaceTitle\":\"traeai Agent\",\"creationAssistant\":\"Agent 任务\",\"dashboardTitle\":\"你想让 Agent 完成什么？\",\"dashboardSubtitle\":\"给出结果目标。Agent 会检索高信号情报、核对来源，并交付可编辑的内容、图片或 PPT。\",\"signalsReady\":\"{count} 条选题已就绪\",\"completion\":\"今日完成度 {percent}%\",\"todayProgress\":\"今日进度\",\"completedCount\":\"已完成 {done}/{total}\",\"dailyPlan\":\"今日计划\",\"planTopic\":\"确定今日选题\",\"planDraft\":\"完成一篇主稿\",\"planPublish\":\"发布到一个平台\",\"contentAssets\":\"已完成任务\",\"savedCreations\":\"个任务已保存\",\"guestAssetHint\":\"登录后保存任务、记忆与产物\",\"startCreating\":\"开始创作\",\"confirmGenerate\":\"确认生成\",\"briefDraftHint\":\"简报草稿已载入，可编辑后确认生成\",\"quickCreate\":\"委派任务\",\"quickAction1Title\":\"研究今日变化\",\"quickAction1Desc\":\"核对最新信号，给出判断、证据和可做选题\",\"quickAction2Title\":\"制作全平台内容包\",\"quickAction2Desc\":\"生成母稿、平台成稿、封面和配图\",\"quickAction3Title\":\"完成深度长文\",\"quickAction3Desc\":\"从一手来源研究到可发布的完整文章\",\"quickAction4Title\":\"制作小红书图文\",\"quickAction4Desc\":\"完成标题、正文和 6 页视觉内容\",\"quickAction5Title\":\"生成视觉素材\",\"quickAction5Desc\":\"基于内容制作封面、配图或信息图\",\"quickAction6Title\":\"制作可编辑 PPT\",\"quickAction6Desc\":\"研究主题并交付 16:9 原生 PPTX\",\"todayTopics\":\"今日高信号选题\",\"viewBrief\":\"查看完整简报\",\"sourceCount\":\"{count} 个来源\",\"createFromTopic\":\"以此创作\",\"createFromStory\":\"以“{title}”开始创作\",\"storyPrompt\":\"围绕“{title}”检索可靠材料，先给出适合自媒体创作的 3 个内容角度，再推荐最值得做的一个并生成结构化初稿。\",\"topicsEmpty\":\"今日选题正在整理中\",\"ready\":\"已就绪\",\"emptyTitle\":\"今天要完成什么？\",\"emptyBody\":\"给出一个目标，Agent 会核对来源、阅读相关材料，并交付可直接发布的内容与视觉资产。\",\"quickToday\":\"分析今天最值得关注的 AI 动态，给出 3 个内容选题\",\"quickPackage\":\"从今天的 AI 内容中选出最值得讲的一件，生成证据卡、结构化母稿、公众号、小红书、X 和微博成稿；图片工具可用时生成公众号封面和小红书首图\",\"quickWechat\":\"从近期 AI 新闻中选择一个主题，写成可直接发布的公众号文章\",\"quickXhs\":\"整理一个 AI 工具趋势，生成小红书图文文案和 6 页配图方案\",\"quickVisual\":\"围绕近期最值得关注的 AI 主题，先核对来源并提炼一个核心观点，再生成适合发布的封面和信息图\",\"quickPpt\":\"研究近期最值得讲的 AI 行业变化，引用可靠来源，制作一份 10 页、16:9、可编辑的中文 PPTX\",\"placeholder\":\"描述任务，Enter 发送，Shift + Enter 换行\",\"projectLabel\":\"选择项目\",\"projectNone\":\"不使用项目\",\"projectHint\":\"项目会为任务提供固定指令和长期记忆\",\"modelLabel\":\"选择模型\",\"modelAuto\":\"自动\",\"modelHint\":\"自动模式会根据任务选择可用模型，并在调用失败时切换\",\"send\":\"发送任务\",\"stop\":\"停止执行\",\"statusPlanning\":\"正在理解任务并规划步骤\",\"toolSearch\":\"搜索 traeai 知识库\",\"toolRead\":\"读取相关原文\",\"toolImage\":\"使用 gpt-image-2 生成配图\",\"toolPresentation\":\"提交原生 PPT 生成任务\",\"imageReady\":\"图片生成已就绪\",\"toolGeneric\":\"调用受控工具\",\"execution\":\"执行过程\",\"executionEmpty\":\"Agent 开始执行后，这里会显示检索和工具步骤。\",\"sources\":\"引用材料\",\"sourcesEmpty\":\"检索到的知识库材料会显示在这里。\",\"sourceRolePrimary\":\"一手来源\",\"sourceRoleResearch\":\"研究证据\",\"sourceRoleMedia\":\"媒体报道\",\"sourceRoleExpert\":\"专家观点\",\"sourceRoleDiscovery\":\"发现线索\",\"editorialScore\":\"traeai 编辑评分，不代表来源真实性\",\"scoreShort\":\"编辑分\",\"deliverable\":\"交付物\",\"deliverableEmpty\":\"任务完成后，可编辑结果会保存到这里。\",\"presentationMeta\":\"{count} 页 · 16:9 · 可编辑 PPTX\",\"presentationProgress\":\"PPT 生成进度\",\"downloadPptx\":\"下载 PPTX\",\"presentationStatus\":{\"queued\":\"排队中\",\"running\":\"生成中\",\"validating\":\"检查中\",\"completed\":\"已完成\",\"failed\":\"生成失败\",\"cancelled\":\"已取消\"},\"presentationStage\":{\"queued\":\"等待独立生成 Worker\",\"preparing\":\"准备材料\",\"generating\":\"正在生成页面\",\"validating\":\"正在检查 PPTX\",\"completed\":\"文件已就绪\",\"failed\":\"任务未完成\",\"cancelled\":\"任务已取消\"},\"copy\":\"复制\",\"copied\":\"已复制\",\"editableDraft\":\"可编辑草稿\",\"saveWork\":\"保存作品\",\"savingWork\":\"保存中…\",\"workSaved\":\"作品已保存\",\"workSaveError\":\"保存作品失败\",\"savedWorkDefaultTitle\":\"Agent 作品\",\"saveAsSkill\":\"保存为 Skill\",\"savingSkill\":\"保存中…\",\"skillSaved\":\"已保存为 Skill\",\"skillSaveError\":\"保存 Skill 失败\",\"savedSkillName\":\"Agent 工作流：{task}\",\"savedSkillDescription\":\"从一次完成的 Agent 任务保存的可复用工作流。\",\"savedSkillFormat\":\"默认交付\",\"savedSkillInstructions\":\"复用这次任务的目标、证据要求和交付方式。先核对来源，再按示例产出完整结果。\",\"authRequired\":\"登录状态已失效，请重新登录\",\"loadError\":\"无法加载任务\",\"runError\":\"Agent 执行失败\",\"stopped\":\"任务已停止\",\"quotaBlockedBody\":\"当前额度或套餐限制已达到。\",\"quotaBlockedAction\":\"查看套餐并升级\"},\"projects\":{\"title\":\"项目与记忆\",\"subtitle\":\"让一组任务共享目标、固定指令、长期记忆和产物。\",\"newProject\":\"新建项目\",\"namePlaceholder\":\"项目名称\",\"descriptionPlaceholder\":\"项目目标\",\"instructionsPlaceholder\":\"Agent 固定指令\",\"create\":\"创建项目\",\"saving\":\"保存中…\",\"saveError\":\"保存失败\",\"loadError\":\"无法加载项目\",\"authRequired\":\"登录状态已失效\",\"guestBody\":\"登录后创建长期项目，让 Agent 记住目标、风格、决策与历史产物。\",\"signIn\":\"登录并管理项目\",\"emptyBody\":\"还没有项目。创建一个内容栏目、客户项目或研究主题。\",\"noDescription\":\"暂未填写项目目标\",\"selectHint\":\"选择一个项目查看任务、记忆和产物\",\"useProject\":\"用此项目开始任务\",\"tasks\":\"任务\",\"artifacts\":\"产物\",\"memories\":\"记忆\",\"automations\":\"自动化\",\"instructions\":\"项目固定指令\",\"instructionsEmpty\":\"未设置固定指令。新任务只会使用项目记忆。\",\"memoryTitle\":\"长期记忆\",\"memoryInstruction\":\"指令\",\"memoryPreference\":\"偏好\",\"memoryFact\":\"事实\",\"memoryDecision\":\"决策\",\"memoryNamePlaceholder\":\"记忆标题\",\"memoryContentPlaceholder\":\"例如：文章语气克制，所有数据必须引用一手来源。\",\"saveMemory\":\"保存记忆\",\"memoryEmpty\":\"还没有长期记忆。\",\"automationTitle\":\"自动化定义\",\"automationBody\":\"按计划自动交给 Agent 执行；每次运行都会计入套餐配额和创作点。\",\"automationNamePlaceholder\":\"自动化名称\",\"automationPromptPlaceholder\":\"每次运行时交给 Agent 的完整任务\",\"scheduleManual\":\"手动\",\"scheduleDaily\":\"每天\",\"scheduleWeekly\":\"每周\",\"scheduleMonthly\":\"每月\",\"runTime\":\"运行时间\",\"weekday\":\"星期\",\"monthDay\":\"每月日期\",\"timezone\":\"时区\",\"approvalMode\":\"审批模式\",\"approvalAuto\":\"自动执行\",\"approvalRequired\":\"每次需批准\",\"dayOfMonth\":\"每月 {day} 日\",\"enableAfterSave\":\"保存后启用\",\"maxAttempts\":\"最多尝试\",\"saveAutomation\":\"保存自动化\",\"automationEmpty\":\"还没有自动化定义。\",\"nextRun\":\"下次 {time}\",\"pauseAutomation\":\"暂停自动化\",\"activateAutomation\":\"启用自动化\",\"runNow\":\"立即运行\",\"awaitingApproval\":\"本次任务等待批准\",\"approveRun\":\"批准运行\",\"rejectRun\":\"拒绝运行\",\"latestRun\":\"最近运行\",\"attemptCount\":\"第 {attempt}/{max} 次尝试\",\"recentTasks\":\"最近任务\",\"recentArtifacts\":\"最近产物\",\"tasksEmpty\":\"还没有归属此项目的任务。\",\"artifactsEmpty\":\"任务完成后，产物会出现在这里。\",\"schedule\":{\"manual\":\"手动\",\"daily\":\"每天\",\"weekly\":\"每周\",\"monthly\":\"每月\"},\"status\":{\"active\":\"已启用\",\"paused\":\"已暂停\",\"archived\":\"已归档\"},\"runStatus\":{\"queued\":\"排队中\",\"running\":\"执行中\",\"completed\":\"已完成\",\"failed\":\"失败\",\"cancelled\":\"已取消\"},\"weekdays\":{\"1\":\"周一\",\"2\":\"周二\",\"3\":\"周三\",\"4\":\"周四\",\"5\":\"周五\",\"6\":\"周六\",\"7\":\"周日\"}},\"rightPanel\":{\"hotTopics\":\"实时热点\",\"trendingTools\":\"趋势工具\",\"seeAll\":\"查看全部\",\"dailyTip\":\"今日提示\",\"tipContent\":\"最新内容信号还在刷新中，稍后会基于高分文章自动生成提示。\",\"tipFrom\":\"来自 {source}\",\"tipExpand\":\"查看具体操作\",\"tipStep1\":\"1. 打开 ChatGPT → 设置 → 个性化 → 自定义指令\",\"tipStep2\":\"2. 在「关于你自己」中描述你的领域和风格\",\"tipStep3\":\"3. 在「ChatGPT 如何回应」中设定输出格式\",\"tipCollapse\":\"收起\",\"noSignals\":\"暂无实时话题信号\",\"noToolSignals\":\"暂无工具趋势信号\",\"todayStats\":\"今日数据\",\"statArticles\":\"新增资讯\",\"statVideos\":\"新增视频\",\"statPodcasts\":\"新增播客\",\"statTweets\":\"新增推文\",\"greetingNight\":\"夜深了\",\"greetingMorning\":\"早上好\",\"greetingAfternoon\":\"下午好\",\"greetingEvening\":\"晚上好\",\"toolCursor\":\"AI 代码编辑器\",\"toolBolt\":\"AI 全栈开发\",\"toolRunway\":\"4K AI 视频生成\",\"toolNotebook\":\"Google AI 笔记\",\"tagEditor\":\"编辑器\",\"tagDev\":\"开发\",\"tagVideo\":\"视频\",\"tagNote\":\"笔记\",\"linkBrief\":\"简报\",\"linkSubs\":\"订阅\",\"linkAbout\":\"关于\"},\"aiBar\":{\"ph1\":\"向 traeai 提问任何事情...\",\"ph2\":\"搜索今日 AI 资讯、工具、教程...\",\"ph3\":\"帮我找 OpenAI 最新动态\",\"ph4\":\"推荐适合新手的 AI 赚钱方法\",\"ph5\":\"AI 视频生成工具有哪些？\",\"disclaimer\":\"AI 可能会生成不准确的信息，请核实重要内容\",\"thinking\":\"正在思考...\",\"answer\":\"AI 回答\",\"sources\":\"引用来源\",\"errorGeneric\":\"请求失败，请稍后重试\",\"errorNetwork\":\"网络错误，请检查连接\"}},\"now\":\"$undefined\",\"timeZone\":\"UTC\",\"children\":\"$L15\"}]\n"])</script><script>self.__next_f.push([1,"15:[\"$\",\"$L2\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L3\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]\n"])</script><script>self.__next_f.push([1,"c:[[\"$\",\"meta\",\"0\",{\"charSet\":\"utf-8\"}],[\"$\",\"meta\",\"1\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}]]\n"])</script><script>self.__next_f.push([1,"9:null\n"])</script><script>self.__next_f.push([1,"e:[[\"$\",\"title\",\"0\",{\"children\":\"How to Build a Real-Time Word Counter Tool with HTML, CSS, and JavaScript | freeCodeCamp.org | traeai\"}],[\"$\",\"meta\",\"1\",{\"name\":\"description\",\"content\":\"freeCodeCamp.org发布 （评分 7.1/100） How to Build a Real-Time Word Counter Tool with HTML, CSS, and JavaScript September 30, 2026 / JavaScript Bansidhar Kadi... 主题聚...\"}],[\"$\",\"link\",\"2\",{\"rel\":\"manifest\",\"href\":\"/manifest.json\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"meta\",\"3\",{\"name\":\"robots\",\"content\":\"index, follow\"}],[\"$\",\"meta\",\"4\",{\"name\":\"theme-color\",\"content\":\"#0f172a\"}],[\"$\",\"meta\",\"5\",{\"name\":\"citation_title\",\"content\":\"How to Build a Real-Time Word Counter Tool with HTML, CSS, and JavaScript\"}],[\"$\",\"meta\",\"6\",{\"name\":\"citation_author\",\"content\":\"freeCodeCamp.org\"}],[\"$\",\"meta\",\"7\",{\"name\":\"citation_publication_date\",\"content\":\"2026-09-30\"}],[\"$\",\"meta\",\"8\",{\"name\":\"citation_online_date\",\"content\":\"2026-10-01\"}],[\"$\",\"meta\",\"9\",{\"name\":\"citation_publisher\",\"content\":\"traeai\"}],[\"$\",\"meta\",\"10\",{\"name\":\"citation_public_url\",\"content\":\"https://www.traeai.com/articles/ad6a0ea4-243c-44fb-b8d2-ae2fe4b80592\"}],[\"$\",\"meta\",\"11\",{\"name\":\"citation_abstract\",\"content\":\"How to Build a Real-Time Word Counter Tool with HTML, CSS, and JavaScript September 30, 2026 / JavaScript Bansidhar Kadi...\"}],[\"$\",\"meta\",\"12\",{\"name\":\"ai-summary\",\"content\":\"How to Build a Real-Time Word Counter Tool with HTML, CSS, and JavaScript September 30, 2026 / JavaScript Bansidhar Kadi... | Key takeaways: 主题聚焦：How to Build a Real-Time Word Counter Tool with ; 来源：freeCodeCamp.org，建议结合原文判断细节。; AI 分析暂不可用，本条为保底评分与摘要。\"}],[\"$\",\"link\",\"13\",{\"rel\":\"canonical\",\"href\":\"https://www.traeai.com/articles/ad6a0ea4-243c-44fb-b8d2-ae2fe4b80592\"}],[\"$\",\"meta\",\"14\",{\"name\":\"baidu-site-verification\",\"content\":\"codeva-ja4cLJUfVw\"}],[\"$\",\"meta\",\"15\",{\"property\":\"og:title\",\"content\":\"How to Build a Real-Time Word Counter Tool with HTML, CSS, and JavaScript | freeCodeCamp.org | traeai\"}],[\"$\",\"meta\",\"16\",{\"property\":\"og:description\",\"content\":\"freeCodeCamp.org发布 （评分 7.1/100） How to Build a Real-Time Word Counter Tool with HTML, CSS, and JavaScript September 30, 2026 / JavaScript Bansidhar Kadi... 主题聚...\"}],[\"$\",\"meta\",\"17\",{\"property\":\"og:url\",\"content\":\"https://www.traeai.com/articles/ad6a0ea4-243c-44fb-b8d2-ae2fe4b80592\"}],[\"$\",\"meta\",\"18\",{\"property\":\"og:site_name\",\"content\":\"traeai\"}],[\"$\",\"meta\",\"19\",{\"property\":\"og:locale\",\"content\":\"zh_CN\"}],[\"$\",\"meta\",\"20\",{\"property\":\"og:image\",\"content\":\"https://www.traeai.com/og.png\"}],[\"$\",\"meta\",\"21\",{\"property\":\"og:image:width\",\"content\":\"1200\"}],[\"$\",\"meta\",\"22\",{\"property\":\"og:image:height\",\"content\":\"630\"}],[\"$\",\"meta\",\"23\",{\"property\":\"og:image:alt\",\"content\":\"How to Build a Real-Time Word Counter Tool with HTML, CSS, and JavaScript\"}],[\"$\",\"meta\",\"24\",{\"property\":\"og:type\",\"content\":\"article\"}],[\"$\",\"meta\",\"25\",{\"property\":\"article:published_time\",\"content\":\"2026-09-30T05:55:08+00:00\"}],[\"$\",\"meta\",\"26\",{\"property\":\"article:modified_time\",\"content\":\"2026-10-01T01:49:58.513552+00:00\"}],[\"$\",\"meta\",\"27\",{\"property\":\"article:author\",\"content\":\"freeCodeCamp.org\"}],[\"$\",\"meta\",\"28\",{\"property\":\"article:tag\",\"content\":\"AI\"}],[\"$\",\"meta\",\"29\",{\"property\":\"article:tag\",\"content\":\"编程\"}],[\"$\",\"meta\",\"30\",{\"property\":\"article:tag\",\"content\":\"前端\"}],[\"$\",\"meta\",\"31\",{\"property\":\"article:tag\",\"content\":\"安全\"}],[\"$\",\"meta\",\"32\",{\"property\":\"article:tag\",\"content\":\"产品\"}],[\"$\",\"meta\",\"33\",{\"name\":\"twitter:card\",\"content\":\"summary_large_image\"}],[\"$\",\"meta\",\"34\",{\"name\":\"twitter:title\",\"content\":\"How to Build a Real-Time Word Counter Tool with HTML, CSS, and JavaScript | freeCodeCamp.org | traeai\"}],[\"$\",\"meta\",\"35\",{\"name\":\"twitter:description\",\"content\":\"freeCodeCamp.org发布 （评分 7.1/100） How to Build a Real-Time Word Counter Tool with HTML, CSS, and JavaScript September 30, 2026 / JavaScript Bansidhar Kadi... 主题聚...\"}],[\"$\",\"meta\",\"36\",{\"name\":\"twitter:image\",\"content\":\"https://www.traeai.com/og.png\"}],[\"$\",\"link\",\"37\",{\"rel\":\"icon\",\"href\":\"/favicon.ico?8651e00f8b58c68f\",\"type\":\"image/x-icon\",\"sizes\":\"16x16\"}],\"$L16\",\"$L17\",\"$L18\"]\n"])</script><script>self.__next_f.push([1,"19:I[17932,[],\"IconMark\"]\n16:[\"$\",\"link\",\"38\",{\"rel\":\"icon\",\"href\":\"/icon.png?1e1a7ef1b4bebcf3\",\"type\":\"image/png\",\"sizes\":\"48x48\"}]\n17:[\"$\",\"link\",\"39\",{\"rel\":\"apple-touch-icon\",\"href\":\"/apple-icon.png?e64c85988942fb66\",\"type\":\"image/png\",\"sizes\":\"128x128\"}]\n18:[\"$\",\"$L19\",\"40\",{}]\n"])</script><script>self.__next_f.push([1,"1a:T3c24,"])</script><script>self.__next_f.push([1,"{\"@context\":\"https://schema.org\",\"@graph\":[{\"@type\":\"NewsArticle\",\"@id\":\"https://www.traeai.com/articles/ad6a0ea4-243c-44fb-b8d2-ae2fe4b80592#article\",\"url\":\"https://www.traeai.com/articles/ad6a0ea4-243c-44fb-b8d2-ae2fe4b80592\",\"headline\":\"How to Build a Real-Time Word Counter Tool with HTML, CSS, and JavaScript\",\"abstract\":\"How to Build a Real-Time Word Counter Tool with HTML, CSS, and JavaScript September 30, 2026 / JavaScript Bansidhar Kadi...\",\"description\":\"freeCodeCamp.org发布 （评分 7.1/100） How to Build a Real-Time Word Counter Tool with HTML, CSS, and JavaScript September 30, 2026 / JavaScript Bansidhar Kadi... 主题聚...\",\"datePublished\":\"2026-09-30T05:55:08+00:00\",\"dateModified\":\"2026-10-01T01:49:58.513552+00:00\",\"image\":[\"https://cdn.hashnode.com/uploads/covers/699c7b22cf5def0f6aaf982b/dc292767-ac0f-4e87-b88c-d64fab38f370.png\"],\"inLanguage\":\"英文\",\"keywords\":\"AI, 编程, 前端, 安全, 产品\",\"wordCount\":1690,\"timeRequired\":\"PT7M\",\"citation\":\"https://www.freecodecamp.org/news/how-to-build-a-real-time-word-counter-tool-with-html-css-and-javascript/\",\"isBasedOn\":\"https://www.freecodecamp.org/news/how-to-build-a-real-time-word-counter-tool-with-html-css-and-javascript/\",\"about\":[{\"@type\":\"Thing\",\"name\":\"AI\"},{\"@type\":\"Thing\",\"name\":\"编程\"},{\"@type\":\"Thing\",\"name\":\"前端\"},{\"@type\":\"Thing\",\"name\":\"安全\"},{\"@type\":\"Thing\",\"name\":\"产品\"}],\"isAccessibleForFree\":true,\"articleBody\":\"# How to Build a Real-Time Word Counter Tool with HTML, CSS, and JavaScript\\n\\nSeptember 30, 2026\\n\\n/\\n\\n#JavaScript\\n\\nBansidhar Kadiya\\n\\nWhether you're writing an essay, a tweet, or a blog post, keeping track of your word and character count is very important.\\n\\nIn this tutorial, you'll build a fully functional, real-time Word Counter tool from scratch. You'll use HTML for the structure, CSS for a clean design, and vanilla JavaScript to handle the counting logic.\\n\\nBecause this tool runs completely in the browser, it works instantly as you type and keeps your text data completely private.\\n\\nLet's get started.\\n\\n## Prerequisites\\n\\nTo follow this guide easily, you should have:\\n\\n- A basic understanding of HTML tags and CSS styling.\\n\\n- Familiarity with JavaScript concepts like functions, event listeners, and basic Regular Expressions (Regex).\\n\\n- A code editor (like VS Code) and a web browser.\\n\\n## Table of Contents\\n\\n- Step 1: Set Up Your Project\\n\\n- Step 2: Build the HTML Structure Understanding the HTML:\\n\\n- Step 3: Style the Tool with CSS Understanding the CSS:\\n\\n- Step 4: Add the JavaScript Logic Understanding the JavaScript:\\n\\n- Step 5: Test Your Application\\n\\n## Step 1: Set Up Your Project\\n\\nFirst, you need to set up your workspace. Create a new folder on your computer and name it word-counter-app .\\n\\nInside this folder, create three empty files:\\n\\n- index.html\\n\\n- style.css\\n\\n- script.js\\n\\n## Step 2: Build the HTML Structure\\n\\nOpen your index.html file. You need to create a layout that includes a header, a grid to display the real-time statistics, a text area for the user to type in, and buttons to copy or clear the text.\\n\\nAdd the following code into your HTML file:\\n\\n```\\n\u003c!DOCTYPE html\u003e\\n\u003chtml lang=\\\"en\\\"\u003e\\n\u003chead\u003e\\n \u003cmeta charset=\\\"UTF-8\\\"\u003e\\n \u003cmeta name=\\\"viewport\\\" content=\\\"width=device-width, initial-scale=1.0\\\"\u003e\\n \u003ctitle\u003eWord Counter Tool\u003c/title\u003e\\n \u003clink rel=\\\"stylesheet\\\" href=\\\"style.css\\\"\u003e\\n\u003c/head\u003e\\n\u003cbody\u003e\\n\\n \u003cheader class=\\\"header-section\\\"\u003e\\n \u003ch1\u003eWord Counter\u003c/h1\u003e\\n \u003cp class=\\\"description\\\"\u003ePaste or type your text below to get a real-time count of words, characters, sentences, and paragraphs.\u003c/p\u003e\\n \u003c/header\u003e\\n\\n \u003cmain class=\\\"tool-container\\\"\u003e\\n \\n \u003c!-- Statistics Panel --\u003e\\n \u003cdiv class=\\\"stats-grid\\\"\u003e\\n \u003cdiv class=\\\"stat-box\\\"\u003e\\n \u003cdiv class=\\\"stat-value\\\" id=\\\"wordCount\\\"\u003e0\u003c/div\u003e\\n \u003cdiv class=\\\"stat-label\\\"\u003eWords\u003c/div\u003e\\n \u003c/div\u003e\\n \u003cdiv class=\\\"stat-box\\\"\u003e\\n \u003cdiv class=\\\"stat-value\\\" id=\\\"charCount\\\"\u003e0\u003c/div\u003e\\n \u003cdiv class=\\\"stat-label\\\"\u003eCharacters\u003c/div\u003e\\n \u003c/div\u003e\\n \u003cdiv class=\\\"stat-box\\\"\u003e\\n \u003cdiv class=\\\"stat-value\\\" id=\\\"sentenceCount\\\"\u003e0\u003c/div\u003e\\n \u003cdiv class=\\\"stat-label\\\"\u003eSentences\u003c/div\u003e\\n \u003c/div\u003e\\n \u003cdiv class=\\\"stat-box\\\"\u003e\\n \u003cdiv class=\\\"stat-value\\\" id=\\\"paragraphCount\\\"\u003e0\u003c/div\u003e\\n \u003cdiv class=\\\"stat-label\\\"\u003eParagraphs\u003c/div\u003e\\n \u003c/div\u003e\\n \u003c/div\u003e\\n\\n \u003c!-- User Input Area --\u003e\\n \u003ctextarea id=\\\"textInput\\\" placeholder=\\\"Start typing or paste your text here...\\\"\u003e\u003c/textarea\u003e\\n\\n \u003c!-- Action Buttons --\u003e\\n \u003cdiv class=\\\"controls\\\"\u003e\\n \u003cbutton class=\\\"btn-primary\\\" onclick=\\\"copyText()\\\" id=\\\"copyBtn\\\"\u003eCopy Text\u003c/button\u003e\\n \u003cbutton class=\\\"btn-secondary\\\" onclick=\\\"clearText()\\\"\u003eClear\u003c/button\u003e\\n \u003c/div\u003e\\n\\n \u003c/main\u003e\\n\\n \u003cscript src=\\\"script.js\\\"\u003e\u003c/script\u003e\\n\u003c/body\u003e\\n\u003c/html\u003e\\n```\\n\\nUnderstanding the HTML:\\n\\n- The .stats-grid : This holds four separate boxes to show the counts. Each number has a unique id (like wordCount ) so JavaScript can find and update it easily.\\n\\n- The \u003ctextarea\u003e : This is the main input box where users will type or paste their content.\\n\\n- The \u003cscript\u003e tag: This connects your HTML to the logic you will write in the next steps.\\n\\n## Step 3: Style the Tool with CSS\\n\\nNext, you'll give your tool a modern, professional look. You'll use CSS Grid to align the statistics boxes perfectly.\\n\\nOpen your style.css file and add this code:\\n\\n```\\n:root {\\n --primary-color: #007bff;\\n --bg-color: #f8f9fa;\\n --text-dark: #202124;\\n --text-muted: #5f6368;\\n --border-color: #dadce0;\\n --panel-bg: #ffffff;\\n}\\n\\nbody {\\n font-family: -apple-system, BlinkMacSystemFont, \\\"Segoe UI\\\", Roboto, Helvetica, Arial, sans-serif;\\n background-color: var(--bg-color);\\n color: var(--text-dark);\\n margin: 0;\\n padding: 40px 20px;\\n display: flex;\\n flex-direction: column;\\n align-items: center;\\n}\\n\\n.header-section {\\n text-align: center;\\n margin-bottom: 30px;\\n}\\n\\nh1 {\\n font-size: 2.5rem;\\n margin: 0 0 10px 0;\\n font-weight: 800;\\n}\\n\\np.description {\\n color: var(--text-muted);\\n max-width: 600px;\\n margin: 0 auto;\\n line-height: 1.6;\\n font-size: 1.1rem;\\n}\\n\\n.tool-container {\\n background-color: var(--panel-bg);\\n border: 1px solid var(--border-color);\\n border-radius: 12px;\\n padding: 24px;\\n width: 100%;\\n max-width: 900px;\\n box-shadow: 0 4px 12px rgba(0,0,0,0.05);\\n}\\n\\n/* Stats Grid */\\n.stats-grid {\\n display: grid;\\n grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));\\n gap: 16px;\\n margin-bottom: 24px;\\n}\\n\\n.stat-box {\\n background-color: var(--bg-color);\\n border: 1px solid var(--border-color);\\n border-radius: 8px;\\n padding: 16px;\\n text-align: center;\\n}\\n\\n.stat-value {\\n font-size: 2rem;\\n font-weight: 700;\\n color: var(--primary-color);\\n margin-bottom: 4px;\\n}\\n\\n.stat-label {\\n font-size: 0.9rem;\\n color: var(--text-muted);\\n text-transform: uppercase;\\n letter-spacing: 0.5px;\\n font-weight: 600;\\n}\\n\\n/* Text Area */\\ntextarea {\\n width: 100%;\\n height: 250px;\\n padding: 16px;\\n border: 1px solid var(--border-color);\\n border-radius: 8px;\\n font-size: 1rem;\\n line-height: 1.6;\\n resize: vertical;\\n box-sizing: border-box;\\n font-family: inherit;\\n margin-bottom: 20px;\\n transition: border-color 0.2s ease;\\n}\\n\\ntextarea:focus {\\n outline: none;\\n border-color: var(--primary-color);\\n}\\n\\n/* Buttons */\\n.controls {\\n display: flex;\\n gap: 12px;\\n}\\n\\nbutton {\\n padding: 10px 20px;\\n font-size: 1rem;\\n font-weight: 600;\\n border-radius: 6px;\\n cursor: pointer;\\n border: none;\\n transition: background-color 0.2s ease;\\n}\\n\\n.btn-primary {\\n background-color: var(--primary-color);\\n color: #ffffff;\\n}\\n\\n.btn-primary:hover {\\n background-color: #0056b3;\\n}\\n\\n.btn-secondary {\\n background-color: transparent;\\n color: var(--text-dark);\\n border: 1px solid var(--border-color);\\n}\\n\\n.btn-secondary:hover {\\n background-color: var(--bg-color);\\n}\\n```\\n\\nUnderstanding the CSS:\\n\\n- CSS Grid: The .stats-grid class uses grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); . This makes the four stat boxes automatically stack neatly on top of each other if a user views the tool on a small mobile screen.\\n\\n- CSS Variables: Using :root at the top allows you to quickly change the brand color later if you want to use something other than the default blue ( #007bff ).\\n\\nAt this point, the visual design of your tool is complete. Here's what the final Word Counter will look like in your browser:\\n\\n## Step 4: Add the JavaScript Logic\\n\\nNow you need to make the tool count the text. You'll use an event listener that watches every keystroke. Every time the user types, it recalculates the words, characters, sentences, and paragraphs.\\n\\nOpen your script.js file and paste this code:\\n\\n```\\nconst textInput = document.getElementById('textInput');\\nconst wordCountDisplay = document.getElementById('wordCount');\\nconst charCountDisplay = document.getElementById('charCount');\\nconst sentenceCountDisplay = document.getElementById('sentenceCount');\\nconst paragraphCountDisplay = document.getElementById('paragraphCount');\\nconst copyBtn = document.getElementById('copyBtn');\\n\\n// 1. Listen for user input in real-time\\ntextInput.addEventListener('input', updateStatistics);\\n\\n// 2. The Core Counting Logic\\nfunction updateStatistics() {\\n const text = textInput.value;\\n\\n // Character Count (includes spaces)\\n charCountDisplay.textContent = text.length;\\n\\n // Word Count\\n const words = text.match(/\\\\S+/g) || [];\\n wordCountDisplay.textContent = words.length;\\n\\n // Sentence Count\\n const sentences = text.split(/[.!?]+(?=\\\\s|$)/).filter(sentence =\u003e sentence.trim().length \u003e 0);\\n sentenceCountDisplay.textContent = sentences.length;\\n\\n // Paragraph Count\\n const paragraphs = text.split(/\\\\n+/).filter(paragraph =\u003e paragraph.trim().length \u003e 0);\\n paragraphCountDisplay.textContent = paragraphs.length;\\n}\\n\\n// 3. Copy functionality\\nfunction copyText() {\\n if (!textInput.value) return;\\n \\n textInput.select();\\n document.execCommand('copy');\\n \\n // Provide visual feedback\\n copyBtn.textContent = 'Copied!';\\n setTimeout(() =\u003e {\\n copyBtn.textContent = 'Copy Text';\\n }, 1500);\\n}\\n\\n// 4. Clear functionality\\nfunction clearText() {\\n textInput.value = '';\\n updateStatistics(); // Reset counts to zero\\n}\\n```\\n\\nUnderstanding the JavaScript:\\n\\n- The input Event: textInput.addEventListener('input', ...) is the secret to real-time updates. It triggers the counting function the exact moment a key is pressed or text is pasted.\\n\\n- Counting Words: text.match(/\\\\S+/g) is a Regular Expression that looks for unbroken strings of non-whitespace characters. This is much more accurate than just splitting the text by spaces, because it ignores extra empty spaces left by mistake.\\n\\n- Counting Sentences: The .split(/[.!?]+(?=\\\\s|$)/) logic cuts the text into pieces every time it sees a period, exclamation mark, or question mark followed by a space.\\n\\n## Step 5: Test Your Application\\n\\nYou're completely done coding! Now it's time to verify that your logic works correctly.\\n\\n- Open your word-counter-app folder.\\n\\n- Double-click the index.html file to open it in your web browser.\\n\\n- Type a few sentences into the text area. Watch the numbers at the top update instantly.\\n\\n- Try adding double spaces or hitting the \\\"Enter\\\" key to make new paragraphs, and ensure the logic counts them accurately.\\n\\n- Click Copy Text to test the clipboard feature, and Clear to reset the board.\\n\\nBy completing this project, you've built a fast, client-side utility tool using pure vanilla JavaScript. You learned how to manipulate strings, use Regular Expressions for text analysis, and create responsive UI grids.\\n\\nIf you want to see this exact codebase running in a live production environment, you can try out this Online Word Counter . Keep building, and happy coding!\\n\\nRecommended courses from our partners\\n\\n(opens in a new tab)\\n\\nADVERTISEMENT\\n\\n- On Udemy HTML, CSS, JavaScript, React - Online Certification Course YouAccel Training and Blue Digital Media 4.4 out of 5 stars (1,161) from 1,161 ratings 15h 48m 15 hours 48 minutes Beginner Certificate View course (opens in a new tab)\\n\\n- On Coursera React Beginner Project: Build a Color Picker Tool James Q Quick 1h 50m 1 hour 50 minutes Intermediate Certificate View course (opens in a new tab)\\n\\n- On Udemy Complete FrontEnd Web Development and Design HTML CSS JS Laurence Svekis 4.5 out of 5 stars (1,108) from 1,108 ratings 22h 10m 22 hours 10 minutes Beginner Certificate View course (opens in a new tab)\\n\\n- On Skillshare Code your own portfolio – HTML \u0026 CSS basics Aga Naplocha 4.5 out of 5 stars (188) from 188 ratings 3h 2m 3 hours 2 minutes Beginner View course (opens in a new tab)\\n\\nMore HTML \u0026 CSS courses on Class Central\\n\\n→\\n\\nBansidhar Kadiya is a WordPress Developer and SEO specialist focused on building fast, practical web experiences. He is the creator of 99tools.net, a growing collection of free browser-based utilities designed to help developers, creators, and everyday users complete common tasks quickly and efficiently.\\n\\nIf you read this far, thank the author to show them you care. Say Thanks\\n\\nLearn to code for free. freeCodeCamp's open source curriculum has helped more than 40,000 people get jobs as developers. Get started\",\"speakable\":{\"@type\":\"SpeakableSpecification\",\"cssSelector\":[\"[data-speakable='summary']\",\"[data-speakable='takeaways']\"]},\"author\":{\"@type\":\"Organization\",\"name\":\"freeCodeCamp.org\",\"url\":\"https://www.freecodecamp.org\"},\"publisher\":{\"@type\":\"Organization\",\"name\":\"traeai\",\"url\":\"https://www.traeai.com\",\"logo\":{\"@type\":\"ImageObject\",\"url\":\"https://www.traeai.com/icon.svg\"},\"sameAs\":[\"https://github.com/cq0206/traeai\"]},\"mainEntityOfPage\":\"https://www.traeai.com/articles/ad6a0ea4-243c-44fb-b8d2-ae2fe4b80592\"},{\"@type\":\"WebSite\",\"@id\":\"https://www.traeai.com/#website\",\"url\":\"https://www.traeai.com\",\"name\":\"traeai\",\"description\":\"traeai 为开发者、研究员和内容团队筛选高质量 AI 技术内容，提供摘要、评分、趋势雷达与知识库产出。\",\"inLanguage\":[\"zh-CN\",\"en\"],\"potentialAction\":{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https://www.traeai.com/?q={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}},{\"@type\":\"BreadcrumbList\",\"@id\":\"https://www.traeai.com/articles/ad6a0ea4-243c-44fb-b8d2-ae2fe4b80592#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"首页\",\"item\":\"https://www.traeai.com/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"文章\",\"item\":\"https://www.traeai.com/brief\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"freeCodeCamp.org\",\"item\":\"https://www.traeai.com/sources\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"How to Build a Real-Time Word Counter Tool with HTML, CSS, and JavaScript\",\"item\":\"https://www.traeai.com/articles/ad6a0ea4-243c-44fb-b8d2-ae2fe4b80592\"}]}]}"])</script><script>self.__next_f.push([1,"6:[\"$\",\"div\",null,{\"className\":\"min-h-screen bg-slate-50 text-slate-950\",\"children\":[[\"$\",\"header\",null,{\"className\":\"sticky top-0 z-40 border-b border-slate-100 bg-white/90 backdrop-blur\",\"children\":[\"$\",\"nav\",null,{\"aria-label\":\"阅读导航\",\"className\":\"mx-auto flex h-14 max-w-[1280px] items-center justify-between gap-3 px-4 lg:px-6\",\"children\":[[\"$\",\"a\",null,{\"className\":\"rounded-md border border-slate-200 px-3 py-1.5 text-sm font-medium text-slate-600 hover:text-slate-950\",\"href\":\"/\",\"children\":\"返回首页\"}],[\"$\",\"a\",null,{\"className\":\"rounded-md border border-slate-200 px-3 py-1.5 text-sm font-medium text-slate-600 hover:text-slate-950\",\"href\":\"/sources\",\"children\":\"内容来源\"}]]}]}],[\"$\",\"main\",null,{\"className\":\"mx-auto max-w-[1280px] px-4 py-6 lg:px-6\",\"children\":[[\"$\",\"script\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"$1a\"},\"type\":\"application/ld+json\"}],null,\"$L1b\",\"$L1c\"]}]]}]\n"])</script><script>self.__next_f.push([1,"1d:I[61906,[\"1562\",\"static/chunks/ed027683-fb3d1010fb1dd056.js\",\"48\",\"static/chunks/48-081bd7173bc0d1b7.js\",\"299\",\"static/chunks/299-adffce14862fb047.js\",\"2659\",\"static/chunks/2659-e618985a38010c5a.js\",\"1312\",\"static/chunks/1312-59cbdfb1752d5335.js\",\"4137\",\"static/chunks/app/%5Blocale%5D/articles/%5Bid%5D/page-63996a2c334b7d86.js\"],\"ArticleViewTracker\"]\n1b:[\"$\",\"$L1d\",null,{\"articleId\":\"ad6a0ea4-243c-44fb-b8d2-ae2fe4b80592\",\"referrer\":\"direct\"}]\n"])</script><script>self.__next_f.push([1,"1e:I[6185,[\"1562\",\"static/chunks/ed027683-fb3d1010fb1dd056.js\",\"48\",\"static/chunks/48-081bd7173bc0d1b7.js\",\"299\",\"static/chunks/299-adffce14862fb047.js\",\"2659\",\"static/chunks/2659-e618985a38010c5a.js\",\"1312\",\"static/chunks/1312-59cbdfb1752d5335.js\",\"4137\",\"static/chunks/app/%5Blocale%5D/articles/%5Bid%5D/page-63996a2c334b7d86.js\"],\"SaveToWorkspaceButton\"]\n1f:I[99377,[\"1562\",\"static/chunks/ed027683-fb3d1010fb1dd056.js\",\"48\",\"static/chunks/48-081bd7173bc0d1b7.js\",\"299\",\"static/chunks/299-adffce14862fb047.js\",\"2659\",\"static/chunks/2659-e618985a38010c5a.js\",\"1312\",\"static/chunks/1312-59cbdfb1752d5335.js\",\"4137\",\"static/chunks/app/%5Blocale%5D/articles/%5Bid%5D/page-63996a2c334b7d86.js\"],\"SaveAsNoteButton\"]\n20:I[41535,[\"1562\",\"static/chunks/ed027683-fb3d1010fb1dd056.js\",\"48\",\"static/chunks/48-081bd7173bc0d1b7.js\",\"299\",\"static/chunks/299-adffce14862fb047.js\",\"2659\",\"static/chunks/2659-e618985a38010c5a.js\",\"1312\",\"static/chunks/1312-59cbdfb1752d5335.js\",\"4137\",\"static/chunks/app/%5Blocale%5D/articles/%5Bid%5D/page-63996a2c334b7d86.js\"],\"TldrBlock\"]\n:HL[\"/api/img-proxy?url=https%3A%2F%2Fcdn.hashnode.com%2Fuploads%2Fcovers%2F699c7b22cf5def0f6aaf982b%2Fdc292767-ac0f-4e87-b88c-d64fab38f370.png\",\"image\",{\"referrerPolicy\":\"no-referrer\"}]\n21:T2e8e,"])</script><script>self.__next_f.push([1,"# How to Build a Real-Time Word Counter Tool with HTML, CSS, and JavaScript\n\nSeptember 30, 2026\n\n/\n\n#JavaScript\n\nBansidhar Kadiya\n\nWhether you're writing an essay, a tweet, or a blog post, keeping track of your word and character count is very important.\n\nIn this tutorial, you'll build a fully functional, real-time Word Counter tool from scratch. You'll use HTML for the structure, CSS for a clean design, and vanilla JavaScript to handle the counting logic.\n\nBecause this tool runs completely in the browser, it works instantly as you type and keeps your text data completely private.\n\nLet's get started.\n\n## Prerequisites\n\nTo follow this guide easily, you should have:\n\n- A basic understanding of HTML tags and CSS styling.\n\n- Familiarity with JavaScript concepts like functions, event listeners, and basic Regular Expressions (Regex).\n\n- A code editor (like VS Code) and a web browser.\n\n## Table of Contents\n\n- Step 1: Set Up Your Project\n\n- Step 2: Build the HTML Structure Understanding the HTML:\n\n- Step 3: Style the Tool with CSS Understanding the CSS:\n\n- Step 4: Add the JavaScript Logic Understanding the JavaScript:\n\n- Step 5: Test Your Application\n\n## Step 1: Set Up Your Project\n\nFirst, you need to set up your workspace. Create a new folder on your computer and name it word-counter-app .\n\nInside this folder, create three empty files:\n\n- index.html\n\n- style.css\n\n- script.js\n\n## Step 2: Build the HTML Structure\n\nOpen your index.html file. You need to create a layout that includes a header, a grid to display the real-time statistics, a text area for the user to type in, and buttons to copy or clear the text.\n\nAdd the following code into your HTML file:\n\n```\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n\u003chead\u003e\n \u003cmeta charset=\"UTF-8\"\u003e\n \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\u003e\n \u003ctitle\u003eWord Counter Tool\u003c/title\u003e\n \u003clink rel=\"stylesheet\" href=\"style.css\"\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n\n \u003cheader class=\"header-section\"\u003e\n \u003ch1\u003eWord Counter\u003c/h1\u003e\n \u003cp class=\"description\"\u003ePaste or type your text below to get a real-time count of words, characters, sentences, and paragraphs.\u003c/p\u003e\n \u003c/header\u003e\n\n \u003cmain class=\"tool-container\"\u003e\n \n \u003c!-- Statistics Panel --\u003e\n \u003cdiv class=\"stats-grid\"\u003e\n \u003cdiv class=\"stat-box\"\u003e\n \u003cdiv class=\"stat-value\" id=\"wordCount\"\u003e0\u003c/div\u003e\n \u003cdiv class=\"stat-label\"\u003eWords\u003c/div\u003e\n \u003c/div\u003e\n \u003cdiv class=\"stat-box\"\u003e\n \u003cdiv class=\"stat-value\" id=\"charCount\"\u003e0\u003c/div\u003e\n \u003cdiv class=\"stat-label\"\u003eCharacters\u003c/div\u003e\n \u003c/div\u003e\n \u003cdiv class=\"stat-box\"\u003e\n \u003cdiv class=\"stat-value\" id=\"sentenceCount\"\u003e0\u003c/div\u003e\n \u003cdiv class=\"stat-label\"\u003eSentences\u003c/div\u003e\n \u003c/div\u003e\n \u003cdiv class=\"stat-box\"\u003e\n \u003cdiv class=\"stat-value\" id=\"paragraphCount\"\u003e0\u003c/div\u003e\n \u003cdiv class=\"stat-label\"\u003eParagraphs\u003c/div\u003e\n \u003c/div\u003e\n \u003c/div\u003e\n\n \u003c!-- User Input Area --\u003e\n \u003ctextarea id=\"textInput\" placeholder=\"Start typing or paste your text here...\"\u003e\u003c/textarea\u003e\n\n \u003c!-- Action Buttons --\u003e\n \u003cdiv class=\"controls\"\u003e\n \u003cbutton class=\"btn-primary\" onclick=\"copyText()\" id=\"copyBtn\"\u003eCopy Text\u003c/button\u003e\n \u003cbutton class=\"btn-secondary\" onclick=\"clearText()\"\u003eClear\u003c/button\u003e\n \u003c/div\u003e\n\n \u003c/main\u003e\n\n \u003cscript src=\"script.js\"\u003e\u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\nUnderstanding the HTML:\n\n- The .stats-grid : This holds four separate boxes to show the counts. Each number has a unique id (like wordCount ) so JavaScript can find and update it easily.\n\n- The \u003ctextarea\u003e : This is the main input box where users will type or paste their content.\n\n- The \u003cscript\u003e tag: This connects your HTML to the logic you will write in the next steps.\n\n## Step 3: Style the Tool with CSS\n\nNext, you'll give your tool a modern, professional look. You'll use CSS Grid to align the statistics boxes perfectly.\n\nOpen your style.css file and add this code:\n\n```\n:root {\n --primary-color: #007bff;\n --bg-color: #f8f9fa;\n --text-dark: #202124;\n --text-muted: #5f6368;\n --border-color: #dadce0;\n --panel-bg: #ffffff;\n}\n\nbody {\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n background-color: var(--bg-color);\n color: var(--text-dark);\n margin: 0;\n padding: 40px 20px;\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n\n.header-section {\n text-align: center;\n margin-bottom: 30px;\n}\n\nh1 {\n font-size: 2.5rem;\n margin: 0 0 10px 0;\n font-weight: 800;\n}\n\np.description {\n color: var(--text-muted);\n max-width: 600px;\n margin: 0 auto;\n line-height: 1.6;\n font-size: 1.1rem;\n}\n\n.tool-container {\n background-color: var(--panel-bg);\n border: 1px solid var(--border-color);\n border-radius: 12px;\n padding: 24px;\n width: 100%;\n max-width: 900px;\n box-shadow: 0 4px 12px rgba(0,0,0,0.05);\n}\n\n/* Stats Grid */\n.stats-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));\n gap: 16px;\n margin-bottom: 24px;\n}\n\n.stat-box {\n background-color: var(--bg-color);\n border: 1px solid var(--border-color);\n border-radius: 8px;\n padding: 16px;\n text-align: center;\n}\n\n.stat-value {\n font-size: 2rem;\n font-weight: 700;\n color: var(--primary-color);\n margin-bottom: 4px;\n}\n\n.stat-label {\n font-size: 0.9rem;\n color: var(--text-muted);\n text-transform: uppercase;\n letter-spacing: 0.5px;\n font-weight: 600;\n}\n\n/* Text Area */\ntextarea {\n width: 100%;\n height: 250px;\n padding: 16px;\n border: 1px solid var(--border-color);\n border-radius: 8px;\n font-size: 1rem;\n line-height: 1.6;\n resize: vertical;\n box-sizing: border-box;\n font-family: inherit;\n margin-bottom: 20px;\n transition: border-color 0.2s ease;\n}\n\ntextarea:focus {\n outline: none;\n border-color: var(--primary-color);\n}\n\n/* Buttons */\n.controls {\n display: flex;\n gap: 12px;\n}\n\nbutton {\n padding: 10px 20px;\n font-size: 1rem;\n font-weight: 600;\n border-radius: 6px;\n cursor: pointer;\n border: none;\n transition: background-color 0.2s ease;\n}\n\n.btn-primary {\n background-color: var(--primary-color);\n color: #ffffff;\n}\n\n.btn-primary:hover {\n background-color: #0056b3;\n}\n\n.btn-secondary {\n background-color: transparent;\n color: var(--text-dark);\n border: 1px solid var(--border-color);\n}\n\n.btn-secondary:hover {\n background-color: var(--bg-color);\n}\n```\n\nUnderstanding the CSS:\n\n- CSS Grid: The .stats-grid class uses grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); . This makes the four stat boxes automatically stack neatly on top of each other if a user views the tool on a small mobile screen.\n\n- CSS Variables: Using :root at the top allows you to quickly change the brand color later if you want to use something other than the default blue ( #007bff ).\n\nAt this point, the visual design of your tool is complete. Here's what the final Word Counter will look like in your browser:\n\n## Step 4: Add the JavaScript Logic\n\nNow you need to make the tool count the text. You'll use an event listener that watches every keystroke. Every time the user types, it recalculates the words, characters, sentences, and paragraphs.\n\nOpen your script.js file and paste this code:\n\n```\nconst textInput = document.getElementById('textInput');\nconst wordCountDisplay = document.getElementById('wordCount');\nconst charCountDisplay = document.getElementById('charCount');\nconst sentenceCountDisplay = document.getElementById('sentenceCount');\nconst paragraphCountDisplay = document.getElementById('paragraphCount');\nconst copyBtn = document.getElementById('copyBtn');\n\n// 1. Listen for user input in real-time\ntextInput.addEventListener('input', updateStatistics);\n\n// 2. The Core Counting Logic\nfunction updateStatistics() {\n const text = textInput.value;\n\n // Character Count (includes spaces)\n charCountDisplay.textContent = text.length;\n\n // Word Count\n const words = text.match(/\\S+/g) || [];\n wordCountDisplay.textContent = words.length;\n\n // Sentence Count\n const sentences = text.split(/[.!?]+(?=\\s|$)/).filter(sentence =\u003e sentence.trim().length \u003e 0);\n sentenceCountDisplay.textContent = sentences.length;\n\n // Paragraph Count\n const paragraphs = text.split(/\\n+/).filter(paragraph =\u003e paragraph.trim().length \u003e 0);\n paragraphCountDisplay.textContent = paragraphs.length;\n}\n\n// 3. Copy functionality\nfunction copyText() {\n if (!textInput.value) return;\n \n textInput.select();\n document.execCommand('copy');\n \n // Provide visual feedback\n copyBtn.textContent = 'Copied!';\n setTimeout(() =\u003e {\n copyBtn.textContent = 'Copy Text';\n }, 1500);\n}\n\n// 4. Clear functionality\nfunction clearText() {\n textInput.value = '';\n updateStatistics(); // Reset counts to zero\n}\n```\n\nUnderstanding the JavaScript:\n\n- The input Event: textInput.addEventListener('input', ...) is the secret to real-time updates. It triggers the counting function the exact moment a key is pressed or text is pasted.\n\n- Counting Words: text.match(/\\S+/g) is a Regular Expression that looks for unbroken strings of non-whitespace characters. This is much more accurate than just splitting the text by spaces, because it ignores extra empty spaces left by mistake.\n\n- Counting Sentences: The .split(/[.!?]+(?=\\s|$)/) logic cuts the text into pieces every time it sees a period, exclamation mark, or question mark followed by a space.\n\n## Step 5: Test Your Application\n\nYou're completely done coding! Now it's time to verify that your logic works correctly.\n\n- Open your word-counter-app folder.\n\n- Double-click the index.html file to open it in your web browser.\n\n- Type a few sentences into the text area. Watch the numbers at the top update instantly.\n\n- Try adding double spaces or hitting the \"Enter\" key to make new paragraphs, and ensure the logic counts them accurately.\n\n- Click Copy Text to test the clipboard feature, and Clear to reset the board.\n\nBy completing this project, you've built a fast, client-side utility tool using pure vanilla JavaScript. You learned how to manipulate strings, use Regular Expressions for text analysis, and create responsive UI grids.\n\nIf you want to see this exact codebase running in a live production environment, you can try out this Online Word Counter . Keep building, and happy coding!\n\nRecommended courses from our partners\n\n(opens in a new tab)\n\nADVERTISEMENT\n\n- On Udemy HTML, CSS, JavaScript, React - Online Certification Course YouAccel Training and Blue Digital Media 4.4 out of 5 stars (1,161) from 1,161 ratings 15h 48m 15 hours 48 minutes Beginner Certificate View course (opens in a new tab)\n\n- On Coursera React Beginner Project: Build a Color Picker Tool James Q Quick 1h 50m 1 hour 50 minutes Intermediate Certificate View course (opens in a new tab)\n\n- On Udemy Complete FrontEnd Web Development and Design HTML CSS JS Laurence Svekis 4.5 out of 5 stars (1,108) from 1,108 ratings 22h 10m 22 hours 10 minutes Beginner Certificate View course (opens in a new tab)\n\n- On Skillshare Code your own portfolio – HTML \u0026 CSS basics Aga Naplocha 4.5 out of 5 stars (188) from 188 ratings 3h 2m 3 hours 2 minutes Beginner View course (opens in a new tab)\n\nMore HTML \u0026 CSS courses on Class Central\n\n→\n\nBansidhar Kadiya is a WordPress Developer and SEO specialist focused on building fast, practical web experiences. He is the creator of 99tools.net, a growing collection of free browser-based utilities designed to help developers, creators, and everyday users complete common tasks quickly and efficiently.\n\nIf you read this far, thank the author to show them you care. Say Thanks\n\nLearn to code for free. freeCodeCamp's open source curriculum has helped more than 40,000 people get jobs as developers. Get started"])</script><script>self.__next_f.push([1,"1c:[\"$\",\"article\",null,{\"className\":\"mx-auto max-w-3xl\",\"children\":[[\"$\",\"div\",null,{\"className\":\"mb-6 flex flex-wrap items-center gap-2 text-[13px] font-medium text-slate-500\",\"children\":[[\"$\",\"span\",null,{\"className\":\"rounded-md bg-slate-100 px-2 py-1 text-slate-700\",\"children\":\"freeCodeCamp.org\"}],[\"$\",\"span\",null,{\"aria-hidden\":\"true\",\"children\":\"·\"}],[\"$\",\"time\",null,{\"dateTime\":\"2026-09-30T05:55:08+00:00\",\"children\":\"2026年9月30日\"}]]}],[\"$\",\"div\",null,{\"className\":\"mb-5 flex items-start justify-between gap-4\",\"children\":[[\"$\",\"h1\",null,{\"className\":\"text-[30px] font-black leading-tight text-slate-950 sm:text-[38px]\",\"children\":\"How to Build a Real-Time Word Counter Tool with HTML, CSS, and JavaScript\"}],[\"$\",\"div\",null,{\"aria-label\":\"内容质量分 7.1\",\"className\":\"flex shrink-0 items-center gap-1.5 rounded-md border border-amber-200 bg-amber-50 px-2.5 py-1 text-amber-800\",\"title\":\"内容质量分 7.1\",\"children\":[[\"$\",\"span\",null,{\"className\":\"font-mono text-[15px] font-bold leading-none\",\"children\":\"7.1\"}],[\"$\",\"span\",null,{\"className\":\"text-[11px] font-semibold\",\"children\":\"内容质量\"}]]}]]}],[\"$\",\"div\",null,{\"className\":\"mb-6 flex flex-wrap items-center gap-2\",\"children\":[[\"$\",\"$L1e\",null,{\"articleId\":\"ad6a0ea4-243c-44fb-b8d2-ae2fe4b80592\",\"className\":\"px-3 py-2 text-[13px]\",\"contentType\":\"article\",\"imageUrl\":\"https://cdn.hashnode.com/uploads/covers/699c7b22cf5def0f6aaf982b/dc292767-ac0f-4e87-b88c-d64fab38f370.png\",\"sourceName\":\"freeCodeCamp.org\",\"summary\":\"How to Build a Real-Time Word Counter Tool with HTML, CSS, and JavaScript September 30, 2026 / JavaScript Bansidhar Kadi...\",\"title\":\"How to Build a Real-Time Word Counter Tool with HTML, CSS, and JavaScript\",\"url\":\"https://www.freecodecamp.org/news/how-to-build-a-real-time-word-counter-tool-with-html-css-and-javascript/\"}],[\"$\",\"$L1f\",null,{\"articleId\":\"ad6a0ea4-243c-44fb-b8d2-ae2fe4b80592\",\"className\":\"px-3 py-2 text-[13px]\",\"summary\":\"How to Build a Real-Time Word Counter Tool with HTML, CSS, and JavaScript September 30, 2026 / JavaScript Bansidhar Kadi...\",\"title\":\"How to Build a Real-Time Word Counter Tool with HTML, CSS, and JavaScript\"}]]}],[\"$\",\"figure\",null,{\"className\":\"mb-6 flex justify-center rounded-lg border border-slate-200 bg-white p-2\",\"children\":[\"$\",\"img\",null,{\"alt\":\"How to Build a Real-Time Word Counter Tool with HTML, CSS, and JavaScript\",\"className\":\"max-h-[520px] max-w-full rounded-md object-contain\",\"decoding\":\"async\",\"loading\":\"eager\",\"referrerPolicy\":\"no-referrer\",\"src\":\"/api/img-proxy?url=https%3A%2F%2Fcdn.hashnode.com%2Fuploads%2Fcovers%2F699c7b22cf5def0f6aaf982b%2Fdc292767-ac0f-4e87-b88c-d64fab38f370.png\",\"style\":{\"aspectRatio\":\"16 / 9\"}}]}],[\"$\",\"$L20\",null,{\"article\":{\"id\":\"ad6a0ea4-243c-44fb-b8d2-ae2fe4b80592\",\"source_name\":\"freeCodeCamp.org\",\"title\":\"How to Build a Real-Time Word Counter Tool with HTML, CSS, and JavaScript\",\"url\":\"https://www.freecodecamp.org/news/how-to-build-a-real-time-word-counter-tool-with-html-css-and-javascript/\",\"score\":7.1,\"summary\":\"How to Build a Real-Time Word Counter Tool with HTML, CSS, and JavaScript September 30, 2026 / JavaScript Bansidhar Kadi...\",\"takeaways\":[\"主题聚焦：How to Build a Real-Time Word Counter Tool with \",\"来源：freeCodeCamp.org，建议结合原文判断细节。\",\"AI 分析暂不可用，本条为保底评分与摘要。\"],\"tags\":[\"AI\",\"编程\",\"前端\",\"安全\",\"产品\"],\"image_url\":\"https://cdn.hashnode.com/uploads/covers/699c7b22cf5def0f6aaf982b/dc292767-ac0f-4e87-b88c-d64fab38f370.png\",\"word_count\":1690,\"reading_minutes\":7,\"language\":\"英文\",\"content_markdown\":\"$21\",\"content_r2_key\":\"articles/content/2026-09-30/freecodecamp.org/1b40f85968f19fb2ae6b5eccab80d9fa.md\",\"content_storage_provider\":\"r2\",\"content_byte_size\":11918,\"content_type\":\"article\",\"audio_url\":null,\"audio_mime_type\":null,\"audio_duration_seconds\":null,\"podcast_chapters\":[],\"podcast_transcript\":[],\"outline\":null,\"highlights\":null,\"mindmap\":null,\"translations\":null,\"published_at\":\"2026-09-30T05:55:08+00:00\",\"created_at\":\"2026-10-01T01:49:58.513552+00:00\"},\"variant\":\"article\"}],\"$L22\",\"$L23\",\"$L24\",\"$L25\",\"$L26\",\"$L27\",\"$L28\"]}]\n"])</script><script>self.__next_f.push([1,"29:I[32679,[\"1562\",\"static/chunks/ed027683-fb3d1010fb1dd056.js\",\"48\",\"static/chunks/48-081bd7173bc0d1b7.js\",\"299\",\"static/chunks/299-adffce14862fb047.js\",\"2659\",\"static/chunks/2659-e618985a38010c5a.js\",\"1312\",\"static/chunks/1312-59cbdfb1752d5335.js\",\"4137\",\"static/chunks/app/%5Blocale%5D/articles/%5Bid%5D/page-63996a2c334b7d86.js\"],\"default\"]\n5d:I[7929,[\"1562\",\"static/chunks/ed027683-fb3d1010fb1dd056.js\",\"48\",\"static/chunks/48-081bd7173bc0d1b7.js\",\"299\",\"static/chunks/299-adffce14862fb047.js\",\"2659\",\"static/chunks/2659-e618985a38010c5a.js\",\"1312\",\"static/chunks/1312-59cbdfb1752d5335.js\",\"4137\",\"static/chunks/app/%5Blocale%5D/articles/%5Bid%5D/page-63996a2c334b7d86.js\"],\"ArticleChatFloat\"]\n5e:I[41535,[\"1562\",\"static/chunks/ed027683-fb3d1010fb1dd056.js\",\"48\",\"static/chunks/48-081bd7173bc0d1b7.js\",\"299\",\"static/chunks/299-adffce14862fb047.js\",\"2659\",\"static/chunks/2659-e618985a38010c5a.js\",\"1312\",\"static/chunks/1312-59cbdfb1752d5335.js\",\"4137\",\"static/chunks/app/%5Blocale%5D/articles/%5Bid%5D/page-63996a2c334b7d86.js\"],\"AiDigestMeta\"]\n22:null\n23:null\n24:null\n"])</script><script>self.__next_f.push([1,"25:[\"$\",\"div\",null,{\"className\":\"mb-8 flex flex-wrap items-center justify-between gap-3 border-b border-slate-200 pb-6\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex flex-wrap gap-2\",\"children\":[[\"$\",\"span\",\"AI\",{\"className\":\"rounded-md border border-slate-200 bg-white px-2.5 py-1 text-[12px] font-medium text-slate-600\",\"children\":[\"#\",\"AI\"]}],[\"$\",\"span\",\"编程\",{\"className\":\"rounded-md border border-slate-200 bg-white px-2.5 py-1 text-[12px] font-medium text-slate-600\",\"children\":[\"#\",\"编程\"]}],[\"$\",\"span\",\"前端\",{\"className\":\"rounded-md border border-slate-200 bg-white px-2.5 py-1 text-[12px] font-medium text-slate-600\",\"children\":[\"#\",\"前端\"]}],[\"$\",\"span\",\"安全\",{\"className\":\"rounded-md border border-slate-200 bg-white px-2.5 py-1 text-[12px] font-medium text-slate-600\",\"children\":[\"#\",\"安全\"]}],[\"$\",\"span\",\"产品\",{\"className\":\"rounded-md border border-slate-200 bg-white px-2.5 py-1 text-[12px] font-medium text-slate-600\",\"children\":[\"#\",\"产品\"]}]]}],[\"$\",\"a\",null,{\"className\":\"inline-flex items-center gap-2 rounded-md border border-slate-200 px-3 py-2 text-[13px] font-semibold text-slate-600 hover:border-cyan-200 hover:text-cyan-700\",\"href\":\"https://www.freecodecamp.org/news/how-to-build-a-real-time-word-counter-tool-with-html-css-and-javascript/\",\"rel\":\"noopener noreferrer\",\"target\":\"_blank\",\"children\":[\"打开原文\",[\"$\",\"$L29\",null,{\"ref\":\"$undefined\",\"iconNode\":[[\"path\",{\"d\":\"M15 3h6v6\",\"key\":\"1q9fwt\"}],[\"path\",{\"d\":\"M10 14 21 3\",\"key\":\"gplh6r\"}],[\"path\",{\"d\":\"M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6\",\"key\":\"a6xqqp\"}]],\"className\":\"lucide-external-link h-3.5 w-3.5\",\"aria-hidden\":\"true\"}]]}]]}]\n"])</script><script>self.__next_f.push([1,"26:[\"$\",\"div\",null,{\"children\":[[\"$\",\"h2\",\"h1-0\",{\"className\":\"mt-10 mb-3 text-[24px] font-bold leading-tight text-slate-950 scroll-mt-24\",\"children\":\"How to Build a Real-Time Word Counter Tool with HTML, CSS, and JavaScript\"}],[\"$\",\"p\",\"p-3\",{\"className\":\"my-4 text-[17px] leading-8 text-slate-800 break-words\",\"children\":[\"September 30, 2026\"]}],[\"$\",\"p\",\"p-5\",{\"className\":\"my-4 text-[17px] leading-8 text-slate-800 break-words\",\"children\":[\"/\"]}],[\"$\",\"p\",\"p-7\",{\"className\":\"my-4 text-[17px] leading-8 text-slate-800 break-words\",\"children\":[\"#JavaScript\"]}],[\"$\",\"p\",\"p-9\",{\"className\":\"my-4 text-[17px] leading-8 text-slate-800 break-words\",\"children\":[\"Bansidhar Kadiya\"]}],[\"$\",\"p\",\"p-11\",{\"className\":\"my-4 text-[17px] leading-8 text-slate-800 break-words\",\"children\":[\"Whether you're writing an essay, a tweet, or a blog post, keeping track of your word and character count is very important.\"]}],[\"$\",\"p\",\"p-13\",{\"className\":\"my-4 text-[17px] leading-8 text-slate-800 break-words\",\"children\":[\"In this tutorial, you'll build a fully functional, real-time Word Counter tool from scratch. You'll use HTML for the structure, CSS for a clean design, and vanilla JavaScript to handle the counting logic.\"]}],[\"$\",\"p\",\"p-15\",{\"className\":\"my-4 text-[17px] leading-8 text-slate-800 break-words\",\"children\":[\"Because this tool runs completely in the browser, it works instantly as you type and keeps your text data completely private.\"]}],[\"$\",\"p\",\"p-17\",{\"className\":\"my-4 text-[17px] leading-8 text-slate-800 break-words\",\"children\":[\"Let's get started.\"]}],[\"$\",\"h3\",\"h2-18\",{\"className\":\"mt-8 mb-2 text-[20px] font-bold leading-tight text-slate-950 scroll-mt-24\",\"children\":\"Prerequisites\"}],[\"$\",\"p\",\"p-21\",{\"className\":\"my-4 text-[17px] leading-8 text-slate-800 break-words\",\"children\":[\"To follow this guide easily, you should have:\"]}],[\"$\",\"ul\",\"ul-23\",{\"className\":\"my-4 list-disc space-y-2.5 pl-6 text-[17px] leading-8 text-slate-800 marker:text-slate-400\",\"children\":[[\"$\",\"li\",\"0\",{\"children\":[\"A basic understanding of HTML tags and CSS styling.\"]}]]}],[\"$\",\"ul\",\"ul-25\",{\"className\":\"my-4 list-disc space-y-2.5 pl-6 text-[17px] leading-8 text-slate-800 marker:text-slate-400\",\"children\":[[\"$\",\"li\",\"0\",{\"children\":[\"Familiarity with JavaScript concepts like functions, event listeners, and basic Regular Expressions (Regex).\"]}]]}],[\"$\",\"ul\",\"ul-27\",{\"className\":\"my-4 list-disc space-y-2.5 pl-6 text-[17px] leading-8 text-slate-800 marker:text-slate-400\",\"children\":[[\"$\",\"li\",\"0\",{\"children\":[\"A code editor (like VS Code) and a web browser.\"]}]]}],[\"$\",\"h3\",\"h2-28\",{\"className\":\"mt-8 mb-2 text-[20px] font-bold leading-tight text-slate-950 scroll-mt-24\",\"children\":\"Table of Contents\"}],[\"$\",\"ul\",\"ul-31\",{\"className\":\"my-4 list-disc space-y-2.5 pl-6 text-[17px] leading-8 text-slate-800 marker:text-slate-400\",\"children\":[[\"$\",\"li\",\"0\",{\"children\":[\"Step 1: Set Up Your Project\"]}]]}],[\"$\",\"ul\",\"ul-33\",{\"className\":\"my-4 list-disc space-y-2.5 pl-6 text-[17px] leading-8 text-slate-800 marker:text-slate-400\",\"children\":[[\"$\",\"li\",\"0\",{\"children\":[\"Step 2: Build the HTML Structure Understanding the HTML:\"]}]]}],[\"$\",\"ul\",\"ul-35\",{\"className\":\"my-4 list-disc space-y-2.5 pl-6 text-[17px] leading-8 text-slate-800 marker:text-slate-400\",\"children\":[[\"$\",\"li\",\"0\",{\"children\":[\"Step 3: Style the Tool with CSS Understanding the CSS:\"]}]]}],[\"$\",\"ul\",\"ul-37\",{\"className\":\"my-4 list-disc space-y-2.5 pl-6 text-[17px] leading-8 text-slate-800 marker:text-slate-400\",\"children\":[[\"$\",\"li\",\"0\",{\"children\":[\"Step 4: Add the JavaScript Logic Understanding the JavaScript:\"]}]]}],[\"$\",\"ul\",\"ul-39\",{\"className\":\"my-4 list-disc space-y-2.5 pl-6 text-[17px] leading-8 text-slate-800 marker:text-slate-400\",\"children\":[[\"$\",\"li\",\"0\",{\"children\":[\"Step 5: Test Your Application\"]}]]}],\"$L2a\",\"$L2b\",\"$L2c\",\"$L2d\",\"$L2e\",\"$L2f\",\"$L30\",\"$L31\",\"$L32\",\"$L33\",\"$L34\",\"$L35\",\"$L36\",\"$L37\",\"$L38\",\"$L39\",\"$L3a\",\"$L3b\",\"$L3c\",\"$L3d\",\"$L3e\",\"$L3f\",\"$L40\",\"$L41\",\"$L42\",\"$L43\",\"$L44\",\"$L45\",\"$L46\",\"$L47\",\"$L48\",\"$L49\",\"$L4a\",\"$L4b\",\"$L4c\",\"$L4d\",\"$L4e\",\"$L4f\",\"$L50\",\"$L51\",\"$L52\",\"$L53\",\"$L54\",\"$L55\",\"$L56\",\"$L57\",\"$L58\",\"$L59\",\"$L5a\",\"$L5b\",\"$L5c\"]}]\n"])</script><script>self.__next_f.push([1,"27:[\"$\",\"$L5d\",null,{\"articleId\":\"ad6a0ea4-243c-44fb-b8d2-ae2fe4b80592\"}]\n28:[\"$\",\"$L5e\",null,{\"article\":\"$1c:props:children:4:props:article\"}]\n"])</script><script>self.__next_f.push([1,"5f:I[91746,[\"1562\",\"static/chunks/ed027683-fb3d1010fb1dd056.js\",\"48\",\"static/chunks/48-081bd7173bc0d1b7.js\",\"299\",\"static/chunks/299-adffce14862fb047.js\",\"2659\",\"static/chunks/2659-e618985a38010c5a.js\",\"1312\",\"static/chunks/1312-59cbdfb1752d5335.js\",\"4137\",\"static/chunks/app/%5Blocale%5D/articles/%5Bid%5D/page-63996a2c334b7d86.js\"],\"CodeBlock\"]\n2a:[\"$\",\"h3\",\"h2-40\",{\"className\":\"mt-8 mb-2 text-[20px] font-bold leading-tight text-slate-950 scroll-mt-24\",\"children\":\"Step 1: Set Up Your Project\"}]\n2b:[\"$\",\"p\",\"p-43\",{\"className\":\"my-4 text-[17px] leading-8 text-slate-800 break-words\",\"children\":[\"First, you need to set up your workspace. Create a new folder on your computer and name it word-counter-app .\"]}]\n2c:[\"$\",\"p\",\"p-45\",{\"className\":\"my-4 text-[17px] leading-8 text-slate-800 break-words\",\"children\":[\"Inside this folder, create three empty files:\"]}]\n2d:[\"$\",\"ul\",\"ul-47\",{\"className\":\"my-4 list-disc space-y-2.5 pl-6 text-[17px] leading-8 text-slate-800 marker:text-slate-400\",\"children\":[[\"$\",\"li\",\"0\",{\"children\":[\"index.html\"]}]]}]\n2e:[\"$\",\"ul\",\"ul-49\",{\"className\":\"my-4 list-disc space-y-2.5 pl-6 text-[17px] leading-8 text-slate-800 marker:text-slate-400\",\"children\":[[\"$\",\"li\",\"0\",{\"children\":[\"style.css\"]}]]}]\n2f:[\"$\",\"ul\",\"ul-51\",{\"className\":\"my-4 list-disc space-y-2.5 pl-6 text-[17px] leading-8 text-slate-800 marker:text-slate-400\",\"children\":[[\"$\",\"li\",\"0\",{\"children\":[\"script.js\"]}]]}]\n30:[\"$\",\"h3\",\"h2-52\",{\"className\":\"mt-8 mb-2 text-[20px] font-bold leading-tight text-slate-950 scroll-mt-24\",\"children\":\"Step 2: Build the HTML Structure\"}]\n31:[\"$\",\"p\",\"p-55\",{\"className\":\"my-4 text-[17px] leading-8 text-slate-800 break-words\",\"children\":[\"Open your index.html file. You need to create a layout that includes a header, a grid to display the real-time statistics, a text area for the user to type in, and buttons to copy or clear the text.\"]}]\n32:[\"$\",\"p\",\"p-57\",{\"className\":\"my-4 text-[17px] leading-8 text-slate-800 break-words\",\"children\":[\"Add the following code into your HTML file:\"]}]\n60:T6c7,"])</script><script>self.__next_f.push([1,"\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n\u003chead\u003e\n \u003cmeta charset=\"UTF-8\"\u003e\n \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\u003e\n \u003ctitle\u003eWord Counter Tool\u003c/title\u003e\n \u003clink rel=\"stylesheet\" href=\"style.css\"\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n\n \u003cheader class=\"header-section\"\u003e\n \u003ch1\u003eWord Counter\u003c/h1\u003e\n \u003cp class=\"description\"\u003ePaste or type your text below to get a real-time count of words, characters, sentences, and paragraphs.\u003c/p\u003e\n \u003c/header\u003e\n\n \u003cmain class=\"tool-container\"\u003e\n \n \u003c!-- Statistics Panel --\u003e\n \u003cdiv class=\"stats-grid\"\u003e\n \u003cdiv class=\"stat-box\"\u003e\n \u003cdiv class=\"stat-value\" id=\"wordCount\"\u003e0\u003c/div\u003e\n \u003cdiv class=\"stat-label\"\u003eWords\u003c/div\u003e\n \u003c/div\u003e\n \u003cdiv class=\"stat-box\"\u003e\n \u003cdiv class=\"stat-value\" id=\"charCount\"\u003e0\u003c/div\u003e\n \u003cdiv class=\"stat-label\"\u003eCharacters\u003c/div\u003e\n \u003c/div\u003e\n \u003cdiv class=\"stat-box\"\u003e\n \u003cdiv class=\"stat-value\" id=\"sentenceCount\"\u003e0\u003c/div\u003e\n \u003cdiv class=\"stat-label\"\u003eSentences\u003c/div\u003e\n \u003c/div\u003e\n \u003cdiv class=\"stat-box\"\u003e\n \u003cdiv class=\"stat-value\" id=\"paragraphCount\"\u003e0\u003c/div\u003e\n \u003cdiv class=\"stat-label\"\u003eParagraphs\u003c/div\u003e\n \u003c/div\u003e\n \u003c/div\u003e\n\n \u003c!-- User Input Area --\u003e\n \u003ctextarea id=\"textInput\" placeholder=\"Start typing or paste your text here...\"\u003e\u003c/textarea\u003e\n\n \u003c!-- Action Buttons --\u003e\n \u003cdiv class=\"controls\"\u003e\n \u003cbutton class=\"btn-primary\" onclick=\"copyText()\" id=\"copyBtn\"\u003eCopy Text\u003c/button\u003e\n \u003cbutton class=\"btn-secondary\" onclick=\"clearText()\"\u003eClear\u003c/button\u003e\n \u003c/div\u003e\n\n \u003c/main\u003e\n\n \u003cscript src=\"script.js\"\u003e\u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e"])</script><script>self.__next_f.push([1,"61:T6c7,"])</script><script>self.__next_f.push([1,"\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n\u003chead\u003e\n \u003cmeta charset=\"UTF-8\"\u003e\n \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\u003e\n \u003ctitle\u003eWord Counter Tool\u003c/title\u003e\n \u003clink rel=\"stylesheet\" href=\"style.css\"\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n\n \u003cheader class=\"header-section\"\u003e\n \u003ch1\u003eWord Counter\u003c/h1\u003e\n \u003cp class=\"description\"\u003ePaste or type your text below to get a real-time count of words, characters, sentences, and paragraphs.\u003c/p\u003e\n \u003c/header\u003e\n\n \u003cmain class=\"tool-container\"\u003e\n \n \u003c!-- Statistics Panel --\u003e\n \u003cdiv class=\"stats-grid\"\u003e\n \u003cdiv class=\"stat-box\"\u003e\n \u003cdiv class=\"stat-value\" id=\"wordCount\"\u003e0\u003c/div\u003e\n \u003cdiv class=\"stat-label\"\u003eWords\u003c/div\u003e\n \u003c/div\u003e\n \u003cdiv class=\"stat-box\"\u003e\n \u003cdiv class=\"stat-value\" id=\"charCount\"\u003e0\u003c/div\u003e\n \u003cdiv class=\"stat-label\"\u003eCharacters\u003c/div\u003e\n \u003c/div\u003e\n \u003cdiv class=\"stat-box\"\u003e\n \u003cdiv class=\"stat-value\" id=\"sentenceCount\"\u003e0\u003c/div\u003e\n \u003cdiv class=\"stat-label\"\u003eSentences\u003c/div\u003e\n \u003c/div\u003e\n \u003cdiv class=\"stat-box\"\u003e\n \u003cdiv class=\"stat-value\" id=\"paragraphCount\"\u003e0\u003c/div\u003e\n \u003cdiv class=\"stat-label\"\u003eParagraphs\u003c/div\u003e\n \u003c/div\u003e\n \u003c/div\u003e\n\n \u003c!-- User Input Area --\u003e\n \u003ctextarea id=\"textInput\" placeholder=\"Start typing or paste your text here...\"\u003e\u003c/textarea\u003e\n\n \u003c!-- Action Buttons --\u003e\n \u003cdiv class=\"controls\"\u003e\n \u003cbutton class=\"btn-primary\" onclick=\"copyText()\" id=\"copyBtn\"\u003eCopy Text\u003c/button\u003e\n \u003cbutton class=\"btn-secondary\" onclick=\"clearText()\"\u003eClear\u003c/button\u003e\n \u003c/div\u003e\n\n \u003c/main\u003e\n\n \u003cscript src=\"script.js\"\u003e\u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e"])</script><script>self.__next_f.push([1,"33:[\"$\",\"$L5f\",\"code-110\",{\"code\":\"$60\",\"lang\":\"$undefined\",\"children\":\"$61\"}]\n34:[\"$\",\"p\",\"p-113\",{\"className\":\"my-4 text-[17px] leading-8 text-slate-800 break-words\",\"children\":[\"Understanding the HTML:\"]}]\n35:[\"$\",\"ul\",\"ul-115\",{\"className\":\"my-4 list-disc space-y-2.5 pl-6 text-[17px] leading-8 text-slate-800 marker:text-slate-400\",\"children\":[[\"$\",\"li\",\"0\",{\"children\":[\"The .stats-grid : This holds four separate boxes to show the counts. Each number has a unique id (like wordCount ) so JavaScript can find and update it easily.\"]}]]}]\n36:[\"$\",\"ul\",\"ul-117\",{\"className\":\"my-4 list-disc space-y-2.5 pl-6 text-[17px] leading-8 text-slate-800 marker:text-slate-400\",\"children\":[[\"$\",\"li\",\"0\",{\"children\":[\"The \u003ctextarea\u003e : This is the main input box where users will type or paste their content.\"]}]]}]\n37:[\"$\",\"ul\",\"ul-119\",{\"className\":\"my-4 list-disc space-y-2.5 pl-6 text-[17px] leading-8 text-slate-800 marker:text-slate-400\",\"children\":[[\"$\",\"li\",\"0\",{\"children\":[\"The \u003cscript\u003e tag: This connects your HTML to the logic you will write in the next steps.\"]}]]}]\n38:[\"$\",\"h3\",\"h2-120\",{\"className\":\"mt-8 mb-2 text-[20px] font-bold leading-tight text-slate-950 scroll-mt-24\",\"children\":\"Step 3: Style the Tool with CSS\"}]\n39:[\"$\",\"p\",\"p-123\",{\"className\":\"my-4 text-[17px] leading-8 text-slate-800 break-words\",\"children\":[\"Next, you'll give your tool a modern, professional look. You'll use CSS Grid to align the statistics boxes perfectly.\"]}]\n3a:[\"$\",\"p\",\"p-125\",{\"className\":\"my-4 text-[17px] leading-8 text-slate-800 break-words\",\"children\":[\"Open your style.css file and add this code:\"]}]\n62:T9fe,"])</script><script>self.__next_f.push([1,":root {\n --primary-color: #007bff;\n --bg-color: #f8f9fa;\n --text-dark: #202124;\n --text-muted: #5f6368;\n --border-color: #dadce0;\n --panel-bg: #ffffff;\n}\n\nbody {\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n background-color: var(--bg-color);\n color: var(--text-dark);\n margin: 0;\n padding: 40px 20px;\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n\n.header-section {\n text-align: center;\n margin-bottom: 30px;\n}\n\nh1 {\n font-size: 2.5rem;\n margin: 0 0 10px 0;\n font-weight: 800;\n}\n\np.description {\n color: var(--text-muted);\n max-width: 600px;\n margin: 0 auto;\n line-height: 1.6;\n font-size: 1.1rem;\n}\n\n.tool-container {\n background-color: var(--panel-bg);\n border: 1px solid var(--border-color);\n border-radius: 12px;\n padding: 24px;\n width: 100%;\n max-width: 900px;\n box-shadow: 0 4px 12px rgba(0,0,0,0.05);\n}\n\n/* Stats Grid */\n.stats-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));\n gap: 16px;\n margin-bottom: 24px;\n}\n\n.stat-box {\n background-color: var(--bg-color);\n border: 1px solid var(--border-color);\n border-radius: 8px;\n padding: 16px;\n text-align: center;\n}\n\n.stat-value {\n font-size: 2rem;\n font-weight: 700;\n color: var(--primary-color);\n margin-bottom: 4px;\n}\n\n.stat-label {\n font-size: 0.9rem;\n color: var(--text-muted);\n text-transform: uppercase;\n letter-spacing: 0.5px;\n font-weight: 600;\n}\n\n/* Text Area */\ntextarea {\n width: 100%;\n height: 250px;\n padding: 16px;\n border: 1px solid var(--border-color);\n border-radius: 8px;\n font-size: 1rem;\n line-height: 1.6;\n resize: vertical;\n box-sizing: border-box;\n font-family: inherit;\n margin-bottom: 20px;\n transition: border-color 0.2s ease;\n}\n\ntextarea:focus {\n outline: none;\n border-color: var(--primary-color);\n}\n\n/* Buttons */\n.controls {\n display: flex;\n gap: 12px;\n}\n\nbutton {\n padding: 10px 20px;\n font-size: 1rem;\n font-weight: 600;\n border-radius: 6px;\n cursor: pointer;\n border: none;\n transition: background-color 0.2s ease;\n}\n\n.btn-primary {\n background-color: var(--primary-color);\n color: #ffffff;\n}\n\n.btn-primary:hover {\n background-color: #0056b3;\n}\n\n.btn-secondary {\n background-color: transparent;\n color: var(--text-dark);\n border: 1px solid var(--border-color);\n}\n\n.btn-secondary:hover {\n background-color: var(--bg-color);\n}"])</script><script>self.__next_f.push([1,"63:T9fe,"])</script><script>self.__next_f.push([1,":root {\n --primary-color: #007bff;\n --bg-color: #f8f9fa;\n --text-dark: #202124;\n --text-muted: #5f6368;\n --border-color: #dadce0;\n --panel-bg: #ffffff;\n}\n\nbody {\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n background-color: var(--bg-color);\n color: var(--text-dark);\n margin: 0;\n padding: 40px 20px;\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n\n.header-section {\n text-align: center;\n margin-bottom: 30px;\n}\n\nh1 {\n font-size: 2.5rem;\n margin: 0 0 10px 0;\n font-weight: 800;\n}\n\np.description {\n color: var(--text-muted);\n max-width: 600px;\n margin: 0 auto;\n line-height: 1.6;\n font-size: 1.1rem;\n}\n\n.tool-container {\n background-color: var(--panel-bg);\n border: 1px solid var(--border-color);\n border-radius: 12px;\n padding: 24px;\n width: 100%;\n max-width: 900px;\n box-shadow: 0 4px 12px rgba(0,0,0,0.05);\n}\n\n/* Stats Grid */\n.stats-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));\n gap: 16px;\n margin-bottom: 24px;\n}\n\n.stat-box {\n background-color: var(--bg-color);\n border: 1px solid var(--border-color);\n border-radius: 8px;\n padding: 16px;\n text-align: center;\n}\n\n.stat-value {\n font-size: 2rem;\n font-weight: 700;\n color: var(--primary-color);\n margin-bottom: 4px;\n}\n\n.stat-label {\n font-size: 0.9rem;\n color: var(--text-muted);\n text-transform: uppercase;\n letter-spacing: 0.5px;\n font-weight: 600;\n}\n\n/* Text Area */\ntextarea {\n width: 100%;\n height: 250px;\n padding: 16px;\n border: 1px solid var(--border-color);\n border-radius: 8px;\n font-size: 1rem;\n line-height: 1.6;\n resize: vertical;\n box-sizing: border-box;\n font-family: inherit;\n margin-bottom: 20px;\n transition: border-color 0.2s ease;\n}\n\ntextarea:focus {\n outline: none;\n border-color: var(--primary-color);\n}\n\n/* Buttons */\n.controls {\n display: flex;\n gap: 12px;\n}\n\nbutton {\n padding: 10px 20px;\n font-size: 1rem;\n font-weight: 600;\n border-radius: 6px;\n cursor: pointer;\n border: none;\n transition: background-color 0.2s ease;\n}\n\n.btn-primary {\n background-color: var(--primary-color);\n color: #ffffff;\n}\n\n.btn-primary:hover {\n background-color: #0056b3;\n}\n\n.btn-secondary {\n background-color: transparent;\n color: var(--text-dark);\n border: 1px solid var(--border-color);\n}\n\n.btn-secondary:hover {\n background-color: var(--bg-color);\n}"])</script><script>self.__next_f.push([1,"3b:[\"$\",\"$L5f\",\"code-262\",{\"code\":\"$62\",\"lang\":\"$undefined\",\"children\":\"$63\"}]\n3c:[\"$\",\"p\",\"p-265\",{\"className\":\"my-4 text-[17px] leading-8 text-slate-800 break-words\",\"children\":[\"Understanding the CSS:\"]}]\n3d:[\"$\",\"ul\",\"ul-267\",{\"className\":\"my-4 list-disc space-y-2.5 pl-6 text-[17px] leading-8 text-slate-800 marker:text-slate-400\",\"children\":[[\"$\",\"li\",\"0\",{\"children\":[\"CSS Grid: The .stats-grid class uses grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); . This makes the four stat boxes automatically stack neatly on top of each other if a user views the tool on a small mobile screen.\"]}]]}]\n3e:[\"$\",\"ul\",\"ul-269\",{\"className\":\"my-4 list-disc space-y-2.5 pl-6 text-[17px] leading-8 text-slate-800 marker:text-slate-400\",\"children\":[[\"$\",\"li\",\"0\",{\"children\":[\"CSS Variables: Using :root at the top allows you to quickly change the brand color later if you want to use something other than the default blue ( #007bff ).\"]}]]}]\n3f:[\"$\",\"p\",\"p-271\",{\"className\":\"my-4 text-[17px] leading-8 text-slate-800 break-words\",\"children\":[\"At this point, the visual design of your tool is complete. Here's what the final Word Counter will look like in your browser:\"]}]\n40:[\"$\",\"h3\",\"h2-272\",{\"className\":\"mt-8 mb-2 text-[20px] font-bold leading-tight text-slate-950 scroll-mt-24\",\"children\":\"Step 4: Add the JavaScript Logic\"}]\n41:[\"$\",\"p\",\"p-275\",{\"className\":\"my-4 text-[17px] leading-8 text-slate-800 break-words\",\"children\":[\"Now you need to make the tool count the text. You'll use an event listener that watches every keystroke. Every time the user types, it recalculates the words, characters, sentences, and paragraphs.\"]}]\n42:[\"$\",\"p\",\"p-277\",{\"className\":\"my-4 text-[17px] leading-8 text-slate-800 break-words\",\"children\":[\"Open your script.js file and paste this code:\"]}]\n64:T610,"])</script><script>self.__next_f.push([1,"const textInput = document.getElementById('textInput');\nconst wordCountDisplay = document.getElementById('wordCount');\nconst charCountDisplay = document.getElementById('charCount');\nconst sentenceCountDisplay = document.getElementById('sentenceCount');\nconst paragraphCountDisplay = document.getElementById('paragraphCount');\nconst copyBtn = document.getElementById('copyBtn');\n\n// 1. Listen for user input in real-time\ntextInput.addEventListener('input', updateStatistics);\n\n// 2. The Core Counting Logic\nfunction updateStatistics() {\n const text = textInput.value;\n\n // Character Count (includes spaces)\n charCountDisplay.textContent = text.length;\n\n // Word Count\n const words = text.match(/\\S+/g) || [];\n wordCountDisplay.textContent = words.length;\n\n // Sentence Count\n const sentences = text.split(/[.!?]+(?=\\s|$)/).filter(sentence =\u003e sentence.trim().length \u003e 0);\n sentenceCountDisplay.textContent = sentences.length;\n\n // Paragraph Count\n const paragraphs = text.split(/\\n+/).filter(paragraph =\u003e paragraph.trim().length \u003e 0);\n paragraphCountDisplay.textContent = paragraphs.length;\n}\n\n// 3. Copy functionality\nfunction copyText() {\n if (!textInput.value) return;\n \n textInput.select();\n document.execCommand('copy');\n \n // Provide visual feedback\n copyBtn.textContent = 'Copied!';\n setTimeout(() =\u003e {\n copyBtn.textContent = 'Copy Text';\n }, 1500);\n}\n\n// 4. Clear functionality\nfunction clearText() {\n textInput.value = '';\n updateStatistics(); // Reset counts to zero\n}"])</script><script>self.__next_f.push([1,"65:T610,"])</script><script>self.__next_f.push([1,"const textInput = document.getElementById('textInput');\nconst wordCountDisplay = document.getElementById('wordCount');\nconst charCountDisplay = document.getElementById('charCount');\nconst sentenceCountDisplay = document.getElementById('sentenceCount');\nconst paragraphCountDisplay = document.getElementById('paragraphCount');\nconst copyBtn = document.getElementById('copyBtn');\n\n// 1. Listen for user input in real-time\ntextInput.addEventListener('input', updateStatistics);\n\n// 2. The Core Counting Logic\nfunction updateStatistics() {\n const text = textInput.value;\n\n // Character Count (includes spaces)\n charCountDisplay.textContent = text.length;\n\n // Word Count\n const words = text.match(/\\S+/g) || [];\n wordCountDisplay.textContent = words.length;\n\n // Sentence Count\n const sentences = text.split(/[.!?]+(?=\\s|$)/).filter(sentence =\u003e sentence.trim().length \u003e 0);\n sentenceCountDisplay.textContent = sentences.length;\n\n // Paragraph Count\n const paragraphs = text.split(/\\n+/).filter(paragraph =\u003e paragraph.trim().length \u003e 0);\n paragraphCountDisplay.textContent = paragraphs.length;\n}\n\n// 3. Copy functionality\nfunction copyText() {\n if (!textInput.value) return;\n \n textInput.select();\n document.execCommand('copy');\n \n // Provide visual feedback\n copyBtn.textContent = 'Copied!';\n setTimeout(() =\u003e {\n copyBtn.textContent = 'Copy Text';\n }, 1500);\n}\n\n// 4. Clear functionality\nfunction clearText() {\n textInput.value = '';\n updateStatistics(); // Reset counts to zero\n}"])</script><script>self.__next_f.push([1,"43:[\"$\",\"$L5f\",\"code-328\",{\"code\":\"$64\",\"lang\":\"$undefined\",\"children\":\"$65\"}]\n44:[\"$\",\"p\",\"p-331\",{\"className\":\"my-4 text-[17px] leading-8 text-slate-800 break-words\",\"children\":[\"Understanding the JavaScript:\"]}]\n45:[\"$\",\"ul\",\"ul-333\",{\"className\":\"my-4 list-disc space-y-2.5 pl-6 text-[17px] leading-8 text-slate-800 marker:text-slate-400\",\"children\":[[\"$\",\"li\",\"0\",{\"children\":[\"The input Event: textInput.addEventListener('input', ...) is the secret to real-time updates. It triggers the counting function the exact moment a key is pressed or text is pasted.\"]}]]}]\n46:[\"$\",\"ul\",\"ul-335\",{\"className\":\"my-4 list-disc space-y-2.5 pl-6 text-[17px] leading-8 text-slate-800 marker:text-slate-400\",\"children\":[[\"$\",\"li\",\"0\",{\"children\":[\"Counting Words: text.match(/\\\\S+/g) is a Regular Expression that looks for unbroken strings of non-whitespace characters. This is much more accurate than just splitting the text by spaces, because it ignores extra empty spaces left by mistake.\"]}]]}]\n47:[\"$\",\"ul\",\"ul-337\",{\"className\":\"my-4 list-disc space-y-2.5 pl-6 text-[17px] leading-8 text-slate-800 marker:text-slate-400\",\"children\":[[\"$\",\"li\",\"0\",{\"children\":[\"Counting Sentences: The .split(/[.!?]+(?=\\\\s|$)/) logic cuts the text into pieces every time it sees a period, exclamation mark, or question mark followed by a space.\"]}]]}]\n48:[\"$\",\"h3\",\"h2-338\",{\"className\":\"mt-8 mb-2 text-[20px] font-bold leading-tight text-slate-950 scroll-mt-24\",\"children\":\"Step 5: Test Your Application\"}]\n49:[\"$\",\"p\",\"p-341\",{\"className\":\"my-4 text-[17px] leading-8 text-slate-800 break-words\",\"children\":[\"You're completely done coding! Now it's time to verify that your logic works correctly.\"]}]\n4a:[\"$\",\"ul\",\"ul-343\",{\"className\":\"my-4 list-disc space-y-2.5 pl-6 text-[17px] leading-8 text-slate-800 marker:text-slate-400\",\"children\":[[\"$\",\"li\",\"0\",{\"children\":[\"Open your word-counter-app folder.\"]}]]}]\n4b:[\"$\",\"ul\",\"ul-345\",{\"className\":\"my-4 list-disc space-y-2.5 pl-6 text-[17px] leading-8 text-slate-800 marker:text-slate-400\",\"children\":[[\"$\",\"li\",\"0\",{\"children\":[\"Double-click the index.html file to open it in your web browser.\"]}]]}]\n4c:[\"$\",\"ul\",\"ul-347\",{\"className\":\"my-4 list-disc space-y-2.5 pl-6 text-[17px] leading-8 text-slate-800 marker:text-slate-400\",\"children\":[[\"$\",\"li\",\"0\",{\"children\":[\"Type a few sentences into the text area. Watch the numbers at the top update instantly.\"]}]]}]\n4d:[\"$\",\"ul\",\"ul-349\",{\"className\":\"my-4 list-disc space-y-2.5 pl-6 text-[17px] leading-8 text-slate-800 marker:text-slate-400\",\"children\":[[\"$\",\"li\",\"0\",{\"children\":[\"Try adding double spaces or hitting the \\\"Enter\\\" key to make new paragraphs, and ensure the logic counts them accurately.\"]}]]}]\n4e:[\"$\",\"ul\",\"ul-351\",{\"className\":\"my-4 list-disc space-y-2.5 pl-6 text-[17px] leading-8 text-slate-800 marker:text-slate-400\",\"children\":[[\"$\",\"li\",\"0\",{\"children\":[\"Click Copy Text to test the clipboard feature, and Clear to reset the board.\"]}]]}]\n4f:[\"$\",\"p\",\"p-353\",{\"className\":\"my-4 text-[17px] leading-8 text-slate-800 break-words\",\"children\":[\"By completing this project, you've built a fast, client-side utility tool using pure vanilla JavaScript. You learned how to manipulate strings, use Regular Expressions for text analysis, and create responsive UI grids.\"]}]\n50:[\"$\",\"p\",\"p-355\",{\"className\":\"my-4 text-[17px] leading-8 text-slate-800 break-words\",\"children\":[\"If you want to see this exact codebase running in a live production environment, you can try out this Online Word Counter . Keep building, and happy coding!\"]}]\n51:[\"$\",\"p\",\"p-357\",{\"className\":\"my-4 text-[17px] leading-8 text-slate-800 break-words\",\"children\":[\"Recommended courses from our partners\"]}]\n52:[\"$\",\"p\",\"p-359\",{\"className\":\"my-4 text-[17px] leading-8 text-slate-800 break-words\",\"children\":[\"(opens in a new tab)\"]}]\n53:[\"$\",\"p\",\"p-361\",{\"className\":\"my-4 text-[17px] leading-8 text-slate-800 break-words\",\"children\":[\"ADVERTISEMENT\"]}]\n54:[\"$\",\"ul\",\"ul-363\",{\"className\":\"my-4 list-disc space-y-2.5 pl-6 text-[17px] leading-8 text-slate-800 marker:text-slate-400\",\"children\":[[\"$\",\"li\",\"0\",{\"children\":[\"On U"])</script><script>self.__next_f.push([1,"demy HTML, CSS, JavaScript, React - Online Certification Course YouAccel Training and Blue Digital Media 4.4 out of 5 stars (1,161) from 1,161 ratings 15h 48m 15 hours 48 minutes Beginner Certificate View course (opens in a new tab)\"]}]]}]\n55:[\"$\",\"ul\",\"ul-365\",{\"className\":\"my-4 list-disc space-y-2.5 pl-6 text-[17px] leading-8 text-slate-800 marker:text-slate-400\",\"children\":[[\"$\",\"li\",\"0\",{\"children\":[\"On Coursera React Beginner Project: Build a Color Picker Tool James Q Quick 1h 50m 1 hour 50 minutes Intermediate Certificate View course (opens in a new tab)\"]}]]}]\n56:[\"$\",\"ul\",\"ul-367\",{\"className\":\"my-4 list-disc space-y-2.5 pl-6 text-[17px] leading-8 text-slate-800 marker:text-slate-400\",\"children\":[[\"$\",\"li\",\"0\",{\"children\":[\"On Udemy Complete FrontEnd Web Development and Design HTML CSS JS Laurence Svekis 4.5 out of 5 stars (1,108) from 1,108 ratings 22h 10m 22 hours 10 minutes Beginner Certificate View course (opens in a new tab)\"]}]]}]\n57:[\"$\",\"ul\",\"ul-369\",{\"className\":\"my-4 list-disc space-y-2.5 pl-6 text-[17px] leading-8 text-slate-800 marker:text-slate-400\",\"children\":[[\"$\",\"li\",\"0\",{\"children\":[\"On Skillshare Code your own portfolio – HTML \u0026 CSS basics Aga Naplocha 4.5 out of 5 stars (188) from 188 ratings 3h 2m 3 hours 2 minutes Beginner View course (opens in a new tab)\"]}]]}]\n58:[\"$\",\"p\",\"p-371\",{\"className\":\"my-4 text-[17px] leading-8 text-slate-800 break-words\",\"children\":[\"More HTML \u0026 CSS courses on Class Central\"]}]\n59:[\"$\",\"p\",\"p-373\",{\"className\":\"my-4 text-[17px] leading-8 text-slate-800 break-words\",\"children\":[\"→\"]}]\n5a:[\"$\",\"p\",\"p-375\",{\"className\":\"my-4 text-[17px] leading-8 text-slate-800 break-words\",\"children\":[\"Bansidhar Kadiya is a WordPress Developer and SEO specialist focused on building fast, practical web experiences. He is the creator of 99tools.net, a growing collection of free browser-based utilities designed to help developers, creators, and everyday users complete common tasks quickly and efficiently.\"]}]\n5b:[\"$\",\"p\",\"p-377\",{\"className\":\"my-4 text-[17px] leading-8 text-slate-800 break-words\",\"children\":[\"If you read this far, thank the author to show them you care. Say Thanks\"]}]\n5c:[\"$\",\"p\",\"p-379\",{\"className\":\"my-4 text-[17px] leading-8 text-slate-800 break-words\",\"children\":[\"Learn to code for free. freeCodeCamp's open source curriculum has helped more than 40,000 people get jobs as developers. Get started\"]}]\n"])</script></body></html>