Newest âź· Oldest
  1. Snapshot at 2017-04-24

    Lab 2—Adding and Removing class

    This is Lab 2 of the Beginning jQuery course. In this lab, we will work on the 2 topics:

    1. Changing visual style with addClass/removeClass.
    2. Validating form input.

    1. Changing visual style with addClass and removeClass

    The addClass and removeClass is one of the key technique in jQuery which is often underestimated. By combining CSS styles, we can create visual changes by using these methods.

    There are many situations that addClass and removeClass can make the code much simpler and elegant than changing the styles directly.

    Example: Toggling error styles

    http://codepen.io/makzan/pen/azRQaP

    This example shows how we can toggle visual styles by using the addClass and removeClass function.

    Given the following style in CSS.

    input.error {
  border: 1px solid FIREBRICK;
  box-shadow: 0 0 4px FIREBRICK;
  background: WHITE;
  color: BLACK;
}

    We can then toggle the error state by the following jQuery code.

    $('input').addClass('error');
$('input').removeClass('error’);

    Taking the code further

    The example code is based on the input exercise from Lab 1. In lab 1, I suggested you to add more inputs to the form. For example:

    • You might add a password field and a password confirmation field.
    • You might also add radio buttons for options such as gender.
    • You might also add a checkbox that requires user to check it to accept the service terms before submitting the form.
    1. Now we learn to put error style on specific input. Please try to add more input fields and then apply error style only to the affected inputs with errors.
    2. We have learnt text and html method. Try to show more specific error messages when the .error-message element shows. Make sure you have targeted multiple errors.

    Tips:

    We can listen to the keydown event and remove all error effects. This is helpful because we know the user is trying to fix the error.

    // Remove any error when form changes.
$('form input').keydown(function(){
  $('input').removeClass('error');
  $('.error-message').hide();
});

    Demo: http://codepen.io/makzan/pen/OPBrym

    Taking the code further

    Can we check the form during the user is still inputting? We don’t need to wait until the form submission to indicate the error messages. Try to make the error messages respond instantly when user is inputting the form.

    Here are several events that might be helpful:

    2. Lab—Building images slideshow

    Slideshow screenshot

    The following steps show how we can build an image slideshow by using jQuery and CSS transition.

    In step 1, we defined the images list in HTML. It shows that we are listing a collection of content by using the HTML list structure.

    In step 2, we style the slideshow layout with CSS position property. There is no any slideshow yet.

    In step 3, we add the jQuery logic which rotate the images in a time interval.

    In step 4, we animate the slideshow with CSS transition and transform.

    In extra steps, we explore other animating styles by only changing the CSS.

    Taking the code further

    This slideshow example provides a solid foundation. This is production ready and can be modified to fit different usages in your next web projects.

    1. Try creating your own images sliding animation by only changing the CSS. Keep in mind that we avoid defining styles in JavaScript.
    2. Try to add a next/previous slide switching feature. This can be done by listening to the click event of a next/previous button and changing the currentIndex variable to show next or previous slide.
    3. Can we replace the image with HTML elements in each slide? Here is an example of having h2 and text in slide 1: http://codepen.io/makzan/pen/dPgQrb

    More examples

    Here is a lucky draw effect that I created using similar technique. I used it to randomly selected one student to answer question in my previous class.

    http://codepen.io/makzan/pen/WbeXRq

    Please use chat to send me your exercises. I’ll check them and reply you with suggestions. For any questions or queries, please also raise them. I’m here to help.

    —Thomas

  2. Snapshot at 2017-04-02

    ✏ Lab 2—Adding and Removing class

    This is Lab 2 of the Beginning jQuery course. In this lab, we will work on the 2 topics:

    1. Changing visual style with addClass/removeClass.
    2. Validating form input.

    1. Changing visual style with addClass and removeClass

    The addClass and removeClass is one of the key technique in jQuery which is often underestimated. By combining CSS styles, we can create visual changes by using these methods.

    There are many situations that addClass and removeClass can make the code much simpler and elegant than changing the styles directly.

    Example: Toggling error styles

    http://codepen.io/makzan/pen/azRQaP

    This example shows how we can toggle visual styles by using the addClass and removeClass function.

    Given the following style in CSS.

    input.error {
  border: 1px solid FIREBRICK;
  box-shadow: 0 0 4px FIREBRICK;
  background: WHITE;
  color: BLACK;
}

    We can then toggle the error state by the following jQuery code.

    $('input').addClass('error');
$('input').removeClass('error’);

    Taking the code further

    The example code is based on the input exercise from Lab 1. In lab 1, I suggested you to add more inputs to the form. For example:

    • You might add a password field and a password confirmation field.
    • You might also add radio buttons for options such as gender.
    • You might also add a checkbox that requires user to check it to accept the service terms before submitting the form.
    1. Now we learn to put error style on specific input. Please try to add more input fields and then apply error style only to the affected inputs with errors.
    2. We have learnt text and html method. Try to show more specific error messages when the .error-message element shows. Make sure you have targeted multiple errors.

    Tips:

    We can listen to the keydown event and remove all error effects. This is helpful because we know the user is trying to fix the error.

    // Remove any error when form changes.
$('form input').keydown(function(){
  $('input').removeClass('error');
  $('.error-message').hide();
});

    Demo: http://codepen.io/makzan/pen/OPBrym

    Taking the code further

    Can we check the form during the user is still inputting? We don’t need to wait until the form submission to indicate the error messages. Try to make the error messages respond instantly when user is inputting the form.

    Here are several events that might be helpful:

    2. Lab—Building images slideshow

    Slideshow screenshot

    The following steps show how we can build an image slideshow by using jQuery and CSS transition.

    In step 1, we defined the images list in HTML. It shows that we are listing a collection of content by using the HTML list structure.

    In step 2, we style the slideshow layout with CSS position property. There is no any slideshow yet.

    In step 3, we add the jQuery logic which rotate the images in a time interval.

    In step 4, we animate the slideshow with CSS transition and transform.

    In extra steps, we explore other animating styles by only changing the CSS.

    Taking the code further

    This slideshow example provides a solid foundation. This is production ready and can be modified to fit different usages in your next web projects.

    1. Try creating your own images sliding animation by only changing the CSS. Keep in mind that we avoid defining styles in JavaScript.
    2. Try to add a next/previous slide switching feature. This can be done by listening to the click event of a next/previous button and changing the currentIndex variable to show next or previous slide.
    3. Can we replace the image with HTML elements in each slide? Here is an example of having h2 and text in slide 1: http://codepen.io/makzan/pen/dPgQrb

    More examples

    Here is a lucky draw effect that I created using similar technique. I used it to randomly selected one student to answer question in my previous class.

    http://codepen.io/makzan/pen/WbeXRq

    Please use chat to send me your exercises. I’ll check them and reply you with suggestions. For any questions or queries, please also raise them. I’m here to help.

    —Thomas

  3. Snapshot at 2017-04-02

    ✏ Lab 2—Adding and Removing class

    This is Lab 2 of the Beginning jQuery course. In this lab, we will work on the 2 topics:

    1. Changing visual style with addClass/removeClass.
    2. Validating form input.

    1. Changing visual style with addClass and removeClass

    The addClass and removeClass is one of the key technique in jQuery which is often underestimated. By combining CSS styles, we can create visual changes by using these methods.

    There are many situations that addClass and removeClass can make the code much simpler and elegant than changing the styles directly.

    Example: Toggling error styles

    http://codepen.io/makzan/pen/azRQaP

    This example shows how we can toggle visual styles by using the addClass and removeClass function.

    Given the following style in CSS.

    input.error {
  border: 1px solid FIREBRICK;
  box-shadow: 0 0 4px FIREBRICK;
  background: WHITE;
  color: BLACK;
}

    We can then toggle the error state by the following jQuery code.

    $('input').addClass('error');
$('input').removeClass('error’);

    Taking the code further

    The example code is based on the input exercise from Lab 1. In lab 1, I suggested you to add more inputs to the form. For example:

    • You might add a password field and a password confirmation field.
    • You might also add radio buttons for options such as gender.
    • You might also add a checkbox that requires user to check it to accept the service terms before submitting the form.
    1. Now we learn to put error style on specific input. Please try to add more input fields and then apply error style only to the affected inputs with errors.
    2. We have learnt text and html method. Try to show more specific error messages when the .error-message element shows. Make sure you have targeted multiple errors.

    Tips:

    We can listen to the keydown event and remove all error effects. This is helpful because we know the user is trying to fix the error.

    // Remove any error when form changes.
$('form input').keydown(function(){
  $('input').removeClass('error');
  $('.error-message').hide();
});

    Demo: http://codepen.io/makzan/pen/OPBrym

    Taking the code further

    Can we check the form during the user is still inputting? We don’t need to wait until the form submission to indicate the error messages. Try to make the error messages respond instantly when user is inputting the form.

    Here are several events that might be helpful:

    2. Lab—Building images slideshow

    Slideshow screenshot

    The following steps show how we can build an image slideshow by using jQuery and CSS transition.

    In step 1, we defined the images list in HTML. It shows that we are listing a collection of content by using the HTML list structure.

    In step 2, we style the slideshow layout with CSS position property. There is no any slideshow yet.

    In step 3, we add the jQuery logic which rotate the images in a time interval.

    In step 4, we animate the slideshow with CSS transition and transform.

    In extra steps, we explore other animating styles by only changing the CSS.

    Taking the code further

    This slideshow example provides a solid foundation. This is production ready and can be modified to fit different usages in your next web projects.

    1. Try creating your own images sliding animation by only changing the CSS. Keep in mind that we avoid defining styles in JavaScript.
    2. Try to add a next/previous slide switching feature. This can be done by listening to the click event of a next/previous button and changing the currentIndex variable to show next or previous slide.
    3. Can we replace the image with HTML elements in each slide? Here is an example of having h2 and text in slide 1: http://codepen.io/makzan/pen/dPgQrb

    More examples

    Here is a lucky draw effect that I created using similar technique. I used it to randomly selected one student to answer question in my previous class.

    http://codepen.io/makzan/pen/WbeXRq

    Please use chat to send me your exercises. I’ll check them and reply you with suggestions. For any questions or queries, please also raise them. I’m here to help.

    —Thomas

  4. Snapshot at 2017-04-02

    ✏ Lab 2—Adding and Removing class

    This is Lab 2 of the Beginning jQuery course. In this lab, we will work on the 2 topics:

    1. Changing visual style with addClass/removeClass.
    2. Validating form input.

    1. Changing visual style with addClass and removeClass

    The addClass and removeClass is one of the key technique in jQuery which is often underestimated. By combining CSS styles, we can create visual changes by using these methods.

    There are many situations that addClass and removeClass can make the code much simpler and elegant than changing the styles directly.

    Example: Toggling error styles

    http://codepen.io/makzan/pen/azRQaP

    This example shows how we can toggle visual styles by using the addClass and removeClass function.

    Given the following style in CSS.

    input.error {
  border: 1px solid FIREBRICK;
  box-shadow: 0 0 4px FIREBRICK;
  background: WHITE;
  color: BLACK;
}

    We can then toggle the error state by the following jQuery code.

    $('input').addClass('error');
$('input').removeClass('error’);

    Taking the code further

    The example code is based on the input exercise from Lab 1. In lab 1, I suggested you to add more inputs to the form. For example:

    • You might add a password field and a password confirmation field.
    • You might also add radio buttons for options such as gender.
    • You might also add a checkbox that requires user to check it to accept the service terms before submitting the form.
    1. Now we learn to put error style on specific input. Please try to add more input fields and then apply error style only to the affected inputs with errors.
    2. We have learnt text and html method. Try to show more specific error messages when the .error-message element shows. Make sure you have targeted multiple errors.

    Tips:

    We can listen to the keydown event and remove all error effects. This is helpful because we know the user is trying to fix the error.

    // Remove any error when form changes.
$('form input').keydown(function(){
  $('input').removeClass('error');
  $('.error-message').hide();
});

    Demo: http://codepen.io/makzan/pen/OPBrym

    Taking the code further

    Can we check the form during the user is still inputting? We don’t need to wait until the form submission to indicate the error messages. Try to make the error messages respond instantly when user is inputting the form.

    Here are several events that might be helpful:

    2. Lab—Building images slideshow

    Slideshow screenshot

    The following steps show how we can build an image slideshow by using jQuery and CSS transition.

    In step 1, we defined the images list in HTML. It shows that we are listing a collection of content by using the HTML list structure.

    In step 2, we style the slideshow layout with CSS position property. There is no any slideshow yet.

    In step 3, we add the jQuery logic which rotate the images in a time interval.

    In step 4, we animate the slideshow with CSS transition and transform.

    In extra steps, we explore other animating styles by only changing the CSS.

    Taking the code further

    This slideshow example provides a solid foundation. This is production ready and can be modified to fit different usages in your next web projects.

    1. Try creating your own images sliding animation by only changing the CSS. Keep in mind that we avoid defining styles in JavaScript.
    2. Try to add a next/previous slide switching feature. This can be done by listening to the click event of a next/previous button and changing the currentIndex variable to show next or previous slide.
    3. Can we replace the image with HTML elements in each slide? Here is an example of having h2 and text in slide 1: http://codepen.io/makzan/pen/dPgQrb

    More examples

    Here is a lucky draw effect that I created using similar technique. I used it to randomly selected one student to answer question in my previous class.

    http://codepen.io/makzan/pen/WbeXRq

    Please use chat to send me your exercises. I’ll check them and reply you with suggestions. For any questions or queries, please also raise them. I’m here to help.

    —Thomas

  5. Snapshot at 2017-04-02