ساخت یک وب سایت مشاوره

Summarize this content to 400 words in Persian Lang

معرفی

سلام، توسعه دهندگان همکار! امروز، من برای به اشتراک گذاشتن یک پروژه سرگرم کننده و ساده که اخیراً روی آن کار کرده ام، هیجان زده هستم: یک وب سایت Advice Generator. این پروژه توصیه های تصادفی را از یک API خارجی دریافت می کند و آنها را در یک صفحه وب نمایش می دهد. این یک راه عالی برای تمرین کار با API ها و ساخت برنامه های کاربردی وب تعاملی است.

بررسی اجمالی پروژه

وب سایت Advice Generator یک برنامه کاربردی ساده است که به کاربران امکان می دهد با کلیک یک دکمه مشاوره تصادفی دریافت کنند. از Advice Slip API برای دریافت مشاوره و نمایش آن در صفحه وب استفاده می کند.

امکانات

واکشی مشاوره: توصیه های تصادفی را از Advice Slip API بازیابی می کند.

مشاوره را نمایش می دهد: توصیه را به همراه یک شماره مشاوره نشان می دهد.

دکمه تعاملی: کاربران می توانند با کلیک کردن روی یک دکمه، توصیه های جدیدی دریافت کنند.

فن آوری های مورد استفاده

HTML: برای ساختار صفحه وب.

CSS: برای استایل دادن به صفحه وب.

جاوا اسکریپت: برای واکشی داده ها از API و به روز رسانی DOM.

ساختار پروژه

در اینجا نگاهی گذرا به ساختار پروژه داریم:

Advice-Generator/
├── index.html
├── style.css
└── script.js

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

نصب و راه اندازی

برای شروع پروژه، مراحل زیر را دنبال کنید:

مخزن را شبیه سازی کنید:
git clone https://github.com/abhishekgurjar-in/Advice-Generator.git

دایرکتوری پروژه را باز کنید:
cd Advice-Generator

پروژه را اجرا کنید:

می توانید آن را روی یک سرور محلی اجرا کنید یا به سادگی آن را باز کنید index.html فایل در یک مرورگر وب

استفاده

وب سایت را باز کنید در یک مرورگر وب

روی دکمه “دریافت مشاوره” کلیک کنید برای دریافت یک نصیحت جدید

از خرد لذت ببرید!

توضیح کد

HTML

فایل HTML شامل ساختار اصلی صفحه وب، از جمله یک دکمه برای دریافت مشاوره و بخشی برای نمایش مشاوره است.

lang=”en”>

charset=”UTF-8″>
name=”viewport” content=”width=device-width, initial-scale=1.0″>
Advice Generator
rel=”stylesheet” href=”style.css”>

class=”container”>
Advice Generator
id=”advice”>Click the button to get a piece of advice!
id=”adviceBtn”>Get Advice

src=]]>”script.js”>

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

CSS

فایل CSS به صفحه وب سبک می دهد تا از نظر بصری جذاب باشد.

body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
}

.container {
text-align: center;
background: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
background-color: #007BFF;
color: #fff;
border: none;
border-radius: 5px;
margin-top: 20px;
}

button:hover {
background-color: #0056b3;
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

جاوا اسکریپت

فایل جاوا اسکریپت توصیه هایی را از API دریافت می کند و DOM را به روز می کند.

document.getElementById(‘adviceBtn’).addEventListener(‘click’, fetchAdvice);

function fetchAdvice() {
fetch(‘https://api.adviceslip.com/advice’)
.then(response => response.json())
.then(data => {
document.getElementById(‘advice’).innerText = `Advice #${data.slip.id}: ${data.slip.advice}`;
})
.catch(error => {
console.error(‘Error fetching advice:’, error);
});
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

نسخه نمایشی زنده

می توانید نسخه ی نمایشی زنده وب سایت Advice Generator را در اینجا مشاهده کنید.

نتیجه

ساخت وب سایت Advice Generator یک تجربه سرگرم کننده و آموزشی بود. این به من کمک کرد تا کار با API ها و ساختن برنامه های کاربردی وب تعاملی را تمرین کنم. امیدوارم که این پروژه مانند من برای شما جذاب و آموزنده باشد. با خیال راحت مخزن را شبیه سازی کنید و با کد بازی کنید. کد نویسی مبارک!

وام

نویسنده

Advice-Generator/
├── index.html
├── style.css
└── script.js

 lang="en">

     charset="UTF-8">
     name="viewport" content="width=device-width, initial-scale=1.0">