Forem: sankha

jQuery is a fun

sankha — Mon, 08 Nov 2021 14:37:52 +0000

As a web designer or developer, we have few beautiful weapons in our armory that showcase our creativity while developing a web page and enhanced the user experience lot more. One of such mechanism is manipulating of the Document Object Model (the Dom) by jQuery. Before we jump into the nitty-gritty of the DOM manipulation when first see what the Document Object Model all about. According to W3 school “the DOM defines a standard for accessing documents” and The HTML DOM is a standard object model and programming interface for HTML. So, when a web page is loaded, the browser creates and define a logical structure of HTML elements for a web page, and based on that structure browser render the HTML elements page on its screen.

The HTML DOM model is look like a tree of Objects

Now, we see what is jQuery all about, again according the W3 school “jQuery is a lightweight, write less, do more, JavaScript library.” It is a cross-platform and all most all major browsers, like Internet Explorer, Chrome, Mozilla Firefox, Safari and opera as well mobile browsers are supporting it.

So, why we need to do The HTML DOM manipulation with the jQuery. Actually, with jQuery we can access all the HTML DOM elements and can change the properties and behavior of the HTML DOM very easily and effortlessly. Obviously, with the HTML DOM manipulation, user experience enhances a lot. The jQuery provides various methods to add, edit or delete DOM element(s) in an HTML page, but in this article, it is not possible to provide details of all methods.

In my view, with the combination of the HTML DOM, CSS and jQuery we can provide very useful front-end features without any back-end dependency. For example, nowadays, one of the very popular features, which I often called as utilities is to show password value in a text format in the password field input box by the clicking on an eye icon or checkbox check status, or masking a few characters of a bank account number or any user id, citizenship number and so on.

Here is a small JavaScript code to show hides password values in a text box clicking on an eye icon.

HTML


    <div class="row">
        <div class="col-12">
            <label for="Password" class="form-lable__login"><b>Enter Password</b></label>
            <input type="password" class="frmInp logRegi__inp showHidePass" id="userpassword" placeholder="" name="psw" >

             <i class='fa fa-eye eyeNormal ShowHidePass' aria-hidden="true"></i> <!-- font asesome eye icon fa fa-eye-->
             <i class='fa fa-eye-slash eyeSlash ShowHidePass' style="display: none;" aria-hidden="true"></i> <!-- font asesome eye icon fa fa-eye-->


        </div>
    </div>

JavaScript


<script>
          $(function() {
              $(".ShowHidePass").click(function() {
                  var checkClassStatus = $(this).hasClass("fa-eye");

                  if(checkClassStatus) {
                    $(".showHidePass").attr("type","text");
                     $(this).removeClass("fa-eye").addClass("fa-eye-slash");
                  }

                  else {
                    $(".showHidePass").attr("type","password");
                     $(this).removeClass("fa-eye-slash").addClass("fa-eye");
                  }

              })
          });

      </script>

We can do a lot of useful and user-friendly front-end functionality with the help of jQuery. Another nice example is when a user puts focus on an input box, the input box label moves up automatically creating a space to enter a value. Though this is totally depending up to the designer/developers’ choice where to put the input label, but as most of the time we do the responsive design, i.e., same design content adjusts automatically to various device screen sizes based on available screen width, so it’s best practice to user to available screen space judiciously. As if we place a label above of an input box, for font-size and other CSS property label will take for the height space which sometimes creates unnecessary scrolling in the browser. But if we place the label top of an input box and move the label up and decrease the font-size a bit while user put focus on the input box not only, we save some space as well as it’s given you a nice animation effect.

Here is a small snippet of the code


     $(function() {   
    $(".logRegi__inp").each(function() {
      /* While user focusing on an input textbox moves the label upward */
       $(this).focus(function() {
           $(this).siblings(".form-lable__login").addClass("form-lable__login--active");
           $(".frmInp").removeClass("InpBoxError");
           $(".txtError").removeClass("showErrorHide");
           $(".txtError").siblings(".loginInpIcon").removeClass("loginInpIconError");
       });

/*when user clicks outside of the input box, i.e., anywhere in the browser screen without typing anything in the textbox, bringing back the label top of the input textbox, which already move up while focused */
       $(this).blur(function() {
        var getTxt = $(this).val();
        if(getTxt!="") {
            $(this).siblings(".form-lable__login").addClass("form-lable__login--active");   
        }

        else {
            $(this).siblings(".form-lable__login").removeClass("form-lable__login--active");
        }
    });

       $(this).keyup(function(e) {
            var getTxt = $(this).val();

            var keyCode = e.keyCode || e.which; 

            $(this).val($(this).val().replace(/\s/g, '')); // disable typing whitespace in textbox // 

           if(getTxt!="" || keyCode == 9) {
               $(this).siblings(".form-lable__login").addClass("form-lable__login--active");

           }

           else {
               $(this).siblings(".form-lable__login").removeClass("form-lable__login--active");
           } 
       });
    });
});.

HTML


      <div class="container">
                                <div class="row mb-30P">
                                    <div class="col-12">
                                         <input type="text" class="frmInp logRegi__inp" id="username" placeholder="" name="uname" >
                                         <label for="uname" class="form-lable__login"><b>UserID</b><span class="req">*</span></label>
                                         <i class='fas fa-user loginInpIcon'></i>
                                         <p class="txtError username mb-0"></p>
                                    </div>
                                </div>


                                <div class="row mb-30P">
                                    <div class="col-12">
                                        <input type="password"  class="frmInp logRegi__inp showHidePass" id="userpassword" placeholder="" name="psw" >
                                        <label for="Password" class="form-lable__login"><b>Password</b><span class="req">*</span></label>
                                         <i class='fas fa-lock loginInpIcon'></i>
                                         <p class="txtError userpassword mb-0"></p>
                                         <p class="mb-0 pt-2">
                                            <input type="checkbox" class="showHidePassCheck"><span class="common-text__msg pl-2">Show Password</span>
                                         </p>

                                    </div>
                                </div>


                                <div class="row btn-row">
                                    <div class="col-12 text-center">
                                                <input type="submit" value="Login" class="btnCommon">
                                                  <button class="btnCommon" type="reset">Cancel</button>
                                    </div>
                                    <div class="col-12 text-center">
                                        <p class="ForGotpsw mb-0 w-100"> <a href="forgotPassWord.html">Forgot password?</a></p>
                                        <p class="ForGotpsw mb-0 pt-0"> Don't have an account <a href="registration.html" class="createAccount">Create Now</a></p>
                                    </div>
                                </div>

                            </div>

CSS for label Active Class


.form-lable__login {
    position: absolute;
    top: 16px;
    left: 30px;
    font-size: 0.875rem;
    pointer-events: none;
    transition: all 0.3s ease-in;
    margin-bottom: 0rem;
    transform: translateY(0px);
}

/*active label Class */
.form-lable__login.form-lable__login--active {
    top: -20px;
    left: 17px;
    font-size: 0.688rem;
    color: #5f6368;
    opacity: 0.5;
}

It’s very difficult to sum up all the small interactive code in a single article. But as we all know with the advancement of jQuery; we can do lots of front-end user interactivity that enhanced the user experience more attractive and entertaining.

SCSS, a more advanced and powerful weapon for page styling

sankha — Fri, 29 Oct 2021 12:13:29 +0000

For styling a web page, a web designer’s first and the most preferred choice is CSS (Cascading Style Sheet), along with that we often encounter with another kind of style sheet rules, an advanced and evolved version of vanilla CSS, SASS also is known as the SCSS (Syntactically Awesome Style Sheets). Both CSS and SCSS are a type of scripting language that we use to style a web page to make it aesthetically more enhanced. Widely used in combination with JavaScript, jQuery and HTML, CSS and SCSS are now most powerful component for the web.

One of the most major differences between SCSS and CSS is SCSS is a pre-processor language, which means we need an interpreter or compiler to convert the advanced SCSS tag to simple browser readable CSS rules. Through the pre-processor, SCSS syntax are getting parsed into the server and returned to the browser as normal CSS rules. As SCSS is a more powerful and advanced form of CSS it’s a bit more complex than normal CSS where we can just play around with the pseudo-class and ID, but in the SCSS we have few programming languages like features such as declaring variables, functions, operators, parameter passing, import and @include directives. We can also do simple mathematical calculations like calculating padding or margin based on a given parameter. It is worth mentioning here that we can also write simple CSS style rules in the .scss file (.scss is the file extension of a .SCSS language.
Mixin is another strong feature that makes a big difference between SCSS and vanilla CSS. Mixin is a group of CSS declarations that we import with @import directive and reuse throughout the style sheet. For declaring a Mixin in SCSS we have to create a mixin like this

  
@mixin  mixinName {
    /* CSS Codes */
}

For example

  
@mixin button {
    padding:0.50rem 2.5rem;
    font-size:$font14p;
    border:none;
    box-shadow: none;   
    font-family: $siteFont;
}

Here we have a mixin called button, and now we can to call this button mixin within any other class selector with the @include directive. The CSS rules specified within the button Mixin now are a part of btnCommon class.

 .btnCommon {
    @include
 btnprimary;
}

Nesting is also another important feature of SASS / SCSS. SASS,which allows us to write SCSS code in a nested hierarchy, just like HTML, XML. It means we can place or wrap the child selector code inside of parent selector and it gives us a spiral kind of chain effect, here how it is works

  
        body {
            padding:0px;
            margin:0px;
            font-family: $siteFont;
            background: $secondaryBgColor;
        
            header {
                background: $header-bg-color;
                padding: 1rem;
                width: 700px;
                margin:0 auto;
        
                .header-top {
                    position: fixed;
                    width: 100%;
                    left:0;
                    right: 0;
                    top:0;
                    padding: 0.5rem 1.25rem;
                }
            }

.header-top class is nested inside the header selector and header selector is nested within the body tag. As the body object is the parent DOM element so this nested hierarchy must be present inside the

element of HTML code structure.

<body>

<header>
    <div class="header-top">
            <p>This is header</p>
    </div>
    
</header>

</body>

Declaring a SCSS variable

Consider we are using two main colors throughout the web site to match the branding perspective of a company. Now, If we need to change those colors at some point, we’ll need to change it in all those places in all the .css (.css is the file extension of CSS language) file where we call the color value, but if we define color values as a variable in a single place then we can call the variable throughout our stylesheet and multiple CSS file too. If we need to change the color value later, we just change the color value of the variable and it will reflect that change throughout the entire stylesheet.

Syntax

   $variable_name: value;

example

$primaryColor:#000

In the above example we have declared a variable called “$primaryColor” whose value is the color black. Now if we call this variable into the <body> tag, then the default font color will be black for the entire site. Just refer the name of the variable wherever we need to implement the style.

example

  
        body {
            color: $primaryColor;
            }

SASS/SCSS function

Functions are blocks of code that accomplish a specific goal. Like other programming language SCSS functions also have some specific tasks to perform.

Syntax

  
        @function DoSqrRoot($int) {
            @return $int * $int;
        }

Example

  
        body {
            font-size: DoSqrRoot(4);
        }

This will return font-size as 16px in the body tag.

SASS import

To import a .scss file into another .scss file we use @import directive. This is basically calling an external file within another file; say we are importing two .scss files ‘variables’ and ‘mixin’ into a common.scss file.

  
        @import 'variable.scss';
        @import 'mixin.scss';

Normally we cannot parse SCSS from our pc, like we can write and test HTML, CSS from the browser, but If we have node.js installed we can convert SCSS to CSS with following command from the Command Prompt(CMD)

  
        sass --watch scss:css

once sass is running it will show you a message like this

  
        sass is watching for changes. Press Ctrl+C to stop

Please remember you should run this command inside a folder where both SCSS and CSS folders are present, otherwise the command will fail. We can also parse a single file from a folder with following command

  
        sass --watch common.scss common.css

a .map file will be created inside the css folder which done the mapping job between two files i.e. SCSS and CSS

Moreover, SASS is very vast and interesting, more you dig into the subject more you find out its beauty and charm. With the help of variables, nesting, mixin and other features, we can create a clean,easy maintainable code that provides a better result than CSS. The reusability of SCSS helps us get rid of writing the same piece of code again and again.