Jump to content
php.lv forumi

Uzdevums no Jūsu puses.


Dēmians

Recommended Posts

Sveiki.

 

Ar HTML5, CSS3, JS nodarbojos tīri hobija līmenī. Frontends vienmēr in interesējis vairāk kā bekends.

 

Tādu domu prātā paturot, vēlos, lai Jūs man uzdodat uzdevumu.

 

Vai tas būtu dizains, kāds mazs štruntiņš (news card, menu, etc), vienalga kas. Parādat, ko man uztaisīt un pēc pabeigšanas, ielikšu visu (kodu), Jūsu apskatei.

 

Tad būtu vēlams, ka Jūs man norādat uz manām kļūdām, ko varētu pielabot, kāds ir mans kods (haotisks, labi rakstīts u.t.t.) un beigās iedodat atzīmi.

 

Jo tikai sēžot pie datora, taisot, sāk zust motivācija un nezinu cik labi, pareizi viss notiek.

 

Liels paldies un gaidu uz Jūsu atsaucību.

 

Dēmians

Link to comment
Share on other sites

Uztaisi formu ar vairākiem laukiem

1. Vārds

2. E-pasts

3. Selectbox (piemēram, valsts)

4. Datums

 

Visiem laukiem validāciju. Būtu labi, jau aizpildot lauku brīdināt lietotāju, ja lauks aizpildīts nepareizi

Selectbox un Datuma laukus taisi cik advancētus vien vari

Link to comment
Share on other sites

Uztaisi formu ar vairākiem laukiem

1. Vārds

2. E-pasts

3. Selectbox (piemēram, valsts)

4. Datums

 

Visiem laukiem validāciju. Būtu labi, jau aizpildot lauku brīdināt lietotāju, ja lauks aizpildīts nepareizi

Selectbox un Datuma laukus taisi cik advancētus vien vari

 

@Kasspars - Ceru, ka pareizi sapratu Tavu domu.

 

Nezinu, cik pareizi man tas viss sanāca, bet iznākums man ir šāds - https://jsfiddle.net/gr22exuv/1/

 

Edit: JS atteicās strādāt fidlī. Uz PC viss ir labi, bet fidlī nav! Varbūt tādā situācijā, labāk ir izmantot radio pogas, nezinu kādēļ ieliku tur čekboksus!

Link to comment
Share on other sites

1. Ar zaļu tiek pasvītroti gan tukši, gan pareizi "vārds" un "e-pasts" lauciņi. Tas mulsina lietotāju
2. Būtu forši, ja spiežot "Sūtīt" tomēr parādītos kāds kļūdas paziņojums

3. "checkbox" vajadzētu strādāt spiežot uz blakus esošā vārda

4. "checkbox" nevajadzētu būt iespējai ieķeksēt tikai vienu, tas ir "radio"

5. Datuma izvēlne nestrādā (vismaz Chrome)

6. Tekstiem & virsrakstiem vajadzētu būt kaut kādos tagos. HTML validators palīdzēs.

7. Lauciņus vajadzētu ieturēt kaut kādā vienotā stilā. 

Noteikti vari nopelnīt kādu plusiņu par to, ja uztaisīsi šo responsive.

Gan jau kolēģi papildinās sarakstu.

Link to comment
Share on other sites

Lūdzu neizmanto latviešu valodu kodā (id="vards" name="vards", name="valsts", onclick="tikaiViens()", class="poga"). Izskatās stulbi un nav konsistenti ar visu pārējo kodu.

 

E-pasta elementam nevajag rakstīt kaut kādu patternu, type="email" jau nodrošina pattern matchingu. Tādi pašrakstīti patterni tikai visu sačakarē lietotājiem.

 

Par datumu runājot: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/time

Šis elements nav domāts datuma izvēlei, tikai attēlošanai: "This element is intended to be used presenting dates and times in a machine readable format."

Ja tu vēlies izmantot tikai browseru built-in funkcionalitāti, tad vari skatīties:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms/The_native_form_widgets#Date_and_time_picker

 

<input type="date" value="2016-10-21" />

 

Tiesa, šim elementam ir drausmīgi slikts browser support, tāpēc programmētāji vienmēr izmanto kaut kādu JS plaginu, kas renderē datuma izvēlni.

Piemēram: https://github.com/dbushell/Pikaday

Link to comment
Share on other sites

Kad tiec galā ar šo uzdevumu, parādi kā var uztaisīt, piemēram, testu:

 

- Tev ir 3 jautājumi (reizē rādās tikai viens), kur katram ir 4 atbilžu varianti.

- Ir jāizvēlas pareizas variants un jādodas pie nākamā jautājuma, kur beigās parāda, uz cik esi atbildējis pareizi.

- Uz nākamo soli nevar aiziet, ja nav izvēlēts neviens atbilžu variants.

- Vienam no jautājumiem var būt divas pareizās atbildes, kur, ja izvēlēts viena vai abas - rezultāts tiek ieskaitīts. Ja tiek izvēlēts viens pareizs un viens nepareizs - atbilde netiek ieskaitīta

Link to comment
Share on other sites

Super! Paldies @yozhis un @jurchiks, ķeršos klāt!

 

@jurchiks - Varbūt es kļūdos, bet ja nenorāda patternu un lieto tikai type="email", tad laiž arī šādas adreses cauri - foo@localhost, bet paldies, apskatīšos kārtīgāk.

 

@jurgenz - Okai, pabeigšu iesākto uzdevumu un tad pievērsīšos Tavam.

Edited by Dēmians
Link to comment
Share on other sites

Tādi e-pasti īstenībā ir valīdi, ja skatās oficiālos standartus. Bet jebkurā gadījumā, tavs uzdevums nav validēt e-pastu pēc kaut kādiem paša izdomātiem standartiem. type="email" jau validē e-pastu pēc RFC, un ar to pietiek.

Edited by jurchiks
Link to comment
Share on other sites

Gala iznākums, man izdevās šāds - http://wckd.lv/stuff/form/

 

Noņēmu čekboksus nost, pieliku @jurchiks doto datuma fīčiņu un nomainīju epasta laukam uz type="email" un ir arī responsīvs tagad (laikam). Input laukiem galā pieliku "required", jo var arī gadīties, ka lietotājam ir izslēgts JS.

 

Kad tiec galā ar šo uzdevumu, parādi kā var uztaisīt, piemēram, testu:

 

- Tev ir 3 jautājumi (reizē rādās tikai viens), kur katram ir 4 atbilžu varianti.

- Ir jāizvēlas pareizas variants un jādodas pie nākamā jautājuma, kur beigās parāda, uz cik esi atbildējis pareizi.

- Uz nākamo soli nevar aiziet, ja nav izvēlēts neviens atbilžu variants.

- Vienam no jautājumiem var būt divas pareizās atbildes, kur, ja izvēlēts viena vai abas - rezultāts tiek ieskaitīts. Ja tiek izvēlēts viens pareizs un viens nepareizs - atbilde netiek ieskaitīta

 

@jurgenz - Nezinu vai esmu tik ļoti izglītots JS, bet mēģināšu! :)

Link to comment
Share on other sites

@jurchiks - Sapratu, kur bija mana vaina. Ar JS vēl neesmu tik lielos draugos, bet pamazām mācos. Liels paldies, ka norādīji kļūdu. Kā viss pārējais izskatās? Ir okai?

 

@jurgenz - Šis nebūs. Nemācēšu. Vēl krietni ir jāpaaugās.

 

Varbūt kādu citu uzdevumu var? Kaut ko uz dizaina pusi?

Edited by Dēmians
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...