` ICE CREAM LANDING PAGE

A Summer Internship Report submitted in partial fulfillment of the requirements

for the award of degree of

BACHELOR OF TECHNOLOGY
In
COMPUTER SCIENCE and ENGINEERING(IoT)

Submitted by:
TADI SANDHYA RANI
22MH1A4955

Department Of CSE(Internet Of Things)

ADITYA COLLEGE OF ENGINEERING AND TECHNOLOGY(A)

Approved by AICTE, Permanently affiliated to JNTUK & Accredited by NAAC with ‘A’ Grade

Recognized by UGC under the sections 2(f) and 12(B) of the UGC act 1956 Aditya
Nagar, ADB Road –Surampalem 533437, E.G. Dist., A.P.,

2024-2025.

1
 ADITYA COLLEGE OF ENGINEERING AND TECHNOLOGY (A++)
Approved by AICTE, Permanently Affiliated to JNTUK & Accredited by NAAC with ‘A’ Grade
Recognized by UGC under the sections 2(f) and 12(B) of the UGC act 1956
Aditya Nagar, ADB Road - Surampalem – 533437, E.G.Dist., A.P.,

Department Of CSE(Internet Of Things)

CERTIFICATE

This is to certify that the Internship report entitled “ICE CREAM LANDING PAGE” is
being submitted by
TADI SANDHYA RANI(22MH1A4955)
In partial fulfillment of the requirements for award of the B.Tech degree in CSE(Internet Of Things) for
the academic year 2024-2025.

Internship Coordinator Head of the Department

S.Divya Jabili Devi,Mtech (Ph.D), Dr. B. Kiran kumar , Ph.D.,
Assistant professor Professor
Department of CSE(IoT) Department of CSE(IoT)

2
 DECLARATION

We hereby declare that the project entitled “ICE CREAM LANDING PAGE” is a genuine
project. This work has been submitted to the ADITYA COLLEGE OF ENGINEERING
AND TECHNOLOGY , Surampalem, permanently affiliated to JAWAHARLALNEHRU
TECHNOLOGICAL UNIVERSITY, KAKINADA in partial fulfillment of the B.Tech
degree. We further declare that this project work has not been submitted in full or part of the
award of any degree of this or any other educational institutions.

by
TADI SANDHYA RANI(22MH1A4955)

3
4
5
6
 ACKNOWLEDGEMENT

I offer my sincere thanks to dynamic and beloved Principal, Dr. A. Ramesh,

Aditya College of Engineering & Technology(A) for his co-operation. My
sincere thanks to Dr. B. Kiran Kumar, M.Tech., Ph.D, Head of the department
of CSE-Internet of things for his valuable support. I express my sincere
gratitude to my internship guide, Mrs. S.Divya jabili devi, Assistant Professor,
Department of CSE-Internet of things, for his/her valuable guidance and
encouragement which has been helpful in successful completion of this
internship. With immense pleasure I would like to express my deep sense and
heart full thanks to the management of Aditya College of Engineering &
Technology (A).

7
 Abstract
The Advanced ice cream shop landing page Web Application is a feature-rich,
responsive web tool designed to provide users a best online flatform that serves
to the required customers.
Developed using HTML, CSS, and JavaScript, this project aims to combine a
wide array of editing functionalities with a visually appealing and user-friendly
interface.

Creating an effective landing page for your ice cream cream shop can have a
significant impact on your business's success. By following the tips and
techniques outlined in this guide, you can design a landing page that captures
the attention of visitors, communicates the unique value of your business,
and encourages them to take the desired action.
Remember to focus on the key elements of an effective landing page, such as
a compelling headline, mouth-watering images, social proof, and a clear call
to-action button. Use HTML, CSS, and JavaScript to create a visually
appealing and interactive page that optimizes the user experience. And don't
forget to test your landing page to make sure it's functioning properly and
delivering the results you want.
We hope you found this guide helpful and informative. If you have any
questions or would like more information on creating landing pages for your
business, feel free to reach out to us. Good luck with your landing page
design!

8
9
Learning Objectives/Internship Objectives

 Internships are generally thought of to be reserved for college students

looking to gain experience in a particular field. However, a wide array
of people can benefit from Training Internships in order to receive real
world experience and develop their skills.
 An objective for this position should emphasize the skills you already
possess in the area and your interest in learning more

 Internships are utilized in a number of different career fields, including

architecture, engineering, healthcare, economics, advertising and many

more.
 Some internships are used to allow individuals to perform scientific
research while others are specifically designed to allow people to gain
first-hand experience working.
 Utilizing internships is a great way to build your resume and develop
skills that can be emphasized in your resume for future jobs. When you
are applying for a Training Internship, make sure to highlight any
special skills or talents that can make you stand apart from the rest of
the applicants so that you have an improved chance of landing the
position.

10
WEEKLY OVERVIEW OF INTERNSHIP ACTIVITIES

DATE DAY NAME OF THE TOPIC/MODULE COMPLETED

Reporting at Technical hub with all
1/6/24 Saturday
Photocopies of Documents.
Overview to Thub Profile & Total Internship Schedule

3/6/24 Monday Brief Introduction on Web development

4/6/24 Tuesday Setting up development environment

5/6/24 Wednesday Overview of HTML, CSS and Javascript

6/6/24 Thursday HTML & CSS Fundementals

7/6/24 Friday Introduction to CSS

DATE DAY NAME OF THE TOPIC/MODULE COMPLETED

8/6/24 Saturday Introduction to Javascript

10/6/24 Monday Operators and Control structures

11/6/24 Tuesday Understanding the Document Object Model

12/6/24 Wednesday Selecting and identifying DOM elements

13/6/24 Thursday Handling events

14/6/24 Friday Creating simple interactive features

11
DATE DAY NAME OF THE TOPIC/MODULE COMPLETED

15/6/24 Saturday Arrays and Objects

17/6/24 Monday ES6 features

18/6/24 Tuesday Introduction to project scope and requirements

19/6/24 Wednesday Planning the project

20/6/24 Thursday Starting development

21/6/24 Friday Implementing key features and functionality

DATE DAY NAME OF THE TOPIC/MODULE COMPLETED

22/6/24 Saturday Continued development and testing

24/6/24 Monday Cross-browser compatibility testing

25/6/24 Tuesday Debugging and fixing issues

26/6/24 Wednesday Adding finishing touches

27/6/24 Thursday Preparing the project presentation

28/6/24 Friday
Final development and presentation
29/6/24 Saturday Submission of project abstract & presentation
12
 INDEX

SNo. Contents Page no.

1. Introduction 10
2. Features 11
3. Technologies used 12
3.1 HTML
3.2 CSS
3.3 Javascript

4. HTML Structure 13
4.1 Basic layout 14
4.2 Input elements for file upload and filters 15
4.3 Buttons for resetting and saving the edited
image

5. CSS Styling 16
5.1 Image display styling 17
5.2 Responsive design techniques
5.3 Button styling

6. Javascript functionality
6.1 Image upload and preview handling 18
6.2 Filter application and logic 19
6.3 Reset functionality 20
6.4 Save image functionality 21

7. User interface 22
8. Future Enhancements 23
9. Conclusion 24
9.1 Summary of the project
9.2 Learning outcomes
10. References 25

13
 1.Introduction
This is an simple editing of an advertisement regarding the ice cream landing. how to create an effective
landing page for an ice cream shop using HTML, CSS, and JavaScript. A landing page is a standalone web
page designed to convert visitors into customers by encouraging them to take a specific action, such as
placing an order or signing up for a newsletter. A well-designed landing page can increase conversions and
help businesses achieve their marketing goals.

Here's a brief overview of each part of the code:

HTML (index.html):

The HTML code defines the structure of the ice cream shop landing web page:

• Container: A div container that holds the entire content.

• File Input: An input element for uploading images.
• Image Container: A div that displays the selected image.
• Control Panel: A section with various input sliders for adjusting image properties.
• Buttons: Buttons to reset filters and save the edited image.

CSS (style.css):

The CSS code styles the ice cream shop landing web page:

• Container Styling: Centers the container and applies padding, background color, shadow, and
border-radius.
• Responsive Design: Ensures the layout is responsive and looks good on different screen sizes.
• Button Styling: Styles the buttons with colors, padding, border-radius, and hover effects.

JavaScript (script.js):

The JavaScript code handles the functionality of the ice cream shop landing web page:

• Event Listeners: Sets up event listeners for file input, filter adjustments, reset button, and save
button.
• Image Upload: Loads the selected image and resets filters.
• Filter Application: Applies the selected filters to the image in real-time.
• Reset Filters: Resets all filter values to their defaults.
• Save Image: Saves the edited image with the applied filters.

14
 2.Features
The code is a well-structured ice cream shop landing page application using HTML, CSS, and JavaScript.
It allows users to upload an image, apply various filters to the image, reset the filters, and save the edited
image. Here are the key features and explanations about the code:

1. High-Quality Imagery: Use high-resolution images of delicious ice cream flavors, sundaes, cones, and
other products to entice visitors and create a mouth-watering visual experience.

2. Clear Call-to-Action (CTA): Include a prominent CTA button that encourages visitors to order online,
view the menu, or find the nearest physical location. The CTA should stand out and be easily accessible.

3. Menu Display: Showcase the variety of ice cream flavors, toppings, and specialty items offered by the
shop. Use visually appealing graphics and descriptions to entice visitors.

4. Store Locator: If the ice cream shop has physical locations, include a store locator feature with a map
and address details to help customers find the nearest store.

5. Online Ordering Integration: If the shop offers online ordering or delivery services, provide an intuitive
interface for customers to browse the menu, select items, and place orders directly from the landing page.

6. Social Media Integration: Incorporate social media feeds or links to the shop's Instagram, Facebook, or
other social profiles to showcase user-generated content, promotions, and customer engagement.

7. Customer Testimonials: Display positive customer reviews and testimonials to build trust and credibility.
Real-life experiences can help convince potential customers to try the products.

8. Responsive Design: Ensure that the landing page is optimized for mobile devices to provide a seamless
experience for users browsing on smartphones and tablets.

9. Branding Elements: Use consistent branding elements such as logo, color scheme, and typography to
reinforce the shop's identity and create a cohesive visual experience.

10. Special Offers and Promotions: Highlight any ongoing promotions, seasonal flavors, or special events
to entice visitors and encourage them to make a purchase.

11. Contact Information: Provide clear contact details, including phone number, email address, and
possibly a contact form for inquiries or feedback.

By incorporating these features, an ice cream shop landing page can effectively capture the attention of
potential customers, drive engagement, and ultimately lead to increased sales and customer satisfaction.

15
 3.Technologies used

3.1 HTML (Hypertext Markup Language)

HTML is the standard markup language for creating web pages. In this project:

• The structure of the webpage is defined using various HTML elements such as div, h1, input,
label, button, and img.

• The input element with type file allows users to upload images.
• Various input elements with type range are used to create sliders for adjusting image properties
like brightness, contrast, grayscale, blur, sepia, hue rotation, saturation, and invert.
• The button elements are used for resetting the filters and saving the edited image

3.2 CSS (Cascading Style Sheets)

CSS is used to style and layout web pages. In this project:

• The style.css file defines the look and feel of the Photo Editor, including the background
gradient, container styling, image styling, control styling, and button styling.
• Media queries ensure the application is responsive and looks good on both desktop and mobile
devices.

3.3 JavaScript

JavaScript is a programming language that enables interactive web pages. In this project:

• The script.js file handles the functionality of the Photo Editor, including image upload, filter
application, filter reset, and saving the edited image.
• Event listeners are attached to various input elements to apply filters in real-time as the user adjusts
the sliders.
• The FileReader API is used to read the uploaded image and display it in the img element.
• Canvas API is used to save the edited image with applied filters.

16
 4.HTML Structure

4.1 Basic layout

1. Bootstrap Introduction: Bootstrap is a robust front-end framework used for building
responsive and mobile-friendly websites. It offers a comprehensive suite of pre-designed
HTML, CSS, and JavaScript components that expedite web development and ensure consistent
design across various devices and screen sizes. In this code snippet, Bootstrap is seamlessly
integrated to leverage its styling classes and grid system for structuring the layout and enhancing
the visual aesthetics of the Facebook clone.
2. Topbar Section: The topbar segment encompasses elements like the Facebook logo, search bar,
and user navigation links. Bootstrap classes such as input-group, form-control, and inputgroup-
addon are applied to style and align the search bar seamlessly within the layout.
3. Left Content Area: This section presents global links, shortcuts, explore options, and create
links for user engagement. Leveraging Bootstrap’s responsive grid system (col-md-4, col-md-8),
the content is arranged in a visually appealing and organized manner across different viewport
sizes.
4. Feed Content: Here, recent posts and user activities are displayed. Bootstrap’s navigation tabs
are utilized to categorize and structure post headers and footers, offering users a familiar and
intuitive browsing experience.
5. Third Column Content: The third column showcases user-related pages, event invitations,
trending topics, and sponsored content. By employing Bootstrap’s styling components, the
content is presented uniformly and responsively, ensuring optimal display regardless of the
device or screen resolution
6. Right Content Area: This segment showcases users who have interacted with the current user’s
posts, along with links to user profiles and contacts. Bootstrap styling ensures that the content is
visually appealing and well-organized, contributing to an enhanced user experience .

These input elements, combined with JavaScript, allow users to manipulate the visual appearance of their
images directly within the web browser, providing an interactive and user-friendly photo editing
experience.

17
4.2 SCRIPT LAY OUT:

Script Integration: External JavaScript libraries, including Bootstrap and custom scripts (script.js), are
integrated to augment the webpage’s functionality and interactivity. These scripts enhance user
engagement and provide dynamic features to the Facebook clone.

Image Usage: Various images, such as logos (profile.png, fb.png), profile pictures, and post images, are
incorporated to enrich the visual presentation of the Facebook clone. These images contribute to the overall
aesthetic appeal and user engagement of the webpage. In summary, the seamless integration of Bootstrap
within the HTML code enables the creation of a visually appealing, responsive, and user-friendly Facebook
clone. Bootstrap’s extensive toolkit empowers developers to expedite the development process while
ensuring consistent design standards and optimal user experience across diverse platforms and devices.

In an ice cream shop landing page built with Bootstrap, you can use various Bootstrap classes to create a
visually appealing and responsive layout. Here are some Bootstrap classes that you might find useful in
designing an ice cream shop landing page:

1. *Grid System: Use Bootstrap's grid system to create a responsive layout for your landing page. Classes
like container, row, and col- can help you structure the page content and ensure it looks good on different
screen sizes.

2. *Navbar: The navbar and navbar-expand- classes can be used to create a navigation bar at the top of the
page, allowing easy access to different sections of the website.

3. *Buttons*: Bootstrap provides various button classes like btn and btn-primary that you can use for call-
to-action buttons, such as "Order Now" or "View Menu".

4. *Carousel*: If you want to showcase different ice cream flavors or specials, you can use the carousel
component to create a visually appealing slideshow. Classes like carousel and carousel-item can be used for
this purpose.

5. *Cards*: Use Bootstrap's card component (card) to display individual ice cream flavors, menu items, or
promotions in a visually appealing way.

6. *Forms*: If you have an online ordering system or a contact form, Bootstrap's form classes (form, form-
group, input, etc.) can help you create well-structured and responsive forms.

7. *Images*: Bootstrap provides classes like img-fluid to ensure that your images are responsive and adjust
to different screen sizes without losing quality.

8. *Typography*: Bootstrap's typography classes (h1, h2, lead, etc.) can help you style headings,
paragraphs, and other text elements consistently across your landing page
9. *Utilities*: Bootstrap offers various utility classes for spacing, alignment, and visibility that can help you
fine-tune the layout and appearance of your landing page.

18
4.3: EDITING CONTENTS:

1.Feed Content:

 nav-tabs: Used for the navigation tabs to categorize and structure post headers and footers.
 media and media-body: Employed for displaying media content such as posts, comments, and
user activities.

2.Third Column Content:

 panel and panel-default: Utilized for creating a panel with default styling for user-related
pages, event invitations, trending topics, and sponsored content.
 panel-heading and panel-body: Applied for structuring the panel’s header and body content.

3.Right Content Area:

 thumbnail: Used for displaying images with a border and padding. • caption: Employed for
adding a caption to the thumbnail image.
 list-group and list-group-item: Utilized for creating a list group with items, used for
displaying users who have interacted with the current user’s posts, along with links to user profiles
and contacts.

4.Script Integration:

 bootstrap.min.css and bootstrap.min.js: External CSS and JavaScript files provided by

Bootstrap, integrated to apply Bootstrap’s styling and functionality to the webpage.
 script.js : Custom JavaScript file for additional functionality and interactivity.

19
 5. CSS Styling
5.1 Image display styling Global Styles:
• The body selector sets the background color of the entire webpage to a light grayish-blue (#e9ebee).
• Textareas and form controls have their borders removed, border radius set to 0, and resizing disabled .

Topbar Styles:
• The .topbar class styles the top navigation bar to be fixed at the top of the viewport with a blue
background and a dark blue bottom border.
• The right group within the topbar is floated to the right, containing link groups and notification groups
• Links within the topbar have white text, padding, and a font size of 12 pixels. On hover, the background
color changes to a darker blue (#355486) and text decoration is removed.
• Link groups within the right group are displayed as inline-block elements with no padding.
• Image icons within links are displayed inline-block with a specific width and height.

Left Content and Feed Content:

• The left content section is fixed on the left side of the viewport with a specific width, background color,
and overflow set to auto.
• Global links within the left content have specific styling for text and icons, along with a counter for
notifications.
• The feed content section is positioned to the right of the left content with padding, background color, and
overflow set to auto.

Third Column Content:

• The third column content is fixed on the right side of the viewport with a specific width, background
color, and overflow set to auto.
• It contains various sections with borders, headings, and links.

5.2 Media Queries:

• Media queries are used to adjust the layout and styling based on the screen width.
• When the screen width is less than 700px, the left content is hidden and certain link groups in the topbar
are hidden.
• When the screen width is less than 1000px, the third column content is hidden. • When the screen width is
greater than or equal to 1260px, additional content is displayed on the right side.
Technical Buzzwords:
• Selectors: body, .topbar, .right-group, .link-group, a, img, textarea, .form-control.
• Properties: position, background-color, color, fontsize, padding, margin, border, width, height, overflow,
float, display, transition, outline, textalign, list-style, border-radius.
• Values: Colors in hexadecimal format (#e9ebee), lengths in pixels (px), positions (fixed, relative), and
various keywords (none, inline-block, auto).

20
5.3 Button styling
To enhance the styling of the buttons in your photo editor project and make them more visually appealing,
you can consider the following CSS updates:
1. Add Gradients: Use gradients to make buttons look more dynamic.
2. Add Box Shadow: Add shadows to give buttons a more 3D appearance.
3. Change Cursor on Hover: Ensure the cursor changes when hovering over the buttons to indicate they
are clickable. 4. Add Transition Effects: Smooth transitions make the interaction more pleasant.

6.Javascript functionality
6.1Filter application and logic

HTML Structure
The HTML structure includes:
• A file input for uploading images.
• An image container to display the selected image.
• Several control groups for adjusting different filters (e.g., brightness, contrast, grayscale, etc.).
• Reset and save buttons.

CSS Styling

The CSS styling ensures:

• A responsive and visually appealing interface.
• Proper layout and appearance of control elements and buttons.

JavaScript Functionality

1. Variable Declarations and Event Listeners:

o Elements are selected from the DOM using getElementById. o Event listeners are
added to handle image uploads, filter adjustments, reset, and save actions.
2. Image Upload:
o When an image is selected (imageInput), a FileReader reads the file and sets the source
of the previewImage to the uploaded image. The filters are reset upon image load.
3. Filter Adjustment:
o Each filter element (e.g., brightness, contrast) has an event listener that triggers the
applyFilters function whenever the input value changes.

21
 4. Applying Filters:
o The applyFilters function constructs a CSS filter string based on the current values of
all filter controls.
o This filter string is applied to the previewImage using the style.filter property.
5. Reset Filters:
o The resetFilters function resets all filter values to their default states and removes any
applied filters from the previewImage.
6. Save Edited Image:
o The saveEditedImage function creates a canvas element and draws the current image
o with applied filters onto the canvas.
o A data URL is generated from the canvas, and a download link is created and triggered to
save the edited image.

6.2 Reset functionality

The "Reset" functionality is implemented through the resetFilters function, which is invoked when the
"Reset" button is clicked. This function sets the values of all the filter input ranges back to their default
values and removes any applied filters from the preview image. Here’s a step-by-step explanation:

1. Event Listener for Reset Button: An event listener is attached to the reset button. When the button
is clicked, the resetFilters function is called.
resetButton.addEventListener("click", () => {
resetFilters();
});

2. Reset Function: The resetFilters function is defined to reset all filter values and remove the
applied filters.
function resetFilters() {
if (currentImage) {
brightnessRange.value = 100;
contrastRange.value = 100;
grayscaleRange.value = 0;
blurRange.value = 0;
sepiaRange.value = 0;
hueRange.value = 0;
saturateRange.value = 100;
invertRange.value = 0;
previewImage.style.filter = "none";
}
}

3. Resetting Filter Values: Inside the resetFilters function:

22
 o The function first checks if currentImage is not null to ensure that an image is loaded. o
It then sets the value of each filter input range back to its default value:
 brightnessRange.value = 100;
 contrastRange.value = 100;
 grayscaleRange.value = 0;
 blurRange.value = 0;
 sepiaRange.value = 0;
 hueRange.value = 0;
 saturateRange.value = 100; ▪ invertRange.value = 0;
o Finally, it removes all filters from the previewImage by setting the filter style property
to "none":
previewImage.style.filter = "none";

6.3 Save image functionality

• Selecting an Image: The script starts by listening for changes in the input file element
(imageInput). When a file is selected, it reads the file using FileReader and displays the image in the
previewImage element.

• Applying Filters: The script includes various input range elements ( brightness, contrast,
grayscale, etc.) that allow users to adjust image filters like brightness, contrast, grayscale, blur, sepia, hue
rotation, saturation, and inversion. Changes in these input ranges trigger the applyFilters function,
which applies the specified filters to the preview image.

• Resetting Filters: The "Reset" button (resetButton) resets all filters to their default values,
setting the preview image back to its original state.

• Saving the Edited Image: The "Save" button (saveButton) triggers the saveEditedImage
function. This function creates a canvas element with the same dimensions as the current image, applies
the filter settings to the canvas, draws the edited image on the canvas, converts the canvas content to a
Data URL using toDataURL, creates a download link (<a> element) with the edited image, and triggers a
click on the link to initiate the process.

23
 7.User interface
HTML and CSS code create a simple yet functional user interface for a ice cream shop landing page web
application.
Here's a breakdown of the UI components and their functionalities:

1. HTML Structure:

o The <html> tag defines the document as HTML.

o The <head> section contains metadata and links to external resources like stylesheets and
scripts.
o The <body> tag contains the visible content of the page.
2. Meta Tags:
o <meta charset="UTF-8">: Sets the character encoding to UTF-8. o <meta
name="viewport" content="width=device-width, initial-scale=1.0">:
Ensures the page is responsive and scales properly on different devices.
3. Title:
o <title>Photo Editor</title>: Sets the title of the page displayed in the browser tab.
4. Stylesheet Link:
o <link rel="stylesheet" href="style.css" />: Links to an external CSS file for
styling.
5. Body Content:
o <div class="container">: Wraps the entire content for styling and layout purposes.
o <h1>Photo Editor</h1>: Displays the title of the application. o <input type="file"
id="imageInput" accept="image/*" />: Allows users to upload an image file.
o <div class="image-container">: Container for displaying the uploaded image. o <img
src="placeholder.jpg" alt="Image" id="previewImage" />: Initially displays a
placeholder image or the uploaded image.
o <div class="controls">: Contains various editing controls like sliders and buttons. o
<button id="reset" class="btn">Reset</button>: Resets the image filters to default
values. o <button id="save" class="btn">Save</button>: Saves the edited image.
6. Script Link:
o <script src="script.js"></script>: Links to an external JavaScript file for interactive
functionality.
7. CSS Styling:
o Defines styles for fonts, background, layout, form elements, buttons, and responsiveness
using media queries for smaller screens.
8. JavaScript Functionality:
o Handles image upload, applies image filters based on user input, resets filters, and saves the
edited image.

24
 8.Future enhancements
• Additional Filters: You can add more image filters like sharpen, colorize, vignette, or noise
reduction to give users more editing options.

• Image Cropping and Resizing: Implement functionalities to allow users to crop and resize images
within the editor.

• Undo/Redo Functionality: Include an undo/redo feature so that users can revert changes or redo
actions while editing.

• Text Overlay: Enable users to add text overlays on images with options for font styles, sizes,
colors, and positioning.

• Drawing Tools: Incorporate drawing tools such as brushes, pens, shapes, and colors for users to
draw directly on the image.

• Layer Support: Introduce support for multiple layers so that users can work on different elements
of the image separately and merge them later.

• History Panel: Include a history panel that shows a list of all edits made by the user, allowing them
to jump to a specific edit point.

• Batch Processing: Add batch processing capabilities to apply the same set of edits to multiple
images simultaneously.

• Integration with Cloud Storage: Allow users to save and load images directly from cloud storage
services like Google Drive or Dropbox.

• Export Options: Provide various export options such as different image formats (PNG, JPEG,
GIF), quality settings, and compression options.

25
 9.Conclusion

9.1 Summary of the project

• HTML Structure: The HTML file sets up the structure of the web site creation interface.. It includes
elements for uploading an image, displaying the image, control sliders for various image filters like
brightness, contrast, grayscale, blur, sepia, hue rotation, saturation, and invert, as well as buttons for
resetting filters and saving the edited image.

• CSS Styling: The CSS file styles the elements to create a visually appealing and responsive layout. It
includes styles for the container, headings, image display, control sliders, buttons, and responsive
design for smaller screens.

• JavaScript Functionality: • It handles events such as uploading an image, changing filter values using
sliders, resetting filters to default values, and saving the edited image.
• The applyFilters() function dynamically applies the selected filter values to the preview image.
• The resetFilters() function resets all filter values to their default settings.
• The saveEditedImage() function creates a canvas, applies the current filter settings to the image on
the canvas, and allows the user to download the edited image.

9.2 Learning outcomes

• HTML and CSS Proficiency: You've demonstrated proficiency in HTML for structuring the webpage and
CSS for styling elements like fonts, backgrounds, containers, buttons, and responsive design.

• JavaScript Interaction: Your JavaScript code adds interactive features to the editor, such as
loading an image, applying filters dynamically, resetting filters, and saving the edited image.

• Image Manipulation: By using JavaScript to apply filters like brightness, contrast, grayscale, blur,
sepia, hue rotation, saturation, and invert, you've gained experience in image manipulation techniques on
the web.

• Canvas Usage: The use of the <canvas> element and its context for drawing and saving the edited
image showcases your understanding of advanced HTML5 features.

• User Experience Design: The layout, controls, and responsiveness of the editor contribute to a
good user experience, which is essential in web development.

• File Handling: You've implemented file input for uploading images and download functionality to
save the edited image, enhancing your skills in handling files on the web.

• Event Handling: The event listeners for user interactions like changing input ranges, clicking
buttons, and handling file input events demonstrate your ability to handle user actions effectively.
26
 10.References
• Image Processing Libraries: Explore libraries like CamanJS, Fabric.js, or PixiJS for more advanced
image editing functionalities.

• Responsive Design: Enhance responsiveness using media queries for better display on different devices.

• Additional Features: You might want to add more editing tools like cropping, rotating, adding text or
stickers, etc.

• User Interface Enhancements: Improve user experience with tooltips, sliders with labels showing the
current value, undo/redo options, etc.

• Performance Optimization: Optimize image processing algorithms for better performance, especially
with large images.

• Cross-browser Compatibility: Test your application on different browsers to ensure compatibility.

27
PROJECT OVERVIEW:

28
 ABOUT THE COMPANY

The demand-supply gap scenario, exponential opportunities and dynamic challenges in the
21st century call for a change in our thinking on engineering practice and education. A
transformation on the current engineering education is the need of the hour. Growth of new
knowledge together with rapidly evolving technological skills, the skill to communicate
across disciplines, the ability to lead team-centered projects, contextualized problem
formulation, and hands-on experience are the present demands of the global industry. On
contrary to the present demands, students churned out from engineering colleges are not
equipped to meet the current industry needs due to the growing gap between engineering
practice, education and research which requires a lot of concern. As a timely response, it is
this concern for the student that has led Aditya to initiate T-Hub: a perfect launch pad to the
job world. T-Hub trains students in various disciplines beyond technological labels besides
equipping them with skills and creativity required for advancement in their careers.
Through its various programs t-hub provides adequate opportunities for an unmatched
knowledge base by imparting all necessary skills to students and makes them job ready

29
EXECUTIVE SUMMARY
This report is about my 2 weeks internship program with Technical Hub. In this comprehensive
report, I have discussed about every major aspect of the Technical Hub which I observed and
perceived during my internship program.

During my internship program, I have learned and mainly worked on Web Development. All the
details have been discussed in detail. All the policies and procedures of the Technical Hub have
been discussed in detail.

As the main purpose of the internship is to learn by working in practical environment and to apply
the knowledge acquired during the studies in real world scenario in order to tackle the problems
using the knowledge and skill learned during the academic process.

30
OPPORTUNITIES:
During these one month of the internship, I was given the opportunity to perform

the following role: Intern:

• Coordinating with the team members and team leads on a regular basis to keep a track of
the activities like the meetings held and about the work to be done.

• I learned about developing the applications using different tools.

• For that I have referred the GitHub repositories related to gain the complete knowledge on
that.

• Then I have gathered the requirements.

• They also provide us the opportunity to voluntarily interact in other projects as well.

• They have given different tasks to develop different parts of the application.
• Also they have finally conducted some tests to certify with the completion of internship.

28
TRAINING:
In these 2 weeks of the training, they have provided us the training in Web Development using
different tools.

They have provided us with the training of several technologies like:

• HTML
• CSS
• Javascript

HTML: When you are browsing the web, the pages you are viewing are just text documents
sitting on someone else’s computer. The text in a typical web page is wrapped in HTML tags,
which tell your browser about the structure of the document. With this information, the browser
can decide how to display the information in a way that makes sense.

CSS: CSS, or Cascading Style Sheets, is a stylesheet language used to describe the presentation
of a document written in HTML or XML. It controls the layout, colors, fonts, and overall
visual appearance of web pages.

Javascript: JavaScript is a versatile, high-level programming language primarily used for

creating interactive and dynamic content on web pages. It is an essential part of web
development, along with HTML and CSS.

29
CHALLENGES FACED:

• At the beginning of internship, I faced difficulty for understanding the applications and
different tools.

• I faced difficulty in installing the software.

• I faced difficulty in managing college and internship timings.
• I faced difficulty in understanding the advanced topics in android.
• I faced difficulty in managing the memory in pc.
• Even with these difficulties, I am able to complete the internship and it helps me in
securing a new job.
.
30