این یک ارسال برای [Frontend Challenge v24.04.17]((https://dev.to/challenges/frontend-2024-05-29)، Glam Up My Markup: Beaches
چیزی که من ساختم
من مکانی را ایجاد کردم که کاربر به راحتی می تواند بر روی نقشه جهان مکان خود را پیدا کند که بهترین سواحل جهان در آن قرار دارند. کاربر می تواند بر روی نقشه جهان نگاه کند و جزئیات ساحل انتخابی خود را کشف کند.
من می‌خواستم به این هدف برسم زیرا احساس می‌کردم که شناخت بهتری از سواحل جهان در کجاست، حس جغرافیایی بهتری به شما می‌دهد و می‌تواند به عنوان کمک مسافرتی برای بررسی اینکه آیا نزدیک هر یک از این سواحل هستید یا خیر.
نسخه ی نمایشی
پیوند به صفحه پروژه/GitHub
پیوند به مخزن GitHub
سفر
سبک
شروع کردم به فکر کردن در مورد طرح و اینکه چگونه آن را ارائه کنم و از چه طرح رنگی استفاده کنم. تصمیم گرفتم از سبک دهه 1980/میامی استفاده کنم که منعکس کننده شن صورتی و اقیانوس آبی فیروزه ای است. علاوه بر این، می‌خواستم پس‌زمینه مانند جزر و مد حرکت کند، به همین دلیل است که انیمیشن جزر و مدی را اضافه کردم که شبیه دریا است. دستیابی به این امر دشوار بود زیرا نمی‌توانید شیب رنگ واقعی را متحرک کنید، در عوض باید اندازه‌های پس‌زمینه را متحرک کنید.
تثبیت موقعیت
من می خواستم سواحل را روی نقشه جهان نشان دهم. این به معنای تحقیق در مورد اینکه سواحل واقعاً در کجا واقع شده‌اند و چالشی را در مورد اینکه چگونه می‌توانم آنها را در موقعیت مکانی قرار دهم نشان می‌داد. من از نقشه به عنوان تصویر پس زمینه استفاده کردم و کانتینر سواحل را یک شبکه CSS ساختم. من با ستون‌ها و ردیف‌های مختلف آزمایش کردم، اما در دسکتاپ متوجه شدم، یک شبکه ۴×۴ به خوبی کار می‌کند.
پس از این، من در هر ساحل با استفاده از یک شناسه دوچرخه سواری کردم و انتخاب کردم که در کدام ردیف و ستون قرار گیرد. استفاده از ویژگی هایی مانند justify-self و align-self به من این امکان را داد که دقیق تر باشم. در برخی موارد مجبور شدم از حاشیه استفاده کنم تا موقعیت آن را کاملتر کنم.
اگرچه نکات 100٪ دقیق نیستند، من افتخار می کنم که سیستم شبکه به خوبی کار کرده است.
جاوا اسکریپت
من می خواستم صفحه html را به دو قسمت تقسیم کنم: مقدمه و نقشه. به همین دلیل است که یک شنونده رویداد کلیک را در صفحه اصلی اضافه کردم که از مقدمه به صفحه نقشه منتقل می شود.
من از یک حلقه for برای تعیین یک شناسه برای هر ساحل و همچنین یک شنونده رویداد کلیک استفاده کردم. برای من ساده تر بود و به این معنی بود که کد کمتری می نوشتم، و به همین دلیل است که از شناسه های CSS مختلف برای عناصر قابل مشاهده و غیرقابل مشاهده استفاده کردم. سپس از جاوا اسکریپت برای تغییر شناسه های آن استفاده کردم، بسته به اینکه می خواهم عنصر نمایش داده شود یا نه.
هر ساحل در نقشه جهان به عنوان یک مربع قرمز نشان داده شده است. تنها زمانی که کاربر روی این مربع قرمز قرار می گیرد، مکان مشخص می شود و کاربر می تواند برای دیدن جزئیات بیشتر روی آن کلیک کند.
پاسخگویی
از آنجایی که من از یک نقشه جهان به عنوان تصویر پس‌زمینه استفاده می‌کنم، از اولین رویکرد دسکتاپ برای استایل‌سازی CSS استفاده کردم. این بدان معناست که پاسخگو بودن در دستگاه های تلفن همراه بسیار چالش برانگیز است. برای این، من نسبت تصویر پس‌زمینه را در یک درخواست رسانه تغییر دادم، در حالی که مطمئن شدم مکان‌های ساحل هنوز دقیق هستند.
بعدش چی
من ایده هایی داشتم که این را به یک بازی با هواپیما تبدیل کنم. کاربر می توانست هواپیما را با یک صفحه کلید کنترل کند و شاید نقشه در ابتدا کاملاً مبهم باشد. تنها زمانی که کاربر حرکت می کند، قسمت هایی از نقشه خود را نشان می دهد.
بنابراین فکر کردم می‌توانم این را به یک بازی تبدیل کنم، که به موجب آن از کاربر در مورد سواحل خاص سؤال می‌شود و آنها باید محل قرارگیری آن را پیدا کنند.
با این حال، من می دانستم که این در دستگاه های تلفن همراه مشکل ساز خواهد بود.
این افکار اولیه من بود، اما باید به خودم اعتراف می کردم که برای این مطلب خیلی جاه طلبانه خواهد بود.
نتیجه
با این وجود، من افتخار می کنم که به آنچه می خواستم رسیدم و مطمئناً مهارت های CSS و جاوا اسکریپت من را تقویت کرد.
نظر خود را در زیر به من بگویید یا اگر انتقادی دارید.
بابت کمبود گیف در توضیحات عذرخواهی می کنم، معمولا سرم را درد می دهند، پس نمی خواهم به دیگری هم بدهم. همچنین انگلیسی زبان اول من است، پس هر چقدر که می خواهید بی رحم باشید.
متشکرم!
دارل
