n3nikita / web-app-prog-assignment

Humber's Web Application Programming assignment

Objective:

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:

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

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

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