HTML & CSS

ვებგვერდის სტრუქტურა და სტილიზაცია

HTML & CSS ლოგო დაიწყე
HTML
<!doctype html>
<html lang="en">
  <head>
    <title>ვებ გვერდის სათაური</title>
    <style>
      h1 {
        color: #1890ff;
      }
    </style>
  </head>
  <body>
    <h1>სათაური</h1>
    <p>პარაგრაფი</p>
    <img src="./image.png" alt="სურათი" />
    <a href="https://github.com/educata/iswavle">Github</a>
    <button class="btn">ღილაკი</button>
  </body>
</html>

JavaScript

ინტერაქციული ვებ-აპლიკაციებისთვის

JavaScript ლოგო დაიწყე
JS
console.log('გამარჯობა!');

const h1 = document.querySelector('h1');
const btn = document.querySelector('.btn');

btn.addEventListener('click', () => {
  alert('ღილაკზე დაჭერის ივენთი');
  h1.style.fontSize = '22px';
  h1.style.fontWeight = '200';
  h1.style.fontStyle = 'italic';
  h1.style.color = 'green';
  h1.style.textAlign = 'center';
  h1.textContent = 'ტექსტი შეიცვალა';
});

TypeScript

მკაცრადტიპიზირებული ჯავასკრიპტი

TypeScript ლოგო დაიწყე
TS
type Params = Record<string, string>;

interface ContentLoader<T> {
  getContent(params: Params): Promise<T | null>;
}

class MyLoader implements ContentLoader {
  protected readonly apiURL = 'https://api.everrest.educata.dev';

  public getContent(params: Params): Promise<T | null> {
    return this.fetchContentFromEverREST(params);
  }

  private fetchContentFromEverREST(params) {
    return fetch(this.apiURL, params);
  }
}

Angular

Enterprise დონის ვებ-აპლიკაციები

Angular ლოგო დაიწყე
TS
@Component({
  selector: 'sw-home',
  standalone: true,
  templateUrl: './home.component.html',
  styleUrl: './home.component.less',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export default class HomeComponent {
  readonly showcases = [
    {
      title: 'HTML & CSS',
      description: 'ვებგვერდის სტრუქტურა და სტილიზაცია',
      image: '/assets/images/html-css.png',
      routerLink: '/doc/guides/html-css',
      code: '...',
    },
    {
      title: 'JavaScript',
      description: 'დინამიკურობისა და ინტერაქციულობის დასამატებლად',
      image: '/assets/images/js.png',
      routerLink: '/doc/guides/javascript',
      code: '...',
    },
    // ...
  ];
}