کاربران گرامی در این پروژه به شما پروژه کاربردی با جاوا اسکریپت را قرارداده ایم شما عزیزان می توانید از بخش دانلود پروژه کاربردی با جاوااسکریپت سایر پروژه هایی که با جاوا اسکریپت طراحی شده اند را مشاهده و دانلود کنید.
در صورتی که نیاز به آموزش حضوری و یا غیر حضوری این پروژه داشتید میتوانید با ما در ارتباط باشید تا این پروژه را به شما آموزش دهیم حتی میتوانید در صورت دلخواه پروژه را به خواسته شما شخصی سازی کنیم لازم به ذکر است که تیم پروژه در صفحه دانلود پروژه کاربردی پروژه های مختلفی را به زبان های مختلف برنامه نویسی قرار داده است .شماره تماس با پرپروژه 09050394455 می باشد
پروژه **تولیدکننده نقل‌قول** با استفاده از HTML، CSS و JavaScript ایجاد شده است که نقل‌قول‌های تصادفی را برای کاربران نمایش می‌دهد. این پروژه به کاربران امکان می‌دهد با کلیک بر روی یک دکمه، یک نقل‌قول الهام‌بخش جدید دریافت کنند.
### 1. **HTML**
ابتدا ساختار HTML را برای تولیدکننده نقل‌قول ایجاد می‌کنیم.
```html
تولیدکننده نقل‌قول
تولیدکننده نقل‌قول
```
### 2. **CSS**
برای طراحی ظاهری تولیدکننده نقل‌قول از CSS استفاده می‌کنیم.
```css
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
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: 500px;
text-align: center;
}
h1 {
margin-bottom: 20px;
}
.quote {
font-size: 20px;
font-style: italic;
margin-bottom: 20px;
color: #555;
}
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 quoteDiv = document.getElementById('quote');
// افزودن رویداد کلیک به دکمه
generateQuoteBtn.addEventListener('click', function() {
// انتخاب یک نقل‌قول تصادفی از آرایه
const randomIndex = Math.floor(Math.random() * quotes.length);
const randomQuote = quotes[randomIndex];
// نمایش نقل‌قول تولید شده
quoteDiv.textContent = randomQuote;
});
```
### توضیحات کد:
1. **HTML**: شامل عنوان برنامه، یک بخش برای نمایش نقل‌قول و یک دکمه برای تولید نقل‌قول جدید است.
2. **CSS**: طراحی ساده و شکیل برای ایجاد یک رابط کاربری زیبا و دلپذیر.
3. **JavaScript**:
- **لیست نقل‌قول‌ها**: آرایه‌ای از نقل‌قول‌های الهام‌بخش.
- **رویداد کلیک**: وقتی کاربر روی دکمه "تولید نقل‌قول جدید" کلیک می‌کند، یک نقل‌قول تصادفی از آرایه انتخاب و نمایش داده می‌شود.
### نتیجه‌گیری
این پروژه **تولیدکننده نقل‌قول** یک ابزار ساده و سرگرم‌کننده است که به خوبی می‌تواند کاربران را الهام ببخشد. این پروژه از مفاهیم پایه JavaScript مانند دستکاری DOM و رویدادهای کاربر استفاده می‌کند و به راحتی قابل گسترش است؛ مثلاً میتوانید نقل‌قول‌های بیشتری اضافه کنید یا یک API برای دریافت نقل‌قول‌های آنلاین استفاده کنید. از کدنویسی لذت ببرید!
| صفحه قابل مشاهده:
دانلود پروژه کاربردی **تولیدکننده نقل‌قول** با استفاده از HTML، CSS و JavaScript می‌باشد
