Как сделать поздравительную открытку на javascript + jquery

Здравствуйте дорогие друзья! Сегодня я расскажу вам как сделать виртуальную поздравительную открытку с помощью javascript!

Как и в своих других уроках по javascript, сначала я немного расскажу о том, что мы получим в конце.

Открытка будет состоять из 4 полей для ввода данных:

– Заголовок открытки
– Ссылка на картинку
– Текст поздравления
– Автор открытки

При заполнении полей сразу виден визуальный результат – готовая открытка.

Где ее можно применить?

Например, вы можете сделать сервис создания и отправки поздравительных открыток, где каждый желающий может создать виртуальную открытку и отправить на указанный автором e-mail друга.

Давайте взглянем на html разметку:

<div id="wrapper">

        <div id="left">
        
                <p>Заголовок:<br><input id="title"></p>
                <p>Url картинки:<br><input id="img"></p>
                <p>Текст открытки:<br><textarea id="text"></textarea></p>
                <p>Автор открытки:<br><input id="author"></p>
                
        </div>
        
        <div id="right">
        
                <p id="new_title"></p>
                <p><img id="new_img" height="210" src="/"></p>
                <p id="new_text"></p>
                <p id="new_author">Виталий Admin</p>
        </div>

</div>

Как видите, у нас имеются два блока, в левом блоке расположены 4 текстовых поля, а в правом блоке 3 параграфа и одна картинка.

Теперь взглянем на jquery код

$(document).ready(function(){

        $('#left input,textarea').each(function(){

                $(this).bind('blur keypress', function() {

                        if($(this).attr('id') == 'img') $('#new_img').attr('src',$(this).val());
                        else $('#new_' + $(this).attr('id')).text($(this).val());

                });
        });
});

Кода очень мало, поэтому и комментариев приводить не буду, объясню суть в статье по шагам:

1. Выбираем из блока с id = left все элементы с тегом input и textarea;
2. При срабатывании одного из событий (наборе текста в полях или потере Фокуса) срабатывает функция;
3. Проверяем, если изменяется url картинки, значит изменяем атрибут: url;
4. Иначе изменяем содержимое параграфов;

Вот, в принципе, и все, объяснять здесь, думаю, больше нечего.

Теперь вы можете, как и обычно,  скачать исходные файлы со всеми стилями и разметкой.

На этом все, удачи!

Если вам нужна помощь в создании какого-либо функционала, сайта, сервиса, тестов или калькуляторов, то готов помочь, подробнее на странице услуг.