مینی پروژه جاوا اسکریپت : Progress Steps

سلام سلام سلامتوی این مقاله قراره یه پروژه کوچیک ولی باحال و با هم کار کنیم.یه مدت خودم دنبال اینجور چیزی بودم ولی پیداش نکردم واسه همین تصمیم گرفتم خودم بنویسمش.حرف دیگه بسه بریم سراغ کدمون. https://aparat.com/v/eQS0b خیلی سریع می ریم سراغ فایل Html :<html lang=&quoten&quot> <head> <meta charset=&quotUTF-8&quot> <meta http-equiv=&quotX-UA-Compatible&quot content=&quotIE=edge&quot> <meta name=&quotviewport&quot content=&quotwidth=device-width, initial-scale=1.0&quot> <link rel=&quotstylesheet&quot href=&quotstyle.css&quot> <title>progress steps</title> </head> <body> <div class=&quotcontainer&quot> <div class=&quotprogress-container&quot> <div class=&quotprogress&quot id=&quotprogress&quot></div> <div class=&quotcircle active&quot>1</div> <div class=&quotcircle&quot>2</div> <div class=&quotcircle&quot>3</div> <div class=&quotcircle&quot>4</div> </div> <button class=&quotbtn&quot id=&quotprev&quot disabled>قبلی</button> <button class=&quotbtn&quot id=&quotnext&quot>بعدی</button> </div> <script src=&quotscript.js&quot> </body> </html>خوب همونجور که دیدین چیز سختی نداشت تا اینجاحالا بریم سراغ فایل css تا یه خورده خوشگل تر کنیم کارمونو:اول سه سری استایل اولیه میدیم به کارمون در ضمن ما به یه سری رنگ نیاز داریم که اونارم توی root تعریف می کنیم چون که زیاد باهاشون کار داریم::root { --line-border-fill: #3498db; --line-border-empty: #e0e0e0; } * { box-sizing: border-box; font-family: 'Vazir', sans-serif; margin: 0; padding: 0; } body { background-color: #f6f7fb; display: flex; justify-content: center; align-items: center; height: 100vh; }حالا بریم container هامونو مشخص کنیم:.container { text-align: center; } .progress-container { position: relative; display: flex; justify-content: space-between; max-width: 100%; width: 350px; margin: 30px; }واسه این که ازالمنت اضافه استفاده نکنیم میایم و از sudo element کمک میگیریم:.progress-container::before { content: ''; background-color: var(--line-border-empty); position: absolute; top: 50%; left: 0; transform: translateY(-50%); height: 3px; width: 100%; z-index: -1; }می ریم سراغ خطی که قراره پر بشه و میزان پیشرفت و به ما نشون بده :.progress { background-color: var(--line-border-fill); position: absolute; top: 50%; left: 0; transform: translateY(-50%); height: 3px; width: 0%; z-index: -1; transition: .4s ease; }حالا دایره هایی رو درست می کنیم که قراره نشون بدن که ما الان کدوم مرحله ایم:.circle { width: 30px; height: 30px; border-radius: 50%; background-color: #fff; border: 3px solid var(--line-border-empty); display: flex; justify-content: center; color: #999; align-items: center; } .circle.active { border-color: var(--line-border-fill); }حالا اون دکمه های قبلی و بعدی رو قشنگ ترشون می کنیم:.btn { padding: 8px 30px; background-color: var(--line-border-fill); color: #fff; transition: .4s ease; border-radius: 4px; } .btn:active { transform: scale(.98); } .btn:disabled { background-color: var(--line-border-empty); cursor: not-allowed; color: #000; }تا اینجا خیلی خوب پیش اومدیم حالا بریم سر وقت جاوا اسکریپت:اول نیاز داریم 5 تا متغیر تعریف کنیم:const progress = document.getElementById(&quotprogress&quot); const next = document.getElementById(&quotnext&quot); const prev = document.getElementById(&quotprev&quot); const circles = document.querySelectorAll(&quot.circle&quot); let currentActive = 1;حالا توی دکمه ها event کلیک تعریف می کنیم:next.addEventListener(&quotclick&quot, () => { currentActive++; if (currentActive > circles.length) { currentActive = circles.length; } update(); }); prev.addEventListener(&quotclick&quot, () => { currentActive--; if (currentActive < 1) { currentActive = 1; } update(); });حالا اون متد update رو تعریف می کنیم:function update() { circles.forEach((circle, index) => { if (index < currentActive) { circle.classList.add(&quotactive&quot); } else { circle.classList.remove(&quotactive&quot); } }); const actives = document.querySelectorAll(&quot.active&quot); progress.style.width = ((actives.length - 1) / (circles.length - 1)) * 100 + &quot%&quot if (currentActive === 1) { prev.disabled = true; } else if (currentActive === circles.length) { next.disabled = true; } else { prev.disabled = false; next.disabled = false; } }اینم از این پروژه باحالحتما سعی کنید خودتون کدشو بزنید تا یاد بگیرید.اگه فایل پروژه رو میخواید می تونید به گیت هاب من بیاید.تا پروژه بدی بدروود.