<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html>
<head>
<title>Tags</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<div class="textbox">
<div class="teaxhead">
</div>
<div class="textInput">
<input type="text" name="text" id="inputTag" >
<input type="button" name="text" class="button" value="Add">
</div>
</div>
</body>
</html>
body{
margin: 0;
padding: 0;
}
.textbox{
width: 400px;
height: 600px;
margin: 10px auto;
border: 1px solid #ccc;
}
.teaxhead{
width: 100%;
height: 522px;
border-bottom: 1px solid #ccc;
padding: 12px 5px;
}
input#inputTag {
width: 70%;
float: left;
height: 40px;
margin: 2px;
}
.button{
width: 27%;
float: left;
background: #5980d6;
height: 45px;
margin: 2px;
border: 1px solid #ccc;
color: #fff;
font-size: 27px;
}
.tags {
background: #00e207d1;
padding: 8px 0 8px 14px;
color: #fff;
display: inline-block;
margin: 1px 1px;
}
.tagsclose {
width: 10px;
font-size: 21px;
margin: 0 0px 0 6px;
padding: 0 8px;
cursor: pointer;
}
.red{
background:red !important;
}
.green{
background:green !important;
}
.blue{
background:blue !important;
}
.yellow{
background:yellow !important;
}
.pink{
background:pink !important;
}
.skyblue{
background:skyblue !important;
}
$(function(){
var arr = [];
$(document.body).on('click', '.button', function(event) {
event.preventDefault();
/* Act on the event */
let inputbox = $('#inputTag');
let teaxhead = $('.teaxhead');
let tagName = inputbox.val();
if (tagName == "" || tagName == null) {
alert('Please Enter the text ');
return false;
}else{
let i=0;
for(tag in arr){
if (arr[tag]==tagName) {
alert("This tag already Exits");
i++;
}
}
if (i==0) {
arr.push(tagName);
AddTag(tagName,inputbox,teaxhead,i);
}
}
});
});
var AddTag = function(tags,inputbox,teaxhead,i){
let Tag = '<span class="tags '+sucess()+'" id="'+tags+'">'+tags+' <span class="tagsclose" data-pid="'+tags+'" >×</span></span>';
inputbox.val('');
teaxhead.append(Tag);
}
$(function(){
$(document.body).on('click', '.tagsclose', function(event) {
event.preventDefault();
/* Act on the event */
let id = $(this).data('pid');
if (id=="") {
alert('something wrong here');
return false;
}
removeTagHtml(id);
});
});
var removeTagHtml = function(id){
var randomN = Math.random(9);
$('#'+id).slideUp('slow').remove();
}
function sucess() {
message = ["red","green","blue","yellow","pink",'skyblue'];
return message[Math.floor(Math.random() * message.length)];
}
