@@ -43,18 +43,6 @@ <h1>🎮 Python Mini Projects</h1>
4343 </ nav >
4444
4545 < main id ="main-content " tabindex ="-1 ">
46- <!-- Category Tabs -->
47- < section class ="tabs-section " aria-label ="Project categories ">
48- < div class ="container ">
49- < div class ="tabs " role ="tablist " aria-label ="Filter projects by category ">
50- < button type ="button " class ="tab active " role ="tab " id ="tab-all " data-category ="all "
51- aria-selected ="true " aria-controls ="projectsGrid " tabindex ="0 "> 🌟 All Projects</ button >
52- < button type ="button " class ="tab " role ="tab " id ="tab-games " data-category ="games "
53- aria-selected ="false " aria-controls ="projectsGrid " tabindex ="-1 "> 🎮 Games</ button >
54- < button type ="button " class ="tab " role ="tab " id ="tab-math " data-category ="math "
55- aria-selected ="false " aria-controls ="projectsGrid " tabindex ="-1 "> 🔢 Math</ button >
56- < button type ="button " class ="tab " role ="tab " id ="tab-utilities " data-category ="utilities "
57- aria-selected ="false " aria-controls ="projectsGrid " tabindex ="-1 "> 🔐 Utilities</ button >
5846 <!-- Search & Category Tabs -->
5947 < section class ="tabs-section " aria-label ="Search and Project categories ">
6048 < div class ="container ">
@@ -78,234 +66,160 @@ <h1>🎮 Python Mini Projects</h1>
7866 </ div >
7967 </ div >
8068 </ section >
81-
82- <!-- Projects Grid -->
83- < section class ="projects-section " aria-label ="Projects ">
84- < div class ="container ">
85- < div id ="noResults " class ="no-results " style ="display: none; ">
86- < div class ="no-results-icon "> 🔍</ div >
87- < h3 > No projects found</ h3 >
88- < p > Try adjusting your search or category filters</ p >
89- </ div >
90- < div class ="projects-grid " id ="projectsGrid ">
91-
92- <!-- Games -->
93- < div class ="project-card " data-category ="games " data-project ="rock-paper-scissor " data-tags ="game,random,choice,strategy,decision ">
94- < div class ="card-icon "> 🪨</ div >
95- < h3 > Rock Paper Scissors</ h3 >
96- < p > Battle against the computer!</ p >
97- < button class ="btn-play "> Play Now</ button >
98- </ div >
99-
100- <!-- Empty State Message -->
101- < div class ="empty-state " id ="emptyState " style ="display: none; ">
102- < p > 📭 No projects match your search.</ p >
103- < p class ="empty-state-hint "> Try different keywords or browse all projects.</ p >
104- </ div >
105- </ div >
106- </ section >
69+ </ section >
10770
10871 <!-- Projects Grid -->
10972 < section class ="projects-section " aria-label ="Projects ">
11073 < div class ="container ">
11174 < div class ="projects-grid " id ="projectsGrid ">
112-
113- <!-- Games -->
114- < div class ="project-card " data-category ="games " data-project ="rock-paper-scissor "
115- data-tags ="game,random,choice,strategy,decision ">
75+ < div class ="project-card " data-category ="games " data-project ="rock-paper-scissor " data-tags ="game,random,choice,strategy,decision ">
11676 < div class ="card-icon "> 🪨</ div >
11777 < h3 > Rock Paper Scissors</ h3 >
11878 < p > Battle against the computer!</ p >
119- < button class ="btn-play "> Play Now </ button >
79+ < button class ="btn-play "> Try It </ button >
12080 </ div >
12181
122- < div class ="project-card " data-category ="games " data-project ="dice-rolling "
123- data-tags ="game,random,animation,probability ">
82+ < div class ="project-card " data-category ="games " data-project ="dice-rolling " data-tags ="game,random,animation,probability ">
12483 < div class ="card-icon "> 🎲</ div >
12584 < h3 > Dice Rolling</ h3 >
12685 < p > Roll the dice with 3D animation!</ p >
127- < button class ="btn-play "> Play Now </ button >
86+ < button class ="btn-play "> Try It </ button >
12887 </ div >
12988
130- < div class ="project-card " data-category ="games " data-project ="coin-flip "
131- data-tags ="game,random,animation,probability,heads,tails ">
89+ < div class ="project-card " data-category ="games " data-project ="coin-flip " data-tags ="game,random,animation,probability,heads,tails ">
13290 < div class ="card-icon "> 🪙</ div >
13391 < h3 > Coin Flip</ h3 >
13492 < p > Heads or tails with spinning animation!</ p >
135- < button class ="btn-play "> Play Now </ button >
93+ < button class ="btn-play "> Try It </ button >
13694 </ div >
13795
138- < div class ="project-card " data-category ="games " data-project ="number-guessing "
139- data-tags ="game,logic,loops,conditional ">
96+ < div class ="project-card " data-category ="games " data-project ="number-guessing " data-tags ="game,logic,loops,conditional ">
14097 < div class ="card-icon "> 🎯</ div >
14198 < h3 > Number Guessing</ h3 >
14299 < p > Guess the secret number!</ p >
143- < button class ="btn-play "> Play Now </ button >
100+ < button class ="btn-play "> Try It </ button >
144101 </ div >
145102
146- < div class ="project-card " data-category ="games " data-project ="hangman "
147- data-tags ="game,word,letters,logic,string ">
103+ < div class ="project-card " data-category ="games " data-project ="hangman " data-tags ="game,word,letters,logic,string ">
148104 < div class ="card-icon "> 🎮</ div >
149105 < h3 > Hangman</ h3 >
150106 < p > Classic word-guessing game!</ p >
151- < button class ="btn-play "> Play Now </ button >
107+ < button class ="btn-play "> Try It </ button >
152108 </ div >
153109
154- < div class ="project-card " data-category ="games " data-project ="flames "
155- data-tags ="game,string,fun,relationship ">
110+ < div class ="project-card " data-category ="games " data-project ="flames " data-tags ="game,string,fun,relationship ">
156111 < div class ="card-icon "> 💖</ div >
157112 < h3 > FLAMES Game</ h3 >
158113 < p > Discover your relationship status!</ p >
159- < button class ="btn-play "> Play Now </ button >
114+ < button class ="btn-play "> Try It </ button >
160115 </ div >
116+
161117 < div class ="project-card " data-category ="games " data-project ="password-forge ">
162118 < div class ="card-icon "> 🔐</ div >
163119 < h3 > Password Forge</ h3 >
164120 < p > Survive evolving firewall password rules!</ p >
165- < button class ="btn-play "> Play Now </ button >
121+ < button class ="btn-play "> Try It </ button >
166122 </ div >
167123
168124 < div class ="project-card " data-category ="games " data-project ="snake-game ">
169125 < div class ="card-icon "> 🐍</ div >
170126 < h3 > Snake Game</ h3 >
171127 < p > Classic snake game!</ p >
172- < button class ="btn-play "> Play Now</ button >
173- </ div >
174-
175- < div class ="project-card " data-category ="games " data-project ="tic-tac-toe ">
176- < div class ="card-icon "> 🧩</ div >
177- < h3 > Tic-Tac-Toe</ h3 >
178- < p > Classic X and O strategy game!</ p >
179- < button class ="btn-play "> Play Now</ button >
128+ < button class ="btn-play "> Try It</ button >
180129 </ div >
181130
182131 < div class ="project-card " data-category ="games " data-project ="emoji-memory ">
183132 < div class ="card-icon "> 🧠</ div >
184133 < h3 > Emoji Memory Game</ h3 >
185134 < p > Test your memory with matching emojis!</ p >
186- < button class ="btn-play "> Play Now</ button >
187- </ div >
188-
189- < div class ="project-card " data-category ="games " data-project ="simon-says ">
190- < div class ="card-icon "> 🗣️</ div >
191- < h3 > Simon Says</ h3 >
192- < p > Remember and repeat the sequence!</ p >
193- < button class ="btn-play "> Play Now</ button >
135+ < button class ="btn-play "> Try It</ button >
194136 </ div >
195- < div class ="project-card " data-category ="games " data-project ="emoji-memory ">
196- < div class ="card-icon "> 🧠</ div >
197- < h3 > Emoji Memory Game</ h3 >
198- < p > Test your memory with fun emojis!</ p >
199- < button class ="btn-play "> Play Now</ button >
200- </ div >
201-
202- <!-- Math Tools -->
203- < div class ="project-card " data-category ="math " data-project ="fibonacci " data-tags ="math,sequence,series,loops,recursion ">
204- < div class ="card-icon "> ✨</ div >
205- < h3 > Fibonacci Series</ h3 >
206- < p > Generate Fibonacci sequences!</ p >
207- < button class ="btn-play "> Try It</ button >
208- </ div >
209137
210138 < div class ="project-card " data-category ="games " data-project ="whack-a-mole ">
211139 < div class ="card-icon "> 🔨</ div >
212140 < h3 > Whack-a-Mole</ h3 >
213141 < p > Hit the moles before they disappear!</ p >
214- < button class ="btn-play "> Play Now </ button >
142+ < button class ="btn-play "> Try It </ button >
215143 </ div >
216144
217- <!-- Math Tools -->
218- < div class ="project-card " data-category ="math " data-project ="fibonacci "
219- data-tags ="math,sequence,series,loops,recursion ">
145+ < div class ="project-card " data-category ="math " data-project ="fibonacci " data-tags ="math,sequence,series,loops,recursion ">
220146 < div class ="card-icon "> ✨</ div >
221147 < h3 > Fibonacci Series</ h3 >
222148 < p > Generate Fibonacci sequences!</ p >
223149 < button class ="btn-play "> Try It</ button >
224150 </ div >
225151
226- < div class ="project-card " data-category ="math " data-project ="progression-recognizer "
227- data-tags ="math,sequence,progression,arithmetic,geometric ">
152+ < div class ="project-card " data-category ="math " data-project ="progression-recognizer " data-tags ="math,sequence,progression,arithmetic,geometric ">
228153 < div class ="card-icon "> 📐</ div >
229154 < h3 > AP/GP/AGP/HP Recognizer</ h3 >
230155 < p > Identify progression types from any sequence.</ p >
231156 < button class ="btn-play "> Try It</ button >
232157 </ div >
233158
234- < div class ="project-card " data-category ="math " data-project ="pascal-triangle "
235- data-tags ="math,triangle,visualization,recursion ">
159+ < div class ="project-card " data-category ="math " data-project ="pascal-triangle " data-tags ="math,triangle,visualization,recursion ">
236160 < div class ="card-icon "> 🔺</ div >
237161 < h3 > Pascal's Triangle</ h3 >
238162 < p > Beautiful hexagon visualization!</ p >
239163 < button class ="btn-play "> Try It</ button >
240164 </ div >
241165
242- < div class ="project-card " data-category ="math " data-project ="armstrong "
243- data-tags ="math,number,digits,power ">
166+ < div class ="project-card " data-category ="math " data-project ="armstrong " data-tags ="math,number,digits,power ">
244167 < div class ="card-icon "> 💎</ div >
245168 < h3 > Armstrong Numbers</ h3 >
246169 < p > Check special number properties!</ p >
247170 < button class ="btn-play "> Try It</ button >
248171 </ div >
249172
250- < div class ="project-card " data-category ="math " data-project ="calculator "
251- data-tags ="math,calculator,arithmetic,operations ">
173+ < div class ="project-card " data-category ="math " data-project ="calculator " data-tags ="math,calculator,arithmetic,operations ">
252174 < div class ="card-icon "> 🧮</ div >
253175 < h3 > Calculator</ h3 >
254176 < p > Your mathematical companion!</ p >
255177 < button class ="btn-play "> Try It</ button >
256178 </ div >
257179
258- < div class ="project-card " data-category ="math " data-project ="collatz "
259- data-tags ="math,conjecture,algorithm,sequence ">
180+ < div class ="project-card " data-category ="math " data-project ="collatz " data-tags ="math,conjecture,algorithm,sequence ">
260181 < div class ="card-icon "> 🔢</ div >
261182 < h3 > Collatz Conjecture</ h3 >
262183 < p > Explore the 3n+1 problem!</ p >
263184 < button class ="btn-play "> Try It</ button >
264185 </ div >
265186
266- < div class ="project-card " data-category ="math " data-project ="prime-analyzer "
267- data-tags ="math,prime,factors,algorithm ">
187+ < div class ="project-card " data-category ="math " data-project ="prime-analyzer " data-tags ="math,prime,factors,algorithm ">
268188 < div class ="card-icon "> 🔱</ div >
269189 < h3 > Prime Analyzer</ h3 >
270190 < p > All-in-one prime number toolkit!</ p >
271191 < button class ="btn-play "> Try It</ button >
272192 </ div >
273193
274- < div class ="project-card " data-category ="math " data-project ="projectile-motion "
275- data-tags ="math,physics,motion,calculation ">
194+ < div class ="project-card " data-category ="math " data-project ="projectile-motion " data-tags ="math,physics,motion,calculation ">
276195 < div class ="card-icon "> 🚀</ div >
277196 < h3 > Projectile Motion</ h3 >
278197 < p > Calculate TOF, Hmax, and Range with physics!</ p >
279198 < button class ="btn-play "> Try It</ button >
280199 </ div >
281200
282- < div class ="project-card " data-category ="math " data-project ="coordinate-polar-transform "
283- data-tags ="math,coordinate,transformation,geometry ">
201+ < div class ="project-card " data-category ="math " data-project ="coordinate-polar-transform " data-tags ="math,coordinate,transformation,geometry ">
284202 < div class ="card-icon "> 🧭</ div >
285203 < h3 > Coordinate to Polar</ h3 >
286204 < p > Transform Cartesian (x, y) into polar (r, theta).</ p >
287205 < button class ="btn-play "> Try It</ button >
288206 </ div >
289207
290- < div class ="project-card " data-category ="math " data-project ="derivative-calculator "
291- data-tags ="math,calculus,derivative,polynomial ">
208+ < div class ="project-card " data-category ="math " data-project ="derivative-calculator " data-tags ="math,calculus,derivative,polynomial ">
292209 < div class ="card-icon "> ∂</ div >
293210 < h3 > Derivative Calculator</ h3 >
294211 < p > Compute 1st/nth polynomial derivatives and evaluate them.</ p >
295212 < button class ="btn-play "> Try It</ button >
296213 </ div >
297214
298- <!-- Utilities -->
299- < div class ="project-card " data-category ="utilities " data-project ="morse-code "
300- data-tags ="utility,morse,translation,communication ">
215+ < div class ="project-card " data-category ="utilities " data-project ="morse-code " data-tags ="utility,morse,translation,communication ">
301216 < div class ="card-icon "> 📻</ div >
302217 < h3 > Morse Code</ h3 >
303218 < p > Translate with lights & sound!</ p >
304219 < button class ="btn-play "> Try It</ button >
305220 </ div >
306221
307- < div class ="project-card " data-category ="utilities " data-project ="tower-of-hanoi "
308- data-tags ="utility,puzzle,recursion,algorithm ">
222+ < div class ="project-card " data-category ="utilities " data-project ="tower-of-hanoi " data-tags ="utility,puzzle,recursion,algorithm ">
309223 < div class ="card-icon "> 🗼</ div >
310224 < h3 > Tower of Hanoi</ h3 >
311225 < p > Solve the classic puzzle!</ p >
@@ -318,18 +232,13 @@ <h3>Number Converter</h3>
318232 < p > Convert Dec, Bin, Oct, and Hex!</ p >
319233 < button class ="btn-play "> Try It</ button >
320234 </ div >
235+
321236 < div class ="project-card " data-category ="utilities " data-project ="typing-speed-tester ">
322237 < div class ="card-icon "> ⌨️</ div >
323238 < h3 > Typing Speed Tester</ h3 >
324239 < p > Test your typing skills!</ p >
325240 < button class ="btn-play "> Try It</ button >
326241 </ div >
327- < div class ="project-card " data-category ="utilities " data-project ="productivity-pet ">
328- < div class ="card-icon "> 🐾</ div >
329- < h3 > Productivity Pet</ h3 >
330- < p > Stay productive with your virtual pet!</ p >
331- < button class ="btn-play "> Try It</ button >
332- </ div >
333242 </ div >
334243 </ div >
335244 </ section >
@@ -364,6 +273,7 @@ <h2 id="modalDialogTitle" class="modal-dialog-title visually-hidden" tabindex="-
364273 </ footer >
365274
366275 <!-- Project modules (one file per project) -->
276+ < script src ="js/audio.js "> </ script >
367277 < script src ="js/projects/rock-paper-scissor.js "> </ script >
368278 < script src ="js/projects/dice-rolling.js "> </ script >
369279 < script src ="js/projects/coin-flip.js "> </ script >
0 commit comments