Code Snippets

Well, hi! Welcome. I'm sure you can tell from this site's layout that I am not the best at web design. However, I know that some people have trouble with Javascript/jQuery, and knowing that language is part of my job as a software developer.

So, I made this page to share whatever bits of code I managed to come up on my own time. They're not too fancy and I don't want to call myself an expert, but hey, if it works, it works! Please note that these will only work if you have jQuery installed.

To use JQuery for your site, you would just need to insert the JQuery script within your <head> block, as shown below:

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

Please feel free to take whatever little bits you find here to use for your site. No credit necessary!

Automatically Update Your Age

Tired of having to update your profile all the time when your birthday comes around? If you use this, you won't have to anymore!

IMPORTANT: Please be careful about sharing your age online, especially if you are a minor!

HTML

<p>Sonic the Hedgehog is <span id="age"></span> years old!<p>

JQuery

// Replace the date with your own birthdate WITHIN the double quotation marks ("").
// Do NOT remove those quotation marks!

var dob = new Date("06/23/1991");
var month_diff = Date.now() - dob.getTime();
var age_dt = new Date(month_diff);
var year = age_dt.getUTCFullYear();
var age = Math.abs(year - 1970);
document.getElementById("age").innerHTML = age;

Result

Sonic the Hedgehog is years old!

Simple Caret Menu

Simple menus that don't involve a lot of fancy CSS are something I don't see covered a lot in tutorials, so I thought I'd provide one!

HTML

<div id="sample-menu">
  <label for="main-menu">Menu <span class="caret">▸</span></label>
  <input type="checkbox" id="main-menu">
  <ul class="sub-menu">
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
  </ul>
</div>

CSS

/* === SINGULAR MENU CSS === */
#sample-menu input {
  position: absolute;
  height: 0;
  opacity: 0;
}

#sample-menu label {
  cursor: pointer;
}

#sample-menu ul {
  display: none;
  transition: height .1s linear;
}

#sample-menu input:checked + .sub-menu {
  display: block;
  height: auto;
  margin-top: 0;
}

JQuery

$("input[type='checkbox']").on("change", function(){
  caret = $(this).siblings("label").children("span");
  caret.html() == "▸" ? caret.html("▾") : caret.html("▸");
})

Result