Creating a Book Store Website Using HTML, CSS, and JavaScript

Faraz

By Faraz -

Learn how to build a bookshop website using HTML, CSS, and JavaScript. Step-by-step guide for creating an online bookstore with great user experience.

Join us on Telegram
creating a book store website using html css and javascript.jpg
Read AlsoCreating a Password-Protected Screen HTML, CSS, JavaScript.jpgCreating a Password-Protected Screen: HTML, CSS, JavaScript

Table of Contents

  1. Project Introduction
  2. HTML Code
  3. CSS Code
  4. JavaScript Code
  5. Preview
  6. Conclusion

In this blog post, we will take you on a journey into the world of web development, where you'll learn how to create your very own bookshop website from scratch. Whether you're a book enthusiast looking to share your favorite reads or an aspiring e-commerce entrepreneur, this step-by-step guide will empower you to design and build a captivating online bookstore using HTML, CSS, and JavaScript.

The internet has transformed the way we access and share information, and it's no different for book lovers. With your own bookshop website, you can showcase your literary passions, connect with like-minded readers, and even turn your hobby into a profitable venture.

Web development might seem daunting at first, but fear not! We will break down the process into manageable steps, offering clear explanations and practical examples to ensure your success. By the end of this journey, you'll not only have a functional bookshop website but also a valuable skill set in web development.

So, grab your favorite book, fire up your code editor, and let's embark on this exciting adventure of creating an online haven for bookworms. Let's dive in and turn your dream of a bookshop website into a reality!

Source Code

Step 1 (HTML Code):

To get started, we will first need to create a basic HTML file. In this file, we will include the main structure for our bookstore.

After creating the files just paste the following codes into your file. Make sure to save your HTML document with a .html extension, so that it can be properly viewed in a web browser.

I'll break down the code and explain its different sections:

1. Document Type Declaration (<!DOCTYPE html>): This line declares the document type as HTML5, which is the latest version of HTML.

2. <html> Element: This is the root element of the HTML document, and it contains all other elements on the page. The lang attribute is set to "en" to specify that the document is in English.

3. <head> Element: The <head> section contains meta information and links to external resources that are essential for the webpage but not displayed on the page itself. It includes:

  • <meta> elements: These define the character encoding (charset), compatibility with Internet Explorer (X-UA-Compatible), and viewport settings for responsive design.
  • <title> element: Sets the title of the webpage, which is displayed in the browser's title bar or tab.
  • <link> elements: These link to external resources like CSS stylesheets and favicon images.

4. <body> Element: This is the main content of the webpage and contains everything that will be displayed on the page.

5. Header Section (<header>): This section represents the website's header, which includes the site logo, search bar, and navigation links.

6. Navigation Links (<nav>): This section contains navigation links for different sections of the website, such as "home," "featured," "category," "reviews," and "feedback."

7. Bottom Navbar (<nav>): This is a secondary navigation menu, typically used for quick access to specific sections of the page. It contains icons for "home," "featured," "arrivals," "reviews," and "feedback."

8. Login Form: This is a hidden login form that can be toggled by clicking on the user icon in the header.

9. Home Section (<section class="home">): This section contains a promotional banner with a headline, description, and a "shop now" button. It also includes an image slider (created using Swiper) with links to book images.

10. Icons Section (<section class="icons-container">): This section displays icons and descriptions for various features such as free shipping, secure payment, easy returns, and 24/7 support.

11. Featured Section (<section class="featured">): This section showcases featured books using a Swiper slider. Each book is displayed with an image, title, price, and an "add to cart" button.

12. Newsletter Section (<section class="newsletter">): This section allows users to subscribe for updates by entering their email address.

13. Category Section (<section class="arrivals">): This section displays different book categories using Swiper sliders. Each category is represented by an image and a title.

14. Deal Section (<section class="deal">): This section promotes a "deal of the day" with a discount percentage and a "shop now" button.

15. Reviews Section (<section class="reviews">): This section displays customer reviews using a Swiper slider. Each review includes an image, name, comment, and star rating.

16. Feedback Section (<section class="blogs">): This section provides a link to give feedback.

17. Footer Section (<section class="footer">): The footer contains various boxes with information, quick links, contact details, and social media links. It also includes a credit line for the creators and a copyright notice.

18. Loader: There is a loader with a loading GIF image that will be displayed while the page is loading.

19. JavaScript: The code includes a link to the Swiper library and a custom JavaScript file (script.js) for adding interactivity and functionality to the webpage.

This is the basic structure of our bookstore using HTML, and now we can move on to styling it using CSS.

Read Alsohow to create simple accordion using html css and javascript.pngThe Ultimate Guide to Creating Stunning Accordion with HTML, CSS and JavaScript

Step 2 (CSS Code):

Once the basic HTML structure of the bookstore website is in place, the next step is to add styling to the website using CSS.

Next, we will create our CSS file. In this file, we will use some basic CSS rules to style our website. Let's break down the code section by section:

1. @import:

  • This line imports an external font from Google Fonts (Poppins) and specifies different font weights (100, 300, 400, 500, 600) to be used in the website.
  • display: swap is used to ensure that the text content remains visible while the web font is being downloaded.

2. :root:

  • Defines global CSS variables (custom properties) to be used throughout the stylesheet. These variables are used to define colors, borders, box shadows, etc., making it easy to maintain and change the site's overall appearance.

3. *:

  • This is a universal selector, setting styles for all elements on the page.
  • It resets margin, padding, and border-box sizing, removes outlines and borders, and applies text styles like text-decoration and text-transform.
  • It also specifies a transition effect for all elements.

4. html:

  • Sets the font size to 62.5%, which is a common practice for easier font-size calculations (1rem = 10px).
  • Hides horizontal overflow and specifies scroll behavior for smooth scrolling.
  • Configures scrollbar styles for webkit-based browsers.

5. section:

  • Adds padding to all section elements.

6. .heading:

  • Styles for elements with the class "heading."
  • Includes text alignment, a horizontal line before the heading, and styling for a span element within the heading.

7. .btn:

  • Styles for elements with the class "btn," such as buttons.
  • Defines margin, padding, background color, and hover effect.

8. .header:

  • Styles for elements with the class "header."
  • It defines the appearance of the website's header, including the logo, search form, and icons.

9. #search-btn:

  • Styles for an element with the ID "search-btn," presumably a search button.
  • Sets it to display:none initially.

10. .bottom-navbar:

  • Styles for elements with the class "bottom-navbar," possibly for a navigation bar at the bottom of the page.

11. .login-form-container:

  • Styles for a container for a login form.
  • It specifies the form's appearance, including borders, background, and positioning.

12. .home:

  • Styles for elements with the class "home."
  • Defines a background image and styles for content within the home section.

13. .icons-container:

  • Styles for elements with the class "icons-container."
  • Defines a grid layout for icons.

14. .featured:

  • Styles for elements with the class "featured."
  • It specifies styles for featured items, including image containers, content, and icons.

15. .swiper-button-next and .swiper-button-prev:

  • Styles for next and previous buttons used in a swiper/slider component.

16. .newsletter:

  • Styles for elements with the class "newsletter."
  • Sets a background image for the newsletter section.

17. .arrivals:

  • Styles for elements with the class "arrivals."
  • Specifies styles for the arrivals section, including images, content, and prices.

18. .deal:

  • Styles for elements with the class "deal."
  • Defines styles for a deal section, including content and images.

19. .reviews and .blogs:

  • Styles for elements with the classes "reviews" and "blogs."
  • Specifies styles for review and blog sections, including images and content.

20. .footer:

  • Styles for elements with the class "footer."
  • Sets styles for the website's footer, including box containers and social share icons.

21. .loader-container:

  • Styles for a loader container, used for displaying a loading animation.

22. Media Queries:

  • These queries adjust styles based on screen width, making the website responsive for different devices and screen sizes.

This will give our bookstore website an upgraded presentation. Create a CSS file with the name of styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;400;500;600&display=swap');

:root{
    --green:#27ae60;
    --dark-color:#219150;
    --black:#444;
    --light-color:#666;
    --border:.1rem solid rgba(0,0,0,.1);
    --border-hover:.1rem solid var(--black);
    --box-shadow:0 .5rem 1rem rgba(0,0,0,.1);
}

*{
    font-family: 'Poppins', sans-serif;
    margin:0; padding:0;
    box-sizing: border-box;
    outline: none; border:none;
    text-decoration: none;
    text-transform: capitalize;
    transition:all .2s linear;
}

html{
    font-size: 62.5%;
    overflow-x: hidden;
    scroll-padding-top: 5rem;
    scroll-behavior: smooth;
}

html::-webkit-scrollbar{
    width:1rem;
}

html::-webkit-scrollbar-track{
    background:transparent;
}

html::-webkit-scrollbar-thumb{
    background:var(--black);
}

section{
    padding:5rem 9%;
}

.heading{
    text-align: center;
    margin-bottom: 2rem;
    position: relative;
}

.heading::before{
    content: '';
    position: absolute;
    top:50%; left:0;
    transform: translateY(-50%);
    width: 100%;
    height:.01rem;
    background: rgba(0,0,0,.1);
    z-index: -1;
}

.heading span{
    font-size: 3rem;
    padding:.5rem 2rem;
    color:var(--black);
    background: #fff;
    border:var(--border);
}

.btn{
    margin-top: 1rem;
    display:inline-block;
    padding:.9rem 3rem;
    border-radius: .5rem;
    color:#fff;
    background:var(--green);
    font-size: 1.7rem;
    cursor: pointer;
    font-weight: 500;
}

.btn:hover{
    background:var(--dark-color);
}

.header .header-1{
    background:#fff;
    padding:1.5rem 9%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header .header-1 .logo{
    font-size: 2.5rem;
    font-weight: bolder;
    color:var(--black);
}

.header .header-1 .logo i{
    color:var(--green);
}

.header .header-1 .search-form{
    width:50rem;
    height:5rem;
    border:var(--border);
    overflow: hidden;
    background:#fff;
    display:flex;
    align-items: center;
    border-radius: .5rem;
}

.header .header-1 .search-form input{
    font-size: 1.6rem;
    padding:0 1.2rem;
    height:100%;
    width:100%;
    text-transform: none;
    color:var(--black);
}

.header .header-1 .search-form label{
    font-size: 2.5rem;
    padding-right: 1.5rem;
    color:var(--black);
    cursor: pointer;
}

.header .header-1 .search-form label:hover{
    color:var(--green);
}

.header .header-1 .icons div,
.header .header-1 .icons a{
    font-size: 2.5rem;
    margin-left: 1.5rem;
    color:var(--black);
    cursor: pointer;
}

.header .header-1 .icons div:hover,
.header .header-1 .icons a:hover{
    color:var(--green);
}

#search-btn{
    display: none;
}

.header .header-2{
    background:var(--green);
}

.header .header-2 .navbar{
    text-align: center;
}

.header .header-2 .navbar a{
    color:#fff;
    display: inline-block;
    padding:1.2rem;
    font-size: 1.7rem;
}

.header .header-2 .navbar a:hover{
    background:var(--dark-color);
}

.header .header-2.active{
    position:fixed;
    top:0; left:0; right:0;
    z-index: 1000;

}

.bottom-navbar{
    text-align: center;
    background:var(--green);
    position: fixed;
    bottom:0; left:0; right:0;
    z-index: 1000;
    display: none;
}

.bottom-navbar a{
    font-size: 2.5rem;
    padding:2rem;
    color:#fff;
}

.bottom-navbar a:hover{
    background:var(--dark-color);
}

.login-form-container{
    display: flex;
    align-items: center;
    justify-content: center;
    background:rgba(255,255,255,.9);
    position:fixed;
    top:0; right:-105%;
    z-index: 10000;
    height:100%;
    width:100%;
}

.login-form-container.active{
    right:0;
}

.login-form-container form{
    background:#fff;
    border:var(--border);
    width:40rem;
    padding:2rem;
    box-shadow: var(--box-shadow);
    border-radius: .5rem;
    margin:2rem;
}

.login-form-container form h3{
    font-size: 2.5rem;
    text-transform: uppercase;
    color:var(--black);
    text-align: center;
}

.login-form-container form span{
    display: block;
    font-size: 1.5rem;
    padding-top: 1rem;
}

.login-form-container form .box{
    width: 100%;
    margin:.7rem 0;
    font-size: 1.6rem;
    border:var(--border);
    border-radius: .5rem;
    padding:1rem 1.2rem;
    color:var(--black);
    text-transform: none;
}

.login-form-container form .checkbox{
    display:flex;
    align-items: center;
    gap:.5rem;
    padding:1rem 0;
}

.login-form-container form .checkbox label{
    font-size: 1.5rem;
    color:var(--light-color);
    cursor: pointer;
}

.login-form-container form .btn{
    text-align: center;
    width:100%;
    margin:1.5rem 0;
}

.login-form-container form p{
    padding-top: .8rem;
    color:var(--light-color);
    font-size: 1.5rem;
}

.login-form-container form p a{
    color:var(--green);
    text-decoration: underline;
}

.login-form-container #close-login-btn{
    position: absolute;
    top:1.5rem; right:2.5rem;
    font-size: 5rem;
    color:var(--black);
    cursor: pointer;
}

.home{
    background: url(https://raw.githubusercontent.com/KordePriyanka/Books4MU-Book-Store-Website-/main/image/banner-bg.jpg) no-repeat;
    background-size: cover;
    background-position: center;
}

.home .row{
    display:flex;
    align-items: center;
    flex-wrap: wrap;
    gap:1.5rem;
}

.home .row .content{
    flex:1 1 42rem;
}

.home .row .books-slider{
    flex:1 1 42rem;
    text-align: center;
    margin-top: 2rem;
}

.home .row .books-slider a img{
    height: 25rem;
}

.home .row .books-slider a:hover img{
    transform: scale(.9);
}

.home .row .books-slider .stand{
    width:100%;
    margin-top: -2rem;
}

.home .row .content h3{
    color:var(--black);
    font-size: 4.5rem;
}

.home .row .content p{
    color:var(--light-color);
    font-size: 1.4rem;
    line-height: 2;
    padding:1rem 0;
}

.icons-container{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
    gap:1.5rem;
}

.icons-container .icons{
    display: flex;
    align-items: center;
    gap:1.5rem;
    padding:2rem 0;
}

.icons-container .icons i{
    font-size: 3.5rem;
    color:var(--green);
}

.icons-container .icons h3{
    font-size: 2.2rem;
    color:var(--black);
    padding-bottom: .5rem;
}

.icons-container .icons p{
    font-size: 1.4rem;
    color:var(--light-color);
}

.featured .featured-slider .box{
    margin:2rem 0;
    position: relative;
    overflow: hidden;
    border:var(--border);
    text-align: center;
}

.featured .featured-slider .box:hover{
    border:var(--border-hover);
}

.featured .featured-slider .box .image{
    padding:1rem;
    background: linear-gradient(15deg, #eee 30%, #fff 30.1%);
}

.featured .featured-slider .box:hover .image{
    transform: translateY(6rem);
}

.featured .featured-slider .box .image img{
    height: 25rem;
}

.featured .featured-slider .box .icons{
    border-bottom: var(--border-hover);
    position: absolute;
    top:0; left:0; right: 0;
    background: #fff;
    z-index: 1;
    transform: translateY(-105%);
}

.featured .featured-slider .box:hover .icons{
    transform: translateY(0%);
}

.featured .featured-slider .box .icons a{
    color:var(--black);
    font-size: 2.2rem;
    padding:1.3rem 1.5rem;
}

.featured .featured-slider .box .icons a:hover{
    background:var(--green);
    color:#fff;
}

.featured .featured-slider .box .content{
    background:#eee;
    padding:1.5rem;
}

.featured .featured-slider .box .content h3{
    font-size: 2rem;
    color:var(--black);
}

.featured .featured-slider .box .content .price{
    font-size: 2.2rem;
    color:var(--black);
    padding-top: 1rem;
}

.featured .featured-slider .box .content .price span{
    font-size: 1.5rem;
    color:var(--light-color);
    text-decoration: line-through;
}

.swiper-button-next,
.swiper-button-prev{
    border:var(--border-hover);
    height:4rem;
    width:4rem;
    color:var(--black);
    background: #fff;
}

.swiper-button-next::after,
.swiper-button-prev::after{
    font-size: 2rem;
}

.swiper-button-next:hover,
.swiper-button-prev:hover{
    background: var(--black);
    color:#fff;
}

.newsletter{
    background:url(https://raw.githubusercontent.com/KordePriyanka/Books4MU-Book-Store-Website-/main/image/letter-bg.jpg) no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.newsletter form{
    max-width: 45rem;
    margin-left: auto;
    text-align: center;
    padding:5rem 0;
}

.newsletter form h3{
    font-size: 2.2rem;
    color:#fff;
    padding-bottom: .7rem;
    font-weight: normal;
}

.newsletter form .box{
    width: 100%;
    margin: .7rem 0;
    padding:1rem 1.2rem;
    font-size: 1.6rem;
    color:var(--black);
    border-radius: .5rem;
    text-transform: none;
}

.arrivals .arrivals-slider .box{
    display: flex;
    align-items:center;
    gap:1.5rem;
    padding:2rem 1rem;
    border:var(--border);
    margin:1rem 0;
}

.arrivals .arrivals-slider .box:hover{
    border:var(--border-hover);
}

.arrivals .arrivals-slider .box .image img{
    height:15rem;
}

.arrivals .arrivals-slider .box .content h3{
    font-size: 2rem;
    color:var(--black);
}

.arrivals .arrivals-slider .box .content .price{
    font-size: 2.2rem;
    color:var(--black);
    padding-bottom: .5rem;
}

.arrivals .arrivals-slider .box .content .price span{
    font-size: 1.5rem;
    color:var(--light-color);
    text-decoration: line-through;
}

.arrivals .arrivals-slider .box .content .stars i{
    font-size: 1.5rem;
    color:var(--green);
}

.deal{
    background:#f3f3f3;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap:1.5rem;
}

.deal .content{
    flex:1 1 42rem;
}

.deal .image{
    flex:1 1 42rem;
}

.deal .image img{
    width: 100%;
}

.deal .content h3{
    color:var(--green);
    font-size: 2.5rem;
    padding-bottom: .5rem;
}

.deal .content h1{
    color:var(--black);
    font-size: 4rem;
}

.deal .content p{
    padding:1rem 0;
    color:var(--light-color);
    font-size: 1.4rem;
    line-height: 2;
}

.reviews .reviews-slider .box{
    border:var(--border);
    padding:2rem;
    text-align: center;
    margin:2rem 0;
}

.reviews .reviews-slider .box:hover{
    border:var(--border-hover);
}

.reviews .reviews-slider .box img{
    height:7rem;
    width:7rem;
    border-radius: 50%;
    object-fit: cover;
}

.reviews .reviews-slider .box h3{
    color:var(--black);
    font-size: 2.2rem;
    padding:.5rem 0;
}

.reviews .reviews-slider .box p{
    color:var(--light-color);
    font-size: 1.4rem;
    padding:1rem 0;
    line-height: 2;
}

.reviews .reviews-slider .box .stars{
    padding-top: .5rem;
}

.reviews .reviews-slider .box .stars i{
    font-size: 1.7rem;
    color:var(--green);
}

.blogs .blogs-slider .box{
    margin:2rem 0;
    border:var(--border);
}

.blogs .blogs-slider .box:hover{
    border:var(--border-hover);
}

.blogs .blogs-slider .box .image{
    height: 25rem;
    width: 100%;
    overflow: hidden;
}

.blogs .blogs-slider .box .image img{
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.blogs .blogs-slider .box:hover .image img{
    transform: scale(1.1);
}

.blogs .blogs-slider .box .content{
    padding:1.5rem;
}

.blogs .blogs-slider .box .content h3{
    font-size: 2.2rem;
    color:var(--black);
}

.blogs .blogs-slider .box .content p{
    font-size: 1.4rem;
    color:var(--light-color);
    padding:1rem 0;
    line-height: 2;
}

.footer .box-container{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
    gap:1.5rem;
}

.footer .box-container .box h3{
    font-size: 2.2rem;
    color:var(--black);
    padding:1rem 0;
}

.footer .box-container .box a{
    display: block;
    font-size: 1.4rem;
    color:var(--light-color);
    padding:1rem 0;
}

.footer .box-container .box a i{
    color:var(--green);
    padding-right: .5rem;
}

.footer .box-container .box a:hover i{
    padding-right: 2rem;
}

.footer .box-container .box .map{
    width:100%;
}

.footer .share{
    padding:1rem 0;
    text-align: center;
}

.footer .share a{
    height: 5rem;
    width: 5rem;
    line-height: 5rem;
    font-size: 2rem;
    color:#fff;
    background:var(--green);
    margin:0 .3rem;
    border-radius: 50%; 
}

.footer .share a:hover{
    background:var(--black);
}

.footer .credit{
    border-top: var(--border);
    margin-top: 2rem;
    padding:0 1rem;
    padding-top: 2.5rem;
    font-size: 2rem;
    color:var(--light-color);
    text-align: center;
}

.footer .credit span{
    color:var(--green);
}

.loader-container{
    position: fixed;
    top:0; left: 0;
    height:100%;
    width: 100%;
    z-index: 10000;
    background:#f7f7f7;
    display: flex;
    align-items: center;
    justify-content: center;
}

.loader-container.active{
    display: none;
}

.loader-container img{
    height:10rem;
}










/* media queries  */

@media (max-width:991px){

    html{
        font-size: 55%;
    }

    .header .header-1{
        padding:2rem;
    }

    section{
        padding:3rem 2rem;
    }

}

@media (max-width:768px){

    html{
        scroll-padding-top: 0;
    }

    body{
        padding-bottom: 6rem;
    }

    .header .header-2{
        display:none;
    }

    .bottom-navbar{
        display: block;
    }

    #search-btn{
        display: inline-block;
    }

    .header .header-1{
        box-shadow: var(--box-shadow);
        position: relative;
    }

    .header .header-1 .search-form{
        position:absolute;
        top:-115%; right:2rem;
        width: 90%;
        box-shadow: var(--box-shadow);
    }

    .header .header-1 .search-form.active{
        top:115%;
    }

    .home .row .content{
        text-align: center;
    }

    .home .row .content h3{
        font-size: 3.5rem;
    }

    .newsletter{
        background-position: right;
    }

    .newsletter form{
        margin-left:0;
        max-width: 100%;
    }

}

@media (max-width:450px){

    html{
        font-size: 50%;
    }

}

Step 3 (JavaScript Code):

Finally, we need to create a function in JavaScript. Let me break down the code for you step by step:

1. DOM Element Selection:

  • searchForm is a variable that is assigned the result of selecting an HTML element with the class "search-form" using document.querySelector().
  • loginForm is a variable that is assigned the result of selecting an HTML element with the class "login-form-container" using document.querySelector().

2. Button Click Event Listeners:

  • When the element with the ID "search-btn" is clicked, a function is executed. This function toggles the "active" class on the searchForm element, which typically changes its appearance or behavior.
  • When the element with the ID "login-btn" is clicked, a function is executed. This function toggles the "active" class on the loginForm element.
  • When the element with the ID "close-login-btn" is clicked, a function is executed. This function removes the "active" class from the loginForm element, effectively hiding it.

3. Scroll Event Listener:

  • When the window is scrolled, a function is executed.
  • It first removes the "active" class from the searchForm element.
  • Then, it checks if the vertical scroll position (window.scrollY) is greater than 80 pixels. If it is, it adds the "active" class to an element with the class "header-2" inside an element with the class "header". This changes the appearance of the header when the user scrolls down the page.

4. Window Load Event Listener:

  • When the window finishes loading, a function is executed.
  • Similar to the scroll event listener, it checks the vertical scroll position and adds or removes the "active" class from the same "header-2" element based on the scroll position.
  • It also calls two functions, fadeOut() and loader(), although the definition of fadeOut() is not provided in this code snippet.

5. Swiper Sliders:

  • Several Swiper sliders are initialized using the Swiper library. These sliders are responsible for creating carousel-like displays with various options, such as autoplay, navigation buttons, and responsive layouts. Multiple instances of the Swiper class are created to handle different slider elements on the page, each with its own set of options.

Create a JavaScript file with the name script.js and paste the given codes into your JavaScript file and make sure it's linked properly to your HTML document so that the scripts are executed on the page. Remember, you’ve to create a file with .js extension.

searchForm = document.querySelector('.search-form');

document.querySelector('#search-btn').onclick = () =>{
  searchForm.classList.toggle('active');
}

let loginForm = document.querySelector('.login-form-container');

document.querySelector('#login-btn').onclick = () =>{
  loginForm.classList.toggle('active');
}

document.querySelector('#close-login-btn').onclick = () =>{
  loginForm.classList.remove('active');
}

window.onscroll = () =>{

  searchForm.classList.remove('active');

  if(window.scrollY > 80){
    document.querySelector('.header .header-2').classList.add('active');
  }else{
    document.querySelector('.header .header-2').classList.remove('active');
  }

}

window.onload = () =>{

  if(window.scrollY > 80){
    document.querySelector('.header .header-2').classList.add('active');
  }else{
    document.querySelector('.header .header-2').classList.remove('active');
  }

  fadeOut();

}

function loader(){
  document.querySelector('.loader-container').classList.add('active');
}

function fadeOut(){
  setTimeout(loader, 4000);
}

var swiper = new Swiper(".books-slider", {
  loop:true,
  centeredSlides: true,
  autoplay: {
    delay: 9500,
    disableOnInteraction: false,
  },
  breakpoints: {
    0: {
      slidesPerView: 1,
    },
    768: {
      slidesPerView: 2,
    },
    1024: {
      slidesPerView: 3,
    },
  },
});

var swiper = new Swiper(".featured-slider", {
  spaceBetween: 10,
  loop:true,
  centeredSlides: true,
  autoplay: {
    delay: 9500,
    disableOnInteraction: false,
  },
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",
  },
  breakpoints: {
    0: {
      slidesPerView: 1,
    },
    450: {
      slidesPerView: 2,
    },
    768: {
      slidesPerView: 3,
    },
    1024: {
      slidesPerView: 4,
    },
  },
});

var swiper = new Swiper(".arrivals-slider", {
  spaceBetween: 10,
  loop:true,
  centeredSlides: true,
  autoplay: {
    delay: 9500,
    disableOnInteraction: false,
  },
  breakpoints: {
    0: {
      slidesPerView: 1,
    },
    768: {
      slidesPerView: 2,
    },
    1024: {
      slidesPerView: 3,
    },
  },
});

var swiper = new Swiper(".reviews-slider", {
  spaceBetween: 10,
  grabCursor:true,
  loop:true,
  centeredSlides: true,
  autoplay: {
    delay: 9500,
    disableOnInteraction: false,
  },
  breakpoints: {
    0: {
      slidesPerView: 1,
    },
    768: {
      slidesPerView: 2,
    },
    1024: {
      slidesPerView: 3,
    },
  },
});

var swiper = new Swiper(".blogs-slider", {
  spaceBetween: 10,
  grabCursor:true,
  loop:true,
  centeredSlides: true,
  autoplay: {
    delay: 9500,
    disableOnInteraction: false,
  },
  breakpoints: {
    0: {
      slidesPerView: 1,
    },
    768: {
      slidesPerView: 2,
    },
    1024: {
      slidesPerView: 3,
    },
  },
});

Final Output:

creating a book store website using html css and javascript.gif
Read AlsoCreating a Clone of a Bootstrap Website using HTML and CSS.jpgCreating a Clone of a Bootstrap Website using HTML and CSS

Conclusion:

Congratulations! You've reached the end of our comprehensive guide on creating a bookshop website using HTML, CSS, and JavaScript. We hope this journey has been both educational and inspiring, and you now feel empowered to embark on your own web development adventure.

Thank you for joining us on this exciting path to web development success. We wish you the best of luck with your bookshop website project and all your future web endeavors. Happy coding and happy reading!

Code by: Priyanka Korde

Full Source Code: Here

That’s a wrap!

I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.

Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee.

And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!

Thanks!
Faraz 😊

Tags: bookshop website, html, css, javascript, website development, online bookstore, source code, how to create a bookshop website from scratch, designing an online bookstore with html and css, bookstore landing page
End of the article

Subscribe to my Newsletter

Get the latest posts delivered right to your inbox

Latest Post