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>
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 = 'ტექსტი შეიცვალა';
});
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);
}
}
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: '...',
},
// ...
];
}