کاربران گرامی در این پروژه به شما پروژه کاربردی با جاوا اسکریپت را قرارداده ایم شما عزیزان می توانید از بخش دانلود پروژه کاربردی با جاوااسکریپت سایر پروژه هایی که با جاوا اسکریپت طراحی شده اند را مشاهده و دانلود کنید.
در صورتی که نیاز به آموزش حضوری و یا غیر حضوری این پروژه داشتید میتوانید با ما در ارتباط باشید تا این پروژه را به شما آموزش دهیم حتی میتوانید در صورت دلخواه پروژه را به خواسته شما شخصی سازی کنیم لازم به ذکر است که تیم پروژه در صفحه دانلود پروژه کاربردی پروژه های مختلفی را به زبان های مختلف برنامه نویسی قرار داده است .شماره تماس با پرپروژه 09050394455 می باشد
در اینجا یک پروژه ساده برای ایجاد یک **برنامه مدیتیشن** با استفاده از HTML، CSS و JavaScript ارائه شده است. این برنامه به کاربر این امکان را می‌دهد تا زمان مدیتیشن را تعیین کند و بعد از اتمام زمان، یک صدای آرامش‌بخش پخش شود.
### 1. **HTML**
ابتدا ساختار HTML را ایجاد می‌کنیم که شامل ورودی زمان، دکمه‌ها و ناحیه‌ای برای نمایش زمان باقی‌مانده است.
```html
برنامه مدیتیشن
برنامه مدیتیشن
00:00
```
### 2. **CSS**
سپس از CSS برای زیبایی و تنظیم ظاهر برنامه استفاده می‌کنیم.
```css
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #e0f7fa;
color: #333;
}
.container {
text-align: center;
background: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
input {
width: 100px;
padding: 10px;
margin: 10px;
border: 1px solid #ddd;
border-radius: 5px;
}
button {
padding: 10px 20px;
border: none;
border-radius: 5px;
background-color: #00796b;
color: white;
cursor: pointer;
transition: background-color 0.3s;
}
button:hover {
background-color: #004d40;
}
h2 {
margin-top: 20px;
font-size: 24px;
}
```
### 3. **JavaScript**
اکنون به سراغ پیاده‌سازی منطق مدیتیشن با JavaScript می‌رویم. در این کد، زمان مدیتیشن را دریافت کرده و تایمر را به روز می‌کنیم.
```javascript
let timer;
let totalTime;
document.getElementById('startBtn').addEventListener('click', function() {
const minutes = parseInt(document.getElementById('minutes').value);
if (isNaN(minutes) || minutes <= 0) {
alert('لطفاً یک عدد صحیح وارد کنید!');
return;
}
totalTime = minutes * 60; // تبدیل به ثانیه
document.getElementById('timer').textContent = formatTime(totalTime);
startTimer();
});
function startTimer() {
clearInterval(timer);
timer = setInterval(function() {
if (totalTime <= 0) {
clearInterval(timer);
document.getElementById('meditationSound').play(); // پخش صدا
alert('مدیتیشن شما تمام شد!'); // هشدار
} else {
totalTime--;
document.getElementById('timer').textContent = formatTime(totalTime);
}
}, 1000);
}
function formatTime(seconds) {
const minutes = Math.floor(seconds / 60);
const remainingSeconds = seconds % 60;
return `${String(minutes).padStart(2, '0')}:${String(remainingSeconds).padStart(2, '0')}`;
}
```
### توضیحات کد:
1. **HTML**: شامل ورودی برای زمان مدیتیشن، دکمه برای شروع و ناحیه‌ای برای نمایش زمان باقی‌مانده و صدا است.
2. **CSS**: طراحی صفحه با رنگ‌های ملایم و کاربرپسند.
3. **JavaScript**:
- **رویداد `click`**: زمانی که کاربر روی دکمه کلیک می‌کند، زمان را دریافت می‌کند و تایمر را شروع می‌کند.
- **تابع `startTimer`**: تایمر را هر ثانیه به روز می‌کند و وقتی زمان به پایان می‌رسد، صدا را پخش می‌کند و یک هشدار نمایش می‌دهد.
- **تابع `formatTime`**: زمان باقی‌مانده را به فرمت `MM:SS` تبدیل می‌کند.
### نتیجه‌گیری
این برنامه مدیتیشن می‌تواند به عنوان یک ابزار ساده برای یادآوری و تنظیم زمان مدیتیشن شما مورد استفاده قرار گیرد. همچنین میتوانید ویژگی‌های بیشتری مانند افزودن صداهای مختلف، امکان متوقف کردن تایمر یا تنظیم زمان‌های پیش‌فرض اضافه کنید. از کدنویسی لذت ببرید!
| صفحه قابل مشاهده:
دانلود پروژه کاربردی **برنامه مدیتیشن** با استفاده از HTML، CSS و JavaScript می‌باشد
