Рассказ о коде:
Данный код представляет собой простую HTML-страницу, на которой можно сокращать длинные URL-адреса.
HTML часть содержит:
- `container`, в котором расположены элементы на странице;
- форму для ввода длинного URL и кнопки "Shorten URL";
- абзац `p` для вывода сокращенного URL после его генерации.
CSS часть не представлена здесь, но используется фреймворк Bootstrap, который обеспечивает стилизацию элементов на странице, таких как блоки контейнера и формы ввода.
JavaScript отвечает за работу функционала сокращения ссылки. Используемый код:
- запускает функцию при отправке формы (`$('form').submit(function(event) {});`);
- предотвращает поведение по умолчанию при отправке (`event.preventDefault();`);
- получает значение введенной пользователем длинной ссылки (`var longUrl = $('#long-url').val();`);
- выполняет запрос AJAX к API https://clck.ru/-- для создания короткого адреса (`$.ajax({url: 'https://clck.ru/--', data: {url: longUrl}, type: 'GET', success: function(response) {}});`);
- если запрос успешен, выводит ответ - короткий адрес - на странице (`$('#short-url').text(response);`).
Общая идея кода заключается в том, чтобы позволить пользователям быстро и легко создавать короткие URL-адреса для обмена или отправки другим людям.
Код.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>URL Shortener</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-5">
<div class="row">
<div class="col-md-8 offset-md-2">
<h1 class="text-center mb-4">URL Shortener</h1>
<form>
<div class="form-group">
<label for="long-url">Long URL</label>
<input type="text" class="form-control" id="long-url" placeholder="Enter long URL">
</div>
<button type="submit" class="btn btn-primary">Shorten URL</button>
</form>
<div class="mt-3">
<p id="short-url"></p>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$('form').submit(function(event) {
event.preventDefault();
var longUrl = $('#long-url').val();
$.ajax({
url: 'https://clck.ru/--',
data: {url: longUrl},
type: 'GET',
success: function(response) {
$('#short-url').text(response);
}
});
});
});
</script>
</body>
</html>