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