Shopping card using HTML,CSS and Javascript.

Hello readers we are back with an other interesting article based on the topic HTML and Javascript. Hope all are doing well and safe. Explore all the contents in our blog and please support us.

HTML,CSS and Javascript are main languages to design a web page as we all know. They are like siblings. HTML and CSS take care about the structure, design and styles while Javascript is like heart for writing the web page. It takes care of the operations to be performed on various events like button clicks, on hover,on double tap and many other events.

In this article we are gonna discuss about creating a basic and very simple shopping card.

What information will the shopping card contain?

contains name of the product.
Colors if any are present.
The available sizes.
Add to cart button.
Buy now button.

HTML:

Inside the "card" class the name of the product using h2 tag with styling yellow color. First in the HTML insert only one image of any one color. The height and width are adjusted according to the convenience.

The form is created using the <form> tag and in the 'action' attribute a link to the page must be given where the details must be submitted.

In the next part for selecting the size option radio buttons are created. Note : For the radio buttons "name" attribute must be same so that only one option can be selected if different names are given multiple options are selected.

Next part is creating the buttons for different colors using <input> tag with type as "button" .For each button the color is set to the name of the color in the button.

Next comes the "add to cart" and "buy now" button . 'Add to cart' is created through anchor tag and the 'Buy now' button is created through <input> tag with type "submit" so that the details will be submitted the page specified in 'action' attribute in the form tag.

CSS:

The body-background is set to black and the position of the card is set to the center using 'place-items'.

For the image the width and height are set according the convenience.For the class 'card' the width is set to 350px and the height to 555px. This may be edited according to the convenience. Many attributes like 'box-shadow' ,border', 'border-radius' are specified.

The shopping cart is used in the 'Add to cart' button using 'fa' class with background set to brown and padding set to 10px.

For the 'input type=submit' button also the style is added similar to the add to cart button.

Javascript:

In the HTML while creating the buttons which have the name of the colors, each button is specified with a seperate functions to the 'onclick' attribute. Each function is to change the colors to the color given inside the function. In the HTML part the <img> tag is given an id 'colors'. This tag is retreived in the Javascript using 'document.getElementById('colors')'. Using this each function will change the 'src' of the <img> tag to the image containing T-shirt of the respective color given inside the function.

Source codes:

Click here to download the codes.

HTML:

<!DOCTYPE html>
  <!--created by RiseProgramming-->
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
    <title>shopping card</title>
  </head>
  <body>
    <div class="card">
      <h2 style="text-align:center;color:yellow;">T-shirt</h2>
      <img src="black.jpg" id="colors" height=200px><br><br>
      <form action=""target.php" style="padding-left:50px;"">

      <input type="radio" name="size" value="S">S
      <input type="radio" name="size" value="m">M
      <input type="radio" name="size" value="L">L
      <input type="radio" name="size" value="xl">XL
      <h5>colors:</h5>
            <input type="button" style="background-color:black;color:white;" onclick="black()" name="color" value="black">
            <input type="button" onclick="blue()" style="background-color:blue;color:white" name="color" value="blue">
            <input type="button" onclick="red()" style="background-color:red;color:white;" name="color" value="red"><br><br>


            <input type="button" onclick="change_color()" name="apply" value="apply">


    <br><br><br><br>
     <a href='#' id='cart1'><i class='fa fa-shopping-cart'> Add to cart</i></a>
    <input type="submit" name="buy" value="Buy Now >>">
    </form>
  </div>


  </body>
</html>

CSS:

html,body{
  display: grid;
  height: 100%;
  place-items: center;
  background: black;
}
    img{

      padding-left: 10px;
      width:330px;
      padding-top: 5px;
    }
    .card
    {

      width:350px;
      height: 555px;
      box-shadow :0 4px 8px 0 rgba(0,0,0,0.2);;
      transition: 0.3;
      border:1px inset blue;
      border-radius: 20px;
      background-color: #00ffcc;




    }
    form{
      border:1px inset blue;
      border-radius: 20px;
      background-color: #ccccff;
    }
    .button{
      background-color: yellow;
      color: yellow;
    }
    .fa{
      background-color: brown;
      padding: 10px;
      color: yellow;
      border-radius: 10px;

    }
    input[type="submit"]{
      padding: 10px;
      background-color: brown;
      color: yellow;
      text-decoration: none;
      border-radius: 10px;
    }
    input[type="submit"]:hover{
    background-color: #4da6ff;

  }
  }

Javascript:

function black(){
  document.getElementById("colors").src="black.jpg"
}
function blue(){
  document.getElementById("colors").src="blue.jpg"
}
function red(){
  document.getElementById("colors").src="red.jpg"
}

RiseProgramming

HTML:

CSS:

Javascript:

Source codes:

Post a Comment

Post a Comment

About Us

Contact Form

Shopping card using HTML,CSS and Javascript.

HTML:

CSS:

Javascript:

Source codes:

You might like

Post a Comment

Post a Comment

Contact Form