<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 ---------->
<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="container">
<ul class="list-unstyled row teaxhead">
<li class="col-md-6 col-12 custom-control custom-checkbox mb-4" id="Pre-war_content">
<input type="checkbox" class="custom-control-input" id="customCheck_Prewar">
<label class="custom-control-label" for="customCheck_Prewar">Pre-war</label>
</li>
<li class="col-md-6 col-12 custom-control custom-checkbox mb-4" id="Post-war_content">
<input type="checkbox" class="custom-control-input" id="customCheck_Postwar">
<label class="custom-control-label" for="customCheck_Postwar">Post-war</label>
</li>
</ul>
<ul class="list-unstyled row">
<li class="col-md-6 col-12 textInput">
<div class="row no-gutters">
<input class="form-control col-8" type="text" name="text" id="inputTag" >
<button class="button col" type="button" name="text" value="Add">Add</button>
</div>
</li>
</ul>
</div>
</body>
</html>
/*body{*/
/* margin: 0;*/
/* padding: 0;*/
/*}*/
/*.textbox{*/
/* width: 400px;*/
/* height: 200px;*/
/* margin: 10px auto;*/
/* border: 1px solid #ccc;*/
/* background-color: aliceblue;*/
/* padding: 3px;*/
/*}*/
/*.teaxhead{*/
/* width: 100%;*/
/* height: 222px;*/
/* border-bottom: 1px solid #ccc; */
/* padding: 12px 5px;*/
/* background-color: beige;*/
/*}*/
/*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 magia '+sucess()+'" id="'+tags+'">'+tags+' <span class="tagsclose" data-pid="'+tags+'" >×</span></span>';
let Tag = '<li class="col-md-6 col-12 custom-control custom-checkbox mb-4 '+sucess()+'" id="'+tags+'_content"><input type="checkbox" class="custom-control-input" id="customCheck_'+tags+'"><label class="custom-control-label" for="customCheck_'+tags+'">'+tags+'</label><span class="tagsclose" data-pid="'+tags+'_content" >×</span></span></li>';
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)];
}
