کاربران گرامی در این پروژه به شما پروژه کاربردی با جاوا اسکریپت را قرارداده ایم شما عزیزان می توانید از بخش دانلود پروژه کاربردی با جاوااسکریپت سایر پروژه هایی که با جاوا اسکریپت طراحی شده اند را مشاهده و دانلود کنید.
در صورتی که نیاز به آموزش حضوری و یا غیر حضوری این پروژه داشتید میتوانید با ما در ارتباط باشید تا این پروژه را به شما آموزش دهیم حتی میتوانید در صورت دلخواه پروژه را به خواسته شما شخصی سازی کنیم لازم به ذکر است که تیم پروژه در صفحه دانلود پروژه کاربردی پروژه های مختلفی را به زبان های مختلف برنامه نویسی قرار داده است .شماره تماس با پرپروژه 09050394455 می باشد
در اینجا یک پروژه ساده برای شمارش کلمات (Word Counter) با استفاده از HTML، CSS و JavaScript ارائه شده است. این برنامه به کاربران اجازه می‌دهد تا متن خود را وارد کنند و تعداد کلمات موجود در آن را مشاهده کنند.
### 1. **HTML**
ابتدا ساختار HTML را برای برنامه شمارش کلمات ایجاد می‌کنیم.
```html
شمارش کلمات
```
### 2. **CSS**
برای طراحی ظاهری برنامه شمارش کلمات از CSS استفاده می‌کنیم.
```css
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.container {
background-color: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
width: 400px;
text-align: center;
}
h1 {
margin-bottom: 20px;
}
textarea {
width: 100%;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
button {
padding: 10px 15px;
font-size: 16px;
cursor: pointer;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
}
.result {
margin-top: 20px;
font-size: 20px;
font-weight: bold;
color: #333;
}
```
### 3. **JavaScript**
سپس منطق برنامه را با JavaScript پیاده‌سازی می‌کنیم. این بخش شامل دریافت متن و شمارش کلمات موجود در آن است.
```javascript
// انتخاب عناصر HTML
const textInput = document.getElementById('textInput');
const countWordsBtn = document.getElementById('countWordsBtn');
const resultDiv = document.getElementById('result');
// افزودن رویداد کلیک به دکمه
countWordsBtn.addEventListener('click', function() {
const text = textInput.value.trim();
// بررسی متن خالی
if (text === "") {
resultDiv.textContent = 'لطفاً متنی وارد کنید.';
return;
}
// شمارش کلمات
const words = text.split(/\s+/); // تقسیم متن بر اساس فضای خالی
const wordCount = words.length;
// نمایش تعداد کلمات
resultDiv.textContent = `تعداد کلمات: ${wordCount}`;
});
```
### توضیحات کد:
1. **HTML**: شامل عنوان برنامه، ناحیه ورودی برای متن، دکمه‌ای برای شمارش کلمات و محلی برای نمایش نتیجه است.
2. **CSS**: طراحی ساده برای ایجاد یک رابط کاربری زیبا و کاربرپسند.
3. **JavaScript**:
- **انتخاب عناصر HTML**: انتخاب ناحیه ورودی متن، دکمه شمارش و بخش نمایش نتیجه.
- **تابع شمارش کلمات**: با کلیک بر روی دکمه، متن ورودی بررسی می‌شود و تعداد کلمات موجود در آن نمایش داده می‌شود.
### نتیجه‌گیری
این پروژه **شمارش کلمات** یک مثال ساده برای استفاده از JavaScript در دستکاری متن و کار با رویدادهای کاربر است. شما میتوانید این پروژه را گسترش دهید و ویژگی‌های بیشتری مانند شمارش کاراکترها یا جملات اضافه کنید. از کدنویسی لذت ببرید!
| صفحه قابل مشاهده:
دانلود پروژه کاربردی ساده برای شمارش کلمات (Word Counter) با استفاده از HTML، CSS و JavaScript می‌باشد
