Assigment - Animations

Using the repository from previous lessons implement Animations for the cats. We encourage you to experiment in this assignment and rewrite the repository code to suit your earlier cat design and your own project.

When then with your code, share it below!

If you will have issues with the assignment, feel free to post your questions below.

Done, and it was good fun!
AnimationsAssignment

CSSAnimationsAssignment
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);
    }
}

.movingEyes {
    animation: moveEyes 2s infinite;
}

@keyframes moveEyes {
    0% {
        left: -32px;
    }
    33% {
        left: 0px;
    }
    66% {
        left: -50px;
    }
    100% {
        left: -32px;
    }
}

.midDotSpin {
    animation: midDotSpinning 2s infinite;
}

@keyframes midDotSpinning {
    0% {
        transform: rotate3d(0);
    }
    50% {
        transform: rotate3d(0, 1, 0, 3.14rad);
    }
    100% {
        transform: rotate3d(0);
    }
}

.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;
    }
}

.tailWig {
    animation: wiggelyTail 1s infinite;
}

@keyframes wiggelyTail {
    0% {
        transform: skewY(0deg)
    }
    33% {
        transform: skewY(20deg)
    }
    90%{
        transform: skewY(-20deg)
    }
    100% {
        transform: skewY(0deg)
    }
}

.whiskShake {
    animation: shakeWhisks 3s infinite;
}

@keyframes shakeWhisks {
    0% {
        transform: skewY(0deg)
    }
    33% {
        transform: skewY(8deg)
    }
    90%{
        transform: skewY(-8deg)
    }
    100% {
        transform: skewY(0deg)
    }
}

.sayHello {
    animation: wink 1s infinite;
}

@keyframes wink {
    0% {
        transform: rotate(0deg)
    }
    33% {
        transform: rotate(35deg)
    }
    90%{
        transform: rotate(-35deg)
    }
    100% {
        transform: rotate(0deg)
    }
}
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">Bears-Factory</h1>
        <p class="c-white">Create your custom Bear</p>
    </div>
        <div class="row">
            <div class="col-lg-4 catBox m-3 light-b-shadow">
                <div class="cat">
                    <div id="catEars" 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 id="catEyes" 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 id="whiskLeft" class="cat__whiskers-left"></div>
                        <div id="whiskRight" 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 id="pawRIGHT" class="cat__paw-right"></div>
                        <div id="pawRIGHTINNER" class="cat__paw-right_inner"></div>

                        <div class="cat__paw-leftLower"></div>
                        <div class="cat__paw-leftLower_inner"></div>

                        <div class="cat__paw-rightLower"></div>
                        <div class="cat__paw-rightLower_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 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 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 class="form-group">
                    <label for="formControlRange"><b>Ears & Paws</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="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>Decoration Style</b><span class="badge badge-dark ml-2" id="decorationname"></span></label>
                    <input type="range" min="1" max="7" class="form-control-range" id="decorationstyle">
                </div>
                
                <div class="form-group">
                    <label for="formControlRange"><b>Decoration Center 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">
                </div>
                <div class="form-group">
                    <label for="formControlRange"><b>Decoration Sides 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">
                </div>
                <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="7" 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>

catSettings.js

var colors = Object.values(allColors())

var defaultDNA = {
    "headColor" : 11,
    "mouthColor" : 13,
    "eyesColor" : 11,
    "earsColor" : 18,
    //Cattributes
    "eyesShape" : 7,
    "decorationPattern" : 4,
    "decorationMidcolor" : 15,
    "decorationSidescolor" : 20,
    "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)
    $('#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)
    $('#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()
  console.log(colorVal)
  earsColor(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)
})



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 be 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 head and 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 cat
}

function mouthColor(color,code) {
    $('.cat__mouth-contour, .cat__tail, .cat__chest_inner').css('background', '#' + color)  //This changes the color of mouth
    $('#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--left, .cat__eye--right').css('background', '#' + color)  //This changes the color of eyes
    $('#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) {
    $('.cat__ear--left, .cat__ear--right, .cat__paw-left, .cat__paw-right, .cat__paw-leftLower, .cat__paw-rightLower').css('background', '#' + color)  //This changes the color of 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
}

function decorationMidColorVar(color,code) {
    console.log(color + code)
    $('.cat__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)
    $('.cat__head-dots_first, .cat__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
//###################################################
//Variation functions
function eyeVariation(num) {

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

        case 1:
            normalEyes()
            $('#eyename').html('Straight')
            break
        case 2:
            normalEyes()
            $('#eyename').html('Chill')
            eyesType1()
            break
        case 3:
            normalEyes()
            $('#eyename').html('Happy')
            eyesType2()
            break
        case 4:
            normalEyes()
            $('#eyename').html('Right')
            eyesType3()
            break
        case 5:
            normalEyes()
            $('#eyename').html('Left')
            eyesType4()
            break
        case 6:
            normalEyes()
            $('#eyename').html('Sad')
            eyesType5()
            break
        case 7:
            normalEyes()
            $('#eyename').html('Huge')
            setTimeout(eyesType6, 10);
            break
        default: 
                console.log(num)
                break

    }

}

function decorationVariation(decostyle) {
    $('#dnadecoration').html(decostyle)
    switch (decostyle) {
        case 1:
            $('#decorationname').html('Deco1')
            normaldecoration()
            break
        case 2:
            normaldecoration()
            $('#decorationname').html('Deco2')
            decostyle1()
            break
        case 3:
            normaldecoration()
            $('#decorationname').html('Deco3')
            decostyle2()
            break
        case 4:
            normaldecoration()
            $('#decorationname').html('Deco4')
            decostyle3()
            break
        case 5:
            normaldecoration()
            $('#decorationname').html('Deco5')
            setTimeout(decostyle4, 10)
            break
        case 6:
            normaldecoration()
            $('#decorationname').html('Deco6')
            setTimeout(decostyle5, 10)
            break
      
        case 7:
            normaldecoration()
            $('#decorationname').html('Deco7')
            setTimeout(decostyle6, 10)
            break
        }

        
}

//AnimationSwitcher
function animationsPlayer(anim) {
    $('#dnaanimation').html(anim)
    switch (anim) {
        case 1:
            $('#animationName').html('Wobbely Head')
            animationType1();
            break
        case 2:
            $('#animationName').html('Side Looking')
            animationType2();
            break
        case 3:
            
            $('#animationName').html('Deco Twist')
            animationType3();
            break
        case 4:
            
            $('#animationName').html('Big Ears')
            animationType4();
            break
        case 5:
            
            $('#animationName').html('Wiggley Tail')
            animationType5();
            break
        case 6:
            
            $('#animationName').html('Whiskers Shake')
            animationType6();
            break
      
        case 7:
            
            $('#animationName').html('Winking')
            animationType7();
            break
        }
}


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

function animationType2() {
   resetAnimation();
   $("#catEyes").addClass("movingEyes");
}

function animationType3() {
    resetAnimation();
    $("#midDot").addClass("midDotSpin");
 }

 function animationType4() {
    resetAnimation();
    $("#catEars").addClass("earScale");
 }

 function animationType5() {
    resetAnimation();
    $("#tail").addClass("tailWig");
 }

 function animationType6() {
    resetAnimation();
    $("#whiskLeft, #whiskRight").addClass("whiskShake");
 }

 function animationType7() {
    resetAnimation();
    $("#pawRIGHT, #pawRIGHTINNER").addClass("sayHello");
 }

function resetAnimation(){
    $("#head").removeClass("movingHead");
    $("#catEyes").removeClass("movingEyes");
    $("#midDot").removeClass("midDotSpin");
    $("#catEars").removeClass("earScale");
    $("#tail").removeClass("tailWig");
    $("#whiskLeft, #whiskRight").removeClass("whiskShake");
    $("#pawRIGHT, #pawRIGHTINNER").removeClass("sayHello");
    
}

//EyeShape functions
async function normalEyes() {
    await $('.cat__eye').find('span').css('border', 'none')
    await $('.cat__eye').find('span').css('transform', 'scale(1)')
}

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

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

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

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

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

async function eyesType6() {
    await $('.cat__eye').find('span').css('transform', 'scale(1.3)')
}

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

async function decostyle1() {
    await $('.cat__head-dots').css({ "top": "6px", "border-radius": "30% 30% 50% 50%"})
    await $('.cat__head-dots_first').css({ "transform": "rotate(30deg)", "height": "35px", "width": "14px", "top": "1px", "border-radius": "50% 0 50% 50%" })
    await $('.cat__head-dots_second').css({ "transform": "rotate(-30deg)", "height": "35px", "width": "14px", "top": "1px", "border-radius": "50% 0 50% 50%" })
}

async function decostyle2() {
    await $('.cat__head-dots').css({ "top": "6px", "border-radius": "30% 30% 50% 50%"})
    await $('.cat__head-dots_first').css({ "transform": "rotate(30deg)", "height": "35px", "width": "14px", "top": "1px", "border-radius": "50% 0 50% 50%" })
    await $('.cat__head-dots_second').css({ "transform": "rotate(-30deg)", "height": "35px", "width": "14px", "top": "1px", "border-radius": "50% 0 50% 50%" })

    await $('.cat__head-dots').css({ "transform": "scale(0.3)"})
    await $('.cat__head-dots').css({ "top": "-5"})
  }

  async function decostyle3() {
    await $('.cat__head-dots').css({ "top": "6px", "border-radius": "30% 30% 50% 50%"})
    await $('.cat__head-dots_first').css({ "transform": "rotate(30deg)", "height": "35px", "width": "14px", "top": "1px", "border-radius": "50% 0 50% 50%" })
    await $('.cat__head-dots_second').css({ "transform": "rotate(-30deg)", "height": "35px", "width": "14px", "top": "1px", "border-radius": "50% 0 50% 50%" })
    await $('.cat__head-dots').css({ "transform": "rotate(180deg)"})
    await $('.cat__head-dots').css({ "top": "-5"})   
  }

  async function decostyle4() {   
    await $('.cat__head-dots_first').css({"height": "60px", "width": "15px"})
    await $('.cat__head-dots_second').css({"height": "60px", "width": "15px"})   
  }

  async function decostyle5() {   
    await $('.cat__head-dots').css({ "height": "10px", "width": "5px"})
    await $('.cat__head-dots_first').css({"height": "10px", "width": "5px"})
    await $('.cat__head-dots_second').css({"height": "10px", "width": "5px"})   
  }

  async function decostyle6() {   
    await $('.cat__head-dots').css({ "transform": "rotate(33deg)"})
    await $('.cat__head-dots_first').css({"transform": "rotate(33deg)"})
    await $('.cat__head-dots_second').css({"transform": "rotate(33deg)"})   
  }





1 Like

Fiinally done ooof i dont know how to put the little preview of my cat, im sorry about that :frowning:

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
}


function headColorF(color,code) {
    $('.cat__head, .cat__chest, .cat__tail, .cat__paw-left, .cat__paw-right').css('background', '#' + color)  //This changes the color of the cat
    $('#fur').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 patternColorF(color,code) {
    $('.cat__chest_inner, .cat__mouth-contour, .patch-right, .patch-left, .cat__head-dots, .cat__head-dots_first, .cat__head-dots_second').css('background', '#' + color)  //This changes the color of the cat
    $('#pattern').html('code: '+code) //This updates text of the badge next to the slider
    $('#dnapattern').html(code) //This updates the body color part of the DNA that is displayed below the cat
}  
 
function earsColorF(color,code) {
    $('.cat__ear--left, .cat__ear--right').css('background', '#' + color)  //This changes the color of the cat
    $('#ears').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 eyesColorF(color,code) {
    $('.cat__eye--left, .cat__eye--right').css('background', '#' + color)  //This changes the color of the cat
    $('#eyes').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 whiskersColorF(color,code) {
    $('.cat__whiskers-left, .cat__whiskers-right, .cat__whiskers-left_1, .cat__whiskers-right_1, .cat__whiskers-left_2, .cat__whiskers-right_2').css('background', '#' + color)  //This changes the color of the cat
    $('#whisks').html('code: '+code) //This updates text of the badge next to the slider
    $('#dnawhiskers').html(code) //This updates the body color part of the DNA that is displayed below the cat
}
  
function pawsColorF(color,code) {
    $('.cat__paw-left_inner, .cat__paw-right_inner, .hand_left, .hand_right').css('background', '#' + color)  //This changes the color of the cat
    $('#paws').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
}
   

//Cattributes
function eyeVariation(num) {

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

    switch (num) {
        case 1:
            normalEyes()
            $('#eye5').html('Basic')
            break

        case 2:
            normalEyes()
            $('#eye5').html('Stylish')
            eyesType1()
            break 

        case 3:
            normalEyes()
            $('#eye5').html('Boxy')
            eyesType2()
            break 

        case 4:
            normalEyes()
            $('#eye5').html('Stylish 2')
            eyesType3()
            break 

        case 5:
            normalEyes()
            $('#eye5').html('Sad')
            eyesType4()
            break  
}

}

function decorationShape(num) {
    $('#dnadecoration').html(num)
    switch (num) {
        case 1:
            $('#deco1').html('Basic')
            normaldecoration()
            break

        case 2:
            normaldecoration()
            $('#deco1').html('Dots')
            dotsdecoration()
            break
        
        case 3:
            normaldecoration()
            $('#deco1').html('Horizontal')
            horizontaldecoration()
            break

        case 4:
            normaldecoration()
            $('#deco1').html('T')
            tdecoration()
            break

        case 5:
            normaldecoration()
            $('#deco1').html('Swords')
            swordsdecoration()
            break

    }
}

function animationF (num){
  $('#dnaanimation').html(num);
    switch(num){

        case 1:
            resetAnimation()
            $('#deco4').html('Basic')
            break

        case 2:
            resetAnimation()
            $('#deco4').html('No, Sir')
            animationType1(); 
            break

        case 3:
            resetAnimation()
            $('#deco4').html('Happy')
            animationType2();
            break

        case 4:
            resetAnimation()
            $('#deco4').html('Dancing')
            animationType3();    
            break 

        case 5:
            resetAnimation()
            $('#deco4').html('Curious')
            animationType4();      
            break 
  }
} 



function animationType1(){ 
    $("#head").addClass("movingHead");
}

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

function animationType3(){ 
    $("#paw1").addClass("movingArms");
    $("#paw2").addClass("movingArms");  
    
}

function animationType4(){ 
    $("#eye1").addClass("movingEyes"); 
    $("#eye2").addClass("movingEyes");  
}


function resetAnimation(){
    $("#head").removeClass("movingHead");
    $("#tail").removeClass("movingTail");
    $("#paw1").removeClass("movingArms");
    $("#paw2").removeClass("movingArms");
    $("#eye1").removeClass("movingEyes");  
    $("#eye2").removeClass("movingEyes");    
}


async function normalEyes() {
$('.cat__eye--right, .cat__eye--left').css('border-radius', '50%')
}

async function eyesType1() { 
$('.cat__eye--right').css('border-radius', '50% 20% 50% 50%')
$('.cat__eye--left').css('border-radius', '20% 50% 50% 50%')
}

async function eyesType2() { 
$('.cat__eye--right, .cat__eye--left').css('border-radius', '30% 30% 40% 40%')
}

async function eyesType3() { 
$('.cat__eye--right').css('border-radius', '50% 50% 50% 10%')
$('.cat__eye--left').css('border-radius', '50% 50% 10% 50%')
}

async function eyesType4() { 
$('.cat__eye--right').css('border-radius', '50% 90% 20% 50%')
$('.cat__eye--left').css('border-radius', '90% 50% 50% 20%')
}


function decorationMidColorF(color,code) {
    $('.cat__head-dots').css('background', '#' + color)  //This changes the color of the cat
    $('#deco2').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 decorationSideColorF(color,code) {
    $('.cat__head-dots_first, .cat__head-dots_second').css('background', '#' + color)  //This changes the color of the cat
    $('#deco3').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
}

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": "-3px", "border-radius": "40% 40% 65% 65%" })
    $('.cat__head-dots_first').css({ "transform": "rotate(0deg)", "height": "36px", "width": "12px", "top": "1px","left": "-16px", "border-radius": "65% 15% 65% 65%" })
    $('.cat__head-dots_second').css({ "transform": "rotate(0deg)", "height": "36px", "width": "12px", "top": "1px", "border-radius": "15% 65% 65% 65%" })
} 

async function dotsdecoration() {
    //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": "9px", "width": "9px", "top": "25px", "border-radius": "50%" })
    $('.cat__head-dots_first').css({ "transform": "rotate(0deg)", "height": "9px", "width": "9px", "top": "0px", "border-radius": "50%" })
    $('.cat__head-dots_second').css({ "transform": "rotate(0deg)", "height": "9px", "width": "9px", "top": "0px","border-radius": "50%" })
} 

async function horizontaldecoration() {
    //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": "9px", "width": "9px", "top": "25px", "border-radius": "50%" })
    $('.cat__head-dots_first').css({ "transform": "rotate(0deg)", "height": "9px", "width": "40px", "top":"0px", "left": "-50px", "border-radius": "50% 20% 20% 50%" })
    $('.cat__head-dots_second').css({ "transform": "rotate(0deg)", "height": "9px", "width": "40px", "top":"0px", "border-radius": "20% 50% 50% 20%" })
} 
   
async function tdecoration() {
    //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": "50px", "width": "9px", "top": "45px", "border-radius": "20% 20% 50% 50%" })
    $('.cat__head-dots_first').css({ "transform": "rotate(0deg)", "height": "9px", "width": "40px", "top":"-10px", "left": "-50px", "border-radius": "10% 50% 10% 50%" })
    $('.cat__head-dots_second').css({ "transform": "rotate(0deg)", "height": "9px", "width": "40px", "top":"-10px", "border-radius": "50% 10% 50% 10%" })
} 

async function swordsdecoration() {
    //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": "-3px", "border-radius": "40% 40% 65% 65%" })
    $('.cat__head-dots_first').css({ "transform": "rotate(8deg)", "height": "36px", "width": "12px", "top": "1px","left": "-16px", "border-radius": "65% 15% 65% 65%" })
    $('.cat__head-dots_second').css({ "transform": "rotate(-8deg)", "height": "36px", "width": "12px", "top": "1px", "border-radius": "15% 65% 65% 65%" })
} 
 
Settings

var colors = Object.values(allColors())

var defaultDNA = {
    "headcolor" : 10,
    "patternColor" : 25,
    "earsColor" : 10,
    "eyesColor" : 25,
    "whiskerColor" : 10,
    "pawsColor" : 25,
    //Cattributes
    "eyesShape" : 1,
    "decorationPattern" : 1,
    "decorationMidcolor" : 25,
    "decorationSidescolor" : 25,
    "animation" :  1,
    "lastNum" :  1
    }

// when page load
$( document ).ready(function() {
    $('#dnabody').html(defaultDNA.headColor);
    $('#dnapattern').html(defaultDNA.patternColor); 
    $('#dnaears').html(defaultDNA.earsColor);
    $('#dnaeyes').html(defaultDNA.eyesColor);
    $('#dnawhiskers').html(defaultDNA.whiskerColor);
    $('#dnapaws').html(defaultDNA.pawsColor); 
    
    $('#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 += $('#dnapattern').html()
    dna += $('#dnaears').html()
    dna += $('#dnaeyes').html()
    dna += $('#dnawhiskers').html()
    dna += $('#dnapaws').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){
    headColorF(colors[dna.headcolor],dna.headcolor)
    $('#bodycolorH').val(dna.headcolor)

    patternColorF(colors[dna.patternColor],dna.patternColor)
    $('#patternColorH').val(dna.patternColor)

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

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

    whiskersColorF(colors[dna.whiskerColor],dna.whiskerColor)
    $('#whiskersColorH').val(dna.whiskerColor)

    pawsColorF(colors[dna.pawsColor],dna.pawsColor)
    $('#pawsColorH').val(dna.pawsColor) 

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

    decorationShape(dna.decorationPattern)
    $('#eyesShapeH').val(dna.eyesShape)
  
    decorationMidColorF(colors[dna.decorationMidcolor],dna.decorationMidcolor)
    $('#decoMidColorH').val(dna.decorationMidcolor) 

    decorationSideColorF(colors[dna.decorationSidescolor],dna.decorationSidescolor)
    $('#decoSideColorH').val(dna.decorationSidescolor) 

    animationF(dna.animation) 
    $('#animationH').val(dna.animation) //<----problem is here somehwere, either the funct
}
// Changing cat colors
$('#bodycolorH').change(()=>{
    var colorVal = $('#bodycolorH').val()
    headColorF(colors[colorVal],colorVal)
})
 
// Changing patterncolor
$('#patternColorH').change(()=>{ 
  var colorVal = $('#patternColorH').val()
  patternColorF(colors[colorVal],colorVal)
})  

// Changing ears color
$('#earsColorH').change(()=>{ 
  var colorVal = $('#earsColorH').val()
  earsColorF(colors[colorVal],colorVal)
})

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

// Changing whiskers color
$('#whiskersColorH').change(()=>{ 
  var colorVal = $('#whiskersColorH').val()
  whiskersColorF(colors[colorVal],colorVal)
})

// Changing paws color
$('#pawsColorH').change(()=>{ 
  var colorVal = $('#pawsColorH').val()
  pawsColorF(colors[colorVal],colorVal)
})

//changing the shape of the eyes
$('#eyesShapeH').change(()=>{ 
  var shape = parseInt($('#eyesShapeH').val())
  eyeVariation(shape)
}) 

// changing the shape of the foreheads decorations
$('#decoShapeH').change(()=>{ 
  var shape = parseInt($('#decoShapeH').val())
  decorationShape(shape)
}) 

//changing the color of the decoration in the middle
$('#decoMidColorH').change(()=>{ 
  var colorVal = $('#decoMidColorH').val()
  decorationMidColorF(colors[colorVal],colorVal)
})

//changing the color of the side deoorations
$('#decoSideColorH').change(()=>{ 
  var colorVal = $('#decoSideColorH').val()
  decorationSideColorF(colors[colorVal],colorVal)
})

//changing the animations
$('#animationH').change(()=>{ 
  var animationVal = parseInt( $('#animationH').val() )
 animationF(animationVal)
})
Animations
.movingHead{
    animation:moveHead 3s 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: 14px;
    }

    12% {
        left: 20px;
    }

    25% {
        left: 15px;
    }

    37% {
        left: 10px;
    }

    50% {
        left: 5px;   
    }

    62% {
        left: 0px;
    }

    75% {
        left: 5px;
    }

    87% {
        left: 10px;
    }

    100% {
        left: 14px; 
    }
}



Index
<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="patch-left"></div>
                                <div class="cat__eye--left">
                                    <span id="eye1" class="pupil-left"></span>
                                </div>

                            <div class="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__whiskers-left">
                            <div class="cat__whiskers-left_1"></div>
                            <div class="cat__whiskers-left_2"></div> 
                        </div>
                        
                        <div class="cat__whiskers-right">
                            <div class="cat__whiskers-right_1"></div>
                            <div class="cat__whiskers-right_2"></div> 
                        </div>
                         
                        <div class="cat__mouth-right"></div>
                        <div class="cat__mouth-left"></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 class="hand_left">
                                <div class="fingers"></div>
                            </div>
                        </div>
                        <div class="cat__paw-left_inner"></div>


                        <div id="paw2" class="cat__paw-right">
                            <div class="hand_right">
                                <div class="fingers"></div>
                            </div>
                        </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="dnapattern"></span>
                         <span id="dnaears"></span>
                         <span id="dnaeyes"></span>  
                         <span id="dnawhiskers"></span>
                         <span id="dnapaws"></span>
                        
                         <!-- Cattributes -->
                         <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 cattributes m-2 light-b-shadow">

<!-- Cat colors -->
        <div id="catColors">
            <div class="form-group">
                <label for="formControlRange"><b>Fur</b><span class="badge badge-dark ml-2" id="fur"></span></label>
                <input type="range" min="0" max="98" class="form-control-range" id="bodycolorH">
            </div>  
                 
            <div class="form-group">
                <label for="formControlRange"><b>Pattern</b><span class="badge badge-dark ml-2" id="pattern"></span></label>
                <input type="range" min="0" max="98" class="form-control-range" id="patternColorH">
            </div>
 
            <div class="form-group">
                <label for="formControlRange"><b>Ears</b><span class="badge badge-dark ml-2" id="ears"></span></label>
                <input type="range" min="0" max="98" class="form-control-range" id="earsColorH">
            </div>

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

            <div class="form-group">
                <label for="formControlRange"><b>Whiskers</b><span class="badge badge-dark ml-2" id="whisks"></span></label>
                <input type="range" min="0" max="98" class="form-control-range" id="whiskersColorH">
            </div>
  
            <div class="form-group">
                <label for="formControlRange"><b>Paws</b><span class="badge badge-dark ml-2" id="paws"></span></label>
                <input type="range" min="0" max="98" class="form-control-range" id="pawsColorH">  
            </div>   

            <div class="form-group">
                <label for="formControlRange"><b>Eyes Shape</b><span class="badge badge-dark ml-2" id="eye5"></span></label>
                <input type="range" min="1" max="5" class="form-control-range" id="eyesShapeH">  
            </div>  

            <div class="form-group">
                <label for="formControlRange"><b>Decoration</b><span class="badge badge-dark ml-2" id="deco1"></span></label>
                <input type="range" min="1" max="5" class="form-control-range" id="decoShapeH">  
            </div>

            <div class="form-group">
                <label for="formControlRange"><b>Mid Color</b><span class="badge badge-dark ml-2" id="deco2"></span></label>
                <input type="range" min="0" max="98" class="form-control-range" id="decoMidColorH">  
            </div>

            <div class="form-group">
                <label for="formControlRange"><b>Sides Color</b><span class="badge badge-dark ml-2" id="deco3"></span></label>
                <input type="range" min="0" max="98" class="form-control-range" id="decoSideColorH">  
            </div>

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

               
        </div>

            </div>

            </div>
            <br>

        </div>



    </div>
    <footer align="left">
        <p>Ivan on Tech Academy Bootcamp April 2021</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>
1 Like
Cat CSS
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: inherit;
}
html {
    box-sizing: border-box;
    overflow-y: scroll;
}
body {
    background: #dad6d6;   
 
}

.cat__head {
    position: relative;
    top:-5;
    width: 200px;
    height: 200px;
    border: 6px solid transparent;
    -webkit-border-radius: 50% 50% 45% 45%;
    border-radius: 50% 50% 45% 45%;
    background: #141414;
    z-index: 20;
}
.cat__head-dots {
    position:absolute;
    top: -3px;  
    left: 88px;
    height: 48px;
    width: 14px;
    background:  #160d0d;
    -webkit-border-radius: 25% 25% 65% 65%;
    border-radius: 40% 40% 65% 65%;
}

.cat__head-dots_first {
    content: '';
    position:absolute;
    top: 1px;
    left:-16px;
    width: 12px;      
    height: 36px;
    background: #0f0909; 
    border-radius: 65% 15% 65% 65%;
}
.cat__head-dots_second {
    content: '';
    position:absolute;
    top: 1px;
    left:18px;
    width: 12px;    
    height: 36px;
    background: #271414;
    border-radius: 15% 65% 65% 65%;
}

.cat__ear {
    position: relative;
}
.cat__ear--left, .cat__ear--right {
    position: absolute;
    top: -15px;
    left: 60px;
    width: 100px;
    height: 100px;
    border: 5px solid  transparent;
    border-radius: 70% 10% 50% 30%;
    background: #141414;
    display: flex;
    justify-content: center;
    align-items: center;
}
.cat__ear--right {
    transform: scale(-1, 1) rotate(0deg);
    left:-10px;

}
.cat__ear--left {
    transform: rotate(10deg);
    left:110px;

}
.cat__ear--left-inside, .cat__ear--right-inside {
    position:absolute;
    top:10px;
    left:45px;
    width: 40px;
    height: 40px;
    border-radius: 70% 10% 50% 30%;
    background: #ffffff5d;
}
.patch-left {
    position:absolute;
    width: 60px;
    height: 50px; 
    background: #96000080;
    border-radius: 15% 45% 45% 55%;
    top:3px;
    left:83;
    transform: scale(-1, 1) rotate(0deg);
}
.patch-right {
    position:absolute;
    width: 60px;
    height: 50px;
    background: #96000080;
    border-radius: 15% 45% 45% 55%;
    top:3px;
    left:-7px;
} 
.cat__eye {
    position: relative;
    top: 50px;
    left: 27px;
    display: flex;
}
.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: 35px;
    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: 55px;
    left: 85px;
    border:solid 2px;
    border-color: #c800005e;
    background-color: #ff7878;
    height:13px;
    width: 20px;
    position:relative;
    border-radius:30% 30% 79% 79%;
    z-index: 100;
}
.cat__mouth-contour {
    position: absolute;
    top: 100px;
    left: 20px;
    background-color: #111111c2;
    border-radius: 40% 40% 50% 50%;
    width: 150px;
    height: 85px;
    -webkit-border-radius: 55% 55% 60% 60%;
}
.cat__mouth-left, .cat__mouth-right {
    position: absolute;
    top: 108px;
    width: 34px;
    height: 28px;
    border: solid 4px rgb(255, 255, 255);
    border-color: #fbfbfb00 #141414 #141414;
    border-radius:  50% 50% 60% 60%;
}
.cat__mouth-left {
    left: 61px;
}
.cat__mouth-right {
    left: 94px;
}
.cat__whiskers-left, .cat__whiskers-right {
    position: relative;
}
.cat__whiskers-left, .cat__whiskers-right, .cat__whiskers-left_1, .cat__whiskers-right_1, .cat__whiskers-left_2, .cat__whiskers-right_2 {
    width: 82px;
    height: 4px;
    background: #820000;
}
.cat__whiskers-left_1, .cat__whiskers-right_1, .cat__whiskers-left_2, .cat__whiskers-right_2 {
    content: '';
    background: #820000;
    position: absolute;
}
.cat__whiskers-left {
    top: 60px;
    left: -20px;
}
.cat__whiskers-left_1 {
    top: -13px;
    transform: rotate(11deg);
    background: #820000;
}
.cat__whiskers-left_2 {
    top: 10px;
    left:4px;
    transform: rotate(-6deg);
    background: #820000; 
} 
.cat__whiskers-right {
    top: 55px;
    left: 125px;
}
.cat__whiskers-right_1 {
    top: -13px;
    transform: rotate(-11deg);
    background: #820000;
} 
.cat__whiskers-right_2 {
    top: 10px;
    right:2;
    transform: rotate(6deg);
    background: #820000;
}
.cat__body {
    position: relative;
}
.cat__chest {
    position: absolute;
    left: 24px;
    top: -49px;
    width: 150px;
    height: 150px;
    background: #141414;
    border: 5px solid  transparent;
    border-radius: 30% 30% 40% 40%;
    z-index: 3;
}
.cat__chest_inner {
    content: '';
    position: absolute;
    top: -5px;
    left: 60px;
    width: 80px;
    height: 100px;
    border-radius: 50%;
    background: #5a0000;
    z-index: 4;
}
.cat__paw-left, .cat__paw-right {
    position: absolute;
    top: 5px;
    background-color: #141414;
    border: solid 3px;
    border-color: #14141400 #14141440;
    width: 33px;
    height: 95px;
    border-radius: 25% 25% 40% 40%;
    z-index: 5;
}

.cat__paw-right_inner {
    content: '';
    position: absolute;
    top: 60px;
    left: 133px;
    width:50px;
    height:40px;
    border: solid 2px;
    border-color: #14141460;
    background-color: #960000;
    border-radius: 50% 50% 30% 30%;
    z-index: 2;
}

.cat__paw-left_inner {
    content: '';
    position: absolute;
    top: 60px;
    left: 15px;
    width:50px;
    height:40px;
    border: solid 2px;
    border-color: #14141460;   
    background-color: #960000;
    border-radius: 50% 50% 30% 30%;
    z-index: 2;
}
.cat__paw-left {
    left: 135px;
    border-radius: 15% 15% 40% 40%;
}
.hand_left {
    position:relative;
    background-color: #960000;
    border: solid 2px;
    border-color: #14141460;
    width: 43px;
    height: 30px;
    border-radius: 60% 60% 40% 40%;
    top:65;
    right: 8;
}
.cat__paw-left::after {
    left: -32px;
}
.cat__paw-right {
    left: 30px;
    border-radius: 15% 15% 40% 40%;
}
.hand_right {
    position:relative;
    background-color: #960000;
    border: solid 2px;
    border-color: #14141460;
    width: 43px;
    height: 30px;
    border-radius: 60% 60% 40% 40%;
    top:65;
    left:-8;
}
.cat__paw-right::after {
    left: 16px;
}
.fingers {
    width: 15px;
    height: 22px;
    border: solid 4px #ffffff;
    border-color: #14141400 #14141435 #14141400;
    border-radius:  60px 60px 30px 30px;
    position:relative;
    top:6px;
    left:12px;
  }
.cat__tail {
    position: absolute;
    top: 20px;
    left: 145px;
    width: 90px;
    height: 30px;
    background: #141414;
    border: 5px solid transparent;
    border-radius: 45%;
    z-index: 1;
    transform: rotate(-25deg);
}
/* .cursor {
    position: absolute;
    height: 23px;
    width: 23px;
    border: none;
    border-radius: 50%;
    background: #b40660;
    transform: translateX(-50%) translateY(-50%);
    z-index: 4000;
} */
1 Like

That was a fun exercise, never animated anything in CSS before. Here is my updated 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/animations.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>
                <div class="form-group">
                    <label for="formControlRange"><b>Mouth, Body and 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 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>Ears and Paws</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>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="formControlRange"><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="formControlRange"><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="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="assets/js/colors.js"></script>
  <script src="assets/js/catSettings.js"></script>
  <script src="assets/js/catFactory.js"></script>

</html>

catSettings.js


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)
    $('#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)
})

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

$('#earcolor').change(()=>{
  var colorVal = $('#earcolor').val()
  earColor(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, .cat__chest_inner, .cat__tail').css('background', '#' + color)  //This changes the mouth and tail 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 and tail color part of the DNA that is displayed below the cat
}

function eyeColor(color,code) {
    $('.cat__eye').find('span').css('background', '#' + color)  //This changes the eye color of the cat
    $('#eyecode').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 earColor(color,code) {
    $('.cat__ear--left, .cat__ear--right, .cat__paw-left, .cat__paw-right, .cat__paw-left_inner, .cat__paw-right_inner').css('background', '#' + color)  //This changes the ear and paw 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 decorationMidColor(color,code) {
    $('.cat__head-dots').css('background', '#' + color)  //This changes the mid decoration color of the cat
    $('#midcolorcode').html('code: '+code) //This updates text of the badge next to the slider
    $('#dnadecorationMid').html(code) //This updates the eye color part of the DNA that is displayed below the cat
}

function decorationSidesColor(color,code) {
    $('.cat__head-dots_first, .cat__head-dots_second').css('background', '#' + color)  //This changes the side decoration color of the cat
    $('#sidecolorcode').html('code: '+code) //This updates text of the badge next to the slider
    $('#dnadecorationSides').html(code) //This updates the eye 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('Looking Up')
            eyesType2()
            break
        case 4:
            normalEyes()
            $('#eyeName').html('Looking Left')
            eyesType3()
            break
        case 5:
            normalEyes()
            $('#eyeName').html('Looking Right')
            eyesType4()
            break
        case 6:
            normalEyes()
            $('#eyeName').html('Focused')
            eyesType5()
            break
        case 7:
            normalEyes()
            $('#eyeName').html('Dreamy')
            eyesType6()
            break
        default:
            console.log("Undefined eyeshape : "+ num)
    }
}

function decorationVariation(num) {
    $('#dnadecoration').html(num)
    switch (num) {
        case 1:
            $('#decorationName').html('Basic')
            normaldecoration()
            break
        case 2:
            $('#decorationName').html('Long')
            normaldecoration()
            decorationType1()
            break
        case 3:
            $('#decorationName').html('Longer')
            normaldecoration()
            decorationType2()
            break
        case 4:
            $('#decorationName').html('Long to Left')
            normaldecoration()
            decorationType3()
            break
        case 5:
            $('#decorationName').html('Long to Right')
            normaldecoration()
            decorationType4()
            break
        case 6:
            $('#decorationName').html('Long Spread')
            normaldecoration()
            decorationType5()
            break
        case 7:
            $('#decorationName').html('Longer Spread')
            normaldecoration()
            decorationType6()
            break
        default:
            console.log("Undefined pattern : "+ num)
    }
}

function animationVariation(num){
    $('#dnaanimation').html(num)
    switch (num) {
        case 1:
            $('#animationName').html("Move Head")
            animationType1();
            break;
        case 2:
            $('#animationName').html("Wag Tail")
            animationType2();
            break;
        case 3:
            $('#animationName').html("Kitty Eyes")
            animationType3();
            break;
        case 4:
            $('#animationName').html("Wiggle Ears")
            animationType4();
            break;
        case 5:
            $('#animationName').html("Go Crazy")
            animationType5();
            break;
        default:
            $('#animationName').html("No Animation")
            resetAnimation();
            console.log("Undefined animation : "+ num)
            break;
    }
}

async function resetAnimation(){
    $("#head").removeClass("movingHead");
    $("#tail").removeClass("wagTail");
    $(".cat__eye").find('span').removeClass("kittyEyes");
    $(".cat__ear").removeClass("wiggleEar");
}

async function animationType1(){
    resetAnimation();
    $("#head").addClass("movingHead");
}

async function animationType2(){
    resetAnimation();
    $("#tail").addClass("wagTail");
}

async function animationType3(){
    resetAnimation();
    $(".cat__eye").find('span').addClass("kittyEyes");
}

async function animationType4(){
    resetAnimation();
    $(".cat__ear").addClass("wiggleEar");
}

async function animationType5(){
    resetAnimation();
    $("#head").addClass("movingHead");
    $("#tail").addClass("wagTail");
    $(".cat__eye").find('span').addClass("kittyEyes");
    $(".cat__ear").addClass("wiggleEar");
}


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

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

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

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

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

async function eyesType5() {
    await $('.cat__eye').find('span').css('border-top', 'solid 7px')
    await $('.cat__eye').find('span').css('border-bottom', 'solid 7px')
    await $('.cat__eye').find('span').css('border-left', 'solid 7px')
    await $('.cat__eye').find('span').css('border-right', 'solid 7px')
}

async function eyesType6() {
    //await $('.cat__eye').find('span').css('border-top', 'solid 7px')
    await $('.cat__eye').find('span').css('border-bottom', 'solid 7px')
    await $('.cat__eye').find('span').css('border-left', 'solid 7px')
    await $('.cat__eye').find('span').css('border-right', 'solid 7px')
}

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() {
    // 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%" })
}

async function decorationType2() {
    //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%" })
}

async function decorationType3() {
    // Long 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%" })
}

async function decorationType4() {
    // Long 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%" })
}

async function decorationType5() {
    // 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%" })
}

async function decorationType6() {
    //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%" })
}

animations.css

.movingHead{
    animation: rotateBackAndForth5 5s infinite;
}

.wagTail{
    animation: rotateBackAndForth25 3s infinite;
}

.kittyEyes{
    animation: sizeBigSmall 3s infinite;
}

.wiggleEar{
    animation: rotateBackAndForth5 2s infinite;
}

@keyframes vibrateX {
    0%{
        transform: translate(5px, 0px);
    }
    50%{
        transform: translate(-5px, 0px);
    }
    
}

@keyframes sizeBigSmall{
    0%{
        transform: scale(1);
    }
    30%{
        transform: scale(1.2);
    }
    60%{
        transform: scale(0.9);
    }
    100%{
        transform: scale(1);
    }
}

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

@keyframes rotateBackAndForth25{
    0%{
        transform: rotate(0deg);
    }
    30%{
        transform: rotate(25deg);
    }
    60%{
        transform: rotate(-25deg);
    }
    100%{
        transform: rotate(0deg);
    }
}
1 Like

Screenshot 2021-04-15 at 14.09.46

catFactory:


//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 bodyColor(color, code) {
    $('.body, .head, .foot-left, .foot-right').css('background', '#' + 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
}

function eyeColor(color, code) {
    $('.eyes').find('span').css('background', '#' + color);
    $('#eyecode').html('code: '+ code);
    $('#dnaeyes').html(code);
}

function bellyColor(color, code) {
    $('.mouth, .belly').css('background', '#' + color);
    $('#bellycode').html('code: '+ code);
    $('#dnabelly').html(code);
}

function earColor(color, code) {
    $('.ear, .inner-tail').css('background', '#' + color);
    $('#earcode').html('code: '+ code);
    $('#dnaears').html(code);
}

function tailColor(color, code) {
    $('.tail').css('background', '#' + color);
    $('#tailcode').html('code: '+ code);
    $('#dnatail').html(code);
}
function decorationMidColor(color, code) {
    $('.head-shapes').css('background', '#' + color)  //This changes the mid decoration color of the cat
    $('#middlecolorcode').html('code: ' + code) //This updates text of the badge next to the slider
    $('#dnadecorationMid').html(code) //This updates the eye color part of the DNA that is displayed below the cat
}

function decorationSidesColor(color, code) {
    $('.left_head-shape, .right_head-shape').css('background', '#' + color)  //This changes the side decoration color of the cat
    $('#sidecolorcode').html('code: ' + code) //This updates text of the badge next to the slider
    $('#dnadecorationSides').html(code) //This updates the eye 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()//reset to default
            $('#eyeName').html('Basic')//set the badge "Basic"
            break 
        case 2: 
            normalEyes()
            $('#eyeName').html('Chiller')
            eyesType1()
            break
        case 3: 
            normalEyes()
            $('#eyeName').html('Welling Up')
            eyesType2()
            break
        case 4:
            normalEyes()
            $('#eyeName').html('Down Left')
            eyesType3()
            break
        case 5:
            normalEyes()
            $('#eyeName').html('Down Right')
            eyesType4()
            break
        case 6: 
            normalEyes()
            $('#eyeName').html('Sleepy')
            eyesType5()
            break
        case 7: 
            normalEyes()
            $('#eyeName').html('Sour (left)')
            eyesType6()
            break
        case 8:
            normalEyes()
            $('#eyeName').html('Sour (right)')
            eyesType7()
            break
        case 9: 
            normalEyes()
            $('#eyeName').html('Cross-Eyed')
            eyesType8()
            break
        case 10:
            normalEyes()
            $('#eyeName').html('Wink')
            eyesType9()
            break
        case 11:
            normalEyes()
            $('#eyeName').html('Focus')
            eyesType10()
            break

        default:
            console.log("Undefined eyeshape : "+ num)
    }
}

function decorationVariation(num) {
    $('#dnadecoration').html(num)
    switch (num) {
        case 1:
            $('#patternName').html('Basic')
            normaldecoration()
            break
        case 2:
            normaldecoration()
            $('#patternName').html('Spread')
            headPattern1()
            break
        case 3:
            normaldecoration()
            $('#patternName').html('Long and Wide')
            headPattern2()
            break
        case 4:
            normaldecoration()
            $('#patternName').html('Tiny')
            headPattern3()
            break
        case 5:
            normaldecoration()
            $('#patternName').html('Upside Down')
            headPattern4()
            break
        
        case 6:
            normaldecoration()
            $('#patternName').html('Fringe')
            headPattern5()
            break

        case 7:
            normaldecoration()
            $('#patternName').html('Specks')
            headPattern6()
            break
    }
}

function animationVariation(num){
    $('#dnaanimation').html(num)
    switch (num){
        case 1: 
            noAnimation()
            $('#animationName').html('Still')
            break
        case 2:
            noAnimation()
            $('#animationName').html('Head and Ears Weave')
            animationType1()
            break
        case 3:
            noAnimation()
            $('#animationName').html('Ears Move')
            animationType2()
            break
        case 4:
            noAnimation()
            $('#animationName').html('Tail Moves')
            animationType3()
            break
        case 5:
            noAnimation()
            $('#animationName').html('Eyes Grow')
            animationType4()
            break
        case 6:
            noAnimation()
            $('#animationName').html('Whiskers Move')
            animationType5()
            break
        case 7:
            noAnimation()
            $('#animationName').html('Fat')
            animationType6()
            break
        case 8:
            noAnimation()
            $('#animationName').html('Eye Size')
            animationType7()
            break
        case 9:
            noAnimation()
            $('#animationName').html('Multi')
            animationType8()
            break

    }
}

//**********EYE TYPES************

async function normalEyes() {
    await $('.eyes').find('span').css('border', 'none')
    await $('.eyes').find(innerBigLeft).css('background-color', 'blanchedalmond')
    await $('.eyes').find(innerBigRight).css('background-color', 'blanchedalmond')
    await $('.eyes').find(innerSmallLeft).css('background-color', 'blanchedalmond')
    await $('.eyes').find(innerSmallRight).css('background-color', 'blanchedalmond')
}
async function eyesType1() {//top lids half shut-- chiller
    await $('.eyes').find('span').css('border-top', '13px solid')
}
async function eyesType2() {//bottom lids half shut-- welling up
    await $('.eyes').find('span').css('border-bottom', '13px solid')
}
async function eyesType3() {//looking down left
    await $('.eyes').find('span').css('border-top', '12px solid')
    await $('.eyes').find('span').css('border-right', '12px solid')

}
async function eyesType4() {//looking down right
    await $('.eyes').find('span').css('border-top', '12px solid')
    await $('.eyes').find('span').css( 'border-left', '12px solid')
}

async function eyesType5() {//sleepy
    await $('.eyes').find('span').css('border-top', '17px solid')
    await $('.eyes').find('span').css('border-bottom', '10px solid')
    await $('.eyes').find(innerBigRight).css('background-color', '#ffebcd00')
    await $('.eyes').find(innerSmallLeft).css('background-color', '#ffebcd00')
    await $('.eyes').find(innerSmallRight).css('background-color', '#ffebcd00')
    await $('.eyes').find(innerBigLeft).css('background-color', '#ffebcd00')
}

async function eyesType6() {//top lid half shut left eye
    await $('.eyes').find(leftPupil).css('border-top', '13px solid')
}
async function eyesType7() {//top lid half shut right eye
    await $('.eyes').find(rightPupil).css('border-top', '13px solid')
}

async function eyesType8() {//cross-eyed
    await $('.eyes').find(leftPupil).css('border-left', '11px solid')
    await $('.eyes').find(rightPupil).css('border-right', '12px solid')
}

async function eyesType9() { //wink left eye
    await $('.eyes').find(leftPupil).css('border-top', '14px solid')
    await $('.eyes').find(leftPupil).css('border-bottom', '15px solid')
    await $('.eyes').find(innerBigLeft).css('background-color', '#ffebcd00')
    await $('.eyes').find(innerSmallLeft).css('background-color', '#ffebcd00')
}

async function eyesType10() {//small pupil
    await $('.eyes').find('span').css('border-top', 'solid 7px')
    await $('.eyes').find('span').css('border-bottom', 'solid 7px')
    await $('.eyes').find('span').css('border-left', 'solid 7px')
    await $('.eyes').find('span').css('border-right', 'solid 7px')
}

//********** HEAD PATTERNS **********

var innerSmallLeft = document.getElementsByClassName('inner-eyes-small-left' )
var innerBigLeft = document.getElementsByClassName('inner-eyes-big-left')
var innerSmallRight = document.getElementsByClassName('inner-eyes-small-right')
var innerBigRight = document.getElementsByClassName('inner-eyes-big-right')
var leftPupil = document.getElementsByClassName('pupil-left')
var rightPupil = document.getElementsByClassName('pupil-right')

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

async function headPattern1(){
    $('.head-shapes').css({ "top": "3px", "border-radius": "30% 30% 50% 50%"})
    $('.left_head-shape').css({ "transform": "rotate(63deg)", "height": "35px", "width": "14px", "top": "-3px", "border-radius": "50% 0 50% 50%" })
    $('.right_head-shape').css({ "transform": "rotate(-63deg)", "height": "35px", "width": "14px", "top": "-2px", "border-radius": "50% 0 50% 50%" })

}

 async function headPattern2() {
     await $('.head-shapes').css({ "top": "3px", "border-radius": "30% 30% 50% 50%"})
     await $('.left_head-shape').css({ "transform": "rotate(72deg)", "height": "63px", "width": "14px", "top": "-19px", "left": "-27px", "border-radius": "50% 0 50% 50%" })
     await $('.right_head-shape').css({ "transform": "rotate(-74deg)", "height": "63px", "width": "14px", "top": "-17px", "left": "27px", "border-radius": "50% 0 50% 50%" })
 }
 
 async function headPattern3() {
     await $('.head-shapes').css({ "top": "4px", "border-radius": "30% 30% 50% 50%"})
     await $('.left_head-shape').css({ "transform": "rotate(30deg)", "height": "35px", "width": "14px", "top": "1px", "border-radius": "50% 0 50% 50%" })
     await $('.right_head-shape').css({ "transform": "rotate(-30deg)", "height": "35px", "width": "14px", "top": "1px", "border-radius": "50% 0 50% 50%" })
 
     await $('.head-shapes').css({ "transform": "scale(0.3)"})
     await $('.head-shapes').css({ "top": "-5"})
   }
 
   async function headPattern4() {
     await $('.head-shapes').css({ "top": "4px", "border-radius": "30% 30% 50% 50%"})
     await $('.left_head-Shape').css({ "transform": "rotate(25deg)", "height": "38px", "width": "14px", "top": "-2px", "left": "-8px" })
     await $('.right_head-Shape').css({ "transform": "rotate(-30deg)", "height": "35px", "width": "14px", "top": "0px", "left": "9px" })
     await $('.head-shapes').css({ "transform": "rotate(180deg)"})
     await $('.head-shapes').css({ "top": "4px"})   
   }
 
   async function headPattern5() {   
     await $('.left_head-shape').css({"height": "60px", "width": "15px"})
     await $('.right_head-shape').css({"height": "60px", "width": "15px", "top": "0px"})   
   }
 
   async function headPattern6() {   
     await $('.head-shapes').css({ "height": "10px", "width": "5px", "transform": "rotate(-1deg)", "left": "97px"})
     await $('.left_head-shape').css({"height": "10px", "width": "5px"})
     await $('.right_head-shape').css({"height": "10px", "width": "5px"})   
   }
 

//*********ANIMATIONS**********

function noAnimation(){
    $('.head').removeClass('noddingHead')
    $('.ears').removeClass('noddingHead')
    $('.left-ear').removeClass('movingLeftEar')
    $('.right-ear').removeClass('movingRightEar')
    $('.tail').removeClass('movingTail')
    $('.head').removeClass('movingHead')
    $('.whiskers-right').removeClass('movingWhiskersRight')
    $('.whiskers-left').removeClass('movingWhiskersLeft')
    $('.body').removeClass('enflatedBelly')
    $('.belly').removeClass('enflatedBelly')
    $('.pupil-left').removeClass('eyesTired')
    $('.pupil-right').removeClass('eyesTired')
    $('.pupil-left').removeClass('eyesChangeColor')
    $('.pupil-right').removeClass('eyesChangeColor')
    $('.eyes').removeClass('eyesBigger')

}

async function animationType1(){//head and ears weave side to side
    $('.head').addClass('noddingHead')
    $('.ears').addClass('noddingHead')
}

async function animationType2(){ //ears move
    $('.left-ear').addClass('movingLeftEar')
    $('.right-ear').addClass('movingRightEar')
}

async function animationType3(){
    $('.tail').addClass('movingTail')
}

async function animationType4(){ //bigger eyes
    $('.eyes').addClass('eyesBigger')
    
}

async function animationType5(){ //whiskers move
    $('.whiskers-right').addClass('movingWhiskersRight')
    $('.whiskers-left').addClass('movingWhiskersLeft')

}

async function animationType6(){ //fat
    $('.body').addClass('enflatedBelly')
    $('.belly').addClass('enflatedBelly')
}

async function animationType7(){
    $('.pupil-left').addClass('eyesTired')
    $('.pupil-right').addClass('eyesTired')
}

async function animationType8(){// mutli-coloured eyes
    $('.pupil-left').addClass('eyesChangeColor')
    $('.pupil-right').addClass('eyesChangeColor')
}

Animations:

.noddingHead{
    animation: noddingHead 5s infinite;
}
.eyesBigger{
    animation: eyeLarger 7s infinite;
}
.movingTail{
    animation: moveTail 5s infinite;
}
.movingLeftEar{
    animation: moveEarLeft 5s infinite;
}
.movingRightEar{
    animation: moveEarRight 5s infinite;
}
.movingWhiskersRight{
    animation: moveWhiskersRight 5s infinite;
}
.movingWhiskersLeft{
    animation: moveWhiskersLeft 5s infinite;
}
.enflatedBelly{
    animation: enflateBelly 5s infinite;
}
.eyesTired{
    animation: eyesTire 10s infinite;
}
.eyesChangeColor{
    animation: multi-Colored 3s infinite;
    
}
@keyframes eyeLarger {
    0%{ transform: scale(1)}
    30%{transform: scale(1.2)}
    60%{ transform: scale(1.2)}
    100%{transform: scale(1)}
}
@keyframes multi-Colored{
    
    0%{ background-color: rgb(255, 0, 0)}
    7%{ background-color:rgb(253, 93, 0);}
    14%{ background-color:rgb(255, 153, 0); }
    21%{ background-color:rgb(253, 207, 0); }
    28%{ background-color:rgb(251, 255, 0) }
    35%{ background-color:rgb(145, 255, 0) }
    42%{ background-color:rgb(20, 255, 118) }
    49%{ background-color:rgb(0, 195, 255) }
    56%{ background-color:rgb(0, 119, 255) }
    63%{ background-color:rgb(0, 17, 255) }
    70%{ background-color:rgb(112, 9, 230) }
    77%{ background-color: rgb(184, 14, 236); }
    84%{ background-color: rgb(247, 0, 255);}
    100%{ background-color:rgb(255, 0, 119); }
}
@keyframes eyesTire{
    0%{ border-top: 0px solid }
    25%{ border-top: 10px solid }
    50%{ border-top: 5px solid }
    75%{ border-top: 13px solid }
    100%{ border-top: 0px solid }
}
@keyframes enflateBelly{
    0%{ transform: scale(1) }
    30%{ transform:  scale(1.2) }
    60%{ transform: scale(1.4) }
    100%{ transform: scale(1) }
}

@keyframes moveWhiskersRight{
    0%{ transform: rotate(0deg) }
    30%{ transform: rotate(-3deg) }
    60%{ transform: rotate(3deg) }
    100%{ transform: rotate(0deg) }
}
@keyframes moveWhiskersLeft{
    0%{ transform: rotate(0deg) }
    30%{ transform: rotate(-3deg) }
    60%{ transform: rotate(3deg) }
    100%{ transform: rotate(0deg) }
}

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

@keyframes noddingHead{
    0%{ transform: translate(0px, 0px); }
    30%{ transform: translate(-10px, 0px); }
    60%{ transform: translate(10px, 0px); }
    100%{ transform: translate(0px, 0px); }
}


@keyframes moveTail{
    0%{ transform: rotate(53deg) }
    50%{ transform: rotate(65deg) }
    100%{ transform: rotate(53deg) }
}

@keyframes moveEarLeft{
    0%{ transform: rotate(90deg) }
    30%{ transform: rotate(75deg) }
    60%{ transform: rotate(105deg) }
    100%{ transform: rotate(90deg) }
}

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