Projekts - Darāmo darbu lietotne turpinājums

Atjaunots: 2024-09-11

Turpinājums pielietot zināšanas par JS, HTML, CSS, Bootstrap, lai izstrādātu darāmo darbu lietotni.

Saturs

Uzdevuma apraksts

Pamata prasības

Sākotnējo lietotni nepieciešams papildināt ar sekojošu funkcionalitāti:

  1. Iespēja labot ierakstu;
  2. Iespēja pievienot ierakstu, nospiežot 'enter' taustiņu.

Papildus funkcionalitāte

  1. Izmantojot Date.now(), tiek pievienots laika zīme, kad ieraksts ir pievienots.
  2. Izmantojot toLocaleDateString() un toLocaleTimeString(), tiek parādīts laiks un datums, kad ieraksts ir pievienots atbilstoši Latvijas formātam.
  3. Izmantojot localStorage, ieraksti tiek saglabāti pārlūkprogrammas atmiņā un tiek atjaunoti, atverot lapu nākamreiz.

Sasniedzamie rezultāti

  • JS: spēj lietot IF un loģiskos operatorus;
  • HTML: atšķir un izmanto span, div, ul, li, input, button, h1, p elementus;
  • JS: spēj pievienot HTML elementu programmiski ar JS;
  • JS: spēj izmainīt konkrēta HTML elementa saturu ar JS;
  • JS: spēj atrast HTML elementu pēc id;
  • JS: spēj pievienot HTML elementam click notikuma funkciju;
  • JS: spēj pievienot HTML elementam keypress notikuma funkciju, reaģējot uz konkrētu taustiņu;
  • CSS: spēj noformēt elementus pēc class;

Darba gaita

  • izplānot un uzzīmēt blokshēmu procesam, kā tiks labots uzdevums;
  • izplānot nepieciešamos papildinājumus HTML kodā;
  • izplānot nepieciešamās izmaiņas JS kodā;
  • izstrādāt 'labošanas' iespēju;
  • izstrādāt 'enter' taustiņa funkcionalitāti;

Paredzamais izpildes laiks: 180-240 min

Nepieciešamie resursi

Nepieciešamās zināšanas

Var izmantot WEB Zinašanu krātuvi, kur ir apkopojums par pamata lietām, kas ir jāzina par JavaScript, HTML, CSS un Bootstrap 5, lai uzsāktu Programmēšana II kursu.

Atkārtojums

  • Kā importēt CSS no faila;
  • Kā importēt JS no faila;
  • Kā importēt Bootstrap CSS un JS;
  • Kā pievienot Bootstrap ikonas;

Uzdevuma izpildei

  • Kas ir id=" ";
  • Kāda ir atšķirība starp id un class
  • Kas ir Date.now();
  • Kā veidot dinamisku id ar string+number;
  • Kas ir HTML elements span un kad to izmantot;
  • Kad izmantot JS createElement();
  • Kad izmantot JS appendChild();
  • Kā nolasīt no HTML elementa tekstu ar JS .textContent;
  • Kā izmantot addEventListener ar ārēju funkciju;
  • Kā nolasīt no HTML elementa tekstu ar JS .textContent;
  • Kā padot parametru uz funkciju;
  • Kā pievienot keypress notikumu HTML elementam;
  • Kā izmanot event.keyCode;
  • Kā izmantot IF loģiskos operatorus;
  • Kā noteikt vai JS ir atradis HTML elementu pēc id;

Ieteikumi

Programmēšana II SR

Aktivitāte vērsta uz šādām Programmēšana II sasniedzamajiem rezultātiem (SR):

  • Prasmes: Izvēlas piemērotu programmatūras izstrādes modeli, programmēšanas valodu un programmatūras izstrādes vidi.
  • Prasmes: Izmanto programmēšanas valodu un to bibliotēku dokumentāciju un palīdzības sistēmu, lai patstāvīgi apgūtu citas to piedāvātās iespējas.
  • Prasmes: Veido programmas kādā no programmēšanas valodām, t. sk objektorientētajā valodā.
  • Prasmes: Veic atkļūdošanu.
  • Ieradumi: Izmanto labās prakses principus programmas koda pierakstā un strukturēšanā.
Autors
Mārtiņš Bērziņš avatar
Mārtiņš Bērziņš

Uzraksti atsauksmi uz [email protected] [email protected]

Smiltenes vidusskolas logo