wad-lab 1.0.4 → 1.0.6
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.
- package/bin/index.js +9 -1
- package/package.json +1 -1
- package/templates/game-memory-cards/index.html +24 -0
- package/templates/game-memory-cards/script.js +90 -0
- package/templates/game-memory-cards/style.css +74 -0
- package/templates/game-rock-paper-scissors/index.html +35 -0
- package/templates/game-rock-paper-scissors/script.js +49 -0
- package/templates/game-rock-paper-scissors/style.css +67 -0
- package/templates/game-tic-tac-toe/index.html +30 -0
- package/templates/game-tic-tac-toe/script.js +82 -0
- package/templates/game-tic-tac-toe/style.css +66 -0
- package/templates/game-whack-a-mole/index.html +34 -0
- package/templates/game-whack-a-mole/script.js +83 -0
- package/templates/game-whack-a-mole/style.css +75 -0
- package/templates/html-css-js/index.html +224 -27
- package/templates/html-css-js/script.js +358 -25
- package/templates/html-css-js/style.css +452 -11
- package/templates/vue-cart-router-pinia/index.html +12 -0
- package/templates/vue-cart-router-pinia/package.json +20 -0
- package/templates/vue-cart-router-pinia/src/App.vue +78 -0
- package/templates/vue-cart-router-pinia/src/main.js +9 -0
- package/templates/vue-cart-router-pinia/src/router/index.js +17 -0
- package/templates/vue-cart-router-pinia/src/stores/cartStore.js +58 -0
- package/templates/vue-cart-router-pinia/src/views/CartView.vue +139 -0
- package/templates/vue-cart-router-pinia/src/views/CheckoutView.vue +144 -0
- package/templates/vue-cart-router-pinia/src/views/ProductCatalogView.vue +73 -0
- package/templates/vue-cart-router-pinia/vite.config.js +6 -0
- package/templates/vue-memory-game/index.html +12 -0
- package/templates/vue-memory-game/package.json +19 -0
- package/templates/vue-memory-game/src/App.vue +106 -0
- package/templates/vue-memory-game/src/main.js +7 -0
- package/templates/vue-memory-game/src/stores/memoryStore.js +64 -0
- package/templates/vue-memory-game/vite.config.js +6 -0
- package/templates/vue-todo-pinia/index.html +12 -0
- package/templates/vue-todo-pinia/package.json +19 -0
- package/templates/vue-todo-pinia/src/App.vue +179 -0
- package/templates/vue-todo-pinia/src/main.js +7 -0
- package/templates/vue-todo-pinia/src/stores/todoStore.js +50 -0
- package/templates/vue-todo-pinia/vite.config.js +6 -0
- package/templates/vue-todo-router/index.html +12 -0
- package/templates/vue-todo-router/package.json +19 -0
- package/templates/vue-todo-router/src/App.vue +55 -0
- package/templates/vue-todo-router/src/data/todoState.js +38 -0
- package/templates/vue-todo-router/src/main.js +7 -0
- package/templates/vue-todo-router/src/router/index.js +17 -0
- package/templates/vue-todo-router/src/views/AddTodoView.vue +85 -0
- package/templates/vue-todo-router/src/views/TodoDetailView.vue +89 -0
- package/templates/vue-todo-router/src/views/TodoListView.vue +77 -0
- package/templates/vue-todo-router/vite.config.js +6 -0
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
body {
|
|
2
|
+
font-family: Arial, sans-serif;
|
|
3
|
+
display: flex;
|
|
4
|
+
justify-content: center;
|
|
5
|
+
align-items: center;
|
|
6
|
+
min-height: 100vh;
|
|
7
|
+
margin: 0;
|
|
8
|
+
background-color: #f0f0f0;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
.game-container {
|
|
12
|
+
text-align: center;
|
|
13
|
+
background: #ffffff;
|
|
14
|
+
padding: 30px;
|
|
15
|
+
border: 1px solid #ccc;
|
|
16
|
+
border-radius: 8px;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
.stats-bar {
|
|
20
|
+
display: flex;
|
|
21
|
+
justify-content: space-around;
|
|
22
|
+
font-size: 18px;
|
|
23
|
+
font-weight: bold;
|
|
24
|
+
margin: 15px 0;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.btn-start {
|
|
28
|
+
padding: 10px 20px;
|
|
29
|
+
font-size: 16px;
|
|
30
|
+
background-color: #27ae60;
|
|
31
|
+
color: white;
|
|
32
|
+
border: none;
|
|
33
|
+
border-radius: 4px;
|
|
34
|
+
cursor: pointer;
|
|
35
|
+
margin-bottom: 20px;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
.btn-start:hover {
|
|
39
|
+
background-color: #219150;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
.grid {
|
|
43
|
+
display: grid;
|
|
44
|
+
grid-template-columns: repeat(3, 90px);
|
|
45
|
+
grid-gap: 12px;
|
|
46
|
+
margin: 0 auto;
|
|
47
|
+
width: 294px;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.hole {
|
|
51
|
+
width: 90px;
|
|
52
|
+
height: 90px;
|
|
53
|
+
background-color: #795548;
|
|
54
|
+
border-radius: 50%;
|
|
55
|
+
position: relative;
|
|
56
|
+
overflow: hidden;
|
|
57
|
+
cursor: pointer;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
.mole {
|
|
61
|
+
width: 100%;
|
|
62
|
+
height: 100%;
|
|
63
|
+
position: absolute;
|
|
64
|
+
top: 100%;
|
|
65
|
+
display: flex;
|
|
66
|
+
justify-content: center;
|
|
67
|
+
align-items: center;
|
|
68
|
+
font-size: 40px;
|
|
69
|
+
user-select: none;
|
|
70
|
+
transition: top 0.2s ease-out;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
.hole.up .mole {
|
|
74
|
+
top: 0;
|
|
75
|
+
}
|
|
@@ -1,42 +1,239 @@
|
|
|
1
1
|
<!DOCTYPE html>
|
|
2
|
-
<html>
|
|
2
|
+
<html lang="en">
|
|
3
3
|
<head>
|
|
4
|
-
<
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>WAD Unit 1 & 2 Complete Reference</title>
|
|
5
7
|
<link rel="stylesheet" href="style.css">
|
|
8
|
+
<script src="script.js" defer></script>
|
|
6
9
|
</head>
|
|
7
10
|
<body>
|
|
8
|
-
<
|
|
11
|
+
<header class="app-header">
|
|
12
|
+
<h1>Student Registration & DOM Reference</h1>
|
|
13
|
+
<nav class="nav-bar">
|
|
14
|
+
<a href="#form-section">Registration Form</a>
|
|
15
|
+
<a href="#table-section">Records Table</a>
|
|
16
|
+
<a href="#dom-section">DOM Utilities</a>
|
|
17
|
+
<a href="#object-section">Object Operations</a>
|
|
18
|
+
</nav>
|
|
19
|
+
</header>
|
|
9
20
|
|
|
10
|
-
<
|
|
11
|
-
<label>Name:</label><br>
|
|
12
|
-
<input type="text" id="name" required><br><br>
|
|
21
|
+
<div class="fixed-badge animated-badge">Lab Ready</div>
|
|
13
22
|
|
|
14
|
-
|
|
15
|
-
<
|
|
23
|
+
<main class="container">
|
|
24
|
+
<section id="form-section" class="card">
|
|
25
|
+
<h2>Student Registration Form</h2>
|
|
26
|
+
<form id="registrationForm" onsubmit="handleFormSubmit(event)">
|
|
27
|
+
<fieldset>
|
|
28
|
+
<legend>Personal & Academic Details</legend>
|
|
16
29
|
|
|
17
|
-
|
|
18
|
-
|
|
30
|
+
<div class="form-grid">
|
|
31
|
+
<div class="form-group">
|
|
32
|
+
<label for="rollNo">Roll Number:</label>
|
|
33
|
+
<input type="text" id="rollNo" name="rollNo" placeholder="e.g. 21CS001" required autofocus>
|
|
34
|
+
</div>
|
|
19
35
|
|
|
20
|
-
|
|
21
|
-
|
|
36
|
+
<div class="form-group">
|
|
37
|
+
<label for="fullName">Full Name:</label>
|
|
38
|
+
<input type="text" id="fullName" name="fullName" placeholder="Enter full name" required>
|
|
39
|
+
</div>
|
|
22
40
|
|
|
23
|
-
|
|
41
|
+
<div class="form-group">
|
|
42
|
+
<label for="password">Password:</label>
|
|
43
|
+
<input type="password" id="password" name="password" placeholder="Min 6 characters" minlength="6" required>
|
|
44
|
+
</div>
|
|
24
45
|
|
|
25
|
-
|
|
46
|
+
<div class="form-group">
|
|
47
|
+
<label for="email">Email Address:</label>
|
|
48
|
+
<input type="email" id="email" name="email" placeholder="student@example.com" required>
|
|
49
|
+
</div>
|
|
26
50
|
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
<th>Name</th>
|
|
32
|
-
<th>Description</th>
|
|
33
|
-
<th>Price</th>
|
|
34
|
-
<th>Action</th>
|
|
35
|
-
</tr>
|
|
36
|
-
</thead>
|
|
37
|
-
<tbody id="tableBody"></tbody>
|
|
38
|
-
</table>
|
|
51
|
+
<div class="form-group">
|
|
52
|
+
<label for="phone">Phone Number:</label>
|
|
53
|
+
<input type="tel" id="phone" name="phone" placeholder="10-digit number" pattern="[0-9]{10}" required>
|
|
54
|
+
</div>
|
|
39
55
|
|
|
40
|
-
|
|
56
|
+
<div class="form-group">
|
|
57
|
+
<label for="age">Age:</label>
|
|
58
|
+
<input type="number" id="age" name="age" min="1" max="100" value="20" required>
|
|
59
|
+
</div>
|
|
60
|
+
|
|
61
|
+
<div class="form-group">
|
|
62
|
+
<label for="dob">Date of Birth:</label>
|
|
63
|
+
<input type="date" id="dob" name="dob" required>
|
|
64
|
+
</div>
|
|
65
|
+
|
|
66
|
+
<div class="form-group">
|
|
67
|
+
<label for="regTime">Registration Time:</label>
|
|
68
|
+
<input type="time" id="regTime" name="regTime">
|
|
69
|
+
</div>
|
|
70
|
+
|
|
71
|
+
<div class="form-group">
|
|
72
|
+
<label for="gradMonth">Graduation Month:</label>
|
|
73
|
+
<input type="month" id="gradMonth" name="gradMonth">
|
|
74
|
+
</div>
|
|
75
|
+
|
|
76
|
+
<div class="form-group">
|
|
77
|
+
<label for="themeColor">Favorite Color:</label>
|
|
78
|
+
<input type="color" id="themeColor" name="themeColor" value="#3498db">
|
|
79
|
+
</div>
|
|
80
|
+
|
|
81
|
+
<div class="form-group full-width">
|
|
82
|
+
<label for="skillRating">Proficiency Rating: <span id="ratingDisplay">75</span>%</label>
|
|
83
|
+
<input type="range" id="skillRating" name="skillRating" min="0" max="100" value="75" oninput="updateRangeDisplay(this.value)">
|
|
84
|
+
</div>
|
|
85
|
+
|
|
86
|
+
<div class="form-group">
|
|
87
|
+
<label>Gender:</label>
|
|
88
|
+
<div class="radio-group">
|
|
89
|
+
<label><input type="radio" name="gender" value="Male" checked> Male</label>
|
|
90
|
+
<label><input type="radio" name="gender" value="Female"> Female</label>
|
|
91
|
+
<label><input type="radio" name="gender" value="Other"> Other</label>
|
|
92
|
+
</div>
|
|
93
|
+
</div>
|
|
94
|
+
|
|
95
|
+
<div class="form-group">
|
|
96
|
+
<label>Technical Skills:</label>
|
|
97
|
+
<div class="checkbox-group">
|
|
98
|
+
<label><input type="checkbox" name="skills" value="HTML" checked> HTML</label>
|
|
99
|
+
<label><input type="checkbox" name="skills" value="CSS" checked> CSS</label>
|
|
100
|
+
<label><input type="checkbox" name="skills" value="JavaScript" checked> JavaScript</label>
|
|
101
|
+
<label><input type="checkbox" name="skills" value="Java"> Java</label>
|
|
102
|
+
</div>
|
|
103
|
+
</div>
|
|
104
|
+
|
|
105
|
+
<div class="form-group">
|
|
106
|
+
<label for="department">Department:</label>
|
|
107
|
+
<select id="department" name="department" required>
|
|
108
|
+
<option value="">Select Department</option>
|
|
109
|
+
<option value="CSE" selected>Computer Science & Engineering</option>
|
|
110
|
+
<option value="IT">Information Technology</option>
|
|
111
|
+
<option value="ECE">Electronics & Communication</option>
|
|
112
|
+
<option value="MECH">Mechanical Engineering</option>
|
|
113
|
+
</select>
|
|
114
|
+
</div>
|
|
115
|
+
|
|
116
|
+
<div class="form-group">
|
|
117
|
+
<label for="courseTrack">Specialization (Datalist):</label>
|
|
118
|
+
<input list="courses" id="courseTrack" name="courseTrack" placeholder="Choose or type track">
|
|
119
|
+
<datalist id="courses">
|
|
120
|
+
<option value="Web Technologies">
|
|
121
|
+
<option value="Cloud Computing">
|
|
122
|
+
<option value="Artificial Intelligence">
|
|
123
|
+
<option value="Data Analytics">
|
|
124
|
+
</datalist>
|
|
125
|
+
</div>
|
|
126
|
+
|
|
127
|
+
<div class="form-group full-width">
|
|
128
|
+
<label for="address">Address:</label>
|
|
129
|
+
<textarea id="address" name="address" rows="3" placeholder="Street, City, State, Pincode"></textarea>
|
|
130
|
+
</div>
|
|
131
|
+
|
|
132
|
+
<div class="form-group full-width">
|
|
133
|
+
<label for="resume">Upload Document / Resume:</label>
|
|
134
|
+
<input type="file" id="resume" name="resume">
|
|
135
|
+
</div>
|
|
136
|
+
</div>
|
|
137
|
+
|
|
138
|
+
<div class="button-group">
|
|
139
|
+
<button type="submit" class="btn btn-primary" id="submitBtn">Submit Registration</button>
|
|
140
|
+
<button type="reset" class="btn btn-secondary" id="resetBtn">Reset Form</button>
|
|
141
|
+
</div>
|
|
142
|
+
</fieldset>
|
|
143
|
+
</form>
|
|
144
|
+
|
|
145
|
+
<div id="formAlert" class="alert-box"></div>
|
|
146
|
+
</section>
|
|
147
|
+
|
|
148
|
+
<section id="table-section" class="card">
|
|
149
|
+
<h2>Registered Students Table</h2>
|
|
150
|
+
<div class="table-container">
|
|
151
|
+
<table id="recordsTable">
|
|
152
|
+
<caption>Student Enrollment Records</caption>
|
|
153
|
+
<thead>
|
|
154
|
+
<tr>
|
|
155
|
+
<th>Roll No</th>
|
|
156
|
+
<th>Name</th>
|
|
157
|
+
<th>Email</th>
|
|
158
|
+
<th>Department</th>
|
|
159
|
+
<th>Gender</th>
|
|
160
|
+
<th>Skills</th>
|
|
161
|
+
<th>Rating</th>
|
|
162
|
+
<th>Actions</th>
|
|
163
|
+
</tr>
|
|
164
|
+
</thead>
|
|
165
|
+
<tbody id="recordsBody"></tbody>
|
|
166
|
+
<tfoot>
|
|
167
|
+
<tr>
|
|
168
|
+
<td colspan="7">Total Registered Records</td>
|
|
169
|
+
<td id="totalRecordCount">0</td>
|
|
170
|
+
</tr>
|
|
171
|
+
</tfoot>
|
|
172
|
+
</table>
|
|
173
|
+
</div>
|
|
174
|
+
</section>
|
|
175
|
+
|
|
176
|
+
<section id="dom-section" class="card">
|
|
177
|
+
<h2>Interactive DOM Manipulation Lab</h2>
|
|
178
|
+
|
|
179
|
+
<div class="dom-grid">
|
|
180
|
+
<div class="dom-box">
|
|
181
|
+
<h3>Mouseover & Mouseout Event</h3>
|
|
182
|
+
<img id="bulbImg" src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 24 24' fill='%237f8c8d'><path d='M12 2C8.13 2 5 5.13 5 9c0 2.38 1.19 4.47 3 5.74V17c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-2.26c1.81-1.27 3-3.36 3-5.74 0-3.87-3.13-7-7-7zm-3 18h6v1c0 .55-.45 1-1 1h-4c-.55 0-1-.45-1-1v-1z'/></svg>" alt="Light Bulb" onmouseover="turnBulbOn()" onmouseout="turnBulbOff()">
|
|
183
|
+
<p id="bulbStatus">Hover over the bulb to turn it ON</p>
|
|
184
|
+
</div>
|
|
185
|
+
|
|
186
|
+
<div class="dom-box">
|
|
187
|
+
<h3>Countdown Timer (Interval)</h3>
|
|
188
|
+
<div id="timerDisplay" class="counter-display">10</div>
|
|
189
|
+
<div class="btn-cluster">
|
|
190
|
+
<button type="button" class="btn btn-sm" onclick="startTimer()">Start</button>
|
|
191
|
+
<button type="button" class="btn btn-sm" onclick="resetTimer()">Reset</button>
|
|
192
|
+
</div>
|
|
193
|
+
</div>
|
|
194
|
+
|
|
195
|
+
<div class="dom-box">
|
|
196
|
+
<h3>Dynamic List & Swapping</h3>
|
|
197
|
+
<button type="button" class="btn btn-sm" onclick="addListItem()">Add Node</button>
|
|
198
|
+
<ol id="orderList">
|
|
199
|
+
<li onclick="swapWithNext(this)">Item Alpha (Click to Swap)</li>
|
|
200
|
+
<li onclick="swapWithNext(this)">Item Beta (Click to Swap)</li>
|
|
201
|
+
<li onclick="swapWithNext(this)">Item Gamma (Click to Swap)</li>
|
|
202
|
+
</ol>
|
|
203
|
+
</div>
|
|
204
|
+
|
|
205
|
+
<div class="dom-box">
|
|
206
|
+
<h3>Collapse & Expand Element</h3>
|
|
207
|
+
<button type="button" class="btn btn-sm" onclick="toggleCollapse('collapsibleContent', this)">Click to Collapse</button>
|
|
208
|
+
<div id="collapsibleContent" class="collapse-panel">
|
|
209
|
+
<p>This panel can be toggled using JavaScript DOM style display manipulation.</p>
|
|
210
|
+
</div>
|
|
211
|
+
</div>
|
|
212
|
+
|
|
213
|
+
<div class="dom-box">
|
|
214
|
+
<h3>Dynamic Array Menu</h3>
|
|
215
|
+
<ul id="dynamicMenuList" class="styled-list"></ul>
|
|
216
|
+
</div>
|
|
217
|
+
|
|
218
|
+
<div class="dom-box">
|
|
219
|
+
<h3>Mouse Trail Effect</h3>
|
|
220
|
+
<button type="button" class="btn btn-sm" onclick="toggleMouseTrail(this)">Enable Mouse Trail</button>
|
|
221
|
+
<p id="trailStatus">Trail is currently disabled.</p>
|
|
222
|
+
</div>
|
|
223
|
+
</div>
|
|
224
|
+
</section>
|
|
225
|
+
|
|
226
|
+
<section id="object-section" class="card">
|
|
227
|
+
<h2>JavaScript Object Operations Lab</h2>
|
|
228
|
+
<div class="btn-cluster">
|
|
229
|
+
<button type="button" class="btn btn-primary" onclick="runStudentObjectDemo()">Execute Student Object Methods</button>
|
|
230
|
+
</div>
|
|
231
|
+
<pre id="objectOutput" class="console-box">Click "Execute Student Object Methods" to view object transformations, keys, values, iterations, and JSON conversions...</pre>
|
|
232
|
+
</section>
|
|
233
|
+
</main>
|
|
234
|
+
|
|
235
|
+
<footer class="app-footer">
|
|
236
|
+
<p>WAD Web Technologies Reference Kit</p>
|
|
237
|
+
</footer>
|
|
41
238
|
</body>
|
|
42
239
|
</html>
|