Skip to content

Commit 7a4263e

Browse files
learnwithnayanraylearnwithnayanray
authored
Complete Landing Page
1 parent b1afc51 commit 7a4263e

File tree

5 files changed

+428
-45
lines changed

5 files changed

+428
-45
lines changed

‎checkout.html

+85
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Nayan Ray - Web Developer</title>
7+
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
8+
integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8sh+WyCqO8f9U8h4fB5UZB/K5J8QO1SBQYUJ3" crossorigin="anonymous">
9+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
10+
<!-- Link Font Awesome CSS -->
11+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
12+
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
13+
<link rel="stylesheet" href="style.css">
14+
</head>
15+
<body>
16+
17+
<!-- Navigation -->
18+
<nav class="navbar navbar-expand-lg navbar-light bg-light">
19+
<a class="navbar-brand" href="index.html">Nayan Ray</a>
20+
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
21+
<span class="navbar-toggler-icon"></span>
22+
</button>
23+
<div class="collapse navbar-collapse" id="navbarNav">
24+
<ul class="navbar-nav ml-auto">
25+
<li class="nav-item active">
26+
<a class="nav-link" href="#slider">Home</a>
27+
</li>
28+
<li class="nav-item">
29+
<a class="nav-link" href="#services">Services</a>
30+
</li>
31+
<li class="nav-item">
32+
<a class="nav-link" href="#projects">Projects</a>
33+
</li>
34+
<li class="nav-item">
35+
<a class="nav-link" href="#pricing">Pricing</a>
36+
</li>
37+
<li class="nav-item">
38+
<a class="nav-link" href="#client-reviews">Reviews</a>
39+
</li>
40+
<li class="nav-item">
41+
<a class="nav-link" href="#total-projects">Total Projects</a>
42+
</li>
43+
</ul>
44+
</div>
45+
</nav>
46+
47+
<!-- Header Section -->
48+
<header id="slider" class="text-center">
49+
<h1>Hello i AM - Web Developer</h1>
50+
<!-- Add your slider content here using JavaScript -->
51+
</header>
52+
<section id="invoice" class="text-center bg-light py-5">
53+
<div class="container">
54+
<h2>Invoice</h2>
55+
<div id="invoice-details"></div>
56+
<button id="checkout-btn" class="btn btn-primary">Checkout</button>
57+
</div>
58+
</section>
59+
60+
<!-- Footer Section -->
61+
<footer class="text-center py-3" id="footer">
62+
<p>&copy; <span id="currentYear"></span> Nayan Ray - Web Developer</p>
63+
</footer>
64+
65+
<!-- Bootstrap JS and Popper.js (required for Bootstrap) -->
66+
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
67+
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
68+
crossorigin="anonymous"></script>
69+
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"
70+
integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8sh+WyCqO8f9U8h4fB5UZB/K5J8QO1SBQYUJ3"
71+
crossorigin="anonymous"></script>
72+
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
73+
integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8sh+WyCqO8f9U8h4fB5UZB/K5J8QO1SBQYUJ3"
74+
crossorigin="anonymous"></script>
75+
76+
<script src="main.js"></script>
77+
<script src="checkout.js"></script>
78+
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/js/all.min.js"></script>
79+
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
80+
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
81+
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
82+
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
83+
84+
</body>
85+
</html>

‎checkout.js

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
document.addEventListener("DOMContentLoaded", function() {
2+
const addToCartButtons = document.querySelectorAll(".add-to-cart");
3+
4+
addToCartButtons.forEach(button => {
5+
button.addEventListener("click", function() {
6+
const packageName = this.dataset.package;
7+
const packagePrice = parseFloat(this.value);
8+
const additionalOptions = document.querySelectorAll(`input[type="checkbox"]:checked`);
9+
let totalPrice = packagePrice;
10+
11+
additionalOptions.forEach(option => {
12+
totalPrice += parseFloat(option.value);
13+
});
14+
15+
const invoiceDetails = `
16+
<h3>${packageName}</h3>
17+
<p>Package Price: <strong>$${packagePrice.toFixed(2)}</strong></p>
18+
<p>Additional Options:</p>
19+
<ul>
20+
${additionalOptions.length > 0 ? Array.from(additionalOptions).map(option => `<li>${option.nextSibling.textContent}</li>`).join("") : "<li>No additional options selected</li>"}
21+
</ul>
22+
<p>Total Price: <strong>$${totalPrice.toFixed(2)}</strong></p>
23+
`;
24+
25+
document.getElementById("invoice-details").innerHTML = invoiceDetails;
26+
});
27+
});
28+
});

0 commit comments

Comments
 (0)