کاربران گرامی در این پروژه به شما پروژه کاربردی با جاوا اسکریپت را قرارداده ایم شما عزیزان می توانید از بخش دانلود پروژه کاربردی با جاوااسکریپت سایر پروژه هایی که با جاوا اسکریپت طراحی شده اند را مشاهده و دانلود کنید.
در صورتی که نیاز به آموزش حضوری و یا غیر حضوری این پروژه داشتید میتوانید با ما در ارتباط باشید تا این پروژه را به شما آموزش دهیم حتی میتوانید در صورت دلخواه پروژه را به خواسته شما شخصی سازی کنیم لازم به ذکر است که تیم پروژه در صفحه دانلود پروژه کاربردی پروژه های مختلفی را به زبان های مختلف برنامه نویسی قرار داده است .شماره تماس با پرپروژه 09050394455 می باشد
در اینجا یک پروژه ساده برای ایجاد یک **آزمون سرعت تایپ** (Typing Speed Tester) با استفاده از 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: 80%;
max-width: 600px;
text-align: center;
}
h1 {
margin-bottom: 20px;
}
#text-to-type {
margin-bottom: 20px;
font-size: 20px;
color: #333;
}
textarea {
width: 100%;
height: 100px;
font-size: 18px;
margin-bottom: 20px;
border-radius: 5px;
border: 1px solid #ccc;
}
.result {
margin-top: 20px;
}
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
}
p {
font-size: 18px;
font-weight: bold;
}
```
### 3. **JavaScript**
سپس منطق آزمون را با JavaScript پیاده‌سازی می‌کنیم.
```javascript
const textToType = "این یک متن آزمایشی برای آزمون سرعت تایپ است. سعی کنید آن را با دقت تایپ کنید.";
const userInput = document.getElementById('user-input');
const textDisplay = document.getElementById('text-to-type');
const startBtn = document.getElementById('start-btn');
const timeLeftDisplay = document.getElementById('time-left');
const wpmDisplay = document.getElementById('wpm');
let timeLeft = 60; // زمان آزمون به ثانیه
let timer; // برای تایمر
// نمایش متن برای تایپ
textDisplay.textContent = textToType;
// تابع شروع آزمون
function startTest() {
userInput.value = ''; // پاک کردن ورودی کاربر
userInput.disabled = false; // فعال کردن ورودی کاربر
userInput.focus(); // تمرکز روی ورودی کاربر
timeLeftDisplay.textContent = `زمان باقی‌مانده: ${timeLeft} ثانیه`;
wpmDisplay.textContent = ''; // پاک کردن نمایش WPM
clearInterval(timer); // پاک کردن تایمر قبلی
timeLeft = 60; // بازنشانی زمان
startTimer(); // شروع تایمر
}
// تابع شروع تایمر
function startTimer() {
timer = setInterval(() => {
if (timeLeft > 0) {
timeLeft--;
timeLeftDisplay.textContent = `زمان باقی‌مانده: ${timeLeft} ثانیه`;
} else {
clearInterval(timer); // توقف تایمر
endTest(); // پایان آزمون
}
}, 1000);
}
// تابع پایان آزمون
function endTest() {
userInput.disabled = true; // غیرفعال کردن ورودی کاربر
const typedText = userInput.value.trim(); // متن تایپ شده
const wordCount = typedText.split(/\s+/).filter(word => word.length > 0).length; // تعداد کلمات تایپ شده
const wpm = Math.round((wordCount / 1) * (60 / timeLeft)); // محاسبه WPM
wpmDisplay.textContent = `سرعت تایپ شما: ${wpm} کلمه در دقیقه`;
}
// افزودن رویداد کلیک به دکمه شروع
startBtn.addEventListener('click', startTest);
```
### توضیحات کد:
1. **HTML**: شامل عنوان آزمون، متن برای تایپ، ورودی متن، دکمه شروع و نمایش زمان و سرعت تایپ است.
2. **CSS**: طراحی ساده برای ایجاد یک رابط کاربری زیبا و کاربرپسند.
3. **JavaScript**:
- **متن برای تایپ**: یک متن آزمایشی برای تایپ نمایش داده می‌شود.
- **زمان آزمون**: زمان آزمون 60 ثانیه است و با شروع آزمون شمارش معکوس آغاز می‌شود.
- **محاسبه سرعت تایپ**: پس از پایان آزمون، تعداد کلمات تایپ شده محاسبه شده و سرعت تایپ کاربر به کلمات در دقیقه (WPM) نمایش داده می‌شود.
### نتیجه‌گیری
این پروژه **آزمون سرعت تایپ** یک مثال عالی برای استفاده از مفاهیم JavaScript، HTML و CSS است. شما میتوانید این پروژه را گسترش دهید و ویژگی‌های بیشتری مانند نمایش دقت، تنظیم زمان آزمون یا افزودن متن‌های مختلف برای تایپ اضافه کنید. از کدنویسی لذت ببرید!
| صفحه قابل مشاهده:
دانلود پروژه کاربردی **آزمون سرعت تایپ** (Typing Speed Tester) با استفاده از HTML، CSS و JavaScript می‌باشد
