Build a Password Manager UI/UX Design Full Web App in Browser Using HTML5 CSS3 and Javascript Full Project For Beginners

Build a Password Manager UI/UX Design Full Web App in Browser Using HTML5 CSS3 and Javascript Full Project For Beginners

 

Welcome folks today in this blog post we will be building a password manager ui/ux design full web app in browser using vanilla javascript.All the full source code of the application is shown below.

 

 

 

Get Started

 

 

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

 

 

index.html

 

 

 

<!--- Try 1234 as Decryption Code-->
<script src="https://crypto-js.googlecode.com/svn/tags/3.1.2/build/rollups/aes.js"></script>
<div id="js-flip-1" class="main">
  <input type="password" placeholder="Decryption Code" id="pass" />
</div>
<div style="height:55px;"></div>
<div class="flip">
  <div class="card">
    <div class="face front">
      <img src="https://lh3.googleusercontent.com/XDScQo39jp9nk8kzAY_GOGYkb999mmMIqQGacISVnkGNc-tnZDZ1lD4valDhPOz7wxTm3pgk=s50-h50-e365" />
      <div class="label2">xyz12345@werwwe.com</div>
      <button class="viewbtn">🔓</button>
    </div>
    <div class="face back">
      <div class="pswd">U2FsdGVkX1+QNCp3TkOTU1EhuWkjocus4aQNMIuRQdo=
      </div>
      <button class="backbtn">X</button>
    </div>
  </div>
</div>
<div class="flip">
  <div class="card">
    <div class="face front">
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/60/Google-Fit-Icon.png/64px-Google-Fit-Icon.png" />
      <div class="label2">xyz123456789@wererwe.com</div>
      <button class="viewbtn">🔓</button>
    </div>
    <div class="face back">
      <div class="pswd">U2FsdGVkX1+ETJdjosX9imQGR0I7jBROkG4PyOfalLM=
      </div>
      <button class="backbtn">X</button>
    </div>
  </div>
</div>
<div class="flip">
  <div class="card">
    <div class="face front">
      <img src="https://lh3.googleusercontent.com/-v0soe-ievYE/AAAAAAAAAAI/AAAAAAADOhI/DudZuHFAm8c/s46-c-k-no/photo.jpg" />
      <div class="label2">xyz12345789@werrwe.com</div>
      <button class="viewbtn">🔓</button>
    </div>
    <div class="face back">
      <div class="pswd">U2FsdGVkX1+ETJdjosX9imQGR0I7jBROkG4PyOfalLM=
      </div>
      <button class="backbtn">X</button>
    </div>
  </div>
</div>
<div class="flip">
  <div class="card">
    <div class="face front">
      <img src="https://lh3.googleusercontent.com/XDScQo39jp9nk8kzAY_GOGYkb999mmMIqQGacISVnkGNc-tnZDZ1lD4valDhPOz7wxTm3pgk=s50-h50-e365" />
      <div class="label2">xyz12345@werwwe.com</div>
      <button class="viewbtn">🔓</button>
    </div>
    <div class="face back">
      <div class="pswd">U2FsdGVkX1/XbQyBoYX6bGCV7WAd0lh7E6Nj9xfYrD0=
      </div>
      <button class="backbtn">X</button>
    </div>
  </div>
</div>
<div class="flip">
  <div class="card">
    <div class="face front">
      <img src="https://lh3.googleusercontent.com/XDScQo39jp9nk8kzAY_GOGYkb999mmMIqQGacISVnkGNc-tnZDZ1lD4valDhPOz7wxTm3pgk=s50-h50-e365" />
      <div class="label2">xyz12345@werwwe.com</div>
      <button class="viewbtn">🔓</button>
    </div>
    <div class="face back">
      <div class="pswd">U2FsdGVkX1+QNCp3TkOTU1EhuWkjocus4aQNMIuRQdo=
      </div>
      <button class="backbtn">X</button>
    </div>
  </div>
</div>
<div class="flip">
  <div class="card">
    <div class="face front">
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/60/Google-Fit-Icon.png/64px-Google-Fit-Icon.png" />
      <div class="label2">xyz123456789@wererwe.com</div>
      <button class="viewbtn">🔓</button>
    </div>
    <div class="face back">
      <div class="pswd">U2FsdGVkX1+ETJdjosX9imQGR0I7jBROkG4PyOfalLM=
      </div>
      <button class="backbtn">X</button>
    </div>
  </div>
</div>
<div class="flip">
  <div class="card">
    <div class="face front">
      <img src="https://lh3.googleusercontent.com/-v0soe-ievYE/AAAAAAAAAAI/AAAAAAADOhI/DudZuHFAm8c/s46-c-k-no/photo.jpg" />
      <div class="label2">xyz12345789@werrwe.com</div>
      <button class="viewbtn">🔓</button>
    </div>
    <div class="face back">
      <div class="pswd">U2FsdGVkX1+ETJdjosX9imQGR0I7jBROkG4PyOfalLM=
      </div>
      <button class="backbtn">X</button>
    </div>
  </div>
</div>
<div class="flip">
  <div class="card">
    <div class="face front">
      <img src="https://lh3.googleusercontent.com/XDScQo39jp9nk8kzAY_GOGYkb999mmMIqQGacISVnkGNc-tnZDZ1lD4valDhPOz7wxTm3pgk=s50-h50-e365" />
      <div class="label2">xyz12345@werwwe.com</div>
      <button class="viewbtn">🔓</button>
    </div>
    <div class="face back">
      <div class="pswd">U2FsdGVkX1/XbQyBoYX6bGCV7WAd0lh7E6Nj9xfYrD0=
      </div>
      <button class="backbtn">X</button>
    </div>
  </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

 

See also  Build Random Fun Facts or Quote Generator in Browser Using HTML5 CSS3 and Javascript Full Project For Beginners

 

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

 

 

style.css

 

 

@import url(https://fonts.googleapis.com/css?family=Orbitron);
body {
  width:100%;
  background: #282828;
  font-family: 'Orbitron', sans-serif;
}
.main{
  width: 100%;
  top:0;
  left:0;
  height: 50px;
  position: fixed;
  background: #282828;
  text-align:center;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.30);
  z-index:2;
}
.flip {
  -webkit-perspective: 800;
  width: 300px;
  height: 50px;
  position: relative;
  align:center;
  margin: 20px;
  background: #282828;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.30);
  display:inline-block;
}

.flip .card.flipped {
  -webkit-transform: rotatex(-180deg);
}

.flip .card {
  width: 100%;
  height: 100%;
  -webkit-transform-style: preserve-3d;
  -webkit-transition: 0.50s;
}

.flip .card .face {
  width: 100%;
  height: 100%;
  position: absolute;
  -webkit-backface-visibility: hidden;
  z-index: 2;
  font-size: 1em;
}

.flip .card .front {
  position: absolute;
  z-index: 1;
  background: #282828;
  color: white;
}

.flip .card .back {
  -webkit-transform: rotatex(-180deg);
  background: #2196F3;
  color: white;
  text-align: center;
  line-height: 50px;
  overflow:hidden;
}

img {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  margin-top: 7.5px;
  margin-left: 5px;
}

.label2 {
  white-space: nowrap;
  font-size: 12px;
  width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: -30px;
  margin-left: 50px;
}

input {
  width: 95%;
  height:35px;
  margin-top: 0px;
  border: none;
  font-size: 18px;
  background: #282828;
  border-bottom: 2px solid #2196F3;
  outline: none;
  color: #2196F3;
  text-align: center;
}

.viewbtn {
  cursor:pointer;
  border: none;
  position: absolute;
  top: 0px;
  color: white;
  right: 0px;
  height: 50px;
  width: 40px;
  outline: 0;
  background: #2196F3;
}
.backbtn {
  cursor:pointer;
  border: none;
  position: absolute;
  top: 0px;
  color: white;
  right: 0px;
  height: 50px;
  width: 40px;
  outline: 0;
  background: #2196F3;
}
::-webkit-input-placeholder {
   color: rgba(255,255,255, 0.30);
  font-family: 'Orbitron', sans-serif;
}

 

See also  Node.js Fluent-FFMPEG Example to Cut or Trim MP4 Video Without Re Encoding With Specified Start & End Time in Javascript Full Project For Beginners

 

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

 

 

script.js

 

 

jQuery(function() {
  //var a = 'U2FsdGVkX1/iOfTfy10bb9mxxBDWPRVjgsqfnZP/YGc=';
 // alert(a);
  var rem = 0;
  var pre = 0;
  $(".viewbtn").click(function(event) {
    if (pre != 0) {
      $(pre).parent().next().children('.pswd').text(rem);
    }
    var tab = $(this);
    pre = $(this);
    $(".flip .card").removeClass('flipped');
    $(tab).parent().parent().parent().find(".card").toggleClass('flipped');
    var pass = $('#pass').val();
    var msg = $(tab).parent().next().children('.pswd').text();
    //var encrypted = CryptoJS.AES.encrypt(msg, pass);
    var decrypted = CryptoJS.AES.decrypt(msg, pass).toString(CryptoJS.enc.Utf8);
    //alert(msg+pass +"--"+decrypted);
    rem = $(tab).parent().next().children('.pswd').text();
    $(tab).parent().next().children('.pswd').text(decrypted);
  });

  $(".backbtn").click(function(event) {
    $(".flip .card").removeClass('flipped');
    $(this).parent().children('.pswd').text(rem);
    pre = 0;
  });

});

 

 

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

 

 

Leave a Reply