Web Dev: EcoSmart Landing, Election Chart & To-Do
Question 1: 30 Marks
Design an interactive landing page for a fictional product, “EcoSmart Water Bottle,” with the following features:
- Header:
o Create a navigation bar with links to:
■ Home
■ Features
■ Pricing
■ Contact Us
- Main Section:
o Add a product image (use a placeholder if needed).
o Include a prominent “Buy Now” button.
o Clicking the button should open a modal (pop-up) where users can select their preferred product color (using a dropdown menu or radio buttons).
- Interactive Component:
o Implement a dynamic price calculator that updates the total price in real time based on the user’s selected color and any additional features (e.g., custom engravings or packaging).
o Display the updated price clearly on the page.
- Footer:
o Include a “Contact Us” form with fields for Name, Email, and Message.
o Add a checkbox for “Terms and Conditions” that must be checked before form submission.
Additional Requirements:
• Use HTML, CSS, and JavaScript in your implementation, including comments to explain your code.
• Ensure the design is visually appealing and responsive for mobile and tablet devices.
• Bonus Feature: Add a sticky navbar that remains fixed at the top of the page as the user scrolls.
Note: Ensure to include both the code and the corresponding output for all questions
Home Features Pricing Contact Us
EcoSmart Water Bottle
EcoSmart Water Bottle
Buy Now
Total Price: R750.00
Question 2: 30 Marks
Using your HTML, CSS, and JavaScript skills, create a web application to display the 2025 election results for the specified political parties. The application should feature a pie chart with clearly labeled, color-coded sections representing DAD (45%), PPP (5%), CCCC (27%), and MCD (23%). Ensure each segment is distinguishable with unique colors.
Note: Ensure to include both the code and the corresponding output for all questions
Question 3: 30 Marks
Build a dynamic to-do list that integrates with a mock API:
- API Integration:
o Use the mock API provided by JSONPlaceholder to fetch a list of 10 to-dos.
o Display these to-dos in an unordered list on the page, showing the title and whether they are completed or not (use checkboxes to represent completion status).
- Event Handling:
o Add a feature that allows the user to add new to-dos. This new to-do should be displayed in the list immediately after the user adds it (but it doesn’t need to persist after the page reloads).
- Task Removal:
o Add a delete button next to each task that removes it from the list when clicked. The task should be deleted from both the UI and the API (mock API, so you won’t need to actually modify the backend, but simulate it).
- Additional Features:
o Allow the user to filter tasks by “Completed” or “Not Completed” by clicking on a button.
Your To Do List should be as follows
Note: Ensure to include both the code and the corresponding output for all questions
Additional Instructions:
• Ensure that the page dynamically updates in response to user actions, and that no page reload is necessary when tasks are added or removed.
• Provide comments explaining your event listeners and API integration.
• Bonus: If you know how to, add a local storage feature so that the to-do list persists across page reloads.
Web Design Answers: Expert Answers on Above Questions on Web Design & Development
The HTML file covering all the codes is included in the appendix section. The details are explained as follows:
Header/Navigation Bar: The navigation bar includes menus, like home, features, pricing, contact us.
Main section: The body section includes the title “EcoSmart Water Bottle” with a product image, and the buy now call to action button.
Interactive component: The interactive component includes a real time price calculator which displays the total price and it is updated dynamically.
Footer section: The footer section includes the contact us form and specify the terms and conditions including the data privacy policy and practices.
| Disclaimer: This answer is a model for study and reference purposes only. Please do not submit it as your own work. |
