Build a CRUD Random Password Generator and Manager Using jQueryUI and Modernizr Library in Browser Full Project For Beginners

Build a CRUD Random Password Generator and Manager Using jQueryUI and Modernizr Library in Browser Full Project For Beginners

 

Welcome folks today in this blog post we will be building a random crud password generator and manager using jqueryui and modernizr library in browser. All the full source code of the application is given below.

 

 

 

Get Started

 

 

 

In order to get started you need to make an index.html file and copy paste the following code

 

 

index.html

 

 

<div id="jquery-favicons-example">
    <table>
        <tr class="main">
            <td><a class="hidelink" href="https://facebook.com">.</a></td>
            <td>Facebook</td>
        </tr>
        <tr class="detail">
            <td colspan="2">
                <table>
                    <tr>
                        <td>Web Address: </td>
                        <td class="webadrdtl" id="s5w84a684wd_w">
                            <input type="text" value="https://facebook.com" /></td>
                        <td class="tick"></td>
                    </tr>
                   <tr>
                        <td>Username: </td>
                        <td class="unamedtl" id="s5w84a684wd_u">
                            <input type="text" value="TestEmailAccount@gmail.com" /></td>
                        <td class="tick"></td>
                    </tr>
                    <tr>
                        <td>Password:</td>
                        <td class="pworddtl" id="s5w84a684wd_p"><input type="text" value="v0OFppDS_aj_gzsX_HCs,D4Nw8#iLoFeRSrznqqdtzQ8" /></td>
                        <td class="tick"></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td class="buttons" colspan="2">
                            <button class="cpuname">Copy Username</button>
                            <button class="cppword">Copy Password</button>
                            <button class="editdtl">Edit Details</button>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr class="main">
            <td><a class="hidelink" href="https://google.com.au">.</a></td>
            <td>Google Account</td>
        </tr>
        <tr class="main">
            <td><a class="hidelink" href="https://anz.com.au">.</a></td>
            <td>ANZ Internet Banking</td>
        </tr>
        <tr class="main">
            <td><a class="hidelink" href="http://instagram.com">.</a></td>
            <td>Instagram</td>
        </tr>
        <tr class="main">
            <td><a class="hidelink" href="https://drive.google.com">.</a></td>
            <td>Google Drive</td>
        </tr>
        <tr class="main">
            <td><img class="favi" src="https://www.google.com/s2/favicons?domain=http://www.dropbox.com" /></td>
            <td>Dropbox</td>
        </tr>
        <tr class="main">
            <td><img class="favi" src="https://www.google.com/s2/favicons?domain=http://www.netflix.com" /></td>
            <td>Netflix</td>
        </tr>
        <tr class="main">
            <td><a class="hidelink" href="https://play.stan.com.au/">.</a></td>
            <td>Stan</td>
        </tr>
    </table>
<!--    
   <ul>
    <li><a href="https://facebook.com">Facebook</a></li>
    <li><a href="http://budget.wilsnet.net.au">WILSnet Budget</a></li>
    <li><a href="https://anz.com.au">ANZ Internet Banking</a></li>
    <li><a href="http://instagram.com">Instagram</a></li>
</ul>
-->
</div>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>

 

 

And now make a style.css file and copy paste the following code

 

 

style.css

 

 

table {
    margin: 20px auto;
}

table tr.main {
    background: rgba(0,0,0,0.2);
    display: block;
}

table tr.main:hover {
    -webkit-box-shadow: inset 0px 0px 10px 1px rgba(0,0,0,0.2);
       -moz-box-shadow: inset 0px 0px 10px 1px rgba(0,0,0,0.2);
            box-shadow: inset 0px 0px 10px 1px rgba(0,0,0,0.2);
    cursor: pointer;
}

table tr.main td {
    padding: 5px;
    vertical-align: middle;
}

table tr.main td:first-child {
    width: auto;
}

table tr.main td:last-child {
    width: 425px;
    font-size: 20px;
}

table tr.detail {
    display: none;
    background: rgba(0,0,0,0.1);
    border-left: 1px solid rgba(0,0,0,0.2);
    border-right: 1px solid rgba(0,0,0,0.2);
}

table tr.detail table {
    text-align: left;
    width: 100%;
}

table tr.detail table tr td {
    padding: 5px;
}
table tr.detail table tr td input {
    padding: 5px;
    width: 300px;
}

.buttons button {
    margin-top: 10px;
    width: 120px;
    height: 30px;
}

.tick {
    width: 45px;
}
.loading {
    background: url(https://www.cuisson.co.uk/templates/cuisson/supersize/slideshow/img/progress.BAK-FOURTH.gif); 
    background-size: 120px 120px;
    background-repeat: no-repeat;
    background-position: 65% 50%; 
    width: 45px;
}
.copied {
    background: url(http://icons.iconarchive.com/icons/cheezen/web-2/128/check-icon.png);
    background-size: 25px 25px;
    background-repeat: no-repeat;
    background-position: 20% 50%; 
}


.hidelink {
    display: none;
}
.favi {
    width: 16px;
    padding: 5px;
}

 

See also  JavaScript Program to Split Array into Smaller Chunks Using splice() Method Full Tutorial For Beginners

 

And now make a script.js file and copy paste the following code

 

 

script.js

 

 

/***
@title:
Favicons

@version:
2.0

@author:
Andreas Lagerkvist

@date:
2008-09-16

@url:
http://andreaslagerkvist.com/jquery/favicons/

@license:
http://creativecommons.org/licenses/by/3.0/

@copyright:
2008 Andreas Lagerkvist (andreaslagerkvist.com)

@requires:
jquery

@does:
This little plug-in will insert favicons to all external links found on your site. The plug-in scans the URL the link is pointing to for a favicon and, if it can't find one, displays any generic favicon-image you like instead.

@howto:
jQuery(document.body).favicons({insert: 'prependTo'}); would prepend favicons to every external link in the document.

You wanna run the plug-in on a parent-element of the external links. Unless you want certain external links _not_ to have a favicon there's no reason not to run the plug-in on document.body.

@exampleHTML:
<ul>
    <li><a href="http://www.codinghorror.com/blog/">Coding Horror</a></li>
    <li><a href="https://remysharp.com">remy sharp's b:log</a></li>
    <li><a href="http://snook.ca/jonathan/">Snook.ca</a></li>
    <li><a href="http://www.danwebb.net">DanWebb.net</a></li>
    <li><a href="http://www.dustindiaz.com/">DustinDiaz.com</a></li>
</ul>

@exampleJS:
jQuery('#jquery-favicons-example').favicons({insert: 'insertBefore', defaultIco: WEBROOT +'aFramework/Styles/__common/gfx/jquery.favicons.png'});
***/
jQuery.fn.favicons = function (conf) {
    var config = jQuery.extend({
        insert:        'appendTo', 
        defaultIco: 'https://cdn1.iconfinder.com/data/icons/mix-color-3/502/Untitled-30-512.png'
    }, conf);

    return this.each(function () {
        jQuery('a.hidelink[href^="http://"]', this).each(function () {
            var link        = jQuery(this);
            var faviconURL    = link.attr('href').replace(/^(http:\/\/[^\/]+).*$/, '$1') + '/favicon.ico';
            var faviconIMG    = jQuery('<img class="favi" src="' + config.defaultIco + '" alt="" />')[config.insert](link);
            var extImg        = new Image();

            extImg.src = faviconURL;

            if (extImg.complete) {
                faviconIMG.attr('src', faviconURL);
            }
            else {
                extImg.onload = function () {
                    faviconIMG.attr('src', faviconURL);
                };
            }
        });
    });
};
jQuery('#jquery-favicons-example').favicons({insert: 'insertBefore'});

$('.main').click(function() {

    $(this).next('.detail').toggle();
    
});



function copyToClipboard(elem) {
      // create hidden text element, if it doesn't already exist
    var targetId = "_hiddenCopyText_";
    var isInput = elem.tagName === "INPUT" || elem.tagName === "TEXTAREA";
    var origSelectionStart, origSelectionEnd;
    if (isInput) {
        // can just use the original source element for the selection and copy
        target = elem;
        origSelectionStart = elem.selectionStart;
        origSelectionEnd = elem.selectionEnd;
    } else {
        // must use a temporary form element for the selection and copy
        target = document.getElementById(targetId);
        if (!target) {
            var target = document.createElement("textarea");
            target.style.position = "absolute";
            target.style.left = "-9999px";
            target.style.top = "0";
            target.id = targetId;
            document.body.appendChild(target);
        }
        target.textContent = elem.textContent;
    }
    // select the content
    var currentFocus = document.activeElement;
    target.focus();
    target.setSelectionRange(0, target.value.length);
    
    // copy the selection
    var succeed;
    try {
          succeed = document.execCommand("copy");
    } catch(e) {
        succeed = false;
    }
    // restore original focus
    if (currentFocus && typeof currentFocus.focus === "function") {
        currentFocus.focus();
    }
    
    if (isInput) {
        // restore prior selection
        elem.setSelectionRange(origSelectionStart, origSelectionEnd);
    } else {
        // clear temporary content
        target.textContent = "";
    }
    return succeed;
}



$('.cpuname').click(function() {
    var username = $(this).parent().parent().prev().prev().children('.unamedtl').children(), 
        loadtick = $(this).parent().parent().prev().prev().children('.unamedtl').next();
    loadtick.removeClass('copied'); 
    username.select();
    document.execCommand("copy");
    $(this).focus();    
    loadtick.addClass('loading'); 
    setTimeout(function() {
        loadtick.removeClass('loading'); 
        loadtick.addClass('copied'); 
    }, 750);
});




$('.cppword').click(function() {
    var password = $(this).parent().parent().prev().children('.pworddtl').children(), 
        loadtick = $(this).parent().parent().prev().children('.pworddtl').next();
    loadtick.removeClass('copied'); 
    password.select();
    document.execCommand("copy");
    $(this).focus();    
    loadtick.addClass('loading'); 
    setTimeout(function() {
        loadtick.removeClass('loading'); 
        loadtick.addClass('copied'); 
    }, 750);
});




function fetchFavicon(url) {
    return new Promise(function(resolve, reject) {
        var img = new Image();
        img.onload = function () {
            var canvas = document.createElement("canvas");
            canvas.width =this.width;
            canvas.height =this.height;

            var ctx = canvas.getContext("2d");
            ctx.drawImage(this, 0, 0);

            var dataURL = canvas.toDataURL("image/png");
            resolve(dataURL);
        };
        img.src = 'chrome://favicon/' + url;
    });
}

 

See also  Node.js Google Calendar API Official Library to Build Calendar on Website Full Project For Beginners

 

And now if you open the index.html file inside the browser you will see the below output

 

 

 

Leave a Reply