Skip to content

Commit

Permalink
Merge pull request #91 from Blessy-B-Sherin/payment-ui
Browse files Browse the repository at this point in the history 
 #57 Updated payment UI
  • Loading branch information
@dohinafs
dohinafs authored Oct 2, 2024
2 parents cca1251 + 8d75160 commit 56a6eeb
Show file tree
Hide file tree
Showing 3 changed files with 287 additions and 15 deletions.
74 changes: 68 additions & 6 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,11 +28,11 @@

<!-- ... existing code ... -->
<nav class="navbar">
<a href="#home">Home</a>
<a href="#about">About</a>
<a href="#menu">Menu</a>
<a href="#review">Review</a>
<a href="#blogs">Blogs</a>
<a href="#home" id="home-link">Home</a>
<a href="#about" id="about-link">About</a>
<a href="#menu" id="menu-link">Menu</a>
<a href="#review" id="review-link">Review</a>
<a href="#blogs" id="blogs-link">Blogs</a>
<a href="#" id="my-order-btn">My Order</a>
</nav>

Expand All @@ -58,7 +58,7 @@ <h3>
<div id="total">Total:$0.00
</div>
</h3>
<button onclick="checkout()">Checkout</button>
<button id="checkout-button" onclick="checkout()">Checkout</button>
</div>
</div>
<div class="my-order-container">
Expand Down Expand Up @@ -216,6 +216,68 @@ <h3> Never settle for just one scoop</h3><br><br>
<!--Blogs Section Ends Here-->


<!-- Payment Section Starts Here -->
<section id="payment-section" class="payment-section" style="display: none;">
<h1 class="heading">Payment <span>Details</span></h1>

<div class="order-summary">
<h2>Order Summary</h2>
<p id="order-items">Total Items: 3</p>
<p id="order-total">Total Price: $45.99</p>
</div>

<div class="payment-methods">
<h2>Select Payment Method</h2>
<label><input type="radio" name="payment-method" value="credit-card" onchange="showPaymentDetails()"> Credit/Debit Card</label>
<label><input type="radio" name="payment-method" value="paypal" onchange="showPaymentDetails()"> PayPal</label>
<label><input type="radio" name="payment-method" value="cod" onchange="showPaymentDetails()"> Cash on Delivery</label>
</div>

<div class="payment-details" id="payment-details">
<h2>Payment Details</h2>
<div id="card-details" style="display: none;">
<label for="card-number">Card Number:</label>
<input type="text" id="card-number" placeholder="Enter card number" required>

<label for="card-expiry">Expiry Date:</label>
<input type="text" id="card-expiry" placeholder="MM/YY" required>

<label for="card-cvc">CVC:</label>
<input type="text" id="card-cvc" placeholder="CVC" required>
</div>
<div id="paypal-details" style="display: none;">
<label for="paypal-id">PayPal ID:</label>
<input type="text" id="paypal-id" placeholder="Enter your PayPal ID" required>
</div>
<div id="cod-message" style="display: none;">
<p>No payment details needed for Cash on Delivery.</p>
</div>
</div>

<div class="billing-address">
<h2>Billing Address</h2>
<label for="billing-name">Name:</label>
<input type="text" id="billing-name" placeholder="Full Name" required>

<label for="billing-address">Address:</label>
<input type="text" id="billing-address" placeholder="Street Address" required>

<label for="billing-city">City:</label>
<input type="text" id="billing-city" placeholder="City" required>

<label for="billing-zip">ZIP Code:</label>
<input type="text" id="billing-zip" placeholder="ZIP Code" required>

<label for="billing-country">Country:</label>
<input type="text" id="billing-country" placeholder="Country" required>
</div>

<button class="payment-button" onclick="confirmPayment()">Confirm Payment</button>
</section>
<!-- Payment Section Ends Here -->





<!-- Footer Section Starts Here -->
Expand Down
120 changes: 112 additions & 8 deletions script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -133,20 +133,124 @@ function displayCart() {
}

// Function to simulate checkout
// function checkout() {
// if (cart.length === 0) {
// alert('Your cart is empty. Please add some items.');
// return;
// }

// //redirect to a payment gateway or show a message
// alert('Redirecting to payment gateway...');

// // After payment, you can clear the cart
// cart = [];
// displayCart();
// }


function showSection(section) {
// Hide all sections
document.querySelector('.home').style.display = 'none';
document.querySelector('.about').style.display = 'none';
document.querySelector('.menu').style.display = 'none';
document.querySelector('.blogs').style.display = 'none';
document.querySelector('.cart-items-container').style.display = 'none';
document.getElementById('payment-section').style.display = 'none';

// Show the selected section
document.querySelector(`.${section}`).style.display = 'block';
}

// Example event listeners for navigation links
// document.getElementById('home-link').addEventListener('click', () => showSection('home'));
// document.getElementById('about-link').addEventListener('click', () => showSection('about'));
// document.getElementById('menu-link').addEventListener('click', () => showSection('menu'));
// document.getElementById('blogs-link').addEventListener('click', () => showSection('blogs'));



function checkout() {
if (cart.length === 0) {
alert('Your cart is empty. Please add some items.');
return;


// Hide other sections
document.querySelector('.home').style.display = 'none';
document.querySelector('.about').style.display = 'none';
document.querySelector('.menu').style.display = 'none';
document.querySelector('.blogs').style.display = 'none';

// Hide the cart section
document.querySelector('.cart-items-container').style.display = 'none';

// Display the payment section
const paymentSection = document.getElementById('payment-section');
paymentSection.style.display = 'block';

// Update order summary dynamically
updateOrderSummary();
}

document.getElementById('checkout-button').addEventListener('click', checkout);

function updateOrderSummary() {
// Fetch order items and total from cart
const totalItems = 3;
const totalPrice = 45.99;

document.getElementById('order-items').textContent = `Total Items: ${totalItems}`;
document.getElementById('order-total').textContent = `Total Price: $${totalPrice}`;
}

// Payment method selection logic
document.querySelectorAll('input[name="payment-method"]').forEach((input) => {
input.addEventListener('change', function() {
if (this.value === 'credit-card') {
document.getElementById('card-details').style.display = 'block';
} else {
document.getElementById('card-details').style.display = 'none';
}
});
});

function togglePaymentDetails() {
const cardDetails = document.getElementById('card-details');
const paymentMethod = document.querySelector('input[name="payment-method"]:checked').value;

if (paymentMethod === 'credit-card') {
cardDetails.style.display = 'block';
} else {
cardDetails.style.display = 'none';
}
}

//redirect to a payment gateway or show a message
alert('Redirecting to payment gateway...');
function showPaymentDetails() {
const paymentMethod = document.querySelector('input[name="payment-method"]:checked').value;
const cardDetails = document.getElementById('card-details');
const paypalDetails = document.getElementById('paypal-details');
const codMessage = document.getElementById('cod-message');

// Show/hide payment details based on selected payment method
if (paymentMethod === 'credit-card') {
cardDetails.style.display = 'block';
paypalDetails.style.display = 'none';
codMessage.style.display = 'none';
} else if (paymentMethod === 'paypal') {
cardDetails.style.display = 'none';
paypalDetails.style.display = 'block';
codMessage.style.display = 'none';
} else if (paymentMethod === 'cod') {
cardDetails.style.display = 'none';
paypalDetails.style.display = 'none';
codMessage.style.display = 'block';
}
}

// After payment, you can clear the cart
cart = [];
displayCart();

function confirmPayment() {
alert("Payment confirmed! Your order is being processed.");
}



function displayOrder() {
const orderDetailsElement = document.getElementById('order-details');
if (cart.length === 0) {
Expand Down
108 changes: 107 additions & 1 deletion style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -784,6 +784,111 @@ button:hover,

/* ... rest of the existing code ... */






/* payment styles start */

.payment-section {
max-width: 800px;
margin: 40px auto;
background-color: rgba(19, 19, 26, 0.8);
padding: 40px;
border-radius: 15px;
box-shadow: 0 0 20px rgba(211, 173, 127, 0.2);
}

.heading {
text-align: center;
font-size: 2.5em;
color: var(--main-color);
margin-bottom: 30px;
text-transform: uppercase;
}

.heading span {
color: #fff;
}

#order-items,
#order-total {
color: white;
padding: 5px;
font-size: medium;
}

.order-summary, .payment-methods, .payment-details, .billing-address {
background-color: rgba(255, 255, 255, 0.05);
padding: 20px;
border-radius: 10px;
margin-bottom: 30px;
border: var(--border);
}

h2 {
color: var(--main-color);
margin-bottom: 15px;
font-size: large;
}

label {
display: block;
margin-bottom: 5px;
color: #fff;
font-size: medium;
}

input[type="text"], input[type="radio"] {
width: 100%;
padding: 10px;
margin-bottom: 15px;
background-color: rgba(255, 255, 255, 0.1);
border: 1px solid var(--main-color);
border-radius: 5px;
color: #fff;
}

input[type="radio"] {
width: auto;
margin-right: 10px;
}

.payment-button {
background-color: var(--main-color);
color: var(--black);
padding: 15px 30px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 1.2em;
transition: background-color 0.3s, transform 0.3s;
display: block;
width: 100%;
margin-top: 20px;
}

.payment-button:hover {
background-color: #fff;
transform: translateY(-3px);
}

#cod-message{
color:#fff;
font-size: small;
}

/* Responsive design */
@media (max-width: 768px) {
.payment-section {
padding: 20px;
}
}


/* payment styles end */

/* Animation for about us */
.about .row .image {
opacity: 0;
Expand All @@ -802,4 +907,5 @@ button:hover,
.about.animate .row .content {
opacity: 1;
transform: translateX(0);
}
}

0 comments on commit 56a6eeb

Please sign in to comment.