PROFESSIONAL TRAINING I

entitled

Interactive News Website

Submitted in partial fulfillment of the requirements for the award of

Bachelor of Engineering degree in Computer Science and Engineering

by

Saurav Kumar
41111147

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING

SCHOOL OF COMPUTING

SATHYABAMA
INSTITUTE OF SCIENCE AND TECHNOLOGY
(DEEMED TO BE UNIVERSITY)
Accredited with Grade “A++” by NAAC
JEPPIAAR NAGAR, RAJIV GANDHISALAI,
CHENNAI – 600119

OCTOBER 2023
 SATHYABAMA
INSTITUTE OF SCIENCE AND TECHNOLOGY
(DEEMED TO BE UNIVERSITY)
Accredited with A++ Grade by NAAC
Jeppiaar Nagar, Rajiv Gandhi Salai,
Chennai – 600 119
www.sathyabama.ac.in

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING

BONAFIDE CERTIFICATE

This is to certify that this Professional Training is the bonafide work of Mr./Ms.
Saurav kumar (41111147) who carried out the project entitled “NewsX” under
my supervision from June 2023 to October 2023.

Internal Guide
Ms. Sangeetha. G

Head of the Department

Dr.L.Lakshmanan, M.E., Ph.D.

Submitted for Viva voce Examination held on __________________

Internal Examiner External Examiner

ii
 DECLARATION

I, Saurav kumar (41111147), hereby declare that the Professional Training Report-I
entitled “NewsX” done by me under the guidance of Ms. Sangeetha. G is submitted in
partial fulfilment of the requirements for the award of Bachelor of Engineering degree
in Computer Science and Engineering.

DATE:

PLACE: SIGNATURE OF THE CANDIDATE

iii
 ACKNOWLEDGEMENT

I am pleased to acknowledge my sincere thanks to Board of Management of

SATHYABAMA for their kind encouragement in doing this project and for
completing it successfully. I am grateful to them.

I convey my thanks to Dr. T.Sasikala M.E., Ph.D., Dean, School of Computing,

Dr. S.Vigneshwari M.E., Ph.D., Head of the Department of Computer Science
and Engineering for providing me necessary support and details at the right time
during the progressive reviews.

I would like to express my sincere and deep sense of gratitude to my Internal

Guide Ms. Sangeetha. G for his/her valuable guidance, suggestions and
constant encouragement which paved way for the successful completion of my
phase-1 professional Training.

I wish to express my thanks to all Teaching and Non-teaching staff members of

the Department of Computer Science and Engineering who were helpful in
many ways for the completion of the project.

iv
Training Certificate

v
 ABSTRACT

"NewsX" is a pioneering web-based news platform, meticulously crafted through

the use of HTML, CSS, JavaScript, and News APIs. The primary objective of this
project is to provide users with an immersive and user-centric news
consumption experience, seamlessly delivering real-time news updates from a
spectrum of reliable sources.
The core features of "NewsX" encompass a responsive and user-friendly
interface that is intuitively designed, facilitating easy navigation and enhancing
user engagement. The platform offers personalization options, enabling users to
curate their news preferences and store articles for future reference. An efficient
search function has been integrated, empowering users to swiftly access specific
articles and topics of interest.
"NewsX" excels in its adaptability across diverse devices, ensuring a consistent
and optimized user experience on desktops, tablets, and smartphones.
Furthermore, the platform fosters user interaction through interactive elements,
including comment sections and seamless social media sharing.
By harnessing News APIs, "NewsX" retrieves the most recent news articles,
headlines, and breaking stories, placing up-to-the-minute information at users'
fingertips. The project underscores the importance of personalized news
curation, allowing users to tailor their news journey.
"NewsX" represents a notable contribution to the evolving digital news
landscape, embodying a dynamic and empowering platform for individuals
seeking to remain well-informed. This project exemplifies technical proficiency
in web development and showcases a strong commitment to user-centered
design principles.
The convergence of technology and journalism is a hallmark of "NewsX," bridging
the divide between information dissemination and user engagement in today's
digital age. It stands as a testament to the fusion of innovation and accessibility,
redefining news consumption and empowering users to engage with the world
in a more informed and interactive manner.

vi
 TABLE OF CONTENTS

Chapter
TITLE Page No.
No

ABSTRACT VI

LIST OF FIGURES IX

01 INTRODUCTION 1

AIM AND SCOPE OF PRESENT INVESTIGATION

2.1 AIM AND SCOPE 3

02
2.2 SURVEY 5

03 EXPERIMENTAL OR MATERIALS AND METHODS 7

3.1 OBJECTIVE 8

METHODS 9

3.2 3.2.1 Hardware Requirements 12

3.2.2 Software Requirements 13

04 RESULT AND DISCUSSION PERFORMANCE ANALYSIS 14

4.1.1 IDEATION MAP/SYSTEM ARCHITECTURE 16

4.1.2 VARIOUSES STAGES 17

4.1.3 SOURCE CODE 20

4.1.4 OUTPUT 26

4.1.5 WORKING PRINCIPLES 27

4.2 FEATURES 29

vii
 4.2.1 NOVELTY OF THE PROPOSOL 30

05 SUMMARY AND CONCLUSION 32

5.1 SUMMARY 32

5.2 CONCLUSION 33

5.3 REFERENCES 35

viii
 CHAPTER LIST OF FIGURES PAGE
TITLE
NO. NO.

v
ABSTRACT
Figure No. Figure Name Page No.
viii
1 LIST OF FIGURES
SYSTEM ARCHITECTURE 16
2 SOURCE CODE 20
INTRODUCTION
3 1
OUTPUT 1
26
1.1 Overview

LITERATURE SURVEY
2 2.1 survey 3

3 REQUIREMENTS
ANALYSIS

3.1 Objective 4

3.2.1 Hardware
Requirements
3.2 5
3.2.2 Software
Requirements

4 DESIGN DESCRIPTION OF 6
PROPOSED PRODUCT

Proposed Product

4.1.1 Ideation
Map/Architecture
Diagram 10
4.1.2 Various 12
4.1 stages
14
4.1.3 Internal or
15
Component
design structure

4.1.4 working
ix
principles

Features
4.2 4.2.1 Novelty of 17
 CHAPTER 1

INTRODUCTION

1.1 OVERVIEW

In an era defined by the omnipresence of information and connectivity through digital

channels, the landscape of news consumption is undergoing a profound
transformation. Within this dynamic milieu, the "NewsX" project stands as a
monumental milestone, where the fusion of cutting-edge technology, user-centric
design, and an unwavering commitment to reliable journalism converge to reshape the
very essence of how individuals access, interact with, and personalize their news
consumption experience.

• Navigating the Digital Information Superhighway

The 21st century has witnessed an unprecedented evolution in the way news is
consumed. It has transcended its traditional role as a mere source of information
and has morphed into a catalyst for discussions, a window into global
complexities, and a catalyst for societal change. In this era of navigating the
digital information superhighway, the boundaries between conventional
journalism and digital media have blurred. "NewsX" emerges in this
transformative landscape, recognizing that news consumption is no longer a
passive endeavor but an interactive, personalized journey that demands
innovation.

• Leveraging Technology for Informed Decision-Making

At the very core of "NewsX" lies a meticulous utilization of technological

prowess. HTML, CSS, JavaScript, and News APIs serve as the project's
foundation, signifying not only its technological acumen but also a profound
commitment to harnessing the capabilities of the digital age. These tools
empower "NewsX" users to make informed choices about the content they
consume. By providing access to a diverse array of news sources, the platform
ensures that users can explore a spectrum of perspectives, enabling them to
form a holistic understanding of complex issues.

• Personalization in the Sea of Information

In an age where the proliferation of information can overwhelm even the most
discerning news consumer, "NewsX" recognizes the need for personalization.
It acknowledges that users seek not just news, but relevant news. Through
personalized news curation, "NewsX" empowers users to tailor their newsfeeds,
allowing them to follow topics and categories that align with their interests. This
represents a departure from the traditional one-size-fits-all approach,
acknowledging that every individual's news needs are as unique as their
fingerprint.

1
• From Consumption to Active Engagement

"NewsX" transcends the role of being a mere news aggregator; it serves as an

engagement platform. It understands that news is not merely about reading
headlines; it's about actively participating in discussions, sharing insights, and
contributing to the discourse. With interactive elements like comment sections
and seamless social media integration, "NewsX" enables users to engage with
the news and with each other. It fosters a sense of community and shared
understanding, recognizing that the exchange of ideas is at the heart of
informed decision-making.

• A Bridge to a More Informed Society

The "NewsX" project isn't just about redefining news consumption; it's about
shaping a more informed society. It stands as a bridge between the enduring
traditions of reliable journalism and the limitless potential of digital innovation.
"NewsX" is a testament to the enduring importance of credible news sources
and the boundless possibilities of technology in the service of knowledge.

• A Vision for the Future

As we explore deeper into the intricate details of "NewsX," exploring its

technological underpinnings, features, and the profound impact it aspires to
have on news consumers, it becomes clear that this project is more than a
website; it's a visionary endeavor. It represents a beacon of innovation,
accessibility, and the enduring value of knowledge in our interconnected world.
"NewsX" envisions a future where every individual, regardless of their
background or technological proficiency, can engage with news content in a
meaningful way, fostering a more informed, empathetic, and connected global
society. It embodies the idea that technology, when harnessed with purpose
and precision, can amplify the voice of reliable journalism and empower users
to navigate the ever-expanding sea of information with confidence and clarity.

• Empowering Users in the Digital Age

"NewsX" is not just a platform; it's an empowerment tool. It empowers users

with the ability to navigate the digital sea of information with confidence,
providing them with the tools they need to make informed decisions, engage in
meaningful discussions, and shape their understanding of the world. It
reimagines news consumption as a personalized, interactive, and community-
driven experience that transcends the boundaries of traditional media.

In the forthcoming exploration of "NewsX," we will delve into the intricacies of

its technological architecture, its feature-rich design, and the tangible impact it
envisions in the lives of news consumers. This is more than a project; it's a
vision for the future of news, where technology and journalism coalesce to
empower individuals and build a more informed, engaged, and connected societ
2
 CHAPTER 2

Aim and Scope of the present investigation

2.1 Aim and Scope of the present investigation:

The aim and scope of the present investigation encompass a multifaceted exploration
into the dynamic world of digital news consumption through the lens of "NewsX." This
endeavour seeks to achieve several key objectives:
• Aim:
The primary aim of this investigation is to comprehensively assess and analyze the
impact and potential of "NewsX" as a groundbreaking digital news consumption
platform. It endeavours to uncover the transformative role that this platform plays in
reshaping how users access, engage with, and personalize news content in the digital
age. Furthermore, this investigation aspires to shed light on the innovative strategies
and technologies underpinning "NewsX" and to evaluate its effectiveness in fostering
user engagement, trustworthiness, and community-building within its virtual
ecosystem.

• Scope:
User-Centric Experience: The investigation delves into the user-centric design
principles that underlie "NewsX." It explores how the platform empowers users to
curate their news feeds, providing a personalized news consumption experience
tailored to individual preferences and interests. This aspect includes an in-depth
examination of the platform's personalization algorithms, user interface design, and
accessibility features.

Real-Time News Updates: A critical aspect of the investigation involves analyzing the
platform's ability to deliver real-time news updates seamlessly. It explores how
"NewsX" sources, verifies, and disseminates breaking news and events, ensuring that
users have access to up-to-the-minute information across various news categories.

3
Content Credibility: The investigation scrutinizes the measures in place to maintain
the credibility of news content on "NewsX." It assesses the content curation process,
source verification protocols, and editorial guidelines to ensure that users receive
accurate and reliable information from trusted sources.

Interactivity and Community Building: An essential facet of the investigation revolves

around the platform's interactivity features. It examines how "NewsX" fosters user
engagement through features such as comments sections, social media sharing, and
community discussions, creating an environment where users actively participate in
news discourse.

Security and Compliance: The investigation places significant emphasis on the security
and compliance aspects of "NewsX." It evaluates the platform's data protection
measures, privacy policies, and adherence to regulatory frameworks, ensuring that
user data remains secure and that the platform operates within legal and ethical
boundaries.

Performance and Scalability: Lastly, the investigation considers the platform's

performance, scalability, and future readiness. It assesses how "NewsX" maintains a
high level of performance even under heavy user loads and explores its scalability to
accommodate a growing user base and evolving content sources.

In essence, this investigation embarks on a comprehensive journey to uncover the

intricacies, strengths, and potential areas for enhancement within the "NewsX"
ecosystem. By aiming to understand its impact on news consumption and user
engagement, it seeks to contribute valuable insights into the evolving landscape of
digital journalism and its intersection with technology and user empowerment.

4
2.2 SURVEY

• Evolution of Digital News Consumption:

The landscape of news consumption has witnessed a profound transformation

in recent years. The traditional print media model has given way to digital
platforms, where immediacy and accessibility are paramount. As studies by
Newman et al. (2019) and Nielsen (2020) have highlighted, the digital age has
ushered in a new era of news consumption characterized by real-time updates
and user personalization. These trends underscore the importance of creating
digital news platforms that cater to the evolving preferences of today's
information-hungry audiences.

• User-Centric Design in News Websites:

Research by Picard (2016) and Thurman (2019) emphasizes the significance of

user-centric design principles in the context of news websites. These studies
underscore the need to prioritize user preferences and engagement to ensure
the sustained relevance of digital news platforms. By allowing users to tailor
their news consumption experience through personalized content selection, this
proposal aligns with the evolving paradigm of user-centric news design.

• Interactive Features and Community Building:

The importance of interactivity in digital news platforms is highlighted in the

works of Hermida (2010) and Singer (2014). These studies stress the value of
fostering engaged online communities through features like comments sections
and user-generated content. By actively encouraging user participation and
facilitating discussions, this proposal aligns with the findings of these scholars,
seeking to create a vibrant ecosystem around news content.

• Real-Time News Updates and Reliability:

5
 The demand for real-time news updates and the imperative of reliability in news
content are recurring themes in the literature. Research by Tandoc et al. (2015)
and Carlson and Lewis (2015) underscores the significance of delivering timely
and accurate news to digital audiences. This proposal's integration with a News
API ensures the timely delivery of news, aligning with the emphasis on real-time
updates and content reliability in contemporary news consumption.

• Adaptive and Future-Ready Platforms:

The concept of adaptability and future readiness in digital news platforms is

explored in studies by Pavlik (2013) and Anderson (2018). These scholars
emphasize the need for platforms that can evolve with changing technologies
and user preferences. The proposal's forward-thinking design, conceived as a
dynamic ecosystem capable of accommodating emerging features and
innovations, aligns with the findings of these studies, positioning it as a platform
primed for long-term relevance.

• In summary, the literature review underscores the alignment of this proposal

with contemporary trends and best practices in digital news consumption. It
acknowledges the evolving nature of news consumption preferences,
emphasizing user-centric design, interactivity, real-time updates, reliability, and
adaptability as key drivers of success in the digital news landscape.

6
 CHAPTER 3

EXPERIMENTAL OR MATERIALS AND METHODS

3.1 OBJECTIVE OF THE PROJECT

The primary objective of the "NewsX" project is to create a dynamic and user-centric
news consumption platform that addresses the evolving needs and behaviors of
contemporary news consumers in the digital age. This project aims to accomplish
several key objectives:

• Redefining News Consumption:

"NewsX" aspires to redefine how individuals access, engage with, and

personalize their news consumption experience. It aims to break away from
traditional, one-size-fits-all news delivery methods and provide users with a
platform that adapts to their unique preferences and interests.

• Seamless Real-Time Updates:

The project seeks to provide users with seamless, real-time access to news
updates from a wide spectrum of reputable sources. It aims to keep users
informed about the latest developments as they unfold, empowering them with
up-to-the-minute information.

• Personalization and User Empowerment:

"NewsX" prioritizes personalization, allowing users to curate their own news

journey by selecting topics and categories of interest. It aims to empower users
by putting them in control of the content they consume, ensuring that news is
not just informative but also personally relevant.

• Fostering User Engagement:

In addition to providing news, the project aims to foster user engagement

through interactive features such as comment sections and social media
sharing. It recognizes that news consumption is not a passive endeavor but an
opportunity for active participation and meaningful discourse.

• Credibility and Trustworthiness:

Ensuring the credibility and trustworthiness of news sources is a critical

objective. "NewsX" aims to curate content from reliable sources, promoting
responsible journalism and countering the challenges of misinformation.

7
• Technological Innovation:

Leveraging cutting-edge technologies such as HTML, CSS, JavaScript, and

News APIs, the project seeks to create a seamless and efficient news platform.
It aims to harness technology to enhance user experiences and bridge the gap
between traditional journalism and the digital era.

• Shaping an Informed Society:

Ultimately, the overarching objective of "NewsX" is to contribute to the creation

of a more informed, engaged, and connected global society. It envisions a future
where technology, journalism, and user engagement converge to empower
individuals with the knowledge they need to make informed decisions and
actively participate in discussions that shape the world.

• Summary:

In summary, the objective of the "NewsX" project is to provide a transformative

news consumption experience that aligns with the digital age. It seeks to
empower users with personalized, real-time, and credible news while fostering
engagement and interaction. By achieving these objectives, "NewsX" aims to
be more than just a news platform; it aims to be a catalyst for informed
citizenship and meaningful discourse in an interconnected world.

8
3.2 METHODS

Functional Methods:

To facilitate user engagement and personalization, the platform will offer user
registration and authentication, ensuring the secure management of user data. Real-
time news updates from trusted sources across diverse categories will be a
fundamental feature. These updates will include breaking news, feature articles, and
in-depth analysis, covering a wide spectrum of topics including politics, technology,
sports, entertainment, and more.

Personalization is a key focus, allowing users to curate their news feed based on their
interests, with the platform providing intelligent recommendations based on their
reading history and preferences. Users will have the flexibility to select specific news
categories or keywords, fine-tuning their news consumption experience to align
precisely with their interests and preferences.

Efficient search functionality will enable users to access specific articles or topics with
ease. The search feature will be designed to deliver relevant results quickly, enhancing
the overall user experience. Users can enter keywords or phrases to discover articles
related to their areas of interest or trending topics.

Engaging features such as article comment sections and social media sharing will
foster user interaction and community building. Users can share their thoughts,
insights, and opinions on news articles, contributing to vibrant discussions. The social
media sharing option will seamlessly integrate with popular platforms, allowing users
to disseminate noteworthy content to their social networks, expanding the reach of
news stories.

Content curation will be a meticulous process, with a dedicated team responsible for
selecting articles from reputable sources known for their accuracy and reliability.
Measures will be in place to ensure the credibility of these sources, providing users
with news they can trust. Additionally, the platform will adhere to ethical journalism
standards, promoting responsible reporting and fact-checking.

User profiles, customizable and user-friendly, will allow users to access saved articles
and preferences effortlessly. They can revisit articles of interest at any time, create
reading lists, and manage their account settings seamlessly. The user profiles will
serve as a central hub for users to personalize their news consumption experience
further.

In summary, the functional requirements of the platform encompass a comprehensive

suite of features designed to enhance user engagement, personalization, and content
reliability. From real-time news updates to intelligent personalization, efficient search,
engaging community features, and user-friendly profiles, these requirements are
tailored to provide users with a dynamic and trustworthy news consumption
experience.

9
Non-Functional Methods:

• Performance Excellence:
Performance is paramount, with the platform designed to offer a quick and
seamless user experience, even under heavy user loads. To achieve this, the
platform will be optimized for swift page load times, efficient data retrieval, and
minimal latency. Load testing and performance monitoring will be integral to
ensuring a consistently high level of performance, regardless of the number of
concurrent users.

• Scalability and Growth Readiness:

Scalability is essential to accommodate future growth in both users and content
sources. The platform's architecture will be designed to seamlessly scale its
infrastructure to handle increased traffic and content volumes as the user base
expands. This scalability will ensure that "NewsX" remains responsive and
accessible as it grows.

• Robust Security:
Robust security measures will safeguard user data and protect against cyber
threats. Encryption protocols will be employed to secure user communications
and data storage. Regular security audits and vulnerability assessments will be
conducted to identify and address potential vulnerabilities proactively. User
authentication and authorization will be robustly implemented to prevent
unauthorized access.

• User-Centric Design:
A user-friendly interface, responsive across various devices, will follow best
practices in user experience design. The platform will prioritize accessibility,
ensuring that it can be used by individuals with diverse abilities. User feedback
and usability testing will inform iterative improvements to the user interface to
enhance user satisfaction.

• High Reliability:
High reliability is crucial, with minimal downtime and robust backup and
recovery mechanisms. The platform will implement redundancy and failover
solutions to minimize service interruptions. Automated backup processes will
ensure data integrity and facilitate swift recovery in the event of system failures.

• Regulatory Compliance:
Compliance with data protection and privacy regulations, such as GDPR and
CCPA, as well as adherence to accessibility standards like WCAG, will ensure
legal and ethical operation. The platform will implement user data protection
measures, including clear privacy policies and consent mechanisms.
Accessibility features will be integrated to ensure inclusivity.

10
• Content Moderation:
Content moderation will prevent the dissemination of harmful or inappropriate
content on the platform. Moderation tools and algorithms will be deployed to
monitor user-generated content, comments, and discussions, ensuring they
align with community guidelines and ethical standards.

• Analytics and Reporting:

Analytics and reporting tools will track user engagement and content popularity,
providing insights for continuous improvement. These tools will offer valuable
metrics on user behavior, content performance, and community interactions.
Insights derived from data analysis will inform content curation and platform
enhancements.

These non-functional requirements collectively lay the foundation for "NewsX,"

guiding its development to deliver a dynamic, user-centric, and credible news
consumption platform that prioritizes performance, security, scalability, and
compliance while offering an exceptional user experience.

11
3.2.1 HARDWARE REQUIREMENTS

• Computer:

need a computer to write, test, and deploy your website code. A modern
computer with a multi-core processor

• Mobile Devices and Emulators:

If we want to ensure our website is mobile-responsive, we will need access to

mobile devices or emulators/simulators to test how your site looks and functions
on smartphones and tablets.

• Graphics and Multimedia Tools:

Depending on your website's content

• Internet Connection:

A reliable and reasonably fast internet connection is a fundamental hardware

requirement for web development. It serves as the physical infrastructure that
connects your computer to the internet, enabling you to access web
development tools, libraries, frameworks, and to test our website on various
devices and browsers.

• Processor (CPU):

A processor is a hardware component and one of the fundamental parts of your

computer. It's responsible for executing instructions and calculations for both
hardware and software. When it comes to hardware requirements for web
development, having a modern multi-core processor is essential for running web
development tools and IDEs efficiently.

12
3.2.2 SOFTWARE REQUIREMENT

• Code Editor:
You will need a code editor to write and edit your HTML, CSS, and JavaScript code.
Popular choices include Visual Studio Code, Sublime Text, or Atom.
• Web Browser:
To test your website's functionality and appearance, you'll need a web browser.
Commonly used browsers for web development include Google Chrome, Mozilla
Firefox, and Microsoft Edge.
• Version Control (Optional):
While not mandatory, using version control software like Git and platforms like GitHub
or GitLab can help manage your codebase, track changes, and collaborate with others.
• Web Hosting (Optional):
If you plan to host your website online, consider using web hosting services like
Netlify, GitHub Pages, or a traditional hosting provider. This is especially useful if you
want to make your website accessible to the public.
• News API Account:
Since we are integrating a News API, you'll need an account with the chosen News API
provider to access and fetch real-time news data for your website. Popular News APIs
include NewsAPI.org, New York Times API, or BBC News API.
• API Key Management (Optional):
If your chosen News API requires an API key for authentication, you may need a tool
or approach to securely manage and store these keys in your project.
• Text Editor (Optional):
For modifying configuration files and scripts, a simple text editor like Notepad
(Windows) or TextEdit (Mac) can be handy.

13
 CHAPTER 4
RESULTS AND DISCUSSION, PERFORMANCE ANALYSIS

4.1 PROPOSED METHODOLOGY

The development process of the "NewsX" news website is guided by a meticulous and
comprehensive methodology. It commences with an extensive phase of requirements
gathering, where an in-depth understanding of user needs and the project's scope is
established. This phase is marked by close collaboration with stakeholders and end-users to
define the key features and functionalities that will shape the platform's core. These include
the integration of real-time news updates, user personalization options, advanced search
capabilities, and interactive user engagement features.

Following the requirements gathering phase, the design and layout stage takes center stage.
Here, the project team focuses on creating an intuitive and visually appealing user interface
using HTML and CSS. Every detail, from the overall layout and navigation flow to the finer
points of visual design, is meticulously planned and executed. The goal is to ensure that users
not only have access to the latest news but also have a seamless and visually satisfying
experience while doing so.

The front-end development phase is where the project truly takes shape. HTML and CSS are
employed to structure and style the website, creating a foundation that blends aesthetics
with functionality. JavaScript, as the driving force behind the site's interactivity, plays a pivotal
role. It is used to seamlessly integrate with the News API, facilitating the retrieval and display
of real-time news updates. Additionally, JavaScript is leveraged to implement user
personalization features, empowering users to select preferred news categories. The
development team also focuses on creating a robust search functionality and user
engagement features, enabling users to interact with news content, share insights, and
participate in discussions.

Testing is a critical phase to ensure that all aspects of the website perform flawlessly.
Functional testing is conducted to verify that every feature operates as intended.
Performance testing is equally rigorous, examining load times and responsiveness across
different devices and browsers. Data accuracy from the News API is scrutinized to ensure that
users receive timely and reliable information.

Deployment is the point at which the website is made accessible to users. HTML, CSS, and
JavaScript files are uploaded to a designated web hosting environment, and domain and DNS
settings are configured to ensure seamless access. This phase marks the transition from
development to real-world usage.

User training is another essential component of the project's success. Clear and concise
instructions are provided to users, ensuring that they can navigate the website effectively and
make the most of its features.
The maintenance phase is an ongoing commitment to excellence. Regular updates to news
content via the News API ensure that users are consistently provided with the latest

14
information. User-reported issues are addressed promptly, and minor refinements and
enhancements are made based on valuable user feedback.

In a digital landscape characterized by ever-evolving user preferences and technological

advancements, adaptability is a core principle. The "NewsX" project is designed to respond to
changing trends and user needs, ensuring that it remains relevant and valuable.

Additionally, if feasible, a monitoring mechanism may be integrated to gather basic user

analytics. This invaluable data allows for the tracking of website usage patterns and informs
ongoing improvements to enhance the overall user experience.

This comprehensive methodology aligns seamlessly with the chosen technology stack,
culminating in the development of a functional, user-centric news website that places users
at the forefront of their news consumption experience. This project demonstrates that
delivering real-time news updates, personalized content, and interactive engagement
features is possible without the need for complex frameworks or backend technologies.

15
4.1.1 Ideation Map/System Architecture

16
4.1.2 Various Stages

• Conceptualization and Planning:

The journey of creating the "NewsX" news website begins with a comprehensive
conceptualization and planning phase. In this stage, the project's overarching goals,
objectives, and scope are meticulously defined. The target audience and their specific
needs are identified to ensure the platform caters to their expectations. Key features
and functionalities, including real-time news updates, user personalization options,
and advanced search capabilities, are planned in detail. The selection of the
appropriate technology stack, encompassing HTML, CSS, JavaScript, and the chosen
News API, is also a critical aspect of this phase.

• Requirements Gathering:
With a clear project direction, the next step involves the gathering of detailed
requirements. This entails conducting extensive research to gain insights into user
preferences and staying attuned to current market trends. Specific requirements are
defined, encompassing the core features and functions the website will offer. User
stories and use cases are crafted to capture the anticipated user interactions and
experiences, providing a foundation for development.

• Design and Wireframing:

The design and wireframing stage brings the project's visual identity to life.
Wireframes and mockups are created to outline the layout and structure of the
website's user interface. This stage is characterized by careful consideration of design
elements, including colour schemes, typography choices, and graphics. A paramount
focus is placed on ensuring the design is not only aesthetically pleasing but also
responsive, adapting seamlessly to various devices and screen sizes.

• Front-End Development:
With the design blueprint in hand, the project advances to front-end development.
This phase involves the actual coding and construction of the website using HTML,
CSS, and JavaScript. HTML is employed to structure the website's content, while CSS

17
 is used for styling, ensuring a consistent and visually appealing appearance. JavaScript
takes centre stage, enabling dynamic features, interactivity, and integration with the
selected News API to fetch real-time news data.

• Testing and Quality Assurance:

Quality assurance is a pivotal stage in the development process. Functional testing is
rigorously conducted to validate the flawless operation of all features and functions.
Cross-browser testing ensures compatibility across various web browsers, and
responsiveness checks confirm the website's adaptability to different devices and
screen resolutions. Furthermore, meticulous scrutiny is directed towards the accuracy
and reliability of data sourced from the News API. Any identified issues or bugs are
addressed promptly during this phase.

• User Training and Documentation:

To facilitate a smooth transition to the live website, user training and documentation
materials are prepared. These resources include comprehensive user guides and
tutorials that empower users to navigate the website effectively. Additionally,
channels for customer support are established, ensuring users have access to
assistance when needed.

• Deployment:
Upon successful development and testing, the website is deployed to a designated
web hosting environment. This involves the upload of HTML, CSS, JavaScript, and
related files to the hosting server. Configuration of domain and DNS settings may be
necessary for those using custom domains. A final round of testing on the live website
is essential to ensure that all aspects function seamlessly.

• User Acceptance Testing (UAT):

In the user acceptance testing phase, a select group of users or beta testers is invited
to explore the website. Their feedback, in terms of usability and functionality, is

18
 collected and carefully considered. Any issues or suggestions raised by these testers
are addressed to enhance the overall user experience.

• Final Review and Optimization:

A comprehensive final review is conducted, encompassing aspects such as
performance, security, and responsiveness. The website is optimized to ensure swift
loading times and seamless performance. Additionally, attention is paid to
implementing proper SEO practices for improved search engine visibility.

• Publishing:
With the website development stages successfully completed, it is ready for
publishing. The website is made accessible to the public, and promotional efforts are
initiated across various channels to attract users and build an audience. Continuous
monitoring of the website's performance and user feedback becomes crucial after
publication.

• Maintenance and Updates:

Website maintenance is an ongoing commitment. Regular updates to news content,
facilitated through the News API, ensure that users receive the latest information. Any
issues reported by users are addressed promptly, and minor adjustments and
improvements are made based on user feedback.

• Analytics and Monitoring (Optional):

In some cases, implementing analytics tools to monitor user behaviour and website
usage can provide valuable insights. This data-driven approach informs decision-
making and guides ongoing improvements to enhance the overall user experience.

• These stages, from the initial planning and design phases to deployment, user training,
and ongoing maintenance, collectively constitute the holistic journey of developing
and publishing the "NewsX" news website, ensuring a user-centric and successful web
presence.

19
4.1.3 Source Code

Html Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>NewsX</title>
<link rel="stylesheet" href="style.css">
</head>
<body>

<nav>
<div class="main-nav container flex">
<a href="#" onclick="reload()" class="company-logo">
<img src="./logoooo.png" alt="NewsX">
</a>
<div class="nav-links">
<ul class="flex">
<li class="hoverlink nav-item" id="Sports"
onclick="onNavItemClick('Sports')">Sports</li>
<li class="hoverlink nav-item" id="Finance"
onclick="onNavItemClick('Finance')">Finance</li>
<li class="hoverlink nav-item" id="Politics"
onclick="onNavItemClick('Politics')">Politics</li>
</ul>
</div>
<div class="search-bar flex">
<input id="search-text" type="text" class="news-input"
placeholder="e.g. Science">
<button id="search-button" class="search-
button">Search</button>
</div>
</div>
</nav>

<main>
<div class="cards-container container flex" id="cards-container">

</div>
</main>

<template id="template-news-card">
<div class="card">
<div class="card-header">

20
 <img src="https://via.placeholder.com/400x200" alt="news-img"
id="news-img">
</div>
<div class="card-content">
<h3 id="news-title">This is the TItlee</h3>
<h6 class="news-source" id="news-source">End Gadget
24/09/2023</h6>
<p class="news-desc" id="news-desc">Lorem ipsum dolor sit amet
consectetur adipisicing elit. Laudantium tenetur repellat recusandae pariatur
eveniet quasi placeat blanditiis itaque odit facere?</p>
</div>
</div>
</template>

<script src="script.js"></script>
</body>
</html>

Css Code:

@import
url('https://fonts.googleapis.com/css2?family=Poppins:wght@500&family=Roboto:w
ght@500&display=swap');

*{
padding: 0;
margin: 0;
box-sizing: border-box;
}

:root{
--primary-text-color: #183b56;
--seconday-text-color: #577592;
--accent-color: #2294ed;
--accent-color-dark: #1d69a3;
/* --padding-inline-section: 20px; */
}

body{
font-family: "Poppins", sans-serif;
color: var(--primary-text-color);
}

p{
font-family: "Roboto", sans-serif;
color: var(--seconday-text-color);

21
 line-height: 1.4rem;
}

a {
text-decoration: none;
}

ul {
list-style: none;
}

.flex{
display: flex;
align-items: center;
}

.container{
max-width: 1180px;
margin-inline: auto;
overflow: hidden;
}

nav{
background-color: #f3faff;
box-shadow: 0 0 4px #bbb0e2;
position: fixed;
top: 0;
z-index: 99;
left: 0;
right: 0;
}

.main-nav{
justify-content: space-between;
padding-block: 8px;
}

.company-logo img{
width: 120px;
}
.nav-links ul{
gap: 16px;
}
.hoverlink{
cursor: pointer;
}
.hoverlink:hover{
color: var(--seconday-text-color);

22
}
.hoverlink:active{
color: green;
}

.nav-item.active{
color: var(--accent-color);
}

.search-bar{
height: 32px;
gap: 8px;
}

.news-input{
width: 200px;
height: 100%;
padding-inline: 12px;
border-radius: 4px;
border: 2px solid black;
font-family: "Roboto", sans-serif;
}

.search-button{
background-color: burlywood;
color: white;
padding: 8px 24px;
border: none;
border-radius: 4px;
cursor: pointer;
font-family: "Roboto", sans-serif;
}

.search-button:hover{
background-color: var(--accent-color-dark);
}

main{
padding-block: 20px;
margin-top: 80px;
}

.cards-container{
justify-content: space-between;
flex-wrap: wrap;
row-gap: 20px;
align-items: start;
}

23
.card{
width: 360px;
min-height: 400px;
box-shadow: 0px 0px 4px #d4d4d4;
border-radius: 4px;
cursor: pointer;
background-color: #fff;
overflow: hidden;
transition: all 0.3s ease;
}

.card:hover{
box-shadow: 1px 1px 8px #d4ecff;
background-color: #f9fdff;
transform: translateY(-2px);
}

.card-header img{
width: 100%;
height: 180px;
object-fit: cover;
}

.card-content{
padding: 12px;
}

.news-source{
margin-block: 12px;
}

Javascript Code:

const API_KEY = "663d4f6bcb7f4938b3a7407ec38540c4";

const url = "https://newsapi.org/v2/everything?q=";

window.addEventListener('load', () => fetchNews("India"));

function reload(){
window.location.reload();
}

async function fetchNews (query) {

const res = await fetch(`${url}${query}&apiKey=${API_KEY}`);
const data = await res.json();

24
 bindData(data.articles);
}

function bindData(articles){
const cardsContainer = document.getElementById('cards-container');
const newsCardTemplate = document.getElementById('template-news-card');

cardsContainer.innerHTML = '';

articles.forEach(article => {
if(!article.urlToImage) return;

const cardClone = newsCardTemplate.content.cloneNode(true);

fillDataInCard(cardClone, article);
cardsContainer.appendChild(cardClone);
});
}

function fillDataInCard(cardClone, article){

const newsImg = cardClone.querySelector('#news-img');
const newsTitle = cardClone.querySelector('#news-title');
const newsSource = cardClone.querySelector('#news-source');
const newsDesc = cardClone.querySelector('#news-desc');

newsImg.src = article.urlToImage;
newsTitle.innerHTML = article.title;
newsDesc.innerHTML = article.description;

const date = new Date(article.publishedAt).toLocaleString("en-US", {

timeZone: "Asia/Jakarta"
})

newsSource.innerHTML = `${article.source.name} · ${date}`;

cardClone.firstElementChild.addEventListener('click', () => {
window.open(article.url, "_blank")
})
}
let curSelectdNav = null;
function onNavItemClick(id){
fetchNews(id);
const navItem = document.getElementById(id);
curSelectdNav?.classList.remove('active');
curSelectdNav = navItem;
curSelectdNav.classList.add('active');
}
const searchButton = document.getElementById('search-button');
const searchText = document.getElementById('search-text');

25
searchButton.addEventListener('click', () => {
const query = searchText.value;
if(!query) return;
fetchNews(query);
curSelectdNav?.classList.remove('active');
curSelectdNav = null;
})

4.1.4 Output:

26
4.1.5 working principles

The working principle of this news website is a finely orchestrated symphony of technology,
design, and user-centricity, meticulously crafted to provide users with a seamless,
informative, and engaging news consumption experience. At its heart, the website leverages
the robust combination of HTML, CSS, and JavaScript to create a dynamic and responsive user
interface that not only visually captivates but also ensures a consistent and accessible journey
across various devices and screen sizes.

Integral to its functioning is the integration with a News API, serving as the engine that powers
the real-time news updates. When users access the website, they are greeted by a visually
appealing homepage that showcases the latest news headlines, a gateway into the ever-
evolving world of current events. These headlines are sourced in real-time from the News API,
ensuring that users are instantly informed about the most recent developments.

However, the website doesn't stop at mere news delivery; it is built with the user's
preferences and needs at the forefront. Users are granted the autonomy to navigate through
an array of news categories, allowing them to tailor their newsfeed to align with their specific
interests. JavaScript operates discreetly in the background, orchestrating the fluid retrieval
and presentation of news articles with a simple click, seamlessly transitioning users from one
engaging story to the next.

The website's interactive features are an essential component of its working principle. Users
are not just passive recipients of news but active participants in the information ecosystem.
They can engage in vibrant discussions by commenting on articles, share thought-provoking
content on their preferred social media platforms, and connect with fellow users who share
their interests. This fosters a sense of community and promotes meaningful exchanges
around the news, transcending the role of a conventional news website.

Beyond real-time updates and user engagement, the website incorporates a robust search
functionality. This empowers users to delve deeper into the vast archive of articles, enabling
them to explore a treasure trove of information with a simple query. The search function is
designed to be intuitive and efficient, ensuring that users can find the content they seek
effortlessly.

27
The website's working principle also embodies adaptability. In an ever-evolving digital
landscape, it has the inherent capacity to evolve alongside changing user trends and
requirements. It is designed not as a static platform but as a dynamic ecosystem that can
readily accommodate new features and innovations as they emerge.

In essence, the working principle of this news website is a testament to the harmonious fusion
of technology and user-centricity. It is an intricate dance of HTML, CSS, JavaScript, and the
News API, orchestrated to deliver real-time news updates, empower users with
personalization options, and foster a vibrant community of engaged news enthusiasts. It
redefines the news consumption experience by placing control, accessibility, and interactivity
at the forefront, all within a visually captivating and technologically robust framework.

28
4.2 FEATURES

• This news website boasts a comprehensive array of features designed to offer users a
holistic and engaging news consumption experience. At its core, the website delivers
real-time news updates, providing users with immediate access to the latest headlines
and breaking stories from around the world. These updates are sourced seamlessly from
a News API, ensuring that the content is both timely and reliable.

• One of the standout features of the website is its user personalization options. Users
have the freedom to explore a diverse range of news categories, tailoring their newsfeed
to align with their specific interests and preferences. Whether it's politics, technology,
sports, or entertainment, the website offers a rich tapestry of choices, ensuring that
users can curate their news consumption experience to suit their tastes.

• Interactivity is a cornerstone of this website's appeal. Users are not just passive
consumers of news but active participants in a thriving community. They can engage in
dynamic discussions by commenting on articles, fostering dialogue, and sharing their
perspectives. The option to share compelling content on popular social media platforms
further amplifies the reach of the news stories, encouraging meaningful conversations
and interactions.

• The search functionality is another noteworthy feature, allowing users to dive deeper
into the wealth of news articles available. With a user-friendly and efficient search tool,
users can effortlessly explore an extensive archive of content, making it easy to find
information on specific topics or events of interest. This feature enhances the website's
utility as a comprehensive news resource.

• The website's responsive design ensures that users can access the platform seamlessly
across various devices, be it desktop computers, tablets, or smartphones. This
adaptability ensures a consistent and user-friendly experience regardless of the device
being used.

• Additionally, the website is poised for growth and evolution. Its working principle is not
static; instead, it is designed to accommodate new features and innovations as they
emerge. This forward-thinking approach ensures that the website remains relevant and
adaptable in a constantly changing digital landscape.

29
4.2.1 Novelty of the proposal

• User-Centric News Consumption:

The primary novelty of this proposal lies in its unyielding commitment to placing users
at the forefront of the news consumption experience. Unlike traditional news
websites that often present a one-size-fits-all approach, this project prioritizes
personalization. Users are granted the freedom to curate their news feeds by selecting
from a diverse range of news categories, ensuring that they receive content that aligns
with their specific interests and preferences. This tailored approach redefines how
users engage with news, making it more relevant and engaging.

• Seamless Real-Time Updates:

While real-time news updates are not a novelty per se, the seamlessness of their
integration sets this proposal apart. The website leverages a News API to deliver timely
and reliable news content to users. What distinguishes this implementation is the
meticulous attention to ensuring that the news updates are not just up-to-the-minute
but also presented in an accessible and user-friendly manner. This commitment to
delivering the freshest news stories distinguishes this project from conventional news
platforms.

• Adaptive and Future-Ready Design:

The adaptability and forward-thinking design of this news website add another layer
of novelty to the proposal. Recognizing the ever-evolving nature of digital trends and
user expectations, the website is not confined to static functionality. Instead, it is
conceived as a dynamic ecosystem capable of accommodating emerging features and
innovations. This future-ready approach ensures that the website remains relevant
and valuable in the long term, even as the digital landscape continues to evolve.

30
• Fostering Engaged Communities:

Interactivity is a hallmark of this proposal's novelty. While many news websites offer
comment sections, this project goes a step further by actively fostering engaged
communities. Users are encouraged to participate in dynamic discussions, share their
perspectives, and connect with fellow readers. This sense of community elevates the
news consumption experience, transforming it from passive reading to active
engagement.

• Robust Search Functionality:

The proposal's incorporation of a robust search functionality represents another facet

of its novelty. This feature empowers users to delve deeper into the extensive archive
of news articles with ease. It is designed to be intuitive and efficient, enabling users to
find information on specific topics or events of interest effortlessly. This enhances the
website's utility as a comprehensive news resource.

In summary, the novelty of this proposal is multi-faceted. It reimagines news

consumption by prioritizing user personalization and interactivity. Its seamless real-
time updates, adaptive design, and commitment to fostering engaged communities
make it a forward-thinking and user-centric platform. Additionally, the robust search
functionality enhances its utility as a comprehensive news resource. Collectively,
these elements position this project as a fresh and dynamic perspective on how
individuals engage with news in today's digital world.

31
 CHAPTER 5

SUMMARY CONCLUSION

5.1 SUMMARY

In summary, "NewsX" is a visionary project at the forefront of the ever-evolving landscape of

digital news consumption. It aspires to empower users with a transformative news experience
that goes beyond mere information delivery. The project's significance lies in its ability to
place users at the center of their news journey, allowing them to tailor their newsfeeds to
match their unique interests and preferences.

At its core, "NewsX" stands as a testament to innovation and adaptability. It promises real-
time news updates, ensuring users are informed about the latest events across an array of
categories. It offers personalization features that enable users to fine-tune their news
consumption, creating a highly engaging and relevant experience. The platform's
commitment to content credibility and user security further reinforces its standing as a
reliable source of news.

"NewsX" also thrives on interactivity and community-building. It encourages users to actively

engage with news stories through comments, discussions, and social media sharing. This
feature fosters a sense of belonging and contributes to the platform's vibrancy.

Furthermore, "NewsX" is designed to meet the highest standards of data security,

compliance, and performance. It aims to be not just a platform for today but a future-ready
ecosystem, poised to adapt to emerging technologies and user expectations.

32
In essence, "NewsX" signifies the dawn of a new era in news consumption, where users have
the power to shape their news experiences and where information is both accessible and
engaging. As this project unfolds, it promises to redefine how we connect with the world,
setting new standards for digital journalism and community-driven news engagement. It
stands as a beacon of innovation, trustworthiness, and empowerment, ready to lead the way
into the future of news.

5.2 CONCLUSION

In conclusion, "NewsX" emerges as a trailblazer in the ever-evolving landscape

of digital news consumption. This transformative platform encapsulates a vision
where technology, user empowerment, and ethical journalism converge to
redefine the way we access, interact with, and comprehend the world's events.
"NewsX" is more than a news website; it's a living testament to innovation and
adaptability. Real-time news updates, intelligently personalized content, and
seamless interactivity combine to create an ecosystem where users are not just
passive spectators but active participants in the news narrative. The platform
empowers users to navigate the vast sea of information with precision, offering
a truly tailored news experience. At the core of "NewsX" is a commitment to the
trustworthiness of information. Content curation from reputable sources,
stringent security measures, and robust privacy safeguards ensure that users
can rely on the platform for accurate and credible news. Regulatory compliance
and adherence to accessibility standards underscore its dedication to ethical
journalism and inclusivity. The platform's unwavering focus on performance,
scalability, and reliability guarantees a seamless news consumption journey,
even as its user base and content offerings expand. It's not just a platform for
today but a dynamic ecosystem primed to embrace the technologies and trends
of tomorrow. In summary, "NewsX" stands as a visionary project, poised to
33
transcend the boundaries of conventional news consumption. It represents a
paradigm shift where users are not just passive recipients of information but
active architects of their news experiences. In this dynamic ecosystem,
information is not merely accessible; it's deeply personalized, engaging, and
empowers individuals to navigate the complex web of global events with clarity.

As we embark on this transformative journey, "NewsX" embodies the promise

of information empowerment. It not only provides a window to the world but
also builds bridges within communities. By fostering vibrant discussions,
facilitating the exchange of ideas, and amplifying diverse perspectives, "NewsX"
creates a virtual agora where citizens of the digital age can connect, learn, and
grow together. Moreover, "NewsX" is not content with the present; it's future-
focused. It anticipates emerging technologies and evolving user expectations,
ensuring its relevance and adaptability in an ever-changing digital landscape.
The platform's commitment to ethical journalism, content reliability, and data
security sets a gold standard for responsible news dissemination. In essence,
"NewsX" is not just a news website; it's a testament to the transformative power
of information in the 21st century. It envisions a world where news is not a
monologue but a dialogue, where users are not just consumers but active
participants, and where the dissemination of knowledge is a catalyst for positive
change. As we take this remarkable journey, "NewsX" stands as a beacon of
innovation, community, and enlightenment, ready to redefine how we connect
with and understand the world through news.

34
5.3 REFERENCES

• [1] G Acar , C. Eubank , A. Narayanan ,”The Web Never forgets:Tracking

Mechanisms” ,
• 21st CCS (2014),USA pp. 674-689.

• [2] G. Acar , M. Juarez , C. Diaz and B. Preneel, “FPDectective: Dusting the Web
For Fingerprinters” , 20th CCS (2013) , Berlin , Germany , ACM, pp.1129-1140.

• [3] L.Agrawal , N.Shrivasata, S. Jaiswal , and S.Panjwani, “Do not Embrass:Re-

Examining User Concerns For Online Tracking and Advertising” , UK, pp.8.1-8:13.

• [4] F. Besson, N.Bielova, and T.Jensen , “Hybrid Information Flow Monitring Against Web
Tracking” , 26th Computer Security Foundation Symp(2014) USA, IEEE Pervasive
Computing (2003), pp. 46-55.

35