An Industrial Training Report On

WEATHER WEBSITE
Held at

Udemy
Submitted in partial fulfilment of award of
BACHELOR OF TECHNOLOGY
degree in

COMPUTER SCIENCE & ENGINEERING

By

VIPIN CHAUHAN
(2100820100181)
Under the guidance of

Dr. Neelaksh Sheel

Mr. Vikas Bhatnagar

Department of Computer Science & Engineering Moradabad (U.P)

MORADABAD INSTITUE OF TECHNOLOGY

Session 2023-24
 iii

ABSTRACT

This project encompasses the creation of a dynamic e-commerce website, employing

a full-stack development approach. The frontend, developed using ReactJS, CSS, and
Bootstrap, ensures a visually appealing and responsive user interface. ReactJS
facilitates the creation of interactive components, while CSS and Bootstrap contribute
to a consistent and mobile-friendly design.

On the backend, NodeJS and Express form a robust server infrastructure, allowing
for the implementation of RESTful APIs to handle user authentication, product
management, order processing, and seamless communication with the MongoDB
database. MongoDB, chosen for its scalability, stores and retrieves data efficiently,
accommodating diverse product categories, user profiles, and transactional
information.

The integration of these technologies results in a feature-rich e-commerce platform,

providing users with a smooth experience in product exploration, cart management,
and secure transactions. This project highlights the synergy of frontend and backend
technologies, demonstrating the cohesive implementation of ReactJS, CSS,
Bootstrap, NodeJS, Express, and MongoDB to achieve a high-performance and
scalable web application. The website stands as a testament to the power of a well-
integrated tech stack in delivering a seamless and user-friendly online shopping
experience.
 iv

ACKNOWLEDGEMENT

It is a matter of great pleasure and privilege for us to present this report of 8 week
industrial training. Through this report, I would like to thank numerous people whose
consistent support and guidance has been the standing pillar in architecture of this
report .

To begin with our, sincere thanks to Dr.Neelaksh Sheel(Associate Professor) and

Mr. Vikas Bhatanagar(Assistant Professor) for positive attitude shown to our work.
We would also acknowledge our heartfelt gratitude to our counsellors for providing
us an infrastructure and moral support while carrying out this project in the college.

The guidance and support received from all the members who contributed and who
are contributing to this project, was vital for the success of the project. We are grateful
for their constant support and help.

VIPIN CHAUHAN
(2100820100181)
 v

TABLE OF CONTENTS
CONTENT PAGE NO.

ABSTRACT ..................................................................................................................... iii

ACKNOWLEDGEMENT ............................................................................................... iv
LIST OF FIGURES ......................................................................................................... vi
CHAPTER 1: OBJECTIVE OF TRAINING
1.1 Details of the Company ..................................................................................................................7
1.2 Objectives behind Internship ..........................................................................................…............7
1.3 Achievements after Internship ...................……………………………………………………….8

CHAPTER 2: ABOUT THE PROJECT

2.1 Project Overview ............................................................…............................................................9
2.2 Project Description .........................................................................................................................9
2.3 Technologies Used .........................................................................................................................9
2.3.1 Frontend (ReactJS and Bootstrap CSS) ......................................................….............................9
2.3.2 Backend (NodeJS,Express) ……………….................……………………………………….....9
2.2.3 JavaScript ............................................................................................………………..….........10
CHAPTER 3: SOURCE CODE
3.1 Code …………. ...........................................................................................……….................... 11
CHAPTER 4: SNAPSHOTS OF THE PROJECT…………….……………………………….……22
CHAPTER 5: CONCLUSION …………………….…………………………………………….…...24
REFERENCES …...………………………………….………………………………………...….…. 25
 vi

LIST OF FIGURES
FIGURE NO FIGURE NAME
PAGE

Figure 1 Company Logo ..........................................................................................................................… 7

Figure 2 HomePage..........................................................................................................................................22
Figure 3 Search Weather................................................................................................................................ 23

Figure 4 Output....................................................................................................................................................23
 7

CHAPTER 1

OBJECTIVES OF TRAINING

DETAILS OF THE COMPANY

Udemy, Inc. is an education technology company that provides an online learning and teaching
platform. It was founded in May 2010 , by Oktay Caglar.

As of June 2023, the platform has 64 million learners, over 210,000 courses, and more than 75,000
instructors teaching courses in nearly 75 languages, with over 870 million course enrollments.

There are more than 14,900 Udemy Business customers, and more than 50% of the Fortune 100 are
Udemy Business customers. Udemy Business customers have access to more than 24K courses, out
of which more than 10.5K are in English and more than 13.5K are in 14 international languages.

Students take courses primarily to improve job-related skills. Some courses generate credit toward
technical certification. Udemy attracts corporate trainers seeking to create coursework for employees
of their company.

Udemy is headquartered in San Francisco , California with hubs in Denver , Colorado; Dublin , Ireland
and Austin, Texas; Melbourne, Australia and Gurgaon, India.

Figure 2: Company Logo

1.1OBJECTIVES BEHIND INTERNSHIP

1.Hands on Experience

Gain practical hands-on experience in applying HTML, CSS, JavaScript – So as to gain more
 8

knowledge about the same and become quite comfortable in the programming.

1 Skill Development
Enhance programming skills, HTML, CSS , JavaScript and Reactjs.

1.1 ACHIEVEMENTS AFTER THE INTERNSHIP

During the intern-ship, I had the opportunity to work on a web development project that
utilized HTML, CSS, JavaScript and to create a dynamic and responsive website. This project
was not only a valuable learning experience but also resulted in significant achievements and
contributions.

1. Mastery of Front-End Technologies-The project allowed me to gain proficiency in the

core technologies of front-end web development, namely HTML, CSS, JavaScript and reactjs
. I became well-versed in creating visually appealing and interactive web interfaces.

2. Problem-Solving Skills-Throughout the project, I encountered various challenges and had to

employ problem-solving skills to find solutions. This honed my ability to troubleshoot and debug issues
in real-world web development scenarios.

2. User-Centric Design-The focus on responsive design and interactive elements highlighted the
importance of creating user-friendly web experiences. This experience will be invaluable in future web
development endeavors.#

The achievements gained from this project set a solid foundation for future endeavors in web
development. The skills acquired in HTML, CSS, and JavaScript, along with the problem-solving and
design abilities, can be applied to more complex projects and contribute to a successful career in web
development or related fields.
 9

CHAPTER 2

ABOUT THE PROJECT

2.1 Project Overview:

The project involves the conception, design, and implementation of a comprehensive e-commerce
website, averaging modern web development technologies to deliver an intuitive and seamless on-
line shopping experience. The development is bifurcated into the front-end and back-end
components, each utilizing specialized technologies to ensure efficiency, scalability, and a visually
appealing user interface.

2.2 PROJECT DESCRIPTION

This project entails the end-to-end development of a dynamic and responsive e-commerce website,
employing a robust teach stack to deliver a seamless online shopping experience. The front-end is
crafted using ReactJS, CSS, and Bootstrap, ensuring an engaging and visually appealing user
interface that adapts seamlessly to various devices.

2.3 TECHNOLOGIES USED:

The technology stack employed in the development of the e-commerce website includes both
frontend and backend technologies:
2.3.1 Front-end Technologies:
ReactJS: A JavaScript library for building user interfaces, enabling the creation of dynamic and
interactive components.
CSS (Cascading Style Sheets): Used for styling and layout to enhance the visual presentation of
the website.
Bootstrap: A front-end framework that facilitates the development of responsive and mobile-first
web pages, ensuring a consistent design across devices.
2.3.2 Backend Technologies:
NodeJS: A server-side JavaScript runtime that enables the execution of server-side logic, handling
requests, and coordinating with the database.
Express: A web application framework for NodeJS that simplifies the creation of robust and
scalable server-side applications, providing tools for routing and middle-ware.
MongoDB: A NoSQL database that stores and retrieves data efficiently, offering flexibility and
scalability. Used for managing product data, user profiles, and transactional information.
 10

Overall Technology Stack:

1. Frontend: ReactJS, CSS, Bootstrap
2. Backend: NodeJS, Express
3. Database: MongoDB (NoSQL)
This technology stack is chosen for its versatility, scalability, and efficiency in creating a responsive
and feature-rich e-commerce website. The combination of ReactJS on the front-end and NodeJS
with Express on the back-end allows for the development of a high-performance, interactive, and
scalable web application. MongoDB serves as a flexible and scalable database solution to efficiently
handle the storage and retrieval of data associated with products, users, and transactions.

2.3.3 JavaScript

JavaScript is a lightweight, cross-platform, single-threaded, and interpreted compiled programming

language. It is also known as the scripting language for web pages. It is well-known for the
development of web pages, and many non-browser environments also use it.
JavaScript is a weakly typed language (dynamically typed). JavaScript can be used for Client-side
developments as well as Server-side developments. JavaScript is both an imperative and declarative
type of language. JavaScript contains a standard library of objects, like Array, Date, and Math, and
a core set of language elements like operators, control structures, and statements.

Client-side: It supplies objects to control a browser and its Document Object Model (DOM). Like
if client-side extensions allow an application to place elements on an HTML form and respond to
user events such as mouse clicks, form input, and page navigation. Useful libraries for the client
side are Express, ReactJS, and so many others.
Server-side: It supplies objects relevant to running JavaScript on a server. For if the server-side
extensions allow an application to communicate with a database, and provide continuity of
information from one invocation to another of the application, or perform file manipulations on a
server. The useful framework which is the most famous these days is node.js.
Imperative language – In this type of language we are mostly concerned about how it is to be done.
It simply controls the flow of computation. The procedural programming approach, object, oriented
approach comes under this as async await we are thinking about what is to be done further after the
async call.
Declarative programming – In this type of language we are concerned about how it is to be done,
basically here logical computation requires. Her main goal is to describe the desired result without
direct dictation on how to get it as the arrow function does.
 11

CHAPTER 3

SOURCE CODE

In this chapter, we will explore the fundamental method source code and syntax architecture,
offering insights into essential programming structures and best practice.

Index.js
const userTab = document.querySelector("[data-userWeather]");
const searchTab = document.querySelector("[data-searchWeather]");
const userContainer = document.querySelector(".weather-container");

const grantAccessContainer = document.querySelector(".grant-location-

container");
const searchForm = document.querySelector("[data-searchForm]");
const loadingScreen = document.querySelector(".loading-container");
const userInfoContainer = document.querySelector(".user-info-container");

//initially vairables need????

let oldTab = userTab;

const API_KEY = "d1845658f92b31c64bd94f06f7188c9c";
oldTab.classList.add("current-tab");
getfromSessionStorage();

function switchTab(newTab) {
if(newTab != oldTab) {
oldTab.classList.remove("current-tab");
oldTab = newTab;
oldTab.classList.add("current-tab");

if(!searchForm.classList.contains("active")) {
//kya search form wala container is invisible, if yes then make it visible
userInfoContainer.classList.remove("active");
grantAccessContainer.classList.remove("active");
searchForm.classList.add("active");
}
 12

else {
//main pehle search wale tab pr tha, ab your weather tab visible karna h
searchForm.classList.remove("active");
userInfoContainer.classList.remove("active");
//ab main your weather tab me aagya hu, toh weather bhi display karna
poadega, so let's check local storage first
//for coordinates, if we haved saved them there.
getfromSessionStorage();
}
}
}

userTab.addEventListener("click", () => {
//pass clicked tab as input paramter
switchTab(userTab);
});

searchTab.addEventListener("click", () => {
//pass clicked tab as input paramter
switchTab(searchTab);
});

//check if cordinates are already present in session storage

function getfromSessionStorage() {
const localCoordinates = sessionStorage.getItem("user-coordinates");
if(!localCoordinates) {
//agar local coordinates nahi mile
grantAccessContainer.classList.add("active");
}
else {
const coordinates = JSON.parse(localCoordinates);
fetchUserWeatherInfo(coordinates);
}

async function fetchUserWeatherInfo(coordinates) {

const {lat, lon} = coordinates;
// make grantcontainer invisible
 13

grantAccessContainer.classList.remove("active");
//make loader visible
loadingScreen.classList.add("active");

//API CALL
try {
const response = await fetch(

`https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&appid=
${API_KEY}&units=metric`
);
const data = await response.json();

loadingScreen.classList.remove("active");
userInfoContainer.classList.add("active");
renderWeatherInfo(data);
}
catch(err) {
loadingScreen.classList.remove("active");
//HW

function renderWeatherInfo(weatherInfo) {
//fistly, we have to fethc the elements

const cityName = document.querySelector("[data-cityName]");

const countryIcon = document.querySelector("[data-countryIcon]");
const desc = document.querySelector("[data-weatherDesc]");
const weatherIcon = document.querySelector("[data-weatherIcon]");
const temp = document.querySelector("[data-temp]");
const windspeed = document.querySelector("[data-windspeed]");
const humidity = document.querySelector("[data-humidity]");
const cloudiness = document.querySelector("[data-cloudiness]");

console.log(weatherInfo);
 14

//fetch values from weatherINfo object and put it UI elements

cityName.innerText = weatherInfo?.name;
countryIcon.src =
`https://flagcdn.com/144x108/${weatherInfo?.sys?.country.toLowerCase()}.png`;
desc.innerText = weatherInfo?.weather?.[0]?.description;
weatherIcon.src =
`http://openweathermap.org/img/w/${weatherInfo?.weather?.[0]?.icon}.png`;
temp.innerText = `${weatherInfo?.main?.temp} °C`;
windspeed.innerText = `${weatherInfo?.wind?.speed} m/s`;
humidity.innerText = `${weatherInfo?.main?.humidity}%`;
cloudiness.innerText = `${weatherInfo?.clouds?.all}%`;

function getLocation() {
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
}
else {
//HW - show an alert for no gelolocation support available
}
}

function showPosition(position) {

const userCoordinates = {
lat: position.coords.latitude,
lon: position.coords.longitude,
}

sessionStorage.setItem("user-coordinates", JSON.stringify(userCoordinates));
fetchUserWeatherInfo(userCoordinates);

const grantAccessButton = document.querySelector("[data-grantAccess]");

grantAccessButton.addEventListener("click", getLocation);
 15

const searchInput = document.querySelector("[data-searchInput]");

searchForm.addEventListener("submit", (e) => {

e.preventDefault();
let cityName = searchInput.value;

if(cityName === "")

return;
else
fetchSearchWeatherInfo(cityName);
})

async function fetchSearchWeatherInfo(city) {

loadingScreen.classList.add("active");
userInfoContainer.classList.remove("active");
grantAccessContainer.classList.remove("active");

try {
const response = await fetch(

`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${API_KEY
}&units=metric`
);
const data = await response.json();
loadingScreen.classList.remove("active");
userInfoContainer.classList.add("active");
renderWeatherInfo(data);
}
catch(err) {
//hW
}
Styles.css
*,*::before,*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Merriweather Sans', sans-serif;
}
 16

:root {
--colorDark1: #112D4E;
--colorDark2: #3F72AF;
--colorLight1: #DBE2EF;
--colorLight2: #F9F7F7;
}

.wrapper{
width:100vw;
height:100vh;
color: var(--colorLight2);
background-image: linear-gradient(160deg, #112d4e 0%, #3f72af 100%);;
}

h1 {
text-align: center;
text-transform:uppercase;
padding-top: 20px;
}

.tab-container {
width:90%;
max-width: 550px;
margin: 0 auto;
margin-top: 4rem;
display: flex;
justify-content: space-between;
}

.tab{
cursor: pointer;
font-size: 0.875rem;
letter-spacing: 1.75px;
padding: 5px 8px;
}

.tab.current-tab{
background-color: rgba(219, 226, 239, 0.5);
border-radius: 4px;
 17

.weather-container{
margin-block:4rem;
}

.btn{
all: unset;
/* appearance: none;
border:none;
color: white; */
font-size: 0.85rem;
text-transform: uppercase;
border-radius: 5px;
background-color: var(--colorDark2);
cursor: pointer;
padding: 10px 30px;
margin-bottom: 10px;
}

.sub-container{
display:flex;
flex-direction:column;
align-items: center;
}

.grant-location-container{
display:none;
}

.grant-location-container.active{
display:flex;
}

.grant-location-container img{
margin-bottom: 2rem;
}

.grant-location-container p:first-of-type{
 18

font-size: 1.75rem;
font-weight: 600;
}

.grant-location-container p:last-of-type{
font-size:0.85rem;
font-weight: 500;
margin-top: 0.75rem;
margin-bottom: 1.75rem;
letter-spacing: 0.75px;
}

.loading-container{
display: none;
}

.loading-container.active{
display: flex;
}

.loading-container p{
text-transform: uppercase;
}

.user-info-container{
display:none;
}

.user-info-container.active{
display: flex;
}

.name{
display: flex;
align-items: center;
gap: 0 0.5rem;
margin-bottom: 1rem;
}
 19

.user-info-container p{
font-size:1.5rem;
font-weight:200;
}

.user-info-container img{
width:90px;
height:90px;
}

.name p{
font-size:2rem;
}

.name img{
width: 30px;
height:30px;
object-fit: contain;
}

.user-info-container p[data-temp] {
font-size:2.75rem;
font-weight:700;
}

.parameter-container{
width:90%;
display: flex;
gap: 10px 20px;
justify-content: center;
align-items: center;
margin-top: 2rem;
}

.parameter{
width:30%;
max-width:200px;
background-color: rgba(219, 226, 239, 0.5);;
border-radius: 5px;
 20

padding:1rem;
display: flex;
flex-direction: column;
gap:5px 0;
/* justify-content: space-between; */
align-items: center;
}

.parameter img{
width:50px;
height:50px;
}

.parameter p:first-of-type{
font-size: 1.15rem;
font-weight:600;
text-transform: uppercase;
}

.parameter p:last-of-type{
font-size: 1rem;
font-weight: 200;
}

.form-container{
display: none;
width:90%;
max-width:550px;
margin:0 auto;
justify-content: center;
align-items: center;
gap: 0 10px;
margin-bottom: 3rem;
}

.form-container.active{
display: flex;
}
 21

.form-container input{
all:unset;
width: calc(100% - 80px);
height:40px;
padding: 0 20px;
background-color:rgba(219, 226, 239, 0.5);
border-radius: 10px;
}

.form-container input::placeholder{
color: rgba(255, 255, 255, 0.7);
}

.form-container input:focus{
outline: 3px solid rgba(255, 255, 255, 0.7);
}

.form-container .btn {
padding:unset;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 100%;
margin-bottom:1px;
}
 22

CHAPTER 4

SNAPSHOT OF THE PROJECT

Figure 2:- Home page

 23

Figure 3:- Search Weather

Figure : Output
 24

CHAPTER 5

CONCLUSION

The development of our e-commerce website catering to men's and women's fashion, jewelry, and
electronics using HTML, CSS, and ReactJS technologies marks a significant milestone in providing
a seamless and engaging online shopping experience.
Through the thoughtful integration of HTML and CSS, we have crafted a visually appealing and
user-friendly interface, ensuring a smooth navigation process for our customers. The use of ReactJS
has further elevated the website's performance, enabling dynamic and responsive features that
enhance the overall user experience.
Our commitment to offering a diverse range of products, spanning from trendy fashion items to
exquisite jewelry and cutting-edge electronics, reflects our dedication to meeting the varied needs
and preferences of our customers.
The website's robust architecture not only ensures a secure and reliable platform but also facilitates
easy scalability to accommodate future growth and evolving technological trends. The incorporation
of ReactJS has not only enhanced the website's interactivity but also contributed to faster loading
times and seamless transitions between pages.
As we move forward, we remain committed to staying abreast of technological advancements to
continually enhance our e-commerce platform. We appreciate the support and feedback from our
users, and we are dedicated to incorporating these insights to provide an even more tailored and
satisfying shopping experience.

My HTML, CSS, and ReactJS-powered e-commerce website stands as a testament to our pursuit of
excellence in delivering a modern, efficient, and enjoyable online shopping destination for all our
customers. We look forward to the continued growth of our platform and the satisfaction of our
valued users.
 25

REFERENCES

[1] www.tutorialspoint.com

[2] https://www.w3schools.com/HTML&CSS

[3] www.codecademy.com