Assignment - Cattributes

Using the repository from previous lessons implement Decorative Color, Pattern Color 1, and Pattern Color 2. We encourage you to experiment in this assignment and rewrite the repository code to suit your earlier cat design and your own project. If you will have issues with the assignment, post your questions below.

1 Like

Working:
cryptoBearAttributesAssignment

AttributesAssignmentCode
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
        }

        
}


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





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)

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

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

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

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

  

}

// 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)

})
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">
</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 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 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="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>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>

            </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>

060421-2pm

Update: Problem solved!

I did not see that in the template Filip already coded the eyeVariation function and did code it all myself. So the function had a duplicate declaration and therefore nothing would work as expected. Cheez! :rofl:

old

Here is an illustration of the problem:
SwitchNotWorking

I started with the Cattributes, but encounter a problem which I kinda can’t wrap my head around why it is not working as intended. The badge is not showing, but the code is exactly the same syntax as with the other sliders, and there they work. Also, the DNA is updating, but I can’t make the switch statement console.log anything at all. ? Anyhelp highly appreciated. @AdamFortuna
My Repo @ Github

2 Likes

Here’s 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/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="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>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>

            </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)
  
}

// 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)
})

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

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%" })
}
1 Like

WIP:
This fella has 11 different eye shapes and 7 different pattern types

Screenshot 2021-04-14 at 16.34.42

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">
</head>
  <body>
    <div class="container p-5" style="margin-top: 12vh;margin-bottom: 10vh;">
        <div align="center">
        <h1 class="c-white">Kitties-Factory</h1>
        <p class="c-white">Create your custom Kitty</p>
    </div>
        <div class="row">
            <div class="col-lg-4 catBox m-2 light-b-shadow">


                <div class = "cat">
                    <div class = "ears">
                        <div class= "ear left-ear">
                            <div class = " left-inner-ear"></div>
                        </div>
                        <div class = "ear right-ear">
                            <div class = "right-inner-ear"></div>
                        </div>
                    </div>
        
                    <div class = "tail">
                        <div class = "inner-tail"></div>
                    </div>
        
                    <div class = "body"></div>
                    <div class = "head">
                        <!-- <div class= "head-pattern"></div> -->
                                        <div id="midShape" class="head-shapes">
                                            <div id="leftShape" class="left_head-shape"></div>
                                            <div id="rightShape" class="right_head-shape"></div>
                                        </div>
        
                        <div class = "eyes">
                            <div class = "eye-left">
                                <span class = "pupil-left">
                                    <div class = "inner-eyes-big-left"></div>
                                    <div class = "inner-eyes-small-left"></div>
                                </span>
                            </div>
        
                            <div class = "eye-right">
                                <span class = "pupil-right">
                                    <div class = "inner-eyes-big-right"></div>
                                    <div class = "inner-eyes-small-right"></div>
                                </span>
                            </div>    
                        </div>
        
                        <div class = "belly"></div>
                        <div class = "mouth"></div>
                        <div class = "whiskers">
                            <div class = "whisker1"></div>
                            <div class = "whisker2"></div>
                            <div class = "whisker3"></div>
                            <div class = "whisker4"></div>
                            <div class = "whisker5"></div>
                            <div class = "whisker6"></div>
                        </div>
        
                        <div class = "feet">
                            <div class = "foot-left"></div>
                            <div class = "foot-right"></div>
                        </div>
                        
                            <div class = "mouth-left"></div>
                            <div class = "mouth-right"></div>

                        <div class = "nose"></div>
                        <div class = "chin"></div>
                    </div>
                </div>


                <br>
                <div class="dnaDiv" id="catDNA">
                    <b>
                        DNA:
                        <!-- Colors -->
                         <span id="dnabody"></span>
                         <span id="dnaeyes"></span>
                         <span id="dnabelly"></span>
                         <span id="dnaears"></span>
                         <span id="dnatail"></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>Head & Body</b><span class="badge badge-dark ml-2" id="bodycode"></span></label>
                    <input type="range" min="10" max="98" class="form-control-range" id="bodycolor">
                </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>Belly</b><span class="badge badge-dark ml-2" id="bellycode"></span></label>
                    <input type="range" min="10" max="98" class="form-control-range" id="bellycolor">
                </div>

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

                <div class="form-group">
                    <label for="formControlRange"><b>Tail</b><span class="badge badge-dark ml-2" id="tailcode"></span></label>
                    <input type="range" min="10" max="98" class="form-control-range" id="tailcolor">
                </div>
                
                <div class="form-group">
                    <label for="formControlRange"><b>Eye Shape</b><span class="badge badge-dark ml-2" id="eyeName"></span></label>
                    <input type="range" min="1" max="11" class="form-control-range" id="eyeshape">
                </div>

                <div class="form-group">
                    <label for="formControlRange"><b>Head Pattern</b><span class="badge badge-dark ml-2" id="patternName"></span></label>
                    <input type="range" min="1" max="7" class="form-control-range" id="decorationpattern">
                </div>

                <div class="form-group">
                    <label for="formControlRange"><b>Middle Shape Color</b><span class="badge badge-dark ml-2" id="middlecolorcode"></span></label>
                    <input type="range" min="10" max="98" class="form-control-range" id="decorationmid">
                </div>

                <div class="form-group">
                    <label for="formControlRange"><b>Sides Shape 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="decorationside">
                </div>
                
                
            </div>

            </div>

            </div>
            <br>

        </div>



    </div>
    <footer align="left">
        <p>Ivan on Tech Academy 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>

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);
  $('#dnaeyes').html(defaultDNA.mouthColor);
  $('#dnabelly').html(defaultDNA.eyesColor);
  $('#dnaears').html(defaultDNA.earsColor);
  $('#dnatail').html(defaultDNA.eyesColor);
    
  $('#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 += $('#dnaeyes').html()
    dna += $('#dnabelly').html()
    dna += $('#dnaears').html()
    dna += $('#dnatail').html()
    dna += $('#dnashape').html()
    dna += $('#dnadecoration').html()
    dna += $('#dnadecorationMid').html()
    dna += $('#dnadecorationSides').html()
    dna += $('#dnaanimation').html()
    dna += $('#dnaspecial').html()

    return parseInt(dna)
}

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

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

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

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

    tailColor(colors[dna.tailcolor],dna.tailcolor)
    $('#tailcolor').val(dna.tailcolor)
    
}

//listeners for each slider
// Changing cat colors
$('#bodycolor').change(()=>{
    var colorVal = $('#bodycolor').val()
    bodyColor(colors[colorVal],colorVal)
})

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

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

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

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


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

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

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 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('Laser 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
    }
}

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 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')
}


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"})   
   }
 
1 Like