Giter VIP home page Giter VIP logo

opomniki's Introduction

Javascript in razvoj enostavnih odjemalskih aplikacij

2. vaje pri predmetu Osnove informacijskih sistemov

Vzpostavitev okolja

  • Izdelajte lastno vejo (fork) projekta Opomniki.
  • V okolju Cloud9 si z orodjem git ustvarite kopijo projekta.
  • Sledite spodnjim navodilom, da boste dopolnili obstoječ projekt tako, da bo vaša končna verzija aplikacije z delujočimi funkcionalnostmi izgledala sledeče:

Prijava Opomniki

Naloga

V mapi opomniki se nahaja delno izdelana spletna stran opomniki.html. Ker je razvijalcem majhnega startupa zmanjkalo časa za dokončno izdelavo spletne strani, je vaša naloga, da podprete sledeče funkcionalnosti.

  1. V zaglavje HTML datoteke opomniki.html dodajte povezavo na datoteko s stili (stili.css) in na datoteko z Javascript kodo (skripta.js).

  2. Na prvotni celozaslonski maski nastavite, da je 15% prosojna, da se lahko vidijo tudi spodnje komponente. Spremembo izvedite v datoteki stili.css.

  3. Implementirajte funkcijo, ki naj se izvede ob kliku na gumb Potrdi. Funkcija naj stori sledeče:

    • pridobi vrednost vnešenega imena
    • nastavi vrednost vnešenega imena kot HTML vsebino v polje z id-jem uporabnik
    • skrije prekrivno okno (HTML element s stilom pokrivalo), da se pokaže glavna vsebina strani.
  4. Vaše spremembe shranite s commit sporočilom "Implementirana prijava" in spremembe uveljavite na oddaljenem git strežniku.

  5. V svojem repozitoriju izdelajte lokalno in oddaljeno razvojno vejo z imenom "opomniki" ter nadaljujte razvoj v novi veji.

  6. Implementirajte funkcijo dodaj opomnik, ki se izvede ob kliku na gumb Dodaj opomnik. Funkcija naj stori sledeče:

    • pridobi vnešeni vrednosti za naziv in čas trajanja opomnika
    • resetira vrednosti vnosnih polj
    • v HTML element z id-jem opomniki doda sledečo HTML kodo, v katero vstavite vrednosti, ki jih je vnesel uporabnik:
NAZIV_OPOMNIKA
Opomnik čez CAS_OPOMNIKA sekund.
```
  1. Ko vam dodajanje novih opomnikov deluje, commitajte spremembe v vašo trenutno vejo s komentarjem "Dodajanje opomnikov". Spremembe uveljavite tudi na istoimenski oddaljeni veji in nato združite spremembe v glavno vejo (master). Razvoj nadaljujte na glavni veji razvoja.
  2. V spodnjem delu dokumenta skripta.js boste opazili del kode, ki posodablja opomnike. Vrstica setInterval(posodobiOpomnike, 1000) definira, da se funkcija posodobiOpomnike pokliče enkrat na sekundo. Zaradi časovnih omejitev pa funkcija ni popolnoma implementirana, zato jo dokončajte.
  3. Poskrbite za lepši grafični izgled spletne strani in HTML komponenti z id-jem opomniki dodajte že pripravljena stila senca in rob. Prav tako ta dva stila dodajte komponenti, ki jo dodate z ustvarjanjem novega opomnika.
  4. Commitajte spremembe na glavni veji s komentarjem "Stran pripravljena za produkcijo" in uveljavite spremembe tudi v oddaljenem repozitoriju.

opomniki's People

Contributors

domengasperlin avatar szitnik avatar

Watchers

James Cloos avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.