Scribd
Upload
10 views16 pages

FSWD 4 Experment

The document outlines the creation of a simple microblogging application named 'Crave Magic' that allows users to post content viewable by their followers. It includes a detailed algorithm for development, HTML structure for various pages (home, history, login, signup), CSS for styling, and JavaScript for functionality such as modal handling and form submissions. The application features a food menu, customer feedback section, and order history management using local storage.

Uploaded by

AARTHI R S
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
10 views16 pages

FSWD 4 Experment

The document outlines the creation of a simple microblogging application named 'Crave Magic' that allows users to post content viewable by their followers. It includes a detailed algorithm for development, HTML structure for various pages (home, history, login, signup), CSS for styling, and JavaScript for functionality such as modal handling and form submissions. The application features a food menu, customer feedback section, and order history management using local storage.

Uploaded by

AARTHI R S
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 16

Ex.No.

3 Create a simple microblogging application that allows


people to post their content which can be viewed by
DATE: people who follow them.

AIM:
To create a simple microblogging application that allows people to post their content which
can be viewed by people who follow them.
ALGORITHM:
Step 1: Identify essential sections.
Step 2: Choose a Technology Stack Select a web development framework and
languages.
Step 3: Create Project Structure Establish directories for HTML, CSS, JavaScript files,
and assets.
Step 4: Code HTML Structure Develop HTML templates for each webpage (index,
about, resume, projects, contact).
Step 5: Implement CSS Styling Style HTML elements using CSS for a visually
appealing design.
Step 6: Add JavaScript Functionality Integrate JavaScript for interactive features and
dynamic content loading.
Step 7: Test and Debug Conduct thorough testing on different browsers and devices.
PROGRAM:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Crave Magic - Home</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Crave Magic</h1>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="history.html">View History</a></li>

7
<li><a href="login.html">Login</a></li>
<li><a href="signup.html">Signup</a></li>
</ul>
</nav>
</header>
<section class="food-menu">
<div class="food-item">
<img src="images/burger.jpg" alt="Burger">
<h3>Burger</h3>
<p>Price: ₹150</p>
<button onclick="openModal('Burger', 150)">Buy Now</button>
</div>
<div class="food-item">
<img src="images/pizza.jpg" alt="Pizza">
<h3>Pizza</h3>
<p>Price: ₹350</p>
<button onclick="openModal('Pizza', 350)">Buy Now</button>
</div>
<div class="food-item">
<img src="images/pasta.jpg" alt="Pasta">
<h3>Pasta</h3>
<p>Price: ₹200</p>
<button onclick="openModal('Pasta', 200)">Buy Now</button>
</div>
</section>
<section id="comments-section">
<h2>Customer Feedback</h2>
<form id="comment-form">
<label for="customer-comment">Leave a Comment:</label>
<textarea id="customer-comment" rows="4" required></textarea>
<label for="star-rating">Rate your food:</label>
<div id="star-rating">
<span class="star" data-value="1">★</span>
<span class="star" data-value="2">★</span>
<span class="star" data-value="3">★</span>
<span class="star" data-value="4">★</span>
<span class="star" data-value="5">★</span>
</div>
<button type="submit">Post Comment</button>
8
</form>
<div id="comments-list">
<!-- Posted comments will appear here -->
</div>
</section>
<div id="payment-modal" class="modal">
<div class="modal-content">
<span class="close-btn" onclick="closeModal()">&times;</span>
<h2>Complete Your Order</h2>
<form id="payment-form">
<label for="customer-name">Name:</label>
<input type="text" id="customer-name" required>
<label for="customer-email">Email:</label>
<input type="email" id="customer-email" required>
<label for="food-item">Food Item:</label>
<input type="text" id="food-item" readonly>
<label for="food-price">Price (INR):</label>
<input type="text" id="food-price" readonly>
<label for="payment-method">Payment Method:</label>
<select id="payment-method" required>
<option value="Credit Card">Credit Card</option>
<option value="Debit Card">Debit Card</option>
<option value="PhonePe">PhonePe</option>
<option value="GPay">GPay</option>
</select>
<button type="submit">Confirm Payment</button>
</form>
</div>
</div>
<script src="script.js"></script>
</body>
</html>

History.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

9
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Crave Magic - Order History</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Crave Magic</h1>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="history.html">View History</a></li>
<li><a href="login.html">Login</a></li>
<li><a href="signup.html">Signup</a></li>
</ul>
</nav>
</header>
<section>
<h2>Order History</h2>
<p>No previous orders found.</p>
</section>
</body>
</html>

Login.html:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Login - Crave Magic</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Crave Magic</h1>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="history.html">View History</a></li>
<li><a href="login.html">Login</a></li>
<li><a href="signup.html">Signup</a></li>
10
</ul>
</nav>
</header>
<section id="login-section">
<h2>Login</h2>
<form id="login-form">
<input type="email" placeholder="Email" required>
<input type="password" placeholder="Password" required>
<button type="submit">Login</button>
</form>
<p>Don't have an account? <a href="signup.html">Sign up</a></p>
</section>
</body>
</html>

Singnup.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Signup - Crave Magic</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Crave Magic</h1>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="history.html">View History</a></li>
<li><a href="login.html">Login</a></li>
<li><a href="signup.html">Signup</a></li>
</ul>
</nav>
</header>
<section id="signup-section">
<h2>Signup</h2>
<form id="signup-form">
<input type="text" placeholder="Name" required>
<input type="email" placeholder="Email" required>
11
<input type="password" placeholder="Password" required>
<button type="submit">Sign Up</button>
</form>
<p>Already have an account? <a href="login.html">Login</a></p>
</section>
</body>
</html>

CSS:
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: #fff5f5;
}
h1, h2 {
text-align: center;
color: #1f1d1d;
}
header {
background-color: #b30000;
padding: 20px;
color: rgb(32, 28, 28);
}
section {
margin: 20px auto;
}
nav ul {
text-align: center;
list-style-type: none;
padding: 0;
}
nav ul li {
display: inline;
margin-right: 15px;
}
nav ul li a {
text-decoration: none;
12
color: #0a0a0a;
font-size: 18px;
}
.food-menu {
display: flex;
justify-content: center;
flex-wrap: wrap;
margin: 20px;
}
.food-item {
text-align: center;
border: 2px solid #b30000;
padding: 20px;
width: 200px;
border-radius: 10px;
background-color: white;
margin: 10px;
}
.food-item img {
width: 150px;
height: 150px;
margin-bottom: 10px;
border-radius: 10px;
}
.food-item h3 {
color: #b30000;
}
.food-item button {
background-color: #b30000;
color: white;
border: none;
padding: 10px;
width: 100%;
cursor: pointer;
border-radius: 5px;
font-weight: bold;
}
.food-item button:hover {
background-color: #ff1a1a;
13
}
.modal {
display: none; /* Keep it hidden by default */
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
}
.modal-content {
background-color: #fff;
margin: 5% auto;
padding: 30px;
border: 1px solid #888;
width: 40%; /* Adjust width */
border-radius: 10px; /* Smooth, rounded corners */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Light shadow for depth */
text-align: left;
max-width: 600px; /* Max width for responsive design */
}
.close-btn {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close-btn:hover,
.close-btn:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
form {
margin-top: 15px;
}
form label {
display: block;
14
margin-bottom: 5px;
font-weight: bold;
}
form input, form select {
width: 100%;
padding: 10px; /* Slightly larger padding for better visibility */
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 5px; /* Rounded corners */
}
button {
background-color: #28a745;
color: white;
border: none;
padding: 10px 20px;
cursor: pointer;
border-radius: 5px;
font-size: 16px;
font-weight: bold;
}
button:hover {
background-color: #218838;
}
#comments-section {
background-color: #ffe6e6;
padding: 10px;
border-radius: 10px;
width: 80%;
max-width: 600px;
margin: 20px auto;
}
#comments-section textarea, input {
width: 100%;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
.star {
15
font-size: 24px;
cursor: pointer;
}
.star:hover, .star.selected {
color: gold;
}
#comments-list div {
background-color: white;
padding: 10px;
margin-bottom: 10px;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
#login-section, #signup-section {
width: 300px;
margin: 50px auto;
background-color: white;
padding: 20px;
border-radius: 10px;
text-align: center;
}
#login-form, #signup-form {
display: flex;
flex-direction: column;
}
input {
padding: 10px;
margin-bottom: 10px;
border-radius: 5px;
border: 1px solid #ccc;
}
button {
background-color: #b30000;
color: white;
border: none;
padding: 10px;
cursor: pointer;
border-radius: 5px;
}
16
button:hover {
background-color: #ff1a1a;
}
p{
margin: 10px 0;
}
a{
color: #b30000;
}

JAVASCRIPT:
function openModal(foodItem, price) {
document.getElementById('food-item').value = foodItem;
document.getElementById('food-price').value = '₹' + price;
document.getElementById('payment-modal').style.display = 'block';
}
function closeModal() {
document.getElementById('payment-modal').style.display = 'none';
}
document.getElementById('payment-form').addEventListener('submit', function
(event) {
event.preventDefault();
const customerName = document.getElementById('customer-name').value;
const customerEmail = document.getElementById('customer-email').value;
const foodItem = document.getElementById('food-item').value;
const foodPrice = document.getElementById('food-price').value;
const paymentMethod = document.getElementById('payment-method').value;
const order = {
customerName,
customerEmail,
foodItem,
foodPrice,
paymentMethod,
orderDate: new Date().toLocaleString()
};
let orderHistory = JSON.parse(localStorage.getItem('orderHistory')) || [];
orderHistory.push(order);
localStorage.setItem('orderHistory', JSON.stringify(orderHistory));
alert('Payment confirmed! Your order has been placed.');
17
closeModal();
});
function loadOrderHistory() {
const orderHistory = JSON.parse(localStorage.getItem('orderHistory')) || [];
const historySection = document.querySelector('section');
if (orderHistory.length === 0) {
historySection.innerHTML = '<p>No previous orders found.</p>';
} else {
let orderList = '<ul>';
orderHistory.forEach(order => {
orderList += `<li><strong>${order.foodItem}</strong> - ₹${order.foodPrice}
<br>
Ordered by ${order.customerName} on ${order.orderDate} via
${order.paymentMethod}</li><hr>`;
});
orderList += '</ul>';
historySection.innerHTML = orderList;
}
}
const stars = document.querySelectorAll('.star');
stars.forEach(star => {
star.addEventListener('click', () => {
stars.forEach(s => s.classList.remove('selected'));
star.classList.add('selected');
});
});
document.getElementById('comment-form').addEventListener('submit', function
(event) {
event.preventDefault();
const commentText = document.getElementById('customer-comment').value;
const commentList = document.getElementById('comments-list');
if (commentText.trim() === '') return;
const newComment = document.createElement('div');
newComment.innerText = commentText;
commentList.appendChild(newComment);
document.getElementById('customer-comment').value = ''; // Clear input
});
document.getElementById('signup-form')?.addEventListener('submit', function
(event) {
18
event.preventDefault();

const name = document.querySelector('#signup-form input[type="text"]').value;


const email = document.querySelector('#signup-form input[type="email"]').value;
const password = document.querySelector('#signup-form
input[type="password"]').value;

if (name && email && password) {


// Save the user details to localStorage
const user = { name, email, password };
localStorage.setItem('user', JSON.stringify(user));

alert('Signup successful! You can now login.');


window.location.href = 'login.html'; // Redirect to login page
} else {
alert('Please fill in all the fields.');
}
});
document.getElementById('login-form')?.addEventListener('submit', function
(event) {
event.preventDefault();
const email = document.querySelector('#login-form input[type="email"]').value;
const password = document.querySelector('#login-form
input[type="password"]').value;
const user = JSON.parse(localStorage.getItem('user'));
if (user && user.email === email && user.password === password) {
alert('Login successful! Welcome, ' + user.name);
window.location.href = 'index.html'; // Redirect to homepage
} else {
alert('Invalid email or password. Please try again.');
}
});
function checkLoginStatus() {
const user = JSON.parse(localStorage.getItem('user'));
if (user) {
document.querySelector('nav ul').innerHTML += `<li><span>Welcome,
${user.name}</span></li>`;
}
}
19
20
OUTPUT:
Department of IT

Performance 30
Observation 30

Record 40

Total 100

RESULT:

You might also like