Assignment - Cattributes

Hi guys,

I am having some issues and hoped someone would not mind having a look and sharing their opinion.

Up to the collar shape, everything was working perfectly (as per me :smiley: ).
After the code for the collar shape, I can not get the DNA number for it to change.
The slider works, the shapes change but the number remains the same.
I checked the function for it, checked for typos… no luck :frowning:

I tried finishing with the color assignments for the decorations (in my case the collar), but the DNA numbers for them do not appear at all.

Thanks a loot in advance :slight_smile:

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/cattributes.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="tail"></div>
                    <div class="tail-mask"></div>
                    <div class="tail-end"></div>
                    <div class="ears">
                         <div class="ear left_ear">
                             <div class="inner_ear left_inner_ear"></div>
                        </div>
                         <div class="ear right_ear">
                         <div class="inner_ear right_inner_ear"></div>
                           </div>
                           </div>
                         
                <div id="body">
                    <div class="eyes">
                        <div class="eye">
                            <div class="pupils">
                                <span class="inner_eye_big"></span>
                                <span class="inner_eye_small"></span>
                                <span class="inner_eye_smallest"></span>
                            </div>
                        </div>
                        <div class="eye">
                            <div class="pupils">
                                <span class="inner_eye_big"></span>
                                <span class="inner_eye_small"></span>
                                <span class="inner_eye_smallest"></span>
                            </div>
                        </div>
                        </div>
                        <div class="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 class="cat_body"></div>
                        <div class="collar">
                            <div class="collar_shape"></div>
                        </div>
                        <div class="belly"></div> 
                        <div class="feet">
                            <div class="foot">
                                <div class="inner_foot_small1"></div>
                                <div class="inner_foot_small2"></div>
                                <div class="inner_foot_small3"></div>
                                <div class="inner_foot_big"></div>
                            </div>
                            <div class="foot">
                                <div class="inner_foot_small4"></div>
                                <div class="inner_foot_small5"></div>
                                <div class="inner_foot_small6"></div>
                                <div class="inner_foot_big"></div>
                            </div>
                        </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 | 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</b><span class="badge badge-dark ml-2" id="bellycode"></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="4" class="form-control-range" id="eyeshape">
                </div>

                <div class="form-group">
                    <label for="formControlRange"><b>Collar shape</b><span class="badge badge-dark ml-2" id="shapeName"></span></label>
                    <input type="range" min="1" max="5" class="form-control-range" id="collarshape">
                </div>
                <div class="form-group">
                    <label for="formControlRange"><b>Collar shape color</b><span class="badge badge-dark ml-2" id="shapecode"></span></label>
                    <input type="range" min="10" max="98" class="form-control-range" id="shapecolor">
                </div>
                <div class="form-group">
                    <label for="formControlRange"><b>Collar color</b><span class="badge badge-dark ml-2" id="collarcode"></span></label>
                    <input type="range" min="10" max="98" class="form-control-range" id="collarcolor">
                </div>
            </div>

            </div>

            </div>
            <br>

        </div>



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

catFactory.js

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

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

//This function code needs to modified so that it works with Your cat code.
function headcolor(color,code) {
    $('#body, .cat_body').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, .belly').css('background', '#' + color)  //This changes the color of the cat
    $('#bellycode').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) {
    $('.eye').css('background', '#' + color)  //This changes the color of the cat
    $('#eyescode').html('code: '+code) //This updates text of the badge next to the slider
    $('#dnaeyes').html(code) //This updates the body color part of the DNA that is displayed below the cat
}

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

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

function collarColor(color,code) {
    $('.collar').css('background', '#' + color)  //This changes the color of the cat
    $('#collarcode').html('code: '+code) //This updates text of the badge next to the slider
    $('#dnacollarColor').html(code) //This updates the body color part of the DNA that is displayed below the cat
}
//###################################################
//Functions below will be used later on in the project
//###################################################
function eyeVariation(num) {
    $('#dnashape').html(num)
    switch (num) {
        case 1:
            normalEyes()
            $('#eyeName').html('Basic')
            break
        case 2:
            normalEyes()
            $('#eyeName').html('Chill')
            eyesType1()
            break
        case 3:
            normalEyes()
            $('#eyeName').html('Scared')
            eyesType2()
            break
        case 4:
            normalEyes()
            $('#eyeName').html('Looks up')
            eyesType3()
            break
    }
}

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

function eyesType1() {
    
      $('.eye').css('border-top', '8px solid')
      $('.inner_eye_big').css('width', '7px')
      $('.inner_eye_big').css('left', '15px')
      $('.inner_eye_small').css('display', 'none')
      $('.inner_eye_smallest').css('display', 'none')
}

 function eyesType2() {
    normalEyes()
     $('.pupils').css('width', '10px')
     $('.pupils').css('left', '16px')
     $('.inner_eye_big').css('display', 'none')
     $('.inner_eye_small').css('display', 'none')
     $('.inner_eye_smallest').css('display', 'none')
}

 function eyesType3() {
    normalEyes() 
     $('.pupils').css('width', '24px')
     $('.pupils').css('left','14px' )
     $('.pupils').css('top', '0px')
     $('.inner_eye_big').css('width', '7px')
     $('.inner_eye_big').css('left', '15px')
     $('.inner_eye_small').css('display', 'none')
     $('.inner_eye_smallest').css('display', 'none')
    
}

function collarVariation(num) {
    $('#dnacollarShape').html(num)
    switch (num) {
        case 1:
            $('#shapeName').html('Circle')
            normalCollar()
            break
        case 2:
            
            $('#shapeName').html('Rectangle')
            collarShape1()
            break
        case 3:
            
            $('#shapeName').html('Diamond')
            collarShape2()
            break
         case 4:
            
            $('#shapeName').html('Oval')
            collarShape3()
            break
        case 5:
            
            $('#shapeName').html('None')
            collarShape4()
            break
    }
}
function normalCollar() {
    $('.collar_shape').css('background-color', 'rgb(146, 201, 182)')
    $('.collar_shape').css('width', '25px')
    $('.collar_shape').css('height', '25px')
    $('.collar_shape').css('border-radius', '50%')
    $('.collar_shape').css('position', 'relative')
    $('.collar_shape').css('top', '6px')
    $('.collar_shape').css('left', '28px')
    $('.collar_shape').css('transform', 'rotate(-5deg)')

}

     function collarShape1() {
        normalCollar()
         $('.collar_shape').css('border-radius', '0px')
         $('.collar_shape').css('width', '30px')
         $('.collar_shape').css('left', '30px')
         $('.collar_shape').css('top', '6px')
         $('.collar_shape').css('transform', 'rotate(-1deg)')
    }

     function collarShape2() {
        normalCollar()
         $('.collar_shape').css('border-radius', '0px')
         $('.collar_shape').css('width', '20px')
         $('.collar_shape').css('height', '20px')
         $('.collar_shape').css('left', '32px')
         $('.collar_shape').css('top', '11px')
         $('.collar_shape').css('transform', 'rotate(45deg)')
    }

     function collarShape3() {
        normalCollar()
         $('.collar_shape').css('border-radius', '100px/ 50px')
         $('.collar_shape').css('width', '29px')
         $('.collar_shape').css('height', '14px')
         $('.collar_shape').css('left', '30px')
         $('.collar_shape').css('top', '14px')
         $('.collar_shape').css('transform', 'rotate(90deg)')
    }
    
    function collarShape4() {
        normalCollar()
        $('.collar_shape').css('display', 'none')   
   }
   
catSettings.js

var colors = Object.values(allColors())

var defaultDNA = {
    "headcolor" : 10,
    "mouthColor" : 13,
    "eyesColor" : 96,
    "earsColor" : 10,
    //Cattributes
    "eyesShape" : 1,
    "collarShape" : 1,
    "shapeColor" : 13,
    "collarColor" : 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);
   $('#dnacollarShape').html(defaultDNA.collarShape);
   $('#dnashapeColor').html(defaultDNA.shapeColor);
   $('#dnacollarColor').html(defaultDNA.collarColor);
   $('#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 += $('#dnacollarShape').html()
    dna += $('#dnashapeColor').html()
    dna += $('#dnacollarColor').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)
    collarVariation(dna.collarShape)
    $('#collarshape').val(dna.collarShape)
    shapeColor(colors[dna.shapeColor], dna.shapeColor)
    $('#shapecolor').val(dna.shapeColor)
    collarColor(colors[dna.collarColor], dna.collarColor)
    $('#collarcolor').val(dna.collarColor)
}

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

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

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

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

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

$('#collarshape').change(()=>{
  var shape= parseInt($('#collarshape').val())
  collarVariation(shape)
})

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

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

Hello @margaritavas ! I check out your code and find some parts that are missing.

  1. The HTML DNA part is not updating becase is not complete. You have to add the <span> tags with the id you want to select to update.

  2. The HTML have to match the same DNA parts from getDna() and renderCat(dna) from catSettings.js with same names.

Take a look to this pictures:

This is the DNA in HTML
2021-06-04_12h34_34

Compare the amount of parts (DNA digits) and the names. You will notice there is missing parts.
2021-06-04_12h36_19

So when you use your functions, they dont have where to set this dna in HTML because dont exist.
2021-06-04_12h36_49

To resume, you just have to add this html parts with the right id inside the div with id of catDNA, like this for example:

<span id="dnaShapeColor"></span>
<span id="dnaCollarColor"></span>

Hopes this help. Let me know if you have more issues.

Hi @kenn.eth

Thank you soo much for the prompt reply.
You were completely right.
It is working! No issues anymore :tada:

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/cattributes.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="tail"></div>
                    <div class="tail-mask"></div>
                    <div class="tail-end"></div>
                    <div class="ears">
                         <div class="ear left_ear">
                             <div class="inner_ear left_inner_ear"></div>
                        </div>
                         <div class="ear right_ear">
                         <div class="inner_ear right_inner_ear"></div>
                           </div>
                           </div>
                         
                <div id="body">
                    <div class="eyes">
                        <div class="eye">
                            <div class="pupils">
                                <span class="inner_eye_big"></span>
                                <span class="inner_eye_small"></span>
                                <span class="inner_eye_smallest"></span>
                            </div>
                        </div>
                        <div class="eye">
                            <div class="pupils">
                                <span class="inner_eye_big"></span>
                                <span class="inner_eye_small"></span>
                                <span class="inner_eye_smallest"></span>
                            </div>
                        </div>
                        </div>
                        <div class="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 class="cat_body"></div>
                        <div class="collar">
                            <div class="collar_shape"></div>
                        </div>
                        <div class="belly"></div> 
                        <div class="feet">
                            <div class="foot">
                                <div class="inner_foot_small1"></div>
                                <div class="inner_foot_small2"></div>
                                <div class="inner_foot_small3"></div>
                                <div class="inner_foot_big"></div>
                            </div>
                            <div class="foot">
                                <div class="inner_foot_small4"></div>
                                <div class="inner_foot_small5"></div>
                                <div class="inner_foot_small6"></div>
                                <div class="inner_foot_big"></div>
                            </div>
                        </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="dnacollarShape"></span>
             <span id="dnashapeColor"></span>
             <span id="dnacollarColor"></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="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</b><span class="badge badge-dark ml-2" id="bellycode"></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="4" class="form-control-range" id="eyeshape">
                </div>

                <div class="form-group">
                    <label for="formControlRange"><b>Collar shape</b><span class="badge badge-dark ml-2" id="shapeName"></span></label>
                    <input type="range" min="1" max="5" class="form-control-range" id="collarshape">
                </div>
                <div class="form-group">
                    <label for="formControlRange"><b>Collar shape color</b><span class="badge badge-dark ml-2" id="shapecode"></span></label>
                    <input type="range" min="10" max="98" class="form-control-range" id="shapecolor">
                </div>
                <div class="form-group">
                    <label for="formControlRange"><b>Collar color</b><span class="badge badge-dark ml-2" id="collarcode"></span></label>
                    <input type="range" min="10" max="98" class="form-control-range" id="collarcolor">
                </div>
            </div>

            </div>

            </div>
            <br>

        </div>



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

catFactory.js

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

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

//This function code needs to modified so that it works with Your cat code.
function headcolor(color,code) {
    $('#body, .cat_body').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, .belly').css('background', '#' + color)  //This changes the color of the cat
    $('#bellycode').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) {
    $('.eye').css('background', '#' + color)  //This changes the color of the cat
    $('#eyescode').html('code: '+code) //This updates text of the badge next to the slider
    $('#dnaeyes').html(code) //This updates the body color part of the DNA that is displayed below the cat
}

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

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

function collarColor(color,code) {
    $('.collar').css('background', '#' + color)  //This changes the color of the cat
    $('#collarcode').html('code: '+code) //This updates text of the badge next to the slider
    $('#dnacollarColor').html(code) //This updates the body color part of the DNA that is displayed below the cat
}
//###################################################
//Functions below will be used later on in the project
//###################################################
function eyeVariation(num) {
    $('#dnashape').html(num)
    switch (num) {
        case 1:
            normalEyes()
            $('#eyeName').html('Basic')
            break
        case 2:
            normalEyes()
            $('#eyeName').html('Chill')
            eyesType1()
            break
        case 3:
            normalEyes()
            $('#eyeName').html('Scared')
            eyesType2()
            break
        case 4:
            normalEyes()
            $('#eyeName').html('Looks up')
            eyesType3()
            break
    }
}

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

function eyesType1() {
    
      $('.eye').css('border-top', '8px solid')
      $('.inner_eye_big').css('width', '7px')
      $('.inner_eye_big').css('left', '15px')
      $('.inner_eye_small').css('display', 'none')
      $('.inner_eye_smallest').css('display', 'none')
}

 function eyesType2() {
    normalEyes()
     $('.pupils').css('width', '10px')
     $('.pupils').css('left', '16px')
     $('.inner_eye_big').css('display', 'none')
     $('.inner_eye_small').css('display', 'none')
     $('.inner_eye_smallest').css('display', 'none')
}

 function eyesType3() {
    normalEyes() 
     $('.pupils').css('width', '24px')
     $('.pupils').css('left','14px' )
     $('.pupils').css('top', '0px')
     $('.inner_eye_big').css('width', '7px')
     $('.inner_eye_big').css('left', '15px')
     $('.inner_eye_small').css('display', 'none')
     $('.inner_eye_smallest').css('display', 'none')
    
}

function collarVariation(num) {
    $('#dnacollarShape').html(num)
    switch (num) {
        case 1:
            $('#shapeName').html('Circle')
            normalCollar()
            break
        case 2:
            
            $('#shapeName').html('Rectangle')
            collarShape1()
            break
        case 3:
            
            $('#shapeName').html('Diamond')
            collarShape2()
            break
         case 4:
            
            $('#shapeName').html('Oval')
            collarShape3()
            break
        case 5:
            
            $('#shapeName').html('None')
            collarShape4()
            break
    }
}
function normalCollar() {
    $('.collar_shape').css('background-color', 'rgb(146, 201, 182)')
    $('.collar_shape').css('width', '25px')
    $('.collar_shape').css('height', '25px')
    $('.collar_shape').css('border-radius', '50%')
    $('.collar_shape').css('position', 'relative')
    $('.collar_shape').css('top', '6px')
    $('.collar_shape').css('left', '28px')
    $('.collar_shape').css('transform', 'rotate(-5deg)')

}

     function collarShape1() {
        normalCollar()
         $('.collar_shape').css('border-radius', '0px')
         $('.collar_shape').css('width', '30px')
         $('.collar_shape').css('left', '30px')
         $('.collar_shape').css('top', '6px')
         $('.collar_shape').css('transform', 'rotate(-1deg)')
    }

     function collarShape2() {
        normalCollar()
         $('.collar_shape').css('border-radius', '0px')
         $('.collar_shape').css('width', '20px')
         $('.collar_shape').css('height', '20px')
         $('.collar_shape').css('left', '32px')
         $('.collar_shape').css('top', '11px')
         $('.collar_shape').css('transform', 'rotate(45deg)')
    }

     function collarShape3() {
        normalCollar()
         $('.collar_shape').css('border-radius', '100px/ 50px')
         $('.collar_shape').css('width', '29px')
         $('.collar_shape').css('height', '14px')
         $('.collar_shape').css('left', '30px')
         $('.collar_shape').css('top', '14px')
         $('.collar_shape').css('transform', 'rotate(90deg)')
    }
    
    function collarShape4() {
        normalCollar()
        $('.collar_shape').css('display', 'none')   
   }
   


catSettings.js

var colors = Object.values(allColors())

var defaultDNA = {
    "headcolor" : 10,
    "mouthColor" : 13,
    "eyesColor" : 96,
    "earsColor" : 10,
    //Cattributes
    "eyesShape" : 1,
    "collarShape" : 1,
    "shapeColor" : 13,
    "collarColor" : 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);
   $('#dnacollarShape').html(defaultDNA.collarShape);
   $('#dnashapeColor').html(defaultDNA.shapeColor);
   $('#dnacollarColor').html(defaultDNA.collarColor);
   $('#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 += $('#dnacollarShape').html()
    dna += $('#dnashapeColor').html()
    dna += $('#dnacollarColor').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)
    collarVariation(dna.collarShape)
    $('#collarshape').val(dna.collarShape)
    shapeColor(colors[dna.shapeColor], dna.shapeColor)
    $('#shapecolor').val(dna.shapeColor)
    collarColor(colors[dna.collarColor], dna.collarColor)
    $('#collarcolor').val(dna.collarColor)
}

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

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

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

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

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

$('#collarshape').change(()=>{
  var shape= parseInt($('#collarshape').val())
  collarVariation(shape)
})

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

$('#collarcolor').change(()=>{
  var colorVal = $('#collarcolor').val()
  collarColor(colors[colorVal],colorVal)
})
1 Like

Hi people, i would like to add a transform property through the catFactory.js file. But i could not manage it. It just adds a one property of these two.

transform: scale(1, -1) rotate(125deg)

Tried this one and several other ones:

 await $('.pupil-left').css('transform', 'scale(1, -1)')
 await $('.pupil-left').css('transform', 'rotate(125deg)')

Kinda stuck, and i think its neither impossible to implement these kind of property nor im missing a huge thing, since i’m too tired :tired_face:

Also i have added another transform property that translates for a certain degree, but it does not reset for each style. :thinking:

You dont need await since this is not a promise.
Also for applying this property should select a single item for not overwritting the transform property.

Select by Id instead by class. And another usefull advice will be to affect the property style in one single line like:
$('#yourId').attr('style','transform:scale(1,1);transform:rotate(125deg);');

1 Like

Thank you for the reply, i will try that out asap

Hello, please find my code below:

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/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>               
                       <div class="ear right_ear"></div>              
                    </div>
                    <div class="inner_ears">
                      <div class="inner_ear leftEar"></div>               
                      <div class="inner_ear rightEar"></div> 
                    </div>
                    <div 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="eyes">
                            <div class="eye">
                              <div class="pupils"></div>
                            </div>                  
                            <div class="eye">
                              <div class="pupils"></div>
                            </div>
                        </div>
                        <div class="nose">
                            <div class="mustaches">
                                <div class="mustache_1"></div>
                                <div class="mustache_2"></div>
                                <div class="mustache_3"></div>
                                <div class="mustache_4"></div>
                                <div class="mustache_5"></div>
                                <div class="mustache_6"></div>
                            </div>
                        </div>               
                        <div class="mouth"></div>
                    </div>
                
                    <div class="cat_body">
                        <div class="tail"></div>
                    </div>
                    <div class="tummy">
                       <div class="toes">
                          <div class="toe_1"></div>
                          <div class="toe_2"></div>
                          <div class="toe_3"></div>
                          <div class="toe_4"></div>
                          <div class="toe_5"></div>
                          <div class="toe_6"></div>
                        </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, Tummy and Tail</b><span class="badge badge-dark ml-2" id="MTTcode"></span></label>
                    <input type="range" min="10" max="98" class="form-control-range" id="MTTcolor">
                </div>
                <div class="form-group">
                    <label for="formControlRange"><b>Eye</b><span class="badge badge-dark ml-2" id="eyecode"></span></label>
                    <input type="range" min="10" max="98" class="form-control-range" id="eyecolor">
                </div>
                <div class="form-group">
                    <label for="formControlRange"><b>Eye Shape</b><span class="badge badge-dark ml-2" id="eyeName"></span></label>
                    <input type="range" min="1" max="7" class="form-control-range" id="eyeshape">
                </div>
                <div class="form-group">
                    <label for="formControlRange"><b>Pattern Shape</b><span class="badge badge-dark ml-2" id="patternDecoration"></span></label>
                    <input type="range" min="1" max="7" class="form-control-range" id="paternshape">
                </div>
                <div class="form-group">
                    <label for="formControlRange"><b>Middle Pattern Colour</b><span class="badge badge-dark ml-2" id="mid_pattern_code"></span></label>
                    <input type="range" min="10" max="98" class="form-control-range" id="mid_pattern_colour">
                </div>
                <div class="form-group">
                    <label for="formControlRange"><b>Side Pattern Colour</b><span class="badge badge-dark ml-2" id="side_pattern_code"></span></label>
                    <input type="range" min="10" max="98" class="form-control-range" id="side_pattern_colour">
                </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>

cat settings:


var colors = Object.values(allColors())

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

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

  renderCat(defaultDNA)
});

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

    return parseInt(dna)
}

function renderCat(dna){
    headColor(colors[dna.headcolor],dna.headcolor)
    $('#bodycolor').val(dna.headcolor)
    MTTColor(colors[dna.mouthColor],dna.mouthColor)
    $('#MTTcolor').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.patternshape)
    $('#patternshape').val(dna.patternshape)
    midPatternColour(colors[dna.mid_pattern_colour], dna.mid_pattern_colour)
    $('#mid_pattern_colour').val(dna.mid_pattern_colour)
    sidePatternColour(colors[dna.side_pattern_colour], dna.side_pattern_colour)
    $('#side_pattern_colour').val(dna.side_pattern_colour)
}

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

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

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

$('#eyeshape').change(()=>{
  var shape = $('#eyeshape').val()
  eyeVariation(shape)
})
$('#patternshape').change(()=>{
  var shape = $('#patternshape').val()
  decorationVariation(shape)
})
$('#mid_pattern_colour').change(()=>{
  var colorVal = $('#mid_pattern_colour').val()
  midPatternColour(colors[colorVal],colorVal)
})
$('#side_pattern_colour').change(()=>{
  var colorVal = $('#side_pattern_colour').val()
  sidePatternColour(colors[colorVal],colorVal)
})

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 headColor(color,code) {
    $('.cat_head, .cat_body').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 MTTColor(color,code) {
    $('.mouth, .tummy, .tail').css('background', '#' + color)  //This changes the color of the cat
    $('#MTTcode').html('code: '+code) //This updates text of the badge next to the slider
    $('#dnamouth').html(code) //This updates the body color part of the DNA that is displayed below the cat
}

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

function midPatternColour(color,code) {
    $('.cat_head-dots').css('background', '#' + color)  //This changes the color of the cat
    $('#mid_pattern_code').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 sidePatternColour(color,code) {
    $('.cat_head-dots_first, .cat_head-dots_second').css('background', '#' + color)  //This changes the color of the cat
    $('#side_pattern_code').html('code: '+code) //This updates text of the badge next to the slider
    $('#dnadecorationSides').html(code) //This updates the body color part of the DNA that is displayed below the cat
}



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

    $('#dnashape').html(num)
    switch (num) {
        case 1:
            normalEyes()
            $('#eyeName').html('Basic')
            break
        case 2:
            normalEyes()
            $('#eyeName').html('Chill')
            eyesType1()
            break
        case 3:
            normalEyes()
            $('#eyeName').html('Up')
            eyesType2()
            break
    }
}

function decorationVariation(num) {
    $('#dnadecoration').html(num)
    switch (num) {
        case 1:
            $('#patternDecoration').html('Basic')
            normaldecoration()
            break
        case 2:
            normaldecoration()
            $('#patternDecoration').html('Tsahpina')
            decorationType1()
            break
        case 3:
            normaldecoration()
            $('#patternDecoration').html('Gataki')
            decorationType2()
            break
    }
        
}

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

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

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


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

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

cat.css:

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

.ears{
    position: relative;
}
.ear{
   width: 0;
    height: 0;
    border-bottom: 50px solid rgb(255, 241, 196);
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    position: relative;
}

.left_ear{
    top: 90px;
    left: -11px;
    transform: rotate(-46deg);
}
.right_ear{
    left: 162px;
    transform: rotate(42deg);
    top: 35px;
}
.cat_head{
    background-color: rgb(255, 241, 196);
    width: 200px;
    height: 200px;
    border-radius: 50%; 
}

.cat_head-dots {
    position: absolute;
    left: 155px;
    height: 48px;
    top: 153px;
    width: 14px;
    background: #ffb74d;
    -webkit-border-radius: 0 0 50% 50%;
    border-radius: 0 0 50% 50%;
}

 .cat_head-dots_first {
    position: absolute;
    content: '';
    top: 1px;
    width: 14px;    
    height: 35px;
    background: #ffb74d;
    left: -19px;
    border-radius: 50% 0 50% 50%;
}
.cat_head-dots_second {
    position: absolute;
    content: '';
    top: 1px;
    width: 14px;    
    height: 35px;
    background: #ffb74d;
    left: 18px;
    border-radius: 0 50% 50% 50%;
}
.eyes {
    position: relative;
    top: 30px;
    display: flex;
}
.eye {
    background-color: white;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    margin: 25px;
    position: relative;
}

.pupils{
    content:'';
    background-color: rgb(152, 155, 204);
    width: 35px;
    height: 35px;
    border-radius: 50%;
    position: absolute;
    top: 10px;
    left: 10px;
}


.mouth{
   border-radius: 140px 0px 90px 0px;
   background-color: rgb(224, 109, 109);
   height: 30px;
   width: 30px;
   position: absolute;
   transform: rotate(45deg);
   left: 152px;
   top: 280px;
}
.nose{
   border-radius: 0px 0px 90px 0px;
   background-color: rgb(105, 104, 99);
   height: 21px;
   width: 21px;
   position: absolute;
   left: 157px;
   top: 255px;
   transform: rotate(45deg);
}
.mustaches{
    position: relative;
}

.mustache_1{
    width: 216%;
    position: absolute;
    height: 3px;
    background: grey;
    transform: rotate(120deg);
    left: 11px;
    top: -5px;
}

.mustache_2{
    width: 216%;
    position: absolute;
    height: 3px;
    background: grey;
    transform: rotate(133deg);
    left: 17px;
    top: -1px;
}
.mustache_3{
    width: 216%;
    position: absolute;
    height: 3px;
    background: grey;
    transform: rotate(147deg);
    left: 21px;
    top: 5px;
}

.mustache_4{
    width: 216%;
    position: absolute;
    height: 3px;
    background: grey;
    transform: rotate(152deg);
    left: -27px;
    top: 33px;

}

.mustache_5{
    width: 216%;
    position: absolute;
    height: 3px;
    background: grey;
    transform: rotate(140deg);
    left: -23px;
    top: 38px;
}
.mustache_6{
    width: 216%;
    position: absolute;
    height: 3px;
    background: grey;
    transform:  rotate(126deg);
    left: -18px;
    top: 42px;
}
.inner_ears{
    position: relative;
}
.inner_ear{
    border-radius: 0px 0px 0px 45px;
    background-color: grey;
    height: 20px;
    width: 20px;
    position: absolute;
 }
 .leftEar{
    transform: scale(1,-1) rotate(-180deg);
    left: 12px;
    top: 17px;
 }
 .rightEar{
    transform: rotate(0deg);
     left: 161px;
     top: 13px;
 }

.cat_body{
    background-color: rgb(255, 241, 196);
    width: 200px;
    height: 100px;
    border-radius: 25%; 
    margin-top: -7%;
}
.tummy{
    margin-top: -26%;
    margin-left: 18%;
    margin-right: auto;
    height: 30px;
    width: 60px;
    border-radius: 50px 50px 0 0;
    background-color: #F4E7D1;
}
.toes{
    position: relative;
}
.toe_1{
    width: 50%;
    position: absolute;
    height: 3px;
    background: grey;
    transform: rotate(96deg);
    left: -25px;
    top: 82px;
}

.toe_2{
    width: 50%;
    position: absolute;
    height: 3px;
    background: grey;
    transform: rotate(96deg);
    left: -32px;
    top: 82px;
}
.toe_3{
    width: 50%;
    position: absolute;
    height: 3px;
    background: grey;
    transform: rotate(96deg);
    left: -39px;
    top: 82px;
}

.toe_4{
    width: 50%;
    position: absolute;
    height: 3px;
    background: grey;
    transform: rotate(86deg);
    left: 60px;
    top: 82px;
}

.toe_5{
    width: 50%;
    position: absolute;
    height: 3px;
    background: grey;
    transform: rotate(86deg);
    left: 67px;
    top: 82px;
}
.toe_6{
    width: 50%;
    position: absolute;
    height: 3px;
    background: grey;
    transform:  rotate(86deg);
    left: 74px;
    top: 82px;
}
.tail{
    width: 82px;
    border-radius: 76%;
    margin-top: 10%;
    margin-left: 34%;
    margin-right: auto;
    position: absolute;
    border: 15px solid rgb(255, 241, 196);
    display: inline-block;
    z-index: 0;
}


Hi @kenn.eth or @AdamFortuna , I would really appreciate your feedback. I am having troubles displaying the shape of the eye and the pattern changes I have implemented. I would really appreciate if you could take time to review and let me know what I am missing.

Cheers guys

Hey @vili if you have some console errors please screen shoot it and show here.

Your selector is looking to find a span into pupils class. But there is no span tag inside that class.

Other thing I notice is that you are setting border:none before applying border-top and bottom. So you are disabing borders. You should just use the border type you want. Also there is no need to make this functions async since there is no promise to await for, because CSS attributes set up instantly.

Another solutions is to overwrite style property instead css. So you can use .style = and the property.

Hopes this helps, so let me know if works.

1 Like

Hi Kenn, thank you for your reply but I started doing the buttons and I thought I would come back later on the design.

I did the functionality of the buttons and I checked with some other students and the logic is correct; however, nothing is working anymore.Screenshot 2021-07-06 at 19.16.52
All my functions are not defined which is weird. I would appreciate any suggestions.

Thank you,
Vilior

DNA coding not displaying. Not sure what I have missed but will have to redo this for sure.
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>
                         <span id="dnamidDot"></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>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</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>Mouth</b><span class="badge badge-dark ml-2" id="mouthcode"></span></label>
                        <input type="range" min="10" max="98" class="form-control-range" id="mouthcolor">
                    </div>
                    <div class="form-group">
                        <label for="formControlRange"><b>Eyeshape</b><span class="badge badge-dark ml-2" id="eyeshapecode"></span></label>
                        <input type="range" min="1" max="7" class="form-control-range" id="eyeshape">
                    </div>
                    <div class="form-group">
                        <label for="formControlRange"><b>midDot Style</b><span class="badge badge-dark ml-2" id="midDot"></span></label>
                        <input type="range" min="1" max="7" class="form-control-range" id="midDotstyle">
            </div>
                    <div class="form-group">
                <label for="formControlRange"><b>midDot Color - middle</b><span class="badge badge-dark ml-2" id="middleDot"></span></label>
                <input type="range" min="10" max="98" class="form-control-range" id="midDotColor1">
            </div>

            <div class="form-group">
                <label for="formControlRange"><b>midDot Color - sides</b><span class="badge badge-dark ml-2" id="sidesmidDot"></span></label>
                <input type="range" min="10" max="98" class="form-control-range" id="midDotColor2">
            </div>
            </div>

            </div>
            <br>

        </div>



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

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

</html>
``
catFactory.js

//Random color

function getColor() {

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

return randomColor

}

function genColors(){

var colors = []

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

  var color = getColor()

  colors[i] = color

}

return colors

}

//This function code needs to modified so that it works with Your cat 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 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').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 mouthColor(color,code) {

$('.cat__mouth-contour').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

}

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

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

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

function eyeVariation(num) {

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

switch (num) {

    case 1:

        normalEyes()

        $('#eyeName').html('Basic') //Set the badge for "Basic"

        break

        case 2:

            normalEyes()

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

            return eyesType1()

            break

}

}

function decorationVariation(num) {

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

switch (num) {

    case 1:

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

        normaldecoration()

        break

}

}

async function normalEyes() {

  $('.cat__eye').find('span').css('border', 'none')

}

async function eyesType1() {

await $('.cat__eye').find('span').css('border-top', '15px solid')

}

async function eyesType2() {

await $('.cat__eye').find('span').css('border-left', '15px solid')

}

async function normaldecoration() {

//Remove all style from other decorations

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

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

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

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

}

catSettings.js

var colors = Object.values(allColors())

var defaultDNA = {

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

}

// Changing cat colors

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

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

headColor(colors[colorVal],colorVal)

})

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

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

eyesColor(colors[colorVal],colorVal)

})

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

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

earsColor(colors[colorVal],colorVal)

})

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

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

mouthColor(colors[colorVal],colorVal)

})

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

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

midDotColor(colors[colorVal],colorVal)

})

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

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

middleDotColor(colors[colorVal], colorVal)

})

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

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

sidesmidDotColor(colors[colorVal], colorVal)

})

//Changing cat designs

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

var shape = parseInt($(’#eyeshape’).val())

eyeVariation(shape)

})

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

var style = parseInt($(’#midDotstylestyle’).val())

midDotStyle(style)

})Shot 0013

Ok, here’s my code update with cattributes. All works fine!

image

Code

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

  <link
    href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
    rel="stylesheet"
    integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
    crossorigin="anonymous"
  />
  <script
    src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
    crossorigin="anonymous"
  ></script>

  <script type="text/javascript" src="assets/js/jquery-3.6.0.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>
  <main>
    <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 justify-content-center">
        <div
          class="
            col-lg-4
            catBox
            m-2
            light-b-shadow
            position-relative
            d-flex
            justify-content-center
            text-center
          "
        >
          <!-- CAT HTML -->
          <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">
                <span class="star1">&#128964;</span>
                <span class="star2">&#128964;</span>
                <span class="star3">&#128964;</span>
              </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>
          <!-- CAT DNA -->
          <div
            class="dnaDiv position-absolute bottom-0 start-0 px-1"
            id="catDNA"
          >
            <b>
              DNA:
              <!-- Colors -->
              <span id="dnaouter"></span>
              <span id="dnainner"></span>
              <span id="dnaeyes"></span>
              <!-- Cattributes -->
              <span id="dnadecoration1"></span>
              <span id="dnadecoration2"></span>
              <span id="dnadecoration3"></span>
              <span id="dnadecorationsrotation"></span>
              <span id="dnadanimation"></span>
            </b>
          </div>
        </div>
        <!-- DNA SETTER -->
        <div class="col-lg-6 cattributes m-2 light-b-shadow">
          <!-- Set colors -->
          <div id="catColors">
            <div class="mb-3">
              <label for="outercolor"
                ><b>Outer Color</b
                ><span class="badge bg-dark ms-2" id="outercode"></span
              ></label>
              <input
                type="range"
                min="10"
                max="90"
                class="form-range"
                id="outercolor"
              />
            </div>
            <div class="mb-3">
              <label for="innercolor"
                ><b>Inner Color</b
                ><span class="badge bg-dark ms-2" id="innercode"></span
              ></label>
              <input
                type="range"
                min="10"
                max="90"
                class="form-range"
                id="innercolor"
              />
            </div>
            <div class="mb-3">
              <label for="eyescolor"
                ><b>Eyes Color</b
                ><span class="badge bg-dark ms-2" id="eyescode"></span
              ></label>
              <input
                type="range"
                min="100"
                max="460"
                class="form-range"
                id="eyescolor"
              />
            </div>
          </div>
          <!-- Set cattributes -->
          <div class="mb-3">
            <label for="decorationsVisibility">
              <b>Decorations Visibility</b>
              <span class="badge bg-dark ms-2">
                <span>code: </span>
                <span id="decorationscode1"></span>
                <span id="decorationscode2"></span>
                <span id="decorationscode3"></span>
              </span>
            </label>
            <div id="decorationsVisibility">
              <div class="form-check form-check-inline">
                <input
                  class="form-check-input"
                  type="checkbox"
                  id="decoration1"
                />
                <label class="form-check-label" for="decoration1"
                  >Star 1</label
                >
              </div>
              <div class="form-check form-check-inline">
                <input
                  class="form-check-input"
                  type="checkbox"
                  id="decoration2"
                />
                <label class="form-check-label" for="decoration2"
                  >Star 2</label
                >
              </div>
              <div class="form-check form-check-inline">
                <input
                  class="form-check-input"
                  type="checkbox"
                  id="decoration3"
                />
                <label class="form-check-label" for="decoration3"
                  >Star 3</label
                >
              </div>
            </div>
          </div>
          <div class="mb-3">
            <label for="decorationsrotation"
              ><b>Decorations Rotation</b
              ><span
                class="badge bg-dark ms-2"
                id="decorationsrotationcode"
              ></span
            ></label>
            <input
              type="range"
              min="10"
              max="55"
              class="form-range"
              id="decorationsrotation"
            />
          </div>
        </div>
      </div>
      <br />
    </div>
  </main>

  <footer align="left">
    Ivan on Tech Academy - Ethereum DApp Programming Course 2021
  </footer>

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


catSettings.js
const defaultDNA = {
  //Colors
  outerColor: 20,
  innerColor: 20,
  eyesColor: 300,
  //Cattributes
  decoration1: 1,
  decoration2: 0,
  decoration3: 0,
  decorationsRotation: 10,
  animation: 1,
};

// when page load
$(document).ready(function () {
  renderCat(defaultDNA);
});

function renderCat(dna) {
  $("#outercolor").val(dna.outerColor).change();
  $("#innercolor").val(dna.innerColor).change();
  $("#eyescolor").val(dna.eyesColor).change();
  $("#decoration1").prop("checked", Boolean(dna.decoration1)).change();
  $("#decoration2").prop("checked", Boolean(dna.decoration2)).change();
  $("#decoration3").prop("checked", Boolean(dna.decoration3)).change();
  $("#decorationsrotation").val(dna.decorationsRotation).change();
}

// On changed color settings
$("#outercolor").change(() => {
  const val = $("#outercolor").val();
  outerColor(val);
});
$("#innercolor").change(() => {
  const val = $("#innercolor").val();
  innerColor(val);
});
$("#eyescolor").change(() => {
  const val = $("#eyescolor").val();
  eyesColor(val);
});

// On changed cattributes settings
$("#decoration1").change(() => {
  const isChecked = $("#decoration1").is(":checked");
  decorationsVisiblity(1, isChecked);
});
$("#decoration2").change(() => {
  const isChecked = $("#decoration2").is(":checked");
  decorationsVisiblity(2, isChecked);
});
$("#decoration3").change(() => {
  const isChecked = $("#decoration3").is(":checked");
  decorationsVisiblity(3, isChecked);
});
$("#decorationsrotation").change(() => {
  const val = $("#decorationsrotation").val();
  decorationsRotation(val);
});

catFactory.js
function outerColor(code) {
  //This changes the color of the cat
  const color = parseInt(code);
  $(`.cat__head,
    .cat__chest,
    .cat__ear--right,
    .cat__ear--left,
    .cat__paw-left,
    .cat__paw-right,
    .cat__paw-left_inner,
    .cat__paw-right_inner,
    .cat__tail`).css("background", `hsl(0,0%,${color}%)`);

  $("#outercode").html("code: " + code); //This updates the text of the badge next to the slider
  $("#dnaouter").html(code); //This updates the DNA text below the cat
}

function innerColor(code) {
  const color = parseInt(code);
  $(`.cat__mouth-contour,
    .cat__chest_inner,
    .cat__ear--left-inside,
    .cat__ear--right-inside`).css("background", `hsl(0,0%,${color}%)`);

  $("#innercode").html("code: " + code); //This updates the text of the badge next to the slider
  $("#dnainner").html(code); //This updates the DNA text below the cat
}

function eyesColor(code) {
  //This changes the color of the cat
  const color = parseInt(code) - 100;
  $(".cat__eye span").css("background", `hsl(${color}, 100%, 40%)`);

  $("#eyescode").html("code: " + code); //This updates the text of the badge next to the slider
  $("#dnaeyes").html(code); //This updates the DNA text below the cat
}

function decorationsVisiblity(idOfDeco, isChecked) {
  let code = "0";
  //This sets the visibility of the decorations
  if (isChecked) {
    code = "1";
    $(`.star${idOfDeco}`).css("display", "inherit");
  } else {
    $(`.star${idOfDeco}`).css("display", "none");
  }

  //This updates text of the badge next to the slider
  $(`#decorationscode${idOfDeco}`).html(code);
  //This updates the DNA text that is displayed below the cat
  $(`#dnadecoration${idOfDeco}`).html(code);
}

function decorationsRotation(code) {
  //This changes the rotation of the decorations
  const rotation = parseInt(code) - 10;
  $(".cat__head-dots > *").css("transform", `rotate(${rotation}deg)`);

  $("#decorationsrotationcode").html("code: " + code); //This updates the text of the badge next to the slider
  $("#dnadecorationsrotation").html(code); //This updates the DNA text below the cat
}

1 Like

Hey @vili I would like to checkout your code personally. Can you upload it to a github repository? So I will download and test myself.

hey @Maia I just notice that in many lines you are missing the property name because the upperCase character. Please check it all around and if you get some errors please send me screen shoot.

Hey Kenn, below is the link to the code.
https://github.com/Ale3andros/KittyProject

The sliders were working fine (the colour code and the DNA were being updated)and then I started implementing the animations. You suggested adding the span but in the meantime I had moved to the next videos from Filip. Then, the sliders started not working. It wasn’t updating the code(Colour code) and the DNA in the front end.

I looked my code line by line and compared it to other students but could not find anything.

At the moment, it is throwing errors that all the functions are not defined. I have also managed to connect it to Metamask but the tx does not go through.

I really appreciate your input and taking the time to look in to it.

Thank you and have a great weekend.

Vil

Hi @vili I took a look at your code and found whats missing.

all is in catSettings.js

Look at the images next images:

LINE 42 decorationSidesColorVar

2021-07-11_22h50_15

LINE 97 TO 12 ->decorationVariation

You just gotta close the bracked wich you , i mean, extra one “}” at the end of his function.

2021-07-11_22h59_12

After testing functions and styles was working good! Loos nice UI I like the colors !

Hopes this helps.

Here is myKitty it has 7 eye shapes and 6 decoration patterns.
myKittyCattributes
myKittyCattibutes2

Here is my code:

myKitty 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">My Kitties-Factory</h1>
            <p class="c-white">Create your custom Kitty</p>
        </div>
        <div class="row">
            <div class="col-lg-5 catBox m-2 light-b-shadow">
                <div class="cat">
                    <div class="cat__ears">
                        <div class="ear left_ear"></div>
                        <div class="ear right_ear"></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="eye left_eye">
                                <span class="pupil_left"></span>
                            </div>
                            <div class="eye right_eye">
                                <span class="pupil_right"></span>
                            </div>
                        </div>
                        <div class="nose"></div>
                        <div class="mouth">
                            <div class="tongue"></div>
                        </div>
                    </div>
                    <div id="tail" class="cat__tail">
                        <div class="tail_shaft"></div>
                        <!-- <div class="tail_flick"></div> -->
                    </div>
                    <div id="body" class="cat__body">
                        <div class="cat__chest"></div>
                    </div>
                    <div id="paws" class="cat__paws">
                        <div class="paw left_paw">
                            <div class="toe-pads">
                                <div class="toe-pad1"></div>
                                <div class="toe-pad2"></div>
                                <div class="toe-pad3"></div>
                            </div>
                            <div class="palm-pad"></div>
                        </div>
                        <div class="paw right_paw">
                            <div class="toe-pads">
                                <div class="toe-pad1"></div>
                                <div class="toe-pad2"></div>
                                <div class="toe-pad3"></div>
                            </div>
                            <div class="toe-pad"></div>
                            <div class="palm-pad"></div>
                        </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-6 cattributes m-2 light-b-shadow">

                <!-- Cat colors -->
                <div id="catColors">
                    <div class="form-group">
                        <label for="formControlRange">
                            <b>Head | Body Color</b>
                            <span class="badge badge-dark ml-2" id="headcode"></span>
                        </label>
                        <input type="range" min="10" max="98" class="form-control-range" id="bodycolor">
                    </div>
                    <div class="form-group">
                        <label for="formControlRange">
                            <b>Mouth | Chest | Tail Color </b>
                            <span class="badge badge-dark ml-2" id="mouthcode"></span>
                        </label>
                        <input type="range" min="10" max="98" class="form-control-range" id="mouthcolor">
                    </div>
                    <div class="form-group">
                        <label for="formControlRange">
                            <b>Eyes Color</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 color</b>
                            <span class="badge badge-dark ml-2" id="earscode"></span>
                        </label>
                        <input type="range" min="10" max="98" class="form-control-range" id="earscolor">
                    </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 Pattern</b>
                            <span class="badge badge-dark ml-2" id="decorationName"></span>
                        </label>
                        <input type="range" min="1" max="6" 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="decorationmidcode"></span>
                        </label>
                        <input type="range" min="10" max="98" class="form-control-range" id="decorationmidcolor">
                    </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="decorationsidescolor">
                    </div>
                </div>
            </div>
        </div>
        <br>
        <footer align="left">
            <p>Sean Babb 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>```
myKitty cats.css
*, *::before, *::after {

    margin: 0;

    padding: 0;

    box-sizing: inherit;

}

html {

    box-sizing: border-box;

    overflow-y: scroll;

}

body {

    background: #607d8b;

 

}

.cat__ears{

    position: relative;

}

.ear{

    border-radius: 90% 0 90% 0;

    background-color: rgb(255, 191, 0);

    height: 100px;

    width: 100px;

    position: absolute;

}

.left_ear{

    transform: scale(1, -1) rotate(0deg);

    left: 0;

}

.right_ear{

    left: 100px;

}

.cat__head{

    background-color: rgb(255, 191, 0);

    width: 200px;

    height: 200px;

    border-radius: 50%;

    position: relative;

}

.cat__head-dots{

    background-color: #ffb74d;

    height: 35px;

    width: 15px;

    border-radius: 0 0 50% 50% ;

    position: absolute;

    top: 1px;

    left: 94px;

}

.cat__head-dots_first {

    background-color: #11dd33;

    content: '';

    height: 35px;

    width: 15px;    

    border-radius: 50% 0 50% 50%;

    position: absolute;

    top: 2px;

    left: -20px;

}

.cat__head-dots_second {

    background: #11dd33;

    content: '';

    height: 35px;

    width: 15px;    

    border-radius: 0% 50% 50% 50%;

    position: absolute;

    top: 2px;

    left: 20px;

}

.cat__eye{

    position: relative;

    top: 30px;

    display: flex;

}

.left_eye{

    background-color: white;

    border-radius: 50%;

    width: 50px;

    height: 50px;

    margin: 25px;

    position: relative;

}

.right_eye{

    background-color: white;

    border-radius: 50%;

    width: 50px;

    height: 50px;

    margin: 25px;

    position: relative;

}

.pupil_left{

    background-color: black;

    width: 45px;

    height: 45px;

    border-radius: 50%;

    position: absolute;

    top: 3px;

    left: 3px;

}

.pupil_right{

    background-color: black;

    width: 45px;

    height: 45px;

    border-radius: 50%;

    position: absolute;

    top: 3px;

    left: 3px;

}

.nose{

    position: relative;

    width: 100px;

    height: 30px;

}

.nose::before,

.nose::after{

    position: absolute;

    content: "";

    left: 100px;

    top: 0px;

    width: 20px;

    height: 30px;

    background: rgb(64, 224, 208);

    border-radius: 50px 50px 0 0;

    transform: rotate(-45deg);

    transform-origin: 0 100%;

}

.nose::after{

    left: 80px;

    transform: rotate(45deg);

    transform-origin: 100% 100%;

}

.mouth{

    background-color: rgb(238, 130, 238);

    width: 80px;

    height: 30px;

    border-radius: 10px 10px 40px 40px;

    position: relative;

    margin: 10px 0 0 60px;

}

.tongue{

    background: rgb(229, 43, 80);

    width: 30px;

    height: 35px;

    border-radius: 20% 20% 40% 40%;

    position: relative;

    top: 12px;

    left: 25px;

}

.cat__body{

    background-color: rgb(255, 191, 0);

    width: 245px;

    height: 250px;

    border-radius: 40% 40% 15% 15%;

}

.cat__chest{

    background-color: rgb(255, 160, 220);

    width: 150px;

    height: 200px;

    border-radius: 45% 45% 40% 40% ;

    margin: 0px 0 0px 50px;

    position: relative;

    top: 25px;

}

.cat__paws{

    position: relative;

    display: flex;

    justify-content: flex-start;

}

.paw{

    background-color: rgb(185, 106, 15);

    border-radius: 50%;

    width: 100px;

    height: 100px;

}

.left_paw{

    margin: -15px 0 0 0;

    padding: 5px;

    position: absolute;

    top: -75px;

    left: 3px;

}

.right_paw{

    margin: -15px 0px 0 0;

    padding: 5px;

    position: absolute;

    top: -75px;

    left: 140px;

}

.toe-pads{

    position: relative;

    display: flex;

}

.toe-pad1{

    background-color: rgb(64, 224, 208);

    border-radius: 50%;

    width: 20px;

    height: 25px;

    position: absolute;

    margin: 15px 0 0 15px;

}

.toe-pad2{

    background-color: rgb(64, 224, 208);

    border-radius: 50%;

    width: 20px;

    height: 25px;

    position: absolute;

    margin: 5px 0 0 40px;

}

.toe-pad3{

    background-color: rgb(64, 224, 208);

    border-radius: 50%;

    width: 20px;

    height: 25px;

    position: absolute;

    margin: 15px 0 0 65px;

}

.palm-pad{

    position: relative;

    width: 100px;

    height: 90px;

}

.palm-pad::before,

.palm-pad::after{

    position: absolute;

    content: "";

    left: 50px;

    top: 48px;

    width: 20px;

    height: 30px;

    background: rgb(64, 224, 208);

    border-radius: 50px 50px 0 0;

    transform: rotate(-45deg);

    transform-origin: 0 100%;

}

.palm-pad::after{

    left: 30px;

    transform: rotate(45deg);

    transform-origin: 100% 100%;

}

.cat__tail{

    position: relative;

}

.tail_shaft{

    background-color: rgb(255, 191, 0);

    width: 150px;

    height: 45px;

    border-radius: 0 55% 38% 0;

    position: absolute;

    top: 190px;

    left: 155px;

}
myKitty catSettings.js
var colors = Object.values(allColors())

var defaultDNA = {

    "headColor" : 10,

    "mouthColor" : 13,

    "eyesColor" : 33,

    "earsColor" : 10,

    //Cattributes

    "eyesShape" : 1,

    "decorationPattern" : 1,

    "decorationMidcolor" : 13,

    "decorationSidescolor" : 13,

    "animation" : 1,

    "lastNum" :  1

    }

// when page load

$( document ).ready(function() {

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

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

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

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

    

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

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

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

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

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

  $('#dnaspecial').html(defaultDNA.lastNum)

  renderCat(defaultDNA)

});

function getDna(){

    var dna = ''

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

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

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

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

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

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

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

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

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

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

    return parseInt(dna)

}

function renderCat(dna){

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

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

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

    $('#mouthcolor').val(dna.mouthColor)

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

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

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

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

    eyeVariation(dna.eyesShape)

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

    decorationVariation(dna.decorationPattern)

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

    decorationMidColor(dna.decorationMidcolor)

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

    decorationSidesColor(dna.decorationSidescolor)

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

})

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

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

    eyesColor(colors[colorVal],colorVal)

})

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

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

    earsColor(colors[colorVal],colorVal)

})

// Changing cat decoration color

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

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

    decorationMidColor(colors[colorVal],colorVal)

})

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

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

    decorationSidesColor(colors[colorVal],colorVal)

})

// Changing cat eye shape

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

    var shape = parseInt($('#eyeshape').val()) // between 1 and 7

    eyeVariation(shape)

})

// Changing cat decoration patterns

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

    var pattern = parseInt($('#decorationpattern').val()) // between 1 and 6

    decorationVariation(pattern)

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

}

// Color functions for range-bars

function headColor(color,code) {

    $('.cat__head, .cat__body').css('background', '#' + color)  //This changes the color of the cat's 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) {

    $('.mouth, .cat__chest, .tail_shaft').css('background', '#' + color)  //This changes the color of the cat's mouth, chest, and tail

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

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

}

function eyesColor(color,code) {

    $('.pupil_left, .pupil_right').css('background', '#' + color)  //This changes the color of the cat's eyes

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

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

}

function earsColor(color,code) {

    $('.left_ear, .right_ear, .left_paw, .right_paw').css('background', '#' + color)  //This changes the color of the cat's ears and paws

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

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

}

function decorationMidColor(color,code) {

    $('.cat__head-dots').css('background', '#' + color)  //This changes the color of the cat's middle decoration

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

    $('#dnadecorationMid').html(code) //This updates the decoration mid 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 color of the cat's side decorations

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

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

}

// Variation functions for range-bars

// 7 eye types

function eyeVariation(num) {

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

    switch (num) {

        case 1:

            normalEyes()

            $('#eyeName').html('Wide') //set badge to "Wide"

            break

        case 2:

            normalEyes() //reset

            $('#eyeName').html('Look Down') //set badge to "Look Down"

            eyesType1() //set border to change the shape of the eye

            break

        case 3:

            normalEyes() //reset

            $('#eyeName').html('Look Up') //set badge to "Look Up"

            eyesType2() //set border to change the shape of the eye

            break

        case 4:

            normalEyes() //reset

            $('#eyeName').html('Look Right') //set badge to "Look Right"

            eyesType3() //set border to change the shape of the eye

            break

        case 5:

            normalEyes() //reset

            $('#eyeName').html('Look Left') //set badge to " Look Left"

            eyesType4() //set border to change the shape of the eye

            break

        case 6:

            normalEyes() //reset

            $('#eyeName').html('Closed') //set badge to " Closed "

            eyesType5() //set border to change the shape of the eye

            break

        case 7:

            normalEyes() //reset

            $('#eyeName').html('Narrow') //set badge to " Narrow "

            eyesType6() //set border to change the shape of the eye

            break

        default:

            console.log("Not in range")

    }

}

// 6 Pattern types

function decorationVariation(num) {

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

    switch (num) {

        case 1:

            $('#decorationName').html('Basic') //set badge to "Basic"

            normaldecoration()

            break

        case 2:

            normaldecoration() //reset

            $('#decorationName').html('Thin') //set badge to "Thin"

            decorationType1() //set rotatation to change decoration pattern

            break

        case 3:

            normaldecoration() //reset

            $('#decorationName').html('Rocker') //set badge to "Rocker"

            decorationType2() //set rotatation to change decoration pattern

            break

        case 4:

            normaldecoration() //reset

            $('#decorationName').html('Crew') //set badge to "Crew"

            decorationType3() //set rotatation to change decoration pattern

            break

        case 5:

            normaldecoration() //reset

            $('#decorationName').html('Party') //set badge to "Party"

            decorationType4() //set rotatation to change decoration pattern

            break

        case 6:

            normaldecoration() //reset

            $('#decorationName').html('Simple') //set badge to "Simple"

            decorationType5() //set rotatation to change decoration pattern

            break

        default:

            console.log("Not in range")

    }

}

async function normalEyes() {

    await $('.cat__eye').find('span').css('border', 'none')

}

async function eyesType1() {

    await $('.cat__eye').find('span').css('border-top', '15px solid')

}

async function eyesType2() {

    await $('.cat__eye').find('span').css('border-bottom', '15px solid')

}

async function eyesType3() {

    await $('.cat__eye').find('span').css('border-left', '15px solid')

}

async function eyesType4() {

    await $('.cat__eye').find('span').css('border-right', '15px solid')

}

async function eyesType5() {

    await $('.cat__eye').find('span').css('border-top', '20px solid')

    await $('.cat__eye').find('span').css('border-bottom', '20px solid')

}

async function eyesType6() {

    await $('.cat__eye').find('span').css('border-left', '20px solid')

    await $('.cat__eye').find('span').css('border-right', '20px solid')

}

async function normaldecoration() {

    //Remove all style from other decorations

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

    $('.cat__head-dots').css({ "transform": "rotate(0deg)", "height": "35px", "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() {

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

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

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

}

async function decorationType2() {

    $('.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": "20px", "width": "14px", "top": "1px", "border-radius": "50% 0 50% 50%" })

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

}

async function decorationType3() {

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

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

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

}

async function decorationType4() {

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

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

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

}

async function decorationType5() {

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

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

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

}
1 Like

my cat is getting cutier !

Screen Shot 2021-07-12 at 1.45.08 PM

my cat is unique, however, I used the same stripe design css code as what we got from github.

here are relevant code snippets:

#1 html

                    <!-- change stripe style color -->
                    <label for="formControlRange"><b>Stripe Style</b><span class="badge badge-dark ml-2" id="decorationName"></span></label>
                    <input type="range" min="1" max="3" class="form-control-range" id="stripestyle">
                    <!-- middle stripe color -->
                    <label for="formControlRange"><b>Mid Stripe Color</b><span class="badge badge-dark ml-2" id="midstripecode"></span></label>
                    <input type="range" min="10" max="98" class="form-control-range" id="midstripecolor">
                    <!-- side stripe color -->
                    <label for="formControlRange"><b>Side Stripe Color</b><span class="badge badge-dark ml-2" id="sidestripecode"></span></label>
                    <input type="range" min="10" max="98" class="form-control-range" id="sidestripecolor">

cat settings…

// Changing stripe style
$('#stripestyle').change(()=>{
  var style = parseInt($('#stripestyle').val()) //number between 1 and 3
  decorationVariation(style)
})

// Changing middle stripe
$('#midstripecolor').change(()=>{
  var colorVal = $('#midstripecolor').val()
  midStripeColor(colors[colorVal],colorVal)
})

// Changing side stripe
$('#sidestripecolor').change(()=>{
  var colorVal = $('#sidestripecolor').val()
  sideStripeColor(colors[colorVal],colorVal)
})

and finally cat factory

function decorationVariation(num) {
    $('#dnadecoration').html(num)
    switch (num) {
        case 1:
            $('#decorationName').html('Basic')
            normaldecoration()
            break
        case 2:
            $('#decorationName').html('Hip')
            normaldecoration()
            return decoration1()
            break
        case 3:
            $('#decorationName').html('Cool')
            normaldecoration()
            return decoration2()
            break
    }
}

//Change middle stripe color
function midStripeColor(color,code) {
    $('.cat__head-dots').css('background', '#' + color)  //This changes the eye color of the cat
    $('#midstripecode').html('code: '+code) //This updates text of the badge next to the slider
    $('#decorationMidcolor').html(code) //This updates the eye color part of the DNA that is displayed below the cat
}

//Change side stripe color
function sideStripeColor(color,code) {
    $(' .cat__head-dots_first, .cat__head-dots_second').css('background', '#' + color)  //This changes the eye color of the cat
    $('#sidestripecode').html('code: '+code) //This updates text of the badge next to the slider
    $('#decorationSidescolor').html(code) //This updates the eye color part of the DNA that is displayed below the cat
}

//change direct and shape of cat stripes based on user input
function decorationVariation(num) {
    $('#dnadecoration').html(num)
    switch (num) {
        case 1:
            $('#decorationName').html('Basic')
            normaldecoration()
            break
        case 2:
            $('#decorationName').html('Hip')
            normaldecoration()
            return decoration1()
            break
        case 3:
            $('#decorationName').html('Cool')
            normaldecoration()
            return decoration2()
            break
    }
}

async function decoration1() {
    //changes angle of cat stripes
    $('.cat__head-dots').css({ "transform": "rotate(0deg)", "height": "60px", "width": "14px", "top": "1px", "border-radius": "0 0 50% 50%" })
    $('.cat__head-dots_first').css({ "transform": "rotate(10deg)", "height": "50px", "width": "14px", "top": "1px", "border-radius": "50% 0 50% 50%" })
    $('.cat__head-dots_second').css({ "transform": "rotate(-10deg)", "height": "50px", "width": "14px", "top": "1px", "border-radius": "0 50% 50% 50%" })
}


async function decoration2() {
    //changes angle of cat stripes
    $('.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(20deg)", "height": "35px", "width": "14px", "top": "1px", "border-radius": "50% 0 50% 50%" })
    $('.cat__head-dots_second').css({ "transform": "rotate(-20deg)", "height": "35px", "width": "14px", "top": "1px", "border-radius": "0 50% 50% 50%" })
}
1 Like

Hi @kenn.eth, Thank you very much for your help. I spent so much time on looking every single line and I could not find what I did wrong.

Appreciate your help and the feedback.

Many thanks,
Vilior

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">Crypto-Kitties-Factory</h1>
        <p class="c-white">Create your custom Crypto-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>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</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>Mouth</b><span class="badge badge-dark ml-2" id="mouthcode"></span></label>
                    <input type="range" min="10" max="98" class="form-control-range" id="mouthcolor">
                </div>
                <div class="form-group">
                    <label for="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>Michael McClimon's Defi Project July 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>

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 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').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 mouthColor(color,code) {
    $('.cat__mouth-contour').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 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%" })
}

catSettings.js


var colors = Object.values(allColors())

var defaultDNA = {
    "headcolor" : 10,
    "mouthcolor" : 10,
    "eyescolor" : 10,
    "earscolor" : 10,
    //Cattributes
    "eyesShape" : 1,
    "decorationPattern" : 1,
    "decorationMidcolor" : 10,
    "decorationSidescolor" : 10,
    "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)
    eyesColor(colors[dna.eyescolor],dna.eyescolor)
    $('#eyescolor').val(dna.eyescolor)
    earsColor(colors[dna.earscolor],dna.earscolor)
    $('#earscolor').val(dna.earscolor)
    mouthColor(colors[dna.mouthcolor],dna.mouthcolor)
    $('#mouthcolor').val(dna.mouthcolor)
    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)
})
$('#eyescolor').change(()=>{
  var colorVal = $('#eyescolor').val()
  eyesColor(colors[colorVal],colorVal)
})
$('#earscolor').change(()=>{
  var colorVal = $('#earscolor').val()
  earsColor(colors[colorVal],colorVal)
})
$('#mouthcolor').change(()=>{
  var colorVal = $('#mouthcolor').val()
  mouthColor(colors[colorVal],colorVal)
})
$('#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)
})
1 Like