-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
96 lines (92 loc) · 3.1 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="./style.css" />
</head>
<body style="padding: 20px; position: relative">
<!-- <input type="password" placeholder="enter password" id="password" />
<button id="btn">show password</button> -->
<!-- <div class="slider">
<marquee>
<img
src="./images/girl1.jpg"
style="height: 300px; width: 300px; -webkit-box-reflect: left"
/>
</marquee>
</div> -->
<!-- <div class="wrapper">
<div class="animated-div"></div>
<div class="my-div"></div>
<div class="div"></div>
<button id="btnCheck">Check</button>
</div> -->
<br />
<br />
<div id="position" style="position: relative; left: 40px">
Position element
</div>
<p class="animation-text">Thanks for watching...</p>
<h1 class="text-animation2">Hello World...</h1>
<input type="text" placeholder="tags per space" class="items" id="tagsEl" />
<div class="tags-wrapper" id="tags-div"></div>
<!-- <video
id="video"
autoplay
style="height: 300px; width: 300px; border-radius: 15px"
></video> -->
<!-- <script src="./objects.js"></script> -->
<!-- <script src="./domManipulation.js"></script> -->
<!-- <script src="./array.js"></script> -->
<!-- <script src="./windowObj.js"></script> -->
<script src="./app.js"></script>
<!-- <script src="./validations.js"></script> -->
<script>
let btnRemove = document.getElementById("btnBackspace");
const btnSubmit = document.querySelectorAll(".btnSubmit");
// btnRemove.addEventListener("click", () => {
// // let textEl = document.getElementById("textEl");
// // textEl.value = textEl.value.slice(0, -1);
// btnSubmit.forEach((element) => {
// element.textContent = "Hello";
// });
// });
// video script
// capturing user media script
// const videoEl = document.getElementById("video");
// navigator.mediaDevices
// .getUserMedia({
// video: true,
// })
// .then((stream) => {
// videoEl.srcObject = stream;
// console.log(stream);
// })
// .catch((err) => {
// console.log("error accessing camera", err);
// });
const items = document.getElementById("tagsEl");
const tagsEl = document.getElementById("tags-div");
let tags = [];
items.addEventListener("keyup", (e) => {
if (e.key === " ") {
tags.push(items.value);
// tagsEl.innerHTML = tags.map((item) => {
// `<div class="tags">${item}</div>`;
// });
let sec = "";
for (let i in tags) {
sec += `<div class="tags">${tags[i]}</div>`;
}
tagsEl.innerHTML = sec;
items.value = "";
}
});
// let sec = '';
// sec+=tag.map((item)=>)
</script>
</body>
</html>
<!-- let tags = items.value.split(" "); -->