https://virgool.io/feed/@pooria_faghfoori frontend developer هستم. عاشق یاد گرفتن و یاد دادن چیزای باحال fa 2026-06-16 16:30:50 https://files.virgool.io/upload/users/170376/avatar/GY4ejt.png?height=120&width=120 https://virgool.io/@pooria_faghfoori https://virgool.io/magic-box/%D9%BE%D8%B1%D9%88%DA%98%D9%87-%D8%AC%D8%A7%D9%88%D8%A7%D8%A7%D8%B3%DA%A9%D8%B1%DB%8C%D9%BE%D8%AA-%D8%B4%D9%85%D8%A7%D8%B1%D9%86%D8%AF%D9%87-%D8%AF%D9%86%D8%A8%D8%A7%D9%84-%DA%A9%D9%86%D9%86%D8%AF%DA%AF%D8%A7%D9%86-a0xjfmbnvbec سلام به دوستان و همراهان عزیزمثل روال سابق اومدم که یه پروژه کاربردی دیگه رو با هم انجام بدیم.این شمارنده ما مثل شمارنده هایی که توی سایت های مختلف دیدین قراره عمل کنه و تعداد افرادی رو که در شبکه های اجتماعی مختلف شما رو دنبال می کنند رو نشون بده. https://aparat.com/v/PCKj3 بریم ببینیم چی قراره بنویسیم.مثل همیشه اول با فایل html کارو شروع می کنیم.همینجور که میبینید ما CDN مربوط به fontawesome رو اضافه کردیم.داخل تگی که کلاس counter رو داره یه attribute اضافه کردیم که می تونه هر چیزی باشه که ما اسمشو گذاشتیم data-target تا تعداد دنبال کنندگان هر شبکه اجتماعی رو بهش بدیم و توی اسکریپتمون ازش استفاده کنیم.بعد این میریم یه کوچولو فایل css رو تغییر بدیم.توی این قسمت هم CDN مربوط به فونت وزیر اضافه شده به همراه یه سری استایل کلی برای صفحمون.اینجا هم کار خاص انجام ندادیم یه سری تراز بندیا رو انجام دادیم.توی این پروژه استایل خیلی برامون مهم نیست و تمرکز اصلی بیشتر روی اسکریپته.پس بریم سر اصل مطلب:اینجا باید همه المنت هایی که تگ counter دارن رو بگیریم. بعدش از یه forEach استفاده کنیم تا بتونیم همشونو پیمایش کنیم:بعد این همه کدامون قراره توی این حلقه نوشته شه.متن تگ مورد نظرمونو برابر صفر قرار میدیم تا از صفر شروع بشه و یه فانکشن می نویسیم تا بتونیم چندین بار اجراش کنیم و بعد از تعریفش اونو اجرا می کنیم.داخل فانکشنی که تعریف کردیم باید اون Attribute رو که تعریف کردیم رو مقدارش رو بگیریم و اونو به عدد تبدیل کنیم.نکته: توی جاوا اسکریپت با قرار دادن + قبل مقدار می تونیم اونو به عدد تبدیلش کنیم.و مقدار گرفته شده رو تقسیم بر 100 کنیم.(عدد و عوض کنید ببینید چه اتفاقی میفته مثلا 100000) حالا برای نمایش اعداد باید یه شرط بذاریم:نکته: Math.ceil برای گرد کردن اعداد اعشاری به سمت بالا به کار می رود.این پروژه رو حتما یه بار خودتون انجام بدین تا کامل در جریان عملکردش قرار بگیرید.حتما حتما تمرین کنید. با نگا کردن چیز خاصی یاد نمی گیرید.اگه فایل پروژه رو خواستین به گیت هاب من مراجعه کنید.تا پروژه بعد بدرود. پوریا فغفوری پوریا فغفوری Fri, 26 Mar 2021 07:40:15 +0430 https://virgool.io/magic-box/%D9%BE%D8%B1%D9%88%DA%98%D9%87-%D8%AC%D8%A7%D9%88%D8%A7%D8%A7%D8%B3%DA%A9%D8%B1%DB%8C%D9%BE%D8%AA-button-ripple-effect-g3nna94qpxpb سلام دوستان امروز با یه پروژه باحال اومدم پیشتون. https://aparat.com/v/qsNAy پروژه امروز خیلی پر کاربرده. یه دکمه که وقتی روش کلیک می کنیم یه موجی روش ایجاد میشه خیلی روی UI تاثیر داره.خوب مثل همیشه اول از همه میریم سراغ html :خوب بعد از این میریم سر وقت استایل دادن به دکمه.اول یه استایل کلی میدیم به صفحمون:حالا دکمه رو استایل می دیم بهش:بعد این می ریم که افکت موج رو ایجاد کنیم که بعدا این کلاسو می خوایم بدیم به یه تگ Span که داخل دکمه می خوایم تعریف کنیم:برای انیمیشن ساخته شده از کد زیر استفاده می کنیم که وقتی المانمون ایجاد میشه این انیمیشن اجرا بشه:ایجا کارمون تموم شد حالا شروع می کنیم به کد زدن با جاوااسکریپت.اینجا همه دکمه ها رو که کلاس ripple دارن رو انتخاب می کنیم و یه رویداد واسه همشون تعریف می کنیم:از این به بعد هر چی که تعریف می کنیم همه داخل رویدادمون قراره تعریف بشن.از رویداد استفاده میکنیم تا مکان کلیک شدن رو به دست بیاریم:بعدش مکان دکمه روی صفحه رو دوباره با استفاده از رویدادمون بدست میاریم:حالا وقتی این دوتا مقدار به دست اومده رو از هم کم کنیم موقعیت کلیک داخل المان دکمه رو بدست میاریم.یادتون نره همه این متغیرارو لاگ بگیرین تا ببینین چه اتفاقی داره میفته.حالا باید جایی که کلیک شده رو بگیریم و دقیقا توی اون نقطه یه دایره ایجاد کنیم.مشکلی که اینجا داریم اینه که بعد از هر کلیک المان circle ایجاد میشه و از بین نمیره پس کاری ه ما باید بکنیم اینه که بعد نیم ثانیه اونو از بین ببریم. پس از کد زیر استفاده می کنیم.همینطور که دیدین خیلی راحت تونستیم یه دکمه خیلی جذاب واسه سایتمون طراحی کنیم.این پروژه رو میتونید از گیت هاب من دانلود کنید.تا پروژه بعد بدرووود. پوریا فغفوری پوریا فغفوری Tue, 23 Mar 2021 00:27:25 +0430 https://virgool.io/magic-box/%D9%BE%D8%B1%D9%88%DA%98%D9%87-%D8%AC%D8%A7%D9%88%D8%A7-%D8%A7%D8%B3%DA%A9%D8%B1%DB%8C%D9%BE%D8%AA-hover-board-jnwbx5idyyla سلام رفقا امروز یه پروژه باحال و می خوایم با هم انجام بدیم.پروژه امروز یه صفحه که قرار وقتی موس hover میکنیم روش یه سری رنگا به ما نشون بده و بعد از چند ثانیه از بین بره. https://aparat.com/v/yrdI8 خوب خیلی سریع بریم سراغ فایل Html :بعدش میریم سر وقت css مثل همیشه تنظیمات اولیه رو انجام میدیم:بعد فایل container رو یه سرو سامون میدیم. حداکثر عرضمونو 400 پیکسل می گیریم تا بیشتر از اون فضا رو نگیره و اجازه می دیم که بتونه به خط جدید بره :حالا می تونیم اون مربع کوچیکامونو خوشگل تر کنیم:خوب کارمون اینجا تموم شد بهتره بریم سراغ کد زدن توی جاوا اسکریپتاینجا سه تا متغیر تعریف میکنیم:حالا باید به تعدادی که توی squareCount ریختیم مربع بسازیم و کلاس square رو بهش بدیم و واسه اینکه موس روش بره و خارج شه ویداد تعریف کنیم و اونو بریزیم داخل المان container. اوه چقد کار!!!ما نیاز داریم یه متد داشته باشیم که رنگامونو به صورت تصادفی به ما برگردونه. پس فانکشن یرو براش می نویسیم:بعد میریم سراغ رویداد هایی که اسم ازشون بردیم ولی هنوز تعریفشون نکردیم.اول این رویدادرو تعریف می کنیم که موس بره روی المان:حالا باید بگیم که وقتی موس روی المان نبود چه اتفاقی بیفته:اینم از این پروژه جذاب. حتما سعی کنید خودتون یه بار بنویسیدش و تمرین کنید.پروژه رو می تونید از روی گیت هاب من وردارین و استفاده کنید.تا پروژه بعدی که من بیام خوب تمرین کنید. پوریا فغفوری پوریا فغفوری Fri, 19 Mar 2021 10:09:57 +0330 https://virgool.io/magic-box/%D9%85%DB%8C%D9%86%DB%8C-%D9%BE%D8%B1%D9%88%DA%98%D9%87-%D8%AC%D8%A7%D9%88%D8%A7-%D8%A7%D8%B3%DA%A9%D8%B1%DB%8C%D9%BE%D8%AA-progress-steps-yhzjgcba2cav سلام سلام سلامتوی این مقاله قراره یه پروژه کوچیک ولی باحال و با هم کار کنیم.یه مدت خودم دنبال اینجور چیزی بودم ولی پیداش نکردم واسه همین تصمیم گرفتم خودم بنویسمش.حرف دیگه بسه بریم سراغ کدمون. 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; } }اینم از این پروژه باحالحتما سعی کنید خودتون کدشو بزنید تا یاد بگیرید.اگه فایل پروژه رو میخواید می تونید به گیت هاب من بیاید.تا پروژه بدی بدروود. پوریا فغفوری پوریا فغفوری Mon, 15 Mar 2021 22:41:18 +0330 https://virgool.io/magic-box/%D9%BE%D8%B1%D9%88%DA%98%D9%87-css-%D8%AC%D8%B9%D8%A8%D9%87-%D8%AC%D8%B3%D8%AA-%D9%88-%D8%AC%D9%88-hmjf8ntnamfc سلام رفقا امروز می خوام آموزش یه سرچ باکس رو براتون بذارم که مطمئنم خیلی جاها میتونید ازش استفاده کنید. https://aparat.com/v/TCRVh خوب خیلی سریع بریم سراغ کارمونو وقت هدر ندیم.اول از همه یه فایل Html میسازیم و کدای زیر و توش مینویسیم.<!DOCTYPE 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> <link rel=&quotstylesheet&quot href=&quothttps://pro.fontawesome.com/releases/v5.10.0/css/all.css&quot integrity=&quotsha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p&quot crossorigin=&quotanonymous&quot /> <title>Document</title> </head> <body> <div class=&quotsearch-box&quot> <input type=&quottext&quot class=&quotsearch-text&quot placeholder=&quotجست و جو&quot> <a class=&quotsearch-btn&quot> <i class=&quotfa fa-search&quot></i> </a> </div> </body> </html>خوب تا اینجا خوب بود کارمون.حالا باید بریم سراغ اضافه کرد فایل Css تا ظاهر کارمونو درست کنیم.اول از همه مییریم سراغ بدنه. که اگه دوست داشتین می تونید تغییرش بدین خیلی هم نیست این قسمت: body { padding: 0; margin: 0; background: #3fd2e6; }خوب حالا می ریم سراغ این که جعبه Search box مونو درست کنیم..search-box { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); height: 40px; border-radius: 40px; padding: 10px; background: #2f3640; }بریم سراغ اینکه دکمه رو عوض کنیم.search-btn { color: #3fd2e6; float: left; background: #2f3640; text-decoration: none; width: 40px; height: 40px; border-radius: 50%; display: flex; justify-content: center; align-items: center; cursor: pointer; }بعدشم یه استایل کوچیک به Input میدیم:.search-text { border: 0; background: none; outline: none; text-align: right; line-height: 30px; color: #fff; padding: 0; width: 0; transition: all .5s; }حالا بریم سراغ اصل مطلب اینجا واسه باز و بسته شدن باکسمون یه تیکه کد بنوسیم که مثل جاوا اسکریپت بتونه ز بسته شدنش جلوگیری کنه:.search-box:hover>.search-text, .search-text:focus, .search-text:not(:placeholder-shown) { width: 250px; padding: 0 10px; }خوب خیلی راحت تونستیم یه فرم باحال برای سرچ توی سایتمون بنویسیم.اگه کد این پروژه و پروژه های بیشتری رو میخواید می تونید به گیت هاب من بیاید.منتظر پروژه های بیشتر باشید. پوریا فغفوری پوریا فغفوری Sat, 13 Mar 2021 20:26:32 +0330