https://yaasalu.com/Static/scripts/userModal.js

1class UserModal extends HTMLElement {
2    connectedCallback() {
3      var id = this.attributes.name.value
4      var username = this.attributes.username.value
5      var parichayam = this.attributes.parichayam.value
6      var praantaalu= this.attributes.praantaalu.value
7      var maandalikalu = this.attributes.maandalikalu.value
8
9      this.innerHTML = `
10
11
12        <!-- The Modal -->
13    <div class="modal fade userModal" id="userModal" tabindex="-1" role="dialog" aria-labelledby=${id} aria-hidden="true">
14    <div class="modal-dialog">
15        <div class="modal-content">
16          <div class="modal-header">
17              <h4 class="modal-title" style="text-align: center;">Complete your profile...</h4>
18              <button type="button" class="close" data-bs-dismiss="modal">&times;</button>
19          </div>
20          <div class="modal-body">
21            <div id="profile-main">
22              <form id="userForm" class="form-container" data-tags=${maandalikalu}>
23                <label for="name">పేరు:</label>
24                <input type="text" id="name" name="name" value=${username} required><br><br>
25
26                <label for="parichayam">పరిచయం: </label>
27                <textarea class="text optional" placeholder="మీ చిరు పరిచయం:  " name="parichayam" id="parichayam" rows="5" cols="100">
28                ${parichayam}
29                </textarea><br><br>
30
31                <label for="praantaalu">మీ ప్రాంతం :</label>
32                <input type="text" id="praantaalu" name="praantaalu" value=${praantaalu}><br><br>
33
34                <label for="maandalikalu">తెలిసిన మాండలికాలు/యాసలు :</label>
35                <div class="tag-container" id="tagContainer">
36                    <input type="text" class="tag-input" id="tagInput" placeholder="Add tags...">
37                    <div class="autocomplete-box" id="autocompleteBox"></div>
38                </div>
39                <input type="hidden" name="tags" id="maandalikalu" name="maandalikalu" value=${maandalikalu}>
40
41                <input type="submit" value="Submit">
42
43              </form>
44            </div>
45          </div>
46        </div>
47    </div>
48  </div>
49`
50    }
51}
52
53customElements.define("usermodal-element", UserModal)