| DreamTheater |
20.09.2011 23:38 |
Вот вам задачка, которая покрывает большую часть всего что вам надо уметь во фронт-энде.
В центре экрана фрейм с тремя вкладками, переходы между вкладками изменяют адресную строку, но не перезагружают страницу. Перейдя по ссылке, соответствующей любой из вкладок, нужно попадать сразу на нее, а не на открытую по-умолчанию.
В первой вкладке написать обычный текст приветствия, во второй вкладке должна находиться небольшая новостная лента - просто абзацы текста друг за другом, но с возможностью добавлять туда свои записи и редактировать существующие, записи должны сохраняться даже после перезагрузки страницы (не использовать никаких внешних хранилищ, реализовать на LocalStorage или Web SQL Database). В третьей вкладке должна находиться форма с полями Phone и Email. Поле Phone имеет маску ввода (999) 999-99-99, поле Email должно выдавать ошибку если введена строка отличная от формата example@domain.com.
Содержимое всех вкладок загружается асинхронным запросом из JSONов или XMLей, парсится и рендерится в шаблон. Все это желательно сделать как можно более красивым и в меру анимированным, использовать HTML5 и CSS3. Применить прозрачность, тени, круглые уголки и градиенты (использовать изображения запрещено). Приложение должно соответствовать архитектуре MVC и быть максимально модульным. Не использовать библиотеки и фреймворки (это ведь учебная задача).
PS. Эту задачку в свое время мне дали в компании, в которой я теперь работаю, исходников к сожалению не осталось :( |