create-template-html-css 1.1.1 → 1.1.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/package.json +1 -1
  2. package/templates/modal/index.html +2 -0
  3. package/templates/modal/script.js +59 -54
  4. package/templates/modal/style.css +1 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "create-template-html-css",
3
- "version": "1.1.1",
3
+ "version": "1.1.3",
4
4
  "description": "CLI tool to generate HTML and CSS templates for common UI elements",
5
5
  "main": "src/index.js",
6
6
  "bin": {
package/templates/modal/index.html CHANGED
@@ -59,5 +59,7 @@
59
59
  </div>
60
60
  </div>
61
61
  </div>
62
+
63
+ <script src="script.js"></script>
62
64
  </body>
63
65
  </html>
package/templates/modal/script.js CHANGED
@@ -1,69 +1,74 @@
1
- // Open modal
2
- document.querySelectorAll('[data-modal]').forEach(button => {
3
- button.addEventListener('click', function() {
4
- const modalId = this.getAttribute('data-modal');
5
- const modal = document.getElementById(modalId);
6
- modal.classList.add('active');
1
+ // Wait for DOM to load
2
+ document.addEventListener('DOMContentLoaded', function() {
3
+ // Open modal
4
+ document.querySelectorAll('[data-modal]').forEach(button => {
5
+ button.addEventListener('click', function() {
6
+ const modalId = this.getAttribute('data-modal');
7
+ const modal = document.getElementById(modalId);
8
+ if (modal) {
9
+ modal.classList.add('active');
10
+ }
11
+ });
7
12
  });
8
- });
9
13
 
10
- // Close modal on X click
11
- document.querySelectorAll('.modal-close').forEach(closeBtn => {
12
- closeBtn.addEventListener('click', function() {
13
- this.closest('.modal').classList.remove('active');
14
+ // Close modal on X click
15
+ document.querySelectorAll('.modal-close').forEach(closeBtn => {
16
+ closeBtn.addEventListener('click', function() {
17
+ this.closest('.modal').classList.remove('active');
18
+ });
14
19
  });
15
- });
16
20
 
17
- // Close modal on outside click
18
- document.querySelectorAll('.modal').forEach(modal => {
19
- modal.addEventListener('click', function(e) {
20
- if (e.target === this) {
21
- this.classList.remove('active');
22
- }
21
+ // Close modal on outside click
22
+ document.querySelectorAll('.modal').forEach(modal => {
23
+ modal.addEventListener('click', function(e) {
24
+ if (e.target === this) {
25
+ this.classList.remove('active');
26
+ }
27
+ });
23
28
  });
24
- });
25
29
 
26
- // Close modal on button click
27
- document.querySelectorAll('.modal-btn').forEach(button => {
28
- button.addEventListener('click', function(e) {
29
- if (!this.type || this.type !== 'submit') {
30
- this.closest('.modal').classList.remove('active');
31
- }
30
+ // Close modal on button click
31
+ document.querySelectorAll('.modal-btn').forEach(button => {
32
+ button.addEventListener('click', function(e) {
33
+ if (!this.type || this.type !== 'submit') {
34
+ this.closest('.modal').classList.remove('active');
35
+ }
36
+ });
32
37
  });
33
- });
34
38
 
35
- // Handle form submission
36
- document.querySelectorAll('.modal-form').forEach(form => {
37
- form.addEventListener('submit', function(e) {
38
- e.preventDefault();
39
- console.log('Form submitted');
40
- alert('Form submitted successfully!');
41
- this.closest('.modal').classList.remove('active');
42
- this.reset();
39
+ // Handle form submission
40
+ document.querySelectorAll('.modal-form').forEach(form => {
41
+ form.addEventListener('submit', function(e) {
42
+ e.preventDefault();
43
+ console.log('Form submitted');
44
+ alert('Form submitted successfully!');
45
+ this.closest('.modal').classList.remove('active');
46
+ this.reset();
47
+ });
43
48
  });
44
- });
45
49
 
46
- // Cancel button
47
- document.querySelectorAll('.btn-cancel').forEach(button => {
48
- button.addEventListener('click', function() {
49
- this.closest('.modal').classList.remove('active');
50
+ // Cancel button
51
+ document.querySelectorAll('.btn-cancel').forEach(button => {
52
+ button.addEventListener('click', function() {
53
+ this.closest('.modal').classList.remove('active');
54
+ });
50
55
  });
51
- });
52
56
 
53
- // Confirm button
54
- document.querySelectorAll('.btn-confirm').forEach(button => {
55
- button.addEventListener('click', function() {
56
- console.log('Action confirmed');
57
- alert('Item deleted successfully');
58
- this.closest('.modal').classList.remove('active');
57
+ // Confirm button
58
+ document.querySelectorAll('.btn-confirm').forEach(button => {
59
+ button.addEventListener('click', function() {
60
+ console.log('Action confirmed');
61
+ alert('Item deleted successfully');
62
+ this.closest('.modal').classList.remove('active');
63
+ });
59
64
  });
60
- });
61
65
 
62
- // Close modal on ESC key
63
- document.addEventListener('keydown', function(e) {
64
- if (e.key === 'Escape') {
65
- document.querySelectorAll('.modal.active').forEach(modal => {
66
- modal.classList.remove('active');
67
- });
68
- }
66
+ // Close modal on ESC key
67
+ document.addEventListener('keydown', function(e) {
68
+ if (e.key === 'Escape') {
69
+ document.querySelectorAll('.modal.active').forEach(modal => {
70
+ modal.classList.remove('active');
71
+ });
72
+ }
73
+ });
69
74
  });
package/templates/modal/style.css CHANGED
@@ -119,7 +119,7 @@ h1 {
119
119
 
120
120
  .modal-close {
121
121
  position: absolute;
122
- left: 20px;
122
+ right: 20px;
123
123
  top: 20px;
124
124
  font-size: 30px;
125
125
  font-weight: bold;