پروژه جاوا اسکریپت: Hover board

سلام رفقا امروز یه پروژه باحال و می خوایم با هم انجام بدیم.

پروژه امروز یه صفحه که قرار وقتی موس hover میکنیم روش یه سری رنگا به ما نشون بده و بعد از چند ثانیه از بین بره.

خوب خیلی سریع بریم سراغ فایل Html :

بعدش میریم سر وقت css

مثل همیشه تنظیمات اولیه رو انجام میدیم:

بعد فایل container رو یه سرو سامون میدیم. حداکثر عرضمونو 400 پیکسل می گیریم تا بیشتر از اون فضا رو نگیره و اجازه می دیم که بتونه به خط جدید بره :

حالا می تونیم اون مربع کوچیکامونو خوشگل تر کنیم:

خوب کارمون اینجا تموم شد بهتره بریم سراغ کد زدن توی جاوا اسکریپت

اینجا سه تا متغیر تعریف میکنیم:

حالا باید به تعدادی که توی squareCount ریختیم مربع بسازیم و کلاس square رو بهش بدیم و واسه اینکه موس روش بره و خارج شه ویداد تعریف کنیم و اونو بریزیم داخل المان container. اوه چقد کار!!!

ما نیاز داریم یه متد داشته باشیم که رنگامونو به صورت تصادفی به ما برگردونه. پس فانکشن یرو براش می نویسیم:

بعد میریم سراغ رویداد هایی که اسم ازشون بردیم ولی هنوز تعریفشون نکردیم.

اول این رویدادرو تعریف می کنیم که موس بره روی المان:

حالا باید بگیم که وقتی موس روی المان نبود چه اتفاقی بیفته:

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

پروژه رو می تونید از روی گیت هاب من وردارین و استفاده کنید.

تا پروژه بعدی که من بیام خوب تمرین کنید.