Професионална програма
Loading...
Samuil.Petrow avatar Samuil.Petrow 1548 Точки

[Homework] JavaScript Basics - DOM & Events

HTML JAVASCRIPT

Втора задача може би се нуждае от оптимизация за nest-натите div-ове.

На задача 4 доста размишление имаше в/у това какъв тип евент да се ползва и от "change", "keydown", "keyup" избрах последното, но може би второто да е по-удачно :?

Тагове:
7
JavaScript Fundamentals
Yulia avatar Yulia 1345 Точки

Виждам, че съм пропуснала да си споделя домашното тук. Нека поне го има за "бъдещи поколения" :D

Понеже задачките бяха малко и не ме затрудниха кой знае колко - изместих акцента върху bootstrap, който исках да науча най-накрая, защото в предишния курс нямах време за това и доста се изложих с responsive-а на изпита.

Самите задачки съм ги решила както аз ги разбирам - на някои се заиграх повече де. Всички се визуализират на една страница. Кода, който се получи в html-а се получи меко казано ужасен заради многото вложени тагове, които се изискват, за да се получи grid-а в bootstrap. Това сигурно е най-грозният html, който съм писала през последните 3 месеца xD. Но на визия резултата се получи достатъчно добре според мен - може да си го гледате от телефона, хаха :)

JS-Homework-DOM&Events: Live Demo | GitHub

На Like-бутона исках да добавя и малко hover ефекти. Без jQuery беше много гадно да пиша event-и с mouseover и mouseout, но успях! :D Има доста повторения в кода - със сигурност може да се рефакторира малко. Но както казах - в това домашно не претендирам за високо качество на кода :D

На Display Divs прецених, че искам да покажа наистина всички div-ове, дори и празния xD

Hide-Odd-Rows я реших "малко" хамалски - не ми хареса идеята да въртя цикли за DOM-а и банално посочвам кои редове да се скрият и после да се показват отново :D Детска му работа - да си цъкаш с кеф на красивото бутонче. С много тъпо решение отдолу, да. Докато проверявах домашни обаче, попаднах на едно отлично! И то е с: document.querySelectorAll("table tr:nth-child(odd)"); Точно и елегантно.

На Validate Input не ми се искаше да ползвам regex или някакви pattern-и. Бях сигурна, че isNaN е напълно достатъчно за проверка. Имам и paste event, с който забранявам напълно пействането и връщам предишната коректна стойност ако има такава. Но... чак сега виждам, че на Mozilla не работи paste event-а, хммм... Окей де, и без това намерих по-добри решения в домашните, които проверих. Имаше и такова, в което даже при провлачване на текст, който съдържа с цифри, във формата се филтрираха само цифрите! Това е най-доброто решение. В него ето този код се изпълнява на input event:

var pattern = new RegExp(/\d/g);
if(!pattern.test(element.value)) {
    element.value = element.value.filter(pattern);
}

Координатите на мишката забелязах, че доста хора са ги направили с mousemove, други с mouseover - и двете са вярни според мен. На мен ми се стори по-подходящо с mousemove, защото другия вариант изглежда така, все едно лагва :D Удивително колко много различни event-и има за едно и също нещо - но трябва да се внимава кое работи на всички браузъри. Просто ev.x и ev.y не работи на Mozilla, напимер. За нея е undefined.

Това е от мен - моите решения тук далеч не са най-добрите, но с другите предложения се надявам това да е полезно на някой, някога... :D

PS. Никой ли не написа Тетрис-a?

Едит: брей, че шарено стана :D

7
dani_ddd avatar dani_ddd 82 Точки

Заповядай един тетрис - ТУК

Не е перфектно, но поне мърда :D
2