Sunteți pe pagina 1din 5

Fig 1.

Prima linie din cod este un support pentru formatul html ce forteaza SO sa deschida fisierul cu o
aplicatie(browser) compatibila.

2 lb in eng

In linia de cod cu link se face legatura cu un fisier extern de tip cascading stylesheet ce va determina
orice stil/aspect pentru pagina noastra

Linia 6 este titlul pagini

Fig 1.2

In linia 9(heading) este numele bot-ului

Liniile 10-12 reprezinta un container, gol, in care se vor introducere paragrafe cu mesajele noastre,
respectiv raspunsurile bot-ului
Container-ul 13-16 contine un input de tip text cu autofocus(adica la pornirea paginii web input-ul este
focusat) unde se poate introduce text si un buton care atunci cand se face click pe el activeaza o functie
(sendMessage())

Fig 2.1

De la linia 1 pana la linia 4 se stabilesc reguli de stil pentru body(adica intreg corpul cu informatii al site-
ului) si anume o culoare de fundal formata din 3 culori RGB(rosu, verde, albastru) si a(rgba) pentru
opacitate.

Pentru heading am centrat text-ul si am ales un font ‘Times New Roman’

De la linia 10 este definite o clasa (.computer) si are o culoare de fundal si o culoare pentru text

Linia 15 -||-

De la linia 20 este definit un id(#container) ce contine reguli de stil pentru container-ul in care vor fi
introduse mesajele noastre si ale bot-ului
Fig 2.2

La linia 27 se stabileste o regula pentru toate paragrafele continute in div-ul cu id-ul container, si anume
dimensiunea font-ului

La linia 31 sunt reguli de aspect pentru container-ul ce contine input-ul si butonul

De la linia 37 se stabileste format-ul pentru input: lungimea, inaltimea, dimensiunea font-ului si font-ul.

Liniile 44-54 sunt reguli de stil pentru buton: -color: white (culoarea text-ului)

-background-color: royalblue (culoarea de fundal)

-margin: 0 ( fara margini)

-text-decoration: none (sa nu mai existe alte aspecte


aduse text-ului, inafara de cele stabilite de noi)

-outline: none (fara contur)


-border: 0 (fara linii de bordure)

-width/height (lungimea, inaltimea in pixeli)

-border-radius: 4px (o rotunjire de 4px pe fiecare colt al


buton-ului)

Fig 3.1

De la linia 1 pana la linia 3 sunt definite 3 variabile ce contin 3 elemente din html selectate dupa ID-uri.

Pentru variablia text(linia 6) adaugam o functionalitate la un eveniment si anume “keyup”(apasarea unei


key/taste), codul 13 reprezinta tasta ENTER.

Pe linia 10 definim o variabila para care va crea un element de tip <p>(paragraf)

Pe linia 11 ii adaugam elementului creat mai devreme un text(stocat in variabila node)

Apoi ii adaugam tag-ului <p> text-ul stocat in “node”


Pe linia 13 ii adaugam o clasa (.user)

Dupa care il introducem in container (div-ul cu id-ul container)

https://www.zeusservice.ro/download/tutoriale-case-de-marcat/coduri-de-eroare

var – declararea unei variabile

parseInt(string, baza) – transformarea unui string in numar

prompt – o casuta de prompt/input

switch() – cazuri

default – actiunea in cazul in care nu este ales un caz

window.location.href – redirectionarea catre un link