Assigment - Animations

[Konzaih]

Took me a while to figure out I had to remove the hardcoded animation classes from the html & to select two classes using jQuery like this: $(".class1, .class2") I hope this might help someone.
I’ve realised my Animation DNA doesn’t update when moving the slider but I cant really find a difference in my code compared to other posts. Would appreciate someone having a look.
Thanks!

animations.css

.movingHead {
  animation: moveHead 3s infinite;
}

@keyframes moveHead {
  0% {
    transform: rotate(0deg);
  }
  30% {
    transform: rotate(5deg);
  }
  60% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-5deg);
  }
}

.movingTail {
  animation: moveTail 3s infinite;
}

@keyframes moveTail {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(10deg);
  }
  50% {
    transform: rotate(20deg);
  }
  75% {
    transform: rotate(10deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

.movingNose {
  animation: moveNose 2s infinite;
}

@keyframes moveNose {
  0% {
    transform: rotate(0deg) scale(1, 1);
  }
  25% {
    transform: rotate(4deg) scale(1.03, 1.03);
  }
  50% {
    transform: rotate(5deg) scale(1.07, 1.07);
  }
  75% {
    transform: rotate(2deg) scale(1.03, 1.03);
  }
  100% {
    transform: rotate(0deg) scale(1, 1);
  }
}

.movingEyes {
  animation: moveEyes 3s infinite;
}

@keyframes moveEyes {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(25deg);
  }
  50% {
    transform: rotate(50deg);
  }
  75% {
    transform: rotate(25deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

.movingEars {
  animation: moveEars 6s infinite;
}

@keyframes moveEars {
  0% {
    top: 0px;
    transform: rotate(0deg);
  }
  25% {
    top: 2px;
    transform: rotate(1.5deg);
  }
  50% {
    top: 3px;
    transform: rotate(3deg);
  }
  75% {
    top: 2px;
    transform: rotate(1.5deg);
  }
  100% {
    top: 0px;
    transform: rotate(0deg);
  }
}

.movingWhiskers {
  animation: moveWhiskers 3s infinite;
}

@keyframes moveWhiskers {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(3deg);
  }
  50% {
    transform: rotate(7deg);
  }
  75% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

catSettings.js

var colors = Object.values(allColors())

var defaultDNA = {
    "headcolor" : 10,
    "mouthColor" : 13,
    "eyesColor" : 96,
    "earsColor" : 10,
    //Cattributes
    "eyesShape" : 1,
    "decorationPattern" : 1,
    "decorationMidColor" : 13,
    "decorationSideColor" : 13,
    "animation" :  1,
    "lastNum" :  1
    }

// when page load
$( document ).ready(function() {
  $('#dnabody').html(defaultDNA.headColor);
  $('#dnamouth').html(defaultDNA.mouthColor);
  $('#dnaeyes').html(defaultDNA.eyesColor);
  $('#dnaears').html(defaultDNA.earsColor);
    
  $('#dnashape').html(defaultDNA.eyesShape)
  $('#dnadecoration').html(defaultDNA.decorationPattern)
  $('#dnadecorationMid').html(defaultDNA.decorationMidColor)
  $('#dnadecorationSide').html(defaultDNA.decorationSideColor)
  $('#dnaanimation').html(defaultDNA.animation)
  $('#dnaspecial').html(defaultDNA.lastNum)

  renderCat(defaultDNA)
});

function getDna(){
    var dna = ''
    dna += $('#dnabody').html()
    dna += $('#dnamouth').html()
    dna += $('#dnaeyes').html()
    dna += $('#dnaears').html()
    dna += $('#dnashape').html()
    dna += $('#dnadecoration').html()
    dna += $('#dnadecorationMid').html()
    dna += $('#dnadecorationSide').html()
    dna += $('#dnaanimation').html()
    dna += $('#dnaspecial').html()

    return parseInt(dna)
}

function renderCat(dna){
    headColor(colors[dna.headcolor],dna.headcolor)
    $('#bodycolor').val(dna.headcolor)
    mouthColor(colors[dna.mouthcolor],dna.mouthcolor)
    $('#mouthcolor').val(dna.headcolor)
    eyesColor(colors[dna.eyescolor],dna.eyescolor)
    $('#eyescolor').val(dna.eyescolor)
    earsColor(colors[dna.earscolor],dna.earscolor)
    $('#earscolor').val(dna.earscolor)
    eyeVariation(dna.eyesShape)
    $('#eyeshape').val(dna.eyesShape)
    decorationVariation(dna.decorationPattern)
    $('#decorationshape').val(dna.decorationPattern)
    midColor(colors[dna.decorationMidColor],dna.decorationMidColor)
    $('#decorationmid').val(dna.decorationMidColor)
    SidesColor(colors[dna.decorationSidesColor],dna.decorationSideColor)
    $('#decorationside').val(dna.decorationSideColor)
    animationVariation(dna.animation)
    $('#animation').val(dna.animation)
}

// Changing cat colors
$('#bodycolor').change(()=>{
    var colorVal = $('#bodycolor').val()
    headColor(colors[colorVal],colorVal)
})

$('#mouthcolor').change(()=>{
  var colorVal = $('#mouthcolor').val()
  mouthColor(colors[colorVal],colorVal)
})

$('#eyescolor').change(()=>{
  var colorVal = $('#eyescolor').val()
  eyesColor(colors[colorVal],colorVal)
})

$('#earscolor').change(()=>{
  var colorVal = $('#earscolor').val()
  earsColor(colors[colorVal],colorVal)
})

//Changing Eye Shape
$('#eyeshape').change(()=>{
  var shape = parseInt ($('#eyeshape').val()) //between 1 and 7
  eyeVariation(shape)
})

//Changing Decoration
$('#decorationshape').change(()=>{
  var shape = parseInt ($('#decorationshape').val()) //between 1 and 9
  decorationVariation(shape)
})

$('#decorationmid').change(()=>{
  var colorVal = $('#decorationmid').val()
  decorationMidColor(colors[colorVal],colorVal)
})

$('#decorationside').change(()=>{
  var colorVal = $('#decorationside').val()
  decorationSideColor(colors[colorVal],colorVal)
})

$('#animation').change(()=>{
  var animationVal = parseInt( $('#animation').val() )
  animationVariation(animationVal)
})

catFactory.js

//Random color
function getColor() {
    var randomColor = Math.floor(Math.random() * 16777215).toString(16);
    return randomColor
}

function genColors(){
    var colors = []
    for(var i = 10; i < 99; i ++){
      var color = getColor()
      colors[i] = color
    }
    return colors
}

//This function code needs to modified so that it works with Your cat code.
function headColor(color,code) {
    $('.cat__head, .cat__chest').css('background', '#' + color)  //This changes the color of the cat
    $('#headcode').html('code: '+code) //This updates text of the badge next to the slider
    $('#dnabody').html(code) //This updates the head color part of the DNA that is displayed below the cat
}

function mouthColor(color,code) {
    $('.cat__mouth-contour, .cat__chest_inner, .cat__tail').css('background', '#' + color)  //This changes the color of the cat
    $('#mouthcode').html('code: '+code) //This updates text of the badge next to the slider
    $('#dnamouth').html(code) //This updates the mouth color part of the DNA that is displayed below the cat
}

function eyesColor(color,code) {
    $('.pupil-left, .pupil-right').css('background', '#' + color)  //This changes the color of the cat
    $('#eyescode').html('code: '+code) //This updates text of the badge next to the slider
    $('#dnaeyes').html(code) //This updates the eye color part of the DNA that is displayed below the cat
}

function earsColor(color,code) {
    $('.cat__ear--left, .cat__ear--right, .cat__paw-left, .cat__paw-left_inner, .cat__paw-right, .cat__paw-right_inner').css('background', '#' + color)  //This changes the color of the cat
    $('#earscode').html('code: '+code) //This updates text of the badge next to the slider
    $('#dnaears').html(code) //This updates the ear color part of the DNA that is displayed below the cat
}

function decorationMidColor(color,code) {
    $('.cat__head-dots').css('background', '#' + color)  //This changes the mid decoration color of the cat
    $('#decorationMidColor').html('code: '+code) //This updates text of the badge next to the slider
    $('#dnadecorationMid').html(code) 
}

function decorationSideColor(color,code) {
    $('.cat__head-dots_first, .cat__head-dots_second').css('background', '#' + color)  //This changes the side decoration color of the cat
    $('#decorationSideColor').html('code: '+code) //This updates text of the badge next to the slider
    $('#dnadecorationSide').html(code)
}

//###################################################
//Functions below will be used later on in the project
//###################################################
function eyeVariation(num) {

    $('#dnashape').html(num)
    switch (num) {
        case 1:
            normalEyes() //set the badge to "Basic"
            $('#eyeName').html('Basic')
            break
        case 2:
            normalEyes()
            $('#eyeName').html('Chill')
            eyesType1() //set border to change the shape of the eye
            break
        case 3:
            normalEyes()
            $('#eyeName').html('Cute')
            eyesType2() //set border to change the shape of the eye
            break
        case 4:
            normalEyes()
            $('#eyeName').html('Right')
            eyesType3() //set border to change the shape of the eye
            break
        case 5:
            normalEyes()
            $('#eyeName').html('Left')
            eyesType4() //set border to change the shape of the eye
            break
        case 6:
            normalEyes()
            $('#eyeName').html('Pinch')
            eyesType5() //set border to change the shape of the eye
            break   
        case 7:
            normalEyes()
            $('#eyeName').html('High')
            eyesType6() //set border to change the shape of the eye
            break  
        default:
            console.log("Not 1 or 2");
            break;
    }
}

function decorationVariation(num) {
    $('#dnadecoration').html(num)
    switch (num) {
        case 1:
            $('#decorationName').html('Basic')
            normaldecoration()
            break
        case 2:
            normaldecoration()
            $('#decorationName').html('Long')
            decorationType1()
            break
        case 3:
            normaldecoration()
            $('#decorationName').html('Short')
            decorationType2()
            break
        case 4:
            normaldecoration()
            $('#decorationName').html('Wide Angle')
            decorationType3()
            break
        case 5:
            normaldecoration()
            $('#decorationName').html('Narrow Angle')
            decorationType4()
            break
        case 6:
            normaldecoration()
            $('#decorationName').html('Thin')
            decorationType5()
            break
        case 7:
            normaldecoration()
            $('#decorationName').html('Thick')
            decorationType6()
            break 
        case 8:
            normaldecoration()
            $('#decorationName').html('Round')
            decorationType7()
            break     
        case 9:
            normaldecoration()
            $('#decorationName').html('Inverted')
            decorationType8()
            break      
    }
}

function animationVariation(num) {
    $('.dnaanimation').html(num);
    switch (num) {
        case 1:
            $('#animationName').html('Head')
            animationType1();

            break;
        case 2:
            $('#animationName').html('Tail')
            animationType2();
            break;
        case 3:
            $('#animationName').html('Nose')
            animationType3();
            break;
        case 4:
            $('#animationName').html('Eyes')
            animationType4();
            break;
        case 5:
            $('#animationName').html('Ears')
            animationType5();
            break;
        case 6:
            $('#animationName').html('Whiskers')
            animationType6();
            break;
    }
}
function animationType1(){
    resetAnimation();
    $('#head').addClass("movingHead");
}
function animationType2(){
    resetAnimation();
    $(".cat__tail").addClass("movingTail");
}
function animationType3(){
    resetAnimation();
    $(".cat__nose").addClass("movingNose");
}
function animationType4(){
    resetAnimation();
    $(".pupil-left, .pupil-right").addClass("movingEyes");
}
function animationType5(){
    resetAnimation();
    $(".cat__ear").addClass("movingEars");
}
function animationType6(){
    resetAnimation();
    $(".cat__whiskers-left, .cat__whiskers-right").addClass("movingWhiskers");
}

function resetAnimation(){
    $('#head').removeClass("movingHead");
    $('.cat__tail').removeClass("movingTail");
    $('.cat__nose').removeClass("movingNose");
    $('.pupil-left, .pupil-right').removeClass("movingEyes");
    $('.cat__ear').removeClass("movingEars");
    $('.cat__whiskers-left, .cat__whiskers_right').removeClass("movingWhiskers");
}

function normalEyes() {
    $('.cat__eye').find('span').css('border', 'none')
}
function eyesType1() {
    $('.cat__eye').find('span').css('border-top', '15px solid')
}
function eyesType2() {
    $('.cat__eye').find('span').css('border-bottom', '10px solid')
}
function eyesType3() {
    $('.cat__eye').find('span').css('border-left', '10px solid')
}
function eyesType4() {
    $('.cat__eye').find('span').css('border-right', '10px solid')
}
function eyesType5() {
    $('.cat__eye').find('span').css('border-top' , '10px solid').css('border-bottom' , '10px solid')
}
function eyesType6() {
    $('.cat__eye').find('span').css('border-left' , '10px solid').css('border-right' , '10px solid')
}

async function normaldecoration() {
    //Remove all style from other decorations
    //In this way we can also use normalDecoration() to reset the decoration style
    $('.cat__head-dots').css({ "transform": "rotate(0deg)", "height": "48px", "width": "14px", "top": "1px", "border-radius": "0 0 50% 50%" })
    $('.cat__head-dots_first').css({ "transform": "rotate(0deg)", "height": "35px", "width": "14px", "top": "1px", "border-radius": "50% 0 50% 50%" })
    $('.cat__head-dots_second').css({ "transform": "rotate(0deg)", "height": "35px", "width": "14px", "top": "1px", "border-radius": "0 50% 50% 50%" })
}
function decorationType1() {
    $('.cat__head-dots').css({ "transform": "rotate(0deg)", "height": "58px", "width": "14px", "top": "1px", "border-radius": "0 0 50% 50%" })
    $('.cat__head-dots_first').css({ "transform": "rotate(0deg)", "height": "45px", "width": "14px", "top": "1px", "border-radius": "50% 0 50% 50%" })
    $('.cat__head-dots_second').css({ "transform": "rotate(0deg)", "height": "45px", "width": "14px", "top": "1px", "border-radius": "0 50% 50% 50%" })
}
function decorationType2() {
    $('.cat__head-dots').css({ "transform": "rotate(0deg)", "height": "33px", "width": "14px", "top": "1px", "border-radius": "0 0 50% 50%" })
    $('.cat__head-dots_first').css({ "transform": "rotate(0deg)", "height": "20px", "width": "14px", "top": "1px", "border-radius": "50% 0 50% 50%" })
    $('.cat__head-dots_second').css({ "transform": "rotate(0deg)", "height": "20px", "width": "14px", "top": "1px", "border-radius": "0 50% 50% 50%" })
}
function decorationType3() {
    $('.cat__head-dots').css({ "transform": "rotate(0deg)", "height": "48px", "width": "14px", "top": "1px", "border-radius": "0 0 50% 50%" })
    $('.cat__head-dots_first').css({ "transform": "rotate(45deg)", "height": "35px", "width": "14px", "top": "-4px", "border-radius": "50% 0 50% 50%" })
    $('.cat__head-dots_second').css({ "transform": "rotate(-45deg)", "height": "35px", "width": "14px", "top": "-4px", "border-radius": "0 50% 50% 50%" })
}
function decorationType4() {
    $('.cat__head-dots').css({ "transform": "rotate(0deg)", "height": "48px", "width": "14px", "top": "1px", "border-radius": "0 0 50% 50%" })
    $('.cat__head-dots_first').css({ "transform": "rotate(-25deg)", "height": "35px", "width": "14px", "top": "1px", "border-radius": "50% 0 50% 50%" })
    $('.cat__head-dots_second').css({ "transform": "rotate(25deg)", "height": "35px", "width": "14px", "top": "1px", "border-radius": "0 50% 50% 50%" })
}
function decorationType5() {
    $('.cat__head-dots').css({ "transform": "rotate(0deg)", "height": "48px", "width": "7px", "top": "1px", "border-radius": "0 0 50% 50%" })
    $('.cat__head-dots_first').css({ "transform": "rotate(0deg)", "height": "35px", "width": "7px", "top": "1px", "border-radius": "50% 0 50% 50%" })
    $('.cat__head-dots_second').css({ "transform": "rotate(0deg)", "height": "35px", "width": "7px", "top": "1px", "border-radius": "0 50% 50% 50%" })
}
function decorationType6() {
    $('.cat__head-dots').css({ "transform": "rotate(0deg)", "height": "48px", "width": "18px", "top": "1px", "border-radius": "0 0 50% 50%" })
    $('.cat__head-dots_first').css({ "transform": "rotate(0deg)", "height": "35px", "width": "18px", "top": "1px", "border-radius": "50% 0 50% 50%" })
    $('.cat__head-dots_second').css({ "transform": "rotate(0deg)", "height": "35px", "width": "18px", "top": "1px", "border-radius": "0 50% 50% 50%" })
}
function decorationType7() {
    $('.cat__head-dots').css({ "transform": "rotate(0deg)", "height": "16px", "width": "16px", "top": "1px", "border-radius": "50%" })
    $('.cat__head-dots_first').css({ "transform": "rotate(0deg)", "height": "13px", "width": "13px", "top": "1px", "border-radius": "50%" })
    $('.cat__head-dots_second').css({ "transform": "rotate(0deg)", "height": "13px", "width": "13px", "top": "1px", "border-radius": "50%" })
}
function decorationType8() {
    $('.cat__head-dots').css({ "transform": "rotate(0deg)", "height": "49px", "width": "16px", "top": "1px", "border-radius": "50% 50% 0 0" })
    $('.cat__head-dots_first').css({ "transform": "rotate(0deg)", "height": "35px", "width": "13px", "top": "13px", "border-radius": "50%  50% 0 50%" })
    $('.cat__head-dots_second').css({ "transform": "rotate(0deg)", "height": "35px", "width": "13px", "top": "13px", "border-radius": "50% 50% 50% 0"  })
}

[jak]

I think the animation section was a hit!

My animations were:

1. Tiltin
2. Scarin
3. Wavin
4. Vibing
5. Waggin

Here’s my code!

index.html

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Academy kitties </title>
  <script type="text/javascript" src="assets/js/jquery-3.4.1.js"></script>
  <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
  <script src="assets/bootstrap/js/popper.js"></script>
  <script src="assets/bootstrap/js/bootstrap.min.js"></script>

  <link rel="stylesheet" href="assets/css/mystyle.css">
  <link rel="stylesheet" href="assets/css/cats.css">
  <link rel="stylesheet" href="assets/css/colors.css">
  <link rel="stylesheet" href="assets/css/factory.css">
  <link rel="stylesheet" href="assets/css/frontend.css">
  <link rel="stylesheet" href="assets/css/animations.css">
</head>
  <body>
    <div class="container p-5" style="margin-top: 12vh;margin-bottom: 10vh;">
        <div align="center">
        <h1 class="c-white">Kreative Kitties</h1>
        <p class="c-white">Kreate A Kustom Kitty</p>
    </div>
        <div class="row">
            <div class="col-lg-4 catBox m-2 light-b-shadow">
                <div class="cat">
                    <div class="cat__ear breathing">
                        <div id="leftEar" class="cat__ear--left">
                            <div class="cat__ear--left-inside"></div>
                        </div>
                        <div id="rightEar" class="cat__ear--right">
                            <div class="cat__ear--right-inside"></div>
                        </div>
                    </div>

                    <div id="head" class="cat__head breathing">
                        <div id="midDot" class="cat__head-dots">
                            <div id="leftDot" class="cat__head-dots_first"></div>
                            <div id="rightDot" class="cat__head-dots_second"></div>
                        </div>
                        <div class="cat__eye">
                            <div class="cat__eye--left">
                                <span class="pupil-left blinking"></span>
                            </div>
                            <div class="cat__eye--right">
                                <span class="pupil-right blinking"></span>
                            </div>
                        </div>
                        <div class="cat__nose"></div>

                        <div class="cat__mouth-contour"></div>
                        <div class="cat__mouth-left"></div>
                        <div class="cat__mouth-right"></div>

                        <div class="cat__whiskers-left"></div>
                        <div class="cat__whiskers-right"></div>
                    </div>

                    <div id="cat_body" class="cat__body">

                        <div class="cat__chest breathing"></div>

                        <div class="cat__chest_inner breathing"></div>


                        <div class="cat__paw-left"></div>
                        <div class="cat__paw-left_inner"></div>


                        <div class="cat__paw-right"></div>
                        <div class="cat__paw-right_inner"></div>


                        <div id="tail" class="cat__tail"></div>
                    </div>
                </div>
                <br>
                <div class="dnaDiv" id="catDNA">
                    <b>
                        DNA:
                        <!-- Colors -->
                         <span id="dnabody"></span>
                         <span id="dnamouth"></span>
                         <span id="dnaeyes"></span>
                         <span id="dnaears"></span>
                        
                         <!-- Cattributes -->
                         <span id="dnashape"></span>
                         <span id="dnadecoration"></span>
                         <span id="dnadecorationMid"></span>
                         <span id="dnadecorationSides"></span>
                         <span id="dnaanimation"></span>
                         <span id="dnaspecial"></span>
                    </b>
                </div>
            </div>
            <div class="col-lg-7 cattributes m-2 light-b-shadow">

<!-- Cat colors -->
<div id="catColors">
                <div class="form-group">
                    <label for="formControlRange"><b>Head and Body Color</b><span class="badge badge-dark ml-2" id="headcode"></span></label>
                    <input type="range" min="10" max="98" class="form-control-range mb-3" id="bodycolor">

                    <label for="formControlRange"><b>Mouth and Tail Color</b><span class="badge badge-dark ml-2" id="mouthtailcode"></span></label>
                    <input type="range" min="10" max="98" class="form-control-range mb-3" id="mouthtailcolor">

                    <label for="formControlRange"><b>Eye Color</b><span class="badge badge-dark ml-2" id="eyecode"></span></label>
                    <input type="range" min="10" max="98" class="form-control-range mb-3" id="eyecolor">

                    <label for="formControlRange"><b>Ear Color</b><span class="badge badge-dark ml-2" id="earcode"></span></label>
                    <input type="range" min="10" max="98" class="form-control-range mb-3" id="earcolor">

                    <label for="formControlRange"><b>Eye Shape</b><span class="badge badge-dark ml-2" id="eyename"></span></label>
                    <input type="range" min="1" max="6" class="form-control-range mb-3" id="eyeshape">

                    <label for="formControlRange"><b>Hair Type</b><span class="badge badge-dark ml-2" id="decorationName"></span></label>
                    <input type="range" min="1" max="5" class="form-control-range mb-3" id="decorationpattern">

                    <div class="form-control-range">
                        <div class="row">
                            <div class="col-sm">
                                <label for="formControlRange"><b>Primary Hair Color</b><span class="badge badge-dark ml-2" id="haircolorprimaryname"></span></label>
                            </div>
                            <div class="col-sm">
                                <label for="formControlRange"><b>Secondary Hair Color</b><span class="badge badge-dark ml-2" id="haircolorsecondaryname"></span></label>
                            </div>
                        </div>
    
                        <div class="row">
                            <div class="col-sm">
                                <input type="range" min="10" max="98" class="form-control-range mb-3" id="haircolorprimary">
                            </div>
                            <div class="col-sm">
                                <input type="range" min="10" max="98" class="form-control-range mb-3" id="haircolorsecondary">
                            </div>
                        </div>
                    </div>

                    <label for="formControlRange"><b>Activity</b><span class="badge badge-dark ml-2" id="activityname"></span></label>
                    <input type="range" min="1" max="5" class="form-control-range mb-3" id="activity">
                </div>
            </div>

            </div>

            </div>
            <br>

        </div>



    </div>

  </body>
  <script src="assets/js/colors.js"></script>
  <script src="assets/js/catSettings.js"></script>
  <script src="assets/js/catFactory.js"></script>

</html>

catFactory.js

//Random color
function getColor() {
    var randomColor = Math.floor(Math.random() * 16777215).toString(16);
    return randomColor
}

function genColors(){
    var colors = []
    for(var i = 10; i < 99; i ++){
      var color = getColor()
      colors[i] = color
    }
    return colors
}

//This function code needs to modified so that it works with Your cat code.
function headColor(color,code) {
    $('.cat__head, .cat__chest').css('background', '#' + color)  //This changes the color of the cat
    $('#headcode').html('code: '+code) //This updates text of the badge next to the slider
    $('#dnabody').html(code) //This updates the body color part of the DNA that is displayed below the cat
}

function mouthTailColor(color, code) {
    $('.cat__mouth-contour, .cat__mouth-left, cat__mouth-right').css('background', '#' + color)
    $('#mouthtailcode').html('code: '+code) // Updates Badge
    $('#dnamouth').html(code) // Updates DNA String
}

function eyeColor(color, code) {
    $('.pupil-left, .pupil-right').css('background', '#' + color)
    $('#eyecode').html('code: ' +code) // Updates Bade
    $('#dnaeyes').html(code) // Updates DNA String
}

function earColor(color, code) {
    $('#leftEar, #rightEar').css('background', '#' + color)
    $('#earcode').html('code: ' + code) // Updates Badge
    $('#dnaears').html(code) // Updates DNA String
}

function hairColorPrimary(color, code) {
    $('#midDot').css('background', '#' + color)
    $('#haircolorprimaryname').html('code: ' + code)
    $('#dnadecorationMid').html(code)
}

function hairColorSecondary(color, code) {
    $('#leftDot, #rightDot').css('background', '#' + color)
    $('#haircolorsecondaryname').html('code: ' + code)
    $('#dnadecorationSides').html(code)
}

//###################################################
//Functions below will be used later on in the project
//###################################################
function eyeVariation(num) {

    $('#dnashape').html(num) // Set DNA String
    switch (num) {
        case 1:
            normalEyes()
            $('#eyename').html('Basic') // Set Badge To 'Basic'
            break
        case 2:
            normalEyes()
            $('#eyename').html('Looking Down') // Set Badge To 'Looking Down'
            eyesType1()
            break
        case 3:
            normalEyes()
            $('#eyename').html('Looking Up') // Set Badge To 'Looking Up'
            eyesType2()
            break
        case 4:
            normalEyes()
            $('#eyename').html('Looking Left') // Set Badge To 'Looking Left'
            eyesType3()
            break
        case 5:
            normalEyes()
            $('#eyename').html('Looking Right') // Set Badge To 'Looking Right'
            eyesType4()
            break
        case 6:
            normalEyes()
            $('#eyename').html('Tiny Eyes') // Set Badge To 'Tiny Eyes'
            eyesType5()
            break
        default:
            normalEyes()
            $('#eyename').html('Error')
            break
    }
}

function decorationVariation(num) {
    $('#dnadecoration').html(num) // Set DNA String
    switch (num) {
        case 1:
            $('#decorationName').html('Basic')
            normaldecoration()
            break
        case 2:
            normaldecoration()
            $('#decorationName').html('Long Hair')
            decorationType1()
            break
        case 3:
            normaldecoration()
            $('#decorationName').html('Messy')
            decorationType2()
            break
        case 4:
            normaldecoration()
            $('#decorationName').html('Spiky')
            decorationType3()
            break
        case 5:
            normaldecoration()
            $('#decorationName').html('Flat')
            decorationType4()
            break
        default:
            normaldecoration()
            $('#decorationName').html('Error')
    }
}

function activityVariation(num) {
    $('#dnaanimation').html(num) // Set DNA String

    switch (num) {
        case 1:
            $('#activityname').html('Cutesy')
            animationType1()
            break
        case 2:
            $('#activityname').html('Boo!')
            animationType2()
            break
        case 3:
            $('#activityname').html('Waving')
            animationType3()
            break
        case 4:
            $('#activityname').html('Vibin')
            console.log("So far So good")
            animationType4()
            break
        case 5:
            $('#activityname').html('Tail Wag')
            console.log("So far So good")
            animationType5()
            break
        default:
            $('#activityname').html('Error')
            break
    }
}

// Set Eye Types

async function normalEyes() {
    await $('.cat__eye').find('span').css('border', 'none')
}

async function eyesType1() {
    await normalEyes()
    await $('.cat__eye').find('span').css('border-top', '15px solid')
}

async function eyesType2() {
    await normalEyes()
    await $('.cat__eye').find('span').css('border-bottom', '15px solid')
}

async function eyesType3() {
    await normalEyes()
    await $('.cat__eye').find('span').css('border-right', '15px solid')
}

async function eyesType4() {
    await normalEyes()
    await $('.cat__eye').find('span').css('border-left', '15px solid')
}

async function eyesType5() {
    await normalEyes()
    await $('.cat__eye').find('span').css('border', '15px solid')
}


// Set Hair Decoration

async function normaldecoration() {
    //Remove all style from other decorations
    //In this way we can also use normalDecoration() to reset the decoration style
    $('.cat__head-dots').css({ "transform": "rotate(0deg)", "height": "48px", "width": "14px", "top": "1px", "border-radius": "0 0 50% 50%" })
    $('.cat__head-dots_first').css({ "transform": "rotate(0deg)", "height": "35px", "width": "14px", "top": "1px", "border-radius": "50% 0 50% 50%" })
    $('.cat__head-dots_second').css({ "transform": "rotate(0deg)", "height": "35px", "width": "14px", "top": "1px", "border-radius": "0 50% 50% 50%" })
}

async function decorationType1() {
    await $('#midDot, #leftDot, #rightDot').css('height', '70px')
}

async function decorationType2() {
    await $('#leftDot').css('transform', 'rotate(-45deg)')
    await $('#rightDot').css('transform', 'rotate(45deg)')
}

async function decorationType3() {
    await $('#midDot, #leftDot, #rightDot').css('transform', 'rotate(180deg)')
}

async function decorationType4() {
    await $('#midDot, #leftDot, #rightDot').css('width', '20px')
}


// Set Activity Animation

async function resetanimation() {
    await $('#head').removeClass('tiltingHead')
    await $('#head').removeClass('scary')
    await $('.cat__paw-left, .cat__paw-right').removeClass('dancing')
    await $('#head').removeClass('vibing')
    await $('#tail').removeClass('wagging')
}

async function animationType1() { // Tiltin
    await resetanimation()
    await $('#head').addClass('tiltingHead')
}

async function animationType2() { // Scarin
    await resetanimation()
    await $('#head').addClass('scary')
}

async function animationType3() { // Dancin
    await resetanimation()
    await $('.cat__paw-left, .cat__paw-right').addClass('dancing')
}

async function animationType4() { // Vibin
    await resetanimation()
    await $('.cat__paw-left, .cat__paw-right').addClass('dancing')
    await $('#head').addClass('vibing')
}

async function animationType5() { // Tail Wag
    await resetanimation()
    await $('#tail').addClass('wagging')
}

catSettings.js

var colors = Object.values(allColors())

var defaultDNA = {
    "headcolor" : 15,
    "mouthColor" : 23,
    "eyesColor" : 93,
    "earsColor" : 10,
    //Cattributes
    "eyesShape" : 1,
    "decorationPattern" : 1,
    "decorationMidcolor" : 13,
    "decorationSidescolor" : 13,
    "animation" :  1,
    "lastNum" :  1
    }

// when page load
$( document ).ready(function() {
  $('#dnabody').html(defaultDNA.headColor);
  $('#dnamouth').html(defaultDNA.mouthColor);
  $('#dnaeyes').html(defaultDNA.eyesColor);
  $('#dnaears').html(defaultDNA.earsColor);

  $('#dnashape').html(defaultDNA.eyesShape);
  $('#dnadecoration').html(defaultDNA.decorationPattern);
  $('#dnadecorationMid').html(defaultDNA.decorationMidcolor);
  $('#dnadecorationSides').html(defaultDNA.decorationSidescolor);
  $('#dnaanimation').html(defaultDNA.animation);
  $('#dnaspecial').html(defaultDNA.lastNum);


    
//   $('#dnashape').html(defaultDNA.eyesShape)
//   $('#dnadecoration').html(defaultDNA.decorationPattern)
//   $('#dnadecorationMid').html(defaultDNA.decorationMidcolor)
//   $('#dnadecorationSides').html(defaultDNA.decorationSidescolor)
//   $('#dnaanimation').html(defaultDNA.animation)
//   $('#dnaspecial').html(defaultDNA.lastNum)

  renderCat(defaultDNA)
});

function getDna(){
    var dna = ''
    dna += $('#dnabody').html()
    dna += $('#dnamouth').html()
    dna += $('#dnaeyes').html()
    dna += $('#dnaears').html()
    dna += $('#dnashape').html()
    dna += $('#dnadecoration').html()
    dna += $('#dnadecorationMid').html()
    dna += $('#dnadecorationSides').html()
    dna += $('#dnaanimation').html()
    dna += $('#dnaspecial').html()

    return parseInt(dna)
}

function renderCat(dna){
    headColor(colors[dna.headcolor],dna.headcolor)
    $('#bodycolor').val(dna.headcolor)

    mouthTailColor(colors[dna.mouthColor], dna.mouthColor)
    $('#mouthtailcolor').val(dna.mouthColor)

    eyeColor(colors[dna.eyesColor], dna.eyesColor)
    $('#eyecolor').val(dna.eyesColor)

    earColor(colors[dna.earsColor], dna.earsColor)
    $('#earscolor').val(dna.earsColor)

    eyeVariation(dna.eyesShape)
    $('#eyeshape').val(dna.eyesShape)

    decorationVariation(dna.decorationPattern)
    $('#decorationpattern').val(dna.decorationPattern)

    hairColorPrimary(colors[dna.decorationMidcolor], dna.decorationMidcolor)
    $('#haircolorprimary').val(dna.decorationMidcolor)

    hairColorSecondary(colors[dna.decorationSidescolor], dna.decorationSidescolor)
    $('#haircolorsecondary').val(dna.decorationSidescolor)

    activityVariation(dna.animation)
    $('#activity').val(dna.animation)
}

// Changing cat colors
$('#bodycolor').change(()=>{
    var colorVal = $('#bodycolor').val()
    headColor(colors[colorVal],colorVal)
})

$('#mouthtailcolor').change(() => {
  var mouthTailColorVal = $('#mouthtailcolor').val()
  mouthTailColor(colors[mouthTailColorVal], mouthTailColorVal)
})

$('#eyecolor').change(() => {
  var eyeColorVal = $('#eyecolor').val()
  eyeColor(colors[eyeColorVal], eyeColorVal)
})

$('#earcolor').change(() => {
  var earColorVal = $('#earcolor').val()
  earColor(colors[earColorVal], earColorVal)
})


// Changing Cattributes

$('#eyeshape').change(() => {
  var eyeShapeVal = parseInt($('#eyeshape').val()) // Between 1 and 7
  eyeVariation(eyeShapeVal)
})

$('#decorationpattern').change(() => {
  var decorationVal = parseInt($('#decorationpattern').val())
  decorationVariation(decorationVal)
})

$('#haircolorprimary').change(() => {
  var hairColorPrimaryVal = $('#haircolorprimary').val()
  hairColorPrimary(colors[hairColorPrimaryVal], hairColorPrimaryVal)
})

$('#haircolorsecondary').change(() => {
  var hairColorSecondaryVal = $('#haircolorsecondary').val()
  hairColorSecondary(colors[hairColorSecondaryVal], hairColorSecondaryVal)
})

$('#activity').change(() => {
  var activityVal = parseInt($('#activity').val())
  activityVariation(activityVal)
})

animations.css

.blinking {
    animation: blinks 3s infinite;
}

@keyframes blinks {
    0% {
        border-top: 0px;
        border-bottom: 0px;
    }
    29% {
        border-top: 0px;
        border-bottom: 0px;
    }
    30% {
        border-top: 20px solid;
        border-bottom: 20px solid;
    }
    31% {
        border-top: 0px;
        border-bottom: 0px;
    }
    47% {
        border-top: 0px;
        border-bottom: 0px;
    }
    48% {
        border-top: 20px solid;
        border-bottom: 20px solid;
    }
    49% {
        border-top: 0px;
        border-bottom: 0px;
    }
}

.breathing {
    animation: breathe 4s infinite;
}

@keyframes breathe {
    20% {
        transform: scaleX(100%);
        transform: translateY(0%);
    }
    40% {
        transform: scaleX(110%);
        transform: translateY(-3px);
    }
    55% {
        transform: scaleX(110%);
        transform: translateY(-3px);
    }
    80% {
        transform: scale(100%);
        transform: translateY(0%);
    }
}

.scary {
    animation: boo 4s infinite;
}

@keyframes boo {
    0% {
        transform: scale(100%);
    }
    80% {
        transform: scale(100%);
    }
    81% {
        transform: scale(130%);
    }
    90% {
        transform: scale(100%);
    }
}

.tiltingHead {
    animation: headTilt 5s infinite;
}

@keyframes headTilt {
    0% {
        transform: rotate(0deg);
    }
    10% {
        transform: rotate(-5deg);
    }
    20% {
        transform: rotate(5deg);
    }
    30% {
        transform: rotate(0deg);
    }
}

.dancing {
    bottom: -30px;
    animation: dance 2s infinite;
}

@keyframes dance {
    0% {
        transform: rotate(0deg);
    }
    40% {
        transform: rotate(-20deg);
    }
    60% {
        transform: rotate(0deg);
    }
    80% {
        transform: rotate(20deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

.vibing {
    animation: vibe 1s infinite;
}

@keyframes vibe {
    25% {
        transform: translateY(20px);
    }
    75% {
        transform: translateY(-20px);
    }
}

.wagging {
    animation: wag 1s infinite;
}

@keyframes wag {
    0% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(-15deg);
    }
    75% {
        transform: rotate(15deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

[alp257]

Had fun doing this assignment, got to learn and create animations with CSS

Sharing the relevant code, in index.html

                <div class="form-group">
                    <label for="formControlRange"><b>Animation</b><span class="badge badge-dark ml-2" id="animationcode"></span></label>
                    <input type="range" min="1" max="4" class="form-control-range" id="animationvariation">
                </div>

The relevant code in catSettings.js

...
    animationVariation(dna.animation)
    $('#animationvariation').val(dna.animation)
...
$('#decorationpattern').change(()=>{
  var decorationPatten = parseInt($('#decorationpattern').val())
  decorationVariation(decorationPatten)
});
...

The relevant code in catFactory.js

...
function animationVariation(num) {
console.log(num);
    $('#dnaanimation').html(num)
    switch (num) {
        case 1:
            resetAnimation()
            $('#animationcode').html('Moving Head')
            movingHeadAnimation()
            break
        case 2:
            resetAnimation()
            $('#animationcode').html('Wandering Eyes')
            wanderingEyesAnimation()
            break
        case 3:
            resetAnimation()
            $('#animationcode').html('Wiggling Tail')
            wigglingTailAnimation()
            break
        case 4:
            resetAnimation()
            $('#animationcode').html('Jumping Paws')
            jumpingPawsAnimation()
            break          
        default:
            resetAnimation()
            $('#animationcode').html('Moving Head')
            movingHeadAnimation()
            break
    }
}
...
async function resetAnimation() {
    $('#face').removeClass('movingHead');
    $('.pupils').removeClass('wanderingEyes');
    $('.tail').removeClass('wigglingTail');
    $('.paws').removeClass('jumpingPaws');
}

async function movingHeadAnimation() {
    $('#face').addClass('movingHead');
}

async function wanderingEyesAnimation() {
    $('.pupils').addClass('wanderingEyes');
}

async function wigglingTailAnimation() {
    $('.tail').addClass('wigglingTail');
}

async function jumpingPawsAnimation() {
    $('.paws').addClass('jumpingPaws');
}
...

And the animation.css code

.movingHead {
    animation: moveHead 5s infinite;
}

.wanderingEyes {
    animation: wanderEyes 3s infinite;
}

.wigglingTail {
    animation: wiggleTail 1s infinite;
}

.jumpingPaws {
    animation: jumpPaws 1s infinite;
}

@keyframes moveHead {
    0% {
        transform: rotate(0deg);
    }
    30% {
        transform: rotate(7deg);
    }
    70% {
        transform: rotate(-7deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

@keyframes wanderEyes {
    0% {
        left: 12px;
    }
    30% {
        left: 7px;
    }
    70% {
        left: 17px;
    }
    100% {
        left: 12px;
    }
}

@keyframes wiggleTail {
    0% {
        transform: rotate(45deg);
    }
    50% {
        transform: rotate(50deg);
    }
    100% {
        transform: rotate(45deg);
    }
}

@keyframes jumpPaws {
    0% {
        top: 155px;
    }
    50% {
        top: 145px;
    }
    100% {
        top: 155px;
    }
}

With kind regards

[Kippie]

Updated Fishy!
Leaving filenames in cat form for now…

index.html

<html lang="en">
<head> 
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Academy fishies </title>
  <script type="text/javascript" src="assets/js/jquery-3.4.1.js"></script>
  <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
  <script src="assets/bootstrap/js/popper.js"></script>
  <script src="assets/bootstrap/js/bootstrap.min.js"></script>

  <link rel="stylesheet" href="assets/css/mystyle.css">
  <link rel="stylesheet" href="assets/css/cats.css">
  <link rel="stylesheet" href="assets/css/colors.css">
  <link rel="stylesheet" href="assets/css/factory.css">
  <link rel="stylesheet" href="assets/css/frontend.css">
  <link rel="stylesheet" href="assets/css/animations.css">
</head>
  <body>
    <div class="container p-5" style="margin-top: 12vh;margin-bottom: 10vh;">
        <div align="center">
        <h1 class="c-white">Fishies-Factory</h1>
        <p class="c-white">Create your custom Fishy</p>
        </div>
        <div class="row">
            <div class="col-lg-4 catBox m-2 light-b-shadow">
                <div class="fish">
                    <div class="fins" id=fins>
                        <div id="leftFin" class="fish__fin--left">
                            <div id="leftShade" class="fish__fin-leftShade"></div>
                        </div>
                        <div id="rightFin" class="fish__fin--right">
                            <div id="rightShade" class="fish__fin-rightShade"></div>
                        </div>
                        <div id="topFin" class="fish__tailFin--top">
                            <div id="topTailShade" class="fish__tailFin-topShade"></div>
                        </div>
                        <div id="bottomFin" class="fish__tailFin--bottom">
                            <div id="bottomTailShade" class="fish__tailFin-bottomShade"></div>
                        </div>
                        <div id="dorsalFin" class="fish__stableFin--dorsal"></div>
                        <div id="st_leftFin" class="fish__stableFin--left"></div>
                        <div id="st_rightFin" class="fish__stableFin--right"></div>
                    </div>

                    <div id="body" class="fish__body">
                        <div class="fish__eye">
                            <span class="fish__eye--left">
                                <div class="pupil-left"></div>
                            </span>
                            <span class="fish__eye--right">
                                <div class="pupil-right"></div>
                            </span>
                        </div>
                        <div id="mouth" class="fish__mouth">
                            <div id="teeth" class="fish__mouth-teeth"></div>
                        </div>
                    </div>
                </div>
                <br>
                <div class="dnaDiv" id="catDNA">
                    <b>
                        DNA:
                        <!-- Colors -->
                         <span id="dnabody"></span>
                         <span id="dnaside"></span>
                         <span id="dnatail"></span>
                         <span id="dnastablizer"></span>
                         <span id="dnaeye"></span>
                        
                         <!-- Cattributes -->
                         <span id="dnashape"></span>
                         <span id="dnadecoration"></span>
                         <span id="dnadecorationMid"></span>
                         <span id="dnadecorationSides"></span>
                         <span id="dnaanimation"></span>
                         <span id="dnaspecial"></span>
                    </b>
                </div>
            </div>
            <div class="col-lg-7 cattributes m-2 light-b-shadow">

<!-- Cat colors -->
            <div id="catColors">
                <div class="form-group">
                    <label for="formControlRange"><b>Head and body</b><span class="badge badge-dark ml-2" id="headcode"></span></label>
                    <input type="range" min="10" max="98" class="form-control-range" id="bodycolor">
                </div>
                <div class="form-group">
                    <label for="formControlRange"><b>Side Fins</b><span class="badge badge-dark ml-2" id="sideFinCode"></span></label>
                    <input type="range" min="10" max="98" class="form-control-range" id="sideFinColor">
                </div>
                <div class="form-group">
                    <label for="formControlRange"><b>Tail Fins</b><span class="badge badge-dark ml-2" id="tailcode"></span></label>
                    <input type="range" min="10" max="98" class="form-control-range" id="tailFinColor">
                </div>
                <div class="form-group">
                    <label for="formControlRange"><b>Stabilizer Fins</b><span class="badge badge-dark ml-2" id="stablizercode"></span></label>
                    <input type="range" min="10" max="98" class="form-control-range" id="stableFinColor">
                </div>
                <div class="form-group">
                    <label for="formControlRange"><b>Eyes</b><span class="badge badge-dark ml-2" id="eyecode"></span></label>
                    <input type="range" min="10" max="98" class="form-control-range" id="eyeColor">
                </div>
                <div class="form-group">
                    <label for="formControlRange"><b>Eye Shape</b><span class="badge badge-dark ml-2" id="eyeName"></span></label>
                    <input type="range" min="1" max="4" class="form-control-range" id="eyesShape">
                </div>
                <div class="form-group">
                    <label for="formControlRange"><b>Fin Decoration</b><span class="badge badge-dark ml-2" id="finDecorationName"></span></label>
                    <input type="range" min="1" max="4" class="form-control-range" id="finDecoration">
                </div>
                <div class="form-group">
                    <label for="formControlRange"><b>Side Fin Shade Colors</b><span class="badge badge-dark ml-2" id="sideShadeCode"></span></label>
                    <input type="range" min="10" max="98" class="form-control-range" id="sideShadeColor">
                </div>
                <div class="form-group">
                    <label for="formControlRange"><b>Tail Fin Shade Colors</b><span class="badge badge-dark ml-2" id="tailShadeCode"></span></label>
                    <input type="range" min="10" max="98" class="form-control-range" id="tailShadeColor">
                </div>
                <div class="form-group">
                    <label for="formControlRange"><b>Animation</b><span class="badge badge-dark ml-2" id="animationCode"></span></label>
                    <input type="range" min="1" max="4" class="form-control-range" id="animations">
                </div>
            </div>

            </div>

        </div>
        <br>

    </div>



    </div>
    <footer align="left">
        <p>Ivan on Tech Academy Bootcamp July 2020</p>
    </footer>

  </body>
  <script src="assets/js/colors.js"></script>
  <script src="assets/js/catSettings.js"></script>
  <script src="assets/js/catFactory.js"></script>

</html>

catFactory.js

//Random color
function getColor() {
    var randomColor = Math.floor(Math.random() * 16777215).toString(16);
    return randomColor
}

function genColors(){
    var colors = []
    for(var i = 10; i < 99; i ++){
      var color = getColor()
      colors[i] = color
    }
    return colors
}

//This function code needs to modified so that it works with Your cat/fish code.
function headColor(color,code) {
    $('.fish__body').css('background', '#' + color)  //This changes the color of the fish head/body
    $('#headcode').html('code: '+code) //This updates text of the badge next to the slider
    $('#dnabody').html(code) //This updates the body color part of the DNA that is displayed below the fish
}

//Side Fin color function
function sideFinColor(color,code) {
    $('.fish__fin--left, .fish__fin--right').css('background', '#' + color)
    $('#sideFinCode').html('code: '+code)
    $('#dnaside').html(code)
}

//Tail Fin color function
function tailFinColor(color,code) {
    $('.fish__tailFin--top, .fish__tailFin--bottom').css('background', '#' + color)
    $('#tailcode').html('code: '+code)
    $('#dnatail').html(code)
}

//Stabilizer Fin color function
function stableFinColor(color,code) {
    $('.fish__stableFin--dorsal, .fish__stableFin--left, .fish__stableFin--right').css('background', '#' + color)  
    $('#stablizercode').html('code: '+code)
    $('#dnastablizer').html(code)
}

//Eye color function
function eyeColor(color,code) {
    $('.fish__eye--left, .fish__eye--right').css('background', '#' + color) 
    $('#eyecode').html('code: '+code)
    $('#dnaeye').html(code)
}

//Side Shade Fin color function
function sideShadeColor(color,code) {
    $('.fish__fin-leftShade, .fish__fin-rightShade').css('background', '#' + color)
    $('#sideShadeCode').html('code: '+code)
    $('#dnadecorationSides').html(code)
}

//Tail Shade Fin color function
function tailShadeColor(color,code) {
    $('.fish__tailFin-topShade, .fish__tailFin-bottomShade').css('background', '#' + color)  //This changes the color of the tailfin
    $('#tailShadeCode').html('code: '+code) //This updates text of the badge next to the slider
    $('#dnadecorationMid').html(code) //This updates the tail fin color part of the DNA that is displayed below the fish
}


//###################################################
//Functions below will be used later on in the project
//###################################################
function eyeVariation(num) {
    $('#dnashape').html(num)
    switch (num) {
        case 1:
            normalEyes()
            $('#eyeName').html('Basic') //Set the badge to "Basic"
            break
        case 2:
            normalEyes() //reset
            $('#eyeName').html('Chill') //Set the badge to "Chill"
            eyesType1() //Set border to change the shape of the eyes
            break
        case 3:
            normalEyes() //reset
            $('#eyeName').html('Excited') //Set the badge to "Excite"
            eyesType2() //Set border to change the shape of the eyes
            break
        case 4:
            normalEyes() //reset
            $('#eyeName').html('Shark!!!') //Set the badge to "Shark!!!"
            eyesType3() //Set border to change the shape of the eyes
            break
        default:
            console.log("Not 1 - 4")
            break
    }
}


function decorationVariation(num) {
    $('#dnadecoration').html(num)
    switch (num) {
        case 1:
            $('#finDecorationName').html('Standard')
            normaldecoration()
            break
        case 2:
            normaldecoration() //reset
            $('#finDecorationName').html('Floating')
            decorationType1()
            break
        case 3:
            normaldecoration() //reset
            $('#finDecorationName').html('Half Cut')
            decorationType2()
            break
        case 4:
            normaldecoration() //reset
            $('#finDecorationName').html('No Decoration')
            decorationType3()
            break
        default:
            console.log("Not 1 - 4")
            break
    }
}


function animationVariation(num) {
    $('#dnaanimation').html(num)
    switch (num) {
        case 1:
            $('#animationCode').html('No Animation')
            noAnimation()
            break
        case 2:
            noAnimation() //reset
            $('#animationCode').html('Curious')
            animationType1()
            break
        case 3:
            noAnimation() //reset
            $('#animationCode').html('Swimming')
            animationType2()
            break
        case 4:
            noAnimation() //reset
            $('#animationCode').html('Mouthy')
            animationType3()
            break
        default:
            console.log("Not 1 - 4")
            break
    }
}


function noAnimation() {
    $("#body").removeClass("movingBody");
    $("#fins").removeClass("movingFins");
    $("#rightFin").removeClass("movingFinRight");
    $("#leftFin").removeClass("movingFinLeft");
    $("#topFin").removeClass("movingFinTail");
    $("#bottomFin").removeClass("movingFinTail");
    $("#topTailShade").removeClass("movingFinShadowTail");
    $("#bottomTailShade").removeClass("movingFinShadowTail");
    $("#mouth").removeClass("movingMouth");

}

function animationType1() {//Curious
    $("#body").addClass("movingBody");
}

function animationType2() {//Swimming
    $("#rightFin").addClass("movingFinRight");
    $("#leftFin").addClass("movingFinLeft");
    $("#topFin").addClass("movingFinTail");
    $("#bottomFin").addClass("movingFinTail");
    $("#topTailShade").addClass("movingFinShadowTail");
    $("#bottomTailShade").addClass("movingFinShadowTail");
}

function animationType3() {//Mouthy
    $("#mouth").addClass("movingMouth");
}

async function normalEyes() {
    await $('.fish__eye').find('span').css('border', 'none')
}

async function eyesType1() {//Chill
    await $('.fish__eye').find('span').css('border-top', '15px solid')
}

async function eyesType2() {//Excited
    await $('.fish__eye').find('span').css('border-bottom', '15px solid')
}

async function eyesType3() {//Shark!!!
    await $('.fish__eye').find('span').css('border-left', '15px solid')
}

async function normaldecoration() { //STANDARD
    //Remove all style from other decorations
    //In this way we can also use normalDecoration() to reset the decoration style
    $('.fish__fin-leftShade').css({ "border-radius": "50px 10px 50px 10px", "height": "55px", "width": "50px", "border": "2px solid",
                                    "transform": "scale(1,-1) rotate(60deg)", "left": "30px", "top": "-3px" })
    $('.fish__fin-rightShade').css({ "border-radius": "50px 10px 50px 10px", "height": "55px", "width": "50px", "border": "2px solid",
                                      "transform": "rotate(25deg)", "left": "15px", "top": "0.5px" })
    $('.fish__tailFin-topShade').css({ "border-radius": "75px 150px 35px 90px", "height": "105px", "width": "30px", "border": "2px solid",
                                       "left": "40px", "top": "25px", "transform": "rotate(-25deg)" })
    $('.fish__tailFin-bottomShade').css({ "border-radius": "75px 150px 35px 90px", "height": "105px", "width": "30px", "border": "2px solid",
                                      "left": "40px", "top": "25px", "transform": "rotate(-30deg)" })
}

function decorationType1() { //FLOATING
    $('.fish__fin-leftShade').css({ "border-radius": "50px 10px 50px 10px", "height": "55px", "width": "30px", "border": "2px solid",
                                    "transform": "scale(1,-1) rotate(90deg)", "left": "30px" })
    $('.fish__fin-rightShade').css({ "border-radius": "50px 10px 50px 10px", "height": "55px", "width": "30px", "border": "2px solid",
                                      "transform": "rotate(270deg) scale(-1,1)", "left": "35px", "top": "0.5px" })
    $('.fish__tailFin-topShade').css({ "border-radius": "75px 150px 95px 90px", "height": "55px", "width": "30px", "border": "2px solid",
                                       "left": "25px", "top": "25px", "transform": "rotate(-25deg)" })
    $('.fish__tailFin-bottomShade').css({ "border-radius": "75px 150px 95px 90px", "height": "55px", "width": "30px", "border": "2px solid",
                                      "left": "25px", "top": "25px", "transform": "rotate(-35deg)" })
}

async function decorationType2() { //HALF-CUT
    $('.fish__fin-leftShade').css({ "border-radius": "50px 10px 50px 10px", "height": "55px", "width": "30px", "border": "2px solid",
                                    "transform": "scale(1,-1) rotate(90deg)", "left": "70px", "top": "-10px" })
    $('.fish__fin-rightShade').css({ "border-radius": "50px 10px 50px 10px", "height": "55px", "width": "30px", "border": "2px solid",
                                      "transform": "rotate(55deg)", "left": "-5px", "top": "12px" })
    $('.fish__tailFin-topShade').css({ "border-radius": "75px 150px 35px 90px", "height": "105px", "width": "30px", "border": "2px solid",
                                       "left": "50px", "top": "55px", "transform": "rotate(-25deg)" })
    $('.fish__tailFin-bottomShade').css({ "border-radius": "75px 150px 35px 90px", "height": "105px", "width": "30px", "border": "2px solid",
                                      "left": "50px", "top": "55px", "transform": "rotate(-30deg)" })
}


async function decorationType3() { //NO DECORATION
    $('.fish__fin-leftShade').css({ "border-radius": "50px 10px 50px 10px", "height": "5px", "width": "5px", "border": "2px solid",
                                    "transform": "scale(1,-1) rotate(60deg)", "left": "180px", "top": "-3px" })

    $('.fish__fin-rightShade').css({ "border-radius": "50px 10px 50px 10px", "height": "5px", "width": "5px", "border": "2px solid",
                                      "transform": "rotate(5deg)", "left": "-45px", "top": "0.5px" })
                                    //
    $('.fish__tailFin-topShade').css({ "border-radius": "75px 150px 35px 90px", "height": "5px", "width": "5px", "border": "2px solid",
                                       "left": "60px", "top": "180px", "transform": "rotate(-25deg)" })
                                    //
    $('.fish__tailFin-bottomShade').css({ "border-radius": "75px 150px 35px 90px", "height": "5px", "width": "5px", "border": "2px solid",
                                      "left": "52px", "top": "180px", "transform": "rotate(-30deg)" })
}

catSettings.js

var colors = Object.values(allColors())

var defaultDNA = {
    "headcolor" : 45,
    "sideColor" : 73,
    "tailColor" : 96,
    "stablizerColor" : 17,
    "eyeColor" : 32,
    //Cattributes
    "eyesShape" : 1,
    "decorationPattern" : 1,
    "decorationMidcolor" : 13,
    "decorationSidescolor" : 52,
    "animation" :  1,
    "lastNum" :  1
    }

// when page load
$( document ).ready(function() {
  $('#dnabody').html(defaultDNA.headColor);
  $('#dnaside').html(defaultDNA.sideColor);
  $('#dnatail').html(defaultDNA.tailColor);
  $('#dnastablizer').html(defaultDNA.stablizerColor);
  $('#dnaeye').html(defaultDNA.eyeColor);
    
  $('#dnashape').html(defaultDNA.eyesShape);
  $('#dnadecoration').html(defaultDNA.decorationPattern);
  $('#dnadecorationMid').html(defaultDNA.decorationMidcolor);
  $('#dnadecorationSides').html(defaultDNA.decorationSidescolor);
  $('#dnaanimation').html(defaultDNA.animation);
  $('#dnaspecial').html(defaultDNA.lastNum);

  renderFish(defaultDNA);
});

function getDna(){
    var dna = ''
    dna += $('#dnabody').html()
    dna += $('#dnaside').html()
    dna += $('#dnatail').html()
    dna += $('#dnastablizer').html()
    dna += $('#dnaeye').html()

    dna += $('#dnashape').html()
    dna += $('#dnadecoration').html()
    dna += $('#dnadecorationMid').html()
    dna += $('#dnadecorationSides').html()
    dna += $('#dnaanimation').html()
    dna += $('#dnaspecial').html()

    return parseInt(dna)
}

function renderFish(dna){
  //catFactory.js_function (colors[dna.defaultDNA_value],dna.defaultDNA_value)
  //$('#index.html_input_id').val(dna.defaultDNA_value)
    headColor(colors[dna.headcolor],dna.headcolor)
    $('#bodycolor').val(dna.headcolor)
    sideFinColor(colors[dna.sideColor],dna.sideColor)
    $('#sideFinColor').val(dna.sideColor)
    tailFinColor(colors[dna.tailColor],dna.tailColor)
    $('#tailFinColor').val(dna.tailColor)
    stableFinColor(colors[dna.stablizerColor],dna.stablizerColor)
    $('#stableFinColor').val(dna.stablizerColor)
    eyeColor(colors[dna.eyeColor],dna.eyeColor)
    $('#eyeColor').val(dna.eyeColor)

    eyeVariation(dna.eyesShape)
    $('#eyesShape').val(dna.eyesShape)
    decorationVariation(dna.decorationPattern)
    $('#finDecoration').val(dna.decorationPattern)
    sideShadeColor(colors[dna.decorationSidescolor],dna.decorationSidescolor)
    $('#sideShadeColor').val(dna.decorationSidescolor)
    tailShadeColor(colors[dna.decorationMidcolor],dna.decorationMidcolor)
    $('#tailShadeColor').val(dna.decorationMidcolor)
    animationVariation(dna.animation)
    $('#animations').val(dna.animation)
}

// Changing fish colors
$('#bodycolor').change(()=>{
    var colorVal = $('#bodycolor').val()
    headColor(colors[colorVal],colorVal)
})

// Changing fish colors, side fins
$('#sideFinColor').change(()=>{
  var colorVal = $('#sideFinColor').val()
  sideFinColor(colors[colorVal],colorVal)
})

// Changing fish colors, tail fins
$('#tailFinColor').change(()=>{
  var colorVal = $('#tailFinColor').val()
  tailFinColor(colors[colorVal],colorVal)
})

// Changing fish colors, stabilizer fins
$('#stableFinColor').change(()=>{
  var colorVal = $('#stableFinColor').val()
  stableFinColor(colors[colorVal],colorVal)
})

// Changing fish colors, eyes
$('#eyeColor').change(()=>{
  var colorVal = $('#eyeColor').val()
  eyeColor(colors[colorVal],colorVal)
})

// Changing fish shape, eyes
$('#eyesShape').change(()=>{
  var shape = parseInt($('#eyesShape').val())
  eyeVariation(shape)
})

// Changing fish decoration, tail + fins
$('#finDecoration').change(()=>{
  var style = parseInt($('#finDecoration').val())
  decorationVariation(style)
})

// Changing fish colors, side shade fins
$('#sideShadeColor').change(()=>{
  var colorVal = $('#sideShadeColor').val()
  sideShadeColor(colors[colorVal],colorVal)
})

// Changing fish colors, tail shade fins
$('#tailShadeColor').change(()=>{
  var colorVal = $('#tailShadeColor').val()
  tailShadeColor(colors[colorVal],colorVal)
})

// Changing fish animation
$('#animations').change(()=>{
  var animate = parseInt($('#animations').val())
  animationVariation(animate)
})

animations.css

.movingBody{
    animation: moveBody 5s infinite;
}

@keyframes moveBody {
    0% {
        transform: rotate(0deg);
    }
    30% {
        transform: rotate(15deg);
    }
    60% {
        transform: rotate(-15deg);
    }
    100% {
        transform: rotate(0deg);
    }
}


.movingMouth{
    animation: moveMouth 5s infinite;
}

@keyframes moveMouth {
    0% {
        transform: rotate(0deg);
        width: 40px;
        height: 55px;
        left: 70px;
        top: 120px;
    }
    25% {
        transform: rotate(5deg);
        width: 25px;
        height: 40px;
        left: 75px;
        top: 125px;
    }
    50% {
        transform: rotate(0deg);
        width: 40px;
        height: 55px;
        left: 70px;
        top: 120px;
    }
    75% {
        transform: rotate(-5deg);
        width: 25px;
        height: 40px;
        left: 75px;
        top: 125px;
    }
    100% {
        transform: rotate(0deg);
        width: 40px;
        height: 55px;
        left: 70px;
        top: 120px;
    }
}


.movingFinRight{
    animation: moveFinRight 2s infinite;
}

@keyframes moveFinRight {
    0% {
        transform: rotate(25deg);
        top: 130px;
    }
    25% {
        transform: rotate(12deg);
        top: 125px;
    }
    50% {
        transform: rotate(25deg);
        top: 130px;
    }
    75% {
        transform: rotate(38deg);
        top: 135px;
    }
    100% {
        transform: rotate(25deg);
        top: 130px;
    }
}


.movingFinLeft{
    animation: moveFinLeft 2s infinite;
}

@keyframes moveFinLeft {
    0% {
        transform: scale(1,-1) rotate(25deg);
        top: 130px;
    }
    25% {
        transform: scale(1,-1) rotate(15deg);
        top: 125px;
    }
    50% {
        transform: scale(1,-1) rotate(25deg);
        top: 130px;
    }
    75% {
        transform: scale(1,-1) rotate(35deg);
        top: 135px;
    }
    100% {
        transform: scale(1,-1) rotate(25deg);
        top: 130px;
    }
}

.movingFinTail{
    animation: moveFinTail 5s infinite;
}

@keyframes moveFinTail {
    0% {
        left: -10px;
        width: 100px;
        border-radius: 5px 150px 5px 90px;
    }
    5% {
        left: -10px;
        width: 100px;
        border-radius: 5px 150px 5px 90px;
    }
    15% {
        left: 25px;
        width: 75px;
        border-radius: 5px 150px 5px 90px;
    }
    30% {
        left: 115px;
        width: 75px;
        border-radius: 150px 5px 90px 5px;
    }
    45% {
        left: 150px;
        width: 100px;
        border-radius: 150px 5px 90px 5px;
    }
    60% {
        left: 115px;
        width: 75px;
        border-radius: 150px 5px 90px 5px;
    }
    80% {
        left: 25px;
        width: 75px;
        border-radius: 5px 150px 5px 90px;
    }
    90% {
        left: -10px;
        width: 100px;
        border-radius: 5px 150px 5px 90px;
    }
    100% {
        left: -10px;
        width: 100px;
        border-radius: 5px 150px 5px 90px;
    }
}


.movingFinShadowTail{
    animation: moveFinShadowTail 5s infinite; 
}
@keyframes moveFinShadowTail {
    0% {
        left: 40px;
        width: 30px;
    }
    5% {
        left: 40px;
        width: 30px;
    }
    15% {
        left: 35px;
        width: 25px;
        transform:  rotate(-20deg);
    }
    30% {
        left: 25px;
        width: 25px;
        transform:  rotate(20deg);
    }
    45% {
        left: 25px;
        width: 30px;
        transform:  rotate(45deg);
    }
    60% {
        left: 25px;
        width: 25px;
        transform:  rotate(20deg);
    }
    80% {
        left: 35px;
        width: 25px;
        transform:  rotate(-20deg);
    }
    90% {
        left: 40px;
        width: 30px;
    }
    100% {
        left: 40px;
        width: 30px;
    }
}

[GahuckImGoofy]

index.html:

<div class="form-group">
                    <label for="formControlRange"><b>Animation</b><span class="badge badge-dark ml-2" id="animationName"></span></label>
                    <input type="range" min="1" max="6" class="form-control-range" id="animation">
                </div>

catSettings.js:

animationVariation(dna.animation)
    $('#animation').val(dna.animation)

$('#animation').change(()=>{
  var animationVal = parseInt($('#animation').val()) //changes animationVal to 2 instead of "2"
  animationVariation(animationVal)
})

catFactory.js:

function animationVariation(num) {
    $('#dnaanimation').html(num)
    switch(num) {
        case 1:
            $('#animationName').html('Moving Head')
            animationType1()
            break
        case 2:
            $('#animationName').html('Blinking Eyes')
            animationType2()
            break
        case 3:
            $('#animationName').html('Wagging Tail')
            animationType3()
            break
        case 4:
            $('#animationName').html('Wiggle Ears')
            animationType4()
            break
        case 5:
            $('#animationName').html('Move Whiskers')
            animationType5()
            break
        case 6:
            $('#animationName').html('Move Mouth')
            animationType6()
            break
    }
}
function animationType1() { //first animation
    resetAnimation()
    $("#head").addClass("movingHead");
}
function animationType2() { //second animation
    resetAnimation()
    $('.pupil-right').addClass("blinkingEyes")
    $('.pupil-left').addClass("blinkingEyes")
}
function animationType3() {
    resetAnimation()
    $("#tail").addClass("waggingTail")
}
function animationType4() {
    resetAnimation()
    $(".cat__ear").addClass("wiggleEars")
}
function animationType5() {
    resetAnimation()
    $(".cat__whiskers-left").addClass("moveWhiskers")
    $(".cat__whiskers-right").addClass("moveWhiskers")
}
function animationType6() {
    resetAnimation()
    $(".cat__whiskers-left").addClass("moveMouth")
    $(".cat__whiskers-right").addClass("moveMouth")
    $(".cat__mouth-contour").addClass("moveMouth")
    $(".cat__nose").addClass("moveMouth")
}
function resetAnimation(){
    $("#head").removeClass("movingHead"); //define the reset
    $('.pupil-right').removeClass("blinkingEyes")
    $('.pupil-left').removeClass("blinkingEyes")
    $('#tail').removeClass("waggingTail")
    $(".cat__ear").removeClass("wiggleEars")
    $(".cat__whiskers-left").removeClass("moveWhiskers")
    $(".cat__whiskers-right").removeClass("moveWhiskers")
    $(".cat__whiskers-left").removeClass("moveMouth")
    $(".cat__whiskers-right").removeClass("moveMouth")
    $(".cat__mouth-contour").removeClass("moveMouth")
    $(".cat__nose").removeClass("moveMouth")
    //continue to remove any animation added
}

animations.css:

.movingHead{
    animation: moveHead 3s 5;
}

@keyframes moveHead {
    0%, 100% {transform: rotate(0deg);}
    30% {transform: rotate(5deg);}
    60% {transform: rotate(-5deg);}
}
/*animationType2*/
.blinkingEyes{
    animation: blinkingEyes 3s 4;
    display: inline-block;
}

@keyframes blinkingEyes {
    0%, 100% {border-top: 0px;}
    15%, 75% {border-top: 15px solid;} 
    30%, 60% {border-top: 30px solid;}
    45% {border-top: 42px solid;}
}
/*animationType3*/
.waggingTail{
    animation: waggingTail 8s 2;
}
@keyframes waggingTail {
    0%, 100% {transform: rotate(-45deg);}
    30%, 90% {transform: rotate(-35deg);}
    60% {transform: rotate(-55deg);}
}
/*animationType4*/
.wiggleEars {
    animation: wiggleEars 5s 3;
}
@keyframes wiggleEars {
    0%, 100% {
        transform: rotate(0deg);
    }
    30%, 90% {
        transform: rotate(8deg);
    }
    60% {
        transform: rotate(-8deg);
    }
}
.moveWhiskers {
    animation: moveWhiskers 8s 5;
}
@keyframes moveWhiskers {
    0%, 100% {
        transform: translate(0px, 0px);
    }
    25%, 75% {
        transform: translate(15px, 0px);
    }
    50% {
        transform: translate(-15px, 0px);
    }
}
.moveMouth {
    animation: moveMouth 5s 3;
}
@keyframes moveMouth {
    0%, 100% {
        transform: translate(0px, 0px);
    }
    25%, 75% {
        transform: translate(15px, 0px);
    }
    50% {
        transform: translate(-15px, 0px);
    }
}

[angnimasherpa]

index.html

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

<script type="text/javascript" src="assets/js/jquery-3.4.1.js"></script>

<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">

<script src="assets/bootstrap/js/popper.js"></script>

<script src="assets/bootstrap/js/bootstrap.min.js"></script>

<link rel="stylesheet" href="assets/css/mystyle.css">

<link rel="stylesheet" href="assets/css/cats.css">

<link rel="stylesheet" href="assets/css/colors.css">

<link rel="stylesheet" href="assets/css/factory.css">

<link rel="stylesheet" href="assets/css/frontend.css">

<link rel="stylesheet" href="assets/css/animations.css">

<div class="container p-5" style="margin-top: 12vh;margin-bottom: 10vh;">

    <div align="center">

        <h1 class="c-black">Kitties-Factory</h1>

        <p class="c-black">Create your custom Kitty</p>

    </div>

    <div class="row">

        <div class="col-lg-4 catBox m-2 light-b-shadow">

            <div id="cs-container">

                <div id="tail"></div>

                <div id="tail-mask"></div>

                <div id="tail-end"></div>

               

                <div id="body">

                    <div class="ear" id="ear-left">

                        <div class="ear-inner" id="ear-inner-left"></div>

                    </div>

                    <div class="ear" id="ear-right">

                        <div class="ear-inner" id="ear-inner-right"></div>

                    </div>

                   

                    <div id="mask"></div>

                   

                    <div id="patch">

                        <div class="fur"></div>

                        <div class="fur"></div>

                        <div class="fur"></div>

                    </div>

                   

                    <div id="eyes">

                        <div class="eye" id="eye-left">

                            <div class="tears"></div>

                            <div class="tears"></div>

                            <div class="shine" id="shine-left"></div>

                        </div>

                        <div class="eye" id="eye-right">

                            <div class="tears"></div>

                            <div class="tears"></div>

                            <div class="shine" id="shine-right"></div>

                        </div>

                    </div>

                   

                    <div id="whisk-left">

                        <div class="whisker" id="whisk-one"></div>

                        <div class="whisker"></div>

                        <div class="whisker" id="whisk-three"></div>

                    </div>

                   

                    <div id="nose"></div>

                   

                    <div id="whisk-right">

                        <div class="whisker" id="whisk-four"></div>

                        <div class="whisker"></div>

                        <div class="whisker" id="whisk-six"></div>

                    </div>

                   

                    <div id="smile">

                        <div id="smile-left-align">

                            <div id="smile-left"></div>

                            <div id="mask-left"></div>

                        </div>

                       

                        <div id="smile-right-align">

                            <div id="smile-right"></div>

                            <div id="mask-right"></div>

                        </div>

                    </div>

                   

                    <div id="tongue" class="tongueAnimation"></div>

                    <div id="tummy"></div>

                </div>

            </div>

            <br>

            <div class="dnaDiv" id="catDNA">

                <b>

                    DNA:

                    <!-- Colors -->

                    <span id="dnabody"></span>

                    <span id="dnaeyes"></span>

                    <span id="dnaears"></span>

                    <span id="dnabelly"></span>

                    <span id="dnastripes"></span>

                   

                    <!-- Cattributes -->

                    <span id="dnashape"></span>

                    <span id="dnadecoration"></span>

                    <span id="dnadecorationMid"></span>

                    <span id="dnadecorationSides"></span>

                    <span id="dnaanimation"></span>

                    <span id="dnaspecial"></span>

                </b>

            </div>

        </div>

        <div class="col-lg-7 cattributes m-2 light-b-shadow">

            <!-- Cat colors -->

            <div id="catColors">

                <div class="form-group">

                    <label for="formControlRange"><b>Body</b><span class="badge badge-dark ml-2" id="headcode"></span></label>

                    <input type="range" min="10" max="98" class="form-control-range" id="bodycolor">

                </div>

            </div>

           

            <!-- Eyes colors -->

            <div id="catColors">

                <div class="form-group">

                    <label for="formControlRange"><b>Eyes color</b><span class="badge badge-dark ml-2" id="eyecode"></span></label>

                    <input type="range" min="10" max="98" class="form-control-range" id="eyecolor">

                </div>

            </div>

            <!-- Ear & Tail colors -->

            <div id="catColors">

                <div class="form-group">

                    <label for="formControlRange"><b>Ear | Tail</b><span class="badge badge-dark ml-2" id="ETcode"></span></label>

                    <input type="range" min="10" max="98" class="form-control-range" id="ETcolor">

                </div>

            </div>

            <!-- Inner Ear & Belly colors -->

            <div id="catColors">

                <div class="form-group">

                    <label for="formControlRange"><b>Inner Ear | Belly</b><span class="badge badge-dark ml-2" id="IEBcode"></span></label>

                    <input type="range" min="10" max="98" class="form-control-range" id="IEBcolor">

                </div>

            </div>

            <!-- Eye Shape -->

            <div id="catColors">

                <div class="form-group">

                    <label for="formControlRange"><b>Eye Shape</b><span class="badge badge-dark ml-2" id="eyesShapecode"></span></label>

                    <input type="range" min="1" max="3" class="form-control-range" id="eyesShape">

                </div>

            </div>

            <!-- Decoration Style -->

            <div id="catColors">

                <div class="form-group">

                    <label for="formControlRange"><b>Decoration Style</b><span class="badge badge-dark ml-2" id="DStylecode"></span></label>

                    <input type="range" min="1" max="6" class="form-control-range" id="DStyle">

                </div>

            </div>

            <div class="row">

                <div class="col-lg-12">

                    <div class="form-group">

                        <label for=""><u>Decoration Colors:</u> </label>

                    </div>

                </div>

                <div class="col-lg-6 col-md-6 col-sm-12">

                    <!-- Decoration Center Color -->

                    <div id="catColors">

                        <div class="form-group">

                            <label for="formControlRange"><b>Mid Color</b><span class="badge badge-dark ml-2" id="DMcode"></span></label>

                            <input type="range" min="10" max="98" class="form-control-range" id="DMcolor">

                        </div>

                    </div>

                </div>

                <div class="col-lg-6 col-md-6 col-sm-12">

                    <!-- Decoration Side Color -->

                    <div id="catColors">

                        <div class="form-group">

                            <label for="formControlRange"><b>Side Color</b><span class="badge badge-dark ml-2" id="DSidecode"></span></label>

                            <input type="range" min="10" max="98" class="form-control-range" id="DSidecolor">

                        </div>

                    </div>

                </div>

                <div class="col-lg-12">

                    <!-- Cat Animations -->

                    <div id="catColors">

                        <div class="form-group">

                            <label for="formControlRange"><b>Animation: </b><span class="badge badge-dark ml-2" id="animationCode"></span></label>

                            <input type="range" min="1" max="5" class="form-control-range" id="animateCat">

                        </div>

                    </div>

                </div>

            </div>

        </div>

    </div>

    <br/>

   

</div>

<footer align="left">

    <p>Angnima Sherpa - 2022</p>

</footer>

animations.css

.eyesMovement {

animation: ltr_eyes 2s ease-in-out infinite;

}

@keyframes ltr_eyes {

0% {

    margin-left: 2px;

}

30% {

    margin-left: 8px;

}

50% {

    margin-left: 1px;

}

80% {

    margin-left: 4px;

}

100% {

    margin-left: 2px;

}

}

.earsMovement:nth-child(even) {

animation: ltr_ears 2s ease-in-out infinite;

}

.earsMovement:nth-child(odd) {

animation: rtl_ears 2s ease-in-out infinite;

}

@keyframes ltr_ears {

0% {

    transform: rotate(0deg);

}

30% {

    transform: rotate(8deg);

}

50% {

    transform: rotate(2deg);

}

80% {

    transform: rotate(-3deg);

}

100% {

    transform: rotate(0deg);

}

}

@keyframes rtl_ears {

0% {

    transform: rotate(0deg);

}

30% {

    transform: rotate(-8deg);

}

50% {

    transform: rotate(-2deg);

}

80% {

    transform: rotate(3deg);

}

100% {

    transform: rotate(0deg);

}

}

.tears {

position:absolute;

width:5px;

height:5px;

opacity: 0;

background-color: #f5f3f3;

margin-top: 17px;

margin-left: 12px;

border-radius: 50%;

}

.tears:nth-child(even) {

margin-top: 25px;

}

.eye:nth-child(even) .tears {

margin-left: 0px;

}

.flip-item {

transform:rotate(180deg);

margin-top: 5px;

}

.margin-15pc {

margin-top: -10% !important;

}

.hide {

opacity: 0;

}

.tearsMovement:nth-child(odd) {

animation:f_tears 2s ease-in-out infinite;

}

.tearsMovement:nth-child(even) {

animation:s_tears 2s ease-in-out infinite;

}

@keyframes f_tears {

0% {

    margin-top: 17px;

    opacity: 1;

}

30% {

    margin-top: 22px;

    opacity: 0.7;

}

50% {

    margin-top: 25px;

    opacity: 0.4;

}

80% {

    margin-top: 28px;

    opacity: 0.1;

}

100% {

    margin-top: 17px;

    opacity: 0;

}

}

@keyframes s_tears {

0% {

    margin-top: 25px;

    opacity: 1;

}

20% {

    margin-top: 28px;

    opacity: 0.7;

}

40% {

    margin-top: 32px;

    opacity: 0.4;

}

60% {

    margin-top: 35px;

    opacity: 0.1;

}

100% {

    margin-top: 25px;

    opacity: 0;

}

}

.tongueAnimation {

animation: animate_tongue 2s ease-in-out infinite;

}

@keyframes animate_tongue {

0% {

    transform: rotateX(0deg);

}

30% {

    transform: rotateX(40deg);

}

60% {

    transform: rotateX(0deg);

}

80% {

    transform: rotateX(40deg);

}

100% {

    transform: rotateX(20deg);

}

}

catSettings.js

var colors = Object.values(allColors())

var defaultDNA = {

"headcolor" : 10,

"tummyColor" : 55,

"eyesColor" : 89,

"earsColor" : 10,

"stripesColor" : 90,

//Cattributes

"eyesShape" : 1,

"decorationPattern" : 1,

"decorationMidcolor" : 90,

"decorationSidescolor" : 14,

"animation" :  1,

"lastNum" :  1

}

// when page load

$( document ).ready(function() {

$(’#dnabody’).html(defaultDNA.headColor);

$(’#dnamouth’).html(defaultDNA.mouthColor);

$(’#dnaeyes’).html(defaultDNA.eyesColor);

$(’#dnaears’).html(defaultDNA.earsColor);

$(’#dnashape’).html(defaultDNA.eyesShape)

$(’#dnadecoration’).html(defaultDNA.decorationPattern)

$(’#dnadecorationMid’).html(defaultDNA.decorationMidcolor)

$(’#dnadecorationSides’).html(defaultDNA.decorationSidescolor)

$(’#dnaanimation’).html(defaultDNA.animation)

// $(’#dnaspecial’).html(defaultDNA.lastNum)

renderCat(defaultDNA)

});

function getDna(){

var dna = ''

dna += $('#dnabody').html()

dna += $('#dnamouth').html()

dna += $('#dnaeyes').html()

dna += $('#dnaears').html()

dna += $('#dnashape').html()

dna += $('#dnadecoration').html()

dna += $('#dnadecorationMid').html()

dna += $('#dnadecorationSides').html()

dna += $('#dnaanimation').html()

dna += $('#dnaspecial').html()

return parseInt(dna)

}

function renderCat(dna){

$('#bodycolor').val(dna.headcolor)

headColor(colors[dna.headcolor],dna.headcolor)

$('#eyecolor').val(dna.eyesColor)

eyeColor(colors[dna.eyesColor],dna.eyesColor)

$('#ETcolor').val(dna.earsColor)

ETColor(colors[dna.earsColor],dna.earsColor)

$('#IEBcolor').val(dna.tummyColor)

IEBColor(colors[dna.tummyColor],dna.tummyColor)

$('#eyesShape').val(dna.eyesShape)

EyeShape(dna.eyesShape)

$('#SWcolor').val(dna.stripesColor)

SWColor(colors[dna.stripesColor],dna.stripesColor)

$('#DStyle').val(dna.decorationPattern)

changeDStyle(dna.decorationPattern)

$('#DMcolor').val(dna.decorationMidcolor)

DMColor(colors[dna.decorationMidcolor], dna.decorationMidcolor);

$("#DSidecolor").val(dna.decorationSidescolor);

DSideColor(colors[dna.decorationSidescolor], dna.decorationSidescolor);

$("#animateCat").val(dna.animation);

changeAnimation(dna.animation);

}

// Changing cat colors

$(’#bodycolor’).change(()=>{

var colorVal = $('#bodycolor').val()

headColor(colors[colorVal],colorVal)

})

$(’#eyecolor’).change(()=>{

var colorVal = $(’#eyecolor’).val()

eyeColor(colors[colorVal],colorVal)

})

$(’#ETcolor’).change(()=>{

var colorVal = $(’#ETcolor’).val()

ETColor(colors[colorVal], colorVal)

})

$(’#IEBcolor’).change(()=>{

var colorVal = $(’#IEBcolor’).val()

IEBColor(colors[colorVal], colorVal)

})

$(’#eyesShape’).change(()=>{

var shapeVal = $(’#eyesShape’).val()

EyeShape(shapeVal)

})

$(’#DStyle’).change(()=>{

var StyleVal = $(’#DStyle’).val()

changeDStyle(StyleVal)

})

$(’#SWcolor’).change(()=>{

var colorVal = $(’#SWcolor’).val()

SWColor(colors[colorVal], colorVal)

})

$(’#DMcolor’).change(()=>{

var colorVal = $(’#DMcolor’).val()

DMColor(colors[colorVal], colorVal)

})

$(’#DSidecolor’).change(()=>{

var colorVal = $(’#DSidecolor’).val()

DSideColor(colors[colorVal], colorVal)

})

$("#animateCat").change(() => {

var animateVal = $("#animateCat").val()

changeAnimation(animateVal);

})

catFactory.js

//Random color

function getColor() {

var randomColor = Math.floor(Math.random() * 16777215).toString(16);

return randomColor

}

function genColors(){

var colors = []

for(var i = 10; i < 99; i ++){

  var color = getColor()

  colors[i] = color

}

return colors

}

//This function code needs to modified so that it works with Your cat code.

function headColor(color,code) {

$('#body, #mask, #mask-right, #smile-right, #mask-left, #smile-left').css('background-color', '#' + color)  //This changes the color of the cat

// $("#tail").css("border", "15px solid #" + color);

// $("#tail-end").css("background-color", "#" + color);

$('#headcode').html('code: '+code) //This updates text of the badge next to the slider

$('#dnabody').html(code) //This updates the body color part of the DNA that is displayed below the cat

}

function eyeColor(color,code) {

$('.eye').css('background-color', '#' + color)  //This changes the color of the cat

$('#eyecode').html('code: '+code) //This updates text of the badge next to the slider

$('#dnaeyes').html(code) //This updates the body color part of the DNA that is displayed below the cat

}

function ETColor(color,code) {

$("#tail").css("border", "15px solid #" + color);

$("#tail-end").css("background-color", "#" + color);

$(".ear").css("background-color", "#" + color);



$('#ETcode').html('code: '+code) //This updates text of the badge next to the slider

$('#dnaears').html(code) //This updates the body color part of the DNA that is displayed below the cat

}

function IEBColor(color,code) {

$(".ear-inner").css("background-color", "#" + color);

$("#tummy").css("background-color", "#" + color);



$('#IEBcode').html('code: '+code) //This updates text of the badge next to the slider

$('#dnabelly').html(code) //This updates the body color part of the DNA that is displayed below the cat

}

function SWColor(color,code) {

$(".fur").css("background-color", "#" + color);



$('#SWcode').html('code: ' + code); //This updates text of the badge next to the slider

$('#dnastripes').html(code) //This updates the body color part of the DNA that is displayed below the cat

}

function DMColor(color, code) {

$(".fur:odd").css("background-color", "#" + color);

$('#DMcode').html('code: ' + code);

$('#dnadecorationMid').html(code);

}

function DSideColor(color, code) {

$(".fur:even").css("background-color", "#" + color);

$('#DSidecode').html('code: ' + code);

$('#dnadecorationSides').html(code);

}

function changeAnimation(code) {

code = parseInt(code);

$("#animationCode").html("code: " + code);

$("#dnaanimation").html(code);



removeAllAnimations()

switch (code) {

    case 1:

        break;

    case 2:

        animationType2();

        break;

    case 3:

        animationType3();

        break;

    case 4:

        animationType4();

        break;

    case 5:

        animationType5();

        break;

    default:

        break;

}

}

function animationType2() {

$(".shine").addClass("eyesMovement");

}

function animationType3() {

$(".ear").addClass("earsMovement");

}

function animationType4() {

$(".tears").addClass("tearsMovement");

$("#smile-left, #mask-left, #smile-right, #mask-right").addClass("flip-item");

$("#mask-left, #mask-right").addClass("margin-15pc");

$("#tongue").addClass("hide");

}

function animationType5() {

$("#tongue").addClass("tongueAnimation");

}

function removeAllAnimations() {

$(".shine").removeClass("eyesMovement");

$(".ear").removeClass("earsMovement");

$(".tears").removeClass("tearsMovement");

$("#smile-left, #mask-left, #smile-right, #mask-right").removeClass("flip-item");

$("#mask-left, #mask-right").removeClass("margin-15pc");

$("#tongue").removeClass("hide");

$("#tongue").removeClass("tongueAnimation");

}

function EyeShape(code) {

normalEyes()

$("#dnashape").html(code)

if(code == 3) {

    $(".eye").css("border-top", "6px solid");

    $("#eyesShapecode").html("Sleepy");

}else if(code == 2) {

    $(".eye").css("border-bottom", "6px solid");

    $("#eyesShapecode").html("Sus");

}else {

    $(".eye").css("border-top", "none");

    $("#eyesShapecode").html("Basic");

}

}

function changeDStyle(style) {

$("#dnadecoration").html(style)

switch (style) {

    case "1":

        normalDStyle()

        $('#DStylecode').html('Basic');

        break;

    case "2":

        normalDStyle()

        $(".fur:first").css("transform", "translate(10px, 10px)")

        $('#DStylecode').html('Ping');

        break;

    case "3":

        normalDStyle()

        $(".fur:first").css("transform", "translate(10px, 10px)")

        $(".fur:last").css("transform", "rotate(90deg) translate(3px, 9px)");

        $('#DStylecode').html('Cross');

        break;

    case "4":

        normalDStyle()

        $(".fur:first").css("transform", "rotate(90deg) translate(6px, -9px)");

        $(".fur:last").css("transform", "rotate(90deg) translate(3px, 9px)");

        $('#DStylecode').html('Pyramid');

        break;

    case "5":

        normalDStyle()

        $(".fur:first").css("transform", "translate(10px, 20px)");

        $(".fur:last").css("transform", "rotate(90deg) translate(3px, 9px)");

        $('#DStylecode').html('Guru');

        break;

    case "6":

        normalDStyle()

        $(".fur:first").css("transform", "translate(10px, 10px) rotate(90deg)");

        $(".fur:last").css("transform", "translate(-9px, 6px)");

        $('#DStylecode').html('Gunner');

        break;

    default:

        normalDStyle()

        $('#DStylecode').html('Basic');

        break;

}

}

//###################################################

//Functions below will be used later on in the project

//###################################################

function eyeVariation(num) {

$('#dnashape').html(num)

switch (num) {

    case 1:

        normalEyes()

        $('#eyeName').html('Basic')

        break

}

}

function decorationVariation(num) {

$('#dnadecoration').html(num)

switch (num) {

    case 1:

        $('#decorationName').html('Basic')

        normaldecoration()

        break

}

}

async function normalEyes() {

await $('.eye').css('border', 'none')

}

async function normalDStyle() {

await $(".fur").css("transform", "none");

}

async function normaldecoration() {

//Remove all style from other decorations

//In this way we can also use normalDecoration() to reset the decoration style

$('.cat__head-dots').css({ "transform": "rotate(0deg)", "height": "48px", "width": "14px", "top": "1px", "border-radius": "0 0 50% 50%" })

$('.cat__head-dots_first').css({ "transform": "rotate(0deg)", "height": "35px", "width": "14px", "top": "1px", "border-radius": "50% 0 50% 50%" })

$('.cat__head-dots_second').css({ "transform": "rotate(0deg)", "height": "35px", "width": "14px", "top": "1px", "border-radius": "0 50% 50% 50%" })

}

[MichaelW]

index.html:

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Academy Penguin </title>
  <script type="text/javascript" src="/Penguin NFT Marketplace/js/jquery-3.4.1.js"></script>
  <link rel="stylesheet" href="/Penguin NFT Marketplace/bootstrap/css/bootstrap.min.css">
  <script src="/Penguin NFT Marketplace/bootstrap/js/popper.js"></script>
  <script src="/Penguin NFT Marketplace/bootstrap/js/bootstrap.min.js"></script>

  <link rel="stylesheet" href="/Penguin NFT Marketplace/css/mystyle.css">
  <link rel="stylesheet" href="/Penguin NFT Marketplace/css/penguin.css">
  <link rel="stylesheet" href="/Penguin NFT Marketplace/css/colors.css">
  <link rel="stylesheet" href="/Penguin NFT Marketplace/css/factory.css">
  <link rel="stylesheet" href="/Penguin NFT Marketplace/css/frontend.css">
  <link rel="stylesheet" href="/Penguin NFT Marketplace/css/animations.css">

</head>
  <body>
    <div class="container p-5" style="margin-top: 12vh;margin-bottom: 10vh;">
        <div align="center">
        <h1 class="c-white">Penguin-Factory</h1>
        <p class="c-white">Create your custom Penguin</p>
    </div>
        <div class="row">
            <div class="col-lg-4 penguinBox m-2 light-b-shadow">
                <div class="penguin ">
                    <div class="penguin-bottom">
                    <div class="right-hand"></div> 
                    <div class="left-hand"></div>
                    <div class="right-feet"></div>
                    <div class="left-feet"></div>
                    </div>

                    <div id="head" class="penguin-top">
                      <div class="belly"></div>
                        
                        <div class="pattern"></div>
                        <div class="pattern-left"></div>
                        <div class="pattern-right"></div>
                        <div class="left-cheek"></div>
                        <div class="right-cheek"></div>
                        <div class="beak-bottom"></div>
                        <div class="beak-top"></div>
                        <div class="blush-left"></div>
                        <div class="blush-right"></div>
                        <div class="left-eye">
                          <div class="sparkle"></div>
                        </div>
                        <div class="right-eye">
                          <div class="sparkle"></div>
                        </div>
                        

                    </div>



                    
                </div>
                <br>
                <div class="dnaDiv" id="penguinDNA">
                    <b>
                        DNA:
                        <!-- Colors -->
                         <span id="dnabody"></span>
                         <span id="dnabelly"></span>
                         <span id="dnaface"></span>
                         <span id="dnahand"></span>
                        
                         <!-- attributes -->
                         <span id="dnashape"></span>
                         <span id="dnadecoration"></span>
                         <span id="dnadecorationMid"></span>
                         <span id="dnadecorationSides"></span>
                         <span id="dnadanimation"></span>
                         <span id="dnaspecial"></span>
                    </b>
                </div>
            </div>
            <div class="col-lg-7 attributes m-2 light-b-shadow">

<!-- Penguin colors -->
<div id="penguinColors">
                <div class="form-group">
                    <label for="formControlRange"><b>Head and body</b><span class="badge badge-dark ml-2" id="headcode"></span></label>
                    <input type="range" min="10" max="98" class="form-control-range" id="bodycolor">
                </div>
                <div class="form-group">
                    <label for="formControlRange"><b>Belly</b><span class="badge badge-dark ml-2" id="bellycode"></span></label>
                    <input type="range" min="10" max="98" class="form-control-range" id="bellycolor">
                </div>  
                <div class="form-group">
                  <label for="formControlRange"><b>Face</b><span class="badge badge-dark ml-2" id="facecode"></span></label>
                  <input type="range" min="10" max="98" class="form-control-range" id="facecolor">
                </div>
                <div class="form-group">
                  <label for="formControlRange"><b>Hands</b><span class="badge badge-dark ml-2" id="handcode"></span></label>
                  <input type="range" min="10" max="98" class="form-control-range" id="handcolor">
                </div>
                <div class="form-group">
                  <label for="formControlRange"><b>Eye shape</b><span class="badge badge-dark ml-2" id="eyeName"></span></label>
                  <input type="range" min="1" max="7" class="form-control-range" id="eyeshape">
                </div>
                <div class="form-group">
                  <label for="formControlRange"><b>Pattern</b><span class="badge badge-dark ml-2" id="decorationPattern"></span></label>
                  <input type="range" min="1" max="7" class="form-control-range" id="patternshape">
                </div>
                <div class="form-group">
                  <label for="formControlRange"><b>Pattern Color Mid</b><span class="badge badge-dark ml-2" id="decorationMidcolor"></span></label>
                  <input type="range" min="10" max="98" class="form-control-range" id="patterncolormid">
                </div>
                <div class="form-group">
                  <label for="formControlRange"><b>Pattern Color Sides</b><span class="badge badge-dark ml-2" id="decorationSidescolor"></span></label>
                  <input type="range" min="10" max="98" class="form-control-range" id="patterncolorsides">
                </div>
                <div class="form-group">
                  <label for="formControlRange"><b>Animation</b><span class="badge badge-dark ml-2" id="animationName"></span></label>
                  <input type="range" min="1" max="6" class="form-control-range" id="animation">
                </div>
              </div>

            </div>

            </div>
            <br>

        </div>



    </div>
    <footer align="left">
        <p>Ivan on Tech Academy Bootcamp July 2020</p>
    </footer>

  </body>
  <script src="/Penguin NFT Marketplace/js/colors.js"></script>
  <script src="/Penguin NFT Marketplace/js/penguinFactory.js"></script>
  <script src="/Penguin NFT Marketplace/js/penguinSettings.js"></script>

</html>

animation.css:

.wave {
    animation: wave 0.45s infinite;
}

@keyframes wave {
    0% {
        transform: rotate(114deg);
    }

    50% {
        transform: rotate(100deg);
    }

    
    100% {
        transform: rotate(114deg);
    }
}

.jump {
    top: 201;
    left: 0;
    animation: jump 2s infinite;
}

@keyframes jump {
    0% { 
        top: 201;
        left: 0;
        transform: translate(0%, 10%) scale(1.25, 0.75);
     }
    50% { 
        top: 201;
        left: 0;
        transform: translate(0%, -30%) scale(1, 1); }
    55% { 
        top: 201;
        left: 0;
        transform: translate(0%, -30%) /*rotate(15deg)*/; }
    60% {
        top: 201;
        left: 0; 
        transform: translate(0%, -30%) /*rotate(-15deg)*/; }
    65% {
        top: 201;
        left: 0; 
        transform: translate(0%, -30%) /*rotate(15deg)*/; }
    70% {
        top: 201;
        left: 0; 
        transform: translate(0%, -30%) /*rotate(-15deg)*/; }
    100% {
        top: 201;
        left: 0; 
        transform: translate(0%, 10%) scale(1.25, 0.75); }
}


.shake {
    animation: shake 2s infinite;
}

@keyframes shake {
    0% {
        transform: rotate(15deg);
    }

    25% {
        transform: rotate(-15deg);
    }

    50% {
        transform: rotate(15deg);
    }

    75% {
        transform: rotate(-15deg);
    }

    100% {
        transform: rotate(15deg);
    }
}

.danceBody {
    animation: danceBody 2s infinite;
}

.danceHandR {
    animation: danceHandR 2s infinite;
}

@keyframes danceHandR {
    0% {
        transform: rotate(150deg);
    }

    50% {
        transform: rotate(100deg);
    }

    
    100% {
        transform: rotate(150deg);
    }
}

.danceHandL {
    animation: danceHandL 2s infinite;
}

@keyframes danceHandL {
    0% {
        transform: rotate(-150deg);
    }

    50% {
        transform: rotate(-100deg);
    }

    
    100% {
        transform: rotate(-150deg);
    }
}

@keyframes danceBody {
    0% {
        transform: rotate(10deg);
    }

    25% {
        transform: rotate(-10deg);
    }

    50% {
        transform: rotate(10deg);
    }

    75% {
        transform: rotate(-10deg);
    }

    100% {
        transform: rotate(10deg);
    }
}

.happyFeetL {
    animation: happyFeetL 0.6s infinite;
}
@keyframes happyFeetL {
    0% {
        transform: rotate(80deg);
    }
    25% {
        transform: rotate(50deg);
    }
    50% {
        transform: rotate(30deg);
    }
    75% {
        transform: rotate(50deg);
    }
    100% {
        transform: rotate(80deg);
    }
}

.happyFeetR {
    animation: happyFeetR 0.6s infinite;
}

@keyframes happyFeetR {
    0% {
        transform: rotate(-80deg);
    }
    25% {
        transform: rotate(-50deg);
    }
    50% {
        transform: rotate(-30deg);
    }
    75% {
        transform: rotate(-50deg);
    }
    100% {
        transform: rotate(-80deg);
    }
}

penguinSettings.js:

var colors = Object.values(allColors())

var defaultDNA = {
    "headColor" : 10,
    "bellyColor" : 13,
    "faceColor" : 13,
    "handColor" : 10,
    
    //attributes
    "eyesShape" : 1,
    "decorationPattern" : 1,
    "decorationMidcolor" : 13,
    "decorationSidescolor" : 13,
    "animation" :  1,
    "lastNum" :  1
    }

// when page load
$( document ).ready(function() {
  $('#dnabody').html(defaultDNA.headColor);
  $('#dnabelly').html(defaultDNA.bellyColor);
  $('#dnaface').html(defaultDNA.faceColor);
  $('#dnahand').html(defaultDNA.handColor);
  $('#dnashape').html(defaultDNA.eyesShape)
  $('#dnadecoration').html(defaultDNA.decorationPattern)
  $('#dnadecorationMid').html(defaultDNA.decorationMidcolor)
  $('#dnadecorationSides').html(defaultDNA.decorationSidescolor)
  $('#dnaanimation').html(defaultDNA.animation)
  $('#dnaspecial').html(defaultDNA.lastNum)

  renderPenguin(defaultDNA)
});

function getDna(){
    var dna = ''
    dna += $('#dnabody').html()
    dna += $('#dnabelly').html()
    dna += $('#dnaface').html()
    dna += $('#dnahand').html()
    dna += $('#dnashape').html()
    dna += $('#dnadecoration').html()
    dna += $('#dnadecorationMid').html()
    dna += $('#dnadecorationSides').html()
    dna += $('#dnaanimation').html()
    dna += $('#dnaspecial').html()

    
    return parseInt(dna)
}

function renderPenguin(dna){
    headColor(colors[dna.headColor],dna.headColor)
    $('#bodycolor').val(dna.headColor)

    bellyColor(colors[dna.bellyColor],dna.bellyColor)
    $('#bellycolor').val(dna.bellyColor)

    faceColor(colors[dna.faceColor],dna.faceColor)
    $('#facecolor').val(dna.faceColor)

    handColor(colors[dna.handColor],dna.handColor)
    $('#handcolor').val(dna.handColor)

    eyeVariation(dna.eyesShape)
    $('#eyeshape').val(dna.eyesShape)

    decorationVariation(dna.decorationPattern)
    $('#patternshape').val(dna.decorationPattern)
    
    patternColorMid(colors[dna.decorationMidcolor],dna.decorationMidcolor)
    $('#patterncolormid').val(dna.decorationMidcolor)

    patternColorSides(colors[dna.decorationSidescolor],dna.decorationSidescolor)
    $('#patterncolorsides').val(dna.decorationSidescolor)

    animationVariation(dna.animation)
    $('#animation').val(dna.animation)


// Changing penguin colors
$('#bodycolor').change(()=>{
    var colorVal = $('#bodycolor').val()
    headColor(colors[colorVal],colorVal)
})

$('#bellycolor').change(()=>{
    var colorVal = $('#bellycolor').val()
    bellyColor(colors[colorVal],colorVal)
})

$('#facecolor').change(()=>{
    var colorVal = $('#facecolor').val()
    faceColor(colors[colorVal],colorVal)
})

$('#handcolor').change(()=>{
    var colorVal = $('#handcolor').val()
    handColor(colors[colorVal],colorVal)
})

$('#patterncolormid').change(()=>{
    var colorVal = $('#patterncolormid').val()
    patternColorMid(colors[colorVal],colorVal)
})

$('#patterncolorsides').change(()=>{
    var colorVal = $('#patterncolorsides').val()
    patternColorSides(colors[colorVal],colorVal)
    console.log("1")
})

//Eye Shape

$('#eyeshape').change(()=>{
    var shape = parseInt($('#eyeshape').val())
    eyeVariation(shape)
})

$('#patternshape').change(()=>{
    var pattern = parseInt($('#patternshape').val())
    decorationVariation(pattern)
})

$('#animation').change(()=>{
    var animationVal = parseInt( $('#animation').val() )
    animationVariation(animationVal)
})

}

penguinFactory,js:

//Random color
function getColor() {
    var randomColor = Math.floor(Math.random() * 16777215).toString(16);
    return randomColor
}

function genColors(){
    var colors = []
    for(var i = 10; i < 99; i ++){
      var color = getColor()
      colors[i] = color
    }
    return colors
}

//This function code needs to modified so that it works with Your cat code.
function headColor(color, code) {
    $('.penguin-bottom, .penguin-top').css('background', '#' + color)  //This changes the color of the cat
    $('#headcode').html('code: '+code) //This updates text of the badge next to the slider
    $('#dnabody').html(code) //This updates the body color part of the DNA that is displayed below the cat
}
function bellyColor(color, code) {
    $('.belly').css('background', '#' + color)
    $('#bellycode').html('code: '+code)
    $('#dnabelly').html(code)
}
function faceColor(color, code) {
    $('.left-cheek, .right-cheek').css('background', '#' + color)
    $('#facecode').html('code: '+code)
    $('#dnaface').html(code)
}
function handColor(color, code) {
    $('.left-hand, .right-hand').css('background', '#' + color)
    $('#handcode').html('code: '+code)
    $('#dnahand').html(code)
    console.log(color)
    console.log(code)
}

function patternColorMid(color, code) {
    $('.pattern').css('background', '#' + color)
    $('#decorationMidcolor').html('code: '+code)
    $('#dnadecorationMid').html(code)
    
}

function patternColorSides(color, code) {
    $('.pattern-right, .pattern-left').css('background', '#' + color)
    $('#decorationSidescolor').html('code: '+code)
    $('#dnadecorationSides').html(code)
    
}

//###################################################
//Functions below will be used later on in the project
//###################################################
function eyeVariation(num) {

    $('#dnashape').html(num)
    switch (num) {
        case 1:
            normalEyes()
            $('#eyeName').html('Basic')
            console.log("Basic")
            break
        case 2:
            normalEyes()
            $('#eyeName').html('Down')
            eyesType1()
            console.log("Down")
            break
        case 3:
            normalEyes()
            $('#eyeName').html('Up')
            eyesType2()
            break
        case 4:
            normalEyes()
            $('#eyeName').html('Tired')
            eyesType3()
            break
        case 5:
            normalEyes()
            $('#eyeName').html('Up-Down')
            eyesType4()
            break
        case 6:
            normalEyes()
            $('#eyeName').html('Cross-Eyed')
            eyesType5()
            break
        case 7:
            normalEyes()
            $('#eyeName').html('Far-eyes')
            eyesType6()
            break
    }
}



function normalEyes() {
    $('.left-eye, .right-eye').find('div').css('top', '25%').css('left', '15%').css('width', '35%').css('height', '35%')
    
}   

function eyesType1() {
    $('.left-eye, .right-eye').find('div').css('top', '50%',).css('left', '30%')
    console.log("eyesType1")
}

function eyesType2() {
    $('.left-eye, .right-eye').find('div').css('top', '10%').css('left', '30%')
}

function eyesType3() {
    $('.left-eye, .right-eye').find('div').css('width', '69%').css('height', '24%')
}

function eyesType4() {
    $('.left-eye').find('div').css('top', '10%').css('left', '30%')
    $('.right-eye').find('div').css('top', '50%').css('left', '30%')
}

function eyesType5() {
    $('.right-eye').find('div').css('top', '25%').css('left', '-8%')
    $('.left-eye').find('div').css('top', '25%').css('left', '74%')
}

function eyesType6() {
    $('.right-eye').find('div').css('top', '25%').css('left', '74%')
    $('.left-eye').find('div').css('top', '25%').css('left', '-8%')
}

function decorationVariation(num) {
    $('#dnadecoration').html(num)
    switch (num) {
        case 1:
            $('#decorationPattern').html('Clear')
            normalDecoration()
            break
        case 2:
            normalDecoration()
            $('#decorationPattern').html('Three-line')
            pattern1()
            break
        case 3:
            normalDecoration()
            $('#decorationPattern').html('One-line')
            pattern2()
            break
        case 4:
            normalDecoration()
            $('#decorationPattern').html('Two-line')
            pattern3()
            break
        case 5:
            normalDecoration()
            $('#decorationPattern').html('T')
            pattern4()
            break
        case 6:
            normalDecoration()
            $('#decorationPattern').html('Cross')
            pattern5()
            break
        case 7:
            normalDecoration()
            $('#decorationPattern').html('X')
            pattern6()
            break

    }
}

function animationVariation(num) {
    $('#dnaanimation').html(num);
    switch (num) {
        case 1:
            resetAnimation()
            $('#animationName').html('None')
            
            break
        case 2:
            resetAnimation()
            $('#animationName').html('Waving')
            animationType1()
            break
        case 3:
            resetAnimation()
            $('#animationName').html('Jumping')
            animationType2()
            break
        case 4:
            resetAnimation()
            $('#animationName').html('Shaking')
            animationType3()
            break
        case 5:
            resetAnimation()
            $('#animationName').html('Dancing')
            animationType4()
        case 6:
            resetAnimation()
            $('#animationName').html('Happy Feet')
            animationType5()
    }
}



function animationType1() {
    resetAnimation()
    $('.right-hand').addClass('wave');
}

function animationType2() {
    $('.penguin').addClass('jump')    
}

function animationType3() {
    $('.penguin').addClass('shake')
}

function animationType4() {
    $('.penguin').addClass('danceBody')
    $('.right-hand').addClass('danceHandR')
    $('.left-hand').addClass('danceHandL')
}

function animationType5() {
    $('.right-feet').addClass('happyFeetR')
    $('.left-feet').addClass('happyFeetL')
}

function resetAnimation() {
    $('.right-hand').removeClass('wave');
    $('.penguin').removeClass('jump')
    $('.penguin').removeClass('shake')
    $('.penguin').removeClass('danceBody')
    $('.right-hand').removeClass('danceHandR')
    $('.left-hand').removeClass('danceHandL')
    $('.right-feet').removeClass('happyFeetR')
    $('.left-feet').removeClass('happyFeetL')
}



function normalDecoration() {
    //Remove all style from other decorations
    //In this way we can also use normalDecoration() to reset the decoration style
    $('.pattern, .pattern-left, .pattern-right').css('visibility', 'hidden').css('height', '50px').css('width', '16px').css('top', '116px')
    $('.pattern').css('left', '67px')
    $('.pattern-left').css('left', '40px')
    $('.pattern-right').css('left', '95px')
    $('.pattern, .pattern-right').css('transform', 'rotate(0deg)')
    //console.log("Clear")
}

function pattern1() {
    $('.pattern, .pattern-left, .pattern-right').css('visibility', 'visible')
    $('.pattern, .pattern-left, .pattern-right').css('background', 'red') 
    //console.log("Basic")
}

function pattern2 () {
    $('.pattern').css('visibility', 'visible')
    console.log("One-line")
}

function pattern3 () {
    $('.pattern').css('visibility', 'visible').css('left', '50px')
    $('.pattern-right').css('visibility', 'visible').css('left', '85px')
}

function pattern4() {
    $('.pattern').css('visibility', 'visible').css('left', '67px')
    $('.pattern-right').css('visibility', 'visible').css('height', '16px').css('width', '50px').css('left', '51px')
}

function pattern5() {
    $('.pattern').css('visibility', 'visible').css('left', '67px')
    $('.pattern-right').css('visibility', 'visible').css('height', '16px').css('width', '50px').css('left', '51px').css('top', '127px')
}

function pattern6() {
    $('.pattern').css('visibility', 'visible').css('left', '67px')
    $('.pattern-right').css('visibility', 'visible').css('height', '16px').css('width', '50px').css('left', '51px').css('top', '133px')
    $('.pattern, .pattern-right').css('transform', 'rotate(45deg)')
}

p

[theaussie86]

That was fun.

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Academy kitties </title>
  <script type="text/javascript" src="assets/js/jquery-3.4.1.js"></script>
  <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
  <script src="assets/bootstrap/js/popper.js"></script>
  <script src="assets/bootstrap/js/bootstrap.min.js"></script>

  <link rel="stylesheet" href="assets/css/animations.css">
  <link rel="stylesheet" href="assets/css/mystyle.css">
  <link rel="stylesheet" href="assets/css/bears.css">
  <link rel="stylesheet" href="assets/css/colors.css">
  <link rel="stylesheet" href="assets/css/factory.css">
  <link rel="stylesheet" href="assets/css/frontend.css">
</head>
  <body>
    <div class="container p-5" style="margin-top: 12vh;margin-bottom: 10vh;">
        <div align="center">
        <h1 class="c-white">Bears-Factory</h1>
        <p class="c-white">Create your custom Bear</p>
    </div>
        <div class="row">
            <div class="col-lg-4 bearBox m-2 light-b-shadow">
            <div class="bear">
                <div class="head">
                    <div class="ears">
                        <div class="left ear">
                            <div class="inner-ear inner-ear-left"></div>
                        </div>
                        <div class="right ear">
                            <div class="inner-ear inner-ear-right"></div>
                        </div>
                    </div>
                    <div class="eyes">
                        <div class="eye">
                            <div class="pupils left-pupil">
                                <div class="inner"></div>
                            </div>
                        </div>
                        <div class="eye">
                            <div class="pupils right-pupil">
                                <div class="inner right"></div>
                            </div>
                        </div>
                    </div>
                    <div class="snout">
                        <div class="nose"></div>
                        <div class="mouth mouth-left"></div>
                        <div class="mouth mouth-right"></div>
                    </div>
                </div>
        </div>
                <br>
                <div class="dnaDiv" id="catDNA">
                    <b>
                        DNA:
                        <!-- Colors -->
                         <span id="dnafur"></span>
                         <span id="dnamouth"></span>
                         <span id="dnaeyes"></span>
                         <span id="dnaears"></span>
                        
                         <!-- Cattributes -->
                         <span id="dnashape"></span>
                         <span id="dnanosecolor"></span>
                         <span id="dnanosewidth"></span>
                         <span id="dnanoseheight"></span>
                         <span id="dnaanimation"></span>
                         <span id="dnaspecial"></span>
                    </b>
                </div>
            </div>
            <div class="col-lg-7 bear-attributes m-2 light-b-shadow">

            <!-- Bears colors -->
            <div id="bearColors">
                <div class="form-group">
                    <label for="formControlRange"><b>Fur</b><span class="badge badge-dark ml-2" id="furcode"></span></label>
                    <input type="range" min="10" max="99" class="form-control-range" id="furcolor">
                </div>
                <div class="form-group">
                    <label for="formControlRange"><b>Mouth</b><span class="badge badge-dark ml-2" id="mouthcode"></span></label>
                    <input type="range" min="00" max="99" class="form-control-range" id="mouthcolor">
                </div>
                <div class="form-group">
                    <label for="formControlRange"><b>Eyes</b><span class="badge badge-dark ml-2" id="eyescode"></span></label>
                    <input type="range" min="00" max="99" class="form-control-range" id="eyescolor">
                </div>
                <div class="form-group">
                    <label for="formControlRange"><b>Ears</b><span class="badge badge-dark ml-2" id="earscode"></span></label>
                    <input type="range" min="00" max="99" class="form-control-range" id="earscolor">
                </div>
                <div class="form-group">
                    <label for="formControlRange"><b>Eyes Shape</b><span class="badge badge-dark ml-2" id="eyeName"></span></label>
                    <input type="range" min="1" max="5" class="form-control-range" id="shapeCode">
                </div>
                <div class="form-group">
                    <label for="formControlRange"><b>Nose Color</b><span class="badge badge-dark ml-2" id="noseCode"></span></label>
                    <input type="range" min="0" max="99" class="form-control-range" id="nosecolor">
                </div>
                <div class="form-group">
                    <label for="formControlRange"><b>Nose Width</b><span class="badge badge-dark ml-2" id="noseWidth"></span></label>
                    <input type="range" min="0" max="99" class="form-control-range" id="nosewidth">
                </div>
                <div class="form-group">
                    <label for="formControlRange"><b>Nose Height</b><span class="badge badge-dark ml-2" id="noseHeight"></span></label>
                    <input type="range" min="0" max="9" class="form-control-range" id="noseheight">
                </div>
                <div class="form-group">
                    <label for="formControlRange"><b>Animation</b><span class="badge badge-dark ml-2" id="animationName"></span></label>
                    <input type="range" min="1" max="8" class="form-control-range" id="animation">
                </div>
            </div>

            </div>

            </div>
            <br>

        </div>



    </div>
    <footer align="left">
        <p>Christoph Weissteiner NFT Marketplace March 2022</p>
    </footer>

  </body>
  <script src="assets/js/colors.js"></script>
  <script src="assets/js/bearSettings.js"></script>
  <script src="assets/js/bearFactory.js"></script>

</html>

.tilt-right{
    animation: tiltRight 3s infinite;
}
.tilt-left{
    animation: tiltLeft 3s infinite;
}
.egypt{
    animation: egypt 3s infinite;
}
.shrug-no{
    animation: shrugNo 3s infinite;
}
.nod-yes{
    animation: nodYes 3s infinite;
}
.pulse{
    animation: pulse 3s infinite;
}
.wiggle-nose{
    animation: wiggleNose .3s infinite;
}

@keyframes tiltRight{
    0%{
        transform: rotate(0deg);
    }
    50%{
        transform: rotate(5deg);
    }
    100%{
        transform: rotate(0deg);
    }
}

@keyframes tiltLeft{
    0%{
        transform: rotate(0deg);
    }
    50%{
        transform: rotate(-5deg);
    }
    100%{
        transform: rotate(0deg);
    }
}

@keyframes egypt{
    0%{
        transform: translateX(0);
    }
    25%{
        transform: translateX(10px);
    }
    50%{
        transform: translateX(0);
    }
    75%{
        transform: translateX(-10px);
    }
    100%{
        transform: translateX(0);
    }
}

@keyframes shrugNo{
    0%{
        transform: rotateY(0deg);
    }
    25%{
        transform: rotateY(30deg);
    }
    50%{
        transform: rotateY(0deg);
    }
    75%{
        transform: rotateY(-30deg);
    }
    100%{
        transform: rotateY(0deg);
    }
}

@keyframes nodYes{
    0%{
        transform: rotateX(0deg);
    }
    25%{
        transform: rotateX(30deg);
    }
    50%{
        transform: rotateX(0deg);
    }
    75%{
        transform: rotateX(-30deg);
    }
    100%{
        transform: rotateX(0deg);
    }
}

@keyframes pulse{
    0%{
        transform: scale(1);
    }
    50%{
        transform: scale(1.1);
    }
    100%{
        transform: scale(1);
    }
}

@keyframes wiggleNose{
    0%{
        transform: translateX(0);
    }
    25%{
        transform: translateX(2px);
    }
    50%{
        transform: translateX(0);
    }
    75%{
        transform: translateX(-2px);
    }
    100%{
        transform: translateX(0);
    }
}

//Random color
function getColor() {
    var randomColor = Math.floor(Math.random() * 16777215).toString(16);
    return randomColor
}

function genColors() {
    var colors = []
    for (var i = 10; i < 99; i++) {
        var color = getColor()
        colors[i] = color
    }
    return colors
}

function getFactorSize(num) {
    var base = 32
    var factor = 0.5 * (num / 100)
    return Math.round(base + (base * factor))
}

//This function code needs to modified so that it works with Your cat code.
function furColor(color, code) {
    $('.head, .ear').css('background-color', '#' + color)  //This changes the color of the cat
    $('#furcode').html('code: ' + code) //This updates text of the badge next to the slider
    $('#dnafur').html(code) //This updates the body color part of the DNA that is displayed below the cat
}

function mouthColor(color, code) {
    $('.snout').css('background-color', '#' + color)  //This changes the color of the cat
    $('#mouthcode').html('code: ' + code) //This updates text of the badge next to the slider
    $('#dnamouth').html(code) //This updates the body color part of the DNA that is displayed below the cat
}

function eyesColor(color, code) {
    $('.pupils').css('background-color', '#' + color)  //This changes the color of the cat
    $('#eyescode').html('code: ' + code) //This updates text of the badge next to the slider
    $('#dnaeyes').html(code) //This updates the body color part of the DNA that is displayed below the cat
}

function earsColor(color, code) {
    $('.inner-ear').css('background-color', '#' + color)  //This changes the color of the cat
    $('#earscode').html('code: ' + code) //This updates text of the badge next to the slider
    $('#dnaears').html(code) //This updates the body color part of the DNA that is displayed below the cat
}

function noseColor(color, code) {
    $('.nose').css('background-color', '#' + color)  //This changes the color of the cat
    $('#noseCode').html('code: ' + code) //This updates text of the badge next to the slider
    $('#dnanosecolor').html(code) //This updates the body color part of the DNA that is displayed below the cat
}
function noseWidth(num) {
    $('.nose').css('width', getFactorSize(num) + 'px')  //This changes the color of the cat
    $('#noseWidth').html('factor: ' + num) //This updates text of the badge next to the slider
    $('#dnanosewidth').html(num) //This updates the body color part of the DNA that is displayed below the cat
}
function noseHeight(num) {
    $('.nose').css('height', getFactorSize(num) + 'px')  //This changes the color of the cat
    $('#noseHeight').html('factor: ' + num) //This updates text of the badge next to the slider
    $('#dnanoseheight').html(num) //This updates the body color part of the DNA that is displayed below the cat
}



//###################################################
//Functions below will be used later on in the project
//###################################################
function eyeVariation(num) {
    $('#dnashape').html(num)
    switch (num) {
        case 1:
            normalEyes()
            $('#eyeName').html('Basic')
            break
        case 2:
            normalEyes()
            $('#eyeName').html('Chilled')
            chilledEyes()
            break
        case 3:
            normalEyes()
            $('#eyeName').html('Tired')
            tiredEyes()
            break
        case 4:
            normalEyes()
            $('#eyeName').html('Sleepy')
            sleepyEyes()
            break
        case 5:
            normalEyes()
            $('#eyeName').html('Stunned')
            stunnedEyes()
            break
    }
}

async function normalEyes() {
    console.log('normalEyes')
    await $('.pupils').css('border', 'none')
}
async function chilledEyes() {
    await $('.pupils').css('border-top', '10px solid')
}
async function tiredEyes() {
    await $('.pupils').css('border-bottom', '6px solid')
}
async function sleepyEyes() {
    await $('.pupils').css('border-bottom', '6px solid').css('border-top', '10px solid')
}
async function stunnedEyes() {
    await $('.pupils').css('width', '42px')
}

function animate(num) {
    $('#dnaanimation').html(num)
    switch (num) {
        case 1:
            resetAnimations()
            $('#animationName').html('not moving')
            break
        case 2:
            resetAnimations()
            $('#animationName').html('tilting right')
            tiltRight()
            break
        case 3:
            resetAnimations()
            $('#animationName').html('tilting left')
            tiltLeft()
            break
        case 4:
            resetAnimations()
            $('#animationName').html('egypt')
            egypt()
            break
        case 5:
            resetAnimations()
            $('#animationName').html('shrug No')
            shrugNo()
            break
        case 6:
            resetAnimations()
            $('#animationName').html('nod Yes')
            nodYes()
            break
        case 7:
            resetAnimations()
            $('#animationName').html('pulsate')
            pulse()
            break
        case 8:
            resetAnimations()
            $('#animationName').html('wiggle nose')
            wiggleNose()
            break
    }
}

function tiltRight() {
    $('.head').addClass('tilt-right')
}

function tiltLeft() {
    $('.head').addClass('tilt-left')
}

function egypt() {
    $('.head').addClass('egypt')
}

function shrugNo() {
    $('.head').addClass('shrug-no')
}

function nodYes() {
    $('.head').addClass('nod-yes')
}

function pulse() {
    $('.head').addClass('pulse')
}

function wiggleNose() {
    $('.nose').addClass('wiggle-nose')
}

function resetAnimations() {
    $('.head').removeClass('tilt-right')
    $('.head').removeClass('tilt-left')
    $('.head').removeClass('egypt')
    $('.head').removeClass('shrug-no')
    $('.head').removeClass('nod-yes')
    $('.head').removeClass('pulse')
    $('.nose').removeClass('wiggle-nose')
}

[CasNWK]

index.html

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Academy kitties </title>
  <script type="text/javascript" src="assets/js/jquery-3.4.1.js"></script>
  <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
  <script src="assets/bootstrap/js/popper.js"></script>
  <script src="assets/bootstrap/js/bootstrap.min.js"></script>
  
  <link rel="stylesheet" href="assets/css/animations.css">
  <link rel="stylesheet" href="assets/css/mystyle.css">
  <link rel="stylesheet" href="assets/css/cats.css">
  <link rel="stylesheet" href="assets/css/colors.css">
  <link rel="stylesheet" href="assets/css/factory.css">
  <link rel="stylesheet" href="assets/css/frontend.css">
</head>

<body>
    <div class="container p-5" style="margin-top: 12vh;margin-bottom: 10vh;">
        <div align="center">
            <h1 class="c-white">Kitties-Factory</h1>
            <p class="c-white">Create your custom Kitty</p>
        </div>
        <div class="row">
            <div class="col-lg-4 catBox m-2 light-b-shadow">
                <div class="cat">
                    <div class="cat__ear">
                        <div id="leftEar" class="cat__ear--left">
                            <div class="cat__ear--left-inside"></div>
                        </div>
                        <div id="rightEar" class="cat__ear--right">
                            <div class="cat__ear--right-inside"></div>
                        </div>
                    </div>

                    <div id="head" class="cat__head">
                        <div id="midDot" class="cat__head-dots">
                            <div id="leftDot" class="cat__head-dots_first"></div>
                            <div id="rightDot" class="cat__head-dots_second"></div>
                        </div>
                        <div class="cat__eye">
                            <div class="cat__eye-patch-left"></div>
                            <div class="cat__eye--left">
                                <span id="eye1" class="pupil-left"></span>
                            </div>
                            <div class="cat__eye-patch-right"></div>
                            <div class="cat__eye--right">
                                <span id="eye2" class="pupil-right"></span>
                            </div>
                        </div>
                        <div class="cat__nose"></div>

                        <div class="cat__mouth-contour"></div>
                        <div class="cat__mouth-left"></div>
                        <div class="cat__mouth-right"></div>

                        <div class="cat__whiskers-left"></div>
                        <div class="cat__whiskers-right"></div>
                    </div>

                    <div class="cat__body">

                        <div class="cat__chest"></div>

                        <div class="cat__chest_inner"></div>


                        <div id="paw1" class="cat__paw-left"></div>
                        <div class="cat__paw-left_inner"></div>


                        <div id="paw2" class="cat__paw-right"></div>
                        <div class="cat__paw-right_inner"></div>

                        <div id="tail" class="cat__tail"></div>
                    </div>
                </div>
                <br>
                <div class="dnaDiv" id="catDNA">
                    <b>
                        DNA:
                        <!-- Colors -->
                         <span id="dnabody"></span>
                         <span id="dnamouth"></span>
                         <span id="dnaeyes"></span>
                         <span id="dnaears"></span>
                        ||
                         <!-- Cattributes -->
                         <span id="dnashape"></span>
                         <span id="dnadecoration"></span>
                         <span id="dnadecorationMid"></span>
                         <span id="dnadecorationSides"></span>
                         <span id="dnaanimation"></span>
                         <span id="dnaspecial"></span>
                    </b>
                </div>
            </div>
            <div class="col-lg-7 cattributes m-2 light-b-shadow">

                <!-- Cat colors -->
                <div id="catColors">
                    <div class="form-group">
                        <label for="formControlRangeBodyColor"><b>Head and body</b><span class="badge badge-dark ml-2" id="headcode"></span></label>
                        <input type="range" min="10" max="98" class="form-control-range" id="bodycolor">
                    </div>

                    <div class="form-group">
                        <label for="formControlRangeMouthColor"><b>Mouth</b><span class="badge badge-dark ml-2" id="mouthcode"></span></label>
                        <input type="range" min="10" max="98" class="form-control-range" id="mouthcolor">
                    </div>

                    <div class="form-group">
                        <label for="formControlRangeEyesColor"><b>Eye</b><span class="badge badge-dark ml-2" id="eyescode"></span></label>
                        <input type="range" min="10" max="98" class="form-control-range" id="eyescolor">
                    </div>

                    <div class="form-group">
                        <label for="formControlRangeEarsColor"><b>Ear</b><span class="badge badge-dark ml-2" id="earscode"></span></label>
                        <input type="range" min="10" max="98" class="form-control-range" id="earscolor">
                    </div>

                    <div class="form-group">
                        <label for="formControlRangeEyeShape"><b>Eyes shape</b><span class="badge badge-dark ml-2" id="eyeName"></span></label>
                        <input type="range" min="1" max="7" class="form-control-range" id="eyeshape">
                    </div>

                    <div class="form-group">
                        <label for="formControlRangeDecorPat"><b>Decorative Patern</b><span class="badge badge-dark ml-2" id="decorationName"></span></label>
                        <input type="range" min="1" max="7" class="form-control-range" id="decorationpattern">
                    </div>
                    <div class="form-group">
                        <label for="formControlRangeDecorMid"><b>Decoration Mid Color</b><span class="badge badge-dark ml-2" id="midcolorcode"></span></label>
                        <input type="range" min="10" max="98" class="form-control-range" id="decorationmid">
                    </div>
                    <div class="form-group">
                        <label for="formControlRangeDecorSides"><b>Decoration Sides Color</b><span class="badge badge-dark ml-2" id="sidecolorcode"></span></label>
                        <input type="range" min="10" max="98" class="form-control-range" id="decorationsides">
                    </div>

                    <div class="form-group">
                        <label for="formControlRangeAnimation"><b>Animation</b><span class="badge badge-dark ml-2" id="animationcode"></span></label>
                        <input type="range" min="1" max="5" class="form-control-range" id="animation">
                    </div>
                </div>

            </div>

        </div>
        <br>

    </div>

    <footer align="left">
        <p>Ivan on Tech Academy Bootcamp July 2020</p>
    </footer>

</body>
<script src="assets/js/colors.js"></script>
<script src="assets/js/catSettings.js"></script>
<script src="assets/js/catFactory.js"></script>

</html>

cats.css

*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: inherit;
}
html {
    box-sizing: border-box;
    overflow-y: scroll;
}
body {
    background: #607d8b;
 
}

.cat__head {
    position: relative;
    width: 230px;
    height: 200px;
    border: 6px solid transparent;
    -webkit-border-radius: 50% 50% 45% 45%;
    border-radius: 50% 50% 45% 45%;
    background: #ffcc80;
    z-index: 20;
}
.cat__head-dots {
    position: absolute;
    left: 101px;
    height: 48px;
    top: 1px;
    width: 14px;
    background: #ffb74d;
    -webkit-border-radius: 0 0 50% 50%;
    border-radius: 0 0 50% 50%;
}

 .cat__head-dots_first {
    position: absolute;
    content: '';
    top: 1px;
    width: 14px;    
    height: 35px;
    background: #ffb74d;
    left: -20px;
    border-radius: 50% 0 50% 50%;
}
.cat__head-dots_second {
    position: absolute;
    content: '';
    top: 1px;
    width: 14px;    
    height: 35px;
    background: #ffb74d;
    left: 20px;
    border-radius: 0 50% 50% 50%;
}

.cat__ear {
    position: relative;
}
.cat__ear--left, .cat__ear--right {
    position: absolute;
    top: -8px;
    width: 150px;
    height: 150px;
    border: 5px solid  transparent;
    border-radius: 90% 0 90% 0;
    background: #ffcc80;
    display: flex;
    justify-content: center;
    align-items: center;
}
.cat__ear--left {
    transform: scale(-1, 1) rotate(170deg);
    left: -14px;
}
.cat__ear--right {
    transform: rotate(170deg);
    left: 94px;
}
.cat__ear--left-inside, .cat__ear--right-inside {
    width: 108px;
    height: 108px;
    border-radius: 90% 0 90% 0;
    background: #e57373;
}

.cat__eye {
    position: relative;
    top: 57px;
    left: 27px;
    display: flex;
}
.cat__eye-patch-left {
    position:absolute;
    width: 60px;
    height: 50px; 
    background: #96000080;
    border-radius: 15% 45% 45% 55%;
    top:3px;
    left:-7;
}
.cat__eye-patch-right {
    position:absolute;
    width: 60px;
    height: 50px;
    background: #96000080;
    border-radius: 15% 45% 45% 55%;
    top:3px;
    left:99px;
    transform: scale(-1, 1) rotate(0deg);
} 
.cat__eye--left {
    border: solid 2px;
    border-color: #141414;
    width: 50px;
    height: 50px;
    background: #960000;
    border-radius: 50%;
    margin: 0px;
    z-index: 100;
}
.cat__eye--right{
    position:relative;
    border: solid 2px;
    border-color: #141414;
    width: 50px;
    height: 50px;
    background: #960000;
    border-radius: 50%;
    margin: 0px;
    left: 54px;
    z-index: 100; 
} 

.cat__eye span {
    position: absolute;
    top: 41px;
    width: 21px; 
    height: 35px;
    background: #1e1e1e;
    border-radius: 50%;
    z-index: 200;
}
.cat__eye span::after {
    content: ''; 
    top: 16px;
    left: 19px;
    position: absolute;
    width: 4px;
    height: 7px;
    border-radius: 50%;
    background: #ede4e4d7;
}
.cat__eye span::before {
    content: '';
    top: 21px;
    left: 16px;
    position: absolute;
    width: 3px;
    height: 4px;
    border-radius: 50%;
    background: #ede4e4;
}
.cat__eye span.pupil-left {
    left: 14px;
    top:9px;
}
.cat__eye span.pupil-right {
    left: 14px;
    top:8px;
}

.cat__nose {
    position: absolute;
    top: 115px;
    left: 95px;
    width: 0;
    height: 0;
    border-right: 14px solid rgba(255, 255, 255, 0);
    border-left: 14px solid rgba(255, 255, 255, 0);
    border-top: 14px solid #e57373;
    border-radius: 40%;
    z-index: 100;
}
.cat__mouth-contour {
    position: absolute;
    top: 97px;
    left: 19px;
    background: #fff3e0;
    width: 180px;
    height: 90px;
    -webkit-border-radius: 55% 55% 60% 60%;
    border-radius: 55% 55% 60% 60%;
}
.cat__mouth-left, .cat__mouth-right {
    position: absolute;
    top: 120px;
    width: 23px;
    height: 23px;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    border: 4px solid  #373737;
    border-right: 3px solid rgba(255, 255, 255, 0);
    border-top: 3px solid rgba(255, 255, 255, 0);
    transform: rotate(-45deg);
}
.cat__mouth-left {
    left: 88px;
}
.cat__mouth-right {
    left: 108px;
}
.cat__whiskers-left, .cat__whiskers-right {
    position: relative;
}
.cat__whiskers-left, .cat__whiskers-right, .cat__whiskers-left::after, .cat__whiskers-right::after, .cat__whiskers-left::before, .cat__whiskers-right::before {
    width: 32px;
    height: 5px;
    background: #373737;
}
.cat__whiskers-left::before, .cat__whiskers-right::before, .cat__whiskers-left::after, .cat__whiskers-right::after {
    content: '';
    position: absolute;
    left: 0;
}
.cat__whiskers-left {
    top: 50px;
    left: -18px;
}
.cat__whiskers-left::before {
    top: -16px;
    transform: rotate(15deg);
}
.cat__whiskers-left::after {
    top: 16px;
    transform: rotate(-15deg);
}
.cat__whiskers-right {
    top: 46px;
    left: 205px;
}
.cat__whiskers-right::before {
    top: -16px;
    transform: rotate(-15deg);
}
.cat__whiskers-right::after {
    top: 16px;
    transform: rotate(15deg);
}
.cat__body {
    position: relative;
}
.cat__chest {
    position: absolute;
    left: 54px;
    top: -48px;
    width: 120px;
    height: 120px;
    background: #ffcc80;
    border: 5px solid  transparent;
    border-radius: 50% 50% 40% 40%;
    z-index: 3;
}
.cat__chest_inner {
    content: '';
    position: absolute;
    top: 30px;
    left: 70px;
    width: 88px;
    height: 35px;
    border-radius: 50%;
    background: #fff3e0;
    z-index: 4;
}
.cat__paw-left, .cat__paw-right {
    position: absolute;
    top: 24px;
    width: 28px;
    height: 48px;
    background: #ffcc80;
    border: none;
    border-bottom: 5px solid transparent;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    z-index: 5;
}

.cat__paw-right_inner {
    content: '';
    position: absolute;
    top: 40px;
    left: 148px;
    width: 35px;
    height: 32px;
    background: #ffcc80;
    border-radius: 45%;
    border: 5px solid transparent;
    z-index: 2;
}

.cat__paw-left_inner {
    content: '';
    position: absolute;
    top: 40px;
    left: 48px;
    width: 35px;
    height: 32px;
    background: #ffcc80;
    border-radius: 45%;
    border: 5px solid transparent;
    z-index: 2;
}
.cat__paw-left {
    left: 78px;
    border-radius: 0 0 45% 35%;
}
.cat__paw-left::after {
    left: -32px;
}
.cat__paw-right {
    left: 122px;
    border-radius: 0 0 35% 45%;
}
.cat__paw-right::after {
    left: 16px;
}

.cat__tail {
    position: absolute;
    top: 20px;
    left: 130px;
    width: 90px;
    height: 23px;
    background: #ffcc80;
    border: 5px solid transparent;
    border-radius: 45%;
    z-index: 1;
    transform: rotate(-45deg);
}
/* .cursor {
    position: absolute;
    height: 23px;
    width: 23px;
    border: none;
    border-radius: 50%;
    background: #b40660;
    transform: translateX(-50%) translateY(-50%);
    z-index: 4000;
} */

animations.css

.movingHead {
  animation: moveHead 5s infinite;
}
@keyframes moveHead {
  0%   {transform: rotate(0deg);}
  30%  {transform: rotate(5deg);}
  60%  {transform: rotate(-5deg);}
  100% {transform: rotate(0deg);}
}

.movingTail{
  animation:moveTail 2s infinite;
}
@keyframes moveTail{
  0%   {transform: rotate(0deg);}
  33%  {transform: rotate(20deg);}
  66%  {transform: rotate(-10deg);}
  100% {transform: rotate(0deg);}
}


.movingArms{
  animation:moveArms 2s infinite;
}
@keyframes moveArms{
  0%   {transform: skew(0deg);}
  25%  {transform: skew(9deg);}
  50%  {transform: skew(0deg);}
  75%  {transform: skew(-9deg);}
  100% {transform: skew(0deg);}
}



.movingEyes{
  animation:moveEyes 2s infinite;
}
@keyframes moveEyes{
  0%   {left: 41px;}
  12%  {left: 20px;}
  25%  {left: 15px;}
  37%  {left: 10px;}
  50%  {left:  5px;}
  62%  {left:  0px;}
  75%  {left:  5px;}
  87%  {left: 10px;}
  100% {left: 14px;}
}

catSettings,js

var colors = Object.values(allColors())

var defaultDNA = {
    "headColor" : 10,
    "mouthColor" : 13,
    "eyesColor" : 35,
    "earsColor" : 10,
    //Cattributes
    "eyesShape" : 1,
    "decorationPattern" : 1,
    "decorationMidcolor" : 13,
    "decorationSidescolor" : 13,
    "animation" :  1,
    "lastNum" :  1
    }

// when page load
$( document ).ready(function() {
  $('#dnabody').html(defaultDNA.headColor);
  $('#dnamouth').html(defaultDNA.mouthColor);
  $('#dnaeyes').html(defaultDNA.eyesColor);
  $('#dnaears').html(defaultDNA.earsColor);
    
  $('#dnashape').html(defaultDNA.eyesShape)
  $('#dnadecoration').html(defaultDNA.decorationPattern)
  $('#dnadecorationMid').html(defaultDNA.decorationMidcolor)
  $('#dnadecorationSides').html(defaultDNA.decorationSidescolor)
  $('#dnaanimation').html(defaultDNA.animation)
  $('#dnaspecial').html(defaultDNA.lastNum)

  renderCat(defaultDNA)
});

function getDna(){
    var dna = ''
    dna += $('#dnabody').html()
    dna += $('#dnamouth').html()
    dna += $('#dnaeyes').html()
    dna += $('#dnaears').html()
    dna += $('#dnashape').html()
    dna += $('#dnadecoration').html()
    dna += $('#dnadecorationMid').html()
    dna += $('#dnadecorationSides').html()
    dna += $('#dnaanimation').html()
    dna += $('#dnaspecial').html()

    return parseInt(dna)
}

function renderCat(dna){
    headColor(colors[dna.headColor],dna.headColor)
    $('#bodycolor').val(dna.headColor)

    mouthColor(colors[dna.mouthColor],dna.mouthColor)
    $('#mouthcolor').val(dna.mouthColor)

    eyesColor(colors[dna.eyesColor],dna.eyesColor)
    $('#eyescolor').val(dna.eyesColor)

    earsColor(colors[dna.earsColor],dna.earsColor)
    $('#earscolor').val(dna.earsColor)

    eyeVariation(dna.eyesShape)
    $('#eyeshape').val(dna.eyesShape)
    
    decorationVariation(dna.decorationPattern)
    $('#decorationpattern').val(dna.decorationPattern)
    
    decorationMidColor(colors[dna.decorationMidcolor],dna.decorationMidcolor)
    $('#decorationmid').val(dna.decorationMidcolor)
    
    decorationSidesColor(colors[dna.decorationSidescolor],dna.decorationSidescolor)
    $('#decorationsides').val(dna.decorationSidescolor)

    animationVariation(dna.animation)
    $('#animation').val(dna.animation)
}

// Changing cat colors
$('#bodycolor').change(()=>{
    var colorVal = $('#bodycolor').val()
    headColor(colors[colorVal],colorVal)
})

$('#mouthcolor').change(()=>{
  var colorVal = $('#mouthcolor').val()
  mouthColor(colors[colorVal],colorVal)
})

$('#eyescolor').change(()=>{
  var colorVal = $('#eyescolor').val()
  eyesColor(colors[colorVal],colorVal)
})

$('#earscolor').change(()=>{
  var colorVal = $('#earscolor').val()
  earsColor(colors[colorVal],colorVal)
})

//--

$('#eyeshape').change(()=>{
  var shape = parseInt($('#eyeshape').val())
  eyeVariation(shape)
})

$('#decorationpattern').change(()=>{
  var pattern = parseInt($('#decorationpattern').val())
  decorationVariation(pattern)
})

$('#decorationmid').change(()=>{
  var colorVal = $('#decorationmid').val()
  decorationMidColor(colors[colorVal],colorVal)
})

$('#decorationsides').change(()=>{
  var colorVal = $('#decorationsides').val()
  decorationSidesColor(colors[colorVal],colorVal)
})

$('#animation').change(()=>{
  var animationVal = parseInt($('#animation').val())
  animationVariation(animationVal)
})

catFactory.js

//Random color
function getColor() {
    var randomColor = Math.floor(Math.random() * 16777215).toString(16);
    return randomColor
}

function genColors(){
    var colors = []
    for(var i = 10; i < 99; i ++){
      var color = getColor()
      colors[i] = color
    }
    return colors
}

//This function code needs to modified so that it works with Your cat code.
function headColor(color,code) {
    $('.cat__head, .cat__chest').css('background', '#' + color)  //This changes the color of the cat
    $('#headcode').html('code: '+code) //This updates text of the badge next to the slider
    $('#dnabody').html(code) //This updates the body color part of the DNA that is displayed below the cat
}

function mouthColor(color,code) {
    $('.cat__mouth-contour').css('background', '#' + color)
    $('#mouthcode').html('code: '+code)
    $('#dnamouth').html(code)
}

function eyesColor(color,code) {
    $('.pupil-left, .pupil-right').css('background', '#' + color)
    $('#eyescode').html('code: '+code)
    $('#dnaeyes').html(code)
}

function earsColor(color,code) {
    $('.cat__ear--left, .cat__ear--right').css('background', '#' + color)
    $('#earscode').html('code: '+code)
    $('#dnaears').html(code)
}

function decorationMidColor(color,code) {
    $('.cat__head-dots').css('background', '#' + color)
    $('#midcolorcode').html('code: '+code)
    $('#dnadecorationMid').html(code)
}

function decorationSidesColor(color,code) {
    $('.cat__head-dots_first, .cat__head-dots_second').css('background', '#' + color)
    $('#sidecolorcode').html('code: '+code)
    $('#dnadecorationSides').html(code)
}

// Variation functions for range-bars

// 8 eye types
function eyeVariation(num) {
    $('#dnashape').html(num)
    $('.cat__eye').find('span').css('border', 'none')
    switch (num) {
        default:
            $('#eyeName').html('1: Basic')
            break
        case 2:
            $('#eyeName').html('2: Chill')
            $('.cat__eye').find('span').css('border-top', '15px solid')
            break
        case 3:
            $('#eyeName').html('3: Looking up')
            $('.cat__eye').find('span').css('border-bottom', '15px solid')
            break
        case 4:
            $('#eyeName').html('4: Looking left')
            $('.cat__eye').find('span').css('border-left', 'solid 10px')
            break
        case 5:
            $('#eyeName').html('5: Looking right')
            $('.cat__eye').find('span').css('border-right', 'solid 10px')
            break
        case 6:
            $('#eyeName').html('6: Focused')
            $('.cat__eye').find('span').css('border-top', 'solid 7px')
            $('.cat__eye').find('span').css('border-bottom', 'solid 7px')
            $('.cat__eye').find('span').css('border-left', 'solid 7px')
            $('.cat__eye').find('span').css('border-right', 'solid 7px')
            break
        case 7:
            $('#eyeName').html('7: Dreamy')
            $('.cat__eye').find('span').css('border-bottom', 'solid 10px')
            $('.cat__eye').find('span').css('border-left', 'solid 10px')
            $('.cat__eye').find('span').css('border-right', 'solid 10px')
            break
    }
}

function decorationVariation(num) {
    $('#dnadecoration').html(num)
    $('.cat__head-dots').css({ "transform": "rotate(0deg)", "height": "48px", "width": "14px", "top": "1px", "border-radius": "0 0 50% 50%" })
    $('.cat__head-dots_first').css({ "transform": "rotate(0deg)", "height": "35px", "width": "14px", "top": "1px", "border-radius": "50% 0 50% 50%" })
    $('.cat__head-dots_second').css({ "transform": "rotate(0deg)", "height": "35px", "width": "14px", "top": "1px", "border-radius": "0 50% 50% 50%" })
    switch (num) {
        default:
            $('#decorationName').html('1: Basic')
            break
        case 2:
            $('#decorationName').html('2: Long')
            $('.cat__head-dots').css({ "transform": "rotate(0deg)", "height": "55px", "width": "14px", "top": "1px", "border-radius": "0 0 50% 50%" })
            $('.cat__head-dots_first').css({ "transform": "rotate(0deg)", "height": "42px", "width": "14px", "top": "1px", "border-radius": "50% 0 50% 50%" })
            $('.cat__head-dots_second').css({ "transform": "rotate(0deg)", "height": "42px", "width": "14px", "top": "1px", "border-radius": "0 50% 50% 50%" })
            break
        case 3:
            $('#decorationName').html('3: Longer')
            $('.cat__head-dots').css({ "transform": "rotate(0deg)", "height": "63px", "width": "14px", "top": "1px", "border-radius": "0 0 50% 50%" })
            $('.cat__head-dots_first').css({ "transform": "rotate(0deg)", "height": "50px", "width": "14px", "top": "1px", "border-radius": "50% 0 50% 50%" })
            $('.cat__head-dots_second').css({ "transform": "rotate(0deg)", "height": "50px", "width": "14px", "top": "1px", "border-radius": "0 50% 50% 50%" })
            break
        case 4:
            $('#decorationName').html('4: Long to left')
            $('.cat__head-dots').css({ "transform": "rotate(20deg)", "height": "55px", "width": "14px", "top": "1px", "border-radius": "0 0 50% 50%" })
            $('.cat__head-dots_first').css({ "transform": "rotate(0deg)", "height": "42px", "width": "14px", "top": "1px", "border-radius": "50% 0 50% 50%" })
            $('.cat__head-dots_second').css({ "transform": "rotate(0deg)", "height": "42px", "width": "14px", "top": "1px", "border-radius": "0 50% 50% 50%" })
            break
        case 5:
            $('#decorationName').html('5: Long to right')
            $('.cat__head-dots').css({ "transform": "rotate(-20deg)", "height": "55px", "width": "14px", "top": "1px", "border-radius": "0 0 50% 50%" })
            $('.cat__head-dots_first').css({ "transform": "rotate(0deg)", "height": "42px", "width": "14px", "top": "1px", "border-radius": "50% 0 50% 50%" })
            $('.cat__head-dots_second').css({ "transform": "rotate(0deg)", "height": "42px", "width": "14px", "top": "1px", "border-radius": "0 50% 50% 50%" })
            break
        case 6:
            $('#decorationName').html('6: Long spread')
            $('.cat__head-dots').css({ "transform": "rotate(0deg)", "height": "55px", "width": "14px", "top": "1px", "border-radius": "0 0 50% 50%" })
            $('.cat__head-dots_first').css({ "transform": "rotate(28deg)", "height": "42px", "width": "14px", "top": "1px", "border-radius": "50% 0 50% 50%" })
            $('.cat__head-dots_second').css({ "transform": "rotate(-28deg)", "height": "42px", "width": "14px", "top": "1px", "border-radius": "0 50% 50% 50%" })
            break
        case 7:
            $('#decorationName').html('7: Longer spread')
            $('.cat__head-dots').css({ "transform": "rotate(0deg)", "height": "63px", "width": "14px", "top": "1px", "border-radius": "0 0 50% 50%" })
            $('.cat__head-dots_first').css({ "transform": "rotate(28deg)", "height": "50px", "width": "14px", "top": "1px", "border-radius": "50% 0 50% 50%" })
            $('.cat__head-dots_second').css({ "transform": "rotate(-28deg)", "height": "50px", "width": "14px", "top": "1px", "border-radius": "0 50% 50% 50%" })
            break
        }
}

function animationVariation(num) {
    $('#dnaanimation').html(num)
    $("#head").removeClass("movingHead");
    $("#tail").removeClass("movingTail");
    $("#paw1").removeClass("movingArms");
    $("#paw2").removeClass("movingArms");
    $("#eye1").removeClass("movingEyes");
    $("#eye2").removeClass("movingEyes");
    switch (num) {
        default:
            $('#animationcode').html('None')
            break
        case 2:
            $('#animationcode').html('Moving head')
            $("#head").addClass("movingHead");
            break
        case 3:
            $('#animationcode').html('Moving tail')
            $("#tail").addClass("movingTail");
            break
        case 4:
            $('#animationcode').html('Moving arms')
            $("#paw1").addClass("movingArms");
            $("#paw2").addClass("movingArms");
            break
        case 5:
            $('#animationcode').html('Moving eyes')
            $("#eye1").addClass("movingEyes");
            $("#eye2").addClass("movingEyes");
            break
    }
}

[Bikuta]

index.html

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>CryptoDoggies Factory</title>

        <script type="text/javascript" src="assets/js/jquery-3.4.1.js"></script>
        <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
        <script src="assets/bootstrap/js/popper.js"></script>
        <script src="assets/bootstrap/js/bootstrap.min.js"></script>
        <link rel="stylesheet" href="assets/css/mystyle.css">
        <link rel="stylesheet" href="assets/css/dogs.css">
        <link rel="stylesheet" href="assets/css/animations.css">
        <link rel="stylesheet" href="assets/css/colors.css">
        <link rel="stylesheet" href="assets/css/factory.css">
        <link rel="stylesheet" href="assets/css/frontend.css">
    </head>
    <body>
        <div class="container p-5">
            <div align="center">
                <h1 class="c-white">Crypto Doggies Factory</h1>
                <p class="c-white">Create your custom Doggy</p>
            </div>
        </div>
        <div class="row">
            <div class="col-12 col-lg-6 catBox light-b-shadow">
                <div class="container doggy-container">
                    <div class="bubble">
                        <div class="ear-left">
                            <div class="ear"></div>
                        </div>
                        <div class="ear-right">
                            <div class="ear"></div>
                        </div>
                        <div class="head">
                            <div id="mid" class="head-dots">
                                <div id="leftDot" class="head-dots_first"></div>
                                <div id="rightDot" class="head-dots_second"></div>
                            </div>
                        </div>
                        <div class="dog"></div>
                        <div class="eyes"></div>
                        <div class="nose"></div>
                        <div class="left mouth"></div>
                        <div class="right mouth"></div>
                        <div class="tongue"></div>
                    </div>
                </div>
                <br>
                <div class="dnaDiv" id="dogDNA">
                    <b>
                            DNA:
                            <!-- Colors -->
                            <span id="dnabody"></span>
                            <span id="dnaeyes"></span>
                            <span id="dnaears"></span>
                            <span id="dnamouth"></span>
                            <span id="dnasky"></span>
                            <span id="dnabubble"></span>
                            
                            <!-- Cattributes -->
                            <span id="dnashape"></span>
                            <span id="dnadecoration"></span>
                            <span id="dnadecorationMid"></span>
                            <span id="dnadecorationSides"></span>
                            <span id="dnaanimation"></span>
                            <span id="dnaspecial"></span>
                        </b>
                </div>
            </div>
            <div class="col-12 col-lg-6 cattributes light-b-shadow" >
                <!-- Cat colors -->
                <div id="catColors">
                    <div class="form-group">
                        <label for="formControlRange"><b>Head Color</b><span class="badge badge-dark ml-2" id="headcode"></span></label>
                        <input type="range" min="10" max="98" class="form-control-range" id="bodycolor">
                        <br>
                    </div>   
                    <div class="form-group">
                        <label for="formControlRange"><b>Eye Color</b><span class="badge badge-dark ml-2" id="eyecode"></span></label>
                        <input type="range" min="10" max="98" class="form-control-range" id="eyesColor">
                        <br>
                    </div>     
                    <div class="form-group">
                        <label for="formControlRange"><b>Ear Color</b><span class="badge badge-dark ml-2" id="earscode"></span></label>
                        <input type="range" min="10" max="98" class="form-control-range" id="earsColor">
                        <br>
                    </div>    
                    <div class="form-group">
                        <label for="formControlRange"><b>Mustache Color</b><span class="badge badge-dark ml-2" id="mouthcode"></span></label>
                        <input type="range" min="10" max="98" class="form-control-range" id="mouthColor">
                        <br>
                    </div>    
                    <div class="form-group">
                        <label for="formControlRange"><b>Sky Color</b><span class="badge badge-dark ml-2" id="skycode"></span></label>
                        <input type="range" min="10" max="98" class="form-control-range" id="skyColor">
                        <br>
                    </div>    
                    <div class="form-group">
                        <label for="formControlRange"><b>Bubble Color</b><span class="badge badge-dark ml-2" id="bubblecode"></span></label>
                        <input type="range" min="10" max="98" class="form-control-range" id="bubbleColor">
                        <br>
                    </div>
                    <div class="form-group">
                        <label for="formControlRange"><b>Eye Shape</b><span class="badge badge-dark ml-2" id="eyeName"></span></label>
                        <input type="range" min="1" max="7" class="form-control-range" id="eyeshape">
                        <br>
                    </div>
                    <div class="form-group">
                        <label for="formControlRange"><b>Patch Decoration</b><span class="badge badge-dark ml-2" id="decorationName"></span></label>
                        <input type="range" min="1" max="5" class="form-control-range" id="decorationstyle">
                        <br>
                    </div>
                    <div class="form-group">
                        <label for="formControlRange"><b>Patch Middle Color</b><span class="badge badge-dark ml-2" id="decorationMidCode"></span></label>
                        <input type="range" min="10" max="98" class="form-control-range" id="decMidColor">
                        <br>
                    </div>
                    <div class="form-group">
                        <label for="formControlRange"><b>Patch Side Color</b><span class="badge badge-dark ml-2" id="decorationSidesCode"></span></label>
                        <input type="range" min="10" max="98" class="form-control-range" id="decSideColor">
                        <br>
                    </div>
                    <div class="form-group">
                        <label for="formControlRange"><b>Animation</b><span class="badge badge-dark ml-2" id="animationName"></span></label>
                        <input type="range" min="1" max="3" class="form-control-range" id="animation">
                        <br>
                    </div>
                </div>
                </div>
            </div>
        </div>
        <br> 
        <footer align="left">
            <p>Victor Valdez GoodGains Exchange 2022</p>
        </footer>
    </body>
        <script src="assets/js/colors.js"></script>
        <script src="assets/js/dogSettings.js"></script>
        <script src="assets/js/dogFactory.js"></script>
</html>

animations.css

.movingHead {
    animation: moveHead 2s infinite;
}

@keyframes moveHead {
    0% {
        transform: rotate(0deg);
    }
    33% {
        transform: rotate(7deg);
    }
    66% {
        transform: rotate(-7deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

.earScale {
    animation: bigEars 4s infinite;
}

@keyframes bigEars {
    0% {
        transform: scale(1);
        left: 0px;
    }
    50% {
        transform: scale(1.3);
        left: 15px;
    }
    100% {
        transform: scale(1);
        left: 0px;
    }
}

dogSettings.js

var colors = Object.values(allColors())

var defaultDNA = {
    "headcolor" : 33,
    "mouthColor" : 20,
    "eyesColor" : 74,
    "earsColor" : 23,
    "skyColor": 88,
    "bubbleColor": 73,
    //Cattributes
    "eyesShape" : 1,
    "decorationPattern" : 1,
    "decorationMidcolor" : 13,
    "decorationSidescolor" : 13,
    "animation" :  1,
    "lastNum" :  1
    }

// when page load
$( document ).ready(function() {
  $('#dnabody').html(defaultDNA.headColor);
  $('#dnaeyes').html(defaultDNA.eyesColor);
  $('#dnaears').html(defaultDNA.earsColor);
  $('#dnamouth').html(defaultDNA.mouthColor);
  $('#dnasky').html(defaultDNA.skyColor);
  $('#dnabubble').html(defaultDNA.bubbleColor);
    
  $('#dnashape').html(defaultDNA.eyesShape)
  $('#dnadecoration').html(defaultDNA.decorationPattern)
  $('#dnadecorationMid').html(defaultDNA.decorationMidcolor)
  $('#dnadecorationSides').html(defaultDNA.decorationSidescolor)
  $('#dnaanimation').html(defaultDNA.animation)
//   $('#dnaspecial').html(defaultDNA.lastNum)

  renderCat(defaultDNA)
});

function getDna(){
    var dna = ''
    dna += $('#dnasky').html()
    dna += $('#dnabubble').html()
    dna += $('#dnabody').html()
    dna += $('#dnamouth').html()
    dna += $('#dnaeyes').html()
    dna += $('#dnaears').html()
    dna += $('#dnashape').html()
    dna += $('#dnadecoration').html()
    dna += $('#dnadecorationMid').html()
    dna += $('#dnadecorationSides').html()
    dna += $('#dnaanimation').html()
    dna += $('#dnaspecial').html()

    return parseInt(dna)
}

function renderCat(dna){
    headColor(colors[dna.headcolor],dna.headcolor)
    $('#bodycolor').val(dna.headcolor)
    eyesColor(colors[dna.eyesColor],dna.eyesColor)
    $('#eyesColor').val(dna.eyesColor)
    earsColor(colors[dna.earsColor],dna.earsColor)
    $('#earsColor').val(dna.earsColor)
    mouthColor(colors[dna.mouthColor],dna.mouthColor)
    $('#mouthColor').val(dna.mouthColor)
    skyColor(colors[dna.skyColor],dna.skyColor)
    $('#skyColor').val(dna.skyColor)
    bubbleColor(colors[dna.bubbleColor],dna.bubbleColor)
    $('#bubbleColor').val(dna.bubbleColor)
    eyeVariation(dna.eyesShape)
    $('eyeshape').val(dna.eyesShape)
    decorationVariation(dna.decorationPattern)
    $('#decorationstyle').val(dna.decorationPattern)
    decorationMidColorVar([dna.decorationMidcolor],dna.decorationMidcolor)
    $('#decMidColor').val(dna.decorationMidcolor)
    decorationSidesColorVar([dna.decorationSidescolor],dna.decorationSidescolor)
    $('#decSideColor').val(dna.decorationSidescolor)
    animationsPlayer([dna.animation], dna.animation)
    $('#animation').val(dna.animation)
} 

// Changing cat colors
$('#bodycolor').change(()=>{
    var colorVal = $('#bodycolor').val()
    headColor(colors[colorVal],colorVal)
})

$('#eyesColor').change(()=>{
  var colorVal = $('#eyesColor').val()
  eyesColor(colors[colorVal],colorVal)
})

$('#earsColor').change(()=>{
  var colorVal = $('#earsColor').val()
  earsColor(colors[colorVal],colorVal)
})

$('#mouthColor').change(()=>{
  var colorVal = $('#mouthColor').val()
  mouthColor(colors[colorVal],colorVal)
})

$('#skyColor').change(()=>{
  var colorVal = $('#skyColor').val()
  skyColor(colors[colorVal],colorVal)
})

$('#bubbleColor').change(()=>{
  var colorVal = $('#bubbleColor').val()
  bubbleColor(colors[colorVal],colorVal)
})

$('#eyeshape').change(()=>{
  var shape = parseInt($('#eyeshape').val())
  eyeVariation(shape)
})

$('#decorationstyle').change(()=>{
  var decostyle = parseInt($('#decorationstyle').val())
  decorationVariation(decostyle)
})

$('#decMidColor').change(()=>{
  var colorVal = $('#decMidColor').val()
  console.log(colorVal)
  decorationMidColorVar(colors[colorVal],colorVal)
})

$('#decSideColor').change(()=>{
  var colorVal = $('#decSideColor').val()
  console.log(colorVal)
  decorationSidesColorVar(colors[colorVal],colorVal)
})

$('#animation').change(()=>{
  var anim = parseInt($('#animation').val())
  console.log(anim)
  animationsPlayer(anim)
})

dogFactory.js

//Random color
function getColor() {
    var randomColor = Math.floor(Math.random() * 16777215).toString(16);
    return randomColor
}

function genColors(){
    var colors = []
    for(var i = 10; i < 99; i ++){
      var color = getColor()
      colors[i] = color
    }
    return colors
}

//This function code needs to modified so that it works with the dog code.
function headColor(color,code) {
    $('.head, .dog').css('background', '#' + color)  //This changes the color of the dog
    $('#headcode').html('code: '+code) //This updates text of the badge next to the slider
    $('#dnabody').html(code) //This updates the body color part of the DNA that is displayed below the cat
}

//This function is for the color of the eyes
function eyesColor(color,code) {
    $('.eyes').css('background', '#' + color)  //This changes the color of the eyes
    $('.eyes').css('box-shadow', '65px' + ' 0' + ' #' + color)
    $('#eyecode').html('code: ' + code) //This updates text of the badge next to the slider
    $('#dnaeyes').html(code) //This updates the body color part of the DNA that is displayed below the cat
}

//This function is for the color of the ears
function earsColor(color,code) {
    $('.ear').css('background', '#' + color)  //This changes the color of the eyes
    $('#earscode').html('code: ' + code) //This updates text of the badge next to the slider
    $('#dnaears').html(code) //This updates the body color part of the DNA that is displayed below the cat
}

//This function is for the color of the patch and mustache
function mouthColor(color,code) {
    $('.mouth').css('background', '#' + color)  //This changes the color of the eyes
    $('.mouth').css('border', '5px ' + 'solid ' + '#' + color)
    $('#mouthcode').html('code: ' + code) //This updates text of the badge next to the slider
    $('#dnamouth').html(code) //This updates the body color part of the DNA that is displayed below the cat
}
//This function is for the color of the sky
function skyColor(color,code) {
    $('.doggy-container').css('background', '#' + color)  //This changes the color of the eyes
    $('#skycode').html('code: ' + code) //This updates text of the badge next to the slider
    $('#dnasky').html(code) //This updates the body color part of the DNA that is displayed below the cat
}
//This function is for the color of the bubble
function bubbleColor(color,code) {
    $('.bubble').css('background', '#' + color)  //This changes the color of the eyes
    $('#bubblecode').html('code: ' + code) //This updates text of the badge next to the slider
    $('#dnabubble').html(code) //This updates the body color part of the DNA that is displayed below the cat
}

function decorationMidColorVar(color,code) {
    console.log(color + code)
    $('.head-dots').css('background', '#' + color)  //This changes the color of Mid head decoration
    $('#decorationMidCode').html('code: '+code) //This updates text of the badge next to the slider
    $('#dnadecorationMid').html(code) //This updates the body color part of the DNA that is displayed below the cat
}

function decorationSidesColorVar(color,code) {
    console.log(color + code)
    $('.head-dots_first, .head-dots_second').css('background', '#' + color)  //This changes the color of Sides head decoration
    $('#decorationSidesCode').html('code: '+code) //This updates text of the badge next to the slider
    $('#dnadecorationSides').html(code) //This updates the body color part of the DNA that is displayed below the cat
}


//###################################################
//Functions below will be used later on in the project
//###################################################
function eyeVariation(num) {

    $('#dnashape').html(num)
    switch (num) {
        case 1:
            normalEyes()
            $('#eyeName').html('Basic')
            break
        case 2:
            normalEyes()
            $('#eyeName').html('Chill')
            return eyesType1()
            break
        case 3:
            normalEyes()
            $('#eyeName').html('Suprised')
            return eyesType2()
            break    
        case 4:
            normalEyes()
            $('#eyeName').html('Tiny')
            return eyesType3()
            break   
        case 5:
            normalEyes()
            $('#eyeName').html('Detective')
            return eyesType4()
            break
        case 6:
            normalEyes()
            $('#eyeName').html('Stoner')
            return eyesType5()
            break
        case 7:
            normalEyes()
            $('#eyeName').html('Cyclopes')
            return eyesType6()
            break                               
    }
}

function decorationVariation(num) {
    $('#dnadecoration').html(num)
    switch (num) {
        case 1:
            $('#decorationName').html('Basic')
            normaldecoration()
            break
            case 2:
                normaldecoration()
                $('#decorationName').html('Tribal')
                return decorationType1()
                break   
            case 3:
                normaldecoration()
                $('#decorationName').html('Big')
                return decorationType2()
                break 
            case 4:
                normaldecoration()
                $('#decorationName').html('Funny')
                return decorationType3()
                break   
            case 5:
                normaldecoration()
                $('#decorationName').html('Round')
                return decorationType4()
                break                
    }
}

function animationsPlayer(anim) {
    $('#dnaanimation').html(anim)
    switch (anim) {
        case 1:
            $('#animationName').html('None')
             resetAnimation()
            break
        case 2:
            $('#animationName').html('Wobbely Head')
            return animationType1();
            break
        case 3:
            $('#animationName').html('Big Ears')
            return animationType2();                break    
        }
}


function normalEyes() {
    $('.eyes').css('border', 'none')
    $('.eyes').css('height', '16px')
    $('.eyes').css('width', '16px')
    $('.eyes').css('border-radius', '50%')
    $('.eyes').css('left', '140px')
    $('.eyes').css('bottom', '180px')
    $('.eyes').css('box-shadow', '65px 0 inherit')

}
function eyesType1() {
    normalEyes()
    $('.eyes').css('width', '20px')
    $('.eyes').css('height', '10px')
}
function eyesType2() {
    normalEyes()
    $('.eyes').css('width', '20px')
    $('.eyes').css('height', '40px')
}
function eyesType3() {
    normalEyes()
    $('.eyes').css('width', '5px')
    $('.eyes').css('height', '5px')
}
function eyesType4() {
    normalEyes()
    $('.eyes').css('width', '50px')
    $('.eyes').css('height', '30px')
    $('.eyes').css('left', '121px')
    $('.eyes').css('bottom', '170px')
    $('.eyes').css('border-radius', '0 0 50% 50%')
}
function eyesType5() {
    normalEyes()
    $('.eyes').css('width', '50px')
    $('.eyes').css('height', '22px')
    $('.eyes').css('left', '124px')
    $('.eyes').css('bottom', '179px')
    $('.eyes').css('border-radius', '144% 138% 50% 50%')
}
function eyesType6() {
    normalEyes()
    $('.eyes').css('width', '69px')
    $('.eyes').css('height', '50px')
    $('.eyes').css('left', '144px')
    $('.eyes').css('bottom', '184px')
    $('.eyes').css('border-radius', '500%')
    $('.eyes').css('border', '10px solid #ffffff')
    $('.eyes').css('box-shadow', 'none')
}


function normaldecoration() {
    //Remove all style from other decorations
    //In this way we can also use normalDecoration() to reset the decoration style
    $('.head-dots').css({ "transform": "rotate(360deg)", "height": "30px", "width": "10px", "top": "20px", "left": "78px", "border-radius": "50% 50% 50% 50%" })
    $('.head-dots_first').css({ "transform": "rotate(360deg)", "height": "30px", "width": "10px", "bottom": "5px", "right": "20px", "border-radius": "50% 50% 50% 50%" })
    $('.head-dots_second').css({ "transform": "rotate(360deg)", "height": "30px", "width": "10px", "bottom": "5px", "left": "20px", "border-radius": "50% 50% 50% 50%" })
}

function decorationType1() {
    //Remove all style from other decorations
    //In this way we can also use normalDecoration() to reset the decoration style
    $('.head-dots').css({ "transform": "rotate(360deg)", "height": "40px", "width": "10px", "top": "20px", "left": "78px", "border-radius": "50% 50% 50% 50%" })
    $('.head-dots_first').css({ "transform": "rotate(323deg)", "height": "40px", "width": "10px", "bottom": "5px", "right": "20px", "border-radius": "50% 50% 50% 50%" })
    $('.head-dots_second').css({ "transform": "rotate(215deg)", "height": "40px", "width": "10px", "bottom": "5px", "left": "20px", "border-radius": "50% 50% 50% 50%" })
}

function decorationType2() {
    //Remove all style from other decorations
    //In this way we can also use normalDecoration() to reset the decoration style
    $('.head-dots').css({ "transform": "rotate(360deg)", "height": "40px", "width": "30px", "top": "20px", "left": "70px", "border-radius": "50% 50% 50% 50%" })
    $('.head-dots_first').css({ "transform": "rotate(270deg)", "height": "40px", "width": "30px", "bottom": "5px", "right": "20px", "border-radius": "50% 50% 50% 50%" })
    $('.head-dots_second').css({ "transform": "rotate(225deg)", "height": "40px", "width": "30px", "bottom": "5px", "left": "20px", "border-radius": "50% 50% 50% 50%" })
}

function decorationType3() {
    //Remove all style from other decorations
    //In this way we can also use normalDecoration() to reset the decoration style
    $('.head-dots').css({ "transform": "rotate(360deg)", "height": "40px", "width": "10px", "top": "20px", "left": "78px", "border-radius": "50% 50% 50% 50%" })
    $('.head-dots_first').css({ "transform": "rotate(323deg)", "height": "40px", "width": "10px", "bottom": "5px", "right": "20px", "border-radius": "50% 50% 50% 50%" })
    $('.head-dots_second').css({ "transform": "rotate(215deg)", "height": "40px", "width": "10px", "bottom": "5px", "left": "20px", "border-radius": "50% 50% 50% 50%" })
}

function decorationType4() {
    //Remove all style from other decorations
    //In this way we can also use normalDecoration() to reset the decoration style
    $('.head-dots').css({ "transform": "rotate(360deg)", "height": "40px", "width": "30px", "top": "20px", "left": "70px", "border-radius": "50% 50% 50% 50%" })
    $('.head-dots_first').css({ "transform": "rotate(270deg)", "height": "40px", "width": "30px", "bottom": "5px", "right": "20px", "border-radius": "50% 50% 50% 50%" })
    $('.head-dots_second').css({ "transform": "rotate(225deg)", "height": "40px", "width": "30px", "bottom": "5px", "left": "20px", "border-radius": "50% 50% 50% 50%" })
}

function animationType1() {
    resetAnimation();
    $(".bubble").addClass("movingHead");
}

 function animationType2() {
    resetAnimation();
    $(".ear").addClass("earScale");
 }


function resetAnimation(){
    $(".bubble").removeClass("movingHead");
    $(".ear").removeClass("earScale");
}

[patgeek]

hahaha…it becomes more fun

index.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="./css/styles.css">
    <link rel="stylesheet" href="./css/animations.css">
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <script src="./js/bootstrap.min.js"></script>
    <script type="text/javascript" src="./js/jquery-3.4.1.js"></script>
    <title></title>
  </head>
  <body>


   <div class="container">
     <div class="row">



        <div class="col-lg-2 catBox m-2">

    <div id="cat">


    <div class="hat"></div>

    <div class="star_1"></div>

    <div class="star_2"></div>

    <div class="ears">
         <div class="ear left_ear "></div>
         <div class="ear right_ear "> </div>
       </div>




      <div id="head_cat">

        <div id="zebra_head_1"></div>

        <div id="zebra_head_2"></div>

        <div id="zebra_head_3"></div>


   <div class="eyes">

           <div class="eye">
             <div class="pupils"></div>
           </div>

            <div class="eye">
                  <div class="pupils"></div>
            </div>
        </div>



        <div class="nose">
           <div class="nose-reflection"></div>
        </div>


      <div class="mouth">
          <div class="teeth"></div>
          <div class="teeth"></div>
          <div class="teeth"></div>
        </div>



        <div class="tail"></div>



      <div class="body_cat"></div>

         <div id="zebra_0"></div>
         <div id="zebra_1"></div>
         <div id="zebra_2"></div>
         <div id="zebra_3"></div>
         <div id="zebra_4"></div>
         <div id="zebra_5"></div>
          <div id="zebra_6"></div>

       <div class="navel"></div>

       <div id="leg_left"></div>

       <div id="right_leg"></div>

</div>
 </div>
</div>


  <div class="form-group">
                 <label for="formControlRange"><b>Head and body</b><span class="badge badge-dark ml-2" id="headcode"></span></label>
                 <input type="range" min="10" max="98" class="form-control-range" id="head_cat_color">
             </div>


<div class="form-group">
               <label for="formControlRange"><b>Ears</b><span class="badge badge-dark ml-2" id="headcode"></span></label>
               <input type="range" min="10" max="98" class="form-control-range" id="ears_cat_color">
           </div>

   <div>&nbsp;</div>

           <div class="form-group">
                          <label for="formControlRange"><b>Eyes</b><span class="badge badge-dark ml-2" id="headcode"></span></label>
                          <input type="range" min="10" max="98" class="form-control-range" id="eyes_cat_color">
           </div>

<div>&nbsp;</div>



 <div class="form-group">
                <label for="formControlRange"><b>Mouth</b><span class="badge badge-dark ml-2" id="headcode"></span></label>
                <input type="range" min="10" max="98" class="form-control-range" id="mouth_cat_color">
 </div>

<div>&nbsp;</div>

<div class="form-group">
           <label for="formControlRange"><b></b><span class="badge badge-dark ml-2" id="headcode"></span></label>
           <label id="eyeName">Basic</label>
           <input type="range" min="1" max="7" class="form-control-range" id="eyes_shape">
            </br>
        <label>Head decoration</label>   <input type="range" min="1" max="7" class="form-control-range" id="zebra_head_shape">

        <label>Body decoration</label>   <input type="range" min="45" max="360" class="form-control-range" id="zebra_body_shape">
               <span>&nbsp;</span>

      <label id="animationName">Animation</label><input type="range" min="1" max="5" class="form-control-range" id="animations">
      <span>&nbsp;</span>


           DNA: &nbsp;<span id="dnabody"></span>
           <span>&nbsp;</span>


               <span id="dnaear"></span>
               <span>&nbsp;</span>
                <span id="dnaeyes"></span>
                <span>&nbsp;</span>
                <span id="dnamouth"></span>

                <span>&nbsp;</span>
                <span id="dnashape"></span>
                <span>&nbsp;</span>
                <span id="dnadecoration"></span>
                <span>&nbsp;</span>
                <span id="dnadecorationMid"></span>
                <span>&nbsp;</span>
                <span id="dnadecorationSides"></span>
                <span>&nbsp;</span>
                <span id="dnaanimation"></span>
                <span>&nbsp;</span>
                <span id="dnaspecial"></span>
</div>


</div>







          <div class="row">
              <div class="col-lg-6 catBox m-6">

            <div>&nbsp;</div>
            <div>&nbsp;</div>
            <div>&nbsp;</div>
            <div>&nbsp;</div>
            <div>&nbsp;</div>



             </div>
          </div>
</div>



</div>
</div>

<script src="./js/colors.js"></script>

</body>
</html>

styles.css

 


#cat{
  position: relative;
  margin-left: 30%;
}


#head_cat{
    position: relative;
   background:  -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f1ef72), color-stop(100%,#f1cd72 ));
  height:223px;
  border-radius: 50%;
  z-index: 2;
  width:200px;

}


.eyes{
    position: relative;
    top: 30px;
    display: flex;
    z-index: 4;

}

.eye{
  position: relative;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,white), color-stop(100%,grey));
  border-radius: 50%;
  width: 50px;
  height: 50px;
  margin:25px;


}


.pupils{
  position: relative;
  background-color: black;
  width: 30px;
  height: 30px;
  border-radius: 50%;
   position: relative;
  top: 10px;
  left: 10px;
 }



 .ears{

    display:flex;
    z-index:1;
 }



 .ear{

   background-color: #cbcb22;
   height: 100px;
   width: 80px;
   position:relative;

   margin: 10px;
   border-radius: 30%;

 }


 .left_ear{
    border-radius: 90% 0 90% 0;
    transform: scale(-1, 1) rotate(7deg);
    top: 80px;
    left: -9px;
    height: 80px;
   position:relative;
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,yellow), color-stop(100%,green));
 }


 .right_ear{
   border-radius: 90% 0 90% 0;
   transform: scale(1, -1) rotate(124deg);
   top:69px;
   left:88px;
   height: 80px;
   position:relative;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,yellow), color-stop(100%,green));
 }


 .zebra{
   position: absolute;

   background-color: #847e85;
   top:45px;
   left:6px;
 }

 #zebra1{
   width: 150px;
   height: 20px;
   margin-left:26px;

   position: relative;
 }



 .nose{
   background-color: #565659;
   width: 50px;
   height: 50px;
   border-radius: 50% 0 90% 0;
   position:relative;
   left:76px;
   top:115px;
   transform:  rotate(45deg);
   position: absolute;
 }


 .nose-reflection{
    background-color: #ebbef0;
    width: 30px;
    height: 20px;
    border-radius: 50% 0 90% 0;
    top:10px;
 }


 .zebras{
   background-color: #847e85;
   display: block;
 }

 .zebra_left{
   width: 30px;
   height: 10px;
 }


 .zebra_left_1{
     margin-top: 5px;
     width:25px;
 }

 .zebra_left_2{
     margin-top: 5px;
 }




 .mouth{
   width: 80px;
   height: 30px;
   background-color: black;
   margin-left: 60px;
   margin-top: 40px;
   border-radius: 50% 0 30% 0;
   display: flex;
  }

  .teeth{
     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,white), color-stop(100%,grey));
    width: 30px;
    height: 20px;
    border-radius: 50% 0 90% 0;
    top:10px;
  }


  .body_cat{
    width: 280px;
    height:280px;
    background:  -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f1ef72), color-stop(100%,#f1cd72 ));
    border-radius: 30% 30% 30% 30%;
    transform:   rotate(140deg);
    top:173px;
    margin-top:39px;
   margin-left:-50px;
   position:absolute;
   z-index: 0;
  }

  .tail{
    position:absolute;
    width: 154px;
    height:50px;
       background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,orange), color-stop(100%,brown));
    top:327px;
    left:200px;
    border-radius: 90% 0 90% 0;
    transform: scale(1, -1) rotate(70deg);
  }








  .navel{
      background-color: black;
      position: absolute;
      top:422px;
      left:76px;
      width:25px;
      height:25px;
      border-radius: 45% ;
  }



  #leg_left{
    width: 154px;

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,brown), color-stop(100%,black));
      position: absolute;
      top:476px;
      left:6px;
      width:38px;
      height:95px;
      border-radius: 30% 15% 30% 15% ;
      transform:  rotate(90deg);
  }


  #right_leg{
       background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,brown), color-stop(100%,black));
      position: absolute;
      top:476px;
      left:122px;
      width:38px;
      height:95px;
      border-radius: 30% 15% 30% 15% ;
      transform:  rotate(90deg);
  }



  #zebra_0{
    top:85px;
   height:25px;
   background-color: #a78b03;
   width: 25px;
   z-index: 1;
   position:relative;
   border-radius: 40% 20% 50% 10%;
   margin-left: 50px;
  }



  #zebra_1{
    top:115px;
   height:25px;
   background-color: #a78b03;
   width: 25px;
   z-index: 1;
   position:relative;
   border-radius: 40% 20% 50% 10%;
  }


  #zebra_1{
    top:115px;
   height:25px;
   background-color: #a78b03;
   width: 25px;
   z-index: 1;
   position:relative;
   border-radius: 40% 20% 50% 10%;
  }

  #zebra_6{
    top:-54px;
   height:25px;
   background-color: #a78b03;
   width: 25px;
   z-index: 1;
   position:relative;
   border-radius: 40% 20% 50% 10%;
   left:115px;
   margin-left:50px;
  }



#zebra_2{
  top:115px;
 height:25px;
 background-color: #a78b03;
 width: 25px;
 z-index: 1;
 position:relative;
 border-radius: 40% 20% 50% 10%;
 margin-left:50px;
}



#zebra_3{
  top:75px;
 height:25px;
 background-color: #a78b03;
 width: 25px;
 z-index: 1;
 position:relative;
 border-radius: 40% 20% 50% 10%;
 margin-left:105px;
}

#zebra_4{
  top:125px;
 height:25px;
 background-color: #a78b03;
 width: 25px;
 z-index: 1;
 position:relative;
 border-radius: 40% 20% 50% 10%;
 margin-left:155px;
}


#zebra_5{
  top:125px;
 height:25px;
 background-color: #a78b03;
 width: 25px;
 z-index: 1;
 position:relative;
 border-radius: 40% 20% 50% 10%;
 margin-left:5px;
}


.hat{
  background-color: #220124;
  height:95px;
  width:72px;
  z-index: 3;
  position: relative;
  top:110px;
  left:64px;
  border-radius: 40% 40% 10% 10%;

}


.star_1{
  background-color: yellow;
  height:25px;
  width:25px;
  position: absolute;
  z-index: 4;
  top:144px;
  left:88px;
  transform:rotate(128deg);
}

.star_2{
  background-color: yellow;
  height:25px;
  width:25px;
  position: absolute;
  z-index: 5;
  top:144px;
  left:88px;
  transform:rotate(84deg);
}


#zebra_head_1{
  position: relative;
background-color: grey;
width: 196px;
height:8px;
z-index: 3;
top:80px;
left:3px;
}


#zebra_head_2{
  position: relative;
background-color: grey;
width: 196px;
height:8px;
z-index: 3;
top:83px;
left:3px;
}

#zebra_head_3{
  position: relative;
background-color: grey;
width: 196px;
height:8px;
z-index: 3;
top:85px;
left:3px;
}

animations.css

/*Move Eyes*/

.movingEyes{
   animation: moveEyes 3s infinite;
}

@keyframes moveEyes {
   0% {
     left: 5px;
   }

   30% {
     left: 10px;
   }

   60% {
     left: 15px;
   }

   90% {
     left: 20px;
   }

   100% {
     left: 25px;
   }
}

/*Move Mouth*/
.movingMouth{
   animation: moveMouth 3s infinite;
}


@keyframes moveMouth {
   0% {
     height: 10px;
   }

   25% {
      height: 15px;
   }

   50% {
      height: 20px;
   }

   75% {
      height: 25px;
   }

   100% {
      height: 30px;
   }
}


/*Move Tail*/
.movingTail{
  animation: moveTail 1s infinite;
}

@keyframes moveTail {
  0%{
    transform: rotate(10deg);
  }

  25%{
    transform: rotate(15deg);
  }

  50%{
    transform: rotate(25deg);
  }

  75%{
    transform: rotate(30deg);
  }

  100%{
    transform: rotate(35deg);
  }
}

/*Ear Left*/
.movingEarLeft{
  animation: moveEarLeft 1s infinite;
}


@keyframes moveEarLeft {
  0%{
    transform: scale(-1, 1) rotate(7deg);
  }

  25%{
    transform: scale(-1, 1) rotate(12deg);
  }
  50%{
    transform: scale(-1, 1) rotate(17deg);
  }
  75%{
    transform: scale(-1, 1) rotate(22deg);
  }
  100%{
    transform: scale(-1, 1) rotate(27deg);
  }
}

colors.js

 



var colors = {
00:'-webkit-gradient(linear, left top, left bottom, color-stop(0%, #f1ef72), color-stop(100%,#f1cd72 ))',
01: '-webkit-gradient(linear, left top, left bottom, color-stop(0%, #f1ef72), color-stop(100%,#f1cd72 ))',
02: '-webkit-gradient(linear, left top, left bottom, color-stop(0%, #f1ef72), color-stop(100%,#f1cd72 ))',
03: '-webkit-gradient(linear, left top, left bottom, color-stop(0%, #f1ef72), color-stop(100%,#f1cd72 ))',
04: '-webkit-gradient(linear, left top, left bottom, color-stop(0%, #f1ef72), color-stop(100%,#f1cd72 ))',
05: '-webkit-gradient(linear, left top, left bottom, color-stop(0%, #f1ef72), color-stop(100%,#f1cd72 ))',
06: '-webkit-gradient(linear, left top, left bottom, color-stop(0%, #f1ef72), color-stop(100%,#f1cd72 ))',
07: '-webkit-gradient(linear, left top, left bottom, color-stop(0%, #f1ef72), color-stop(100%,#f1cd72 ))',
08: '-webkit-gradient(linear, left top, left bottom, color-stop(0%, #f1ef72), color-stop(100%,#f1cd72 ))',
09: '-webkit-gradient(linear, left top, left bottom, color-stop(0%, #f1ef72), color-stop(100%,#f1cd72 ))',
10:'-webkit-gradient(linear, left top, left bottom, color-stop(0%, #f1ef72), color-stop(100%, #f1cd72 ))',
11: '-webkit-gradient(linear, left top, left bottom, color-stop(0%, #f1ef72), color-stop(100%,#f1cd72 ))',
12: '-webkit-gradient(linear, left top, left bottom, color-stop(0%, #f1ef72), color-stop(100%,#f1cd72 ))',
13: '-webkit-gradient(linear, left top, left bottom, color-stop(0%, #f1ef72), color-stop(100%,#f1cd72 ))',
14: '-webkit-gradient(linear, left top, left bottom, color-stop(0%, #f1ef72), color-stop(100%,#f1cd72 ))',
15:  '-webkit-gradient(linear, left top, left bottom, color-stop(0%, #f1ef72), color-stop(100%,#f19172 ))',
16:  '-webkit-gradient(linear, left top, left bottom, color-stop(0%, #f1ef72), color-stop(100%,#f19172 ))',
17:  '-webkit-gradient(linear, left top, left bottom, color-stop(0%, #f1ef72), color-stop(100%,#f19172 ))',
18:  '-webkit-gradient(linear, left top, left bottom, color-stop(0%, #f1ef72), color-stop(100%,#f19172 ))',

19: '-webkit-gradient(linear, left top, left bottom, color-stop(0%, #f19172), color-stop(100%, #a7cf32))',
20: '-webkit-gradient(linear, left top, left bottom, color-stop(0%, #f19172), color-stop(100%, #a7cf32))',
21: '-webkit-gradient(linear, left top, left bottom, color-stop(0%, #f19172), color-stop(100%, #a7cf32))',
22: '-webkit-gradient(linear, left top, left bottom, color-stop(0%, #f19172), color-stop(100%, #a7cf32))',
23:  '-webkit-gradient(linear, left top, left bottom, color-stop(0%, #f19172), color-stop(100%, #a7cf32))',

24:  '-webkit-gradient(linear, left top, left bottom, color-stop(0%, #c5f638), color-stop(100%, #46f638 ))',
25:  '-webkit-gradient(linear, left top, left bottom, color-stop(0%, #c5f638), color-stop(100%, #46f638 ))',
26: '-webkit-gradient(linear, left top, left bottom, color-stop(0%, #c5f638), color-stop(100%, #46f638 ))',
27:  '-webkit-gradient(linear, left top, left bottom, color-stop(0%, #c5f638), color-stop(100%, #46f638 ))',
28:  '-webkit-gradient(linear, left top, left bottom, color-stop(0%, #c5f638), color-stop(100%, #46f638 ))',

29: '-webkit-gradient(linear, left top, left bottom, color-stop(0%, #46f638), color-stop(100%, #38f6ea))',
30: '-webkit-gradient(linear, left top, left bottom, color-stop(0%, #46f638), color-stop(100%, #38f6ea))',
31: '-webkit-gradient(linear, left top, left bottom, color-stop(0%, #46f638), color-stop(100%, #38f6ea))',
32: '-webkit-gradient(linear, left top, left bottom, color-stop(0%, #46f638), color-stop(100%, #38f6ea))',
33: '-webkit-gradient(linear, left top, left bottom, color-stop(0%, #46f638), color-stop(100%, #38f6ea))',
34: '-webkit-gradient(linear, left top, left bottom, color-stop(0%, #46f638), color-stop(100%, #38f6ea))',
35: '-webkit-gradient(linear, left top, left bottom, color-stop(0%, #46f638), color-stop(100%, #38f6ea))',

36: '-webkit-gradient(linear, left top, left bottom, color-stop(0%, #46f638), color-stop(100%, #38bcf6))',
37:  '-webkit-gradient(linear, left top, left bottom, color-stop(0%, #46f638), color-stop(100%, #38bcf6))',
38: '-webkit-gradient(linear, left top, left bottom, color-stop(0%, #46f638), color-stop(100%, #38bcf6))',
39: '-webkit-gradient(linear, left top, left bottom, color-stop(0%, #46f638), color-stop(100%, #38bcf6))',
40: '-webkit-gradient(linear, left top, left bottom, color-stop(0%, #46f638), color-stop(100%, #38bcf6))',
41: '-webkit-gradient(linear, left top, left bottom, color-stop(0%, #46f638), color-stop(100%, #38bcf6))',
42: '-webkit-gradient(linear, left top, left bottom, color-stop(0%, #46f638), color-stop(100%, #38bcf6))',

43:  '-webkit-gradient(linear, left top, left bottom, color-stop(0%, #38bcf6), color-stop(100%, #087cb0))',
44:  '-webkit-gradient(linear, left top, left bottom, color-stop(0%, #38bcf6), color-stop(100%, #087cb0))',
45:  '-webkit-gradient(linear, left top, left bottom, color-stop(0%, #38bcf6), color-stop(100%, #087cb0))',
46:  '-webkit-gradient(linear, left top, left bottom, color-stop(0%, #38bcf6), color-stop(100%, #087cb0))',
47:  '-webkit-gradient(linear, left top, left bottom, color-stop(0%, #38bcf6), color-stop(100%, #087cb0))',
48:  '-webkit-gradient(linear, left top, left bottom, color-stop(0%, #38bcf6), color-stop(100%, #087cb0))',
49:  '-webkit-gradient(linear, left top, left bottom, color-stop(0%, #38bcf6), color-stop(100%, #087cb0))',
50:  '-webkit-gradient(linear, left top, left bottom, color-stop(0%, #38bcf6), color-stop(100%,#087cb0))',

51: '-webkit-gradient(linear, left top, left bottom, color-stop(0%,#087cb0 ), color-stop(100%, #014766))',
52: '-webkit-gradient(linear, left top, left bottom, color-stop(0%,#087cb0 ), color-stop(100%, #014766))',
53: '-webkit-gradient(linear, left top, left bottom, color-stop(0%,#087cb0 ), color-stop(100%, #014766))',
54:  '-webkit-gradient(linear, left top, left bottom, color-stop(0%,#087cb0 ), color-stop(100%, #014766))',
55: '-webkit-gradient(linear, left top, left bottom, color-stop(0%,#087cb0 ), color-stop(100%, #014766))',
56: '-webkit-gradient(linear, left top, left bottom, color-stop(0%,#087cb0 ), color-stop(100%, #014766))',
57: '-webkit-gradient(linear, left top, left bottom, color-stop(0%,#087cb0 ), color-stop(100%, #014766))',
58: '-webkit-gradient(linear, left top, left bottom, color-stop(0%,#087cb0 ), color-stop(100%, #014766))',
59: '-webkit-gradient(linear, left top, left bottom, color-stop(0%,#087cb0 ), color-stop(100%, #014766))',
60: '-webkit-gradient(linear, left top, left bottom, color-stop(0%,#087cb0 ), color-stop(100%, #014766))',

61: '-webkit-gradient(linear, left top, left bottom, color-stop(0%,#014766 ), color-stop(100%, #fab4a1))',
62: '-webkit-gradient(linear, left top, left bottom, color-stop(0%,#014766 ), color-stop(100%, #fab4a1))',
63: '-webkit-gradient(linear, left top, left bottom, color-stop(0%,#014766 ), color-stop(100%, #fab4a1))',
64: '-webkit-gradient(linear, left top, left bottom, color-stop(0%,#014766 ), color-stop(100%, #fab4a1))',
65: '-webkit-gradient(linear, left top, left bottom, color-stop(0%,#014766 ), color-stop(100%, #fab4a1))',
66: '-webkit-gradient(linear, left top, left bottom, color-stop(0%,#014766 ), color-stop(100%, #fab4a1))',
67: '-webkit-gradient(linear, left top, left bottom, color-stop(0%,#014766 ), color-stop(100%, #fab4a1))',
68: '-webkit-gradient(linear, left top, left bottom, color-stop(0%,#014766 ), color-stop(100%, #fab4a1))',
69: '-webkit-gradient(linear, left top, left bottom, color-stop(0%,#014766 ), color-stop(100%, #fab4a1))',
70: '-webkit-gradient(linear, left top, left bottom, color-stop(0%,#014766 ), color-stop(100%, #fab4a1))',

71: '-webkit-gradient(linear, left top, left bottom, color-stop(0%,#fab4a1 ), color-stop(100%, #f93f0c))',
72: '-webkit-gradient(linear, left top, left bottom, color-stop(0%,#fab4a1 ), color-stop(100%, #f93f0c))',
73: '-webkit-gradient(linear, left top, left bottom, color-stop(0%,#fab4a1 ), color-stop(100%, #f93f0c))',
74: '-webkit-gradient(linear, left top, left bottom, color-stop(0%,#fab4a1 ), color-stop(100%, #f93f0c))',
75: '-webkit-gradient(linear, left top, left bottom, color-stop(0%,#fab4a1 ), color-stop(100%, #f93f0c))',
76: '-webkit-gradient(linear, left top, left bottom, color-stop(0%,#fab4a1 ), color-stop(100%, #f93f0c))',
77: '-webkit-gradient(linear, left top, left bottom, color-stop(0%,#fab4a1 ), color-stop(100%, #f93f0c))',
78: '-webkit-gradient(linear, left top, left bottom, color-stop(0%,#fab4a1 ), color-stop(100%, #f93f0c))',
79:'-webkit-gradient(linear, left top, left bottom, color-stop(0%,#fab4a1 ), color-stop(100%, #f93f0c))',
80: '-webkit-gradient(linear, left top, left bottom, color-stop(0%,#fab4a1 ), color-stop(100%, #f93f0c))',

81: '-webkit-gradient(linear, left top, left bottom, color-stop(0%, #f93f0c ), color-stop(100%, #8b2206))',
82: '-webkit-gradient(linear, left top, left bottom, color-stop(0%, #f93f0c ), color-stop(100%, #8b2206))',
83: '-webkit-gradient(linear, left top, left bottom, color-stop(0%, #f93f0c ), color-stop(100%, #8b2206))',
84: '-webkit-gradient(linear, left top, left bottom, color-stop(0%, #f93f0c ), color-stop(100%, #8b2206))',
85: '-webkit-gradient(linear, left top, left bottom, color-stop(0%, #f93f0c ), color-stop(100%, #8b2206))',
86: '-webkit-gradient(linear, left top, left bottom, color-stop(0%, #f93f0c ), color-stop(100%, #8b2206))',
87: '-webkit-gradient(linear, left top, left bottom, color-stop(0%, #f93f0c ), color-stop(100%, #8b2206))',
88: '-webkit-gradient(linear, left top, left bottom, color-stop(0%, #f93f0c ), color-stop(100%, #8b2206))',
89: '-webkit-gradient(linear, left top, left bottom, color-stop(0%, #f93f0c ), color-stop(100%, #8b2206))',
90: '-webkit-gradient(linear, left top, left bottom, color-stop(0%, #f93f0c ), color-stop(100%, #8b2206))',

91:  '-webkit-gradient(linear, left top, left bottom, color-stop(0%, #8b2206), color-stop(100%, #3e1003))',
92: '-webkit-gradient(linear, left top, left bottom, color-stop(0%, #8b2206), color-stop(100%, #3e1003))',
93: '-webkit-gradient(linear, left top, left bottom, color-stop(0%, #8b2206), color-stop(100%, #3e1003))',
94: '-webkit-gradient(linear, left top, left bottom, color-stop(0%, #8b2206), color-stop(100%, #3e1003))',
95: '-webkit-gradient(linear, left top, left bottom, color-stop(0%, #8b2206), color-stop(100%, #3e1003))',
96: '-webkit-gradient(linear, left top, left bottom, color-stop(0%, #8b2206), color-stop(100%, #3e1003))',
97: '-webkit-gradient(linear, left top, left bottom, color-stop(0%, #8b2206), color-stop(100%, #3e1003))',
98: '-webkit-gradient(linear, left top, left bottom, color-stop(0%, #8b2206), color-stop(100%, #3e1003))',
}


var defaultDNA = {
    "headcolor" : 10,
    "mouthColor" : 60,
    "eyesColor" : 38,
    "earsColor" : 30,
    //Cattributes
    "eyesShape" : 1,
    "decorationPattern" : 1,
    "decorationMidcolor" : 13,
    "decorationSidescolor" : 13,
    "animation" :  1,
    "lastNum" :  1
    }


    // when page load
    $( document ).ready(function() {
        $('#dnabody').html(defaultDNA.headColor);
        $('#dnamouth').html(defaultDNA.mouthColor);
        $('#dnaeyes').html(defaultDNA.eyesColor);
        $('#dnaear').html(defaultDNA.earsColor);

     $('#dnashape').html(defaultDNA.eyesShape)
       $('#dnadecoration').html(defaultDNA.decorationPattern)
     $('#dnadecorationMid').html(defaultDNA.decorationMidcolor)
      $('#dnadecorationSides').html(defaultDNA.decorationSidescolor)
       $('#dnaanimation').html(defaultDNA.animation)
        $('#dnaspecial').html(defaultDNA.lastNum)

       renderCat(defaultDNA)
    });


    function renderCat(dna){
        headColor(colors[dna.headcolor],dna.headcolor);

        earsColor(colors[dna.earsColor],dna.earsColor);

        eyesColor(colors[dna.eyesColor],dna.eyesColor);

       mouthColor(colors[dna.mouthColor],dna.mouthColor);
}



$('#head_cat_color').change(()=>{

    var numRange = $('#head_cat_color').val();
    // $('#head_cat').css('background', colors[numRange]) ;
    // $('.body_cat').css('background', colors[numRange]) ;

     headColor( colors[numRange],numRange);

   console.log(numRange);
})


$('#ears_cat_color').change(()=>{

    var numRange = $('#ears_cat_color').val();
    // $('#head_cat').css('background', colors[numRange]) ;
    // $('.body_cat').css('background', colors[numRange]) ;

     earsColor( colors[numRange],numRange);


})


$('#eyes_cat_color').change(()=>{

    var numRange = $('#eyes_cat_color').val();
    // $('#head_cat').css('background', colors[numRange]) ;
    // $('.body_cat').css('background', colors[numRange]) ;

     eyesColor( colors[numRange],numRange);


})


$('#mouth_cat_color').change(()=>{

    var numRange = $('#mouth_cat_color').val();
    // $('#head_cat').css('background', colors[numRange]) ;
    // $('.body_cat').css('background', colors[numRange]) ;

    mouthColor( colors[numRange],numRange);


})



$('#eyes_shape').change(()=>{

    var shape = parseInt($('#eyes_shape').val());//between 1 & 7

    eyeVariation(shape);


})


$('#zebra_head_shape').change(()=>{

    var shape = parseInt($('#zebra_head_shape').val());//between 1 & 7

    zebraHeadVariation(shape);


})



$('#zebra_body_shape').change(()=>{

    var shape = parseInt($('#zebra_body_shape').val());//between 1 & 7

    zebraBodyVariation(shape);
 })


 $('#animations').change(()=>{

     var animationVal = parseInt($('#animations').val());//between 1 & 5

     animationVariation(animationVal);
  })


function headColor(color,code) {
    $('#head_cat, .body_cat').css('background',  color)  //This changes the color of the cat
  //  $('#headcode').html('code: '+code) //This updates text of the badge next to the slider
   $('#dnabody').html(code) //This updates the body color part of the DNA that is displayed below the cat

}


function earsColor(color,code) {
    $('.ear').css('background',  color)  //This changes the color of the cat
  //  $('#headcode').html('code: '+code) //This updates text of the badge next to the slider
   $('#dnaear').html(code) //This updates the body color part of the DNA that is displayed below the cat

}



function eyesColor(color,code) {
    $('.eye ').css('background',  color)  //This changes the color of the cat
  //  $('#headcode').html('code: '+code) //This updates text of the badge next to the slider
   $('#dnaeyes').html(code) //This updates the body color part of the DNA that is displayed below the cat

}


function mouthColor(color,code) {
    $('.mouth, .tail ').css('background',  color)  //This changes the color of the cat
  //  $('#headcode').html('code: '+code) //This updates text of the badge next to the slider
   $('#dnamouth').html(code) //This updates the body color part of the DNA that is displayed below the cat

}


function eyeVariation(shape){

   $('#dnashape').html(shape);

   switch(shape){
     case 1 :
       normalEyes();
       console.log(shape);
       $('#eyeName').html("Basic");
       break;
    case 2 :
          normalEyes();//reset eyes shape
         $('#eyeName').html("Chill");
         return eyesType1();
         break;
      default:
        normalEyes();//reset eyes shape
        $('#eyeName').html("Look Down");
        return eyesType(shape);
        break;
      }
 }



 function zebraHeadVariation(shape){

    $('#dnadecoration').html(shape);

         return decorationZebraType(shape);


  }


function normalEyes(){
  $('.eye').css("border","none");
}


function eyesType(height){
  $('.eye').css("border-top",height/5 +"em solid");
}

function eyesType1(){
  $('.eye').css("border-top","0.5em solid");
}


function eyesType2(){
  $('.eye').css("border-top","1.25em solid");
}

//zebra head  decoration
function decorationZebraType(percent){
  $('#zebra_head_1').css("border-radius",percent*10+"%");
  $('#zebra_head_2').css("border-radius",percent*10+"%");
  $('#zebra_head_3').css("border-radius",percent*10+"%");
}

//body decoration
function zebraBodyVariation(shape){

     $('#dnadecorationMid').html(shape);
     $('#dnadecorationSides').html(shape);

     for(num=0; num<7; num++){
       $('#zebra_'+num).css("transform","rotate("+shape+"deg)");

     }
}


function  animationVariation(animationVal){

  $('#dnaanimation').html(animationVal);

  switch(animationVal){
    case 1 :
       resetAnimation();
      animationType1();
      $('#animationName').html("Eyes Animation");
      break;
   case 2 :
        resetAnimation();//reset eyes shape
        $('#animationName').html("Mouth Animation");
       return animationType2();
        break;
  case 3 :
       resetAnimation();//reset eyes shape
        $('#animationName').html("Tail Animation");
        return animationType3();
        break;
  case 4 :
         resetAnimation();//reset eyes shape
        $('#animationName').html("Ears Animation");
        return animationType4();
        break;
   default:
       $('#animationName').html("Full Animation");
       return fullAnimationType5();
       break;

      }
}



function resetAnimation(){
  $( ".pupils" ).removeClass( "movingEyes" );
  $( ".mouth" ).removeClass( "movingMouth" );
  $( ".tail" ).removeClass( "movingTail" );
  $( ".left_ear" ).removeClass( "movingEarLeft" );
}


function animationType1(){
  $(".pupils").addClass("movingEyes");

}



function animationType2(){
  $(".mouth").addClass("movingMouth");

}


function animationType3(){
  $(".tail").addClass("movingTail");
}


function animationType4(){
  $(".left_ear").addClass("movingEarLeft");
}

function fullAnimationType5(){
  animationType1();
  animationType2();
  animationType3();
  animationType4();
}

[jrobbins]

Index

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Jon's kitties </title>
  <script type="text/javascript" src="assets/js/jquery-3.4.1.js"></script>
  <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
  <script src="assets/bootstrap/js/popper.js"></script>
  <script src="assets/bootstrap/js/bootstrap.min.js"></script>

  <link rel="stylesheet" href="assets/css/animations.css">
  <link rel="stylesheet" href="assets/css/mystyle.css">
  <link rel="stylesheet" href="assets/css/cats.css">
  <link rel="stylesheet" href="assets/css/colors.css">
  <link rel="stylesheet" href="assets/css/factory.css">
  <link rel="stylesheet" href="assets/css/frontend.css">
  
</head>
  <body>
    <div class="container p-5" style="margin-top: 12vh;margin-bottom: 10vh;">
        <div align="center">
        <h1 class="c-white">Kitties-Factory</h1>
        <p class="c-white">Create your custom Kitty</p>
    </div>
        <div class="row">
            <div class="col-lg-4 catBox m-2 light-b-shadow">
                <div class="cat">
                    <div class="cat__ear">
                        <div id="leftEar" class="cat__ear--left">
                            <div class="cat__ear--left-inside"></div>
                        </div>
                        <div id="rightEar" class="cat__ear--right">
                            <div class="cat__ear--right-inside"></div>
                        </div>
                    </div>

                    <div id="head" class="cat__head">
                        <div id="midDot" class="cat__head-dots">
                            <div id="leftDot" class="cat__head-dots_first"></div>
                            <div id="rightDot" class="cat__head-dots_second"></div>
                        </div>
                        <div class="cat__eye">
                            <div class="cat__eye--left">
                                <span class="pupil-left"></span>
                            </div>
                            <div class="cat__eye--right">
                                <span class="pupil-right"></span>
                            </div>
                        </div>
                        <div class="cat__nose"></div>

                        <div class="cat__mouth-contour"></div>
                        <div class="cat__mouth-left"></div>
                        <div class="cat__mouth-right"></div>

                        <div class="cat__whiskers-left"></div>
                        <div class="cat__whiskers-right"></div>
                    </div>

                    <div class="cat__body">

                        <div class="cat__chest"></div>

                        <div class="cat__chest_inner"></div>


                        <div class="cat__paw-left"></div>
                        <div class="cat__paw-left_inner"></div>


                        <div class="cat__paw-right"></div>
                        <div class="cat__paw-right_inner"></div>


                        <div id="tail" class="cat__tail"></div>
                    </div>
                </div>
                <br>
                <div class="dnaDiv" id="catDNA">
                    <b>
                        DNA:
                        <!-- Colors -->
                         <span id="dnabody"></span>
                         <span id="dnamouth"></span>
                         <span id="dnaeyes"></span>
                         <span id="dnaears"></span>
                        
                         <!-- Cattributes -->
                         <span id="dnashape"></span>
                         <span id="dnadecoration"></span>
                         <span id="dnadecorationMid"></span>
                         <span id="dnadecorationSides"></span>
                         <span id="dnaanimation"></span>
                         <span id="dnaspecial"></span>
                    </b>
                </div>
            </div>
            <div class="col-lg-7 cattributes m-2 light-b-shadow">

<!-- Cat colors -->
<div id="catColors">
                <div class="form-group">
                    <label for="formControlRange"><b>Head and body</b><span class="badge badge-dark ml-2" id="headcode"></span></label>
                    <input type="range" min="10" max="98" class="form-control-range" id="bodycolor">
                </div>
                    <!--Slider-->
                <div class="form-group">
                    <label for="formControlRange"><b>Mouth</b><span class="badge badge-dark ml-2" id="mouthcode"></span></label>
                    <input type="range" min="10" max="98" class="form-control-range" id="mouthcolor">
                </div>
                    <!--Slider-->
                <div class="form-group">
                    <label for="formControlRange"><b>Eye Color</b><span class="badge badge-dark ml-2" id="eyecode"></span></label>
                    <input type="range" min="10" max="98" class="form-control-range" id="eyecolor">
                </div>
                    <!--Slider-->
                <div class="form-group">
                    <label for="formControlRange"><b>Ears, Feet, and Tail</b><span class="badge badge-dark ml-2" id="earcode"></span></label>
                    <input type="range" min="10" max="98" class="form-control-range" id="earcolor">
                </div>
                    <!--Slider Eye Shape-->
                <div class="form-group">
                    <label for="formControlRange"><b>Eye Shape</b><span class="badge badge-dark ml-2" id="eyeName"></span></label>
                    <input type="range" min="1" max="7" class="form-control-range" id="eyeshape">
                </div>
                <!--Slider Decoration Shape-->
                <div class="form-group">
                    <label for="formControlRange"><b>Decoration Shape</b><span class="badge badge-dark ml-2" id="decorationName"></span></label>
                    <input type="range" min="1" max="6" class="form-control-range" id="decorationshape">
                </div>
                <!--Slider Middle Decoration Color-->
                <div class="form-group">
                    <label for="formControlRange"><b>Middle Decoration Color</b><span class="badge badge-dark ml-2" id="decorationMid"></span></label>
                    <input type="range" min="10" max="98" class="form-control-range" id="decorationmid">
                </div>
                <!--Slider Side Decoration Color-->
                <div class="form-group">
                    <label for="formControlRange"><b>Side Decoration Color</b><span class="badge badge-dark ml-2" id="decorationSides"></span></label>
                    <input type="range" min="10" max="98" class="form-control-range" id="decorationsides">
                </div>
                <!--Slider Animation-->
                <div class="form-group">
                    <label for="formControlRange"><b>Animation</b><span class="badge badge-dark ml-2" id="animationName"></span></label>
                    <input type="range" min="1" max="6" class="form-control-range" id="animation">
                </div>
            </div>

            </div>

            </div>
            <br>

        </div>



    </div>
    <footer align="left">
        <p>My Kitty Clone 2022</p>
    </footer>

  </body>
  <script src="assets/js/colors.js"></script>
  <script src="assets/js/catSettings.js"></script>
  <script src="assets/js/catFactory.js"></script>

</html>

Animations

.movingHead{
    animation: moveHead 5s infinite;
}

@keyframes moveHead{
    0% {
        transform: rotate(0deg);
    }
    30% {
        transform: rotate(5deg);
    }
    70% {
        transform: rotate(-5deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

/*move nose*/
.tiltHead{
    animation: tiltHead 6s infinite;
}

@keyframes tiltHead{
    0% {
        transform: rotate(0deg);
    }
    15% {
        transform: rotate(9deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

/*move tail*/
.movingTail {
    animation: moveTail 2s infinite;       
}

@keyframes moveTail {
    
    0% {
        transform: rotate(-45deg);
    }
     50% {
        transform: rotate(-30deg);
    }
    100% {
        transform: rotate(-45deg);
    }
}

/*move ears*/
.movingEarsRight {
    animation: moveEarsRight 3s infinite;       
}

.movingEarsLeft {
    animation: moveEarsLeft 3s infinite;       
}

@keyframes moveEarsLeft {
    0%, 50% {
        transform: scale(-1, 1) rotate(170deg);
    }

    51%, 55% {
        transform: scale(-1, 1) rotate(165deg);
    }

    56%, 89% {
        transform: scale(-1, 1) rotate(170deg);
    }    

    90%, 98% {
        transform: scale(-1, 1) rotate(180deg);
    } 
    
    100% {
        transform: scale(-1, 1) rotate(170deg);
    } 
    
  }

  @keyframes moveEarsRight {
    0%, 50% {
        transform: rotate(170deg);
    }

    51%, 55% {
        transform: rotate(175deg);
    }

    56%, 89% {
        transform: rotate(170deg);
    }    

    90%, 98% {
        transform: rotate(165deg);
    } 
    
    100% {
        transform: rotate(170deg);
    } 
    
  }

Cat Settings

var colors = Object.values(allColors())

var defaultDNA = {
    "headcolor" : 10,
    "mouthColor" : 13,
    "eyesColor" : 96,
    "earsColor" : 10,
    //Cattributes
    "eyesShape" : 1,
    "decorationPattern" : 1,
    "decorationMidcolor" : 13,
    "decorationSidescolor" : 13,
    "animation" :  1,
    "lastNum" :  1
    }

// when page load
$( document ).ready(function() {
  $('#dnabody').html(defaultDNA.headColor);
  $('#dnamouth').html(defaultDNA.mouthColor);
  $('#dnaeyes').html(defaultDNA.eyesColor);
  $('#dnaears').html(defaultDNA.earsColor);
    
   $('#dnashape').html(defaultDNA.eyesShape);
   $('#dnadecoration').html(defaultDNA.decorationPattern);
   $('#dnadecorationMid').html(defaultDNA.decorationMidcolor);
   $('#dnadecorationSides').html(defaultDNA.decorationSidescolor);
   $('#dnaanimation').html(defaultDNA.animation);
   $('#dnaspecial').html(defaultDNA.lastNum);

  renderCat(defaultDNA)
});

function getDna(){
    var dna = ''
    dna += $('#dnabody').html()
    dna += $('#dnamouth').html()
    dna += $('#dnaeyes').html()
    dna += $('#dnaears').html()
    dna += $('#dnashape').html()
    dna += $('#dnadecoration').html()
    dna += $('#dnadecorationMid').html()
    dna += $('#dnadecorationSides').html()
    dna += $('#dnaanimation').html()
    dna += $('#dnaspecial').html()

    return parseInt(dna)
}

function renderCat(dna){
    headColor(colors[dna.headcolor],dna.headcolor)
    $('#bodycolor').val(dna.headcolor)
    mouthColor(colors[dna.mouthColor],dna.mouthColor)
    $('#mouthcolor').val(dna.mouthColor)
    eyeColor(colors[dna.eyesColor],dna.eyesColor)
    $('#eyecolor').val(dna.eyesColor)
    earColor(colors[dna.earsColor],dna.earsColor)
    $('#earcolor').val(dna.earsColor)
    eyeVariation(dna.eyesShape)
    $('#eyeshape').val(dna.eyesShape)
    decorationVariation(dna.decorationPattern)
    $('#decorationshape').val(dna.decorationPattern)
    mdecorationColor(colors[dna.decorationMidcolor],dna.decorationMidcolor)
    $('#decorationmid').val(dna.decorationMidcolor)
    sdecorationColor(colors[dna.decorationSidescolor],dna.decorationSidescolor)
    $('#decorationsides').val(dna.decorationSidescolor)
    animationVariation(dna.animation)
    $('#animation').val(dna.animation)
}

// Changing cat colors
$('#bodycolor').change(()=>{
    var colorVal = $('#bodycolor').val()
    headColor(colors[colorVal],colorVal)
})

// Changing mouth colors
$('#mouthcolor').change(()=>{
  var colorVal = $('#mouthcolor').val()
  mouthColor(colors[colorVal],colorVal)
})

// Changing eye colors
$('#eyecolor').change(()=>{
  var colorVal = $('#eyecolor').val()
  eyeColor(colors[colorVal],colorVal)
})

// Changing ear colors
$('#earcolor').change(()=>{
  var colorVal = $('#earcolor').val()
  earColor(colors[colorVal],colorVal)
})

// Changing eye shape
$('#eyeshape').change(()=>{
  var shape = parseInt($('#eyeshape').val())
  eyeVariation(shape)
})

// Changing decoration shape
$('#decorationshape').change(()=>{
  var shape = parseInt($('#decorationshape').val())
  decorationVariation(shape)
})

// Changing mid decoration colors
$('#decorationmid').change(()=>{
  var colorVal = $('#decorationmid').val()
  mdecorationColor(colors[colorVal],colorVal)
})

// Changing side decoration colors
$('#decorationsides').change(()=>{
  var colorVal = $('#decorationsides').val()
  sdecorationColor(colors[colorVal],colorVal)
})

// Changing animation
$('#animation').change(()=>{
  var animationVal = parseInt($('#animation').val())
  animationVariation(animationVal)
})

Cat Factory

//Random color
function getColor() {
    var randomColor = Math.floor(Math.random() * 16777215).toString(16);
    return randomColor
}

function genColors(){
    var colors = []
    for(var i = 10; i < 99; i ++){
      var color = getColor()
      colors[i] = color
    }
    return colors
}

//This function code needs to modified so that it works with Your cat code.
function headColor(color,code) {
    $('.cat__head, .cat__chest').css('background', '#' + color)  //This changes the color of the cat
    $('#headcode').html('code: '+code) //This updates text of the badge next to the slider
    $('#dnabody').html(code) //This updates the body color part of the DNA that is displayed below the cat
}

function mouthColor(color,code) {
    $('.cat__mouth-contour, .cat__chest_inner').css('background', '#' + color)  //This changes the color of the cat
    $('#mouthcode').html('code: '+code) //This updates text of the badge next to the slider
    $('#dnamouth').html(code) //This updates the body color part of the DNA that is displayed below the cat
}

function eyeColor(color,code) {
    $('.pupil-left, .pupil-right').css('background', '#' + color)  //This changes the color of the cat
    $('#eyecode').html('code: '+code) //This updates text of the badge next to the slider
    $('#dnaeyes').html(code) //This updates the body color part of the DNA that is displayed below the cat
}

function earColor(color,code) {
    $('.cat__ear--left, .cat__ear--right, .cat__paw-left, .cat__paw-left_inner, .cat__paw-right, .cat__paw-right_inner, .cat__tail').css('background', '#' + color)  //This changes the color of the cat
    $('#earcode').html('code: '+code) //This updates text of the badge next to the slider
    $('#dnaears').html(code) //This updates the body color part of the DNA that is displayed below the cat
}

function mdecorationColor(color,code) {
    $('.cat__head-dots').css('background', '#' + color)  //This changes the color of the cat
    $('#decorationMid').html('code: '+code) //This updates text of the badge next to the slider
    $('#dnadecorationMid').html(code) //This updates the body color part of the DNA that is displayed below the cat
}

function sdecorationColor(color,code) {
    $('.cat__head-dots_first, .cat__head-dots_second').css('background', '#' + color)  //This changes the color of the cat
    $('#decorationSides').html('code: '+code) //This updates text of the badge next to the slider
    $('#dnadecorationSides').html(code) //This updates the body color part of the DNA that is displayed below the cat
}


//###################################################
//Functions below will be used later on in the project
//###################################################
function eyeVariation(num) {

    $('#dnashape').html(num)
    switch (num) {
        case 1:
            normalEyes()
            $('#eyeName').html('Basic')
            break
        case 2:
            normalEyes()
            $('#eyeName').html('Chill')
            eyesType1()
            break
        case 3:
            normalEyes()
            $('#eyeName').html('Look Up')
            eyesType2()
            break
        case 4:
            normalEyes()
            $('#eyeName').html('Zombie Eyes')
            eyesType3()
            break
        case 5:
            normalEyes()
            $('#eyeName').html('Sad Eyes')
            eyesType4()
            break
        case 6:
            normalEyes()
            $('#eyeName').html('???')
            eyesType5()
            break
        case 7:
            normalEyes()
            $('#eyeName').html('Look Left')
            eyesType6()
            break
    }
}

function decorationVariation(num) {
    $('#dnadecoration').html(num)
    switch (num) {
        case 1:
            $('#decorationName').html('Basic')
            normaldecoration()
            break
        case 2:
            normaldecoration()
            $('#decorationName').html('Tilted')
            decoration1()
            break
        case 3:
            normaldecoration()
            $('#decorationName').html('Only Middle')
            decoration2()
            break
        case 4:
            normaldecoration()
            $('#decorationName').html('Short')
            decoration3()
            break
        case 5:
            normaldecoration()
            $('#decorationName').html('Missing Left')
            decoration4()
            break
        case 6:
            normaldecoration()
            $('#decorationName').html('Missing Right')
            decoration5()
            break    
    }
}

function animationVariation(num){
    $('#dnaanimation').html(num)
    switch (num) {
        case 1:
            $('#animationName').html('Head')
            animation1()
            break
        case 2:
            $('#animationName').html('Tail')
            animation2()
            break
        case 3:
            $('#animationName').html('Left Ear')
            animation3()
            break
        case 4:
             $('#animationName').html('Right Ear')
            animation4()
            break
        case 5:
             $('#animationName').html('Ears')
            animation5()
            break
        case 6:
             $('#animationName').html('Tilt Head')
            animation6()
            break
    }
}

async function resetAnimation(){
    $("#head").removeClass("movingHead")
    $('#leftEar').removeClass('movingEarsLeft')
    $('#rightEar').removeClass('movingEarsRight') 
    $('#tail').removeClass('movingTail')  
    $('#head').removeClass('tiltHead')
}

function animation1() {
    resetAnimation()
        $('#head').addClass('movingHead')   
}

function animation2() {
    resetAnimation()
    $('#tail').addClass('movingTail')   
}

async function animation3(){
    resetAnimation()
    $("#leftEar").addClass("movingEarsLeft")
}

async function animation4(){
    resetAnimation()
    $("#rightEar").addClass("movingEarsRight")
}

async function animation5(){
    resetAnimation()
    $("#leftEar").addClass("movingEarsLeft")
    $("#rightEar").addClass("movingEarsRight")
}

async function animation6(){
    resetAnimation()
    $("#head").addClass("tiltHead")
}

async function normalEyes() {
    await $('.cat__eye').find('span').css('border', 'none')
}

async function eyesType1() {
    await $('.cat__eye').find('span').css('border-top', '15px solid')
}

async function eyesType2() {
    await $('.cat__eye').find('span').css('border-bottom', '15px solid')
}

async function eyesType3() {
    await $('.cat__eye').find('span').css('border-top', '39px solid')
}

async function eyesType4() {
    await $('.cat__eye').find('span').css('border-left', '10px solid')
}

async function eyesType5() {
    await $('.cat__eye').find('span.pupil-left').css('border-top', '15px solid')
    await $('.cat__eye').find('span.pupil-right').css('border-bottom', '15px solid')
}

async function eyesType6() {
    await $('.cat__eye').find('span').css({"transform": "rotate(-25deg)"})
}

async function normaldecoration() {
    //Remove all style from other decorations
    //In this way we can also use normalDecoration() to reset the decoration style
    $('.cat__head-dots').css({ "transform": "rotate(0deg)", "height": "48px", "width": "14px", "top": "1px", "border-radius": "0 0 50% 50%" })
    $('.cat__head-dots_first').css({ "transform": "rotate(0deg)", "height": "35px", "width": "14px", "top": "1px", "border-radius": "50% 0 50% 50%" })
    $('.cat__head-dots_second').css({ "transform": "rotate(0deg)", "height": "35px", "width": "14px", "top": "1px", "border-radius": "0 50% 50% 50%" })
}

async function decoration1() {
    //Remove all style from other decorations
    //In this way we can also use normalDecoration() to reset the decoration style
    $('.cat__head-dots').css({ "transform": "rotate(0deg)", "height": "48px", "width": "14px", "top": "1px", "border-radius": "0 0 50% 50%" })
    $('.cat__head-dots_first').css({ "transform": "rotate(15deg)", "height": "35px", "width": "14px", "top": "1px", "border-radius": "50% 0 50% 50%" })
    $('.cat__head-dots_second').css({ "transform": "rotate(-15deg)", "height": "35px", "width": "14px", "top": "1px", "border-radius": "0 50% 50% 50%" })
}

async function decoration2() {
    //Remove all style from other decorations
    //In this way we can also use normalDecoration() to reset the decoration style
    $('.cat__head-dots').css({ "transform": "rotate(0deg)", "height": "48px", "width": "14px", "top": "1px", "border-radius": "0 0 50% 50%" })
    $('.cat__head-dots_first').css({ "transform": "rotate(0deg)", "height": "0px", "width": "0px", "top": "1px", "border-radius": "50% 0 50% 50%" })
    $('.cat__head-dots_second').css({ "transform": "rotate(0deg)", "height": "0px", "width": "0px", "top": "1px", "border-radius": "0 50% 50% 50%" })
}

async function decoration3() {
    $('.cat__head-dots').css({ "transform": "rotate(0deg)", "height": "24px", "width": "14px", "top": "1px", "border-radius": "0 0 50% 50%" })
    $('.cat__head-dots_first').css({ "transform": "rotate(0deg)", "height": "17px", "width": "14px", "top": "1px", "border-radius": "50% 0 50% 50%" })
    $('.cat__head-dots_second').css({ "transform": "rotate(0deg)", "height": "17px", "width": "14px", "top": "1px", "border-radius": "0 50% 50% 50%" })
}

async function decoration4() {
    $('.cat__head-dots').css({ "transform": "rotate(0deg)", "height": "48px", "width": "14px", "top": "1px", "border-radius": "0 0 50% 50%" })
    $('.cat__head-dots_first').css({ "transform": "rotate(0deg)", "height": "0px", "width": "14px", "top": "1px", "border-radius": "50% 0 50% 50%" })
    $('.cat__head-dots_second').css({ "transform": "rotate(0deg)", "height": "35px", "width": "14px", "top": "1px", "border-radius": "0 50% 50% 50%" })
}

async function decoration5() {
    $('.cat__head-dots').css({ "transform": "rotate(0deg)", "height": "48px", "width": "14px", "top": "1px", "border-radius": "0 0 50% 50%" })
    $('.cat__head-dots_first').css({ "transform": "rotate(0deg)", "height": "35px", "width": "14px", "top": "1px", "border-radius": "50% 0 50% 50%" })
    $('.cat__head-dots_second').css({ "transform": "rotate(0deg)", "height": "0px", "width": "14px", "top": "1px", "border-radius": "0 50% 50% 50%" })
}

[Hudsen]

My cat:

animations.css

.movingHead{
    animation: moveHead 5s;
    animation-iteration-count: 1;
}

.wagTail{
    animation: wagTail 3s infinite;
}

.foldEar{
    animation: foldEar 4s;
    animation-iteration-count: 2;
}

.headZoom{
    animation: headZoom 5s;
    animation-iteration-count: 1;
}

.headLower{
    animation: headLower 5s;
    animation-iteration-count: 1;
}

.startledEyes{
    animation: startledEyes 3s;
    animation-iteration-count: 1;
}

@keyframes moveHead {  
    0% {
        transform: rotate(0deg);
    }
    30% {
        transform: rotate(10deg);
    }
    60% {
        transform: rotate(10deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

@keyframes wagTail {
    0% {
        transform: rotate(0deg);
    }
    33% {
        transform: rotate(10deg);
    }
    66% {
        transform: rotate(-10deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

@keyframes foldEar {
    10% {
        transform: rotate(0deg);
    }
    30% {
        transform: rotate(45deg);
    }
    70%{
        transform: rotate(45deg);
    }
    90% {
        transform: rotate(0deg);
    }
}

@keyframes headZoom {
    10% {
        transform: scale(1);
    }
    35% {
        transform: scale(1.1);
    }
    70% {
        transform: scale(1.1);
    }
    90% {
        transform: scale(1);
    }
}

@keyframes headLower { 
    0% {
        top: -30px;
    }
    33% {
        top: 30px;
    }
    66% {
        top: 30px;
    }
    100% {
        top: -30px;
    }
}

@keyframes startledEyes {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.6);
    }
}

catFactory.js

//Random color
function getColor() {
    var randomColor = Math.floor(Math.random() * 16777215).toString(16);
    return randomColor
}

function genColors(){
    var colors = []
    for(var i = 10; i < 99; i ++){
      var color = getColor()
      colors[i] = color
    }
    return colors
}

//This function code needs to modified so that it works with Your cat code.
function headColor(color,code) {
    $('#head, .tail').css('background', '#' + color)  //This changes the color of the cat
    $('#headcode').html('code: '+code) //This updates text of the badge next to the slider
    $('#dnahead').html(code) //This updates the body color part of the DNA that is displayed below the cat
}

function earBodyColor(color,code){
    $('.ear, .body').css('background', '#' + color)  //This changes the color of the cat
    $('#ear_bodycode').html('code: '+code) //This updates text of the badge next to the slider
    $('#dnaearsandbody').html(code) //This updates the body color part of the DNA that is displayed below the cat
}

function pawsColor(color,code) {
    $('.leg').css('background', '#' + color)
    $('#pawscode').html('code: '+code) //This updates text of the badge next to the slider
    $('#dnapaws').html(code) //This updates the body color part of the DNA that is displayed below the cat
}

function eyesColor(color,code) {
    $('.pupils').css('background', '#' + color)  //This changes the color of the cat
    $('#eyecode').html('code: '+code) //This updates text of the badge next to the slider
    $('#dnaeyes').html(code) //This updates the body color part of the DNA that is displayed below the cat
}

function bigMarkingColor(color,code) {
    $('.head_mark').css('background', '#' + color)  //This changes the color of the cat
    $('#bigMarkingCode').html('code: '+code) //This updates text of the badge next to the slider
    $('#dnadecorationMid').html(code) //This updates the body color part of the DNA that is displayed below the cat
}

function littleMarkingColor(color,code) {
    $('.head_mark_2 , .head_mark_3').css('background', '#' + color)  //This changes the color of the cat
    $('#littleMarkingCode').html('code: '+code) //This updates text of the badge next to the slider
    $('#dnadecorationSides').html(code) //This updates the body color part of the DNA that is displayed below the cat
}


//###################################################
//Functions below will be used later on in the project
//###################################################
function eyeVariation(num) {

    $('#dnashape').html(num)
    switch (num) {
        case 1:
            normalEyes()
            $('#eyeName').html('Basic')
            break
        case 2:
            normalEyes() //reset
            $('#eyeName').html('Shy')
            eyesType2()
            break
        case 3:
            normalEyes() //reset
            $('#eyeName').html('Chill')
            eyesType3()
            break
        case 4:
            normalEyes() //reset
            $('#eyeName').html('Hypnotized')
            eyesType4()
            break
        case 5:
            normalEyes() //reset
            $('#eyeName').html('Right Gaze')
            eyesType5()
            break
        case 6:
            normalEyes() //reset
            $('#eyeName').html('Left Gaze')
            eyesType6()
            break
        case 7:
            normalEyes() //reset
            $('#eyeName').html('Happy')
            eyesType7()
            break
    }
}

function markingVariation(num) {
    $('#dnadecoration').html(num)
    switch (num) {
        case 1:
            $('#markingName').html('Basic')
            normalmarking()
            break
        case 2:
            normalmarking()
            $('#markingName').html('Slanted')
            markingType2()
            break
        case 3:
            normalmarking()
            $('#markingName').html('Slanted two')
            markingType3()
            break
        case 4:
            normalmarking()
            $('#markingName').html('Strange')
            markingType4()
            break
    }
}

function animationVariation(num) {
    $('#dnaanimation').html(num)
    switch (num) {
        case 1:
            $('#animationsName').html('Head tilt')
            animation1()
            break
        case 2:
            $('#animationsName').html('Wag Tail')
            animation2()
            break
        case 3:
            $('#animationsName').html('Ear fold')
            animation3()
            break
        case 4:
            $('#animationsName').html('Investigating')
            animation4()
            break
        case 5:
            $('#animationsName').html('Head Lower')
            animation5()
            break
        case 6:
            $('#animationsName').html('Startled')
            animation6()
            break
    }
}

//following functions are different eye shapes
async function normalEyes() {
    await $('.pupils').css('border', 'none')
    $('.pupil_reflect').css('background', 'white')
    $('.pupil_reflect').css('left', '22px')
    $('.pupil_reflect').css('top', '22px')
}

async function eyesType2(){
    await $('.pupils').css('border-top', '8px solid')
}

async function eyesType3(){
    await $('.pupils').css('border-bottom', '15px solid')
}

async function eyesType4(){
    await $('.pupils').css('border', '10px solid')
    $('.pupil_reflect').css('background', 'transparent')
}

async function eyesType5(){
    await $('.pupils').css('border-left', '7px solid')
    $('.pupil_reflect').css('left', '18px')
}

async function eyesType6(){
    await $('.pupils').css('border-right', '7px solid')
    $('.pupil_reflect').css('left', '12px')
}
async function eyesType7(){
    await $('.pupils').css('border-bottom', '17px solid')
    $('.pupil_reflect').css('top', '10px')
}



//following functions are different marking combinations
async function normalmarking() {
    //Remove all style from other decorations
    //In this way we can also use normalDecoration() to reset the decoration style
    $('.head_mark').css({ "transform": "rotate(0deg)", "height": "40px", "width": "14px", "top": "-150px", "left": "98px", "border-radius": "30%" })
    $('.head_mark_2').css({ "transform": "rotate(0deg)", "height": "20px", "width": "10px", "top": "-180px", "left": "80px", "border-radius": "30%" })
    $('.head_mark_3').css({ "transform": "rotate(0deg)", "height": "20px", "width": "10px", "top": "-200px", "left": "120px", "border-radius": "30%" })
}

async function markingType2(){
    $('.head_mark_2').css({ "transform": "rotate(10deg)"})
    $('.head_mark_3').css({ "transform": "rotate(-10deg)"})
}

async function markingType3(){
    $('.head_mark_2').css({ "transform": "rotate(-10deg)"})
    $('.head_mark_3').css({ "transform": "rotate(10deg)"})
}

async function markingType4(){
    $('.head_mark_2 , .head_mark_3').css({ "transform": "rotate(30deg)"})
    $('.head_mark').css({ "transform": "rotate(30deg)"})
}

//following functions are different animations
function animationReset(){
    $("#head").removeClass("movingHead")
    $(".tail").removeClass("wagTail")
    $(".right_ear").removeClass("foldEar")
    $("#head").removeClass("headZoom")
    $("#head, .ears").removeClass("headLower") 
    $(".pupils").removeClass("startledEyes")   
}

function animation1(){
    animationReset()
    $("#head").addClass("movingHead")
}

function animation2(){
    animationReset()
    $(".tail").addClass("wagTail")
}

function animation3(){
    animationReset()
    $(".right_ear").addClass("foldEar")
}

function animation4(){
    animationReset()
    $("#head").addClass("headZoom")
}

function animation5(){
    animationReset()
    $("#head, .ears").addClass("headLower")
}

function animation6(){
    animationReset()
    $(".pupils").addClass("startledEyes")
}

catSettings.js

var colors = Object.values(allColors())

var defaultDNA = {
    "headcolor" : 10,
    "earsBodyColor" : 13,
    "pawsColor" : 96,
    "eyesColor" : 15,
    //Cattributes
    "eyesShape" : 1,
    "markingStyle" : 1,
    "bigMarkingColor" : 13,
    "littleMarkingColor" : 13,
    "animation" :  1,
    "lastNum" :  1
    }

// when page load
$( document ).ready(function() {
  $('#dnahead').html(defaultDNA.headColor);
  $('#dnaearsbody').html(defaultDNA.mouthColor);
  $('#dnapaws').html(defaultDNA.pawsColor);
  $('#dnaears').html(defaultDNA.earsColor);
    
  $('#dnashape').html(defaultDNA.eyesShape)
  $('#dnadecoration').html(defaultDNA.decorationPattern)
  $('#dnadecorationMid').html(defaultDNA.decorationMidcolor)
  $('#dnadecorationSides').html(defaultDNA.decorationSidescolor)
  $('#dnaanimation').html(defaultDNA.animation)
  $('#dnaspecial').html(defaultDNA.lastNum)

  renderCat(defaultDNA)
});

function getDna(){
    var dna = ''
    dna += $('#dnahead').html()
    dna += $('#dnaearsandbody').html()
    dna += $('#dnapaws').html()
    dna += $('#dnaears').html()
    dna += $('#dnashape').html()
    dna += $('#dnadecoration').html()
    dna += $('#dnadecorationMid').html()
    dna += $('#dnadecorationSides').html()
    dna += $('#dnaanimation').html()
    dna += $('#dnaspecial').html()

    return parseInt(dna)
}

function renderCat(dna){
    headColor(colors[dna.headcolor],dna.headcolor)
    $('#headcolor').val(dna.headcolor)
    earBodyColor(colors[dna.earsBodyColor],dna.earsBodyColor) 
    $('#ear_body').val(dna.earsBodyColor)
    pawsColor(colors[dna.pawsColor],dna.pawsColor)
    $('#pawscolor').val(dna.pawsColor)
    eyesColor(colors[dna.eyesColor],dna.eyesColor)
    $('#eyecolor').val(dna.eyesColor)
    bigMarkingColor(colors[dna.bigMarkingColor],dna.bigMarkingColor)
    $('#bigmarking').val(dna.bigMarkingColor)
    littleMarkingColor(colors[dna.littleMarkingColor],dna.littleMarkingColor)
    $('#littlemarking').val(dna.littleMarkingColor)
    eyeVariation(dna.eyesShape)
    $('#eyeshape').val(dna.eyesShape)
    markingVariation(dna.markingStyle)
    $('#marking').val(dna.markingStyle)
    animationVariation(dna.animation)
    $('#animations').val(dna.animation)
}

// Changing cat colors
$('#headcolor').change(()=>{
    var colorVal = $('#headcolor').val()
    headColor(colors[colorVal],colorVal)
})

$('#ear_body').change(()=>{
  var colorVal = $('#ear_body').val()
  earBodyColor(colors[colorVal],colorVal)
})

$('#pawscolor').change(()=>{
  var colorVal = $('#pawscolor').val()
  pawsColor(colors[colorVal],colorVal)
})

$('#eyecolor').change(()=>{
  var colorVal = $('#eyecolor').val()
  eyesColor(colors[colorVal],colorVal)
})

$('#bigmarking').change(()=>{
  var colorVal = $('#bigmarking').val()
  bigMarkingColor(colors[colorVal],colorVal)
})

$('#littlemarking').change(()=>{
  var colorVal = $('#littlemarking').val()
  littleMarkingColor(colors[colorVal],colorVal)
})

//changing cattributes
$('#eyeshape').change(()=>{
  var shape = parseInt($('#eyeshape').val())
  eyeVariation(shape)
})

$('#marking').change(()=>{
  var shape = parseInt($('#marking').val())
  markingVariation(shape)
})

$('#animations').change(()=>{
  var animation = parseInt($('#animations').val())
  animationVariation(animation)
})

index.html

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Academy kitties </title>
  <script type="text/javascript" src="assets/js/jquery-3.4.1.js"></script>
  <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
  <script src="assets/bootstrap/js/popper.js"></script>
  <script src="assets/bootstrap/js/bootstrap.min.js"></script>

  <link rel="stylesheet" href="assets/css/mystyle.css">
  <link rel="stylesheet" href="assets/css/cats.css">
  <link rel="stylesheet" href="assets/css/colors.css">
  <link rel="stylesheet" href="assets/css/factory.css">
  <link rel="stylesheet" href="assets/css/frontend.css">
  <link rel="stylesheet" href="assets/css/animations.css">
</head>
  <body>
    <div class="container p-5" style="margin-top: 12vh;margin-bottom: 10vh;">
        <div align="center">
        <h1 class="c-white">Kitties-Factory</h1>
        <p class="c-white">Create your custom Kitty</p>
    </div>
        <div class="row">
            <div class="col-lg-4 catBox m-2 light-b-shadow">
                <div class="cat">
                    <div class="ears">
                        <div class="ear left_ear">
                            <div class="inner-ear"></div>
                        </div>
                        <div class="ear right_ear">
                            <div class="inner-ear"></div>
                        </div>
                    </div>
                    <div id="head" class="">
                        <div class="whisker_left whiskers one"></div>
                        <div class="whisker_left whiskers"></div>
                        <div class="whisker_left whiskers three"></div>
                        <div class="whisker_right whiskers R-one"></div>
                        <div class="whisker_right whiskers R-two"></div>
                        <div class="whisker_right whiskers R-three"></div>
                        <div class="eyes">
                            <div class="eye">
                                <div class="pupils">
                                    <div class="pupil_reflect"></div>
                                </div>
                            </div>
                            <div class="eye">
                                <div class="pupils">
                                    <div class="pupil_reflect"></div>
                                </div>
                            </div>
                        </div>
                        <div class="nose"></div>
                        <div class="cat__mouth-left"></div>
                        <div class="cat__mouth-right"></div>
                        <div class="head_mark"></div>
                        <div class="head_mark_2"></div>
                        <div class="head_mark_3"></div>
                    </div>
                    <div class="body">
                        <div class="leg leg-one"></div>
                        <div class="leg leg-two"></div>
                        <div class="leg leg-three"></div>
                        <div class="leg leg-four"></div>
                        <div class="belly"></div>
                    </div>
                    <div class="tail"></div>
                </div>
                <br>
                <div class="dnaDiv" id="catDNA">
                    <b>
                        DNA:
                        <!-- Colors -->
                         <span id="dnahead"></span>
                         <span id="dnaearsandbody"></span>
                         <span id="dnapaws"></span>
                         <span id="dnaeyes"></span>
                        
                         <!-- Cattributes -->
                         <span id="dnashape"></span>
                         <span id="dnadecoration"></span>
                         <span id="dnadecorationMid"></span>
                         <span id="dnadecorationSides"></span>
                         <span id="dnaanimation"></span>
                         <span id="dnaspecial"></span>
                    </b>
                </div>
            </div>
            <div class="col-lg-7 cattributes m-2 light-b-shadow">

<!-- Cat colors -->
<div id="catColors">
                <div class="form-group">
                    <label for="formControlRange"><b>Head and Tail</b><span class="badge badge-dark ml-2" id="headcode"></span></label>
                    <input type="range" min="10" max="98" class="form-control-range" id="headcolor">
                </div>
                <div class="form-group">
                    <label for="formControlRange"><b>Outer Ears and Body</b><span class="badge badge-dark ml-2" id="ear_bodycode"></span></label>
                    <input type="range" min="10" max="98" class="form-control-range" id="ear_body">
                </div>
                <div class="form-group">
                    <label for="formControlRange"><b>Paws</b><span class="badge badge-dark ml-2" id="pawscode"></span></label>
                    <input type="range" min="10" max="98" class="form-control-range" id="pawscolor">
                </div>
                <div class="form-group">
                    <label for="formControlRange"><b>Eyes</b><span class="badge badge-dark ml-2" id="eyecode"></span></label>
                    <input type="range" min="10" max="98" class="form-control-range" id="eyecolor">
                </div>
                <div class="form-group">
                    <label for="formControlRange"><b>Eyes shape</b><span class="badge badge-dark ml-2" id="eyeName"></span></label>
                    <input type="range" min="1" max="7" class="form-control-range" id="eyeshape">
                </div>
                <div class="form-group">
                    <label for="formControlRange"><b>Marking Style</b><span class="badge badge-dark ml-2" id="markingName"></span></label>
                    <input type="range" min="1" max="4" class="form-control-range" id="marking">
                </div>
                <div class="form-group">
                    <label for="formControlRange"><b>Big Marking</b><span class="badge badge-dark ml-2" id="bigMarkingCode"></span></label>
                    <input type="range" min="10" max="98" class="form-control-range" id="bigmarking">
                </div>
                <div class="form-group">
                    <label for="formControlRange"><b>Little Markings</b><span class="badge badge-dark ml-2" id="littleMarkingCode"></span></label>
                    <input type="range" min="10" max="98" class="form-control-range" id="littlemarking">
                </div>
                <div class="form-group">
                    <label for="formControlRange"><b>Animations</b><span class="badge badge-dark ml-2" id="animationsName"></span></label>
                    <input type="range" min="1" max="6" class="form-control-range" id="animations">
                </div>
            </div>

            </div>

            </div>
            <br>

        </div>



    </div>
    <footer align="left">
        <p>Ivan on Tech Academy Bootcamp July 2020</p>
    </footer>

  </body>
  <script src="assets/js/colors.js"></script>
  <script src="assets/js/catSettings.js"></script>
  <script src="assets/js/catFactory.js"></script>

</html>

[A_Olson]

Index.html

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Academy kitties </title>
  <script type="text/javascript" src="assets/js/jquery-3.4.1.js"></script>
  <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
  <script src="assets/bootstrap/js/popper.js"></script>
  <script src="assets/bootstrap/js/bootstrap.min.js"></script>

  <link rel="stylesheet" href="assets/css/animations.css">
                         <span id="dnaanimation"></span>
                         <span id="dnaspecial"></span>
                    </b>
                </div>
            </div>
            <div class="col-lg-7 cattributes m-2 light-b-shadow">

<!-- Cat colors -->
<id id="catColors">
        <div class="form-group">
            <label for="formControlRange"><b>Head and body</b><span class="badge badge-dark ml-2" id="headcode"></span></label>
            <input type="range" min="10" max="98" class="form-control-range" id="bodycolor">
        </div>


        <div class="form-group">
            <label for="formControlRange"><b>Mouth/Body/Tail Color</b><span class="badge badge-dark ml-2" id="mouthcode"></span></label>
            <input type="range" min="10" max="98" class="form-control-range" id="mouthcolor">
        </div>

        <div class="form-group">
            <label for="formControlRange"><b>Eye Color</b><span class="badge badge-dark ml-2" id="eyecode"></span></label>
            <input type="range" min="10" max="98" class="form-control-range" id="eyecolor">
        </div>

        <div class="form-group">
            <label for="formControlRange"><b>Ear Color</b><span class="badge badge-dark ml-2" id="earcode"></span></label>
            <input type="range" min="10" max="98" class="form-control-range" id="earcolor">
        </div>

        <div class="form-group">
            <label for="formControlRange"><b>Eyes shape</b><span class="badge badge-dark ml-2" id="eyeName"></span></label>
            <input type="range" min="1" max="7" class="form-control-range" id="eyeshape">
        </div>

        <div class="form-group">
            <label for="formControlRange"><b>Dots</b><span class="badge badge-dark ml-2" id="dotName"></span></label>
            <input type="range" min="1" max="5" class="form-control-range" id="dotshape">
        </div>

        <div class="form-group">
            <label for="formControlRange"><b>Outer Dot Color</b><span class="badge badge-dark ml-2" id="dotName2"></span></label>
            <input type="range" min="1" max="98" class="form-control-range" id="dotcolor">
        </div>

        <div class="form-group">
            <label for="formControlRange"><b>Inner Dot Color</b><span class="badge badge-dark ml-2" id="dotName3"></span></label>
            <input type="range" min="1" max="98" class="form-control-range" id="dotcolor2">
        </div>
</id>

        <div class="form-group">
            <label for="formControlRange"><b>Animation</b><span class="badge badge-dark ml-2" id="animationName"></span></label>
            <input type="range" min="1" max="5" class="form-control-range" id="animation">
        </div>


        
            </div>

            </div>
            <br>

        </div>



    </div>
    <footer align="left">
        <p>Ivan on Tech Academy Bootcamp July 2020</p>
    </footer>

  </body>
  <script src="assets/js/colors.js"></script>
  <script src="assets/js/catSettings.js"></script>
  <script src="assets/js/catFactory.js"></script>

</html>

catFactory.js

$('#dotName').html('Basic')
            break
        case 2:
            $('#dotName').html('Slightly Tilted')
            decoration2()
            break
        case 3:
            $('#dotName').html('Tilted')
            decoration3()
            break
        case 4:
            $('#dotName').html('Very Tilted')
            decoration4()
            break
        case 5:
            $('#dotName').html('Extremely Tilted')
            decoration5()
            break
    }
}


function decoration2() {
    $('.cat__head-dots_first').css("transform", "rotate(7deg)");
    $('.cat__head-dots_second').css("transform", "rotate(-7deg)");
}

function decoration3() {
    $('.cat__head-dots_first').css("transform", "rotate(15deg)");
    $('.cat__head-dots_second').css("transform", "rotate(-15deg)");
}

function decoration4() {
    $('.cat__head-dots_first').css("transform", "rotate(21deg)");
    $('.cat__head-dots_second').css("transform", "rotate(-21deg)");
}

function decoration5() {
    $('.cat__head-dots_first').css("transform", "rotate(27deg)");
    $('.cat__head-dots_second').css("transform", "rotate(-27deg)");
}

async function normalDecoration() {
    //Remove all style from other decorations
    //In this way we can also use normalDecoration() to reset the decoration style
    $('.cat__head-dots').css({ "transform": "rotate(0deg)", "height": "48px", "width": "14px", "top": "1px", "border-radius": "0 0 50% 50%" })
    $('.cat__head-dots_first').css({ "transform": "rotate(0deg)", "height": "35px", "width": "14px", "top": "1px", "border-radius": "50% 0 50% 50%" })
    $('.cat__head-dots_second').css({ "transform": "rotate(0deg)", "height": "35px", "width": "14px", "top": "1px", "border-radius": "0 50% 50% 50%" })
}

function animationVariation(num){
    $('#dnaanimation').html(num);
    switch (num) {
        case 1:
            $('#animationName').html('head-tilt')
            animationType1();
            break;
        case 2:
            $('#animationName').html('tail-tilt')
            animationType2();
            break;
        case 3:
            $('#animationName').html('head and tail-tilt')
            animationType3();
            break;
        case 4:
            $('#animationName').html('whiskers')
            animationType4();
            break;
        case 5:
            $('#animationName').html('whiskers-and-ears')
            animationType5();
            break;
    }
}

function animationType1(){
    resetAnimation();
    $('#head').addClass('movingHead')
}

function animationType2(){
    resetAnimation();
    $('#tail').addClass('movingTail')
}

function animationType3(){
    resetAnimation();
    $('#head').addClass('movingBoth')
    $('#tail').addClass('movingBoth')
}

function animationType4(){
    resetAnimation();
    $('.cat__whiskers-left').addClass('movingBoth2')
    $('.cat__whiskers-right').addClass('movingBoth2')
}

function animationType5(){
    resetAnimation();
    $('.cat__whiskers-left').addClass('movingBoth2')
    $('.cat__whiskers-right').addClass('movingBoth2')
    $('.cat__ear--left').addClass('movingBoth3')
    $('.cat__ear--right').addClass('movingBoth4')
}

function resetAnimation(){
    $('#head').removeClass('movingHead')
    $('#tail').removeClass('movingTail')
    $('#tail').removeClass('movingBoth')
    $('#head').removeClass('movingBoth')
    $('.cat__whiskers-left').removeClass('movingBoth2')
    $('.cat__whiskers-right').removeClass('movingBoth2')
    $('.cat__whiskers-left').removeClass('movingBoth3')
    $('.cat__whiskers-right').removeClass('movingBoth3')
    $('.cat__ear--left').removeClass('movingBoth3')
    $('.cat__ear--right').removeClass('movingBoth4')
}

animations.css

.movingTail{
    animation: moveTail 3.5s infinite;
}

.movingHead{
    animation: moveHead 5s infinite;
}

.movingBoth{
    animation: moveTail 3.5s infinite;
    animation: moveHead 5s infinite;
}

.movingBoth2{
    animation: moveWhiskers 4s infinite;
}

.movingBoth3{
    animation: moveWhiskers 4s infinite;
    animation: moveEars2 4s infinite;
}

.movingBoth4{
    animation: moveEars 4s infinite;
}


@keyframes moveHead {
    0% {
        transform: rotate(0deg);
    }
    30% {
        transform: rotate(5deg);
    }
    60% {
        transform: rotate(-5deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

@keyframes moveTail {
    0% {
        transform: rotate(-45deg);
    }
    30% {
        transform: rotate(-30deg);
    }
    60% {
        transform: rotate(-50deg);
    }
    100% {
        transform: rotate(-45deg);
    }
}

@keyframes moveWhiskers {
    0% {
        transform: rotate(0deg);
    }
    30% {
        transform: rotate(6deg);
    }
    60% {
        transform: rotate(-6deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

@keyframes moveEars {
    0% {
        transform: rotate(170deg);
    }
    30% {
        transform: rotate(176deg);
    }
    60% {
        transform: rotate(164deg);
    }
    100% {
        transform: rotate(170deg);
    }
}

@keyframes moveEars2 {
    0% {
        transform: scale(1, -1) rotate(170deg);
    }
    30% {
        transform: scale(1, -1) rotate(176deg);
    }
    60% {
        transform: scale(1, -1) rotate(164deg);
    }
    100% {
        transform: scale(1, -1) rotate(170deg);
    }
}

[PaulS96]

These are the animations I added.

animations.css

.movingHead {
    animation: moveHead 2s infinite;
}

.wavingPaw {
    animation: wavePaw 1s infinite;
}

.movingEars {
    animation: moveEars 1.5s infinite;
}

.movingBelly {
    animation: moveBelly 1.5s infinite;
}

.movingHat {
    animation: moveHat 2s infinite;
}

.movingNose {
    animation: moveNose 1.5s infinite;
}

.movingMouth {
    animation: moveMouth 1s infinite;
}

@keyframes moveHead {
    0% {
        transform: rotate(0deg);
    }
    30% {
        transform: rotate(5deg);
    }
    60% {
        transform: rotate(-5deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

@keyframes wavePaw {
    0% {
        transform: rotate(0deg);
    }
    10% {
        transform: rotate(2deg);
        left: -2px;
    }
    20% {
        transform: rotate(4deg);
        left: -4px;
    }
    30% {
        transform: rotate(6deg);
        left: -6px;
    }
    40% {
        transform: rotate(8deg);
        left: -9px;
    }
    50% {
        transform: rotate(8deg);
        left: -10px;
    }
    60% {
        transform: rotate(8deg);
        left: -8px;
    }
    70% {
        transform: rotate(6deg);
        left: -6px;
    }
    80% {
        transform: rotate(4deg);
        left: -4px;
    }
    90% {
        transform: rotate(2deg);
        left: -2px;
    }
    100% {
        transform: rotate(0deg);
    }
}

@keyframes moveEars {
    0% {
        top: 0px;
    }
    30% {
        top: 10px;
    }
    60% {
        top: -10px;
    }
    100% {
        top: 0px;
    }
}

@keyframes moveBelly {
    0% {
        top: 100px;
        left: 80px;
    }
    30% {
        top: 110px;
        left: 70px;
    }
    60% {
        top: 95px;
        left: 90px;
    }
    100% {
        top: 100px;
        left: 80px;
    }
}

@keyframes moveHat {
    0% {
        top: -36px;
    }
    30% {
        top: -20px;
    }
    60% {
        top: -30px;
    }
    100% {
        top: -36px;
    }
}

@keyframes moveNose {
    0% {
        transform: rotateY(0deg);
    }
    30% {
        transform: rotateY(15deg);
    }
    60% {
        transform: rotateY(-15deg);
    }
    100% {
        transform: rotateY(0deg);
    }
}

@keyframes moveMouth {
    0% {
        border-radius: 130% 90% 130% 90%;
    }
    30% {
        border-radius: 83% 90% 83% 90%
    }
    60% {
        border-radius: 130% 110% 130% 110%;
    }
    100% {
        border-radius: 130% 90% 130% 90%;
    }
}

bearFactory.js

//Animations
function animationVariation(num){
    $('#dnaanimation').html(num)
    switch (num) {
        case 1:
            animationType1();
            $('#animationName').html('Moving Head');
            break;
        case 2: 
            animationType2();
            $('#animationName').html('Moving Front Paw');
            break;
        case 3: 
            animationType3();
            $('#animationName').html('Moving Ears');
            break;
        case 4: 
            animationType4();
            $('#animationName').html('Moving Belly');
            break; 
        case 5: 
            animationType5();
            $('#animationName').html('Sliding Hat');
            break;
        case 6: 
            animationType6();
            $('#animationName').html('Wiggling Nose');
            break; 
        case 7: 
            animationType7();
            $('#animationName').html('Moving Mouth');
            break;        
        default:
            break;
    }
};


//reset animation
function resetAnimation() {
    $('.head').removeClass("movingHead");
    $('.leftFrontPaw').removeClass("wavingPaw");
    $('.ear').removeClass("movingEars");
    $('.belly').removeClass("movingBelly");
    $('.hat').removeClass("movingHat");
    $('.nose').removeClass("movingNose");
    $('.mouth').removeClass("movingMouth");
};
//animations
function animationType1(){
    resetAnimation();
    $('.head').addClass("movingHead");
};

function animationType2(){
    resetAnimation();
    $('.leftFrontPaw').addClass("wavingPaw");
};

function animationType3(){
    resetAnimation();
    $('.ear').addClass("movingEars");
};

function animationType4(){
    resetAnimation();
    $('.belly').addClass("movingBelly");
};

function animationType5(){
    resetAnimation();
    $('.hat').addClass("movingHat");
};

function animationType6(){
    resetAnimation();
    $('.nose').addClass("movingNose");
};

function animationType7(){
    resetAnimation();
    $('.mouth').addClass("movingMouth");
};

[codinginlondon]

…added some animations. I didn’t realise you could do all this with css.

animations.css

.runningLeg1{
    animation: moveLeg1 0.5s infinite;
}

.runningLeg2{
    animation: moveLeg2 0.5s infinite;
    animation-delay: 0.1s;
}

.hiding{
    animation: kfHiding;
    animation-duration: 10s;
    animation-fill-mode: forwards;
}

@keyframes moveLeg1{
    0%{
        transform: rotate(0deg);
    }

    50%{
        transform: rotate(-40deg);
    }    

    100%{
        transform: rotate(40deg);
    }
}

@keyframes moveLeg2{
    0%{
        transform: rotate(0deg);
    }

    50%{
        transform: rotate(40deg);
    }

    100%{
        transform: rotate(-40deg);
    }
}


@keyframes kfHiding{
    0%{
        opacity: 100%;
    }

    10%{
        opacity: 0%;
    }

    50%{
        opacity: 5%;
    }

    60%{
        opacity: 0%;
    }

    80%{
        opacity: 5%;
    }

    100%{
        opacity: 0%;
    }
    
}

catFactory.js

//Random color
function getColor() {
    var randomColor = Math.floor(Math.random() * 16777215).toString(16);
    return randomColor
}

function genColors(){
    var colors = []
    for(var i = 10; i < 99; i ++){
      var color = getColor()
      colors[i] = color
    }
    return colors
}


function bodyColor(color,code) {
    $('.catbody').css('background-color', '#' + color)  //This changes the color of the cat
    $('#bodycode').html('code: '+code) //This updates text of the badge next to the slider
    $('#dnabody').html(code) //This updates the body color part of the DNA that is displayed below the cat
}


//This function code needs to modified so that it works with Your cat code.
function headColor(color,code) {
    $('#head').css('background-color', '#' + color)  //This changes the color of the cat head
    $('#headcode').html('code: '+code) //This updates text of the badge next to the slider
    $('#dnahead').html(code) //This updates the body color part of the DNA that is displayed below the cat
}


function earsColor(color,code) {
    $('.ear').css('background-color', '#' + color)  //This changes the color of the cat ears
    $('#earscode').html('code: '+code) //This updates text of the badge next to the slider
    $('#dnaears').html(code) //This updates the body color part of the DNA that is displayed below the cat
}


function legsColor(color,code) {
    $('.legs').css('background-color', '#' + color)  //This changes the color of the cat legs
    $('#legscode').html('code: '+code) //This updates text of the badge next to the slider
    $('#dnalegs').html(code) //This updates the body color part of the DNA that is displayed below the cat
}



//###################################################
//Functions below will be used later on in the project
//###################################################
function eyeVariation(n) {
    num = parseInt(n)
    $('#dnashape').html(num)

    switch (num) {
        case 1:
            normalEyes()
            $('#eyeshapecode').html('Basic')
            break;
        case 2:
            startledEyes()
            $('#eyeshapecode').html('Startled')
            break;
        case 3:
            blindEyes()
            $('#eyeshapecode').html('Blind')
            break;
    }
}

function legVariation(n) {
    num = parseInt(n)
    $('#dnaactivity').html(n)

    switch (num){
        case 1:
            runLegs()
            $('#legshapecode').html("Run")
            break;
        case 2:
            restLegs()
            $('#legshapecode').html("Rest")
            break;
        default:
    }
}




function runLegs(){
    $('#leg1').css({
        "width": "23px",
        "height": "52px",
        "top": "87px",
        "left": "148px",
        "transform": "rotate(-40deg)"        
    })

    $('#leg2').css({
        "width": "23px",
        "height": "52px",
        "top": "78px",
        "left": "179px",
        "transform": "rotate(-50deg)"       
    })

}

function restLegs(){
    $('#leg1').css({
        "width": "23px",
        "height": "52px",
        "top": "87px",
        "left": "21px",
        "transform": "rotate(15deg)"
    })

    $('#leg2').css({
        "width": "23px",
        "height": "52px",
        "top": "90px",
        "left": "62px",
        "transform": "rotate(-10deg)"
    })

}

function opacityVariation(num){
    $('#dnaprivacy').html(num)

    opacity = (10-num)/10
 
    $('.cat').css("opacity", opacity)
    $('#incognitocode').html(num*10 + '%')

}

function mouthColor(color,code) {
    $('.mouth').css('background-color', '#' + color)  //This changes the color of the cat head
    $('#mouthcolorcode').html('code: '+code) //This updates text of the badge next to the slider
    $('#dnamouth').html(code) //This updates the body color part of the DNA that is displayed below the cat
}


function animationVariation(n){
    num = parseInt(n)
    $('#dnaanimation').html(num)

    switch(num){
        case 0:
            $('#animationcode').html("still")
            resetAnimations()
            break;
        case 1:
            $('#animationcode').html("flee")
            animateLegs()
            break;
        case 2:
            $('#animationcode').html("hide")
            animateHide()
            break;
        default:
            resetAnimations()

    }
}


function animateLegs(){
    $('#leg1').addClass("runningleg1")
    $('#leg2').addClass("runningleg2")
}


function animateHide(){
    $('.cat').addClass("hiding")
}

function resetAnimations(){
    $('#leg1').removeClass("runningleg1")
    $('#leg2').removeClass("runningleg2")
    $('.cat').removeClass("hiding")
}

function decorationVariation(num) {
    $('#dnadecoration').html(num)
    switch (num) {
        case 1:
            $('#decorationName').html('Basic')
            normaldecoration()
            break
    }
}

async function normalEyes() {

    $('.pupils').css({
        "background-color": "black",
        "width": "20px",
        "height": "30px",
        "top": "10px",
        "left": "24px"
    })

}


function startledEyes() {
    
    $('.pupils').css({
        "background-color": "black",
        "width": "45px",
        "height": "45px",
        "top": "3px",
        "left": "3px"
    })
}

function blindEyes() {
    
    $('.pupils').css({
        "background-color": "white"
    })
}


async function normaldecoration() {
    //Remove all style from other decorations
    //In this way we can also use normalDecoration() to reset the decoration style
    $('.cat__head-dots').css({ "transform": "rotate(0deg)", "height": "48px", "width": "14px", "top": "1px", "border-radius": "0 0 50% 50%" })
    $('.cat__head-dots_first').css({ "transform": "rotate(0deg)", "height": "35px", "width": "14px", "top": "1px", "border-radius": "50% 0 50% 50%" })
    $('.cat__head-dots_second').css({ "transform": "rotate(0deg)", "height": "35px", "width": "14px", "top": "1px", "border-radius": "0 50% 50% 50%" })
}

catSettings.js

var colors = Object.values(allColors())

var defaultDNA = {
    "bodyColor" : 95,
    "headColor" : 10,
    "earsColor" : 92,
    "legsColor" : 92,
    //Cattributes
    "eyesShape" : 1,
    "activity" : 1,
    "privacy" : 0,
    "mouthColor" : 73,
    "animation" :  0,
    "lastNum" :  1
    }

// when page load
$( document ).ready(function() {
  $('#dnabody').html(defaultDNA.bodyColor);
  $('#dnahead').html(defaultDNA.headColor);
  $('#dnaears').html(defaultDNA.earsColor);
  $('#dnalegs').html(defaultDNA.legsColor);
    
  $('#dnashape').html(defaultDNA.eyesShape)
  $('#dnaactivity').html(defaultDNA.activity)
  $('#dnaprivacy').html(defaultDNA.privacy)
  $('#dnamouth').html(defaultDNA.mouthColor)
  $('#dnaanimation').html(defaultDNA.animation)
//   $('#dnaspecial').html(defaultDNA.lastNum)

  renderCat(defaultDNA)
});

function getDna(){
    var dna = ''
    dna += $('#dnabody').html()
    dna += $('#dnahead').html()
    dna += $('#dnaears').html()
    dna += $('#dnalegs').html()
    dna += $('#dnashape').html()
    dna += $('#dnaactivity').html()
    dna += $('#dnaprivacy').html()
    dna += $('#dnamouth').html()
    dna += $('#dnaanimation').html()
    dna += $('#dnaspecial').html()

    return parseInt(dna)
}

function renderCat(dna){
  bodyColor(colors[dna.bodyColor], dna.bodyColor)
  $('#bodycolor').val(dna.bodyColor)

  headColor(colors[dna.headColor], dna.headColor)
  $('#headcolor').val(dna.headColor)

  earsColor(colors[dna.earsColor], dna.earsColor)
  $('#earscolor').val(dna.earsColor)

  legsColor(colors[dna.legsColor], dna.legsColor)
  $('#legscolor').val(dna.legsColor)

  eyeVariation(dna.eyesShape)
  $('#eyeshape').val(dna.eyesShape)

  legVariation(dna.activity)
  $("input[name='decoration'][value="+dna.activity+"]").prop("checked", true)

  opacityVariation(dna.privacy)
  $('#incognito').val(dna.privacy)

  mouthColor(colors[dna.mouthColor], dna.mouthColor)
  $('#mouthcolor').val(dna.mouthColor)

  animationVariation(dna.animation)
  $('#animation').val(dna.animation)

}

// Changing cat colors
$('#bodycolor').change(() => {
  var colorVal = $('#bodycolor').val()
  bodyColor(colors[colorVal], colorVal)
})

$('#headcolor').change(() => {
  var colorVal = $('#headcolor').val()
  headColor(colors[colorVal], colorVal)
})

$('#earscolor').change(() => {
  var colorVal = $('#earscolor').val()
  earsColor(colors[colorVal], colorVal)
})

$('#legscolor').change(() => {
  var colorVal = $('#legscolor').val()
  legsColor(colors[colorVal], colorVal)
})

$('#eyeshape').change(() => {
  var shapeVal = $('#eyeshape').val()
  eyeVariation(shapeVal)
})

$('#legshape').change(() => {
  var shapeVal = $('#legshape').val()
  legVariation(shapeVal)
})

$("input[name='decoration']").change(() => {
  var legVal = $("input[name='decoration']:checked").val()

  console.log('leg value: '+ legVal)
  legVariation(legVal)
})

$('#incognito').change(() => {
  var opacityVal = $('#incognito').val()
  opacityVariation(opacityVal)
})

$('#mouthcolor').change(() => {
  var colorVal = $('#mouthcolor').val()
  mouthColor(colors[colorVal], colorVal)
})

$('#animation').change(() =>{
  var animationVal = $('#animation').val()
  animationVariation(animationVal)
})

[CipherGrind]

This is a fun project!

Check out my latest updates with animation features on my Github Page:
https://ciphergrind.github.io/TrippySquirrelsNFTMaker/

The Github repo with code is here:
https://github.com/CipherGrind/TrippySquirrelsNFTMaker/tree/gh-pages

[valleria]

Hi CipherGrind, how are you doing with this project “Cat Factory-Ethereum Dapp”? Some video instructions are missing to complete the project, could you get them? Let me know if you are interested in trying to solve it together.
Thank you!

VdSR

[CipherGrind]

Hi Valleria, I am about to finish up the first section regarding the NFT designing factory. I still have all of the other sections to go through. Which section are you on? What videos are missing?

[versus]

Index.html

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Academy kitties </title>
  <script type="text/javascript" src="assets/js/jquery-3.4.1.js"></script>
  <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
  <script src="assets/bootstrap/js/popper.js"></script>
  <script src="assets/bootstrap/js/bootstrap.min.js"></script>

  <link rel="stylesheet" href="assets/css/mystyle.css">
  <link rel="stylesheet" href="assets/css/cats.css">
  <link rel="stylesheet" href="assets/css/colors.css">
  <link rel="stylesheet" href="assets/css/factory.css">
  <link rel="stylesheet" href="assets/css/frontend.css">
  <link rel="stylesheet" href="assets/css/animation.css">
</head>
  <body>
    <div class="container p-5" style="margin-top: 12vh;margin-bottom: 10vh;">
        <div align="center">
        <h1 class="c-white">Kitties-Factory</h1>
        <p class="c-white">Create your custom Kitty</p>
    </div>
        <div class="row">
            <div class="col-lg-4 catBox m-2 light-b-shadow">
                <div class="cat">
                    <div class="cat__ear">
                        <div id="leftEar" class="cat__ear--left">
                            <div class="cat__ear--left-inside"></div>
                        </div>
                        <div id="rightEar" class="cat__ear--right ">
                            <div class="cat__ear--right-inside"></div>
                        </div>
                    </div>

                    <div id="head" class="cat__head">
                        <div id="midDot" class="cat__head-dots">
                            <div id="leftDot" class="cat__head-dots_first"></div>
                            <div id="rightDot" class="cat__head-dots_second"></div>
                        </div>
                        <div class="cat__eye">
                            <div class="cat__eye--left ">
                                <span class="pupil-left "></span>
                            </div>
                            <div class="cat__eye--right">
                                <span class="pupil-right "></span>
                            </div>
                        </div>
                        <div class="cat__nose "></div>

                        <div class="cat__mouth-contour"></div>
                        <div class="cat__mouth-left "></div>
                        <div class="cat__mouth-right "></div>

                        <div class="cat__whiskers-left"></div>
                        <div class="cat__whiskers-right"></div>
                    </div>

                    <div class="cat__body">

                        <div class="cat__chest"></div>

                        <div class="cat__chest_inner"></div>


                        <div class="cat__paw-left"></div>
                        <div class="cat__paw-left_inner"></div>


                        <div class="cat__paw-right"></div>
                        <div class="cat__paw-right_inner"></div>


                        <div id="tail" class="cat__tail "></div>
                    </div>
                </div>
                <br>
                <div class="dnaDiv" id="catDNA">
                    <b>
                        DNA:
                        <!-- Colors -->
                         <span id="dnabody"></span>
                         <span id="dnamouth"></span>
                         <span id="dnaeyes"></span>
                         <span id="dnaears"></span>
                        
                         <!-- Cattributes -->
                         <span id="dnashape"></span>
                         <span id="dnadecoration"></span>
                         <span id="dnadecorationMid"></span>
                         <span id="dnadecorationSides"></span>
                         <span id="dnaanimation"></span>
                         <span id="dnaspecial"></span>
                    </b>
                </div>
            </div>
            <div class="col-lg-7 cattributes m-2 light-b-shadow">

            <!-- Cat colors -->
            <div id="catColors">
                <div class="form-group">
                    <label for="formControlRange"><b>Head and body</b><span class="badge badge-dark ml-2" id="headcode"></span></label>
                    <input type="range" min="10" max="98" class="form-control-range" id="bodycolor">
                </div>
            </div>
            <!-- Mouth colors -->
            <div id="mouthColors">
                <div class="form-group">
                    <label for="formControlRange"><b>Mouth | Belly | Tail</b><span class="badge badge-dark ml-2" id="mouthcode"></span></label>
                    <input type="range" min="10" max="98" class="form-control-range" id="mouthcolor">
                </div>
            </div>
            <!-- Eyes colors -->
            <div id="eyesColors">
                <div class="form-group">
                    <label for="formControlRange"><b>Eyes</b><span class="badge badge-dark ml-2" id="eyescode"></span></label>
                    <input type="range" min="10" max="98" class="form-control-range" id="eyescolor">
                </div>
            </div>
            <!-- Ears colors -->
            <div id="earsColors">
                <div class="form-group">
                    <label for="formControlRange"><b>Ears | Paw</b><span class="badge badge-dark ml-2" id="earscode"></span></label>
                    <input type="range" min="10" max="98" class="form-control-range" id="earscolor">
                </div>
            </div>
            <!-- Ears shape -->
            <div id="eyesShape">
                <div class="form-group">
                    <label for="formControlRange"><b>Eyes Shape</b><span class="badge badge-dark ml-2" id="eyeName"></span></label>
                    <input type="range" min="1" max="7" class="form-control-range" id="eyeshape">
                </div>
            </div>
            <!-- Decoration Pattern -->
            <div id="decorations">
                <div class="form-group">
                    <label for="formControlRange"><b>Decoration Pattern</b><span class="badge badge-dark ml-2" id="decorationName"></span></label>
                    <input type="range" min="1" max="7" class="form-control-range" id="decoration">
                </div>
            </div>
            <!-- Decoration Middle Colors -->
            <div id="decorationsMidColors">
                <div class="form-group">
                    <label for="formControlRange"><b>Decoration Colors - Middle</b><span class="badge badge-dark ml-2" id="decorationMidName"></span></label>
                    <input type="range" min="1" max="98" class="form-control-range" id="decorationMid">
                </div>
            </div>
            <!-- Decoration Side Colors -->
            <div id="decorationsSideColors">
                <div class="form-group">
                    <label for="formControlRange"><b>Decoration Colors - Side</b><span class="badge badge-dark ml-2" id="decorationSideName"></span></label>
                    <input type="range" min="1" max="98" class="form-control-range" id="decorationSide">
                </div>
            </div>
            <!-- Animations -->
            <div id="animationCat">
                <div class="form-group">
                    <label for="formControlRange"><b>Animations</b><span class="badge badge-dark ml-2" id="animationName"></span></label>
                    <input type="range" min="1" max="9" class="form-control-range" id="animation">
                </div>
            </div>

            </div>

            </div>
            <br>

        </div>



    </div>
    <footer align="left">
        <p>Ivan on Tech Academy Bootcamp July 2020</p>
    </footer>

  </body>
  <script src="assets/js/colors.js"></script>
  <script src="assets/js/catSettings.js"></script>
  <script src="assets/js/catFactory.js"></script>

</html>

Animation.css

.movingHead{
    animation: moveHead 3s infinite;
}
.movingTail{
    animation: moveTail 1s infinite;
}
.movingEars{
    animation: moveEars 1s infinite;
}
.movingNose{
    animation: moveNose 1s infinite;
}
.smilingLeft{
    animation: smile 2s infinite;
}
.disappear{
    display: none;
}
.winking{
    animation: wink 2s infinite;
}
.surprising{
    animation: surprise 2s infinite;
}
.fatting{
    animation: fatChest 2s infinite;
}
@keyframes moveHead {
    0% {
        transform: rotate(0deg);
    }
    30% {
        transform: rotate(5deg);
    }
    60% {
        transform: rotate(-5deg);
    }
    100% {
        transform: rotate(0deg);
    }
}
@keyframes smile {
    0% {
        transform: rotate(-45deg);
    }
    30% {
        transform: rotate(-10deg);
    }
    60% {
        transform: rotate(-25deg);
    }
    100% {
        transform: rotate(-45deg);
    }
}
@keyframes surprise {
    0% {
        transform: scale(1);
    }
    30% {
        transform: scale(1.3);
    }
    60% {
        transform: scale(1.7);
    }
    100% {
        transform: scale(1);
    }
}
@keyframes moveTail {
    0% {
        transform: rotate(-45deg);
    }
    30% {
        transform: rotate(-70deg);
    }
    60% {
        transform: rotate(-20deg);
    }
    100% {
        transform: rotate(-45deg);
    }
}
@keyframes moveEars {
    0% {
        transform: scale(-1, 1) rotate(175deg);
    }
    30% {
        transform: scale(-1, 1) rotate(184deg);
    }
    60% {
        transform: scale(-1, 1) rotate(155deg);
    }
    100% {
        transform: scale(-1, 1) rotate(175deg);
    }
}
@keyframes moveNose {
    0% {
        transform: translateX(0px);
    }
    30% {
        transform: translateX(10px);
    }
    60% {
        transform: translateX(-10px);
    }
    100% {
        transform: translateX(0px);
    }
}
@keyframes fatChest {
    0% {
        transform: scaleX(1px);
    }
    30% {
        transform: scaleX(1.5);
    }
    60% {
        transform: scaleX(1.6);
    }
    100% {
        transform: scaleX(1px);
    }
}

CatFactory.js

//Random color
function getColor() {
    var randomColor = Math.floor(Math.random() * 16777215).toString(16);
    return randomColor
}

function genColors(){
    var colors = []
    for(var i = 10; i < 99; i ++){
      var color = getColor()
      colors[i] = color
    }
    return colors
}

//This function code needs to modified so that it works with Your cat code.
function headColor(color,code) {
    $('.cat__head, .cat__chest').css('background', '#' + color)  //This changes the color of the cat
    $('#headcode').html('code: '+code) //This updates text of the badge next to the slider
    $('#dnabody').html(code) //This updates the body color part of the DNA that is displayed below the cat
}
function mouthColor(color,code) {
    $('.cat__mouth-contour, .cat__chest_inner, .cat__tail').css('background', '#' + color)  //This changes the color of the cat
    $('#mouthcode').html('code: '+code) //This updates text of the badge next to the slider
    $('#dnamouth').html(code) //This updates the body color part of the DNA that is displayed below the cat
}
function eyesColor(color,code) {
    $('.cat__eye .pupil-left, .cat__eye .pupil-right').css('background', '#' + color)  
    $('#eyescode').html('code: '+code)
    $('#dnaeyes').html(code) 
}
function earsColor(color,code) {
    $('.cat__ear .cat__ear--left, .cat__ear .cat__ear--right, .cat__paw-left, .cat__paw-right').css('background', '#' + color)  
    $('#earscode').html('code: '+code) 
    $('#dnaears').html(code) 
}
function decorationMidColor(color,code) {
    $('#midDot').css('background', '#' + color) 
    $('#decorationMidName').html('code: '+code) 
    $('#dnadecorationMid').html(code) 
}
function decorationSideColor(color,code) {
    $('#midDot #leftDot, #midDot #rightDot').css('background', '#' + color)  
    $('#decorationSideName').html('code: '+code) 
    $('#dnadecorationSides').html(code) 
}


//###################################################
//Functions below will be used later on in the project
//###################################################
function eyeVariation(num) {
    $('#eyeshape').val(num)
    $('#dnashape').html(num)
    switch (num) {
        case 1:
            normalEyes()
            $('#eyeName').html('Basic')
            break
        case 2:
            normalEyes()
            $('#eyeName').html('Chill')
            eyesType1()
            break
        case 3:
            normalEyes()
            $('#eyeName').html('Up')
            eyesType2()
            break
    }
}

function decorationVariation(num) {
    $('#dnadecoration').html(num)
    $('#decoration').val(num)
    switch (num) {
        case 1:
            $('#decorationName').html('Basic')
            normaldecoration()
            break
        case 2:
            $('#decorationName').html('Cool')
            normaldecoration()
            cooldecoration()
            break
        case 3:
            $('#decorationName').html('Relax')
            normaldecoration()
            relaxdecoration()
            break
        case 4:
            $('#decorationName').html('Thin')
            normaldecoration()
            thindecoration()
            break
        case 5:
            $('#decorationName').html('Bold')
            normaldecoration()
            bolddecoration()
            break  
        case 6:
            $('#decorationName').html('Spring Break')
            normaldecoration()
            springBreakecoration()
            break    
    }
}
function animationVariation(num) {
    $('#dnaanimation').html(num)
    $('#animation').val(num)

    switch (num) {
        case 1:
            $('#animationName').html('Basic')
            resetAnimations()
            break
        case 2:
            $('#animationName').html('Hello')
            resetAnimations()
            Hello()
            break
        case 3:
            $('#animationName').html('Ears')
            resetAnimations()
            moveEars()
            break
        case 4:
            $('#animationName').html('Nose')
            resetAnimations()
            moveNose()
            break
        case 5:
            $('#animationName').html('Surprised')
            resetAnimations()
            surprised()
            break  
        case 6:
            $('#animationName').html('Smile')
            resetAnimations()
            smiling()
            break   
        case 7:
            $('#animationName').html('Tail')
            resetAnimations()
            movingTail()
            break  
        case 8:
            $('#animationName').html('Fat')
            resetAnimations()
            fat()
            break    
    }
}

async function normalEyes() {
    await $('.cat__eye').find('span').css('border', 'none')
}
function eyesType1() {
    $('.cat__eye').find('span').css('border-top', '15px solid')
}
function eyesType2() {
    $('.cat__eye').find('span').css('border-bottom', '15px solid')
}

async function normaldecoration() {
    //Remove all style from other decorations
    //In this way we can also use normalDecoration() to reset the decoration style
    $('.cat__head-dots').css({ "transform": "rotate(0deg)", "height": "48px", "width": "14px", "top": "1px", "border-radius": "0 0 50% 50%" })
    $('.cat__head-dots_first').css({ "transform": "rotate(0deg)", "height": "35px", "width": "14px", "top": "1px", "border-radius": "50% 0 50% 50%", "left": "-20px" })
    $('.cat__head-dots_second').css({ "transform": "rotate(0deg)", "height": "35px", "width": "14px", "top": "1px", "border-radius": "0 50% 50% 50%", "left": "20px" })
}
function cooldecoration() {
    //Remove all style from other decorations
    //In this way we can also use normalDecoration() to reset the decoration style
    $('.cat__head-dots_first').css( "transform", "rotate(15deg)")
    $('.cat__head-dots_second').css("transform", "rotate(-15deg)")
}
function relaxdecoration() {
    //Remove all style from other decorations
    //In this way we can also use normalDecoration() to reset the decoration style
    $('.cat__head-dots_first').css({ "transform": "rotate(40deg)", "height": "45px", "width": "14px", "top": "1px", "border-radius": "50% 0 50% 50%", "left": "-35px" })
    $('.cat__head-dots_second').css({ "transform": "rotate(-40deg)", "height": "45px", "width": "14px", "top": "1px", "border-radius": "0 50% 50% 50%", "left": "35px" })
}
function thindecoration() {
    //Remove all style from other decorations
    //In this way we can also use normalDecoration() to reset the decoration style
    $('.cat__head-dots').css({ "transform": "rotate(0deg)", "height": "75px", "width": "8px", "top": "1px", "border-radius": "0 0 50% 50%" })
    $('.cat__head-dots_first').css({ "transform": "rotate(40deg)", "height": "75px", "width": "8px", "top": "1px", "border-radius": "100% 0 100% 0%", "left": "-44px" })
    $('.cat__head-dots_second').css({ "transform": "rotate(-40deg)", "height": "75px", "width": "8px", "top": "1px", "border-radius": "0 100% 0% 100%", "left": "44px" })
}
function bolddecoration() {
    //Remove all style from other decorations
    //In this way we can also use normalDecoration() to reset the decoration style
    $('.cat__head-dots').css({ "height": "41px", "width": "31px", "top": "1px", "border-radius": "50% 0 50% 0%" })
    $('.cat__head-dots_first').css( {"transform": "rotate(15deg)", "width": "33px", "left": "-39px" })
    $('.cat__head-dots_second').css({"transform": "rotate(-15deg)", "width": "33px", "left": "39px", "top": "8px" })
}
function springBreakecoration() {
    //Remove all style from other decorations
    //In this way we can also use normalDecoration() to reset the decoration style
    $('.cat__head-dots').css({  "transform": "rotate(0deg)", "height": "49px", "width": "47px", "top": "1px", "border-radius": "50% 0 50% 0%" })
    $('.cat__head-dots_first').css( {"transform": "rotate(13deg)", "width": "38px", "height": "53px", "top": "3px", "left": "-39px", "border-radius": "50% 0 50% 0%" })
    $('.cat__head-dots_second').css({"transform": "rotate(10deg)", "width": "43px", "height": "42px", "top": "17px", "left": "45px", "border-radius": "0px 100% 50%" })
}

function resetAnimations() {
    $('.cat__head').removeClass("movingHead")
    $('.cat__ear--left').removeClass("movingEars")
    $('.cat__nose').removeClass("movingNose")
    $('.cat__mouth-left').removeClass("surprising")
    $('.cat__mouth-right').css("display", "block")
    $('.cat__eye .pupil-left, .cat__eye .pupil-right').removeClass("surprising")
    $('.cat__mouth-left, .cat__mouth-right').css({"transform": "rotate(-45deg)", "top": "120"})
    $('.cat__mouth-left').css("left", "88px")
    $('.cat__mouth-right').css("left", "108px")
    $('.cat__tail').removeClass("movingTail")
    $('.cat__chest').removeClass("fatting")
}
function Hello() {
    $('.cat__head').addClass(" movingHead ")
}
function moveEars() {
    $('.cat__ear--left').addClass(" movingEars ")
}
function moveNose() {
    $('.cat__nose').addClass(" movingNose ")
}
function surprised() {    
    $('.cat__eye .pupil-left, .cat__eye .pupil-right').addClass(" surprising ")
    $('.cat__mouth-right').css("transform", "rotate(-131deg)")
    $('.cat__mouth-left').css("transform", "rotate(45deg)")
    $('.cat__mouth-left, .cat__mouth-right').css({"left": "100px", "top": "134px"})
}
function smiling() {
    $('.cat__mouth-left').addClass(" surprising ")
    $('.cat__mouth-right').css("display", "none")
    $('.cat__tail').addClass(" movingTail ")
}
function movingTail() {
    $('.cat__tail').addClass(" movingTail ")
}
function fat() {
    $('.cat__chest').addClass(" fatting ")
}

CatSettingsjs

var colors = Object.values(allColors())

var defaultDNA = {
    "headcolor" : 10,
    "mouthColor" : 13,
    "eyesColor" : 96,
    "earsColor" : 10,
    //Cattributes
    "eyesShape" : 2,
    "decorationPattern" : 1,
    "decorationMidcolor" : 42,
    "decorationSidescolor" : 13,
    "animation" :  1,
    "lastNum" :  1
    }

// when page load
$( document ).ready(function() {
  //$('#dnabody').html(defaultDNA.headColor);
  //$('#dnamouth').html(defaultDNA.mouthColor);
  //$('#dnaeyes').html(defaultDNA.eyesColor);
  //$('#dnaears').html(defaultDNA.earsColor);
    
  //$('#dnashape').html(defaultDNA.eyesShape)
  //$('#dnadecoration').html(defaultDNA.decorationPattern)
  //$('#dnadecorationMid').html(defaultDNA.decorationMidcolor)
  //$('#dnadecorationSides').html(defaultDNA.decorationSidescolor)
  $('#dnaanimation').html(defaultDNA.animation)
  $('#dnaspecial').html(defaultDNA.lastNum)

  renderCat(defaultDNA)
});

function getDna(){
    var dna = ''
    dna += $('#dnabody').html()
    dna += $('#dnamouth').html()
    dna += $('#dnaeyes').html()
    dna += $('#dnaears').html()
    dna += $('#dnashape').html()
    dna += $('#dnadecoration').html()
    dna += $('#dnadecorationMid').html()
    dna += $('#dnadecorationSides').html()
    dna += $('#dnaanimation').html()
    dna += $('#dnaspecial').html()

    return parseInt(dna)
}

function renderCat(dna){
    console.log({dna})
    headColor(colors[dna.headcolor],dna.headcolor)
    $('#bodycolor').val(dna.headcolor)
    mouthColor(colors[dna.mouthColor],dna.mouthColor)
    $('#mouthcolor').val(dna.mouthColor)
    eyesColor(colors[dna.eyesColor],dna.eyesColor)
    $('#eyescolor').val(dna.eyesColor)
    earsColor(colors[dna.earsColor],dna.earsColor)
    $('#earscolor').val(dna.earsColor)
    eyeVariation(defaultDNA.eyesShape)
    decorationVariation(dna.decorationPattern)
    decorationMidColor(colors[dna.decorationMidcolor], dna.decorationMidcolor)
    decorationSideColor(colors[dna.decorationSidescolor], dna.decorationSidescolor)
    animationVariation(dna.animation)
}

// Changing cat colors
$('#bodycolor').change(()=>{
    var colorVal = $('#bodycolor').val()
    headColor(colors[colorVal],colorVal)
})
// Changing mouth colors
$('#mouthcolor').change(()=>{
    var colorVal = $('#mouthcolor').val()
    mouthColor(colors[colorVal],colorVal)
})
// Changing eyes colors
$('#eyescolor').change(()=>{
    var colorVal = $('#eyescolor').val()
    eyesColor(colors[colorVal],colorVal)
})
// Changing ears colors
$('#earscolor').change(()=>{
    var colorVal = $('#earscolor').val()
    earsColor(colors[colorVal],colorVal)
})
// Changing eyes shape
$('#eyeshape').change(()=>{
    var shape = parseInt($('#eyeshape').val())
    eyeVariation(shape)
})
// Changing decoration pattern
$('#decoration').change(()=>{
    var deco = parseInt($('#decoration').val())
    decorationVariation(deco)
})
// Changing decoration middle
$('#decorationMid').change(()=>{
    var deco = parseInt($('#decorationMid').val())
    decorationMidColor(colors[deco], deco)
})
// Changing decoration side
$('#decorationSide').change(()=>{
    var deco = parseInt($('#decorationSide').val())
    decorationSideColor(colors[deco], deco)
})
// Changing animation
$('#animation').change(()=>{
    var animationVal = parseInt($('#animation').val())
    animationVariation(animationVal)
})