CODING SHUTTLE NEWS: API

BASED NEWS WEBSITE

AN INDUSTRIAL TRAINING PROJECT REPORT

AT

OPEN WEAVER

SUBMITTED IN PARTIAL FULFILLMENT OF THE REQUIREMENTS FOR THE

AWARD OF THE DEGREE OF

BACHELOR OF TECHNOLOGY

IN

COMPUTER SCIENCE ENGINEERING

SUBMITTED BY
Kamran Rafiq 21-B-CSE-055

SCHOOL OF ENGINEERING

RIMT UNIVERSITY, MANDIGOBINDGARH PUNJAB

NOVEMBER-2023

i
 CODING SHUTTLE NEWS: API
BASED NEWS WEBSITE
AN INDUSTRIAL TRAINING PROJECT REPORT

AT

OPEN WEAVER

SUBMITTED IN PARTIAL FULFILLMENT OF THE REQUIREMENTS FOR THE

AWARD OF THE DEGREE OF

BACHELOR OF TECHNOLOGY

IN

COMPUTER SCIENCE ENGINEERING

SUBMITTED BY
Kamran Rafiq 21-B-CSE-055

SCHOOL OF ENGINEERING

RIMT UNIVERSITY, MANDIGOBINDGARH PUNJAB

November-2023
 CANDIDATE’S DECLARATION

I hereby certify that the project entitled “Coding Shuttle News: an API based news
website” submitted by Kamran Rafiq (21-B-CSE-055) in partial fulfilment of the
requirement for the award of degree of the B. Tech. (Computer Science & Engineering)
submitted in Department of Computer Science & Engineering, at RIMT University,
Mandi Gobindgarh is an authentic record of my own work carried out during a period
from June 2023 to July 2023. The matter presented in this project has not formed the
basis for the award of any other degree, diploma, fellowship or any other similar titles.

Signature of the Student :

Place:

Date:

The Institutional/Software training/Industrial training/ Major project Viva–Voce

Examination of__________________ has been held on ____________ and accepted.

Signature of Internal Examiner Signature of HOD

Signature of External Examiner

 CERTIFICATE

This is to certify that the project titled ““Coding Shuttle News : an API based news
website” is the bona fide work carried out by Kamran rafiq & 21-B-CSE-055 in partial
fulfilment of the requirement for the award of degree of the B. Tech. (Computer Science
& Engineering) submitted in Department of Computer Science & Engineering, at RIMT
University, Mandi Gobindgarh is an authentic record of my own work carried out during
a period from June 2023 to July 2023 under the guidance of Asst. Prof. Mr. Jasdeep Singh,
Department of Computer Science & Engineering.

Signature of the Guide Signature of HOD

Department of Computer Science & Engineering

 TABLE OF CONTENTS

TITLE Page no

Abstract i
Acknowledgement ii

About Company/Industry/Institute iii

Certificate iv

Chapter 1: INTRODUCTION 1-3

1.1 Overview 1

1.2 Working of any website 3

Chapter 2: OBJECTIVES 4-5

2.1 Project overview 4

2.2 Project objectives 5

Chapter 3: REQUIREMENTS FOR THE PROJECT 6-12

3.1 Requirement of Technologies 6

3.2 Requirement Of API 8

3.3 Requirements Of Hardware 9

3.2 Requirements Of Software 11

Chapter 4: RESEARCH AND METHODOLOGY 13-14

4.1 Design 13

4.2 Block Diagram of API Based Website 14

Chapter 5: DEVELOPMEMNT AND CODING 15-23

5.1 Implementation Of HTML 15

5.2 Implementation Of CSS 17

5.3 Connecting NEWS API 20

5.4 JAVASCRIPT Code for Fetching API 22

5.5 HTML Template 23

Chapter 6 RESULT AND DISCUSSION 24-27

Chapter 7 CONCLUSION 28-29

REFERENCES 30
 ABSTRACT
The aim of the project Coding Shuttle News, a dynamic news aggregation platform that
harnesses the power of News API to provide users with a streamlined and diverse news-
consuming experience. Coding Shuttle News Website aims to redefine how individuals
access and engage with news content, offering a comprehensive and user-friendly
interface that curates information from various credible sources worldwide.
The platform leverages the extensive capabilities of News API, enabling real-time
updates and a vast array of news categories, including politics, technology,
entertainment, health, and finance. Key features include a clean and intuitive user
interface, enabling seamless navigation and exploration of trending topics. The platform
also emphasizes inclusivity by presenting news stories from diverse viewpoints and
sources, promoting a well-rounded understanding of global events.
By amalgamating the power of News API with a user-centric design, this website strives
to be the go-to platform for individuals seeking an efficient, diverse, and personalized
news consumption experience in an increasingly interconnected world.

i
 ACKNOWLEDGEMENT

It is our pleasure to be indebted to various people who directly or indirectly contributed

in the development of our project and influenced our thinking, behaviour and acts during
the course of study. I express our sincere gratitude to our HOD Dr. Ashish Oberoi
(Department of Computer Science & Engineering) and all teachers for providing us an
opportunity to work on this project and helps us to complete our work on time. I am
thankful to Ms. Pooja Agrawal, my project mentor for their support, co-operation and
motivation provided to us during the development of project for constant inspiration,
presence, and blessings. Moreover, they provided their valuable suggestions and
precious time in accomplishing our project report. Lastly, I would like to thank the
Almighty and my Parents for their moral support and my friends with whom I shared my
day-to-day experience and received a lot of suggestions that improved my quality of
work.

With Regards,

Kamran Rafiq.

ii
 ABOUT COMPANY
Open Weaver is a SaaS tech startup that provides open-source development tools and
resources. Their flagship product, Kandi, is a knowledge discovery engine that helps
developers find and use open-source components for their projects. Open Weaver's
vision is to reinvent digital realization by improving development techniques to scale
digital. They aim to change the way developers build digital applications. Open Weaver's
Kandi accelerates application development through open-source reusability. Kandi helps
developers save time and effort while developing scalable and reliable
applications. Kandi taps into over 650 million opensource assets to develop applications
faster. Open Weaver also supports millions of technology learners by collaborating with
Future Skills Prime. They provide 25 virtual lab courses on Future skills Prime. ICT
Academy in association with Open Weaver has organized the Virtual Internship Program
on advanced technical domains such as Artificial Intelligence, Full Stack Development
and Web Development.

iii
CERTIFICATE FROM COMPANY

iv
 CHAPTER 1.
INTRODUCTION
1.1 OVERVIEW

This project combines the power of web development technologies—HTML, CSS, and
JavaScript—alongside integration with a News API to construct a user-friendly and
interactive platform for accessing real-time news content. The news website project aims
to develop a robust and user-friendly platform for accessing news content in a dynamic
and engaging manner.
As we all understand the significance of staying abreast of current events and the
importance of accessing news from trusted sources. With a commitment to accuracy,
diversity, and relevance, this website curate a rich tapestry of news stories, ranging from
global politics, finance, science, technology, entertainment, lifestyle, health, and much
more.
This platform is designed to offer a seamless and intuitive user experience, enabling easy
navigation through an abundance of articles, features, and editorials. This website
believes in empowering the readers by presenting a balanced spectrum of viewpoints and
opinions, fostering a holistic understanding of the multifaceted world we live in.
Powered by cutting-edge technology and leveraging the vast resources of News API, it
brings you real-time updates, breaking news, and in-depth analysis from a multitude of
reputable sources. Our aim is not just to inform but to inspire, encourage critical thinking,
and spark meaningful conversations that shape our understanding of the global
landscape. Whether you are a news enthusiast, a professional, or an individual seeking
reliable information, Coding Shuttle News is your go-to destination.
This project aims to leverage HTML for structuring content, CSS for styling, and
JavaScript for interactivity to develop a robust news website. The incorporation of News
API further enriches the user experience by providing a seamless flow of up-to-date news
articles across various categories.
The website will be connected to a News API, allowing access to a vast repository of
news articles from diverse sources and categories. JavaScript will facilitate the retrieval
of this data and its display on the website in a structured and readable format. Users will
be able to access real-time news content, view article details, and stay informed about
current events.

1.2 Working of Any Website:

1
1. Typing the Website Address (URL):
When a user types a website address (such as www.example.com) into their web
browser, it triggers a sequence of actions to access the desired web page.
2. Resolving the Domain Name (DNS Resolution):
The user’s browser sends a request to a DNS server to translate the domain name (e.g.,
www.example.com) into an IP address. The DNS server maintains a database that maps
domain names to their corresponding IP addresses.
If the requested domain’s IP address is not cached locally in the user’s system, the request
goes to recursive DNS servers, which then search for the IP address associated with the
domain name.
3. DNS Lookup Process:
The recursive DNS server checks its cache for the IP address of the requested domain.
If it is not found, the server starts a recursive search.
It contacts the root DNS server to find the authoritative DNS server responsible for the
top level domain (TLD) of the website (e.g., ‘.com’ for www.example.com).
The authoritative DNS server provides the IP address associated with the domain name
back to the user’s system.
4. Requesting Web Content from Server:
Using the obtained IP address, the user’s browser sends an HTTP request to the web
server associated with that IP address. The request includes the specific web page or
resource the user wants to access (e.g., www.example.com/home.html).
5. Server Response:
The web server processes the request and fetches the requested web page or content. It
packages the content (usually in HTML, CSS, and JavaScript files) and sends it back as
an HTTP response to the user’s browser.
6. Rendering the Web Page:
The user’s browser receives the response and interprets the HTML, CSS, and JavaScript
files, rendering the content. The browser assembles and displays the web page on the
user’s screen.
7. User Interaction:
The user can interact with the web page, clicking links, submitting forms, or engaging
with interactive elements, initiating further requests and responses.

2
 Fig 1.1 Working of any website

Fig 1.2 Client-Server model of a website

3
 CHAPTER 2.

OBJECTIVES

In the era of digital information and rapid communication, the development of a news
website has become more crucial than ever. This project, a culmination of web
development technologies and journalistic content curation, aims to provide a
comprehensive platform for delivering news to a diverse audience.
2.1 Project Overview:
Our news website project is designed to address the evolving landscape of news
consumption. Leveraging the power of web technologies such as HTML, CSS,
JavaScript, and a news API, our website offers a modern and user-friendly experience for
readers seeking to stay informed about current events.
2.2 Project Objectives:
To create an informative and engaging platform for news consumption in the digital age.
To foster a sense of community by encouraging reader interaction and discussion.
To provide a user-friendly interface that accommodates a wide range of users.
To deliver timely news updates from various categories, ensuring that our audience
remains well-informed.
This API-based frontend news website can have several objectives, aiming to leverage
the power of Application Programming Interfaces (APIs) to enhance its functionality,
content delivery, and user experience. Here are some key objectives:
Content Aggregation:
Use APIs to aggregate news content from various sources. APIs can pull data from
multiple news outlets, ensuring a diverse range of information and viewpoints for users.
Real-Time Updates:
Provide real-time or near real-time news updates by utilizing APIs that deliver live data
feeds. This keeps the content fresh and engaging for users. Through the integration of a
News API, the website aims to provide users with access to real-time news content from
diverse categories and multiple sources.
Improved User Experience:
APIs can enhance the user interface and experience by providing smooth, fast, and
responsive interactions. For instance, integrating APIs that offer fast-loading content,
multimedia integration, and intuitive design can significantly improve the overall user
experience.

4
 CHAPTER 3.

REQUIREMENTS FOR THE PROJECT

The basic requirements for this project are:

3.1 REQUIREMENTS OF TECHNOLOGIES
• HTML
• CSS
• JavaScript

HTML:
HTML (Hyper Text Markup Language) is the standard language used to create and
structure content on web pages. It is the backbone of the World Wide Web, defining the
layout, formatting, and organization of information on websites.
Key points about HTML:
• Markup Language: HTML uses markup tags to define elements like headings,
paragraphs, links, and images, structuring the content of a web page.
• Element Structure: HTML documents are composed of a series of elements,
each enclosed by opening and closing tags, creating a hierarchical structure.
• Semantic Elements: HTML5 introduced more semantic elements (e.g.,
<header>, <footer>, <nav>) that provide clearer meanings to content, aiding
accessibility and search engine optimization.
• Interactivity and Functionality: While HTML provides the structure and
content, CSS is used for styling and layout, and JavaScript is used for
interactivity and dynamic content on web pages.
CSS:
CSS stands for Cascading Style Sheets. It is a style sheet language used to describe the
presentation of a document written in a markup language like HTML. CSS defines how
HTML elements are displayed on a web page, determining their layout, design, and
visual formatting.
Key Aspects of CSS:
• Style Definition: CSS allows the definition of styles for various HTML elements,
specifying attributes like color, size, font, positioning, and spacing.

5
 • Separation of Content and Design: It separates the structure and content of a
web page from its visual presentation. This separation allows for easier
maintenance and a more consistent look across a website.
• Selectors and Declarations: Selectors are used to target specific HTML
elements, while declarations specify the style attributes applied to those
elements.
Advanced CSS Features:
Flexbox is a layout model in CSS designed for creating more efficient and flexible
alignments and distributions of space among items in a container. CSS Grid Layout
provides two dimensional grid system to structure content within rows and columns,
allowing precise control.
Transitions and Animations: Adding motion and interactivity to elements using
keyframes, transitions, and animations.
Media Queries: Allowing conditional styling based on the device's characteristics like
screen size, orientation, or resolution.
Basic Structure of CSS:
selector{
property:
value;
}
Selector: Targets the HTML element to which the style is applied.
Property: Describes the aspect of the element being styled (e.g., color, font-size, margin).
Value: The value assigned to the property (e.g., red, 16px, 10%).

JAVASCRIPT:
JavaScript is a high-level, dynamic, and versatile programming language primarily used
for adding interactivity and behavior to web pages. It's a fundamental technology in web
development, enabling dynamic content updates, user interactions, and complex
functionalities in web applications.
Key Features of JavaScript:

1. Client-Side Scripting:
Executes code directly in the user's browser, enabling interactive web pages without
server interaction.
6
2. Versatility:
Used for various purposes, from simple animations to complex web applications and
games.
3. Event Handling:
Responds to user actions such as clicks, scrolls, or form submissions, triggering specific
functions or behaviours.
4. Asynchronous Operations:
Supports asynchronous programming through callbacks, promises, and async/await,
allowing non-blocking execution of code.
5. Libraries and Frameworks:
Supported by numerous libraries and frameworks like React, Vue, and Angular for
efficient web development.
6. DOM Manipulation:
Manipulates the Document Object Model (DOM) to dynamically change or update
content and styles on web pages. It's a programming interface that allows developers to:
Create, change, or remove elements from a document, Add events to elements to make
a page more dynamic, Change the document structure, style, and content. Define the
logical structure of documents and the way a document is accessed and manipulated.
JavaScript is an essential tool for web development, enabling the creation of dynamic
and interactive web pages, responsive applications, and complex functionalities across
various platforms.

3.2 REQUIREMENT OF API

An API, or Application Programming Interface, is a set of rules, protocols, tools, and

definitions that allow different software applications to communicate and interact with
each other. It serves as an intermediary that enables the exchange of data and
functionalities between disparate systems, applications, or services. In this project, we
have used a “NEWS API”.
A "News API" refers to an Application Programming Interface (API) specifically
designed to provide access to news articles, headlines, and related content from various
sources. News APIs offer developers a structured way to retrieve news data and integrate
it into their applications or websites.
Here are some common features and functionalities of a News API:

7
 Access to Diverse News Sources: News APIs typically aggregate content from various
publishers, news agencies, blogs, and other sources. This ensures a wide range of topics
and viewpoints.
Real-Time Updates: Many News APIs provide real-time or near real-time updates,
delivering the latest news as it becomes available.
Categorization and Topic-based Retrieval: News APIs often categorize news articles
by topics (e.g., sports, politics, technology, entertainment), allowing developers to
retrieve articles based on specific categories.
Search and Filtering Capabilities: They offer search functionalities and filtering
options, enabling developers to search for specific articles, keywords, or topics.
Customization and Personalization: Some APIs allow users to set preferences, follow
specific topics, or receive tailored news alerts, thus offering a more personalized user
experience.
Metadata and Enriched Content: News APIs might provide additional metadata such
as article summaries, images, author information, publication dates, and more, enriching
the content and allowing for more informative displays.
Consistent and Structured Data Format: They usually deliver news content in a
standardized format (e.g., JSON or XML), making it easier for developers to parse and
integrate the data into their applications.

3.3 REQUIREMENTS OF HARDWARE

• Processor: Intel dual core and above

• RAM: 512 MB

• Hard disk: 400 GB

• Monitor:color

3.4 REQUIREMENTS OF SOFTWARE

Operating system:

An operating system (OS) is a fundamental software that manages computer hardware

and software resources, providing a stable and efficient platform for other applications to
run on a computing device. It serves as an intermediary between computer hardware and

8
 user applications, ensuring the efficient utilization of resources and providing a user-
friendly interface to interact with the system. We can use Windows 7, Windows 10,
Windows 11 etc.

Internet Connection:

An internet connection is a setup that allows your device to connect to the World Wide
Web. It can be established using various technologies such as:
• Fiber-Optic Internet: This type of connection uses fiber optic cables to transmit data
using light signals. It offers the fastest internet speeds and high bandwidth but may not
be available in all areas.
• Satellite Internet: Satellite internet relies on communication with satellites in orbit. It can
be a viable option in remote or rural areas where other types of connections might not
be available, but it can have limitations in terms of latency and data caps.

• Mobile Internet: Mobile internet allows devices to connect to the internet through
cellular networks. This can be achieved via smartphones, tablets, or mobile hotspots and
offers varying speeds based on network coverage and technology (3G, 4G, 5G).
Web Browser:
A browser is a software program that is used to explore, retrieve, and display the
information available on the World Wide Web. This information may be in the form of
pictures, web pages, videos, and other files that all are connected via hyperlinks and
categorized with the help of URLs (Uniform Resource Identifiers). For example, you are
viewing this page by using a browser.
A browser is a client program as it runs on a user computer or mobile device and contacts
the webserver for the information requested by the user. The web server sends the data
back to the browser that displays the results on internet supported devices. On behalf of
the users, the browser sends requests to web servers all over the internet by using HTTP
(Hypertext Transfer Protocol). A browser requires a smartphone, computer, or tablet and
internet to work. There are numerous web browsers available, each with its own features,
performance, and user interfaces. Here are some well-known web browsers:
• Google Chrome: Developed by Google, Chrome is one of the most popular browsers
known for its speed, simplicity, and integration with Google services. It supports a vast
library of extensions and has a clean user interface.

9
• Mozilla Firefox: Firefox is an open-source browser developed by the Mozilla
Foundation. It's recognized for its focus on privacy, security, and customization through
a wide range of add-ons. It offers strong support for web standards.
• Microsoft Edge: Edge is Microsoft's default browser that replaced Internet Explorer. It
is known for its performance and compatibility, and it's based on the Chromium engine
(similar to Google Chrome).
Visual Studio Code:
Visual Studio Code (VS Code) is a free, lightweight, open-source code editor
developed by Microsoft. It's widely used by developers and is renowned for its
versatility, robust features, and extensive customization options. Here are some key
aspects of Visual Studio Code:
• Cross-Platform Support: VS Code is available on major operating systems like
Windows, macOS, and Linux, ensuring a consistent experience for developers across
different platforms.
• Versatility and Language Support: It supports a wide range of programming languages
out-of-the-box and can be extended via extensions available through the Visual Studio
Code Marketplace. This includes support for popular languages like JavaScript,
Python, Java, C++, and many others.
• Intelligent Code Editor: It provides features like IntelliSense, which offers smart code
completion, syntax highlighting, and contextual hints that enhance productivity and
code quality.
• Integrated Terminal: VS Code includes an integrated terminal within the editor,
enabling developers to run commands, scripts, and perform various tasks without
switching to an external terminal.

Fig
3.1 Features of Visual Studio Code
10
 CHAPTER 4.
RESEARCH AND METHODOLOGY

4.1 DESIGN
Designing an API-based news website involves structuring the front-end system to
effectively consume and display news content retrieved from multiple sources through
APIs.
The design of the front end of a news website is an iterative process that involves
continuous refinement based on user feedback and emerging design trends. The ultimate
goal is to create an inviting and user-centric platform that enhances the content
consumption experience for readers.
User-Centric Design:
The heart of our front-end development project is a user-centric approach. The design
and layout must resonate with the preferences and expectations of our target audience.
Through extensive research, including surveys, user interviews, and persona creation,
we have gained invaluable insights into what users seek in a news website. This
information serves as the foundation for our design decisions, ensuring that the interface
is intuitive, easy to navigate and aligns with the needs of reader.
4.2 BLOCK DIAGRAM OF API BASED WEBSITE

An API (Application Programming Interface) is the intermediary that enables the

transfer of data between different software systems. When it comes to a news API
delivering data to a frontend, the process involves a series of steps:

Fig 4.1 Block diagram of API based website

Requesting Data via API: The frontend system (such as a news website or application)
communicates with the news API by sending a request for specific data. This request
could include parameters like the type of news, categories, specific articles, or other
filters.
11
API Processing and Retrieval: The news API receives the request from the frontend
and processes it. The API accesses the news database or sources it is connected to and
retrieves the relevant data based on the request. This data can be in the form of JSON,
XML, or another structured format.

Data Transmission: Once the news API retrieves the requested data, it packages the
information and sends it back as a response to the frontend system. The response
typically contains the requested news articles, headlines, metadata, and any associated
information.

Frontend Integration: The frontend system, using programming languages like

JavaScript, HTML, and CSS, receives the data from the API response. Through code
logic and design elements, the frontend processes and formats the data for display on the
user interface.

Displaying Data: The frontend uses the retrieved information to showcase the news
content on the user's screen. This could involve organizing headlines, articles, images,
and other multimedia content according to the design and layout of the website or
application.

User Interaction: Users can interact with the presented news content on the frontend.
This might include reading articles, clicking on headlines for more details, sharing
articles, or engaging with various features provided by the frontend system.

The entire process involves the API acting as a bridge between the backend (where the
news data is stored or sourced) and the frontend (where users interact with the
information). The API's role is to manage requests, retrieve the relevant data, and deliver
it in a consumable format to the frontend for display and interaction. This process allows
for seamless and near-real-time delivery of news content to the users.

12
 CHAPTER 5.

DEVELOPMENT AND CODING

Development Process:

1. Project Setup: Create a new directory for your project and set up the necessary HTML,
CSS, and JavaScript files.
2. HTML Structure: Create the basic structure of your web pages, including the header,
navigation menu, search bar, and article listing sections.
3. Styling: Apply CSS to style the app, ensuring it looks visually appealing and is
responsive.
4. JavaScript Implementation:
- Implement code for fetching news data from the news API using your API key.
- Create functions to render the fetched data in the app's UI, including listing articles
and handling user interactions.
- Implement the search functionality and category selection.
5. Testing: Test your app thoroughly to ensure that it works as expected, handles various
user interactions, and displays news articles correctly.

6. Optimization: Optimize your code and assets for performance. Minify CSS and
JavaScript files, and ensure that the app loads quickly.

7. Deployment: Host your web app on a web server or a platform like GitHub Pages or
Netlify to make it accessible to users.

8. Maintenance and Updates: Regularly update your app to ensure it continues to

function with the latest news data and adapt to any changes in the news API.

5.1 Implementation of HTML:

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

<body>
<nav>
<div class="main-nav container flex">
<a href="#" class="company-logo">
<img src="logo.png" alt="company logo">
</a>
<div class="nav-links">
<ul class="flex">
<li class="hower-link nav-item" id="IPL"
onclick="onNavItemClick('IPL')">IPL</li>
<li class="hower-link nav-item" id="Finance"
onclick="onNavItemClick('Finance')">Finance</li>
<li class="hower-link 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 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="class-header">
<img src="https://via.placeholder.com/400 x 200"
alt="news-image" id="news-img">
</div>
<div class="card-content">
<h3 id="news-title">This is the title</h3>
<h6 class="news-source" id="news-source">End Gadget
26/08/2023</h6>
<p class="news-desc" id="news-desc">Lorem ipsum dolor sit
amet consectetur adipisicing elit. Nemo,
molestias.</p>
</div>
</div>

14
 </div>
</template>
</main>

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

</html>

5.2) Implementation of CSS:

@import
url("https://fonts.googleapis.com/css2?family=Poppins:wght@500&family=Rob
oto:wght@500&display=swap");

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

:root {
--primary-text-color: #183b56;
--secondary-text-color: #577592;
--accent-color: #2294ed;
--accent-color-dark: #1d69a3;
}

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

p {
font-family: "Roboto", sans-serif;
color: var(--secondary-text-color);
line-height: 1.4rem;
}

a {
text-decoration: none;
}

15
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 #bbd0e2;
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;
}

.hover-link {
cursor: pointer;
}

.hover-link:hover {
color: var(--secondary-text-color);
}

.hover-link:active {
color: red;
}

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

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

.search-button {
background-color: var(--accent-color);
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;
}

.card {
width: 360px;
min-height: 400px;
box-shadow: 0 0 4px #d4ecff;
border-radius: 4px;
cursor: pointer;
background-color: #fff;
overflow: hidden;

17
 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;
}

5.3 CONNECTING NEWS API

Fig 5.1 NEWS API website

It gives us an API key which can be included in JavaScript file and then it also provides
an API URL which helps to give us search functionalities in our website. The news
comes in JSON format.

18
 Fig 5.2 API URL provided by NEWS API

5.4 JAVASCRIPT CODE FOR FETCHING API

Fig 5.3 Including API to Javascript

const API_KEY = "f6a5295e53ef4e788d9216eba444dc87";

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();
bindData(data.articles);
}

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

cardsContainer.innerHTML = "";

19
 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 curSelectedNav = null;

function onNavItemClick(id) {
fetchNews(id);
const navItem = document.getElementById(id);
curSelectedNav?.classList.remove("active");
curSelectedNav = navItem;
curSelectedNav.classList.add("active");
}

const searchButton = document.getElementById("search-button");

const searchText = document.getElementById("search-text");

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

20
5.5 HTML TEMPLATE:

Fig 5.3 HTML card template code

21
 CHAPTER 6
RESULT AND DISCUSSION
6.1 Features:
1. User Interface: The app has a clean and responsive user interface designed using
HTML and CSS. It adapts to different screen sizes and devices.
2. News Categories: Users can choose from various news categories such as technology,
business, sports, entertainment, and more.
3. Top Headlines: The app displays the top headlines from the chosen category.
4. Search Functionality: Users can search for specific news articles by entering
keywords or phrases in the search bar.
5. Detailed Articles: Clicking on a news article displays the full article with a title,
description, publication date, and a link to the source.
6. Source Attribution: Each article is attributed to its source publication.
7. Pagination: For long lists of articles, pagination or infinite scrolling allows users to
navigate through multiple pages of results.
8. Customization: Users can customize their news feed by selecting preferred news
sources and saving favourite articles.
9. Share Functionality: The app allows users to share articles via social media or email.
10. Responsive Design: The app is designed to be responsive, ensuring a seamless
experience across various devices, including desktops, tablets, and smartphones.
11. Navigation Bar: This News website provides a fixed navigation bar with Logo , nav
links and search bar

Fig 6.1 Navigation bar

12.CARDS FOR NEWS: News are shown in a card format to the user.

22
23
 Fig 6.2 News in cards Format

13. SEARCH BAR: User can search for any type of news with the search bar.

Fig 6.3 Search bar

24
Fig 6.4 Search News in Search Bar

25
 CHAPTER 7
Conclusion And Future Scope:
1. Website Functionality: You've successfully created a functional news website that can
display content to your audience using HTML, style it with CSS, and add interactivity
with JavaScript. It's a solid foundation.

2. Responsive Design: Ensuring your website is responsive and mobile-friendly is crucial.

If your website isn't already responsive, this should be a priority.

3. User Experience: Pay attention to user experience. Is your website easy to navigate? Are
the articles well-organized? Is the content easy to read? These are essential factors for
retaining and attracting users.

4. Content Quality: The quality of your news articles is paramount. Make sure you're
providing accurate, well-researched, and relevant content.

Future Scope:

1. Dynamic Content: Consider integrating a content management system (CMS) or a

backend server to make it easier to publish and manage news articles. This would allow
you to update your website more efficiently.

2. User Interaction: Implement user features such as comments, likes, shares, and user
profiles. These can boost user engagement and make your website more interactive.

3. Search Functionality: Add a search feature to help users find specific articles quickly.

4. Social Media Integration: Allow users to share articles on social media and incorporate
social media feeds into your site.

5. Email Newsletter: Create an option for users to subscribe to newsletters for regular
updates.

6. Analytics and SEO: Implement web analytics tools to track user behaviour, and
optimize your site for search engines (SEO) to increase visibility in search results.

7. Monetization: Explore options for generating revenue, such as ads, sponsored content,
or subscription models.

8. Localization: Consider offering your content in multiple languages to reach a broader

audience.
26
9. Security: Ensure the security of your website by implementing security best practices to
protect user data and your site from potential threats.

10. Regular Updates: Keep your website up to date with fresh content, bug fixes, and
design improvements to retain and attract users.

11. Community Building: Create a community around your website through forums,
discussion boards, or user-generated content.

12. Feedback Mechanism: Allow users to provide feedback and suggestions to help you
continually improve the website.

13. Performance Optimization: Optimize your website for speed and performance to ensure
a seamless user experience.

14. Mobile Apps: Consider developing mobile apps for iOS and Android platforms to reach
a broader audience.

15.Legal Considerations: Ensure you comply with legal regulations regarding content,
privacy, and user data.

27
 REFERENCES

• Accessible Web Design tips – the tips no web developer can live without, Jim Byrne,
2006, (ISBN: 978-1-4116-6729-7).
• Dowden, Martine and Michael. Accessible XHTML and CSS Web Sites Problem
Design Solution, Apress,2019.
• Gillenwater, Zoe, Mickley. Stunning CSS3: A Project-based Guide to the Latest in
CSS, New Riders Press, 2010.
• Grannell, Craig. The Essential Guide to CSS and HTML Web Design, friends of ED,
2007.
• Felke-Morris, Web Development & Design Foundations with HTML5, 10th Edition,
Addison-Wesley, 2020.
• Keith, Jeremy and Andrew, Rachel. HTML5 For Web Designers, A Book Apart,
2016.
• Lawson, Bruce and Sharp, Remy. Introducing HTML5, New Riders Press, 2010.
• Meiert, Jens Oliver. The Little Book of HTML/CSS Coding Guidelines, O'Reilly,
2015.
• http://www.codewithharry.com/
• http://www.wb3schools.com/

• https://stackoverflow.com/

• https://chat.openai.com/

• https://www.leetcode.com
• http://www.geeksforgeeks.com
• http://www.Mdnwebdocs.com

28