OJT REPORT

Submitted in partial fulfilment of the

Requirements for the award of the Degree of
MASTER OF SCIENCE (INFORMATION TECHNOLOGY)
Part I – SEM II
Submitted by
NISHI JAIN

Department of Information Technology

Shri Vile Parle Kelavani Mandal’s
USHA PRAVIN GANDHI COLLEGE OF ARTS, SCIENCE AND
COMMERCE
NAAC Reaccredited ‘A+’ Grade
(Affiliated to University of Mumbai)
MUMBAI, 400056

MAHARASHTRA

2023-24
 INDEX

Sr.No. Details Page No.

1 Certificate 2

2 Title 3

3 Description of the Organization 5

4 Description of the section where intern has worked 7

5 Description of work allotted and done by the intern 13

6 Online Diary 22

7 Self-Assessment 24

8 Professional evaluation of Intern 26

1
Certificate

2
 Title

Front-end Developer for API - Prediction Model

Project Brief:
Developing a prediction model to forecast product prices on e-commerce platforms like Amazon,
Flipkart, Walmart, Etsy, and others.
By integrating an API to retrieve historical pricing data from these platforms, a machine learning
model is to be trained to predict future prices for products.
This solution would benefit e-commerce sellers by providing them with insights into likely
future pricing trends. Sellers could then use these price forecasts to optimize their own product
listings and pricing strategies, helping them stay competitive and maximize revenue.
The key steps of developing the project are:
• Develop an API integration to pull historical pricing data from various e-commerce sites for a
range of products. This data would serve as the input to train the predictive model.
• Build a machine learning model that can analyse the pricing patterns and trends to forecast
future prices for each product.
• Provide an easy-to-use interface like a dashboard or an admin panel for sellers to input a
product and receive the predicted future pricing range, along with confidence intervals. This
would help them make informed decisions about listing prices.
• Continuously update the predictive model as new pricing data becomes available, ensuring
the forecasts remain accurate and relevant.
By equipping e-commerce vendors with reliable price predictions, this solution empowers them
to competitively price their products and boost sales and profitability

My role in brief:
• Provide sellers with an intuitive dashboard interface to easily input product details and
receive predicted future pricing ranges. This will empower sellers to make more informed
decisions when setting listing prices for their products.
• Utilizing a range of web development languages, including HTML, CSS, and JavaScript.
HTML to structure and organize content, CSS defines the layout and styling, and
JavaScript adds interactivity and dynamic functionality to the web application.
• Design and code web pages to be responsive, adapting seamlessly to different screen
sizes and devices.
• Maintaining simple product input form so that sellers can quickly enter key product
attributes like category, brand, etc. and get predicted price.

3
• Visualizing trends that display charts showing the predicted price trajectory over time to
spot upward or downward trends.
• Establishing a connection between the client-side application and a server, allowing for
the seamless retrieval and utilization of data within the user interface.
• Troubleshooting and debugging front-end issues, such as broken links, layout problems,
or JavaScript errors, are essential responsibilities for front-end developers.
• To perform testing and quality checks to ensure the functionality and usability of web
pages, addressing any bugs or issues that may arise.
• Finally, maintaining thorough documentation of code and development processes is
crucial for front-end developers, as it helps in the maintenance and troubleshooting of
web applications.
By leveraging APIs on the front-end, developers can build applications that are capable of
fetching and displaying data in real-time, enhancing the overall user experience and
providing users with the most current and relevant information.

4
 Description of the Organization

Finomes is a digital marketing and web development agency based in Mumbai, Maharashtra. The
organization is committed to understanding the fundamental business models of its clients to
deliver tailored digital marketing solutions that optimize their growth aspirations. Specializing in
integrated digital marketing strategies, Finomes offers a range of essential services including
UI/UX designing and web development designed to empower clients and facilitate their
expansion in the online marketplace. Finomes prides itself on its ability to develop a special
approach for each client based on their unique demands and benchmark analysis.
Overview of Services:
▪ UI/UX
At the core of Finomes’ offerings is its commitment to delivering customized UI/UX design
services. These services are meticulously crafted to align with each client’s specific requirements
and budgetary constraints. Finomes understands the critical role that user interface and
experience play in the success of digital platforms. By focusing on usability, accessibility, and
aesthetic appeal, Finomes ensures that every design solution not only meets but exceeds client
expectations. Moreover, beyond the initial design phase, Finomes provides ongoing support and
maintenance services. This proactive approach guarantees that the UI/UX remains functional, up-
to-date, and capable of adapting to evolving user needs and technological advancements over
time.
▪ Digital Marketing
In addition to UI/UX design, Finomes excels in digital marketing services aimed at enhancing
clients’ online presence and driving significant traffic to their websites. Leveraging advanced
SEO strategies and content marketing techniques, Finomes helps clients achieve higher search
engine rankings and increased organic visibility. By implementing tailored digital marketing
campaigns, Finomes effectively expands the brand reach of client companies, ensuring they
reach and engage with their target audiences effectively.
Furthermore, brand management is a cornerstone of Finomes’ digital marketing strategy. Beyond
mere promotion, Finomes focuses on cultivating and maintaining a positive brand image across
all digital channels. Through comprehensive brand management practices, including reputation
monitoring and enhancement initiatives, Finomes safeguards and enhances the credibility and
visibility of client brands in the competitive online environment.
▪ Web Development
In the realm of web development, Finomes utilizes state-of-the-art tools and techniques to create
highly functional and visually compelling websites on the WordPress platform. Recognizing the
importance of responsive design, Finomes ensures that all websites are seamlessly optimized for
various devices, including desktops, tablets, and smartphones. This approach not only enhances
user experience but also contributes to improved search engine rankings, as responsiveness is a

5
key factor in Google’s ranking algorithm. Moreover, Finomes remains committed to ongoing
support and maintenance for all websites developed. This includes regular updates to WordPress
core and plugins, security enhancements, and performance optimizations. By staying proactive in
maintenance, Finomes ensures that client websites remain secure, reliable, and capable of
delivering optimal performance at all times.
Unique Approach:
Beyond technical expertise, Finomes prides itself on its client-centric approach and commitment
to fostering long-term partnerships. Each project undertaken by Finomes is driven by a thorough
understanding of client goals, market dynamics, and industry trends. This holistic approach
enables Finomes to deliver solutions that not only meet immediate needs but also align with
clients’ overarching business objectives and growth strategies. By maintaining open lines of
communication and transparency throughout the project lifecycle, Finomes cultivates a
collaborative environment where client feedback is valued and integrated into every phase of
development and implementation.
Moreover, Finomes distinguishes itself through its dedication to continuous improvement and
innovation. As technology and digital marketing trends evolve, Finomes remains at the forefront,
constantly refining its methodologies and exploring new avenues to deliver added value to
clients. Whether through the adoption of emerging technologies, the integration of analytics-
driven insights, or the exploration of new digital platforms, Finomes is committed to staying
ahead of the curve and equipping clients with the tools and strategies needed to thrive in an
increasingly competitive marketplace.
Conclusion:
In summary, Finomes embodies excellence in digital solutions and services, offering a
comprehensive suite of offerings that empower businesses to achieve their full potential in the
digital age. From customized UI/UX design and strategic digital marketing to cutting-edge web
development on WordPress, Finomes is dedicated to delivering measurable results and driving
sustainable growth for its diverse portfolio of clients. With a steadfast commitment to quality,
innovation, and client satisfaction, Finomes continues to set the standard for excellence in the
digital services industry, helping businesses navigate and succeed in an ever-evolving digital
landscape.

6
Description of the activities done by the section where intern has worked

IT Department
Finomes offers comprehensive IT services that cater to the needs of businesses across various
sectors. The company's services are divided into two primary sections: UI/UX Design and Web
Development. Each section is designed to provide tailored solutions that meet the unique
requirements and budget constraints of clients.
UI/UX Design Services
Finomes' UI/UX design services are centered around creating user interfaces and experiences
that are intuitive, accessible, and visually appealing. The company's team of experienced
designers and developers work closely with clients to understand their goals, target audience, and
technical requirements. This collaborative approach ensures that the final design not only looks
great but also functions seamlessly with the software or application.
▪ Key Features of UI/UX Design Services

1. Customized Solutions: Finomes offers tailored UI/UX design services that are tailored to
each client's specific needs and budget.
2. User-Centered Approach: The company focuses on usability, accessibility, and aesthetic
appeal to ensure that every design solution meets and exceeds client expectations.
3. Ongoing Support: Beyond the initial design phase, Finomes provides ongoing support and
maintenance services to guarantee that the UI/UX remains functional, up-to-date, and
capable of adapting to evolving user needs and technological advancements over time.

▪ UI/UX Design Process

1. User Research
Understanding Users: Conduct thorough research to understand the needs, behaviors, and
motivations of the target audience. This includes gathering data through surveys, interviews,
and observations to create user personas and empathy maps.

2. Define Design Goals

Design Brief: Create a design brief that outlines the objectives, target audience, scope, and
success criteria for the project. This document serves as a guide for the design team and
ensures everyone is on the same page.

3. Ideation
Concept Development: Use various tools like ideation maps and moodboards to generate and
visualize ideas. This stage helps in identifying both positive and negative aspects of the
design and deciding on the best solution.

7
4. Prototype the Design
Wireframing: Create low-fidelity wireframes to outline the visual hierarchy and structural
principles of each screen. This helps in sharing designs with stakeholders and getting
feedback early on.
High-Fidelity Design: Move to high-fidelity design images with detailed visuals and color
themes.

5. Test and Iterate

Usability Testing: Conduct usability testing to gather feedback from actual users on the
design. This stage helps in identifying usability issues and making necessary improvements.
Iterate and Refine: Based on user feedback, refine and update the design to ensure it meets
user needs and expectations.

6. Implementation
Collaborate with Developers: Work closely with the development team to ensure the final
product or service aligns with the UX design.
Monitor and Optimize: Continuously monitor the product or service after launch, and make
further improvements based on user feedback and data

▪ Importance of UI/UX Design

1. User Experience: A good design enhances the user experience by making it easy and
enjoyable for users to interact with the product.

2. Competitive Advantage: A well-designed UI can differentiate a product from its competitors

and make it more attractive to users.

3. User Retention: A good design that is both functional and visually appealing can lead to
increased user retention and loyalty.

4. Brand Consistency: A consistent UI design helps in conveying a strong brand message and
building trust with users.

5. Increased Productivity: A user-friendly design can improve the efficiency and productivity of
users, leading to better overall outcomes.

6. Reduced Costs: Addressing usability issues early in the design process can help avoid costly
rework and development challenges later on.

8
Web Development Services
Finomes' web development services utilize state-of-the-art tools and techniques to create highly
functional and visually compelling websites on the WordPress platform. The company
recognizes the importance of responsive design and ensures that all websites are seamlessly
optimized for various devices, including desktops, tablets, and smartphones.
▪ Key Features of Web Development Services

1. Responsive Design: Finomes ensures that all websites are optimized for various devices,
enhancing user experience and contributing to improved search engine rankings.
2. Ongoing Support: Finomes remains committed to ongoing support and maintenance for all
websites developed. This includes regular updates to WordPress core and plugins, security
enhancements, and performance optimizations.
3. Security and Performance: By staying proactive in maintenance, Finomes ensures that client
websites remain secure, reliable, and capable of delivering optimal performance at all times.

▪ Web Development Process

1. Planning and Research

Define Project Goals: Clearly define the objectives, target audience, and desired features of
the website.
Conduct Market Research: Analyze the competition and industry trends to identify
opportunities and potential challenges.
2. Design and Wireframing
Create Wireframes: Develop low-fidelity wireframes to map out the website's structure and
user flow.
Design the User Interface: Create the visual design, including layout, color scheme,
typography, and branding elements.
3. Development
Choose a CMS or Framework: Select a content management system (CMS) like WordPress
or a web development framework like React or Angular.
Build the Website: Translate the design into a functional website using HTML, CSS, and
JavaScript.
Integrate Third-Party Tools: Incorporate necessary third-party tools and services, such as e-
commerce platforms, analytics, and content management systems.
4. Testing and Optimization
Conduct Usability Testing: Test the website with real users to identify and address any
usability issues.
Optimize for Performance: Optimize the website's loading speed, responsiveness, and search
engine visibility.
5. Deployment and Maintenance
Deploy the Website: Upload the website to a web server and ensure it's accessible to the
public.

9
 Ongoing Maintenance: Regularly update the website's content, security, and functionality to
keep it up-to-date and secure.

▪ Key Principles of Web Development

1. Responsive Design: The website should be optimized for seamless viewing and interaction
across various devices, including desktops, tablets, and smartphones.
2. User-Centered Approach: The website's design and functionality should be driven by the
needs and preferences of the target audience.
3. Scalability: The website should be designed to accommodate future growth and changes,
such as increased traffic or additional features.
4. Security: The website should be built with robust security measures to protect against cyber
threats and ensure the safety of user data.
5. Search Engine Optimization (SEO): The website should be optimized for search engines to
improve its visibility and ranking in search results.

▪ Importance of Web Development

1. Online Presence: A well-designed and functional website is essential for establishing an

online presence and reaching a wider audience.
2. Improved User Experience: A user-friendly and visually appealing website can enhance the
overall user experience, leading to increased engagement and customer satisfaction.
3. Competitive Advantage: A modern and feature-rich website can differentiate a business
from its competitors and provide a competitive edge.
4. Increased Conversions: A well-designed website can effectively guide users through the
sales funnel, leading to increased conversions and revenue.
5. Scalability and Flexibility: A robust web development process allows for easy updates,
modifications, and scalability to adapt to changing business needs.
Conclusion
Finomes' comprehensive IT services, including UI/UX design and web development, are
designed to provide businesses with tailored solutions that meet their unique needs and budget
constraints. By focusing on usability, accessibility, and aesthetic appeal, Finomes ensures that
every design solution not only meets but exceeds client expectations. Additionally, the company's
commitment to ongoing support and maintenance guarantees that the UI/UX and web
development solutions remain functional, up-to-date, and capable of adapting to evolving user
needs and technological advancements over time

10
 Description of work allotted and done by the intern

Work allotted and work done:

1. AI Predictive Model Development
Research and understand the best practices for building AI predictive models, including the
selection of appropriate algorithms, data preprocessing techniques, and model training and
evaluation methods.
Explore the available frameworks, libraries, and tools that can facilitate the development of the
AI predictive model.
Identify the data sources and requirements for training and deploying the AI model within the
software tool.
2. Front-end Development
Research and evaluate the latest front-end development technologies, frameworks, and libraries
that can be used to create an engaging and responsive user interface for the AI software tool.
Investigate the design patterns, UI components, and best practices for building intuitive and
visually appealing front-end experiences.
Explore the potential integration of the front-end with the AI predictive model and the overall
software architecture.
3. Admin and Dashboard Panel
Research the design and development of admin and dashboard panels for AI software tools,
focusing on features, functionalities, and user experience.
Investigate the available ready-made themes, templates, and UI kits that can be leveraged to
accelerate the development of the admin and dashboard panels.
Ensure the admin and dashboard panels provide comprehensive control, monitoring, and
management capabilities for the AI software tool.
4. Drag-and-Drop Website Tools
Explore and evaluate drag-and-drop website builders like Figma, Teleporthq, and Wix to
understand their capabilities, features, and potential integration with the AI software tool.
Assess the suitability of these tools for prototyping, designing, and potentially building the front-
end of the AI software tool.
Determine the advantages and limitations of using drag-and-drop tools compared to custom
front-end development.
5. Coordinating with the Back-end Team

11
Establish regular communication channels with the back-end team to discuss the dashboard
requirements and ensure that both teams are aligned on the project goals.
Work closely with the back-end team to identify the specific data, APIs, and backend services
that need to be integrated into the dashboard. This includes understanding the available data and
how it can be presented in a meaningful way.
6. Create a Sample Layout
Create a sample layout of the dashboard, including the placement of elements, colors, and
typography. This will help in visualizing the overall design and ensuring that it meets the project
goals.
7. Collect Required Elements
Collect all the necessary assets such as images, data, fonts, and other visual elements required for
the dashboard.
8. Create HTML File for Structure
HTML (Hypertext Markup Language) is used to describe the structure and formatting of a web
page. It uses a series of tags and attributes to define the elements of a web page, such as
headings, paragraphs, images, and links.
9. Create CSS File for Styling
Create a CSS file for styling the index page of the dashboard. This will ensure that the design is
visually appealing and consistent across all elements.
10. Create JavaScript File for Interactivity
Create a JavaScript file to make the dashboard interactive. This will include adding functionality
to the dashboard, such as animations, transitions, and user interactions.

HTML Code Snippets:

<!DOCTYPE html>

<html lang="en">

<head>

<!-- Required meta tags -->

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<title>Admin</title>

<!-- plugins:css -->

<link rel="stylesheet" href="vendors/feather/feather.css">

12
 <link rel="stylesheet" href="vendors/ti-icons/css/themify-icons.css">

<link rel="stylesheet" href="vendors/css/vendor.bundle.base.css">

<!-- endinject -->

<!-- Plugin css for this page -->

<link rel="stylesheet" href="vendors/datatables.net-bs4/dataTables.bootstrap4.css">

<link rel="stylesheet" href="vendors/ti-icons/css/themify-icons.css">

<link rel="stylesheet" type="text/css" href="js/select.dataTables.min.css">

<!-- End plugin css for this page -->

<!-- inject:css -->

<link rel="stylesheet" href="css/vertical-layout-light/style.css">

<!-- endinject -->

<link rel="shortcut icon" href="images/favicon.png" />

</head>

<body>

<div class="container-scroller">

<!-- partial:partials/_navbar.html -->

<nav class="navbar col-lg-12 col-12 p-0 fixed-top d-flex flex-row">

<div class="text-center navbar-brand-wrapper d-flex align-items-center justify-content-center">

<a class="navbar-brand brand-logo mr-5" href="index.html"><img src="images/logo.svg" class="mr-2"

alt="logo"/></a>

<a class="navbar-brand brand-logo-mini" href="index.html"><img src="images/logo-mini.svg"

alt="logo"/></a>

</div>

<div class="navbar-menu-wrapper d-flex align-items-center justify-content-end">

<button class="navbar-toggler navbar-toggler align-self-center" type="button" data-toggle="minimize">

<span class="icon-menu"></span>

</button>

<ul class="navbar-nav mr-lg-2">

<li class="nav-item nav-search d-none d-lg-block">

<div class="input-group">

<div class="input-group-prepend hover-cursor" id="navbar-search-icon">

<span class="input-group-text" id="search">

13
 <div class="card-body">

<div id="detailedReports" class="carousel slide detailed-report-carousel position-static pt-2" data-

ride="carousel">

<div class="carousel-inner">

<div class="carousel-item active">

<div class="row">

<div class="col-md-12 col-xl-3 d-flex flex-column justify-content-start">

<div class="ml-xl-4 mt-3">

<p class="card-title">Detailed Reports</p>

<h1 class="text-primary">$34040</h1>

<h3 class="font-weight-500 mb-xl-4 text-primary">North America</h3>

<p class="mb-2 mb-xl-0">The total number of sessions within the date range. It is the period time
a user is actively engaged with your website, page or app, etc</p>

</div>

</div>

<div class="col-md-12 col-xl-9">

<div class="row">

<div class="col-md-6 border-right">

<div class="table-responsive mb-3 mb-md-0 mt-3">

<table class="table table-borderless report-table">

<tr>

<td class="text-muted">Illinois</td>

<td class="w-100 px-0">

<div class="progress progress-md mx-4">

<div class="progress-bar bg-primary" role="progressbar" style="width: 70%" aria-

valuenow="70" aria-valuemin="0" aria-valuemax="100"></div>

</div>

</td>

<td><h5 class="font-weight-bold mb-0">713</h5></td>

</tr>

<tr>

<td class="text-muted">Washington</td>

<td class="w-100 px-0"

14
 </div>

</td>

<td><h5 class="font-weight-bold mb-0">560</h5></td>

</tr>

<tr>

<td class="text-muted">Alaska</td>

<td class="w-100 px-0">

<div class="progress progress-md mx-4">

<div class="progress-bar bg-danger" role="progressbar" style="width: 75%" aria-

valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>

</div>

</td>

<td><h5 class="font-weight-bold mb-0">793</h5></td>

</tr>

</table>

</div>

</div>

<div class="col-md-6 mt-3">

<canvas id="north-america-chart"></canvas>

<div id="north-america-legend"></div>

</div>

</div>

</div>

</div>

</div>

<div class="carousel-item">

<div class="row">

<div class="col-md-12 col-xl-3 d-flex flex-column justify-content-start">

<div class="ml-xl-4 mt-3">

<p class="card-title">Detailed Reports</p>

<h1 class="text-primary">$34040</h1>

<h3 class="font-weight-500 mb-xl-4 text-primary">North America</h3>

15
 <script src="js/off-canvas.js"></script>

<script src="js/hoverable-collapse.js"></script>

<script src="js/template.js"></script>

<script src="js/settings.js"></script>

<script src="js/todolist.js"></script>

<!-- endinject -->

<!-- Custom js for this page-->

<script src="js/dashboard.js"></script>

<script src="js/Chart.roundedBarCharts.js"></script>

<!-- End custom js for this page-->

</body>

</html>

CSS Code Snippets:

.btn, .fc button, .ajax-upload-dragdrop .ajax-file-upload, .swal2-modal .swal2-buttonswrapper .swal2-styled, .swal2-
modal .swal2-buttonswrapper .swal2-styled.swal2-confirm, .swal2-modal .swal2-buttonswrapper .swal2-
styled.swal2-cancel, .wizard > .actions a {

display: inline-block;

font-weight: 400;

color: #1F1F1F;

text-align: center;

vertical-align: middle;

user-select: none;

background-color: transparent;

border: 1px solid transparent;

padding: 0.875rem 1.5rem;

font-size: 0.875rem;

line-height: 1;

border-radius: 0.1875rem;

transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow
0.15s ease-in-out;

.btn-primary, .wizard > .actions a {

16
 color: #fff;

background-color: #4B49AC;

border-color: #4B49AC;

.btn-primary:hover, .wizard > .actions a:hover {

color: #fff;

background-color: #3f3e91;

border-color: #3b3a88;

.dropdown-toggle::after {

display: inline-block;

margin-left: 0.255em;

vertical-align: 0.255em;

content: "";

border-top: 0.3em solid;

border-right: 0.3em solid transparent;

border-bottom: 0;

border-left: 0.3em solid transparent;

.tooltip {

position: absolute;

z-index: 1070;

display: block;

margin: 0;

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans",
"Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

font-style: normal;

font-weight: 400;

line-height: 1.5;

text-align: left;

text-align: start;

text-decoration: none;

17
 text-shadow: none;

text-transform: none;

letter-spacing: normal;

word-break: normal;

word-spacing: normal;

white-space: normal;

line-break: auto;

font-size: 0.75rem;

word-wrap: break-word;

opacity: 0;

h1, .h1 {

font-size: 3.125rem;

h2, .h2 {

font-size: 2.187rem;

h3, .h3 {

font-size: 1.525rem;

h4, .h4 {

font-size: 1.125rem;

h5, .h5 {

font-size: 1rem;

h6, .h6 {

18
 font-size: .9375rem;

.footer {

background: #F5F7FF;

padding: 30px 2.45rem;

transition: all 0.25s ease;

-moz-transition: all 0.25s ease;

-webkit-transition: all 0.25s ease;

-ms-transition: all 0.25s ease;

font-size: calc(0.875rem - 0.05rem);

font-family: "Nunito", sans-serif;

font-weight: 400;

border-top: 1px solid rgba(0, 0, 0, 0.06);

#settings-trigger i {

color: #ffffff;

font-size: 1rem;

line-height: 1rem;

.rtl #settings-trigger {

right: auto;

left: 30px;

@media (max-width: 991px) {

#settings-trigger {

display: none;

19
 JS Code Snippets:
$(function() {

'use strict';

if ($(".mapael-example-1").length) {

$(".mapael-example-1").mapael({

map: {

name: "france_departments",

defaultArea: {

attrsHover: {

fill: "#343434",

stroke: "#5d5d5d",

"stroke-width": 1,

"stroke-linejoin": "round"

},

(function($) {

'use strict';

$(function() {

if ($("#order-chart").length) {

var areaData = {

labels: ["10","","","20","","","30","","","40","","", "50","","", "60","","","70"],

datasets: [

data: [200, 480, 700, 600, 620, 350, 380, 350, 850, "600", "650", "350", "590", "350", "620", "500", "990",
"780", "650"],

borderColor: [

'#4747A1'

],

borderWidth: 2,

fill: false,

label: "Orders"

20
 },

data: [400, 450, 410, 500, 480, 600, 450, 550, 460, "560", "450", "700", "450", "640", "550", "650", "400",
"850", "800"],

borderColor: [

'#F09397'

],

borderWidth: 2,

fill: false,

label: "Downloads"

};

function($) {

(function() {

var db = {

loadData: function(filter) {

return $.grep(this.clients, function(client) {

return (!filter.Name || client.Name.indexOf(filter.Name) > -1) &&

(filter.Age === undefined || client.Age === filter.Age) &&

(!filter.Address || client.Address.indexOf(filter.Address) > -1) &&

(!filter.Country || client.Country === filter.Country) &&

(filter.Married === undefined || client.Married === filter.Married);

});

},

21
 Online Diary

DATE DAY Name of the Topic/Module Completed Remarks

WEEKS

17-May Fri
Joined Finomes as front-end developer to
build AI predictive model for e-commerce
1st Week

18-May Sat
Researched on how to build AI predictive model

Researched on how to develop front-end for the

20-May Mon
predictive model

Researched on how to build admin and dashboard

21-May Tue
panel for AI software tool
2nd Week
Searched for ready admin and dashboard themes and
22-May Wed
templates

23-May Thu Studied the ready themes

24-May Fri Studied some drag and drop website tools

25-May Sat Co-ordinated with back-end team

Worked on admin dashboard panel and created a

27-May Mon
flowchart

Co-ordinated with back-end to understand the

28-May Tue
requirements

3rd Week
29-May Wed Created a sample layout for front-end

Made changes in the layout after coordinating with

30-May Thu
the team

22
 31-May Fri Worked on designing part of the dashboard

1-Jun Sat Worked on the sample layout

3-Jun Mon Worked on developing dashboard

4-Jun Tue Created a base layout for dashboard

5-Jun Wed Collected all the images required

4th Week
Co-ordinated with the back-end team to know the
6-Jun Thu
requirements

Started creating the index(html) page of the

7-Jun Fri
dashboard

8-Jun Sat Continued working on the index(html) page

10-Jun Mon Worked on the css file

11-Jun Tue Did some basic designing of the index(html) page

5th Week 12-Jun Wed Continued working on index(html) page

13-Jun Thu Worked on the css file

Co-ordinated with the team to get approval of the

14-Jun Fri
basic layout

15-Jun Sat Continued working on index page

Signature of the Faculty mentor: ___________ Seal of the University/College __________

23
 Self-assessment

Technical Skills
▪ HTML

1. Semantic Markup: Developing a deep understanding of semantic HTML elements and their
appropriate usage to create a well-structured and accessible web page.
2. DOM Manipulation: Learning how to effectively manipulate the Document Object Model
(DOM) using JavaScript to dynamically update the front-end based on API responses.
3. Form Handling: Implementing HTML forms and handling user input, form validation, and
form submission to facilitate data exchange with the API.

▪ CSS

1. Responsive Design: Mastering CSS techniques, such as media queries and flexbox, to create
responsive and mobile-friendly front-end designs.
2. CSS Preprocessors: Gaining experience with CSS preprocessors like Sass or Less, which can
improve the organization, maintainability, and scalability of the front-end codebase.
3. CSS Frameworks: Leveraging CSS frameworks like Bootstrap or Tailwind CSS to accelerate
the development process and ensure consistent styling across the application.

▪ JavaScript

1. Asynchronous Programming: Understanding and implementing asynchronous programming

concepts, such as callbacks, promises, and async/await, to handle API requests and responses
effectively.
2. API Integration: Developing the skills to interact with APIs, including making HTTP
requests, parsing API responses, and handling errors.
3. JavaScript Libraries and Frameworks: Gaining experience with popular JavaScript libraries
and frameworks, such as jQuery, React, or Angular, which can simplify front-end
development and provide additional functionality.

▪ API Integration

1. API Endpoint Interaction: Learning how to interact with API endpoints, including
constructing proper HTTP requests (GET, POST, PUT, DELETE) and handling the
corresponding responses.
2. Data Handling: Developing the ability to parse and manipulate API data, such as JSON or
XML, to present it in a user-friendly format on the front-end.
3. Authentication and Authorization: Understanding and implementing various authentication
and authorization mechanisms, such as API keys, OAuth, or JWT, to securely access and
interact with the API.

24
 ▪ Drag-and-Drop Website Tools

1. Explored and evaluated drag-and-drop website builders like Figma, Teleporthq, and Wix to
understand their capabilities, features, and potential integration with the AI software tool.
2. Assessed the suitability of these tools for prototyping, designing, and potentially building the
front-end of the AI software tool.
3. Determined the advantages and limitations of using drag-and-drop tools compared to custom
front-end development.

Interpersonal Skills
▪ Communication

1. Collaboration: Effectively communicating and collaborating with the back-end team to

ensure the front-end and API are seamlessly integrated.
2. Stakeholder Management: Engaging with project stakeholders, such as product managers or
designers, to understand their requirements and align the front-end development with their
vision.
3. Documentation: Documenting the front-end development process, including API integration,
to facilitate knowledge sharing and future maintenance.

▪ Problem-Solving

1. Troubleshooting: Developing the ability to identify and resolve issues that may arise during
the front-end development process, such as API response errors or compatibility problems.
2. Adaptability: Demonstrating the flexibility to adapt to changing requirements or unexpected
challenges that may arise during the project lifecycle.
3. Critical Thinking: Applying critical thinking skills to analyze the front-end requirements,
identify potential issues, and devise effective solutions.

▪ Project Management

1. Time Management: Effectively managing time and prioritizing tasks to ensure the front-end
development stays on track and meets deadlines.
2. Task Prioritization: Determining the appropriate order and prioritization of front-end
development tasks to align with the overall project goals.
3. Continuous Improvement: Continuously evaluating the development process and identifying
opportunities for improvement to enhance the quality and efficiency of the front-end.

25
 Professional Evaluation of intern
Name of intern: Nishi Jain
College/institution: Usha Pravin Gandhi College of Arts, Science and Commerce
[Note: Give a score in the 1 to 5 scale by putting √ in the respective cells]
No Particular Excellent Very Good Moderate Satisfactory
Good
1 Attendance &
Punctuality
2 Ability to work in a
team
3 Written and oral
communication
skills
4 Problem solving
skills
5 Ability to grasp
new concepts
6 Technical skill in
terms of
technology,
programming etc
7 Ability to complete
the task
8 Quality of overall
work done

Comments: "The intern's exceptional performance across all areas, from attendance and
teamwork to technical skills and problem-solving, made them an invaluable asset to our team."
Signature:

Name: Karan Shah

Designation: Co-Founder at Finomes
Contact details: 9820761164
Email: [email protected]

26