Как создать генератор логотипов на JQuery?

Приветствую вас дорогие друзья! В этом уроке я покажу, как можно сделать простой генератор логотипов для сайта.

Как создать генератор логотипов

Чтобы сразу стало понятно, что это за генератор, как им пользоваться и что можно сделать с его помощью – предлагаю посмотреть demo пример в конце статьи, а после вернуться к чтению.

Наш генератор позволяет изменять следующие параметры логотипа:

  • Цвет фона
  • Надпись
  • Цвет текста
  • Размер текста
  • Шрифт текста
  • Высоту логотипу
  • Ширину логотипа
  • Внутренние отступы

Как и во всех уроках по javascript – все исходные файлы можно бесплатно скачать в конце урока!

HTML верстка:

<div class="wrap">
			
			<input id="text" placeholder="Введите текст логотипа..">
			
			<select id="color_bg">
			
				<option disabled selected>Цвет фона</option>
				<option value="red">Красный</option>
				<option value="orange">Оранжевый</option>
				<option value="yellow">Желтый</option>
				<option value="green">Зеленый</option>
				<option value="blue">Синий</option>
				<option value="black">Черный</option>
				<option value="white">Белый</option>
				
			</select>
			
			<select id="color_text">
			
				<option disabled selected>Цвет текста</option>
				<option value="red">Красный</option>
				<option value="orange">Оранжевый</option>
				<option value="yellow">Желтый</option>
				<option value="green">Зеленый</option>
				<option value="blue">Синий</option>
				<option value="black">Черный</option>
				<option value="white">Белый</option>
				
			</select>
			
			<br><br><select id="font_family">
			
				<option disabled selected>Стиль текста</option>
				<option value="cursive">Cursive</option>
				<option value="fantasy">Fantasy</option>
				<option value="monospace">Monospace</option>
				<option value="serif">Serif</option>

			</select>
			
			<select id="font_size">
			
				<option disabled selected>Размер текста</option>
				<option value=14>14</option>
				<option value=15>15</option>
				<option value=16>16</option>
				<option value=17>17</option>
				<option value=18>18</option>
				<option value=19>19</option>
				<option value=20>20</option>
				<option value=21>21</option>
				<option value=22>22</option>
				<option value=23>23</option>
				<option value=24>24</option>
				
			</select><br><br>
			
			Ширина: <input size="3" id="width">
			Высота: <input size="3" id="height">
			Отступ: <input size="3" id="padding">
			
			<p id="create">Создать</p>
			
			<br>Результат:<br><div id="doresult"><div id="result"></div></div>
			<br>Код логотипа:<br><textarea id="code"></textarea>
		
</div>

 

Верстка, в основном, состоит из текстовых полей и элементов выбора (селектов), а также имеется кнопка для создания, элемент, куда выводится результат, и текстовое поле, куда мы выводим html код логотипа.

CSS код:

	.wrap{
    width: 400px;
    padding: 20px;
    margin: 30px auto;
    border: 5px dashed #48A4C7;
	}
	
	
	#create{
	color: #fff;
    background: #48A4C7;
    width: 100px;
    text-align: center;
    padding: 2px 4px;
    cursor: pointer;
    border-radius: 10px;
	}
	
	#code{
	width: 400px;
    height: 80px;	
	}

 

Рассмотрим JQuery код:

$(document).ready(function(){

	$('#create').click(function(){
		
		text = $( "#text" ).val();
		param = $( "#param" ).val();
		color_bg = $( "#color_bg" ).val();
		color_text = $( "#color_text" ).val();
		font_family = $( "#font_family" ).val();
		font_size = $( "#font_size" ).val();
		width = $( "#width" ).val();
		height = $( "#height" ).val();
		padding = $( "#padding" ).val();
		
		$('#result').html(text).css({'text-align':'center','padding':padding + 'px','width':width,'height':height,'background-color':color_bg,'color':color_text,'font-family':font_family,'font-size':font_size + 'px'});
		
		$('#code').html($('#result'));
		$('#code').val($('#code').html());
		$('#doresult').html($('#code').val());
	});
	
});

Здесь мы после нажатия на кнопку создания логотипа считываем все необходимые параметры стилей и присваиваем их (стили) элементу div c id = result.

Блок с идентификатором – “doresult” необходим для того, чтобы после вырезания элемента кода, мы мокли вернуть его (код) на прежнее место.

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

Вот и все, что нужно для создания такого веб инструмента.

Данный урок создал исключительно в целях ознакомления того как можно сделать подобный генератор. Вы всегда, по аналогии, можете добавить свой функционал, изменяя стили, добавляя новые элементы.

Demo пример

Скачать исходники


На этом у меня все, желаю вам удачи, пока!

 


Хостинг, которым я пользуюсь: Good-Host


Похожие статьи

Оставить комментарий

Ваш email не будет опубликован. Обязательные поля отмечены *

*

code

Вы можете использовать это HTMLтеги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>