Vydělávej až 160.000 Kč měsíčně! Akreditované rekvalifikační kurzy s garancí práce od 0 Kč. Více informací.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

Soutěž: Machr na JavaScript - Interaktivní výběr intervalu

Soutěž již skončila

Zadání

V tomto machrovi si zkusíte naprogramovat výběr intervalu, který umožní uživateli zadat rozsah od a do. Příklad najdete v různých eshopech a srovnávačích, kde obvykle můžete vyhledávat produkty v cenovém rozmezí. Odstrašujícím příkladem je heureka, kde se hodnoty zadávají do textových políček a ukázkový příklad je v eshopu CZC, kde máte interaktivní posuvník. Je jen na Vás jak to uděláte. Můžete udělat přesně to co je na CZC, ale kreativitě se meze nekladou. Jako minimum si stanovme, že script dostane hraniční hodnoty a mezi nimi v nejjednodušším případě zobrazí posuvník.

Můžete použít jQuery. Tentokrát nesmíte použít JavaScriptové nadstavby.

Hodnotit se bude spousta věcí. Mimo jiné tentokrát dostanete +10 (což je celkem dost) pokud naimplementujete nějakou (alespoň trochu užitečnou) feature, kterou nebude mít naimplementovanou nikdo jiný. Očekává se, že aplikace bude použitelná a i intuitivní na mobilním telefonu. Do poznámky připište co si myslíte, že bude ta unikátní feature (pokud bude).

Výhra

Vítěz dostane placku Machr, pár samolepek a ocenění do portfolia.

Výhra

Výsledky

Jméno bodů Řešení ( Stáhnout vše )
Neaktivní uživatel 70 Stáhnout řešení
dave_23 70 Stáhnout řešení
alfonz 65 Stáhnout řešení
Jan Lupčík 60 Stáhnout řešení
Ondřej Pohořelý 0 Stáhnout řešení
Pokusný králík 0 Stáhnout řešení
Aktivity
Avatar
Michal Žůrek - misaz:29.11.2015 13:03

V tomto machrovi si zkusíte naprogramovat výběr intervalu., který umožní uživateli zadat rozsah od a do.

Soutěž končí 5. prosince 13:00, tak se nezapomeň zapojit! :)

 
Odpovědět
29.11.2015 13:03
Avatar
Michal Žůrek - misaz:30.11.2015 20:02

Jenom teda možná dodám, že když je ten Machr na JavaScript, tak jsou z bezpečnostních a preventivních důvodů diskvalifikována všechna řešení obsahující soubor s příponou exe. To jsem zapomněl napsat, no.

 
Nahoru Odpovědět
30.11.2015 20:02
Avatar
Jan Lupčík
Tvůrce
Avatar
Odpovídá na Michal Žůrek - misaz
Jan Lupčík:30.11.2015 20:05

Počkat, počkat, počkat ... JS jako .exe? Vážně? :D
//EDIT: jinak se taky o něco pokusím. :)

Editováno 30.11.2015 20:05
Nahoru Odpovědět
30.11.2015 20:05
TruckersMP vývojář
Avatar
Odpovídá na Jan Lupčík
Michal Žůrek - misaz:30.11.2015 20:15

jo, ten borec odevzdal zip archív kde je jedno jediné exe. Ale vzhledem k poznámce a tomu že se exe jmenuje Technic_Launcher_64bit­.exe, tak předpokládám, že jde jenom o troll. To by snad měla být nějaká hovadina do minecraftu, ale nemám momentálně žádný sandboxový PC abych to mohl vyzkoušet.

 
Nahoru Odpovědět
30.11.2015 20:15
Avatar
vodacek
Tvůrce
Avatar
Odpovídá na Michal Žůrek - misaz
vodacek:30.11.2015 20:19

nevím co se vám nezdá, já běžně pouštím z C# aplikace kód v JavaScriptu, tedy né že bych o to nějak stál ale už to tak je :-D

 
Nahoru Odpovědět
30.11.2015 20:19
Avatar
Odpovídá na vodacek
Michal Žůrek - misaz:30.11.2015 20:22

tak tady v této soutěži se omezíme na soubory s příponami js, css a html.

 
Nahoru Odpovědět
30.11.2015 20:22
Avatar
vodacek
Tvůrce
Avatar
Odpovídá na Michal Žůrek - misaz
vodacek:30.11.2015 20:38

já jen poukazoval na to, že to možné je :-)

 
Nahoru Odpovědět
30.11.2015 20:38
Avatar
Ondřej Pohořelý:30.11.2015 21:18

Dal s to sem aby sem přišly lidi a začaly odevzdavat (aby si toho všimli) jinak 100% no virus trust me

Nahoru Odpovědět
30.11.2015 21:18
Nezastavuj se dlouho protože život nikdy nečeká !
Avatar
martinkhla
Člen
Avatar
martinkhla:1.12.2015 9:48

Je povolené použiť jQuery UI?

Nahoru Odpovědět
1.12.2015 9:48
Logic will get you from A to B. Imagination will take you everywhere. - Albert Einstein
Avatar
Nahoru Odpovědět
1.12.2015 10:39
Kolik jazyků umíš, tolikrát jsi programátor.
Avatar
Odpovídá na martinkhla
Michal Žůrek - misaz:1.12.2015 11:57

Ne, pouze čistá jQuery.

 
Nahoru Odpovědět
1.12.2015 11:57
Avatar
Odpovídá na Michal Žůrek - misaz
Neaktivní uživatel:2.12.2015 13:04

Dotaz: mala vypomoc od stackoverflow komunity, resp funkce drag se bere jako knihovna? Sam jsem na drag prisel, ale ne na containment, tedy aby mi to nevyjizdelo mimo nejake hranice.

PS: sorry ze pisu bez diakritiky, jsem na skolnim pc a prez linux ve virtualu da obejit zablokovani internetu :D a jsem moc liny vzdy nastavovat klavesnici na ceskou....

Nahoru Odpovědět
2.12.2015 13:04
Neaktivní uživatelský účet
Avatar
Odpovídá na Neaktivní uživatel
Michal Žůrek - misaz:2.12.2015 14:26

co je funkce drag, tak se může jmenovat cokoliv, pošli odkaz kde jsi to našel. Třeba do PM jestli ho nechceš zveřejňovat přímo.

 
Nahoru Odpovědět
2.12.2015 14:26
Avatar
Odpovídá na Michal Žůrek - misaz
Neaktivní uživatel:3.12.2015 22:44

Budou nějaký bonus bodíky za prezentaci schopností, menší dokumentaci a několik stylů sliderů? :D

Nahoru Odpovědět
3.12.2015 22:44
Neaktivní uživatelský účet
Avatar
Jan Lupčík
Tvůrce
Avatar
Jan Lupčík:4.12.2015 18:54

Tak toto je větší oříšek než by se mohlo zdát. :D

Nahoru Odpovědět
4.12.2015 18:54
TruckersMP vývojář
Avatar
 
Nahoru Odpovědět
4.12.2015 20:02
Avatar
Jan Lupčík
Tvůrce
Avatar
Odpovídá na Michal Žůrek - misaz
Jan Lupčík:4.12.2015 20:50

Tolik počítání jsem ještě nikdy v jednom kódu nepoužil. :)

Nahoru Odpovědět
4.12.2015 20:50
TruckersMP vývojář
Avatar
alfonz
Člen
Avatar
alfonz:5.12.2015 2:43

Můžeme odevzadat rovnou celý solution z VS?

Nahoru Odpovědět
5.12.2015 2:43
lmao
Avatar
Odpovídá na alfonz
Michal Žůrek - misaz:5.12.2015 10:34

jo, ale musí tam být to co tam má být.

 
Nahoru Odpovědět
5.12.2015 10:34
Avatar
Jan Lupčík
Tvůrce
Avatar
Jan Lupčík:5.12.2015 12:49

10 minut do konce a já zjistil trochu větší chybu. Tak tohle bude boj. :D

Nahoru Odpovědět
5.12.2015 12:49
TruckersMP vývojář
Avatar
Michal Žůrek - misaz:5.12.2015 14:36

Díky všem za účast, zde jsou výsledky:

Ondřej Pohořelý - 0 bodů
diskvalifikace

Neaktivní uživatel - 70 bodů
První věc, která mě u tvého kódu trochu zarazila je, že jeho implementace neobsahuje jediný komentář. Dále by bylo vhodné zvážit rozdělení kódu do více než 2 metod. Nicméně v kódu je vidět, že jQuery využíváš opravdu naplno a výsledkem je, že tě opravdu odstiňuje od těch špatných vlastností JavaScriptu. Využíváš i takových „skrytých“ částí JavaScriptu, jako je operátor in. Trošku zvláštně kombinuješ styly psaní závorek. U funkcí je obvykle píšeš až na nový řádek

this.GetValues = function()
{
    ...
}

A u callbacků je obvykle zase píšeš na stejný řádek.

el.on("slider:handlerMove", function(){
    ...
});

Některé řádky jsou doslova hnusné, třeba

if(x>bor_x_min) x = (drg_x + drg_w) < bor_x_max ? drg_x : bor_x_max - drg_w;

Opět zde kombinuješ několik stylů psaní kódu, zatímco v podmínce mezi operátorem a operandy mezery neděláš, v tom za podmínkou je zase děláš. Tady jde přesně vidět, že tomu schází komentář. Na první pohled je tam totiž podmínka s nějakým ternárním operátorem. Pak si teprve člověk všímá, že je tam nějaké větší než a menší než. Opravdu by zde bylo vhodné zvážit rozdělení na více řádku a nějakého komentáře.

Asi 4 řádky v kódu jsou strašně dlouhé, třeba řádek 141, kde si mezi operátory (až na operátor * skoro u konce) raději nedělal mezery. Co třeba ten výpočet rozdělit do proměnných?

Aplikace funguje, ale ne moc dobře. Když táhnu posuvník, vyjedu z posuvníku a pustím, posuvník zůstane uchycený. V kódu totiž máš

$drag.parents().on("mousemove", function(e) { ... }

dave_23 - 70 bodů
Než se přesunu k hodnocení JS kódu, zastavil bych se u HTML a CSS, kde používáš pro označování id a class 2 různé notace. Např jeden element má id maxCena (CammelCase) a druhý má cena-horniMez (obojživelník pomlčkové notace a CammelCase). V civilizovaném světě také platí, že jazyk, kterým se domluví všichni je Angličtina, takže by nebylo na škodu přejmenovat vlastnosti na anglické názvy.

Kód má jednu podstatnou chybu a to, že není objektový. Kvůli tomu ti to zvládne obsloužit jeden jediný posuvník na stránce, který ku všemu musí existovat už při načítání stránky. Kód je dobře dokumentovaný, řádky jsou adekvátně dlouhé a důkladně si hlídáš styl spaní kódu (opomeneme-li incident v CSS a HTML).

Funkce ZmenaDolniHodnoty a ZmenaHorbniHodnoty jsou si moc podobné, jen tam jsou popřeházeny rovnítka, šlo by je sloučit do jedné.

Funguje ti to však velmi dobře, je to plynulé, bez problémů. Jsi jediný u koho je aplikace plně použitelná (hodnoceno z uživatelského hlediska, podle kódu určitě ne).

Vzhled je takový zastaralý, designově to lze vychytat. Už třeba přidat tam nějaký jednoduchý přechod nebo nějaká šipečka v posuvníku by tomu pomohla, ne všechno jednobarevné je hezké.

+10 za plně funkční a uživatelský přívětivou aplikaci

Jan Lupčík - 60 bodů
Kód je dobře komentovaný, ale není vůbec objektový. Funkce updateSelected a updateNumber jsou poněkud dlouhé, bylo by vhodné je rozdělit do více menších. Chválím využití HTML5 drag and drop API. Nevýhoda toho API však je, že není dotažené do konce a navíc ho nepodporují některé webové prohlížeče. Když i mírně vyjedu z elementu, prostě to přestane fungovat. Ono to ale konec konců ani moc nefunguje v ramci toho lementu. Moc jsem nepochopil, proč by mělo být úplné maximum větší o 107. Obecně je tam hodně těřko pochopitelných konstant. Třeba například:

percents = (percents <= 5) ? 5 : percents;

Proč zrovna 5?

Tvé řádky sice splňují jakousi standardní přijatelnou délku, ale zato jsou některé příkazy (a hlavně výpočty) rozdělená na strašně moc řádku. Např.:

var fromRight = Math.abs(Math.round(((value + (maximum - 107)) /
        (maximum - 107) * (parseInt($(".select").css("width")) -
        parseInt($(".arrow").css("width")) * 2) / 10000) -
        parseInt($(".select").css("width")) +
        parseInt($(".arrow").css("width")) * 2));

Proč to nerozdělíš do proměnných a na mezivýpočty?

Pokusný králík - 0 bodů
pokus

alfonz - 65 bodů
Kód je dobře strukturovaný a objektový. Aplikace je však náchylná na vyjetí myši z elementu, čímž to přestane fungovat a je to dost nepraktické. Metody jsou však velmi dlouhé a bylo by vhodné zvážit, zdali není lepší to rozdělit na více menších. Příprava scriptu probíhá přímo v elementu <script> v html, což by nemělo. V projektu máš jQuery, ale ani zdaleka ji nevyužíváš naplno. Třeba např.:

//Copy html to each element
var arr = $(selector);
for (var i = 0; i < arr.length;i++)
{
    ...
}

To lze s jQuery napsat jako.

$(selector).each(function (index, item) {
        $(item).append(this.createHtml($(item).attr("data-name")));
}.bind(this));

V kódu používáš self. Což nemusíš, lze to vyřešit elegantněji (čím složitější kód, tím víc oceníš „eleganci“ toho řešení).

var self = this;
$(document).mousedown(function () {
    self.mouseDown = true;
}).mouseup(function () {
    self.mouseDown = false;
});

Lze napsat jako:

$(document).mousedown(function () {
    this.mouseDown = true;
}.bind(this)).mouseup(function () {
    this.mouseDown = false;
}.bind(this));

Bind (což je metoda objektu Function) ti vytvoří novou funkci, ale za this fixně dosadí to, co mu předáš, umí to i s parametry, ale to tě v tomto okamžiku moc nemusí zajímat.

Tvá aplikace jako jediná vypadá k světu, ale funkčnost Je velmi omezující. Poznámka, že si myslíš, že budeš jediný kdo, to bude mít objektové a že si to samo vygeneruje HTML, které k funkčnosti potřebuje, mě trochu překvapila. O to smutnější však je, že jsi opravdu byl jediný, kdo v tom měl náznak objektového myšlení.

+10 za relativně objektový kód

Tentokrát placku nikdo nezískává, snad někdy příště.

Akceptované řešení
+5 Zkušeností
Řešení problému
 
Nahoru Odpovědět
5.12.2015 14:36
Avatar
Odpovídá na Michal Žůrek - misaz
Michal Žůrek - misaz:5.12.2015 14:39

přidávám obrázek jak Danovo řešení neodebírá obsluhy událostí.

 
Nahoru Odpovědět
5.12.2015 14:39
Avatar
Odpovídá na Michal Žůrek - misaz
Michal Žůrek - misaz:5.12.2015 14:41

dále je mi trochu líto, že jsem musel udělit za body za jedinečnou funkci
- OOP
- plně funkční aplikace
to se považuje za absolutní základ. Vaše aplikace, byly víceméně srovnatelné, někdo měl něco lepší, a zároveň něco horší, proto se vaše bodové hodnocení víceméně odvíjí od 10 bodového bonusu.

Očekával jsem, že alespoň jednoho napadne řešit to přes canvas....

Editováno 5.12.2015 14:42
 
Nahoru Odpovědět
5.12.2015 14:41
Avatar
Jan Lupčík
Tvůrce
Avatar
Odpovídá na Michal Žůrek - misaz
Jan Lupčík:5.12.2015 16:00

Nevím, proč 5. Ale prostě bez toho to dobře vyjíždělo z toho intervalu. :D
Jinak díky za hodnocení a za machra. Byl to hodně zajímavý nápad udělat něco takového. A určitě se podívám na kódy ostatních. Že, alfonz? :D

Nahoru Odpovědět
5.12.2015 16:00
TruckersMP vývojář
Avatar
alfonz
Člen
Avatar
Odpovídá na Michal Žůrek - misaz
alfonz:5.12.2015 16:52

To co jsem měl v tom <script> bylo jen pro ukázku jak se z toho intervalu dostávají hodnoty a přišlo mi zbytečné vytvářet pro to nový soubor. Jinak díky za tipy, hlavně to bind u funkcí :)

Nahoru Odpovědět
5.12.2015 16:52
lmao
Avatar
Odpovídá na alfonz
Michal Žůrek - misaz:5.12.2015 16:54

já vím, ale na tu ukázku to bylo moc dlouhé.

 
Nahoru Odpovědět
5.12.2015 16:54
Avatar
Odpovídá na Michal Žůrek - misaz
Michal Žůrek - misaz:5.12.2015 16:54

ješt+ě někdo to tak měl, ale ten to měl kratší.

 
Nahoru Odpovědět
5.12.2015 16:54
Avatar
Odpovídá na Michal Žůrek - misaz
Neaktivní uživatel:5.12.2015 21:21

Dotaz: jak se odebírají obsluhy událostí? Jinak supr machr, s js moc nedělám a dělal jsem v podstatě poprvé něco jako jQuery plugin :) Jinak o tom bugování jsem věděl, je to tam napsaný i jako Known bugs myslim ale nevěděl jsem jak to eliminovat.

BTW: výpočty jsem zvyklý dělat na jeden řádek, i když je delší, líp se v tom orientuju a ty různý zápisy závorek jsou tam kde mi to automaticky generovalo IDE:
function(){
}
a tam kde to píšu celé já tak mám začátek složený závorky na newline

Nahoru Odpovědět
5.12.2015 21:21
Neaktivní uživatelský účet
Avatar
Odpovídá na Neaktivní uživatel
Michal Žůrek - misaz:5.12.2015 23:30

co si tak matně pamatuji tak by to v jQuery měla být funkce off. http://api.jquery.com/off/

 
Nahoru Odpovědět
5.12.2015 23:30
Avatar
Odpovídá na Jan Lupčík
Michal Žůrek - misaz:5.12.2015 23:35

5 procent je jakási konstanta, která odpovídala velikost posuvníku v okně o velikosti jakou jsi měl nastavenou. Na jiné velikosti, to bude jiné číslo. Správně bys to měl přepočítávat z velikosti elementů.

 
Nahoru Odpovědět
5.12.2015 23:35
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 31 zpráv z 31.