გადმოწერეთ სტარტერ კოდი: https://codesandbox.io/p/devbox/dq3skr
თქვენი მიზანია სხვადასხვა ფიგურის ასაწყობად დაამატოთ ღილაკები: თმის, სახის და ტანსაცმლის კატეგორიებში.
ყველა ამ ფოტოს ბმული არის data.js-ში.
- თითოეული კატეგორიისთვის (თმა, სახე და ტანსაცმელი) ეკრანზე map()-ით გამოიტანეთ ღილაკები (სურათებით)
- ღილაკზე დაჭერით აქტიური სურათი (შესაბამისად თმის, სახის ან ტანსაცმლის) უნდა შეიცვალოს და მარცხენა მხარეს ფიგურა განახლდეს (ახალი სურათი ჩაიტვირთოს, დინამიური src ატრიბუტი)
- ღილაკებს დაამატეთ active სტილი: მონიშნულ ვარიანტს გარშემო ჩარჩო უნდა ჰქონდეს, როგორც სურათში ჩანს (მოწითალო წყვეტილი ჩარჩო)
დაამატეთ randomize ღილაკი, რომელიც შემთხვევითობის პრინციპით ამოარჩევს თმას, სახეს და ტანსაცმელს
thumbnail ლინკები ღილაკების სურათებია:
preview ლინკები ფიგურის სურათებია:
