Roman Numeral Converter

JavaScript
function convertToRoman(num) {

    var roman = [];
    var numString = num.toString();
    //split number into an array containing only any digits entered
    var numArr = numString.match(/\d/g);
    //store value of the number without any special characters, such as commas
    var bareNumber = numArr.join('');
    var thousands = bareNumber / 1000;
    //initialize variables for each index in the array that contains the last 3 digits
    var hundreds = 0;
    var tens = 1;
    var ones = 2;

    //if the number has digits for the thousands, push an "M" into the array for each thousand
    if (thousands >= 1) {
        thousands = Math.floor(thousands);
        console.log(thousands);

        for (i = 0; i < thousands; i++) {
            roman.push("M");
        }
        var thousandsString = thousands.toString();

        //remove each digit for thousands from the beginning of the array
        for (i = 0; i < thousandsString.length; i++) {
            numArr.shift();
        }
    }

    //function to convert last 3 array digits to their Roman numerals
    function parseNumbers(first, second, third, position) {
        //hundreds, tens, or ones: 1-2
        if (numArr[position] >= 1 && numArr[position] <= 3) {
            for (i = 0; i < numArr[position]; i++) {
                roman.push(first);
            }
        }
        //4
        if (numArr[position] == 4) {
            roman.push(first + second);
        }
        //5
        if (numArr[position] == 5) {
            roman.push(second);
        }
        //6-8
        if (numArr[position] >= 6 && numArr[position] <= 8) {
            roman.push(second);
            for (i = 5; i < numArr[position]; i++) {
                roman.push(first);
            }
        }
        //9
        if (numArr[position] == 9) {
            roman.push(first + third);
        }
    }

    //if there is a hundreds digit, do the conversion for this digit
    console.log(numArr.length);
    if (numArr.length === 3) {
        //hundreds
        parseNumbers("C", "D", "M", hundreds);
    }

    //if there is a tens digit, do the conversion for this digit
    if (numArr.length >= 2) {

        if (numArr.length === 2) {
            //if the number starts with tens, shift the array position fed to the parser to the correct digit
            tens = 0;
            ones = 1;
        }
        //tens
        parseNumbers("X", "L", "C", tens);
    }

    //if there is a ones digit, do the conversion for this digit
    if (numArr.length >= 1) {
        //if the number starts with ones, shift the array position fed to the parser to the correct digit
        if (numArr.length === 1) {
            ones = 0;
        }
        //ones
        parseNumbers("I", "V", "X", ones);
    }

    num = roman.toString();
    num = num.replace(/,/g, '');
    console.log(num);
    return num;
}

Animated Underscores

JavaScript
 jQuery(document).ready(function () {
     /*CSS transition on width of toggled class*/
     //toggle class with changed width
     jQuery(".width-parent").hover(
         //in
         function () {
             jQuery('.width-child').toggleClass('width-child-big width-child-small');

         },
         //out
         function () {
             jQuery('.width-child').toggleClass('width-child-big width-child-small');

         });
     /*CSS keyframe animation*/
     //remove class that hides .keyframe underline animation after the first requisite animation is complete.  This prevents the underline animation from being visible on page load, but allows it to happen thereafter on hover.
     setTimeout(function () {
         jQuery('.keyframe').removeClass('keyframe-temp-color');
     }, 1100);
 });
jQuery(window).on("load resize", function () {
     /*jQuery animation from center point*/
     //needs to run on load to get correct width measurement
     jQuery(".js-first").hover(
         //in 
         function () {
            var maxWidth = Math.round(jQuery('.js-first').width());
             jQuery('.js-second').animate({
                 width: maxWidth,
                 right: 0
             });
         },
         //out
         function () {
             jQuery('.js-second').animate({
                 width: 0,
                 right: '50%'
             });
         });
 });
CSS
/*heading text with changing colors*/
.see-through {
    background: url(https://resultswebsitedesign.com/wp-content/uploads/2017/10/green2-1000x100.jpg) center top;
    /* if we can clip, do it */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    /* fallback text color, which needs to work on the background for IE*/
    color: black;
    animation: hue 10s infinite;
    animation-delay: 3s;
}
/*color cycling animation in title text: credit animate.css website*/
@-webkit-keyframes hue {
    from {
        -webkit-filter: hue-rotate(0deg);
    }
    to {
        -webkit-filter: hue-rotate(-360deg);
    }
}
.rotate,
.scale,
.width-parent,
.keyframe,
.js-container {
    position: relative;
    display: inline-block;
}
.rotate::after,
.scale::after,
.keyframe::after {
    left: 0;
    top: 28px;
    position: absolute;
    content: "";
    height: 2px;
}
.rotate::after {
    width: 100%;
    background: black;
    transform: rotateY(270deg);
    transition: transform 1s ease-out;
}
.rotate:hover::after {
    transform: rotateY(180deg);
}
.scale::after {
    width: 100%;
    background: black;
    transform: scale(0);
    transition: transform 1s cubic-bezier(0.14, 0.77, 0.38, 0.97);
}
.scale:hover::after {
    transform: scale(1);
}
.keyframe::after {
    left: 50%;
    background: black;
    animation: shrink 1s;
}
/*temp bkgrnd color of .keyframe underline is transparent until the initial requisite animation completes.  This class is then removed*/
.keyframe-temp-color::after {
    background: transparent;
}
.keyframe:hover::after {
    animation: grow 1s;
}
@keyframes shrink {
    from {
        left: 0;
        width: 100%;
    }
    to {
        left: 50%;
        width: 0;
    }
}
@keyframes grow {
    from {
        left: 50%;
        width: 0;
    }
    to {
        left: 0;
        width: 100%;
    }
}
.width-child {
    position: absolute;
    height: 2px;
    background: black;
    left: 0;
    bottom: 2px;
    transition: all 1s;
}
.width-child-small {
    width: 0;
    left: 50%;
}
.width-child-big {
    width: 100%;
    left: 0;
}
.js-second {
    width: 0;
    height: 2px;
    position: absolute;
    background: black;
    right: 50%;
    bottom: 8px;
}
HTML
<div class="main-container">
    <h2 class="underline-title see-through">Expanding Underline from Center Point: 5 Approaches</h2>

    <p class="underlines-description">blah blah blah.</p>

    <h3 class="rotate">CSS transform: rotate.</h3>
    <br>
    <h3 class="scale">CSS transform: scale.</h3>
    <br>
    <h3 class="width-parent">CSS transition on width & position.<span class="width-child width-child-small"></span></h3>
    <br>
    <h3 class="keyframe keyframe-temp-color">CSS keyframe animation.</h3>
    <br>
    <div class="js-container">
        <h3 class="js-first">jQuery animation.</h3>
        <div class="js-second"></div>
    </div>
</div>