Now Utility in jQuery Tutorial

Welcome to the Now Utility tutorial! In this lesson, we'll explore one of the most useful jQuery plugins - Now UI Kit - and learn how to use its utility functions. Let's get started! 🎯

Introduction to Now UI Kit

Now UI Kit is an open-source, Bootstrap 4-based design system and React component library for building beautiful and fast web applications. Its utility functions make it easier to perform common tasks with just a few lines of code. 📝

Getting Started

To use Now UI Kit, first, include the necessary files in your HTML file:

html

<!-- Now UI Kit CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/now-ui-kit/1.5.0/nowui-kit.min.css" rel="stylesheet">

<!-- Now UI Kit JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/now-ui-kit/1.5.0/nowui-kit.min.js"></script>

Understanding Now Utility Functions

Now UI Kit's utility functions help you perform various tasks, such as handling forms, working with animations, managing modal windows, and more. Let's dive into two practical examples to better understand these functions. 💡

Example 1: Animating Elements

Now UI Kit provides several animation functions, including fadeIn, fadeOut, slideIn, and slideOut. Here's how to use the fadeIn function:

html

<!-- HTML structure -->
<div id="my-element" style="display: none;">Hello, World!</div>

<!-- jQuery code -->
<script>
  jQuery(document).ready(function() {
    jQuery('#my-element').fadeIn(1000);
  });
</script>

In this example, we have an invisible div containing "Hello, World!". By using the fadeIn function, we animate the div to become visible over 1000 milliseconds.

Example 2: Validating Forms

Now UI Kit also includes a simple form validation function. Let's create a basic login form and validate its fields:

html

<!-- HTML structure -->
<form id="login-form">
  <div class="form-group">
    <label for="username">Username</label>
    <input type="text" class="form-control" id="username" required>
  </div>
  <div class="form-group">
    <label for="password">Password</label>
    <input type="password" class="form-control" id="password" required>
  </div>
  <button type="submit" class="btn btn-primary">Login</button>
</form>

<!-- jQuery code -->
<script>
  jQuery(document).ready(function() {
    jQuery('#login-form').on('submit', function(e) {
      e.preventDefault();
      var isValid = true;

      jQuery('input', this).each(function() {
        if (!jQuery(this).val()) {
          isValid = false;
          jQuery(this).addClass('is-invalid');
        } else {
          jQuery(this).removeClass('is-invalid');
        }
      });

      if (isValid) {
        // Perform login logic here
      }
    });
  });
</script>

In this example, we've created a login form with two fields: username and password. When the form is submitted, jQuery validates the inputs and adds the is-invalid class to invalid fields.

Wrapping Up

Now UI Kit's utility functions can greatly simplify common tasks in your projects. From animating elements to validating forms, these functions make developing web applications easier and more efficient. ✅