کاربران گرامی در این پروژه به شما پروژه کاربردی با جاوا اسکریپت را قرارداده ایم شما عزیزان می توانید از بخش دانلود پروژه کاربردی با جاوااسکریپت سایر پروژه هایی که با جاوا اسکریپت طراحی شده اند را مشاهده و دانلود کنید.
در صورتی که نیاز به آموزش حضوری و یا غیر حضوری این پروژه داشتید میتوانید با ما در ارتباط باشید تا این پروژه را به شما آموزش دهیم حتی میتوانید در صورت دلخواه پروژه را به خواسته شما شخصی سازی کنیم لازم به ذکر است که تیم پروژه در صفحه دانلود پروژه کاربردی پروژه های مختلفی را به زبان های مختلف برنامه نویسی قرار داده است .شماره تماس با پرپروژه 09050394455 می باشد
در اینجا یک پروژه ساده برای ایجاد **تولیدکننده نقل‌قول (Quote Generator)** با استفاده از 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);
text-align: center;
max-width: 400px;
width: 80%;
}
h1 {
margin-bottom: 20px;
}
.quote {
font-size: 20px;
font-style: italic;
color: #555;
margin-bottom: 20px;
}
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
}
```
### 3. **JavaScript**
سپس منطق برنامه را با JavaScript پیاده‌سازی می‌کنیم. این بخش نقل‌قول‌های تصادفی را از یک آرایه از نقل‌قول‌ها انتخاب می‌کند.
```javascript
// آرایه‌ای از نقل‌قول‌ها
const quotes = [
"زندگی همان چیزی است که وقتی درگیر برنامه‌ریزی چیزهای دیگر هستید، اتفاق می‌افتد. - جان لنون",
"موفقیت یعنی رفتن از شکستی به شکست دیگر بدون از دست دادن اشتیاق. - وینستون چرچیل",
"من موفقیت را براساس تعداد موفقیت‌هایم اندازه نمی‌گیرم، بلکه بر اساس تعداد دفعاتی که زمین خوردم و دوباره برخاستم. - نلسون ماندلا",
"خودت باش، دیگران قبلاً وجود دارند. - اسکار وایلد",
"اگر کاری که همیشه انجام داده‌اید را انجام دهید، همان چیزی را که همیشه به دست آورده‌اید، خواهید داشت. - تونی رابینز"
];
// انتخاب دکمه و بخش نمایش نقل‌قول
const generateQuoteBtn = document.getElementById('generateQuoteBtn');
const quoteDisplay = document.getElementById('quoteDisplay');
// افزودن رویداد کلیک به دکمه
generateQuoteBtn.addEventListener('click', () => {
// انتخاب یک نقل‌قول تصادفی از آرایه
const randomIndex = Math.floor(Math.random() * quotes.length);
const randomQuote = quotes[randomIndex];
// نمایش نقل‌قول تصادفی
quoteDisplay.textContent = `"${randomQuote}"`;
});
```
### توضیحات کد:
1. **HTML**: شامل عنوان برنامه، دکمه‌ای برای تولید نقل‌قول جدید و بخشی برای نمایش نقل‌قول است.
2. **CSS**: طراحی ساده برای ایجاد یک رابط کاربری زیبا و کاربرپسند.
3. **JavaScript**:
- **آرایه نقل‌قول‌ها**: شامل یک لیست از نقل‌قول‌های از پیش تعریف‌شده است.
- **رویداد کلیک**: وقتی کاربر روی دکمه "تولید نقل‌قول جدید" کلیک می‌کند، یک نقل‌قول تصادفی از آرایه انتخاب و نمایش داده می‌شود.
### نتیجه‌گیری
این پروژه **تولیدکننده نقل‌قول** یک مثال عالی برای استفاده از مفاهیم JavaScript مانند انتخاب تصادفی عناصر آرایه، دستکاری DOM و مدیریت رویدادهای کاربر است. شما میتوانید این پروژه را گسترش دهید و ویژگی‌های بیشتری مانند اشتراک‌گذاری نقل‌قول در شبکه‌های اجتماعی یا ذخیره نقل‌قول‌های دلخواه اضافه کنید. از کدنویسی لذت ببرید!
| صفحه قابل مشاهده:
دانلود پروژه کاربردی ساده برای ایجاد **تولیدکننده نقل‌قول (Quote Generator)** با استفاده از HTML، CSS و JavaScript می‌باشد
