This tutorial covers a beginner introduction into jQuery. According to the documentation.

jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.

The first part of this tutorial will cover the library's ability to enable developers make the basic HTML more interactive for users to have a pleasant time on your website even though you are writing less and not having to use a JavaScript framework like Vue/ Angular or the larger and more complex JavaScript library; React JS.

The second part of this tutorial will be about using the jQuery Ajax method to consume an API.

Prerequisites

  • HTML
  • CSS
  • Bootstrap 4 -Basics
  • jQuery -Basics
  • Github -Basics

Creating the Markup

Whenever you are creating a project always try and solve a problem you are passionate about, this way you can work on the project with a lot of inspiration. So for my store I am going to work on an outfit store because I am in love with well put together outfits, think about what you would sell or want to sell if you had a store and change this tutorial as you deem fit to best suite your store's needs.

The markup goes in your index.html file. Make sure all your files are well linked into your index.html file as shown below before you start writing the HTML code. The script tags are at the bottom right before the body closing tag.

links
GitHub Gist: instantly share code, notes, and snippets.

We are going to need the navigation bar and basic introduction to the store. If you are looking to create your own custom navigation bar that is fine but if you want inspiration for the navigation bar checkout this section of the bootstrap 4 navigation bars.

Navbar
Documentation and examples for Bootstrap’s powerful, responsive navigation header, the navbar. Includes support for branding, navigation, and more, including support for our collapse plugin.
bootstrap 4 navigation bars

For the introduction of the store you can have a one liner or go into as much detail as you would like.

The next part of our website will be about the display of our goods. The decoded couture store has to be able to allow our clients the ability to select combined options to form an outfit and that is where the jQuery magic happens. Feel free to get down and dirty with the Navbar and introduction paragraph. Here is how mine looks like:

The markup and CSS for the above file can be found here:

For the products we are going for an interactive way for our customers to use this website and have a lot of fun doing it while we also save on space. jQuery has animation styles that we can use.

toggle() is a jQuery animation method that allows us to be able to use the same spot for two things, for example: you want to have the description of an image pop up once you click the image. Not only are such animations fun but they also make sure your page doesn't have a lot of scrolling and that enhances the user experience. We also want customers to be able to select from different prices of the same dress if there is a similar one in the market. So write the description for your items and add the the image, remember you can get free images at unsplash.com. So this is how my site looks like without using jQuery:

As you can see, this does take a lot of space. So to get started with jQuery.

jQuery code goes into the index.js file. To work with jQuery, you can either link the content delivery network (CDN)  from the official site or download it like we did. In our project we have downloaded jQuery in our javaScript folder. Linking CDNs might be tricky if you want to present your work and there is no internet, it is less risky to download libraries and you can always download the files from the official sites of programming technologies. After you have linked jQuery successfully in your mark up, you can now write the jQuery code in your .js file. To begin the code we start with:

$(document).ready(function() {

//your code goes in here

});

This function simply means that once the document goes through the .ready event i.e. the document is fully loaded and only after that can the jQuery functions manipulate/animate /the markup in our case that is our index.html.

To quote the jQuery documentation:

A page can't be manipulated safely until the document is "ready." jQuery detects this state of readiness for you. Code included inside $( document ).ready() will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute. Code included inside $( window ).on( "load", function() { ... }) will run once the entire page (images or iframes), not just the DOM, is ready.

Now that we have our page ready it is time for us to implement the function that will allow us to only read the definition of products after we click on the image

$(".whatwedo p").hide();


$('.whatwedo img.one').click(function() {
    $(".whatwedo img.one").toggle();
    $(".whatwedo p.one").toggle();
  });

We start by selecting the paragraph using selectors; In our html, the paragraph is in the whatwedo class. Thereafter we apply the .hide() method to hide the paragraph . Then we select the image, then once clicked the .click() method will be fulfilled and the description will show. The .toggle() method is called twice so that once the text is visible you can click the text and have the images appear.

This is how the website looks once it loads:

Once you click the images , the text appears as below

Currently in our website we allow our users the ability to select our products depending on their budget but we need to put in place a submit button that will allow them to submit their choice of outfit from Decoded Couture. The submit button should also allow our users to be able see a table that allows them to view their total .The .append() method will allow us to add all the products and get the total.

According to the jQuery documentation

The .append() method inserts the specified content as the last child of each element in the jQuery collection (To insert it as the first child, use .prepend()).

However, it is important to note that the table we need to add will be in out html file and we have to use the .hide() method to hide the table initially when the website loads. The table will also need to have id selectors that will allow us to add the prices together for a grand total. Then once the submit button is clicked the information will be appended on the table in accordance to the corresponding id selector in the table and at that point, the table will be visible on the website


      <table class="table">
        <thead>
          <tr>
            <th scope="col">Order No.</th>
            <th scope="col">Dress</th>
            <th scope="col">Heels</th>
            <th scope="col">Accessories</th>
            <th scope="col">Total</th>
          </tr>
        </thead>
        <tbody id="Outfit">
          <tr>
            <th scope="row">1</th>
            <td id="dress"></td>
            <td id="heels"></td>
            <td id="accessories"></td>
            <td id="total"></td>
          </tr>
        </tbody>
      </table>

After this code, here is the table without the jQuery .hide() method. This is clearly chaotic.

So now we write the jQuery code to prevent this disaster from happening. I will use ES5 so as to be beginner friendly but definitely challenge yourself to ES6 to sharpen your skills

$("table").hide();
$(".additional-buttons").hide();
$(".additional-info").hide();
$(".btn.yes").hide();
$(".btn.no").hide();
$(".additional-info h4").hide();

$('.btn.order').click(function() {
  var dress = $(".dress option:selected").val();
  var heels = $(".heels option:selected").val();
  var accessories = $(".accessories option:selected").val();
  var total = parseInt(dress) + parseInt(heels) + parseInt(accessories);
  var order = 1;
  var grandTotal = 0;

  $("table").show();
  $(".additional-buttons").show();
  $(".btn.order").hide();

  $("#dress").html($(".dress option:selected").text() + " - " + dress);
  $("#heels").html($(".heels option:selected").text() + " - " + heels);
  $("#accessories").html($(".accessories option:selected").text() + " - " + accessories);
  $("#total").html(total);

     function Outfit(dress, heels, accessories, total, orderNo) {
    this.dress = dress;
    this.heels = heels;
    this.accessories = accessories;
    this.total = total;
    this.orderNo = orderNo;
  }

});

$('.btn.add-outfit').click(function() {
    var dress = $(".dress option:selected").val();
    var heels = $(".heels option:selected").val();
    var accessories = $(".accessories option:selected").val();
    var total = parseInt(dress) + parseInt(heels) + parseInt(accessories);
    order = order + 1;
    grandTotal = grandTotal + total;


    var newOutfit = new Outfit(dress, heels, accessories, total, order);

    var newRow = '<tr><th scope="row">' + newOutfit.orderNo + '</th><td id="dress">' + $(".dress option:selected").text() + " - " + newOutfit.size + '</td><td id="heels>' + $(".heels option:selected").text() + " - " + newOutfit.heels + '</td><td id="accessories">' + $(".accessories option:selected").text() + " - " + newOutfit.accessories + '</td><td id="total">' + newOutfit.total + '</td></tr>'

    $("#outfit").append(newRow); 
    
    
   ** add the rest of the code here **

The beginning of the jQuery code is basically using the .hide() method to ensure that once the page loads, the table is and the buttons that we don't want to show to the person loading the page. So once you load the page this is what you see

This feels clean as the page is not cluttered.

The second part of the code is creating a mathematical calculation to be able to calculate an outfit order. The outfit is made up of a dress, heels and accessories and the price is made up of the first order and any other order that will be made. Using the constructor function 'Outfit' we are able to sum all these up easily and keep applying this constructor function to other outfits using the key word 'new'. We also add the total price by referencing the value we assigned the products in our HTML. All the HTML code can be found in the index.html in this repository : https://github.com/Janice-M/decoded-couture

The last part of the code is using .append() method to append a row that consists of all the parameters in our constructor function. So once you click order, this is what you see:

The add another button is also now revealed . To add functionality to this button, a checkout button and the ability for our customer to be able to request delivery we add the following jQuery code into our index.js file:

$(".btn.check-out").click(function() {
    $(".btn.add-Outfit").hide();
    $(".btn.check-out").hide();
    $(".additional-info").show();
    $(".btn.yes").show();
    $(".btn.no").show();
    $(".additional-info .location").hide();
    grandTotal = grandTotal + total;

    $(".additional-info h3 span").html(grandTotal);
  });

  $(".btn.yes").click(function() {
    $(".additional-info h5").hide();
    $(".btn.yes").hide();
    $(".btn.no").hide();
    $(".additional-info .location").show();
    $(".additional-info h3 span").html(grandTotal + 200);
  });

  $(".btn.no").click(function() {
    $(".additional-info h5").hide();
    $(".btn.yes").hide();
    $(".btn.no").hide();
    $(".additional-info .location").show();
  });

  $(".btn.complete").click(function() {
    var location = $(".additional-info .location input").val();
    $(".additional-info h4").show();
    $(".additional-info .location").hide();
    $(".additional-info h4 span").html(location);
  });

});

});

Most of the methods above are just for hiding and showing the buttons as we had discussed before. This allows you not to crowd your page, once all the buttons are visible and an order is fulfilled it looks like this

Conclusion

This marks the end of part one for this tutorial. I hope you will now be able to explore jQuery more freely.

The extensions necessary for this project can be found in this GitHub repository

The folder and file arrangement are as as follows:

Find the repository here

Find the couture and the completed site at here

If you are stuck on where to get free images for this and all your websites please do check out unsplash.com

Feel free to contribute as much as you would like in the public repository as you wish.

Happy coding!

You've successfully subscribed to Decoded For Devs
Welcome back! You've successfully signed in.
Great! You've successfully signed up.
Your link has expired
Success! Your account is fully activated, you now have access to all content.