This assignment aims to reinforce your understanding of the HTML Document Object Model (DOM) and how to manipulate it using JavaScript. You will create a dynamic web page that responds to user interactions, alters content, structure, and style, demonstrating fundamental concepts of DOM manipulation.
Assignment Details:
-
Create a Basic Web Page Layout
-
Develop an HTML page with the following elements:
-
A header with a title.
-
A navigation bar with at least three links (these can be dummy links).
-
A main content area with at least two sections or articles.
-
A sidebar with a list of items.
-
A footer with your name as the author.
-
-
-
Implement DOM Manipulation Using JavaScript
-
Add a script tag to your HTML page and implement the following functionalities:
-
Content Replacement: When a user clicks on an item in the sidebar, change the content of one of the sections in the main content area.
-
Style Alteration: Add a button that, when clicked, changes the colour scheme of the page (e.g., background colour, text colour).
-
Element Creation and Deletion: Allow the user to add new items to the sidebar list and remove existing items.
-
Event Handling: Display a pop-up message when a user hovers over the header.
-
-
-
Ensure User-Friendly Interface
-
The page should be easy to navigate.
-
Ensure that all JavaScript interactions are smooth and do not cause abrupt page reloads.
-
Submission Guidelines:
-
Submit a link to the live version of your webpage.
-
Ensure your code is well-commented to describe your logic.
-
If any resources are used (like images or external scripts), please include references or sources.
Evaluation Criteria:
-
Correct implementation of DOM manipulation techniques.
-
Code readability and proper commenting.
-
User interface and interaction design.