ixtk

Express-ის პროექტის შექმნა

ვამატებთ ახალ ფოლდერს და ვხსნით VSCode-ში

1. VSCode-ში ვხსნით ტერმინალს (Terminal -> New Terminal)
2. ვწერთ ამ ბრძანებებს (ერთ ხაზად ცალ-ცალკე)

npm init -y

ixtk

შექმენი მოცემული ინტეფეისი

HTML-ში უნდა გქონდეს მხოლოდ input, button (დამატების ღილაკი) და ul (ფილმების სია, თავიდან ცარიელი, ან რამდენიმე საწყისი ფილმით). ღილაკზე უნდა გეწეროს onclick.

დამატების ღილაკზე დაჭერისას

1. მოძებნე input ელემენტი და შიგნით ჩაწერილი მნიშვნელობა ცვლადში შეინახე
2. შექმენი li ელემენტი, შიგნით span და ორი button tag-ით
3. span ელემენტში ჩაწერე მომხმარებლის შეყვანილი ფილმის სახელი
4. button tag-ებში ტექსტად ჩაწერე "წაშლა" და "ნაყურები"

ixtk

ახალი თემები

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

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

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

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

• 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 phrase = "everything is awesome"
const name = "emmet"

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

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

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

@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

გახსენით 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

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

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

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

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