Skip to content

Commit ffd6908

Browse files
avniavni
committed
Add archetype selection handling in fixevent.js
- Implemented event listeners for archetype options to allow users to select an archetype. - Set default selected archetype to 'innovator' on page load. - Updated hidden input value based on user selection and added visual feedback for selected options.
1 parent c81b7c0 commit ffd6908

File tree

10 files changed

+217
-17
lines changed

10 files changed

+217
-17
lines changed

‎public/archetypes/archetype-builder.png‎

186 KB
Loading

‎public/archetypes/archetype-changecatalyst.png‎

219 KB
Loading

‎public/archetypes/archetype-coach.png‎

186 KB
Loading

‎public/archetypes/archetype-communicator.png‎

206 KB
Loading

‎public/archetypes/archetype-innovator.png‎

198 KB
Loading

‎public/archetypes/archetype-strategist.png‎

195 KB
Loading

‎public/fixevent.js‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
// Code to handle archetype selection
2+
document.addEventListener('DOMContentLoaded', function() {
3+
// Get all archetype options
4+
const archetypeOptions = document.querySelectorAll('.archetype-option');
5+
const archetypeInput = document.getElementById('archetype');
6+
7+
// Set initial selected archetype (based on default value 'innovator' from loadInitialData())
8+
const defaultArchetype = 'innovator';
9+
const defaultOption = document.querySelector(`.archetype-option[data-value="${defaultArchetype}"]`);
10+
if (defaultOption) {
11+
defaultOption.classList.add('selected');
12+
archetypeInput.value = defaultArchetype;
13+
}
14+
15+
// Add click event listener to each archetype option
16+
archetypeOptions.forEach(option => {
17+
option.addEventListener('click', function() {
18+
// Remove selected class from all options
19+
archetypeOptions.forEach(opt => opt.classList.remove('selected'));
20+
21+
// Add selected class to clicked option
22+
this.classList.add('selected');
23+
24+
// Update hidden input value with the selected archetype
25+
const value = this.getAttribute('data-value');
26+
archetypeInput.value = value;
27+
28+
// Update the full string with the new archetype value
29+
updateFullString();
30+
});
31+
});
32+
});

‎public/index.html‎

Lines changed: 32 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -23,8 +23,34 @@ <h2>Badger Press - SLS Edition</h2>
2323
<input type="text" id="jobtitle" name="jobtitle">
2424
<label for="askmeabout">Ask Me About:</label>
2525
<input type="text" id="askmeabout" name="askmeabout">
26-
<label for="pronouns">Pronouns:</label>
27-
<input type="text" id="pronouns" name="pronouns">
26+
<label for="archetype">Archetype:</label>
27+
<div class="archetype-selector">
28+
<div class="archetype-option" data-value="builder">
29+
<img src="./archetypes/archetype-builder.png" alt="Builder" />
30+
<span>Builder</span>
31+
</div>
32+
<div class="archetype-option" data-value="changecatalyst">
33+
<img src="./archetypes/archetype-changecatalyst.png" alt="Change Catalyst" />
34+
<span>Change Catalyst</span>
35+
</div>
36+
<div class="archetype-option" data-value="coach">
37+
<img src="./archetypes/archetype-coach.png" alt="Coach" />
38+
<span>Coach</span>
39+
</div>
40+
<div class="archetype-option" data-value="communicator">
41+
<img src="./archetypes/archetype-communicator.png" alt="Communicator" />
42+
<span>Communicator</span>
43+
</div>
44+
<div class="archetype-option" data-value="innovator">
45+
<img src="./archetypes/archetype-innovator.png" alt="Innovator" />
46+
<span>Innovator</span>
47+
</div>
48+
<div class="archetype-option" data-value="strategist">
49+
<img src="./archetypes/archetype-strategist.png" alt="Strategist" />
50+
<span>Strategist</span>
51+
</div>
52+
<input type="hidden" id="archetype" name="archetype" value="">
53+
</div>
2854
</div>
2955
<div class="preview-section">
3056
<div class="badge-preview">
@@ -71,12 +97,10 @@ <h2>Badger Press - SLS Edition</h2>
7197

7298
<script src="script.js"></script>
7399

74-
<footer style="position: fixed; bottom: 0; left: 0; right: 0; background-color: #f0f0f0; padding: 10px; text-align: center;">
75-
<a href="https://github.com/badger/badger.github.io" target="_blank" style="color: #333; text-decoration: none;">
76-
View source</a>
77-
&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
78-
<a href="https://viper-ide.org/" target="_blank" style="color: #333; text-decoration: none;">
79-
Edit code on badge</a>
100+
<footer>
101+
<a href="https://github.com/badger/badger.github.io" target="_blank">View source</a>
102+
&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
103+
<a href="https://viper-ide.org/" target="_blank">Edit code on badge</a>
80104
</footer>
81105
</body>
82106
</html>

‎public/script.js‎

Lines changed: 37 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ function loadInitialData() {
2828
lastname: 'Lisa',
2929
askmeabout: 'Last Project I Coded',
3030
jobtitle: 'Octocat',
31-
pronouns: '',
31+
archetype: '', // Default archetype is now blank
3232
githubhandle: 'mona'
3333
});
3434
}
@@ -41,6 +41,38 @@ function loadInitialData() {
4141
// Call loadInitialData when the page loads
4242
window.addEventListener('load', loadInitialData);
4343

44+
// Handle archetype selection
45+
document.addEventListener('DOMContentLoaded', function() {
46+
// Get all archetype options
47+
const archetypeOptions = document.querySelectorAll('.archetype-option');
48+
const archetypeInput = document.getElementById('archetype');
49+
50+
// No default archetype is selected now (blank by default)
51+
const defaultOption = null;
52+
// Clear any previous selection
53+
archetypeOptions.forEach(opt => opt.classList.remove('selected'));
54+
// Clear the input value
55+
archetypeInput.value = '';
56+
57+
// Add click event listener to each archetype option
58+
archetypeOptions.forEach(option => {
59+
option.addEventListener('click', function() {
60+
// Remove selected class from all options
61+
archetypeOptions.forEach(opt => opt.classList.remove('selected'));
62+
63+
// Add selected class to clicked option
64+
this.classList.add('selected');
65+
66+
// Update hidden input value with the selected archetype
67+
const value = this.getAttribute('data-value');
68+
archetypeInput.value = value;
69+
70+
// Update the full string with the new archetype value
71+
updateFullString();
72+
});
73+
});
74+
});
75+
4476
const inputs = document.querySelectorAll('input:not(#fullstring)');
4577
const fullStringInput = document.getElementById('fullstring');
4678
const qrcodeContainer = document.getElementById('qrcode');
@@ -63,7 +95,7 @@ function updateFullString() {
6395
});
6496

6597
// Define the order of fields
66-
const fieldOrder = ['firstname', 'lastname', 'askmeabout', 'jobtitle', 'pronouns', 'githubhandle'];
98+
const fieldOrder = ['firstname', 'lastname', 'askmeabout', 'jobtitle', 'archetype', 'githubhandle'];
6799

68100
// Map the ordered fields to their values
69101
const orderedValues = fieldOrder.map(fieldName => fieldValues[fieldName] || '');
@@ -154,7 +186,7 @@ const otherInputs = document.querySelectorAll('input:not(#fullstring)');
154186
function parseFullString(fullString) {
155187
const parts = fullString.split('^');
156188
const id = parts[0].replace('iD', '');
157-
const fields = ['firstname', 'lastname', 'askmeabout', 'jobtitle', 'pronouns', 'githubhandle'];
189+
const fields = ['firstname', 'lastname', 'askmeabout', 'jobtitle', 'archetype', 'githubhandle'];
158190
const values = parts.slice(1, -1); // Exclude the last empty element
159191

160192
const result = { id };
@@ -423,10 +455,10 @@ display.update()`;
423455
await readableStreamClosed;
424456
await port.close();
425457

426-
//alert('Files transferred successfully!');
458+
alert('Files transferred successfully!');
427459
} catch (error) {
428460
console.error('Error:', error);
429-
//alert('An error occurred while transferring files.');
461+
alert('An error occurred while transferring files: ' + error.message);
430462
}
431463
} else {
432464
alert('Web Serial API not supported in this browser.');

‎public/styles.css‎

Lines changed: 116 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,20 +11,27 @@ body {
1111
font-family: 'Mona Sans', Arial, sans-serif;
1212
margin: 0;
1313
padding: 20px;
14+
padding-bottom: 60px; /* Add space for footer */
1415
background-color: #f0f0f0;
16+
min-height: 100vh;
17+
display: flex;
18+
flex-direction: column;
1519
}
1620
.container {
1721
display: flex;
18-
max-width: 1000px;
22+
max-width: 1200px;
1923
margin: 0 auto;
2024
background-color: white;
2125
border-radius: 10px;
2226
box-shadow: 0 0 10px rgba(0,0,0,0.1);
2327
overflow: hidden;
28+
flex: 1;
29+
flex-wrap: wrap;
2430
}
2531
.input-section {
2632
flex: 1;
2733
padding: 20px;
34+
min-width: 300px;
2835
}
2936
.preview-section {
3037
flex: 1;
@@ -34,7 +41,8 @@ body {
3441
align-items: center;
3542
background-color: #f9f9f9;
3643
gap: 20px;
37-
justify-content: center;
44+
justify-content: flex-start;
45+
min-width: 300px;
3846
}
3947
.qr-container {
4048
margin-bottom: 10px;
@@ -45,8 +53,13 @@ body {
4553
display: none; /* hide by default */
4654
}
4755
.badge-preview {
48-
width: 592px;
49-
height: 256px;
56+
width: 100%;
57+
max-width: 592px;
58+
height: auto;
59+
display: flex;
60+
flex-direction: column;
61+
align-items: center;
62+
gap: 10px;
5063
}
5164
.badge-preview-buttons {
5265
text-align: center;
@@ -68,6 +81,47 @@ input {
6881
border-radius: 4px;
6982
box-sizing: border-box;
7083
}
84+
85+
.archetype-selector {
86+
display: grid;
87+
grid-template-columns: repeat(3, 1fr);
88+
gap: 10px;
89+
margin-top: 10px;
90+
}
91+
92+
.archetype-option {
93+
cursor: pointer;
94+
border: 2px solid #ddd;
95+
border-radius: 4px;
96+
padding: 5px;
97+
display: flex;
98+
flex-direction: column;
99+
align-items: center;
100+
transition: all 0.3s ease;
101+
}
102+
103+
.archetype-option:hover {
104+
border-color: #0366d6;
105+
background-color: rgba(3, 102, 214, 0.1);
106+
}
107+
108+
.archetype-option.selected {
109+
border-color: #0366d6;
110+
background-color: rgba(3, 102, 214, 0.1);
111+
}
112+
113+
.archetype-option img {
114+
width: 100%;
115+
height: auto;
116+
max-height: 60px;
117+
object-fit: contain;
118+
}
119+
120+
.archetype-option span {
121+
margin-top: 5px;
122+
font-size: 12px;
123+
text-align: center;
124+
}
71125
#qrcode {
72126
border: 1px solid #ddd;
73127
padding: 10px;
@@ -82,4 +136,62 @@ input {
82136
border: 1px solid #ddd;
83137
margin: 0 auto;
84138
display: block;
139+
max-width: 100%;
140+
height: auto;
141+
}
142+
.help-container {
143+
padding: 20px;
144+
background-color: white;
145+
border-radius: 8px;
146+
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
147+
margin-top: 20px;
148+
width: 100%;
149+
box-sizing: border-box;
150+
}
151+
.help-container p {
152+
margin-bottom: 15px;
153+
line-height: 1.5;
154+
}
155+
.help-container a {
156+
color: #0366d6;
157+
text-decoration: none;
158+
}
159+
.help-container a:hover {
160+
text-decoration: underline;
161+
}
162+
footer {
163+
position: fixed;
164+
bottom: 0;
165+
left: 0;
166+
right: 0;
167+
background-color: #f0f0f0;
168+
padding: 10px;
169+
text-align: center;
170+
box-shadow: 0 -2px 4px rgba(0,0,0,0.05);
171+
z-index: 100;
172+
}
173+
footer a {
174+
color: #333;
175+
text-decoration: none;
176+
transition: color 0.2s;
177+
}
178+
footer a:hover {
179+
color: #0366d6;
180+
}
181+
182+
/* Responsive adjustments */
183+
@media (max-width: 768px) {
184+
.container {
185+
flex-direction: column;
186+
margin: 0;
187+
border-radius: 0;
188+
}
189+
.input-section,
190+
.preview-section {
191+
width: 100%;
192+
}
193+
body {
194+
padding: 0;
195+
padding-bottom: 60px;
196+
}
85197
}

0 commit comments

Comments
 (0)