Помогите с написанием интерфейса

162

24 января 2019, 23:30

У меня стоит задача сделать "Пользовательский интерфейс" для одного расширения.

Там нужно сделать:

Одну кнопку добавления адреса электронной почты.
Удаления адреса электронной почты.

Также там должны быть:

Текстовые поля для написания в них Email адресов.
Чтоб все добавленные Email выводились списком.

Если вы видели подобное можете скинуть ссылку или хотя бы скрин чтоб у меня было понимание как это сделать

Answer 1

Уроки Jquery - Html

Html:

input - Предназначен для создания текстовых полей, различных кнопок, переключателей и флажков.

button - кнопка.

Jquery

click() - Устанавливает обработчик "клика" мышью по элементу, либо, запускает это событие.

val() - Возвращает или устанавливает значение атрибута value.

preventDefault() - Действие события по умолчанию не будет выполнено.

parent() - Возвращает прямого родителя.

remove() - Удаляет все выбранные элементы из DOM (указанный элемент и всех его потомков).

append() - Вставляет содержимое, заданное параметром, в конец каждого элемента в наборе соответствующих элементов.

$("#addEmail").click(function(e){  
 
if($(".emailText").val() != ''){ 
  e.preventDefault(); 
   
  $("ul.listEmail").append("<li>"+ $(".emailText").val() +" <span class='removeEmail'>Удалить</span></li>"); 
} 
 
}); 
 
$(document).on("click",".removeEmail", function(){ 
  $(this).parent().remove(); 
});

*{ 
  outline:none; 
} 
.removeEmail { 
    font-size: 12px; 
    vertical-align: super; 
    color: #ef2b1d; 
    padding-left: 5px; 
    cursor:pointer; 
} 
.removeEmail:hover { 
    color: #ca0404; 
} 
 
input.emailText, #addEmail { 
    border: none; 
    background: transparent; 
    padding: 15px; 
    cursor: pointer; 
    border: 1px solid #8BC34A; 
    color: #4CAF50; 
} 
input.emailText{ 
  cursor:auto; 
} 
ul.listEmail { 
    width: 100%; 
    max-width: 300px; 
} 
li { 
    border-bottom: 1px solid #eaeaea; 
    margin-bottom: 15px; 
    padding-bottom: 5px; 
}

<!DOCTYPE html> 
<html lang="en"> 
<head> 
	<meta charset="UTF-8"> 
	<title>Ничего не умею помогите решить задачу. За + Вам в карму</title> 
</head> 
<body>    	 
  <p>Кнопка добавления E-mail адреса.</p> 
   
  <form action=""> 
    <input required placeholder="Введите Email" type="email" class="emailText"> 
 
    <button id="addEmail">Добавить E-mail</button> 
    <ul class="listEmail"> 
    </ul> 
  </form> 
 
  <script 
  src="https://code.jquery.com/jquery-3.3.1.min.js" 
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" 
  crossorigin="anonymous"></script> 
</body> 
</html>