Scribd
Upload
17 views4 pages

Experiment 2 Record Format

Uploaded by

23ag1a6651
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
17 views4 pages

Experiment 2 Record Format

Uploaded by

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

Experiment 2

Make the above web application responsive web application using Bootstrap framework.

Aim:

To implement a responsive web application for a shopping cart with registration, login, catalog, and cart
pages using Bootstrap framework.

Objective:

To create a shopping cart web application with registration, login, catalog and cart.

To get responsiveness across various devices using Bootstrap framework.

Procedure:

Step 1:

Download the bootstrap file.

Step 2:
Create a folder and open in VS code.

Step 3:

Create a catalog.html, catalog.js, cart.html , cart.js, login.html, login.js , register.html, register.js and
style.css.

Step 4:

Link the bootstrap files in all html pages.

Step 5:

Write all the relevant codes and click on live server or open it in browser by copying path.

Step 6:

Open the console page by clicking on inspect for errors.

Code Snippet:

Catalog.html:

<div class="container-fluid">

<nav class="navbar navbar-expand-lg bg-primary text-white">

//code related to navbar

</nav>
<div class=" d-flex flex-wrap justify-content-center row row-cols-1 row-cols-sm-2 row-cols-md-3 row-
cols-lg-4">

<div class=" card individual-products d-flex align-items-center justify-content-center col">

<img src="/images/tab.jpg" alt="" class="prd-img p-1 rounded-lg"/>

<div class="product-info card-body">

<h3>Tab</h3>

<p> ₹ 66970 </p>

<p class="description">Electronics</p>

<button class="cart-btn btn btn-info text-white" onclick="add_to_cart('1',

'/images/tab.jpg',

'Tab',

'66970 '

)">Add to cart</button>

</div>

// repeat the products

</div>

<footer class="fixed-bottom mt-3 text-center text-white bg-primary">

@ 2024 Shopping Cart All rights reserved

</footer>

</div>

Cart.html:

<div class="container-fluid">

<nav class="navbar navbar-expand-lg bg-primary text-white">

//code related to navbar

</nav>

<div class="cart-page d-grid justify-content-center">

<div id="cart-items" class=""></div>


<h3 id="total-price" class=" my-5 text-center">Total Price:0</h3>

</div>

<footer class="fixed-bottom text-center text-white bg-primary">

@ 2024 Shopping Cart All rights reserved

</footer>

</div>

login.html:

<form>

<label class="">Username:</label>

<input type="text" id="username" class="form-control">

<label >Password:</label>

<input type="password" id="password" class="form-control">

<button class="btn btn-primary w-100 mt-2" type="submit"


onclick="form_data(event)">Login</button>

</form>

style.css:

img {

height: 120px;

width: 120px;

.individual-products {

background-color: lightcyan;

border-radius: 5px;

box-shadow: 5px 5px lightblue;

}
.cart-img {

height: 80px;

width: 80px;

border-radius: 5px;

.cart-ind-products {

background-color: lightcyan;

Conclusion:

successfully built a responsive web application for a shopping cart using Bootstrap framework in VS
Code.

You might also like