Landing : Athabascau University

QUICK COURSE LINKS:  Add blog post - Read latest group posts - Course Moodle site

FAQs: Course process : Site design : HTML : CSS : JavaScript : JQuery : AJAX : Misc : Accessing your web space at AU : Podcasts for each unit

Updated resource pages:  Unit 1 - Unit 2  - Unit 3Units 4 & 5 - Unit 6 - Unit 7

Important notice: the student web server is unavailable. Until this is fixed, we do not require you to upload your site to the student server. See Running a web server on your local machine for details of how to meet the requirements for the final unit, and my posts on the subject in the discussion forum for further information about the problem.

Testing of a new server is in progress: if you would like to get early access and you are unafraid of working with command lines, network settings, and conf files, please contact Gerald Abshez, asking to be part of the trial.

Three ideas for using JavaScript: Revision

Last updated February 23, 2024 - 11:40pm by Ashutosh Singh

Idea 1: Interactive Image Gallery:

Idea: Provide an interactive picture gallery that allows users to view bigger photographs by clicking on thumbnails. The larger picture should open in a modal window or lightbox overlay when a user clicks on a thumbnail. It should be possible for users to use the previous and next buttons to move between photos.

How it Works: A grid of the web page's thumbnail photos will make up the image gallery. A bigger version of each thumbnail will be linked to it. JavaScript will handle the event when a user clicks on a thumbnail, displaying the appropriate bigger picture in a modal window. Users may navigate between photos using the navigation buttons on the modal window.

Relation to Site: The user experience of a website is improved by the addition of an interactive picture gallery, particularly for websites that include visual information, such as travel blogs, product displays, or photography portfolios. It makes it simple for people to view and interact with photos without ever leaving the website they are on.


Idea 2: Dynamic Form Validation:

Idea: Implement dynamic form validation to provide real-time feedback to users as they fill out forms on the website. Validate form fields such as email addresses, phone numbers, and required fields as the user types. Display error messages or indicators next to invalid fields.

How it Works: When input events occur in form fields, JavaScript will detect them and check the data against pre-established standards, such as regular expressions for phone numbers or email addresses. JavaScript will show an error message next to the field if the input is incorrect. The error notice vanishes when the user fixes the input.

Relation to Site: By assisting users in entering accurate information and lowering the possibility of form submission mistakes, dynamic form validation enhances the usability of the website. It supports multiple user profiles, such as those completing registration forms, contact forms, or e-commerce purchase forms.


Idea 3: Animated Navigation Menu:

Idea: Make a dynamic navigation menu to improve website engagement and user interaction. A menu item should suggest interaction as the user hovers over it using a smooth animation effect, such as a color change, underlining, or slide-in transition.

How it Works: The navigation menu elements will have event listeners added by JavaScript to detect user events like mouse hover. JavaScript will initiate CSS transitions or animations in response to user input to provide eye-catching effects. Users will receive feedback from these impacts, which will also improve navigational clarity.

Relation to Site: The website becomes more visually appealing and interactive with the addition of an animated navigation menu, which increases user engagement. It enhances the overall user experience and promotes exploration in situations when visitors must go across various portions of the website.



COMP 266

COMP 266

COMP 266: Introduction to Web Programming