DREW RAFFERTY

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   
}