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

JavaScript JavaScript 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 )
Dan Balarin 70 Stáhnout řešení
dave_23 70 Stáhnout řešení
Denis Homolík (Alfonz) 65 Stáhnout řešení
IT Man 60 Stáhnout řešení
Ondřej Pohořelý 0 Stáhnout řešení
Pokusný králík 0 Stáhnout řešení
Avatar
Michal Žůrek (misaz):

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  +8 29.11.2015 13:03
Nesnáším {}, proto se jim vyhýbám.
Avatar
Michal Žůrek (misaz):

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  +1 30.11.2015 20:02
Nesnáším {}, proto se jim vyhýbám.
Avatar
IT Man
Redaktor
Avatar
Odpovídá na Michal Žůrek (misaz)
IT Man:

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  +2 30.11.2015 20:05
Když nevíš jak dál, podá ti ruku někdo, od koho by jsi to nečekal. A tu šanci musíš přijmout!
Avatar
Odpovídá na IT Man
Michal Žůrek (misaz):

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
Nesnáším {}, proto se jim vyhýbám.
Avatar
vodacek
Redaktor
Avatar
Odpovídá na Michal Žůrek (misaz)
vodacek:

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):

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
Nesnáším {}, proto se jim vyhýbám.
Avatar
vodacek
Redaktor
Avatar
Odpovídá na Michal Žůrek (misaz)
vodacek:

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

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

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  -9 30.11.2015 21:18
Nezastavuj se dlouho protože život nikdy nečeká !
Avatar
martinkhla
Člen
Avatar
martinkhla:

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 11:57
Nesnáším {}, proto se jim vyhýbám.
Avatar
Dan Balarin
Člen
Avatar
Odpovídá na Michal Žůrek (misaz)
Dan Balarin:

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
"The number one benefit of information technology is that it empowers people to do what they want to do. It lets...
Avatar
Odpovídá na Dan Balarin
Michal Žůrek (misaz):

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
Nesnáším {}, proto se jim vyhýbám.
Avatar
Dan Balarin
Člen
Avatar
Odpovídá na Michal Žůrek (misaz)
Dan Balarin:

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

Nahoru Odpovědět  +1 3.12.2015 22:44
"The number one benefit of information technology is that it empowers people to do what they want to do. It lets...
Avatar
Nahoru Odpovědět  +2 3.12.2015 22:47
Nesnáším {}, proto se jim vyhýbám.
Avatar
IT Man
Redaktor
Avatar
IT Man:

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

Nahoru Odpovědět 4.12.2015 18:54
Když nevíš jak dál, podá ti ruku někdo, od koho by jsi to nečekal. A tu šanci musíš přijmout!
Avatar
Nahoru Odpovědět  +1 4.12.2015 20:02
Nesnáším {}, proto se jim vyhýbám.
Avatar
IT Man
Redaktor
Avatar
Odpovídá na Michal Žůrek (misaz)
IT Man:

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

Nahoru Odpovědět 4.12.2015 20:50
Když nevíš jak dál, podá ti ruku někdo, od koho by jsi to nečekal. A tu šanci musíš přijmout!
Avatar
Denis Homolík (Alfonz):

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

Nahoru Odpovědět 5.12.2015 2:43
Vše je možné, dokud si to myslíte!
Avatar
Odpovídá na Denis Homolík (Alfonz)
Michal Žůrek (misaz):

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

Nahoru Odpovědět 5.12.2015 10:34
Nesnáším {}, proto se jim vyhýbám.
Avatar
IT Man
Redaktor
Avatar
IT Man:

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
Když nevíš jak dál, podá ti ruku někdo, od koho by jsi to nečekal. A tu šanci musíš přijmout!
Avatar
Michal Žůrek (misaz):

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

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

Dan Balarin - 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

IT Man - 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

Denis Homolík (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  +3 5.12.2015 14:36
Nesnáším {}, proto se jim vyhýbám.
Avatar
Odpovídá na Michal Žůrek (misaz)
Michal Žůrek (misaz):

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

Nahoru Odpovědět  +2 5.12.2015 14:39
Nesnáším {}, proto se jim vyhýbám.
Avatar
Odpovídá na Michal Žůrek (misaz)
Michal Žůrek (misaz):

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  +2 5.12.2015 14:41
Nesnáším {}, proto se jim vyhýbám.
Avatar
IT Man
Redaktor
Avatar
Odpovídá na Michal Žůrek (misaz)
IT Man:

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, Denis Homolík (Alfonz)? :D

Nahoru Odpovědět 5.12.2015 16:00
Když nevíš jak dál, podá ti ruku někdo, od koho by jsi to nečekal. A tu šanci musíš přijmout!
Avatar
Odpovídá na Michal Žůrek (misaz)
Denis Homolík (Alfonz):

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
Vše je možné, dokud si to myslíte!
Avatar
Odpovídá na Denis Homolík (Alfonz)
Michal Žůrek (misaz):

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

Nahoru Odpovědět 5.12.2015 16:54
Nesnáším {}, proto se jim vyhýbám.
Avatar
Odpovídá na Michal Žůrek (misaz)
Michal Žůrek (misaz):

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

Nahoru Odpovědět 5.12.2015 16:54
Nesnáším {}, proto se jim vyhýbám.
Avatar
Dan Balarin
Člen
Avatar
Odpovídá na Michal Žůrek (misaz)
Dan Balarin:

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  +2 5.12.2015 21:21
"The number one benefit of information technology is that it empowers people to do what they want to do. It lets...
Avatar
Odpovídá na Dan Balarin
Michal Žůrek (misaz):

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
Nesnáším {}, proto se jim vyhýbám.
Avatar
Odpovídá na IT Man
Michal Žůrek (misaz):

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
Nesnáším {}, proto se jim vyhýbám.
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.