Scribd
Upload
11 views4 pages

Web Development Challenge Set

The document outlines a web development challenge set consisting of four levels, each with specific tasks and requirements. Level 1 involves creating a structured webpage layout using Flexbox, Level 2 focuses on an interactive feedback form with validation, Level 3 requires building an event filtering interface with a dataset, and Level 4 entails developing a leaderboard system for a hackathon. Each level has defined time limits and difficulty ratings, emphasizing user interaction and dynamic content display.

Uploaded by

sivasanjaidisco
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
11 views4 pages

Web Development Challenge Set

The document outlines a web development challenge set consisting of four levels, each with specific tasks and requirements. Level 1 involves creating a structured webpage layout using Flexbox, Level 2 focuses on an interactive feedback form with validation, Level 3 requires building an event filtering interface with a dataset, and Level 4 entails developing a leaderboard system for a hackathon. Each level has defined time limits and difficulty ratings, emphasizing user interaction and dynamic content display.

Uploaded by

sivasanjaidisco
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd

Web Development Challenge Set

Level 1 – Structured Layout Challenge

Time Limit: 15
Minutes Difficulty:
Easy–Medium

Task
Create a webpage with the following layout structure:

| HEADER |

| SIDEBAR |CONTENT|
| | |
| | |

| FOOTER |

Requirements
Header
Title: ITRIX Web Arena
Background color:
#2c3e50 Text must be
center aligned Text color:
white

Sidebar
Contains navigation links:
Home
Events
Contac
t
Background color: light grey

Content Area
Heading: Round 2 – Web Development
Include a short paragraph explaining the
event.
Footer
Text: “Versatility Defines
Victory” Text should be center
aligned

Constraints
The layout must be implemented using Flexbox

Level 2 – Interactive Feedback Form

Time Limit: 15
Minutes Difficulty:
Medium

Task
Create a simple feedback form containing the following
fields: Name (input field)
Email (input field)
Rating (dropdown:
1–5) Submit button

Requirements
When the Submit button is
clicked: Validate that all fields
are filled.
If valid, display the message:

-Thank you <Name> for rating us

<Rating>/5 If any field is empty, display:

-Please complete all fields

Show error/output in webpage (DOM), not alert


Level 3 – Event Filtering Interface

Time Limit: 30
Minutes Difficulty:
Medium–Hard

Dataset
Use the following JavaScript dataset:

const events = [
{name:"Hackathon", category:"Coding"},
{name:"UI Workshop", category:"Design"},
{name:"Cyber Security", category:"Security"},
{name:"AI Bootcamp", category:"AI"},
{name:"Web Development", category:"Coding"}
];

Task
Build a webpage that performs the following:
Show all events by default. The page should not reload.

Display all events in a list format.


Add a dropdown filter with the categories:
All
Coding
Design
Securit
y

When a category is selected, display only the events belonging to that


category. Example
Selecting Coding should display:

Hackathon
Web Development
Level 4 – Hackathon Leaderboard System

Time Limit: 30
Minutes Difficulty:
Medium–Hard

Task
Develop a Leaderboard System for a hackathon.

Features
Users should be able to input:
Team Name
Score
A button “Add Team” should add the team to the
leaderboard. Leaderboard Display
Display the teams in a list or table format:
Team.

Score Code Ninjas.


95
Byte Masters. 90

Requirements
Display all added teams dynamically on the page.
The page must not reload when new teams are
added. Each new team should be added to the list.

Constraints
Sort leaderboard by score (descending) and prevent empty inputs.

You might also like