South Asian University

Mukund Prasad

Integrated Dual Degree BTech-MTech, CSE - Class of 2029

SAU/CS/DMTECH(CSE)/2024/13

Repository: JavaScript Implementations for Web Development

(Integrated Dual Degree BTech-MTech, CSE - Semester 2)

This repository documents the collection of JavaScript implementations developed as part of the Web Development course (IDD, CSE) during the second semester. The artefacts herein demonstrate the application of client-side scripting principles to enhance the interactivity and dynamic behaviour of web interfaces, built upon foundational HTML and CSS structures.

Introduction

This repository is a curated portfolio of JavaScript code exercises and projects undertaken throughout the specified academic period. The primary objective of these implementations was to solidify understanding and practical application of core JavaScript concepts relevant to front-end web development. The included projects illustrate proficiency in manipulating the Document Object Model (DOM), managing event-driven interactions, implementing client-side validation mechanisms, and employing asynchronous programming paradigms where applicable.

The scope of the projects encompasses a range of fundamental JavaScript functionalities, including but not limited to:

• DOM Manipulation: Programmatic alteration of HTML document structure, style, and content.
• Event Handling: Implementation of event listeners to respond to user-initiated actions and system events.
• Form Validation: Client-side scripting to ensure data integrity and provide immediate feedback to users.
• Algorithmic Implementation: Development of basic algorithms and logical constructs using JavaScript syntax and control flow.
• Interactive UI Components: Creation of dynamic user interface elements such as image carousels, navigation menus, and content toggles.

JavaScript Project Portfolio

The following JavaScript implementations are included in this repository:

• Display an Alert on Page Load: Implementation of a simple alert to demonstrate fundamental JavaScript's ability to interact with the user upon page load.
• Change Button Color on Click: Demonstrates event handling and basic DOM manipulation to dynamically alter button styling based on user interaction.
• Variables and Data Types I/O: Illustrates how to capture user input, manipulate data types (strings, numbers, booleans), and update the DOM to display results.
• JavaScript Operators: Application of arithmetic and logical operators to perform calculations and comparisons based on user-provided values.
• Simple Grade Calculator: Development of a conditional logic structure to assign grades based on numerical input, showcasing the use of if/else if/else statements.
• Multiplication Table Generator: Implementation of a loop (for loop) to generate a multiplication table dynamically based on user input.
• JavaScript Control Flow & Loops: Demonstrates control flow using conditional statements (if/else) and loops (for, while) to execute different code blocks based on conditions and iterate over sequences.
• Simple User Profile Form: Captures and displays user profile information, illustrating basic form handling and DOM manipulation.
• JavaScript Functions: Implementation of various functions to perform specific tasks like calculating the square of a number, adding two numbers, and checking if a number is even or odd. Demonstrates function definitions, calls, and arrow functions.
• Dynamic Color Mixer: Interactive application using range sliders to control RGB color values and dynamically update the background color of a div element, showcasing real-time DOM manipulation.
• Simple Calculator: Implementation of a basic calculator with addition, subtraction, multiplication, and division operations using functions and a switch statement for operation selection.
• JavaScript Event Handling: Demonstrates event listeners for keyboard input (keydown) and form submission (submit), including prevention of default form behavior and input validation.
• Light Bulb Toggle Effect: Simple DOM manipulation to change the source of an image (<img>) on click, simulating a light bulb toggle.
• Real-Time Digital Clock: Implementation of setInterval to update and display the current time in real-time, showcasing dynamic content updates.
• Registration Form: Basic form handling to capture user registration data (name, email, password) with client-side validation using alert.
• Registration Form with Validation: Enhanced registration form with more robust client-side validation, including checks for required fields, valid email format, and password length, with dynamic error message display.
• Interactive Registration Form: Advanced registration form featuring real-time input validation, visual feedback (error highlighting), and a popup success message upon successful submission.
• DOM Manipulation: Collection of DOM manipulation techniques including dynamic heading/quote generation, dark/light mode toggle, and adding new paragraphs to the page.
• Task Manager: A simple task management application demonstrating DOM manipulation to add, toggle completion status, and delete tasks dynamically.
• Feedback Collector: Application to collect user feedback, including name, rating, and comments, and dynamically display the submitted feedback on the page.
• Notes Application: Basic note-taking application using localStorage to save and retrieve notes, demonstrating simple data persistence.
• Daily Journal Application: Application for creating and storing daily journal entries with dates, utilizing localStorage for data persistence.
• Welcome Back (Session Storage): Demonstrates the use of sessionStorage to store and retrieve a user's name, providing a personalized welcome message on subsequent visits within the same session.
• User Preferences: Allows users to select and save theme and font size preferences using localStorage, demonstrating dynamic styling based on user choices.
• Interactive Counter App: Simple counter application with increment, decrement, and reset buttons, demonstrating basic event handling and DOM updates.
• DOM Manipulation Activity: Includes a color changing box and a dynamic list, demonstrating background color manipulation and adding/removing elements from a list.
• Show & Hide Password: Toggles the visibility of a password field, enhancing user interface interactivity.

Technical Specifications

• HTML: Utilised for the semantic structuring of web document content.
• CSS: Employed for the declarative styling and visual presentation of web interfaces.
• JavaScript: The primary scripting language used for client-side dynamic functionality and interactivity.

Repository Access

To examine the individual project implementations, the repository can be accessed at:

JavaScript Implementations for Web Development

Snapshot

Conclusion

This repository contains my client-side JavaScript projects from the Web Development course (Semester 2). These demonstrate foundational front-end scripting. The dynamic aspects explored here have ignited my interest in server-side technologies, which I plan to learn later. I look forward to exploring the full scope of web development.

License

The content of this project itself is licensed under the Creative Commons Zero v1.0 Universal License, and the underlying source code used to format and display that content is licensed under the [MIT license]. More details can be found here.