Welcome to Phase 1 of the Web Development Wing Member Selection 2024-25, where you'll embark on an epic quest that includes fetching, clicking, accordion-ing, and (possibly) turning everything green! This is your moment to show off your web dev chops, with tasks more challenging than Round 1. Think of it as the main event—where you're expected to bring your A-game with expertise and flair. 🎨
The journey has 3 phases:
-
Phase 1 is all about proving yourself worthy of a developer's life. Based on your skillset, you'll be given tasks suited to your area (frontend or backend). There’s no room for ordinary. We’re looking for extraordinary! 🌟
-
Phase 2 will see you challenge your tech buddies in tasks where you'll flex your documentation and skill mastery.
-
Phase 3? Interviews, aka boss level. But don’t worry, details on this final showdown will come later. 😉
⏰ 11th Sep 2024, 11:59 PM ⏰
Think of this as the garlic bread of your developer’s dinner. It’s the first thing everyone looks forward to.
-
Create a private GitHub repository called
"WebD-Selection-Task-1-{EnrollmentNo}"(naming is everything, folks!). -
Add these coding overlords as collaborators to your repo:
- akshayw1
- 0mBudsMann
- shashankpatil28
-
Clone your new shiny repo to your local system and say "Hello, World!" to the code you’ll conquer.
-
(Optional) Add the provided boilerplate code—because hey, sometimes you need a little starter kit!
Here’s where things get serious. Think of this as the pasta of the dinner—delicious and full of code-y carbs. 💻🍝
- Fetch the data from the API. You’ll be pulling in questions and their categories from the following sacred API link:
https://test-data-gules.vercel.app/data.json
-
Display the questions—but not just any way. Use an accordion format (yes, like the musical instrument but with code). 🎶 Click the category title, and the questions expand like magic. ✨
-
Accordion Titles should be the category title. Click to reveal, like opening a treasure chest of questions!
-
Responsiveness is key! We’re not talking about your reflexes (though those help), but your website’s ability to handle larger datasets and devices. You’ll be tested with a different API link and larger data, so make sure your site doesn’t break into pieces. 😱📱
You will earn Bonus Points if you complete any or all of the following tasks: Feeling adventurous? Dessert is optional, but who doesn't like bonus points sprinkled with creativity? You can earn up to 100 extra points for this. That’s like turning your dinner into a 5-course gourmet experience! 👨🍳
-
Checkbox for Each Question (10 points):
Add a checkbox before each question. When a question is marked, its background color should change to green, giving users a visual cue of completion. -
Dark Mode Toggle (20 points):
Implement a dark mode toggle button to enhance the user experience. Dark mode is all the rage—make sure the preference is stored so it remains active when the user revisits the site. -
Keyboard Shortcuts (20 points):
Implement keyboard shortcuts that allow users to navigate through questions easily (e.g., using arrow keys to go up/down, or 'Enter' to expand/collapse a category). This will improve accessibility and user flow. -
Search Bar (20 points):
Include a search bar that allows users to search for specific questions by keywords or category titles. As the user types, the questions and categories should filter dynamically. -
Store Marked Questions (30 points):
Store the marked questions so that the information is preserved even after the website is closed or reloaded. This can be achieved usinglocalStorage, ensuring the user's progress is saved. -
Progress Bar (30 points):
Create a progress bar that tracks how many questions the user has answered or marked as completed. A percentage-based progress indicator helps motivate users to finish more! -
Bookmark Questions (40 points):
Add a feature that allows users to bookmark questions for later review. The bookmarked questions should be displayed together in a new page or section, allowing users to revisit them at any time. -
Add New Category & Question (70 points):
Allow users to create a new category and add questions under any category. Ensure this information is stored in the browser, so users can come back to their customized categories and questions.
-
Drag and Drop Questions (40 points):
Enable users to drag and drop questions between categories. Make sure this change is reflected and stored in the browser so it persists after a page reload. -
Animations & Transitions (30 points):
Add smooth animations to the accordion and other UI elements. A good animation can turn a static interface into something that feels more alive and polished. -
Mobile-First Design (40 points):
Ensure your design is mobile-first, and add swipe functionality for easy navigation between categories on smaller screens.
Adding these tasks to the dessert menu should really give candidates plenty of opportunity to showcase their skills while making the selection process more engaging!
- Create custom error messages if the API doesn’t respond. Friendly and fun—because nothing says "I'm a web dev pro" like helpful error messages. 💬
- Implement a dark mode switch. Every website looks cooler in dark mode. 🌙
- Voice Command Integration (60 points):
Add a voice command feature using the Web Speech API. Let users expand/collapse categories or mark questions as completed by simply using voice commands. - Add some animations (no libraries!) to your accordion. Let it bounce, fade, or zoom—it’s your call. 🚀
-
Deploy Like a Pro:
Deploy your website on GitHub Pages (it’s free for students) or any other platform of your choice. Show off your work to the world! -
Identity Check:
Be sure to write your Name and Enrollment Number in the.mdfile of your repo. We need to know who the coding genius behind the project is! -
Keep It Classic:
Use only vanilla CSS and JavaScript—no external frameworks like Bootstrap allowed. It’s time to flaunt your pure coding skills! -
Plagiarism? Not Cool:
Your code will be checked for plagiarism. If significant similarities or direct copying are found, your submission might be disqualified. Originality is key! -
No ChatGPT Handouts:
Avoid copying code directly from ChatGPT or any other AI. We’re excited to see your unique work, not a pre-packaged solution! -
Learn, Don’t Copy:
Seeking guidance and learning from various web development resources is encouraged. Just make sure your final submission reflects your own creativity and effort!
- Starters (GitHub Setup) - 20 points
- Main Course (Accordion Fun) - 60 points
- Optional Dessert (Checkboxes & Storage) - Up to 100 bonus points
- Code Quality, Responsiveness, Adherence to Rules - Up to 20 points
We will test your website with larger datasets—so make sure your site doesn’t panic under pressure. You want it to be as calm as a monk, even when overloaded with data. 🧘♂️
For any doubts/queries you can add a comment in this issue.
That’s it, folks! Time to get coding, show us what you’re made of, and secure your place in the WebDev Wing. The clock is ticking—are you ready for the challenge?
May the web force be with you! 🌐 01001010 01100001 01101001 00100000 01010111 01100101 01100010 00100000 01000100