Scribd
Upload
6 views7 pages

CIAIII - Component 2

This report details the event handling and Test-Driven Development (TDD) implementation in the Nyaya Mitra Login System, which includes features like a login form, password visibility toggle, and input validation. The TDD process follows a Red-Green-Refactor cycle, ensuring that tests are written before code implementation and optimizing the code afterward. The system successfully demonstrates event handling and basic testing using browser console logs, laying a foundation for future enhancements.

Uploaded by

sachin.yadav
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
6 views7 pages

CIAIII - Component 2

This report details the event handling and Test-Driven Development (TDD) implementation in the Nyaya Mitra Login System, which includes features like a login form, password visibility toggle, and input validation. The TDD process follows a Red-Green-Refactor cycle, ensuring that tests are written before code implementation and optimizing the code afterward. The system successfully demonstrates event handling and basic testing using browser console logs, laying a foundation for future enhancements.

Uploaded by

sachin.yadav
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/ 7

Assignment Report:

Event Handling and TDD in Nyaya Mitra Login System

CIA III - COMPONENT 2

​
Student Name: Sachin Yadav(2341551), Surya Vamshi S(2341566)​
Date: 27/02/2025​
Course: Principles of Software Development II

Bachelor of Computer Applications

Under the supervision of

GUIDE NAME

Dr. Vineetha K R

Department of Computer Science CHRIST (Deemed to be


University) Bengaluru, India. February– 2025
1. Introduction
This report explains the event handling mechanism and the implementation of Test-Driven
Development (TDD) in the Nyaya Mitra Login System. The system includes:

●​ A login form with a username, password field, and a "Remember Me" checkbox.
●​ A toggle password visibility button.
●​ A Sign In button that validates user inputs.
●​ Basic testing using browser console logs instead of automated frameworks like Jest.

2. Event Handling in the System


Event handling is a mechanism in which JavaScript detects and responds to user interactions,
such as clicking a button or typing in an input field.

Event Handling Implemented in the Code

1.​ DOMContentLoaded Event​


​
Code - document.addEventListener("DOMContentLoaded", function () {
○​ This ensures the JavaScript executes only after the entire webpage has loaded.
○​ Ensures all elements are available before event listeners are attached.
2.​ Sign In Button Click Event​
​
Code - signInBtn.addEventListener("click", handleSignIn);
○​ The event is triggered when the user clicks the Sign In button.
○​ The function handleSignIn(event):
■​ Prevents default form submission.
■​ Validates that fields are not empty.
■​ Displays an alert for successful login.
■​ Saves the username if "Remember Me" is checked.​

3.​ Password Visibility Toggle Event​


​
Code - togglePasswordBtn.addEventListener("click",
togglePasswordVisibility);
○​ Allows the user to show or hide their password by clicking a button.
○​ The function togglePasswordVisibility():
■​ Changes the input type between "password" and "text".
■​ Updates the button text from "Show" to "Hide".

3. Test-Driven Development (TDD) Implementation


Test-Driven Development (TDD) follows a Red-Green-Refactor cycle:

1.​ Red Phase → Write failing test cases first.


2.​ Green Phase → Implement code to pass the tests.
3.​ Refactor Phase → Optimize and improve code without changing functionality.

TDD Implementation in the Code

1 Red Phase - Writing Tests First​


Code - function runTests() {
console.log("Running Tests...");

●​ We define expected behaviors before writing the logic.


●​ The runTests() function simulates test cases inside the browser console.
●​ Initially, all tests fail because the actual logic is not implemented yet.
2 Green Phase - Implementing the Code

●​ We write functions like handleSignIn() and togglePasswordVisibility() to


pass the test cases.

Code -

if (username === "" || password === "") {

console.log("Test 1 - Empty Fields Alert: ❌ Failed");


alert("Both fields are required!");
return false;
}

alert(`Welcome, ${username}! You are logged in.`);


console.log("Test 2 - Successful Login Alert: ✅ Passed");
if (rememberMeCheckbox.checked) {
localStorage.setItem("rememberedUsername", username);
console.log("Test 3 - Remember Me: ✅ Passed");
}

●​ Now, when we run tests, all cases should pass.

3 Refactor Phase - Optimizing the Code

●​ Improve the modularity and readability.


●​ Ensure event handling is efficient and does not cause memory leaks.

4. Test Results in the Console


After refreshing the webpage and checking the Console, the output:​

Code -

Running Tests...

Test 1 - Empty Fields Alert: ❌ Failed


Test 2 - Successful Login Alert: ✅ Passed
Test 3 - Remember Me: ✅ Passed
Test 4 - Password Toggle: ✅ Passed

If any test fails (❌), debugging is required.

5. Conclusion
The Nyaya Mitra Login System successfully implements:

1.​ Event Handling: Detecting and responding to user interactions.


2.​ Test-Driven Development (TDD): Writing tests first, implementing logic, and optimizing.
3.​ Basic Testing: Using browser console logs (Console) to verify correctness.

The System follows software engineering best practices and provides a solid foundation for
future improvements such as backend integration or automated testing with Jest.

Screenshots (PTO)
Output Screenshots without CSS​

​
​
​

​
​

You might also like