Scribd
Upload
5 views6 pages

Web Technology 511 Assignment

This document outlines the assignment instructions for the Web Tech 511 module, detailing the requirements for submission, including formatting, sections to include, and a declaration of originality. It presents three main tasks: designing an interactive landing page for a fictional product, creating a web application to display election results, and building a dynamic to-do list with API integration. Additional requirements emphasize the use of HTML, CSS, and JavaScript, along with features like responsiveness and dynamic updates.

Uploaded by

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

Web Technology 511 Assignment

This document outlines the assignment instructions for the Web Tech 511 module, detailing the requirements for submission, including formatting, sections to include, and a declaration of originality. It presents three main tasks: designing an interactive landing page for a fictional product, creating a web application to display election results, and building a dynamic to-do list with API integration. Additional requirements emphasize the use of HTML, CSS, and JavaScript, along with features like responsiveness and dynamic updates.

Uploaded by

ayandiswasthembelendlovu
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 6

MODULE NAME : WEB TECH 511

richfield.ac.za

Name and Surname:

Student ITS No:

Qualification: Year of Study: Semester:

Assignment due date: Date submitted:

QUESTION EXAMINER MARKS MODERATOR MARKS REMARKS

ASSIGNMENT INSTRUCTIONS

Please tick each box to confirm completion.


Use Times New Roman font, size 12, with 1.5 line spacing throughout the document.
Apply Harvard Referencing Style for all citations and references.

For essay-style assignments, please include the following sections:


Table of Contents
Introduction
Main Body (with relevant subheadings)
Conclusion
References

Submit the assignment in PDF format on Moodle.


Use the specified cover page provided.
Include a signed declaration of originality.

DECLARATION OF ORIGINALITY:
I hereby declare that this assignment is my own work and has not been copied from any other source except where due
acknowledgment is made. I affirm that all sources used have been properly cited and that this submission complies with
the institution’s policies on academic integrity and plagiarism.

Student Signature: Date:

Richfield Graduate Institute of Technology (Pty) Ltd is registered with the Department of Higher Education & Training as a Private Higher Education Institution under the Higher
Education Act, 1997, Registration Certificate No. 2000/HE07/008.
Question 1: 30 Marks

Design an interactive landing page for a fictional product, "EcoSmart Water Bottle," with
the following features:

1. Header:

o Create a navigation bar with links to:

▪ Home

▪ Features

▪ Pricing

▪ Contact Us

2. 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).

3. 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.

4. 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.

1|Pa g e
• 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

2|Pa g e
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:

1. 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).

2. Event Handling:

3|Pa g e
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).

3. 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).

4. 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

4|Pa g e
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.

5|Pa g e

You might also like