A MICRO PROJECT REPORT

ON

“Create a WebPage Using all events”

SUBMITTED IN PARTIAL FULFILLMENT OF THE REQUIREMENTS FOR
THE AWARD OF
DIPLOMA IN
ARTIFICIAL INTELLIGENCE AND MACHINE LEARNING

SUBMITTED TO
MAHARASTRA STATE BOARD OF TECHNICAL EDUCATION
SUBMITTED BY
Sr.no. Name of student Enrollment
. No.
1 PRATHAMESH SAGVEKAR 2216290091

2 SHUBHAM KHADE 2216290087

3 SANJAY PAITHANE 2216290107

4 KUNDAN JADHAV 2216290105

UNDER THE GUIDANCE OF

MR.NRIPESH VATSA
 MAHARASTRA STATE BOARD OF TECHNICAL EDUCATION

CERTIFICATE

This is to certify that Mr. Prathamesh sagvekar, sanjay paithane, shubham khade, kundan
jadhav

Roll No01,03,09,22 of Third Semester Diploma in Alamuri Ratnamala Institute of Engineering

and Technology,has completed the Micro Project in subject ……………(………) in the
academic year 2023-24 as per the MSBTE prescribed curriculum of ‘I’ Scheme

Place:………………. Enrollment No: ………………………………

Date:………………... Exam Seat No:……………………………….

Subject Teacher Head of the Department Principal

 ACKNOWLEDGEMENT
A micro project is something that could not have been materialized without cooperation of
many people. This project shall be incomplete if do not convey my heartfelt gratitude to
those people from whom I have got considerable support and encouragement.

It is a matter of great pleasure for us to have respected Prof. NRIPESH VATSA as

my project guide. We are thankful to her for being constant source of inspiration.

We would also like to give our sincere thanks to Prof. Heena Patil Head of
Department, for their kind support.
 CONTENTS
CH.
TOPICNAME PAGENO.
NO

ABSTRACT
1 INTRODUCTION
2 LITERATURE SURVEY

3 HARDWARE AND SOFTWARE REQUIREMENT

4 SYSTEM ARCHITECTURE

5 IMPLIEMENTATION

6 ADVANTAGES AND DISADVANTAGES

7 CONCLUSION

REFERENCES
 ABSTRACT
This project focuses on the implementation of a dynamic webpage utilizing various
JavaScript events to enhance user interactivity. JavaScript events are essential for
creating responsive web applications, as they allow the webpage to react to user
actions like clicks, keystrokes, and form submissions. This project demonstrates the
use of different event types, including mouse, keyboard, form, window, and
clipboard events, showcasing how they can be effectively handled using JavaScript.
Through a combination of HTML for structure, CSS for styling, and JavaScript for
interactivity, the project offers a practical example of building a user-friendly
interface that responds seamlessly to diverse user inputs. This implementation aids
in understanding the fundamental concepts of event handling in JavaScript, paving
the way for more advanced web development techniques.
 1.INTRODUCTION
This project aims to demonstrate how various JavaScript events can be utilized to
build a responsive webpage. It covers a range of event types, including mouse events
(like clicks and hover), keyboard events (such as key presses), form events (like
submissions and changes), and window events (such as resizing and scrolling). By
implementing event listeners and handlers, this project illustrates how to trigger
specific actions based on user inputs, thus making the webpage more interactive and
functional. This project serves as a foundation for understanding the basics of event-
driven programming in JavaScript and provides a practical demonstration of how
these events can be integrated into real-world web applications.
 2.LITERATURE SURVEY
Event-driven programming is a core concept in JavaScript, where the program’s
behavior is determined by events triggered by user actions or system occurrences.
This approach allows developers to create highly interactive and responsive web
applications by reacting to various inputs like mouse clicks, keystrokes, form
submissions, and more. As Flanagan (2020) describes, JavaScript’s event-driven
architecture makes it well-suited for building dynamic webpages that can respond
immediately to user interactions, enhancing the overall user experience. Duckett
(2014) further emphasizes how effective event handling enables real-time feedback
mechanisms, such as form validation, dynamic content updates, and interactive
animations, all of which contribute to a seamless and engaging browsing experience.
Overall, mastering event handling in JavaScript is fundamental to developing
modern, user-friendly web applications that respond intuitively to user behavior.
 3.HARDWAREAND SOFTWARE REQUIREMENTS

HARDWARE :-

Computer System: A standard desktop or laptop computer with the following

specifications:

 Processor: Dual-core processor (Intel i3 or equivalent) or higher

 RAM: Minimum 4GB (8GB recommended for smoother performance)
 Storage: At least 100MB of free disk space
 Display: Screen resolution of 1024x768 or higher

Internet Connection: Required for downloading software, libraries, and

accessing online resources.

SOFTWARE :-

 Operating System:
o Windows 7 or higher / macOS / Linux
 Web Browser:
o Any modern web browser (Google Chrome, Mozilla Firefox, Microsoft
Edge, Safari)
o Developer tools enabled for debugging and inspecting events
 Code Editor:
o Visual Studio Code (preferred) or other code editors like Sublime Text,
Atom, or Notepad++
 Web Server (Optional):
o Local web server software (e.g., XAMPP, WAMP, or Node.js) for
testing in a controlled environment, although not mandatory for basic
HTML and JavaScript projects.
 Libraries and Frameworks:
o JavaScript (ES6 or later)
o No external libraries are strictly necessary, but frameworks like jQuery
can simplify event handling if desired.
 4.IMPLEMENTATION

HTML CODE :

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Events </title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>JavaScript Events Example </h1>

<!-- Mouse Events -->

<button id="clickBtn">Click Me</button>
<button id="dblClickBtn">Double Click Me</button>
<div id="hoverDiv">Hover Over Me</div>

<!-- Keyboard Events -->

<input type="text" id="keyInput" placeholder="Type something...">

<!-- Form Events -->

<form id="eventForm">
<input type="text" placeholder="Enter your name" id="nameInput" required>
<input type="email" placeholder="Enter your email" id="emailInput" required>
<button type="submit">Submit</button>
</form>

<!-- Clipboard Events -->

<textarea id="clipboardText" placeholder="Copy or cut this text"></textarea>

<!-- Window Events -->

<p>Resize the window or scroll down to see window events in action.</p>

<!-- Output for event messages -->

<div id="output"></div>
 <script src="script.js"></script>
</body>
</html>

CSS CODE :

body {
font-family: Arial, sans-serif;
padding: 20px;
}

button, input, textarea {

margin: 10px;
padding: 8px;
}

#hoverDiv {
width: 150px;
height: 50px;
background-color: lightblue;
text-align: center;
line-height: 50px;
margin-top: 20px;
cursor: pointer;
}

#output {
margin-top: 30px;
font-weight: bold;
}

JAVASCRIPT CODE :

// Mouse Events
document.getElementById("clickBtn").addEventListener("click", function() {
displayMessage("Button clicked!");
});
document.getElementById("dblClickBtn").addEventListener("dblclick", function()
{
displayMessage("Button double-clicked!");
});

document.getElementById("hoverDiv").addEventListener("mouseover", function()
{
displayMessage("Mouse hovered over the div!");
});

document.getElementById("hoverDiv").addEventListener("mouseout", function()
{
displayMessage("Mouse moved out of the div!");
});

// Keyboard Events
document.getElementById("keyInput").addEventListener("keydown",
function(event) {
displayMessage("Key pressed: " + event.key);
});

document.getElementById("keyInput").addEventListener("keyup", function(event)
{
displayMessage("Key released: " + event.key);
});

// Form Events
document.getElementById("nameInput").addEventListener("focus", function() {
displayMessage("Name input focused.");
});

document.getElementById("nameInput").addEventListener("blur", function() {
displayMessage("Name input blurred.");
});

document.getElementById("eventForm").addEventListener("submit",
function(event) {
 event.preventDefault();
displayMessage("Form submitted!");
});

// Clipboard Events
document.getElementById("clipboardText").addEventListener("copy", function() {
displayMessage("Text copied!");
});

document.getElementById("clipboardText").addEventListener("cut", function() {
displayMessage("Text cut!");
});

document.getElementById("clipboardText").addEventListener("paste", function()
{
displayMessage("Text pasted!");
});

// Window Events
window.addEventListener("resize", function() {
displayMessage("Window resized to " + window.innerWidth + "x" +
window.innerHeight);
});

window.addEventListener("scroll", function() {
displayMessage("Page scrolled. Scroll position: " + window.scrollY);
});

// Helper Function to Display Event Messages

function displayMessage(message) {
const outputDiv = document.getElementById("output");
outputDiv.textContent = message;
setTimeout(() => {
outputDiv.textContent = "";
}, 3000); // Clear message after 3 seconds
}
OUTPUT :
 5.ADVANTAGES AND DISADVANTAGES

ADVANTAGES:-
Enhanced Interactivity:

 By implementing various JavaScript events, the webpage becomes more

interactive and responsive, improving the user experience. Actions like
clicks, form submissions, and keyboard inputs can trigger dynamic
behaviors, making the interface engaging.

Real-Time Feedback:

 The project demonstrates how to provide instant feedback to users, such as

form validation, input field focus changes, and other real-time interactions.
This can help users correct mistakes immediately and navigate the webpage
more effectively.

DISADVANTAGES:-
Increased Complexity:

 Handling multiple events on a webpage can make the code more complex,
especially if events are not managed properly. Without a structured approach,
the code can become difficult to maintain and debug, leading to a "callback
hell."

Performance Issues:

 Excessive or poorly optimized event listeners can lead to performance

problems, particularly on pages with many interactive elements. This can
slow down the webpage, resulting in a laggy user experience, especially on
devices with limited processing power.
 6. CONCLUSION
The project successfully demonstrates how various JavaScript events can be used to
create an interactive and responsive webpage. By implementing a wide range of
event types, such as mouse, keyboard, form, clipboard, and window events, the
project illustrates the fundamental concepts of event-driven programming in
JavaScript. This approach enhances the user experience by enabling real-time
feedback and dynamic interactions, which are crucial for modern web applications.

While the project highlights the advantages of using events for interactivity, it also
emphasizes the need to manage these events carefully to avoid performance and
accessibility issues. Developers must consider best practices, such as optimizing
event listeners, ensuring browser compatibility, and maintaining security, to create
a robust and user-friendly interface. Overall, this project serves as a practical
introduction to JavaScript event handling, offering a solid foundation for further
exploration and application in more complex web development scenarios.
 REFERENCES
[1]. Flanagan, D. (2020). JavaScript: The Definitive Guide. O'Reilly Media.

[2]. Duckett, J. (2014). JavaScript and jQuery: Interactive Front-End Web

Development. Wiley.

[3]. Gajendran, S. (2019). Understanding JavaScript Event Delegation. Retrieved

from CSS-Tricks

[4]. Holovaty, A., & Kaplan-Moss, J. (2009). The Definitive Guide to Django: Web
Development Done Right. Apress.