دنیای پروژه

جزئیات محصول

دانلود پروژه کاربردی

دانلود پروژه کاربردی "اپلیکیشن نظرسنجی" با استفاده از JavaScript

قیمت: 35,000 تومان

خرید فایل


مشاهده پیشنمایش

پیشنمایش برای محصولاتی که نیاز به نمایش دمو دارند می باشد

 کاربران گرامی در این پروژه به شما پروژه کاربردی  با جاوا اسکریپت را قرارداده ایم شما عزیزان می توانید از بخش دانلود پروژه کاربردی با جاوااسکریپت سایر  پروژه هایی که با جاوا اسکریپت طراحی شده اند را مشاهده و دانلود کنید.

در صورتی که نیاز به آموزش حضوری و یا غیر حضوری این پروژه داشتید میتوانید با ما در ارتباط باشید تا این پروژه را به شما آموزش دهیم حتی میتوانید در صورت دلخواه پروژه را به خواسته شما شخصی سازی کنیم لازم به ذکر است که تیم پروژه در صفحه دانلود پروژه کاربردی پروژه  های مختلفی را به زبان های مختلف برنامه نویسی قرار داده است .شماره تماس با پرپروژه 09050394455 می باشد



 ### پروژه "اپلیکیشن نظرسنجی" با استفاده از JavaScript
 
این پروژه یک اپلیکیشن نظرسنجی ساده است که به کاربران اجازه می‌دهد نظرات و بازخوردهای خود را ثبت کنند. این اپلیکیشن با استفاده از HTML، CSS و JavaScript پیاده‌سازی شده است و می‌تواند به راحتی در مرورگر اجرا شود.
 
#### ویژگی‌های پروژه:
- **ایجاد نظرسنجی:** کاربران می‌توانند سوالات و گزینه‌های خود را اضافه کنند.
- **جمع‌آوری نظرات:** نظرات و امتیازهای کاربران ذخیره و نمایش داده می‌شوند.
- **رابط کاربری ساده و کاربرپسند:** طراحی جذاب و کاربرپسند.
 
### راه‌اندازی پروژه
 
#### 1. ساختار فایل‌ها
 
ساختار پروژه به صورت زیر است:
 
```
survey-app/
├── index.html
├── styles.css
└── script.js
```
 
#### 2. کد منبع
 
##### فایل `index.html`
 
این فایل رابط کاربری اپلیکیشن نظرسنجی را ایجاد می‌کند:
 
```html
   
   
    اپلیکیشن نظرسنجی
   
   
       

اپلیکیشن نظرسنجی

       
           
           
           
           
       
       
       
   
   
```
 
##### فایل `styles.css`
 
برای زیباسازی رابط کاربری استفاده می‌شود:
 
```css
body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
 
.container {
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    padding: 20px;
    width: 400px;
    text-align: center;
}
 
h1 {
    margin-bottom: 20px;
}
 
.survey-form {
    margin-bottom: 20px;
}
 
input[type="text"] {
    width: calc(100% - 20px);
    padding: 10px;
    margin: 10px 0;
}
 
button {
    background-color: #4CAF50;
    color: white;
    padding: 10px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}
 
button:hover {
    background-color: #45a049;
}
 
.question {
    margin: 10px 0;
}
 
.results {
    margin-top: 20px;
}
```
 
##### فایل `script.js`
 
این فایل منطق اپلیکیشن نظرسنجی را پیاده‌سازی می‌کند:
 
```javascript
const questionInput = document.getElementById('question');
const option1Input = document.getElementById('option1');
const option2Input = document.getElementById('option2');
const addQuestionButton = document.getElementById('add-question');
const surveyQuestionsContainer = document.getElementById('survey-questions');
const resultsContainer = document.getElementById('results');
 
let surveyQuestions = [];
 
// اضافه کردن سوال به نظرسنجی
function addQuestion() {
    const questionText = questionInput.value.trim();
    const option1Text = option1Input.value.trim();
    const option2Text = option2Input.value.trim();
 
    if (questionText === '' || option1Text === '' || option2Text === '') {
        alert('لطفاً همه فیلدها را پر کنید.');
        return;
    }
 
    const question = {
        text: questionText,
        options: [option1Text, option2Text],
        votes: [0, 0]
    };
 
    surveyQuestions.push(question);
    displaySurveyQuestions();
    clearInputs();
}
 
// نمایش سوالات نظرسنجی
function displaySurveyQuestions() {
    surveyQuestionsContainer.innerHTML = '';
    surveyQuestions.forEach((question, index) => {
        const questionDiv = document.createElement('div');
        questionDiv.classList.add('question');
 
        questionDiv.innerHTML = `
           

${question.text}

           
           
        `;
 
        surveyQuestionsContainer.appendChild(questionDiv);
    });
}
 
// رای دادن به گزینه‌ها
function vote(questionIndex, optionIndex) {
    surveyQuestions[questionIndex].votes[optionIndex]++;
    displayResults();
}
 
// نمایش نتایج نظرسنجی
function displayResults() {
    resultsContainer.innerHTML = '';
    surveyQuestions.forEach((question, index) => {
        const resultDiv = document.createElement('div');
        resultDiv.classList.add('results');
        const totalVotes = question.votes[0] + question.votes[1];
        const option1Percentage = totalVotes > 0 ? (question.votes[0] / totalVotes * 100).toFixed(2) : 0;
        const option2Percentage = totalVotes > 0 ? (question.votes[1] / totalVotes * 100).toFixed(2) : 0;
 
        resultDiv.innerHTML = `
           

${question.text}

           

${question.options[0]}: ${option1Percentage}% (${question.votes[0]} رای)

           

${question.options[1]}: ${option2Percentage}% (${question.votes[1]} رای)

        `;
 
        resultsContainer.appendChild(resultDiv);
    });
}
 
// پاک کردن ورودی‌ها
function clearInputs() {
    questionInput.value = '';
    option1Input.value = '';
    option2Input.value = '';
}
 
// رویداد کلیک دکمه اضافه کردن سوال
addQuestionButton.addEventListener('click', addQuestion);
```
 
### 3. اجرای پروژه
 
برای اجرای پروژه، فقط کافی است فایل `index.html` را در مرورگر خود باز کنید. می‌توانید به سادگی فایل را کشیده و در مرورگر رها کنید یا بر روی آن کلیک کنید.
 
### نتیجه‌گیری
 
این پروژه "اپلیکیشن نظرسنجی" به شما این امکان را می‌دهد که با اصول ساخت یک اپلیکیشن تحت وب با استفاده از HTML، CSS و JavaScript آشنا شوید. شما می‌توانید این پروژه را گسترش دهید و ویژگی‌های بیشتری مانند اضافه کردن سوالات متعدد، ذخیره‌سازی نظرسنجی‌ها، یا طراحی بهتری برای رابط کاربری اضافه کنید. این پروژه یک نقطه شروع عالی برای یادگیری توسعه وب و کار با داده‌ها است.
| صفحه قابل مشاهده: دانلود پروژه کاربردی "اپلیکیشن نظرسنجی" با استفاده از JavaScript می‌باشد