ixtk

1. გამოიყენეთ განახლებული roomData

const roomData = {
  single: {
    img: 'https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/cozy-single-hotel-room-with-one-bed-VyEDvoNKhePzyx3AyLwkJoAf0CXS6Y.jpg',
    price: 99,
    title: 'Single Room',
    description: 'Perfect for solo travelers seeking comfort',
 },

ixtk

import { useState } from "react";
import pieces from "./data";
import "./App.css";

function App() {
  const [expressionIndex, setExpressionIndex] = useState(2);
  const [hairIndex, setHairIndex] = useState(2);
  const [outfitIndex, setOutfitIndex] = useState(3);

  const randomize = () => {

ixtk

გადმოწერეთ სტარტერ კოდი: https://codesandbox.io/p/devbox/dq3skr

თქვენი მიზანია სხვადასხვა ფიგურის ასაწყობად დაამატოთ ღილაკები: თმის, სახის და ტანსაცმლის კატეგორიებში.

ყველა ამ ფოტოს ბმული არის data.js-ში.

1. თითოეული კატეგორიისთვის (თმა, სახე და ტანსაცმელი) ეკრანზე map()-ით გამოიტანეთ ღილაკები (სურათებით)

ixtk

გახსენით job listings პროექტის ბმული: https://stackblitz.com/edit/vitejs-vite-io9aoctc?file=src%2FApp.jsx

კოდი გადმოწერეთ თქვენს კომპიუტერებში და გადახედეთ რა წერია, როგორ მუშაობს.

დავალება ეხება კომპონენტებად დაყოფას და პირობით rendering-ს. გამოიყენეთ ?, &&, || ოპერატორები ან if/else/else if.

1. თუ ვაკანსია არის new ტიპის, გამოიტანეთ badge "new". სხვა შემთხვევაში არაფერი.
2. თუ ვაკანსია არის featured ტიპის, გამოიტანეთ badge "featured" და მარცხენა კიდეზე დაამატეთ მწვანე highlight. სხვა შემთხვევაში არაფერი.
3. თუ ვაკანსიას არ აქვს კომპანიის ლოგო (logo: null data.json-ში), გამოიტანეთ public/images/company-placeholder.svg სურათი. თუმცა ხელით არ უნდა შეცვალოთ data.json. Javascript-ით უნდა შეამოწმოთ არის თუ არა null logo ატრიბუტი. ეს სურათი უნდა იყოს წრიული, როგორც დანარჩენი კომპანიის ლოგოები.
4. ვაკანსიის ბარათში მესამე სვეტად დაამატეთ tag-ები: ახალ ფაილში შექმენით კომპონენტი TagList.jsx, რომელსაც prop-ად გადაეცემა tags სია. ამ სიის მიხედვით უნდა დააგენერიროს tag ელემენტები (ღილაკები ან

ixtk

@import url(https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css);

:root {
  --pico-form-element-spacing-vertical: 5px;
  --pico-form-element-spacing-horizontal: 15px;
  --pico-spacing: 0px;
}

.products-container {
  display: grid;

ixtk

[
  {
    "id": 1,
    "title": "Sony WH-1000XM3 Bluetooth Wireless Over Ear Headphones with Mic (Silver)",
    "image": "https://storage.googleapis.com/fir-auth-1c3bc.appspot.com/1692947383286-714WUJlhbLS._SL1500_.jpg",
    "price": 773,
    "description": "Digital noise cancelling : Industry leading Active Noise Cancellation (ANC) lends a personalized, virtually soundproof experience at any situation\r\nHi-Res Audio : A built-in amplifier integrated in HD Noise Cancelling Processor QN1 realises the best-in-class signal-to-noise ratio and low distortion for portable devices.\r\nDriver Unit : Powerful 40-mm drivers with Liquid Crystal Polymer (LCP) diaphragms make the headphones perfect for handling heavy beats and can reproduce a full range of frequencies up to 40 kHz.\r\nVoice assistant : Alexa enabled (In-built) for voice access to music, information and more. Activate with a simple touch. Frequency response: 4 Hz-40,000 Hz",
    "brand": "sony",
    "model": "WH-1000XM3",
    "color": "silver",

ixtk

const phrase = "everything is awesome"
const name = "emmet"

// 1. კონსოლით გამოაჩინე name-ის სიგრძე
// 2. კონსოლით გამოაჩინე name-ის პირველი და ბოლო ასო
// 3. კონსოლით გამოაჩინე name, ოღონდ ყველა ასო დიდად უნდა ეწეროს e -> E
// 4. კონსოლით გამოაჩინე phrase, ოღონდ სიცარიელე (space) ჩაანაცვლე ტირეებით

const fruits = ["Apple", "Cherry", "Melon"]

ixtk

ფონტები, დიზაინი და ფერები

• Book Nook Figma Board
• Lato – Google Fonts
• Libre Baskerville – Google Fonts

--col-primary: hsl(25, 76%, 31%);
--col-secondary: hsl(43, 74%, 49%);
--col-bg-primary: hsla(42, 31%, 94%, 0.5);

ixtk

const books = [
  {
    title: "The Hitchhiker's Guide to the Galaxy",
    author: 'Douglas Adams',
    yearPublished: 1979,
    genre: 'Science Fiction',
    pages: 224,
    isbn: '978-0345391803',
    isAvailable: true,
    imageUrl:

ixtk

ახალი თემები

• სია - ელემენტების ერთობლიობა ([1, 2, 3], ['ben', 'rachel', 'donny'])
• ობიექტი - ერთი "ელემენტი", რომელიც შეიცავს ნებისმიერი მნიშვნელობის რამდენიმე ატრიბუტს (მაგ.: const car = { color: "red", year: 2019 })
• ციკლი, loop (ამ დავალებებში გამოიყენე for of loop)
• ინდექსები - სიიდან/ტექსტიდან კონკრეტულ პოზიციაზე მყოფი ელემენტების წაკითხვა

მოცემულია string-ების (ტექსტის) სია (Javascript):