Custom selector like jquery document.querySelector

 var query = document.querySelector.bind(document);

var queryAll = document.querySelectorAll.bind(document);
var fromId = document.getElementById.bind(document);
var fromClass = document.getElementsByClassName.bind(document);
var fromTag = document.getElementsByTagName.bind(document);

JQUERY : ADD TEXT ANYWHERE IN INPUT WHEN CLICK

    jQuery("#btn").on('click', function() {
        var $txt = jQuery("#txt");
        var caretPos = $txt[0].selectionStart;
        var textAreaTxt = $txt.val();
        var txtToAdd = "stuff";
        $txt.val(textAreaTxt.substring(0, caretPos) + txtToAdd + textAreaTxt.substring(caretPos) );
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<textarea id="txt" rows="15" cols="70">There is some text here.</textarea>
<input type="button" id="btn" value="OK" />

JQUERY : Bootstrap popup modal with timer

<div class="modal fade" id="overlay">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>Context here</p>
      </div>
    </div>
  </div>
</div>

// jquery

$('#overlay').modal('show');

setTimeout(function() {
    $('#overlay').modal('hide');
}, 5000);

JQUERY : Lets play with variation + Object

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Challenge: Famous discoveries</title>
    </head>
    <body>
   
    <h1>Famous discoveries</h1>
   
    <h2 id="math-heading">Math discoveries</h2>
   
    <ul>
    <li>323–283 BC – Euclid: wrote a series of 13 books on geometry called The Elements</li>
    <li>Al-Khawarizmi (780-850): wrote the first major treatise on Algebra titled "Al-jabr wal-muqabaleh"</li>
    </ul>
   
    <h2 id="science-heading">Science discoveries</h2>
    <ul>
        <li>1543 – Copernicus: discovered the heliocentric model of the solar system.
</li>
        <li>1672 – Sir Isaac Newton: discovers that white light is a spectrum of a mixture of distinct coloured rays.</li>
    </ul>
   
    <a href="https://en.wikipedia.org/wiki/Timeline_of_scientific_discoveries">Read about more discoveries on Wikipedia.</a>
   
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script>
   
    var math = $("#math-heading");
    math.text(math.text() + "!! WOW!");
    var science = $("#science-heading");
    science.text(science.text() + " Walla!")
   
    </script>
    </body>
</html>

JAVASCRIPT : BOOTSTRAP DROPDOWN PILL OR ACCORDION USING DROPDOWN

<div class="dropdown">
    <a class="btn btn-danger dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown"
        aria-haspopup="true" aria-expanded="false">
        Senarai Pegawai
    </a>

    <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
        <ul class="nav nav-pills flex-column list-unstyled" role="tablist">
            <li class="nav-item list-unstyled">
                <a class="nav-link active umum" data-toggle="pill" href="#semua-unit">SEMUA UNIT</a>
            </li>
            <li class="nav-item list-unstyled">
                <a class="nav-link umum" data-toggle="pill" href="#unit-satu">UNIT SATU</a>
            </li>
            <li class="nav-item list-unstyled">
                <a class="nav-link umum" data-toggle="pill" href="#unit-dua">UNIT DUA</a>
            </li>
            <li class="nav-item list-unstyled">
                <a class="nav-link umum" data-toggle="pill" href="#unit-tiga">UNIT TIGA</a>
            </li>
            <li class="nav-item list-unstyled">
                <a class="nav-link umum" data-toggle="pill" href="#unit-empat"> UNIT EMPAT</a>
            </li>
        </ul>
    </div>
</div>

<div style="margin-top:50px"></div>

<!-- Tab panes -->
<div class="tab-content">
    <div id="welcome" class=" tab-pane fade">

        <h1>SELAMAT DATANG KE DIREKTORI PEGAWAI</h1>

    </div>



    <div id="semua-unit" class=" tab-pane active">

        Semua unit loading...

    </div>




    <div id="unit-satu" class="tab-pane fade">

        Coming soon

    </div>

    <!-- start business data-->

    <div id="unit-dua" class="tab-pane fade">


        Coming soon

    </div>

    <div id="unit-tiga" class=" tab-pane fade">

        Coming soon

    </div>

    <div id="unit-empat" class=" tab-pane fade">

        Coming soon

    </div>
    <!--improvement tab-->
</div>
<!--tab content-->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

JQUERY : DOM manipulation / Change id content using jquery

Same as javascript getElementById("");

FOR TEXT

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

</head>
<body>

<div id="demo">
   <p>The initial text</p>
</div>


<script>
$(document).ready(function(){
  $('#demo').text('The replaced text.');
});
</script>
</body>
</html>

FOR HTML

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

</head>
<body>

<div id="demo">
   <p>The initial text</p>
</div>


<script>
$(document).ready(function(){
  $('#demo').html('<b>The replaced text.</b>');
});
</script>
</body>
</html>

JQUERY : editable HTML 5 save at local storage

//editable cookies enable
    $(function(){
      var edit = document.getElementById('your-id');
      $(edit).blur(function(){
        localStorage.setItem('todoData', this.innerHTML);
      });
      //when the page loads
      if ( localStorage.getItem('todoData')){
        edit.innerHTML = localStorage.getItem('todoData');
      }
    })

<p id="your-id" contenteditable="true"> Ubah ayat ni dan ia save kat browser </p>

CONS 
satu id boleh simpan 1 satu data.. maksudnya, kalau id ada ditempat lain.. data pada id yang pertama sahaja akan boleh diubah

https://code.tutsplus.com/tutorials/28-html5-features-tips-and-techniques-you-must-know--net-13520

CSS Target to replace JQuery

Ok.. I just found :target on css.. freaking out!

https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_target_modal
https://www.w3schools.com/cssref/sel_target.asp
https://developer.mozilla.org/en-US/docs/Web/CSS/:target

Add animation on it to make it life

https://css-tricks.com/on-target/

here the full code of mine

https://codepad.co/snippet/WoBwuMB7

TRIGGER ANIMATION WHEN SCROLL UP/DOWN

Past the code on <body> for divi/html


<script>
(function($) {
    var $animation_elements = $('.et-waypoint'),
        $window = $(window);

    function check_if_in_view() {
        var window_height = $window.height(),
            window_top_position = $window.scrollTop(),
            window_bottom_position = (window_top_position + window_height);

        $animation_elements.each(function() {
            var $element = $(this),
                element_height = $element.outerHeight(),
                element_top_position = $element.offset().top,
                element_bottom_position = (element_top_position + element_height);

            //check to see if this element is within viewport
            if ((element_bottom_position >= window_top_position) && (element_top_position <= window_bottom_position)) {
                $element.addClass('et-animated');
            } else {
                $element.removeClass('et-animated');
            }
        });
    }

    $window.on('scroll resize', check_if_in_view);
})(jQuery);
</script>

scroll to top

--html--

<div id="content">Scroll &darr;</div>
<a href="#" id="back-to-top" title="Back to top">&uarr;</a>

--css--
#back-to-top {
    position: fixed;
    bottom: 40px;
    right: 40px;
    z-index: 9999;
    width: 32px;
    height: 32px;
    text-align: center;
    line-height: 30px;
    background: #f5f5f5;
    color: #444;
    cursor: pointer;
    border: 0;
    border-radius: 2px;
    text-decoration: none;
    transition: opacity 0.2s ease-out;
    opacity: 0;
}
#back-to-top:hover {
    background: #e9ebec;
}
#back-to-top.show {
    opacity: 1;
}
#content {
    height: 2000px;
}

---js--
if ($('#back-to-top').length) {
    var scrollTrigger = 100, // px
        backToTop = function () {
            var scrollTop = $(window).scrollTop();
            if (scrollTop > scrollTrigger) {
                $('#back-to-top').addClass('show');
            } else {
                $('#back-to-top').removeClass('show');
            }
        };
    backToTop();
    $(window).on('scroll', function () {
        backToTop();
    });
    $('#back-to-top').on('click', function (e) {
        e.preventDefault();
        $('html,body').animate({
            scrollTop: 0
        }, 700);
    });
}

div scroll menu to section jquery

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title>jquery scroll to particular position/item when click on link</title>

</head>

<body>

<form id="form1" runat="server">

<div >

<p><a id="top">Menu:</a> <!-- Anchor tag placed around the word "Menu" so menu will always be visible -->

<a href="#middle" class="scroll">Middle</a> <a href="#bottom" class="scroll">Bottom</a></p>

<div style="background-color:#c00; width:50%; height:1500px;">Top</div>

<p><a id="middle">Menu:</a> <!-- Anchor tag placed around the word "Menu" so menu will always be visible -->

<a href="#top" class="scroll">Top</a> <a href="#bottom" class="scroll">Bottom</a></p>

<div style="background-color:#2d80e8; width:50%; height:1500px;">Middle</div>

<p><a id="bottom">Menu:</a> <!-- Anchor tag placed around the word "Menu" so menu will always be visible -->

<a href="#top" class="scroll">Top</a> <a href="#middle" class="scroll">Middle</a>

<div style="background-color:#21b81e; width:50%; height:1500px;">Bottom</div>

</div>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script  type="text/javascript">

$(document).ready(function() {

$(".scroll").click(function(event) {

$('html,body').animate({ scrollTop: $(this.hash).offset().top }, 500);

});

});

</script>

</form>

</body>

</html>

sample

Menu: Middle Bottom

Top

Menu: Top Bottom

Middle

Menu: Top Middle

Bottom