projects
Code Snippets
Personal Website2018
Built with html5 · css3 · javascript
Mobile Nav Bar
//// JAVASCRIPT ////
function myFunction() {
var x = document.getElementById("menu-list");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
//// HTML ////
<div class="button"
onclick="myFunction()"></div>
<div id="nav-icon">
<span></span>
<span></span>
<span></span>
</div>
</div>
<div class="menu-list" id="menu-list">
<ul id="vertical">
<li><a href="index.html">about</a></li>
<li><a href="experience.html">experience</a></li>
<li><a href="projects.html"id="active">projects</a></li>
<li><a href="contact.html">contact</a></li>
</ul>
</div>
///// CSS /////
#nav-icon {
width: 40px;
height: 45px;
position: relative;
margin: 50px auto;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
margin-top: 60px;
}
#nav-icon span {
display: block;
position: absolute;
height: 2px;
width: 100%;
background: black;
opacity: 1;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
#nav-icon span:nth-child(1){
top: 5px;
}
#nav-icon span:nth-child(2) {
top: 16px;
}
#nav-icon span:nth-child(3){
top: 28px;
}
#nav-icon.open span:nth-child(1){
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#nav-icon.open span:nth-child(2) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#nav-icon.open span:nth-child(1) {
left: 0px;
top: 22px;
}
#nav-icon.open span:nth-child(2) {
left: 0px;
top: 22px;
}
#nav-icon.open span:nth-child(3) {
left: -50%;
opacity: 0;
}
.button {
height: 50px;
width: 70px;
margin-left: auto;
margin-right: auto;
display: none;
margin-top: -40px;
}
#vertical {
list-style-type: none;
margin-left: -40px;
}
#vertical li {
color: white;
text-align: center;
text-decoration: none;
padding-top: 10px;
padding-bottom: 10px;
border-bottom: 2px solid black;
width: 120px;
margin-right: auto;
margin-left: auto;
}
#vertical li a{
color: black;
text-align: center;
text-decoration: none;
padding-top: 10px;
padding-bottom: 10px;
transition:.2s;
}
#vertical li a:hover{
color: #D9D2E9;
}
.menu-list {
display: none;
height: 200px;
width: 200px;
margin-right: auto;
margin-left: auto;
}
@media (max-width:700px) {
.button {
display: block;
}
.menu-nav {
display: none;
}
}
Responsive Content Box
//// HTML ////
<a class="box-link" href="index.html">
<div class="box">
<div class="left">
<img src="namelogo.png" id="icon" height="70" width="70">
</div>
<div class="right">
<h12>Personal Website</h12><h14>2018</h14>
<br>
<div class="space"></div>
<h13> Built with html5 · css3 · javascript</h13>
</div>
</div>
</a>
//// CSS ////
.box {
border: 1px solid lightgray;
width: 80%;
border-radius: 3px;
margin-left: auto;
margin-right: auto;
overflow: hidden;
padding-top: 10px;
padding-bottom: 10px;
padding-right: 15px;
transition: .2s;
-webkit-box-shadow:0 0 px lightgray;
-moz-box-shadow: 0 0 8px lightgray;
box-shadow:0 0 8px lightgray;
margin-top: 30px;
}
.box:hover {
color: dodgerblue;
border: 1px solid dodgerblue;
cursor: pointer;
}
.left {
width: 20%;
text-align: center;
}
.right {
width: 80%;
float: right;
margin-top: -65px;
}
@media (max-width: 600px) {
.right {float: none; margin-top: 10px;
width: 100%; padding:10px;}
.left {float: none; margin-right: auto;
margin-left:auto;}
}
h12 {
font-size: 18px;
font-weight: 800;
}
h13 {
font-size: 15px;
font-weight: 550;
opacity: 0.5;
}
h14 {
font-size: 14px;
float: right;
opacity: 0.5;
}
.box-link {
text-decoration: none;
color: black;
}
Portal
Portal Desktop App2019
Student toolkit and organizational planner using Electron & Node.js
GPA Calculator .js Framework
//// JAVASCRIPT ////
var $outer = $('.outer-box');
var $gpa = $('#gpa');
var $result = $('.result').hide();
$('.btn').click(function() {
$('.block').last().clone().children().val("").parent().appendTo($('.inner-box'));
});
$outer.on('keyup', '.units', function() {
$gpa.text(getTotal());
});
$outer.on("change", ".grade-select", function() {
$gpa.text(getTotal());
$result.is(":hidden") && $result.show();
});
function getTotal() {
var gradeTotal = 0;
var sum = 0;
$(".units").each(function() {
var $this = $(this);
if(!isNaN($this.val()) && !isNaN($this.parent().find('.grade-select').val())) {
sum += parseFloat($this.val() || 0) * parseFloat($this.parent().find('.grade-select').val() || 0);
gradeTotal += parseFloat($this.val() || 0)
}
});
return (sum/gradeTotal).toFixed(2);
}
$(".btn").on("click", function () {
$('html, body').animate({scrollTop:$(document).height()}, 'slow');
return false;
});
//// HTML ////
<div class='outer-box'>
<div class='inner-box'>
<p id="class-name">Course</p>
<form class='block'>
<input type="text" class='course' placeholder="Course Name">
<label>Units</label>
<input type="text" class='units'>
<label>Grade</label>
<select class='grade-select'>
<option value="">Select</option>
<option value="4.0">A+</option>
<option value="4.0">A</option>
<option value="3.7">A-</option>
<option value="3.3">B+</option>
<option value="3.0">B</option>
<option value="2.7">B-</option>
<option value="2.3">C+</option>
<option value="2.0">C</option>
<option value="1.7">C-</option>
<option value="1.0">D</option>
<option value="0.0">F</option>
</select>
</form>
</div>
<div class='btn btn-default'>+ Add Course</div>
<div class='result'>
<h3 id="gpa">GPA</h3>
</div>
</div>
<div class='spacer'></div>
Audio Player
Audio Web Player2016
Open-source embedded music playlist
Toggle Functions
//Now Playing...
function firstSong() {
document.getElementById("current").innerHTML = "Now Playing... #Song Name#";
}
function secondSong() {
document.getElementById("current").innerHTML = "Now Playing... #Song Name#";
}
function thirdSong() {
document.getElementById("current").innerHTML = "Now Playing... #Song Name#";
}
function fourthSong() {
document.getElementById("current").innerHTML = "Now Playing... #Song Name#";
}
function fifthSong() {
document.getElementById("current").innerHTML = "Now Playing... #Song Name#";
}
//control bar appear
var f = document.getElementById("#").style.visibility = "hidden";
function showbar() {
document.getElementById("#").style.visibility = "visible";
}
function hidebar() {
document.getElementById("#").style.visibility = "hidden";
}
//toggle change play/pause
var x = document.getElementById("#");
function playSong() {
x.play();
y.pause();
z.pause();
u.pause();
v.pause();
x.currentTime = 0
}