MICRO-PROJECT

Develop a login web page using Day-Night Toggle Effect

Submitted- 2023-24
This micro-project work submitted in partial fulfillment of requirements for the award of
diploma in Computer Technology for subject "CSS (Cascading Style Sheets)”.

Computer Engineering

Maharashtra State Board of Technical Education, Mumbai

UNDER THE GUIDANCE OF

Prof. Miss.S.K Kharkate

Lect. In Computer Technology SUBMITTED BY

Sr no
. Roll no. Name of Student Enrollment no.

1. 54 Harshal.R.Ukey 2101210133

Project Guide Head of department Principle

Miss.S.K Kharkate Prof. S. K. Kharkate Dr.S.R. Kukadapwar

 DEPARTMENT OF COMPUTER ENGINEERING

GOVERNMENT POLYTECHNIC, BRAMHAPURI DIST CHANDRAPUR

DEPARTMENT OF COMPUTER ENGINEERING

Certificate

This is to certify that the following student of this institute have carried out this
microproject in work “Develop a login web page using Day-Night Toggle Effect. “Under
the guidance of Miss.S.K Kharkate Lect. in the Department of Computer Engineering
during the session 2023-2024 This work has been in the partial fulfillment of the award for
Diploma in Computer Engineering from Maharashtra State Board of Technical Education,
Mumbai.

SUBMITTED BY
Sr no.
Roll Name of Student Enrollment no.
no.
1. 8 Harshal.R.Ukey 2101210133

Project Guide Head of department Principle

Miss.S.K Kharkate Prof. S. K. Kharkate Dr.S.R. Kukadapwar

 Part-A

1.0 .Aim of micro project:-

Develop a login web page using Day-Night Toggle Effect.

2.0 . Brief introduction:

Create a login web page with a Day-Night Toggle Effect, allowing users to switch
between light and dark themes. This feature enhances user experience by providing
visual customization options, making the page adaptable to different lighting
conditions and user preferences, improving overall accessibility and aesthetics.

3.0 .course outcome:

o By the end of this course, you will be able to create a login web page with a
day-night toggle effect. This project will demonstrate your proficiency in
HTML, CSS, and JavaScript to build an interactive and visually appealing
login page that accommodates both light and dark mode preferences.

4.0 .Literature review:

Before diving into the development process, it's essential to understand the key
concepts and elements related to a day-night toggle effect in web design:

• Day Mode and Night Mode: These are two distinct color schemes or themes for
a website. Day mode typically features lighter colors, while night mode uses
darker colors. Users can switch between these modes to suit their preferences
and lighting conditions.

• Toggle Button: A toggle button is a user interface element that allows users to
switch between different states or modes. In this case, it would enable the user
to switch between day and night modes.
 • CSS and JavaScript: Cascading Style Sheets (CSS) are used to define the visual
styles of the web page, while JavaScript is used to add interactivity and
functionality to the toggle effect.
5.0 Proposed methodology:

The working methodology is as follows:-

▪ Search for topic suitable

▪ Select topic which address our course outcomes.
▪ Selected topic discussed with project guide Prof.Miss.S.K Kharkate
▪ Collect information, resources and references which is required throughout
project.
▪ Started working over the micro project with same preparing report.
▪ After all finishing work report submitted to respective project guide.

• Algorithm:
• Start
• Create the HTML Structure (index.html):

• Design with CSS (styles.css):

• Implement Day-Night Toggle (script.js):

• Handle Form Submission (script.js):
• Complete HTML File (index.html):
• End
6.0 Action plan:

Sr Detail of Activity Start Finish Name of student

. Date Date
no
.
1 Search for topic Harshal

Information search and Harshal

2 resource collected

3 Implement part-A Harshal

4 Work over project Harshal

5 Implement part-B Harshal

6 Submission of final Harshal

report

7.0 Resource required:

Sr. Name of
no. resource/materia specification Quantity Purpose
l
1. Internet Gives information As per To get
requirement information- on
and pictures.
2. Laptop ASUS-TUF 1 To make micro
project.
3. Book 1

4. Software Google Crome 1 Execuate of code

 Part:-B
“Develop a login web page using Day-Night Toggle Effect”
1.0 Rationale:-
A login webpage with a Day-Night toggle effect allows users to switch between light
and dark themes for improved user experience. This feature enhances accessibility,
reduces eye strain, and caters to user preferences. It creates a visually appealing and
versatile login interface suitable for different lighting conditions.

2.0 Aim of Micro-project:

Develop a login web page using Day-Night Toggle Effect

3.0 Course outcomes Achieved:

HTML Markup: You will apply your knowledge of HTML to structure the login page.
This includes defining form elements like input fields and buttons.

CSS Styling: You will use CSS to style the page, including defining the look and feel of
the day and night themes. This demonstrates your ability to create visually appealing user
interfaces.

JavaScript Interactivity: Implementing the day-night toggle effect requires JavaScript.

You will write JavaScript code to switch between light and dark themes, demonstrating
your ability to add interactivity to web pages.

Responsive Design: Ensure that your login page is responsive, adapting to different
screen sizes and orientations, showcasing your understanding of responsive design
principles.
4.0 Actual Methodology followed:
● Search for topic suitable to Microprocessor microproject.
● Select topic which address over course outcome.
Selected topic discussed with project guide Prof. Miss.S.K Kharkate

● Collect information, resources and references which is required throughout project.

5.0 Resources used:

Name of Specification
Resource/Material
Laptop SSD 512GB, RAM 8 GB ,RAYZEN 4800
Processor
Software Ms-Word ,Chrome Browser , Jdk-7,Notepad
,Etc.
Other Accessories Reference Book

6.0 Skill Developed:

1. HTML Structure:

- Create an HTML file with the necessary structure for the login page.

- Include elements for the login form, username and password inputs, and the
toggle switch for day and night modes.

2. CSS Styling:

- Define CSS styles for the login form, background, and other page elements.

- Create separate CSS classes for the light and dark themes.

- Initially, set the default theme (e.g., light) as the active theme.
3. JavaScript for Toggle:

- Write JavaScript code to handle the day-night toggle functionality.

- Create functions to switch between light and dark themes when the toggle switch
is clicked.

- Use CSS classes to apply the appropriate styles for each theme.

4. Event Listeners:

- Add event listeners to the toggle switch element to trigger the theme change
function.

- Ensure that the page updates in real-time when the user toggles between themes.

5.Responsive Design:

- Implement responsive design principles to ensure the page looks good on various
screen sizes and devices.

- Use media queries to adjust styles based on screen width.

6. Accessibility:

- Ensure that the login page is accessible to users with disabilities by following
accessibility best practices.

- Provide alternative text for images and use semantic HTML elements.

7. Testing:

- Thoroughly test the login page on different browsers to ensure cross-browser

compatibility.

- Test the day-night toggle functionality on various devices and screen sizes.
8. Error Handling:

- Implement error handling for the login form, including validation for empty
fields and incorrect login credentials.

- Display user-friendly error messages when necessary.

9. Security:

- Implement security measures for handling user credentials, such as using HTTPS and
proper authentication methods.

10. Documentation:

- Create documentation that explains how to use the day-night toggle feature for future
reference and maintenance.

11. Deployment:

- Host the login web page on a web server or a hosting platform of your choice.

12. User Feedback:

- Gather user feedback to continuously improve the user experience and address any
issues or suggestions.
7.0. Reference:-
1. Internet is a best option for information's.
2. We take all information Chat gpt(Open AI Playground)
3. Books:- CSS (Cascading Style Sheets)

8.0.Project Information:- Creating a login web page with a day-night toggle feature
involves HTML, CSS, and possibly some JavaScript. Here's a step-by-step guide with
project information and definitions:

Project Information:

- Project Title:Day-Night Toggle Login Page

- Project Description: This project involves creating a login web page that offers a
daynight toggle feature, allowing users to switch between light and dark themes.

Project Definitions:

1. HTML (Hypertext Markup Language):

- HTML is the standard markup language used to create web pages.

- It provides the structure and content of a web page, including elements like
headings, paragraphs, forms, and links.

2. CSS (Cascading Style Sheets):

- CSS is used to define the style and layout of HTML elements on a web page.

- It allows you to control the visual aspects, such as colors, fonts, margins, and
positioning.
3. JavaScript:

- JavaScript is a scripting language that enables dynamic behavior and interactivity

on web pages.

- It can be used to implement the day-night toggle functionality.

4. Login Page:

- A login page is a web page where users can provide their credentials (username
and password) to access a restricted area or perform certain actions on a website.

5. Day-Night Toggle:

- A day-night toggle is a user interface element that allows users to switch between
light and dark color themes on a web page.

- It typically involves changing the background color, text color, and other style
properties to create a visually distinct theme.
Steps to Develop the Login Web Page with Day-Night Toggle:

1. Create the HTML Structure:

- Design the structure of your login page using HTML elements. Include form
fields for username and password.

2. Add CSS Styling:

- Apply CSS styles to create the initial visual design of the login page in the light
theme.

3. Implement Day-Night Toggle Button:

- Create a toggle button that users can click to switch between day and night
themes.

- Use CSS to define styles for both themes (light and dark).

4. Add JavaScript Functionality:

- Use JavaScript to handle the toggle button's click event.

- When the button is clicked, toggle between the light and dark theme by adding or
removing CSS classes.

5. Define Light and Dark Theme Styles:

- Define CSS styles for both the light and dark themes, specifying properties such
as background color, text color, and font styles.

6. Apply Theme Based on User Selection:

- Use JavaScript to store the user's theme preference (day or night) in a cookie or
local storage.

- Apply the selected theme when the user visits the login page in the future.
7. Validate User Input (Optional):

- Implement JavaScript-based form validation to ensure that users provide valid

credentials.

8. Connect to a Backend (Optional):

- If necessary, connect the login form to a backend server for authentication.

9. Test and Debug:

- Thoroughly test the login page in both light and dark themes to ensure
functionality and appearance.

10. Deploy the Web Page:

- Host the login page on a web server or a web hosting platform to make it
accessible to users.
CODE:-

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Login Page</title>

<style>

body {

font-family: Arial, sans-serif;

background-color: #f2f2f2; /* Default background color for the day mode */

transition: background-color 0.5s;

.container { max-

width: 400px; margin: 0

auto; padding: 20px;

background-color: #ffffff;

box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);

border-radius: 5px;

h2 {

text-align: center;
 } label {

display: block;

margin-bottom: 10px;

input[type="text"], input[type="password"] {

width: 100%; padding: 10px;

margin-bottom: 20px; border: 1px solid

#ccc; border-radius: 3px;

.toggle-label { display:

flex; justify-content: space-

between;

.toggle-label span { font-

weight: bold;

.toggle-switch {

display: inline-block;

width: 50px; height:

25px; background-

color: #ccc; border-

radius: 25px;
position: relative;

cursor: pointer;

.toggle-slider {

width: 25px; height:

25px; background-color:

#ffffff; border-radius:

50%; position: absolute;

top: 0; left: 0;

transition: transform 0.2s ease-in-out;

/* Night mode styles */ .night-

mode {

background-color: #333; /* Background color for the night mode */

color: #fff; /* Text color for the night mode */

</style>

</head>

<body>

<div class="container">

<h2>Login</h2>

<form id="login-form">

<label for="username">Username</label>
 <input type="text" id="username" name="username" required>

<label for="password">Password</label>

<input type="password" id="password" name="password" required>

<div class="toggle-label">

<span>Day Mode</span>

<label class="toggle-switch">

<input type="checkbox" id="toggle-mode">

<span class="toggle-slider"></span>

</label>

<span>Night Mode</span>

</div>

<button type="submit">Login</button>

</form>

</div>

<script>

const toggleMode = document.getElementById('toggle-mode');

const body = document.body;

toggleMode.addEventListener('change', function() { if

(this.checked) {

body.classList.add('night-mode');

} else {

body.classList.remove('night-mode');
 }

});

</script>

</body>

</html>
OUTPUT:-
9.0. Conclusion:-

Project Conclusion Definition with Key Points:

A project conclusion in the context of developing a login web page with a day-night
toggle should include the following key points:

1. Project Overview: Briefly summarize the project, highlighting its purpose and key
features, such as the login form and the day-night toggle.

2. Development Process: Describe the steps taken to create the web page, including
setting up the environment, designing the HTML structure, applying CSS styles, and
implementing JavaScript functionality.

3. Challenges and Solutions: Discuss any challenges encountered during development

and the solutions or workarounds applied to overcome them.

4. Testing: Explain the testing process, including how the web page was tested on
different devices and browsers to ensure compatibility and responsiveness.

5. User Experience: Discuss the user experience considerations, such as the choice of
colors for day and night modes, and how the toggle switch enhances user interaction.

6. Performance: Mention any performance optimizations made, such as minimizing

JavaScript or CSS file sizes, to ensure fast page loading.

7. Future Improvements: Provide ideas for future improvements or additional features

that could enhance the login page, such as user authentication and validation.

8. Conclusion: Summarize the overall success of the project, whether it met its
objectives, and any key takeaways from the development process.

9. Acknowledgments: Mention any individuals or resources that were instrumental in

the project's success.

10. References: Include any references to external libraries or resources used during
development.

11. Source Code: If applicable, provide a link or attachment to the source code for the
web page.