در این سوال قصد داریم یک جدول به شکل زیر طراحی کنیم:
بخشی از پیادهسازی در فایلهای table.html
و style.css
انجام شده است.
شما باید با توجه به جزئیاتی که در ادامه میآیند، فایل table.html
را تکمیل کنید.
پروژه اولیه را از اینجا دانلود کنید. ساختار فایلهای این پروژه به صورت زیر است.
باید یک <table>
را به گونهای به <body>
در فایل table.html
اضافه کنید که:
id
) هر خانه به صورت cell_i
باشد که i
عدد داخل آن خانه است.td
، tr
و table
استفاده کنید؛
زیرا برای این موارد در فایل style.css
ویژگیهایی در نظر گرفته شده
که آنها را در مکان مورد نظر برای داوری در صفحه قرار میدهد.فایل table.html
را پس از تکمیل، فشرده و ارسال کنید.
style.css
بخشی از تنظیمات مربوط به ابعاد خانههای جدول،
تنظیمات مربوط رنگ و فونت، و جهتگیری متن درون خانهها را انجام میدهد.
این موارد به هیچ وجه نباید از درون table.html
تغییر کنند.id
) عناصر انجام میشود.
پس دقت کنید که عناصر شناسهی صحیح داشته باشند.متأسفانه امروز خبردار شدیم که چهار تن از دوستان قدیمی ما، Zeno ،Zhi ،Ziv و Zuberi، در یک نزاع برکهای، توسط جمعی متشکل از راکونها، مارها، پرندگان وحشی و قوهای ساکن در اطراف برکهی Z خورده شدهاند. تصمیم داریم برای مراسم ترحیم آنها اعلامیهای مانند تصویر زیر در سایت برکه قرار دهیم.
پس از نوشتن کدها، هنگام بازبینی فایلها، بر اثر ناراحتی و بی دقتی دوستان،
ترتیب فایلها به هم ریخت و فایل index.html
بدون ذخیرهسازی تغییرات بسته شد.
حالا محتوای لازم برای نمایش اعلامیه را نداریم. از شما میخواهیم این فایل را تکمیل
کنید و سایر فایلها را در جای صحیح خود قرار دهید. ساختار صحیح فایلها در انتها
ذکر شده است.
پروژه اولیه را از این لینک دانلود کنید. ساختار فایلهای این پروژه به صورت زیر است.
اعلامیه، در بدنهی فایل index.html
، به ترتیب، شامل موارد زیر است:
یک عنوان h1
با محتوای Condolences
تصاویر قربانیان به ترتیب زیر با برچسبهای img
قرار میگیرند. همچنین تمامی
تصاویر از کلاس image
هستند:
zeno
zhi
ziv
zuberi
یک بلوک div
با شناسهی container
بعد از چهار تصویر، شامل موارد زیر:
p
که محتوای آن در ادامه میآید.شکل زیر یک ماشینحساب ساده را نشان میدهد که قرار است برای انجام عملیات سادهی چهارگانه روی اعداد پیادهسازی شود.
میخواهیم رابط کاربری این ماشینحساب را با HTML و CSS پیادهسازی کنیم. بخشی از کدها نوشته شده است که در اختیار شما قرار میگیرد. از شما میخواهیم با تکمیل کدهای CSS و HTML این کار را به پایان برسانید.
پروژه اولیه را از اینجا دانلود کنید. ساختار فایلهای این پروژه به صورت زیر است:
همانطور که در فایل calculator.html
مشاهده میکنید، ساختار عناصر ماشینحساب به صورت زیر است:
از شما میخواهیم بر اساس توضیحات زیر، پیادهسازی ظاهر این ماشینحساب را تکمیل کنید.
#app
🔗#result
🔗#EEE
و رنگ متن #444
است.DigitalNumbers
است.#keypad
🔗#DDD
است.RobotoCondensed
است.#nums
🔗#19676E
و #095057
را به صورت شطرنجی دارند.#ops
🔗+
) نیمی از عرض و یکچهارم ارتفاع این عنصر را دارند.+
) مطابق شکل رنگهای #D34E47
و #B52D26
را به صورت شطرنجی دارند.+
دو برابر بقیه و رنگ آن #C43E37
است.RobotoCondensed
و DigitalNumbers
به شما داده شده است.
باید قبل از استفاده، آنها را با font-face
در فایل style.css
تعریف کنید.میتوانید در صورت لزوم این تغییرات را در فایل HTML بدهید: کلاسهای جدیدی به عناصر اضافه کنید و یا کلاسهای موجود را تغییر دهید، برای عناصری که شناسه ندارند شناسه تعریف کنید، و یا ترتیب کلیدها را در HTML تغییر دهید. تغییرات دیگر مجاز نیستند.
توجه کنید که داوری خودکار بر مبنای شناسه (id) عناصر انجام میشود، پس دقت کنید که شناسههای موجود را تغییر ندهید.
محتوای عناصر (مثلاً حروف +
، ×
، 2
) را تغییر ندهید.
پروژه را با ساختار زیر ارسال کنید.
تغییر تنها در مواردی که با *
مشخص شده مجاز است
و ارسال سایر فایلها الزامی نیست.
در این سوال قصد داریم دو حلقهی مربعی تودرتو بسازیم. هدف نهایی در زیر به تصویر کشیده شده است.
همانطور که میبینید وقتی ماوس روی یک حلقه قرار گیرد، آن را از حلقهی دیگر خارج میکند.
بخشی از پیادهسازی در فایل rectangular_ring.html
صورت گرفته است.
شما باید تنها با استفاده از عناصر این فایل، ویژگیهای مطلوب را در فایلی به نام style.css
بنویسید.
پروژه اولیه را از اینجا دانلود کنید. ساختار فایلهای این پروژه به صورت زیر است.
فایل rectangular_ring.html
شامل عناصر زیر در بدنهی خود است:
#container
همان مربع خاکستری رنگی است که در تصویر دیده میشود.
این بلوک در پسزمینهی حلقهها قرار میگیرد،
هر کدام از ابعاد آن 400px
، فاصلهی آن از هر کدام از اضلاع سمت چپ
و بالای صفحه برابر با 100px
، و رنگ پسزمینهی آن #D5D8DC
است..right
حلقهی سمت راست را تشکیل میدهند.
هر کدام از div
ها یکی از اضلاع حلقه هستند. رنگ پسزمینهی هر کدام از اضلاع این حلقه #2ECC71
است..left
نیز حلقهی سمت چپ را تشکیل میدهند.
هر کدام از div
ها یکی از اضلاع حلقه هستند و رنگ پسزمینهشان #E74C3C
است.#container
در زیر قابل مشاهده است.margin
را برای body
برابر با صفر قرار دهید
و سپس مکان بقیهی عناصر را تعیین کنید تا #container
دقیقا 100px
از بالا و از چپ صفحه فاصله داشته باشد.rectangular_ring.html
را تغییر ندهید؛
تنها کد مورد نظر خود را در فایل style.css
بنویسید.id
) و کلاس عناصر صورت خواهد گرفت؛
بنابراین دقیقا از اسامی تعریف شده در فایل اولیه استفاده کنید.میخواهیم یک صفحه وب ایجاد کنیم که کد Hex یک رنگ را دریافت کند و آن رنگ را به ما نشان دهد.
برای این کار کد HTML زیر را نوشتهایم. از شما میخواهیم عملکرد این صفحه را با استفاده از JavaScript پیادهسازی کنید.
باید به محض تغییر مقدار داخل input، رنگ div بر اساس آن مقدار به روز شود. همچنین میخواهیم در صورتی که کاربر مقدار نامعتبری وارد کرد، رنگ div سیاه شود.
aa
، 4a4b4z
، aaaaaaa
777
، 4f568e
، a8c
تغییرات موردنظر را اعمال کنید و فایل(ها) را به صورت Zip ارسال کنید.
نام فایل HTML اصلی را index.html
قرار دهید.
همچنین میتوانید در کنار آن تعدادی فایل .js
قرار دهید.
توجه کنید که داوری خودکار بر مبنای شناسه (id) عناصر انجام میشود. پس دقت کنید که عناصر، شناسه صحیح داشته باشند.
فرض کنید سیستم به اینترنت متصل نیست، بنابراین از ارجاع به فایلهای موجود در وب (CDN ها) خودداری کنید.
پروژه را با ساختار زیر ارسال کنید.
در این سوال قصد داریم یک بازی ساده چند مرحلهای را پیادهسازی کنیم. نحوه اجرای بازی به این گونه است که در هر مرحله یک نقطه از صفحه به عنوان گنج انتخاب میشود و هر چه قدر که موس را به آن نقطه نزدیکتر کنید رنگ صفحه روشنتر میشود.
همچنین این بازی باید شامل تعدادی مرحله باشد که در هر مرحله نقطهای که به عنوان گنج انتخاب میشود متفاوت است و باید اطلاعات مربوط به مکان گنج را از یک فایل JSON بخوانید.
برای درک جزئیات بیشتر میتوانید این نمونه را ببینید.
پروژه اولیه را از اینجا دانلود کنید.ساختار فایلهای این پروژه به صورت زیر است.
فایل levels.json
:
این فایل مراحل بازی را مشخص میکند و یک ویژگی به نام levels
دارد که حاوی یک آرایه است که مختصات گنج را در آن مرحله مشخص میکند.
اندازه لیست موجود در این فایل هم تعداد مراحل را مشخص میکند.
ویژگی background-color
برای square
:
#000
باشد.منظور از فاصله منهتنی دو نقطه در این سوال مجموع اختلاف مولفه و آنهاست، یعنی اگر دو نقطه و داشته باشیم فاصله آنها برابر با است.
مقدار متنی ویژگی level
:
level
هم باید مقدارش یکی بیشتر شود. در ابتدای بازی در مرحله ۰ هستیم و مقدار ویژگی level
هم باید به صورت Level #id
باشد که #id
شماره مرحله کنونی است.You won!
تغییر کند و رنگ square
هم برای همیشه سفید بماند. (حتی در زمانی که موس از صفحه خارج شد.)تغییرات لازم را در فایل index.html
و در صورت نیاز فایلهای .js
خود را اضافه کنید.
توجه کنید که در هنگام تستکردن ممکن است فایل levels.json
تغییر کند.
levels.json
با خطای Cross Origin
از طرف مرورگر مواجه شدید، به جای باز کردن مستقیم فایل HTML با مرورگر،
پوشه پروژه را با یک وبسرور (مثلاً
python -m http.server
و یا npx http-server
)
serve
کنید، و یا مرورگر FireFox را امتحان کنید.*
مشخص شده مجاز است
و ارسال سایر فایلها الزامی نیست.