Skip to content

Commit 083be54

Browse files
rao123dkrao123dk
committed
tag maker tool for social media post
1 parent 9f5cdf0 commit 083be54

File tree

1 file changed

+115
-11
lines changed

1 file changed

+115
-11
lines changed

‎tag/index.html‎

Lines changed: 115 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,120 @@
11
<!DOCTYPE html>
22
<html>
3-
<head>
4-
<meta charset="UTF-8">
5-
<meta name="viewport" content="width=device-width, initial-scale=1">
6-
<script src="https://rawcdn.githack.com/rao123dk/Rao.js/49a0ee053b07522d1ca875c7748e003ac724bc8f/rao.js">
7-
</script>
8-
<script src="./v1.1/js/jquery.min.js"></script>
9-
</head>
10-
<body>
11-
<div>
123

4+
<head>
5+
<title>Tagger</title>
6+
<meta charset="utf-8">
7+
<meta name="viewport" content="width=device-width, initial-scale=1">
8+
<script src="https://rawcdn.githack.com/rao123dk/Rao.js/49a0ee053b07522d1ca875c7748e003ac724bc8f/rao.js">
9+
</script>
10+
<!-- Latest compiled and minified CSS -->
11+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
12+
13+
<!-- jQuery library -->
14+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
15+
16+
<!-- Latest compiled JavaScript -->
17+
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
18+
19+
</head>
20+
21+
<body>
22+
<div class="container">
23+
<div class="well well-lg"><strong>Create # tags for your social page post</strong></div>
24+
25+
<div class="panel panel-default">
26+
<div class="panel-heading">Select tags</div>
27+
<div class="panel-body">
28+
<form id="taggerList" class="row">
29+
</form>
30+
<div class="form-group">
31+
<label for="usr">Custom:</label>
32+
<input type="text" class="form-control" id="Custom">
33+
<button type="button" class="btn btn-success" id="Add">Add</button>
34+
<button type="button" class="btn btn-success" onclick="(()=>{location.reload()})();">Clear All</button>
35+
</div>
36+
</div>
1337
</div>
1438

15-
</body>
16-
</html>
39+
<form>
40+
<div class="form-group">
41+
<label for="comment">Tags:</label>
42+
<textarea class="form-control" rows="5" id="createdTags"></textarea>
43+
</div>
44+
</form>
45+
46+
<div class="panel panel-success">
47+
<div class="panel-heading">Thanks</div>
48+
<div class="panel-body" id="status"></div>
49+
</div>
50+
</div>
51+
<script>
52+
$(document).ready(function(){
53+
const Tags =
54+
[
55+
"javascript",
56+
"javascriptdeveloper",
57+
"react",
58+
"reactnative",
59+
"reactjs",
60+
"angular",
61+
"vuejs",
62+
"nodejs",
63+
"es6",
64+
'Polymer',
65+
'Meteor',
66+
"webdeveloper",
67+
"web",
68+
"softwaredeveloper",
69+
"engineering",
70+
"typescript",
71+
"mongodb",
72+
"mern",
73+
"mean"
74+
]
75+
var checkBoxItems = ''
76+
for (var i = 0; i < Tags.length; i++) {
77+
checkBoxItems += `
78+
<label class="col-xs-6 col-md-3">
79+
<input type="checkbox" value=#${Tags[i]}> ${Tags[i].toLocaleUpperCase()}
80+
</label>`;
81+
}
82+
$('#taggerList').html(checkBoxItems);
83+
84+
85+
86+
//
87+
let taagerGenratedList = '';
88+
$('#taggerList').on('change', 'input[type=checkbox]', function() {
89+
let val = $(this).val().trim();
90+
combineTags(val);
91+
92+
});
93+
94+
95+
$("#Add").click(function(){
96+
combineTags("#"+$('#Custom').val().trim());
97+
});
98+
function combineTags(val){
99+
if (val != null && taagerGenratedList.indexOf(val) === -1) {
100+
taagerGenratedList += " " +val;
101+
}
102+
$('#createdTags').html('');
103+
$('#createdTags').html(taagerGenratedList);
104+
console.log('taagerGenratedList: ', taagerGenratedList);
105+
copyToClipboard();
106+
}
107+
108+
function copyToClipboard(){
109+
let tagsInArea = $('#createdTags');
110+
tagsInArea.select();
111+
document.execCommand("copy");
112+
$('#status').text("successfully created and copied in clipboard");
113+
}
114+
115+
});
116+
</script>
117+
</body>
118+
119+
</html>
120+

0 commit comments

Comments
 (0)