Skip to content

Commit

Permalink
Merge pull request #821 from Sakshar-Devgon/main
Browse files Browse the repository at this point in the history 
Improved UI of E-Book Section for betterment and add FAQ section .. and improved buttons : Enhancement
  • Loading branch information
@PriyaGhosal
PriyaGhosal authored Oct 24, 2024
2 parents f917bae + 011e483 commit ce6a471
Showing 1 changed file with 116 additions and 74 deletions.
190 changes: 116 additions & 74 deletions E-Book.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,18 +5,18 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>E-Books</title>
<style>
/* General styling for body */
/* General styling */
body {
font-family: 'Roboto', sans-serif;
background-color: #fff4f4; /* soft pastel pink */
background-color: #fff4f4; /* Soft pastel pink */
color: #333;
padding: 0;
margin: 0;
}

/* Navbar Styling */
/* Navbar */
.navbar {
background-color: hsl(357, 100%, 75%); /* New color */
background-color: hsl(357, 100%, 75%);
padding: 10px 20px;
display: flex;
justify-content: space-between;
Expand All @@ -25,7 +25,7 @@

.navbar-brand {
font-size: 1.5rem;
color: #fff;
color: white;
font-weight: bold;
}

Expand All @@ -34,6 +34,7 @@
font-size: 1.2rem;
margin-right: 20px;
text-decoration: none;
cursor: pointer; /* Change cursor to pointer */
}

.nav-link:hover {
Expand All @@ -46,10 +47,10 @@
margin-top: 20px;
font-size: 2.5rem;
font-weight: bold;
color: hsl(357, 100%, 75%); /* New color */
color: hsl(357, 100%, 75%);
}

/* Product Grid Styling */
/* Product Grid */
.product-container {
display: flex;
justify-content: center;
Expand Down Expand Up @@ -81,17 +82,17 @@
.product-card h3 {
font-size: 1.4rem;
margin: 10px 0;
color: hsl(357, 100%, 75%); /* New color */
color: hsl(357, 100%, 75%);
}

.product-card p {
font-size: 1.2rem;
color: #ff6799; /* Soft pastel pink */
color: #ff6799;
margin-bottom: 15px;
}

.product-card button {
background-color: hsl(357, 100%, 75%); /* New color */
background-color: hsl(357, 100%, 75%);
color: white;
padding: 10px 20px;
border: none;
Expand All @@ -100,65 +101,80 @@
}

.product-card button:hover {
background-color: hsl(357, 100%, 65%); /* Darker shade */
background-color: hsl(357, 100%, 65%);
}

/* Cart Section Styling */
/* Cart Section */
.cart-section {
text-align: center;
margin: 50px 0;
}

.cart-section h2 {
font-size: 2rem;
color: hsl(357, 100%, 75%); /* New color */
}

.cart-items {
list-style-type: none;
padding: 0;
}

.cart-items li {
margin: 10px 0;
font-size: 1.2rem;
display: flex;
justify-content: space-between;
align-items: center;
}

.cart-controls {
display: flex;
align-items: center;
gap: 10px;
}

.cart-controls button {
background-color: hsl(357, 100%, 75%); /* New color */
background-color: hsl(357, 100%, 75%);
color: white;
padding: 5px 10px;
border: none;
border-radius: 3px;
cursor: pointer;
}

.cart-controls button:hover {
background-color: hsl(357, 100%, 65%); /* Darker shade */
background-color: hsl(357, 100%, 65%);
}

/* FAQ Section */
.faq-section {
margin: 50px 20px;
padding: 20px;
border-radius: 10px;
border: 1px solid hsl(357, 100%, 75%);
}

.faq-question {
font-weight: bold;
margin-bottom: 10px;
cursor: pointer; /* Add pointer cursor for FAQ questions */
}

/* E-book Section Styling */
.ebook-info {
margin: 20px;
/* "Why Use Our Books" Section */
.why-section {
margin: 50px 20px;
padding: 20px;
border: 1px solid hsl(357, 100%, 75%); /* Border with new color */
background-color: white;
border-radius: 10px;
display: none; /* Hidden by default */
background-color: #fff; /* White background for contrast */
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.why-section h2 {
margin-bottom: 10px;
color: hsl(357, 100%, 75%);
}

/* Footer Styling */
.why-section ul {
list-style-type: disc;
padding-left: 20px;
}

/* Footer */
footer {
background-color: hsl(357, 100%, 75%); /* New color */
background-color: hsl(357, 100%, 75%);
color: white;
padding: 20px 0;
text-align: center;
Expand All @@ -175,10 +191,6 @@
width: 100%;
max-width: 300px;
}

.nav-link {
font-size: 1rem;
}
}
</style>
</head>
Expand All @@ -189,7 +201,7 @@
<div>
<a class="nav-link" href="#">Home</a>
<a class="nav-link" href="#">Products</a>
<a class="nav-link" href="#">Cart</a>
<a class="nav-link" href="#cart-section" onclick="scrollToCart()">Cart</a> <!-- Add click event to scroll -->
</div>
</nav>

Expand All @@ -199,7 +211,7 @@ <h1 class="shop-title">Our Books Collection</h1>
<!-- Product Container -->
<div class="product-container">
<div class="product-card">
<img src="https://rukminim2.flixcart.com/image/850/1000/l51d30w0/book/p/n/o/java-programming-language-learn-java-from-basic-to-advance-2022-original-imagfsqsfcqzzrjj.jpeg?q=90&crop=false" alt="Java Book">
<img src="https://rukminim2.flixcart.com/image/850/1000/l51d30w0/book/p/n/o/java-programming-language-learn-java-from-basic-to-advance-2022-original-imagfsqsfcqzzrjj.jpeg?q=90" alt="Java Book">
<h3>Learn Java</h3>
<p>$15</p>
<button onclick="addToCart('Learn Java', 15)">Add to Cart</button>
Expand All @@ -218,17 +230,43 @@ <h3>DSA Mastery</h3>
</div>
</div>

<!-- Button to Show E-book Info -->
<button onclick="toggleEbookInfo()">Show E-Book Info</button>
<!-- Why Use Our Books Section -->
<div class="why-section">
<h2>Why Use Our Books?</h2>
<ul>
<li>Comprehensive content tailored for all levels of learners.</li>
<li>Real-world coding challenges and examples.</li>
<li>Lifetime updates with new editions and content.</li>
<li>Accessible in multiple formats for convenience.</li>
</ul>
</div>

<!-- FAQ Section -->
<div class="faq-section">
<h2>Frequently Asked Questions</h2>
<div class="faq-item">
<div class="faq-question" onclick="toggleAnswer(this)">Q: What formats are the eBooks available in?</div>
<p class="faq-answer" style="display: none;">A: Our eBooks are available in PDF, EPUB, and MOBI formats.</p>
</div>

<div class="faq-item">
<div class="faq-question" onclick="toggleAnswer(this)">Q: Can I read the eBooks on my tablet?</div>
<p class="faq-answer" style="display: none;">A: Yes, our eBooks can be read on any device that supports the eBook format.</p>
</div>

<div class="faq-item">
<div class="faq-question" onclick="toggleAnswer(this)">Q: What payment methods are accepted?</div>
<p class="faq-answer" style="display: none;">A: We accept all major credit cards and PayPal for your convenience.</p>
</div>

<!-- E-book Info Section -->
<div class="ebook-info" id="ebook-info">
<h2>E-Book Details</h2>
<p>This is a collection of our amazing e-books. Explore different topics and enhance your knowledge!</p>
<div class="faq-item">
<div class="faq-question" onclick="toggleAnswer(this)">Q: Is there a money-back guarantee?</div>
<p class="faq-answer" style="display: none;">A: Yes, we offer a 30-day money-back guarantee on all purchases.</p>
</div>
</div>

<!-- Cart Section -->
<div class="cart-section">
<div class="cart-section" id="cart-section">
<h2>Your Cart</h2>
<ul class="cart-items" id="cart-items"></ul>
<h3>Total: $<span id="cart-total">0</span></h3>
Expand All @@ -239,27 +277,22 @@ <h3>Total: $<span id="cart-total">0</span></h3>
<p>&copy; 2024 Eco-Friendly Shop. All Rights Reserved.</p>
</footer>

<!-- JavaScript for Cart Functionality -->
<script>
let cart = [];
let totalPrice = 0;

function addToCart(productName, productPrice) {
const product = cart.find(item => item.name === productName);
if (product) {
product.quantity += 1;
} else {
cart.push({ name: productName, price: productPrice, quantity: 1 });
}

function addToCart(name, price) {
const item = cart.find(product => product.name === name);
if (item) item.quantity++;
else cart.push({ name, price, quantity: 1 });
updateCart();
}

function removeFromCart(productName) {
const productIndex = cart.findIndex(item => item.name === productName);
if (productIndex !== -1) {
cart[productIndex].quantity -= 1;
if (cart[productIndex].quantity === 0) {
cart.splice(productIndex, 1);
function removeFromCart(name) {
const item = cart.find(product => product.name === name);
if (item) {
item.quantity--;
if (item.quantity === 0) {
cart = cart.filter(product => product.name !== name);
}
}
updateCart();
Expand All @@ -269,27 +302,36 @@ <h3>Total: $<span id="cart-total">0</span></h3>
const cartItemsElement = document.getElementById('cart-items');
const cartTotalElement = document.getElementById('cart-total');
cartItemsElement.innerHTML = '';
totalPrice = 0;

let total = 0;
cart.forEach(item => {
totalPrice += item.price * item.quantity;
cartItemsElement.innerHTML += `
<li>
${item.name} - $${item.price} x ${item.quantity}
<div class="cart-controls">
<button onclick="addToCart('${item.name}', ${item.price})">+</button>
<button onclick="removeFromCart('${item.name}')">-</button>
</div>
</li>
`;
const listItem = document.createElement('li');
listItem.textContent = `${item.name} (x${item.quantity}) - $${item.price * item.quantity}`;

const controls = document.createElement('div');
controls.className = 'cart-controls';
const removeButton = document.createElement('button');
removeButton.textContent = 'Remove';
removeButton.onclick = () => removeFromCart(item.name);
controls.appendChild(removeButton);
listItem.appendChild(controls);

cartItemsElement.appendChild(listItem);
total += item.price * item.quantity;
});

cartTotalElement.textContent = totalPrice;
cartTotalElement.textContent = total.toFixed(2);
}

function toggleAnswer(questionElement) {
const answerElement = questionElement.nextElementSibling;
const isVisible = answerElement.style.display === 'block';
answerElement.style.display = isVisible ? 'none' : 'block';
}

function toggleEbookInfo() {
const ebookInfo = document.getElementById('ebook-info');
ebookInfo.style.display = ebookInfo.style.display === 'none' || ebookInfo.style.display === '' ? 'block' : 'none';
function scrollToCart() {
const cartSection = document.getElementById('cart-section');
cartSection.scrollIntoView({ behavior: 'smooth' });
}
</script>
</body>
Expand Down

0 comments on commit ce6a471

Please sign in to comment.