Web technology-Mini Project
Global News Portal
1) Landing Page
2) Home Page
3) Edit profile
4) Feeback
5) Developer Info
Codes:
1) Langing Page
a) index.html:
<main>
<section class="welcome-container">
<h1>Welcome to Global News Portal</h1>
<p>Your one-stop destination for global news across various categories including Sports,
Technology, Entertainment, and World News.</p>
<div class="auth-buttons">
<a href="login.html" class="auth-btn">Login</a>
<a href="register.html" class="auth-btn">Register</a>
</div>
</section>
<section class="features">
<h2>Features</h2>
<ul>
<li>Real-Time Updates</li>
<li>Personalized news feed</li>
<li>Responsive Design</li>
<li>Categorized News</li>
</ul>
</section>
<section class="categories">
<h2>News Categories</h2>
<div class="categories-grid">
<div class="category-card" data-category="general">
<div class="category-icon">📰</div>
<h3 class="category-title">General News</h3>
<p class="category-description">
Stay informed with the latest headlines and breaking news from around the world.
</p>
</div>
<div class="category-card" data-category="business">
<div class="category-icon">💼</div>
<h3 class="category-title">Business</h3>
<p class="category-description">
Track market trends, company updates, and economic developments globally.
</p>
</div>
<div class="category-card" data-category="technology">
<div class="category-icon">💻</div>
<h3 class="category-title">Technology</h3>
<p class="category-description">
Explore the latest innovations, gadget releases, and tech industry updates.
</p>
</div>
<div class="category-card" data-category="sports">
<div class="category-icon">⚽</div>
<h3 class="category-title">Sports</h3>
<p class="category-description">
Get updates on matches, tournaments, and athlete achievements across all sports.
</p>
</div>
<div class="category-card" data-category="entertainment">
<div class="category-icon">🎬</div>
<h3 class="category-title">Entertainment</h3>
<p class="category-description">
Keep up with celebrity news, movie releases, and entertainment industry updates.
</p>
</div>
</div>
</section>
</main
2) Home Page
a)newindex.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Global News Portal</title>
<link rel="stylesheet" href="newstyles.css">
<script
src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.1/axios.min.js"></
script>
<style>
body {
font-family: Arial, sans-serif;
line-height: 1.6;
color: #333;
max-width: 1200px;
margin: 0 auto;
padding: 20px;
background-color: #cfe0f3;
}
</style>
</head>
<body>
<header>
<h1>Global News Portal</h1>
<nav>
<div class="main_nav">
<a href="#"></a>
<img src="Matrix News.jpg" alt="Global News Hub Logo" style="margin-
right: -80px; border-radius: 50%; width: 60px; height: 60px;">
</a>
<div id="categories">
<button class="category-btn" data-category="preferences" aria-
label="My Preferences" style="background: linear-gradient(to right,
#287597, #1f89a1,#287597); color: #f0f8ff; border: none; padding: 10px
20px; border-radius: 5px; cursor: pointer;">My Preferences</button>
<button class="category-btn" data-category="general" aria-
label="General News">General</button>
<button class="category-btn" data-category="business" aria-
label="Business News">Business</button>
<button class="category-btn" data-category="technology" aria-
label="Technology News">Technology</button>
<button class="category-btn" data-category="sports" aria-label="Sports
News">Sports</button>
<button class="category-btn" data-category="entertainment" aria-
label="Entertainment News">Entertainment</button>
</div>
<div class="searchbar">
<input type="text" class="search" placeholder="Search news...">
<button class="searchbutton" aria-label="Search">Search</button>
</div>
<div id="user-info">
<div class="user-dropdown">
<img src="user.png" alt="User Icon" class="user-icon" aria-
haspopup="true" aria-expanded="false" style="width: 50px; height:
50px; border-radius: 50%; cursor: pointer;">
<div class="dropdown-content" aria-label="User Menu">
<span id="username"></span>
<a href="settings.html" aria-label="Settings" style="display: block; text-
align: center;">Settings</a>
<a href="search_history.php" aria-label="History" style="display: block;
text-align: center;">Search History</a>
<button id="logout-btn" aria-label="Logout" style="display: block; text-
align: center; color: red; text-decoration: none;"
onclick="logout()">Logout</button>
</div>
</div>
</div>
</div>
</nav>
</header>
<main>
<div id="news-container"></div>
</main>
<script src="newscript.js"></script>
</body>
</html>
b) newscript.js
const apiKey = "0572e2afd61747b5bfb78ec4847fb573";
const newsContainer = document.getElementById("news-container");
const categoryButtons = document.querySelectorAll(".category-btn");
const searchButton = document.querySelector(".searchbutton");
const searchInput = document.querySelector(".search");
function shuffleArray(array) {
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
return array;
}
async function fetchPreferences() {
try {
const response = await fetch("get_preferences.php");
const data = await response.json();
return data.preferences ? data.preferences.split(",") : [];
} catch (error) {
console.error("Error fetching preferences:", error);
return [];
}
}
async function fetchNewsForCategory(category) {
try {
const url = `https://newsapi.org/v2/top-headlines?
country=us&category=${category}&pageSize=5&apiKey=${apiKey}`;
const response = await fetch(url);
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const data = await response.json();
return data.articles;
} catch (error) {
console.error(`Error fetching ${category} news:`, error);
return [];
}
}
async function fetchPreferredNews() {
try {
const preferences = await fetchPreferences();
if (preferences.length === 0) {
return await fetchNews("general");
}
let allArticles = [];
for (const category of preferences) {
const articles = await fetchNewsForCategory(category);
allArticles = [...allArticles, ...articles];
}
displayNews(shuffleArray(allArticles));
} catch (error) {
console.error("Error fetching preferred news:", error);
newsContainer.innerHTML =
"<p>An error occurred while fetching news. Please try again later.</p>";
}
}
async function fetchNews(category = "general", query = "") {
try {
newsContainer.innerHTML = '<div class="loader">Loading...</div>';
let url;
if (query) {
url = `https://newsapi.org/v2/everything?q=${query}&apiKey=$
{apiKey}`;
} else {
url = `https://newsapi.org/v2/top-headlines?country=us&category=$
{category}&apiKey=${apiKey}`;
}
const response = await fetch(url);
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const data = await response.json();
displayNews(data.articles);
} catch (error) {
console.error("Error fetching news:", error);
console.error("Error details:", error.message);
newsContainer.innerHTML =
"<p>An error occurred while fetching news. Please try again later.</p>";
}
}
function displayNews(articles) {
newsContainer.innerHTML = "";
const validArticles = articles.filter((article) => {
return !(
article.title === "[Removed]" ||
article.description === "[Removed]" ||
article.source.name === "[Removed]" ||
article.title == null ||
article.description == null ||
article.source.name == null
);
});
if (validArticles.length === 0) {
newsContainer.innerHTML =
"<p>No news articles available at the moment. Please try again
later.</p>";
return;
}
validArticles.forEach((article) => {
const newsItem = document.createElement("div");
newsItem.classList.add("news-item");
newsItem.innerHTML = `
<img src="${
article.urlToImage || "/api/placeholder/300/200"
}" alt="${article.title}" class="news-image">
<div class="news-content">
<h2 class="news-title">${article.title}</h2>
<p class="news-description">${
article.description || "No description available."
}</p>
<p class="news-source">Source: ${article.source.name}</p>
</div>
`;
newsItem.addEventListener("click", () => {
window.open(article.url, "_blank");
});
newsContainer.appendChild(newsItem);
});
}
document.addEventListener("DOMContentLoaded", () => {
fetchPreferredNews();
categoryButtons.forEach((button) => {
button.addEventListener("click", () => {
const category = button.getAttribute("data-category");
if (category === "preferences") {
fetchPreferredNews();
} else {
fetchNews(category);
}
});
});
if (searchButton) {
searchButton.addEventListener("click", () => {
const query = searchInput.value.trim();
if (query) {
saveSearchHistory(query);
fetchNews("", query);
}
});
}
});
function saveSearchHistory(query) {
const formData = new URLSearchParams();
formData.append("search_term", query);
fetch("save_search.php", {
method: "POST",
body: formData,
})
.then((response) => response.json())
.then((data) => {
console.log("Search history saved:", data);
})
.catch((error) => {
console.error("Error saving search history:", error);
});
}
function logout() {
console.log("Logout button clicked");
window.location.href = "logout.php";
}
c) newstyle.css
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
header {
background-color: #192b3c;
color: #ecf0f1;
padding: 1rem;
margin-bottom: 2rem;
border-radius: 8px;
}
h1 {
margin: 0;
text-align: center;
}
.main_nav {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 0;
}
.main_nav img {
height: 50px;
margin-left: -80px;
}
#categories {
display: flex;
gap: 10px;
}
.category-btn,
.auth-btn {
background-color: #3498db;
color: white;
border: none;
padding: 10px 15px;
cursor: pointer;
transition: background-color 0.3s;
border-radius: 4px;
}
.category-btn:hover,
.auth-btn:hover {
background-color: #2980b9;
}
.searchbar {
display: flex;
margin-left: -50px;
}
.search {
padding: 8px;
border: 1px solid #ccc;
border-radius: 4px 0 0 4px;
font-size: 14px;
}
.searchbutton {
padding: 8px 12px;
background-color: #3597d9;
color: white;
border: none;
border-radius: 0 4px 4px 0;
cursor: pointer;
font-size: 14px;
}
.searchbutton:hover {
background-color: #0056b3;
}
#news-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
}
.news-item {
background-color: white;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
overflow: hidden;
transition: transform 0.3s;
cursor: pointer;
}
.news-item:hover {
transform: translateY(-5px);
}
.news-image {
width: 100%;
height: 200px;
object-fit: cover;
}
.news-content {
padding: 1rem;
}
.news-title {
font-size: 1.2rem;
margin-top: 0;
}
.news-description {
font-size: 0.9rem;
color: #666;
}
.news-source {
font-size: 0.8rem;
color: #888;
margin-top: 1rem;
}
.loader {
text-align: center;
font-size: 1.5rem;
margin-top: 2rem;
}
#user-info {
position: relative;
}
.user-dropdown {
position: relative;
display: inline-block;
}
.user-icon {
width: 50px;
height: 50px;
border-radius: 50%;
cursor: pointer;
}
.dropdown-content {
display: none;
position: absolute;
right: 0;
top: 50px;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
border-radius: 4px;
overflow: hidden;
}
.user-dropdown:hover .dropdown-content {
display: block;
}
.dropdown-content span {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
#logout-btn {
width: 100%;
padding: 12px 16px;
color: black;
border: none;
cursor: pointer;
text-align: left;
font-size: 14px;
}
#logout-btn:hover {
background-color: #ddd;
}
a[aria-label="Settings"] {
display: inline-block;
padding: 10px 15px;
color: black;
text-decoration: none;
border-radius: 4px;
transition: background-color 0.3s;
font-size: 14px;
}
a[aria-label="History"] {
display: inline-block;
padding: 10px 15px;
color: black;
text-decoration: none;
border-radius: 4px;
transition: background-color 0.3s;
font-size: 14px;
}
.my-preferences-btn {
background: #28a745;
color: white;
border: none;
padding: 8px 16px;
border-radius: 4px;
cursor: pointer;
transition: all 0.3s ease;
}
.my-preferences-btn:hover {
background: #218838;
}
.my-preferences-btn.active {
background: #1e7e34;
box-shadow: inset 0 3px 5px rgba(0,0,0,0.125);
}
3) Edit profile
a)edit.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"
/>
<title>Edit Page</title>
<style>
body {
font-family: Arial, sans-serif;
background: linear-gradient(135deg, #f4f4f4, #3498db);
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
animation: gradientAnimation 15s ease infinite;
}
@keyframes gradientAnimation {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
.edit-container {
background-color: #fff;
padding: 40px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
width: 500px;
}
.edit-container h2 {
margin-bottom: 20px;
text-align: center;
}
.edit-container input {
width: 100%;
padding: 15px;
margin: 15px 0;
border: 2px solid #ccc;
border-radius: 8px;
box-sizing: border-box;
font-size: 16px;
transition: border-color 0.3s ease;
}
.edit-container input:focus {
border-color: #3498db;
outline: none;
}
.edit-container input[type="submit"] {
background-color: #2980b9;
color: white;
border: none;
cursor: pointer;
}
.edit-container input[type="submit"]:hover {
background-color: #2573a6;
}
</style>
</head>
<body>
<div class="edit-container">
<h2>Edit Information</h2>
<form action="update_user.php" method="POST" onsubmit="return
validateForm()">
<input type="text" id="name" name="name" placeholder="Name"
required />
<input type="number" id="age" name="age" placeholder="Age"
required />
<input type="text" id="username" name="username"
placeholder="Username" required />
<input type="email" id="email" name="email" placeholder="Email"
required />
<input type="password" id="password" name="password"
placeholder="Password" required />
<input type="submit" value="Save Changes" />
<a href="settings.html" class="back-button" style="display: block; text-
align: center; margin-top: 20px; color: #3498db; text-decoration: none;
font-size: 16px;">Back to Settings</a>
</form>
<script>
function validateForm() {
const name = document.getElementById('name').value;
const username = document.getElementById('username').value;
const email = document.getElementById('email').value;
const password = document.getElementById('password').value;
const namePattern = /^[A-Za-z\s]+$/;
const usernamePattern = /^[a-zA-Z0-9._]{3,16}$/;
const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]
{2,}$/;
const passwordPattern = /^.{6,}$/;
if (!namePattern.test(name)) {
alert('Name should only contain letters and optional spaces, no numbers
or special characters.');
return false;
}
const age = document.getElementById('age').value;
if (age <= 0) {
alert('Please enter a valid age.');
return false;
}
if (!usernamePattern.test(username)) {
alert('Username should be alphanumeric, can include underscores or dots,
and should be between 3 to 16 characters.');
return false;
}
if (!emailPattern.test(email)) {
alert('Please enter a valid email address.');
return false;
}
if (!passwordPattern.test(password)) {
alert('Password should be at least 6 characters long.');
return false;
}
return true;
}
</script>
</div>
</body>
</html>
b) update_user.php
<?php
error_reporting(E_ALL);
ini_set('display_errors', 1);
session_start();
if (!isset($_SESSION['user_id'])) {
echo "<script>alert('You need to log in to update your information.');
window.location.href='login.html';</script>";
exit();
}
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "globalnewshub";
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$name = $_POST['name'] ?? null;
$age = $_POST['age'] ?? null;
$username = $_POST['username'] ?? null;
$email = $_POST['email'] ?? null;
$password = $_POST['password'] ?? null;
if (!$name || !$age || !$username || !$email || !$password) {
echo "Error: Form data is missing.";
exit();
}
echo "Form data received successfully.<br>";
$hashed_password = password_hash($password, PASSWORD_DEFAULT);
$user_id = $_SESSION['user_id'];
echo "User ID from session: " . $user_id . "<br>";
$sql = "UPDATE users SET name='$name', age='$age',
username='$username', email='$email', password='$hashed_password'
WHERE id='$user_id'";
if ($conn->query($sql) === TRUE) {
echo "<script>alert('Information updated successfully! Redirecting...');
window.location.href='newindex.html';</script>";
} else {
echo "Error updating information: " . $conn->error;
}
$conn->close();
?>
4) Feedback
a) submit_feedback.php
<?php
error_reporting(E_ALL);
ini_set('display_errors', 1);
session_start();
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "globalnewshub";
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$user_id = isset($_SESSION['user_id']) ? $_SESSION['user_id'] : null;
$rating = $_POST['rating'] ?? null;
$comment = $_POST['comment'] ?? null;
if (!$rating || !$comment) {
echo "<script>alert('Please provide both rating and comment.');
window.location.href='feedback.html';</script>";
exit();
}
$sql = "INSERT INTO feedback (user_id, rating, comment) VALUES
(?, ?, ?)";
$stmt = $conn->prepare($sql);
$stmt->bind_param("iis", $user_id, $rating, $comment);
if ($stmt->execute()) {
echo "<script>
alert('Thank you for your feedback!');
window.location.href='newindex.html';
</script>";
} else {
echo "<script>
alert('Error submitting feedback. Please try again.');
window.location.href='feedback.html';
</script>";
}
$stmt->close();
$conn->close();
?>
5) Developer Info
a) developer-info.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"
/>
<title>Developer Information</title>
<link
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/
bootstrap.min.css"
rel="stylesheet"
/>
</head>
<body>
<div class="container mt-5">
<h1 class="text-center mb-4">Developer Information</h1>
<div class="card mb-3">
<div class="card-body">
<h2 class="card-title text-primary">Rohit Binoj</h2>
<p class="card-text"><strong>Role:</strong> Full Stack Developer</p>
<p class="card-text"><strong>Experience:</strong> No
Experience</p>
<h5>Skills:</h5>
<ul class="list-group list-group-flush">
<li class="list-group-item">HTML</li>
<li class="list-group-item">CSS</li>
<li class="list-group-item">JavaScript</li>
<li class="list-group-item">PHP</li>
<li class="list-group-item">SQL</li>
</ul>
</div>
</div>
<div class="card mb-3">
<div class="card-body">
<h2 class="card-title text-primary">Rounak Naik</h2>
<p class="card-text"><strong>Role:</strong> Full Stack Developer</p>
<p class="card-text"><strong>Experience:</strong> 3 years</p>
<h5>Skills:</h5>
<ul class="list-group list-group-flush">
<li class="list-group-item">Flutter</li>
<li class="list-group-item">HTML</li>
<li class="list-group-item">CSS</li>
<li class="list-group-item">JavaScript</li>
<li class="list-group-item">PHP</li>
<li class="list-group-item">SQL</li>
</ul>
</div>
</div>
<div class="text-center mt-4">
<a href="index.html" class="btn btn-primary">Back to Home</a>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.0.7/dist/umd/popper.
min.js"></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.
js"></script>
</body>
</html>
