Assignment - Template and Color

[mubahsir_hussain]

**sorry I am not good in CSS that why I use teacher code **
but after all its a great learning experience

catsetting.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)
  mouthAndBelly(colors[dna.mouthColor], dna.mouthColor)
  $('#mouthcolor').val(dna.mouthColor)
  eyeColor(colors[dna.eyesColor], dna.eyesColor)
  $('#eyecolor').val(dna.eyesColor)
  earsAndPaw(colors[dna.earsColor], dna.earsColor)
  $('#earcolor').val(dna.earsColor)
}

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

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

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

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

catfactory.js

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

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

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

function mouthAndBelly(color, code) {
    $('.cat__mouth-contour').css('background', '#' + color)  //This changes the color of mouth
    $('#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 eyeColor(color, code) {
    $('.cat__eye').find('span').css('background', '#' + color)  //This changes the color of eyes
    $('#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 earsAndPaw(color, code) {
    $('.cat__ear--left, .cat__ear--right, .cat__paw--left, .cat__paw--right, .cat__paw-left_inner, cat__paw-right_inner').css('background', '#' + color)  //This changes the 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
}


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

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

function decorationVariation(num) {
    $('#dnadecoration').html(num)
    switch (num) {
        case 1:
            $('#decorationName').html('Basic')
            normaldecoration()
            break
    }
}

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

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

[Bikuta]

Super cool, are you an artist by chance? Your css is very detailed. I couldn’t figure out how to get patches on my pet because I was trying to use the :before and :after in css.

[Bikuta]

I decided to make a crypto doggy version, kept the design simple, but I added a sky, and bubble

index.html

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

        <script type="text/javascript" src="assets/js/jquery-3.4.1.js"></script>
        <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
        <script src="assets/bootstrap/js/popper.js"></script>
        <script src="assets/bootstrap/js/bootstrap.min.js"></script>
        <link rel="stylesheet" href="assets/css/mystyle.css">
        <link rel="stylesheet" href="assets/css/dogs.css">
        <link rel="stylesheet" href="assets/css/colors.css">
        <link rel="stylesheet" href="assets/css/factory.css">
        <link rel="stylesheet" href="assets/css/frontend.css">
    </head>
    <body>
        <div class="container p-5">
            <div align="center">
                <h1 class="c-white">Crypto Doggies Factory</h1>
                <p class="c-white">Create your custom Doggy</p>
            </div>
        </div>
        <div class="row">
            <div class="col-12 col-lg-6 catBox light-b-shadow">
                <div class="container doggy-container">
                    <div class="bubble">
                        <div class="ear-left">
                            <div class="ear"></div>
                        </div>
                        <div class="ear-right">
                            <div class="ear"></div>
                        </div>
                        <div class="head"></div>
                        <div class="dog"></div>
                        <div class="eyes"></div>
                        <div class="nose"></div>
                        <div class="left mouth"></div>
                        <div class="right mouth"></div>
                        <div class="tongue"></div>
                    </div>
                </div>
                <br>
                <div class="dnaDiv" id="catDNA">
                    <b>
                        DNA:
                        <!-- Colors -->
                        <span id="dnabody"></span>
                        <span id="dnaeyes"></span>
                        <span id="dnaears"></span>
                        <span id="dnamouth"></span>
                        <span id="dnasky"></span>
                        <span id="dnabubble"></span>
                            
                            <!-- Cattributes -->
                            <span id="dnashape"></span>
                            <span id="dnadecoration"></span>
                            <span id="dnadecorationMid"></span>
                            <span id="dnadecorationSides"></span>
                            <span id="dnadanimation"></span>
                            <span id="dnaspecial"></span>
                        </b>
                </div>
            </div>
            <div class="col-12 col-lg-6 cattributes light-b-shadow">
                <!-- Cat colors -->
                <div id="catColors">
                    <div class="form-group">
                        <label for="formControlRange"><b>Head Color</b><span class="badge badge-dark ml-2" id="headcode"></span></label>
                        <input type="range" min="10" max="98" class="form-control-range" id="bodycolor">
                        <br/>
                        <label for="formControlRange"><b>Eye Color</b><span class="badge badge-dark ml-2" id="eyecode"></span></label>
                        <input type="range" min="10" max="98" class="form-control-range" id="eyesColor">
                        <br/>
                        <label for="formControlRange"><b>Ear Color</b><span class="badge badge-dark ml-2" id="earscode"></span></label>
                        <input type="range" min="10" max="98" class="form-control-range" id="earsColor">
                        <br/>
                        <label for="formControlRange"><b>Mustache Color</b><span class="badge badge-dark ml-2" id="mouthcode"></span></label>
                        <input type="range" min="10" max="98" class="form-control-range" id="mouthColor">
                        <br/>
                        <label for="formControlRange"><b>Sky Color</b><span class="badge badge-dark ml-2" id="skycode"></span></label>
                        <input type="range" min="10" max="98" class="form-control-range" id="skyColor">
                        <br/>
                        <label for="formControlRange"><b>Bubble Color</b><span class="badge badge-dark ml-2" id="bubblecode"></span></label>
                        <input type="range" min="10" max="98" class="form-control-range" id="bubbleColor">
                    </div>
                </div>
            </div>
        </div>
        <br> 
        <footer align="left">
            <p>Victor Valdez GoodGains Exchange 2022</p>
        </footer>
    </body>
        <script src="assets/js/colors.js"></script>
        <script src="assets/js/catSettings.js"></script>
        <script src="assets/js/catFactory.js"></script>
</html>

dogs.css

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

.doggy-container{
    position: relative;
    margin: auto;
    background-color: #fda47bd9;
    height: 375px;
    width: 375px;
}
.bubble{
    width: 360px;
    height: 360px;
    background: #0084ffa8;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}
.dog{
    width: 220px;
    height: 90px;
    background: #fcefcd;
    border-radius: 60px;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 90px;
    margin: auto;
    z-index: 1;
    overflow: hidden;
}
.head{
    width: 170px;
    height: 120px;
    background: #fcefcd;
    border-radius: 70px 70px 0 0;
    position: absolute;
    left: 0;
    right: 0;
    top: 70px;
    margin: auto;
    overflow: hidden;
}
.eyes{
    width: 16px;
    height: 16px;
    background: #0084ffa8;
    border-radius: 50%;
    position: absolute;
    left: 140px;
    bottom: 180px;
    z-index: 1;
    box-shadow: 65px 0 #0084ffa8;
    animation: blink 3s infinite linear;
}
@keyframes blink{
    4%{
        transform: scaleY(.1);
    }
    15%{
        transform: scaleY(1);
    }
}
.nose{
    width: 44px;
    height: 24px;
    background: #89766c;
    border-radius: 20% 20% 50% 50% / 25% 25% 70% 70%;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 153px;
    margin: auto;
    z-index: 3;
}
.nose:before{
    content: '';
    width: 24px;
    height: 10px;
    background: #a58f82;
    border-radius: inherit;
    position: absolute;
    left: 0;
    right: 0;
    top: 4px;
    margin: auto;
}
.mouth{
    width: 50px;
    height: 25px;
    background: #9a7b6a;
    border: 5px solid #9a7b6a;
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
    position: absolute;
    bottom: 134px;			
    z-index: 2;		
}
.mouth:before{
    content: '';
    width: 5px;
    height: 5px;
    background: inherit;
    border-radius: 50%;
    position: inherit;
    top: -2.5px;
}
.left.mouth{
    left: 132.5px;
}
.right.mouth{
    right: 132.5px;
}
.left.moutheft:before{
    left: -5px;
}
.right.mouth:before{
    right: -5px;
}
.tongue{
    width: 36px;
    height: 40px;
    background: #ffc7d0;
    border-radius: 0 0 50px 50px;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 108px;
    margin: auto;
    z-index: 1;
}
.tongue:before{
    content: '';
    width: 5px;
    height: 36px;
    background: #fea4b0;
    border-radius: 10px;
    position: inherit;
    left: 0;
    right: 0;
    margin: auto;
}
.ear{
    position: absolute;
    background: #89766c;
    z-index: 1;
}
.ear:before,
.ear:after{
    content: '';
    position: inherit;
    background: inherit;
}
.ear,
.ear:before,
.ear:after{
    width: 50px;
    height: 50px;
    border-top-right-radius: 30%;
}
.ear{
    transform: rotate(-60deg) skewX(-30deg) scale(1, .866);
}
.ear:before{
    transform: rotate(-135deg) skewX(-45deg) scale(1.414, .707) translate(0, -50%);
}
.ear:after{
    transform: rotate(135deg) skewY(-45deg) scale(.707, 1.414) translate(50%);
}
.ear-left{
    position: absolute;
    left: 104px;
    top: 69px;
    transform: rotate(30deg);
    z-index: 1;
}
.ear-right{
    position: absolute;
    right: 150px;
    top: 90px;
    transform: rotate(-30deg);
    z-index: 1;
}

dogSettings.js

var colors = Object.values(allColors())

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

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

  renderCat(defaultDNA)
});

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

    return parseInt(dna)
}

function renderCat(dna){
    headColor(colors[dna.headcolor],dna.headcolor)
    $('#bodycolor').val(dna.headcolor)
    eyesColor(colors[dna.eyesColor],dna.eyesColor)
    $('#eyesColor').val(dna.eyesColor)
    earsColor(colors[dna.earsColor],dna.earsColor)
    $('#earsColor').val(dna.earsColor)
    mouthColor(colors[dna.mouthColor],dna.mouthColor)
    $('#mouthColor').val(dna.mouthColor)
    skyColor(colors[dna.skyColor],dna.skyColor)
    $('#skyColor').val(dna.skyColor)
    bubbleColor(colors[dna.bubbleColor],dna.bubbleColor)
    $('#bubbleColor').val(dna.bubbleColor)
}

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

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

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

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

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

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

dogFactory.js

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

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

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

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

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

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


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

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

function decorationVariation(num) {
    $('#dnadecoration').html(num)
    switch (num) {
        case 1:
            $('#decorationName').html('Basic')
            normaldecoration()
            break
    }
}

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

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

[patgeek]

my cat becomes flashy

index.html

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


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



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

    <div id="cat">


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

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

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

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





      <div id="head_cat">

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

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

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


   <div class="eyes">

           <div class="eye">

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



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


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



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



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

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

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

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

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

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

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

</div>
</div>

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

</body>
</html>

styles.css

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


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

}


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

}

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


}


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



 .ears{

    display:flex;
    z-index:1;
 }



 .ear{

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

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

 }


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


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


 .zebra{
   position: absolute;

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

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

   position: relative;
 }



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


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


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

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


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

 .zebra_left_2{
     margin-top: 5px;
 }




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

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


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

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








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



  #leg_left{
    width: 154px;

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


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



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



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


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

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



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



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

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


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


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

}


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

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


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


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

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

colors.js

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

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

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

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

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

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

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

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

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

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

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





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

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

   console.log(numRange);
})




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
}

[Hudsen]

I need to fix a couple of minor things and I may change which parts change colors however this is what I will go with for now.
My factory:

html:

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

  <link rel="stylesheet" href="assets/css/mystyle.css">
  <link rel="stylesheet" href="assets/css/cats.css">
  <link rel="stylesheet" href="assets/css/colors.css">
  <link rel="stylesheet" href="assets/css/factory.css">
  <link rel="stylesheet" href="assets/css/frontend.css">
</head>
  <body>
    <div class="container p-5" style="margin-top: 12vh;margin-bottom: 10vh;">
        <div align="center">
        <h1 class="c-white">Kitties-Factory</h1>
        <p class="c-white">Create your custom Kitty</p>
    </div>
        <div class="row">
            <div class="col-lg-4 catBox m-2 light-b-shadow">
                <div class="cat">
                    <div class="ears">
                        <div class="ear left_ear">
                            <div class="inner-ear"></div>
                        </div>
                        <div class="ear right_ear">
                            <div class="inner-ear"></div>
                        </div>
                    </div>
                    <div id="head">
                        <div class="whisker_left whiskers one"></div>
                        <div class="whisker_left whiskers"></div>
                        <div class="whisker_left whiskers three"></div>
                        <div class="whisker_right whiskers R-one"></div>
                        <div class="whisker_right whiskers R-two"></div>
                        <div class="whisker_right whiskers R-three"></div>
                        <div class="eyes">
                            <div class="eye">
                                <div class="pupils">
                                    <div class="pupil_reflect"></div>
                                </div>
                            </div>
                            <div class="eye">
                                <div class="pupils">
                                    <div class="pupil_reflect"></div>
                                </div>
                            </div>
                        </div>
                        <div class="nose"></div>
                        <div class="cat__mouth-left"></div>
                        <div class="cat__mouth-right"></div>
                        <div class="head_mark"></div>
                        <div class="head_mark_2"></div>
                        <div class="head_mark_3"></div>
                    </div>
                    <div class="body">
                        <div class="leg leg-one"></div>
                        <div class="leg leg-two"></div>
                        <div class="leg leg-three"></div>
                        <div class="leg leg-four"></div>
                        <div class="belly"></div>
                    </div>
                    <div class="tail"></div>
                </div>
                <br>
                <div class="dnaDiv" id="catDNA">
                    <b>
                        DNA:
                        <!-- Colors -->
                         <span id="dnahead"></span>
                         <span id="dnaearsandbody"></span>
                         <span id="dnapaws"></span>
                         <span id="dnaeyes"></span>
                        
                         <!-- Cattributes -->
                         <span id="dnashape"></span>
                         <span id="dnadecoration"></span>
                         <span id="dnadecorationMid"></span>
                         <span id="dnadecorationSides"></span>
                         <span id="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 Tail</b><span class="badge badge-dark ml-2" id="headcode"></span></label>
                    <input type="range" min="10" max="98" class="form-control-range" id="bodycolor">
                </div>
                <div class="form-group">
                    <label for="formControlRange"><b>Outer Ears and Body</b><span class="badge badge-dark ml-2" id="ear_bodycode"></span></label>
                    <input type="range" min="10" max="98" class="form-control-range" id="ear_body">
                </div>
                <div class="form-group">
                    <label for="formControlRange"><b>Paws and Marking</b><span class="badge badge-dark ml-2" id="pawscode"></span></label>
                    <input type="range" min="10" max="98" class="form-control-range" id="pawscolor">
                </div>
                <div class="form-group">
                    <label for="formControlRange"><b>Eyes</b><span class="badge badge-dark ml-2" id="eyecode"></span></label>
                    <input type="range" min="0" max="98" class="form-control-range" id="eyecolor">
                </div>

            </div>

            </div>

            </div>
            <br>

        </div>



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

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

</html>

catSettings.js

var colors = Object.values(allColors())

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

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

  renderCat(defaultDNA)
});

function getDna(){
    var dna = ''
    dna += $('#dnahead').html()
    dna += $('#dnaearsandbody').html()
    dna += $('#dnapaws').html()
    dna += $('#dnaears').html()
    dna += $('#dnashape').html()
    dna += $('#dnadecoration').html()
    dna += $('#dnadecorationMid').html()
    dna += $('#dnadecorationSides').html()
    dna += $('#dnaanimation').html()
    dna += $('#dnaspecial').html()

    return parseInt(dna)
}

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

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

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

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

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

catFactory.js

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

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

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

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

function pawsColor(color,code) {
    $('.leg, .head_mark, .head_mark_2, .head_mark_3').css('background', '#' + color)
    $('#pawscode').html('code: '+code) //This updates text of the badge next to the slider
    $('#dnapaws').html(code) //This updates the body color part of the DNA that is displayed below the cat
}

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


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

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

function decorationVariation(num) {
    $('#dnadecoration').html(num)
    switch (num) {
        case 1:
            $('#decorationName').html('Basic')
            normaldecoration()
            break
    }
}

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

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

[A_Olson]

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

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

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

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

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

                    <div class="cat__body">

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

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


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


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


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

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

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

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

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

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

var colors = Object.values(allColors())

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

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

  renderCat(defaultDNA)
});

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

    return parseInt(dna)
}

function renderCat(dna){
    headColor(colors[dna.headcolor],dna.headcolor)
    $('#bodycolor').val(dna.headcolor)
    mouthColor(colors[dna.mouthColor],dna.mouthColor)
    $('#mouthcolor').val(dna.mouthColor)
    eyesColor(colors[dna.eyesColor],dna.eyesColor)
    $('#eyescolor').val(dna.eyesColor)
    earsColor(colors[dna.earsColor],dna.earsColor)
    $('#eyecolor').val(dna.eyesColor)
}

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

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

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

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

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

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

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

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

function eyesColor(color,code) {
    $('.pupil-right, .pupil-left').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 earsColor(color,code) {
    $('.cat__ear--left, .cat__ear--right').css('background', '#' + color)  //This changes the color of the cat
    $('#earcode').html('code: '+code) //This updates text of the badge next to the slider
    $('#dnaears').html(code) //This updates the body color part of the DNA that is displayed below the cat
}


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

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

function decorationVariation(num) {
    $('#dnadecoration').html(num)
    switch (num) {
        case 1:
            $('#decorationName').html('Basic')
            normaldecoration()
            break
    }
}

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

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

[alejandravisa]

Hi all,

I tried to copy my cat code on Filip’s html but it displays only the head. I’ve created my css file instead cats.css file but it doesn’t have a good look.

Hope someone can help me.

<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/myKittie.css">
    <link rel="stylesheet" href="assets/css/mystyle.css">
    <link rel="stylesheet" href="assets/css/colors.css">
    <link rel="stylesheet" href="assets/css/factory.css">
    <link rel="stylesheet" href="assets/css/frontend.css">
</head>

<body>
    <div class="container p-5" style="margin-top: 12vh;margin-bottom: 10vh;">
        <div align="center">
            <h1 class="c-white">Kitties-Factory</h1>
            <p class="c-white">Create your custom Kitty</p>
        </div>
        <div class="row">
            <div class="col-lg-4 catBox m-2 light-b-shadow">
                <div class="cat">
                    <div class="ears">
                        <div class="ear left_ear">
                            <div class="inner_ear left_inner_ear"></div>
                        </div>
                        <div class="ear right_ear">
                            <div class="inner_ear right_inner_ear"></div>
                        </div>
                    </div>
                    <div id="head">
                        <div class="eyes">
                            <div class="eye">
                                <div class="pupils"></div>
                                <div class="reflection"></div>
                                <div class="smaller_reflection"></div>
                            </div>
                            <div class="eye">
                                <div class="pupils"></div>
                                <div class="reflection"></div>
                                <div class="smaller_reflection"></div>
                            </div>
                        </div>
                        <div class="head_hair">
                            <div class="head_hair_left"></div>
                            <div class="head_hair_middle"></div>
                            <div class="head_hair_right"></div>
                            <div class="head_hair_straight_top"></div>
                        </div>
                        <div class="snout"></div>
                        <div class="nose"></div>
                        <div class="mouth">
                            <div class="mouth_left"></div>
                            <div class="mouth_right"></div>
                        </div>
                        <div class="whiskers">
                            <div class="whisker top_right_whisker"></div>
                            <div class="whisker top_left_whisker"></div>
                            <div class="whisker middle_right_whisker"></div>
                            <div class="whisker middle_left_whisker"></div>
                            <div class="whisker bottom_right_whisker"></div>
                            <div class="whisker bottom_left_whisker"></div>
                        </div>
                    </div>
                    <div class="body">
                        <div class="belly">
                            <div class="paws">
                                <div class="paw left_paw">
                                    <div class="toeline1"></div>
                                    <div class="toeline2"></div>
                                    <div class="toeline3"></div>
                                </div>
                                <div class="paw right_paw">
                                    <div class="toeline1"></div>
                                    <div class="toeline2"></div>
                                    <div class="toeline3"></div>
                                </div>
                            </div>

                            <div class="feet">
                                <div class="foot left_foot">
                                    <div class="toeline1"></div>
                                    <div class="toeline2"></div>
                                    <div class="toeline3"></div>
                                </div>
                                <div class="foot right_foot">
                                    <div class="toeline1"></div>
                                    <div class="toeline2"></div>
                                    <div class="toeline3"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="tail"></div>
                    <div class="tail_mask"></div>
                    <div class="tail_end"></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>

            </div>

        </div>
        <br>

    </div>

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

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

</html>

My ccs file. (I included the three first items of Filip’s css.)

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

body {
    background: #607d8b;
 
}

#head{
    background-color: rgb(255, 223, 133);
    width: 200px;
    height: 200px;
    border-radius: 50%;
    position: absolute;
}

.eyes{
    position: relative;
    top: 30px;
    display: flex;
}

.eye{
    background-color: rgb(86 145 60 / 68%);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    margin: 25px;
    position: relative;
    z-index: 1;
}

.pupils{
    background-color: black;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    position: absolute;
    top: 2px;
    left: 12px;
}

.reflection{
    background-color: white;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    position: absolute;
    top: 3px;
    left: 30px;
}

.smaller_reflection{
    background-color: white;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    position: absolute;
    top: 14px;
    left: 28px;
}

.ears{
    position: relative;
}

.ear{
    border-radius: 90% 0 90% 0;
    background-color: rgb(255 193 77);
    height: 100px;
    width: 100px;
    position: absolute;
}

.left_ear{
    transform: scale(1, -1) rotate(-1deg);
}

.right_ear{
    left: 100px;
}

.inner_ear{
    border-radius: 124% 0 124% 0;
    background-color: #ffa6b6;
    height: 101px;
    width: 100px;
}

.left_inner_ear{
    transform: rotate(0deg);
    top: -14px;
    left: 13px;
    position: relative;
}

.right_inner_ear{
    transform: rotate(0deg) ;
    top: 14px;
    left: -13px;
    position: relative;
}

.head_hair_left{
    border-radius: 50% 50% 50% 50%;
    transform: rotate(28deg);
    background-color: rgb(216, 128, 14);
    width: 12px;
    height: 29px;
    position: relative;
    top: -98px;
    left: 75px;
}

.head_hair_middle{
    border-radius: 56% 50% 50% 50%;
    background-color: rgb(216, 128, 14);
    width: 13px;
    height: 32px;
    position: relative;
    top: -127px;
    left: 91px;
}

.head_hair_right{
    border-radius: 50% 50% 50% 50%;
    transform: rotate(-28deg);
    background-color: rgb(216, 128, 14);
    width: 12px;
    height: 29px;
    position: relative;
    top: -160px;
    left: 110px;
}

.head_hair_straight_top{
    border-radius: 0 0 0 0;
    background-color: rgb(255, 223, 133);
    width: 39px;
    height: 4px;
    position: relative;
    top: -188px;
    left: 80px;
}

.snout{
    background-color: rgb(253 242 219);
    width: 153px;
    height: 104px;
    border-radius: 262%;
    position: relative;
    top: -103px;
    left: 24px;
}

.nose{
    background-color: #fdf2db;
    width: 0px;
    height: 0px;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 20px solid #ffa6b6;
    border-radius: 50%;
    position: relative;
    top: -198px;
    left: 82px;
}

.mouth{
    position: relative;
    top: 20px;
    left: 20px;
}

.mouth_left{
    width: 27px;
    height: 14px;
    border: solid 4px #000;
    border-color: #000 transparent transparent transparent;
    border-radius: 210%/83px 64px 0 0;
    transform: rotate( -185deg);
    position: absolute;
    top: -216px;
    left: 51px;
}

.mouth_right{
    width: 27px;
    height: 14px;
    border: solid 4px #000;
    border-color: #000 transparent transparent transparent;
    border-radius: 204%/83px 64px 0 0;
    transform: rotate( -177deg);
    position: absolute;
    top: -217px;
    left: 80px;
}

.whiskers{
    position: relative;
}

.whisker{
    border-radius: 0 0 0 0;
    background-color: black;
    height: 1px;
    width: 75px;
    position: absolute;
}

.top_right_whisker{
    transform: rotate(-12deg);
    top: -210px;
    left: 117px;
}

.top_left_whisker{
    transform: rotate(12deg);
    top: -210px;
    left: 11px;
}

.middle_right_whisker{
    transform: rotate(-2deg);
    top: -201.5px;
    left: 117.5px;
}

.middle_left_whisker{
    transform: rotate(2deg);
    top: -201.5px;
    left: 10px;
}

.bottom_right_whisker{
    transform: rotate( 5deg);
    top: -195px;
    left: 117px;
}

.bottom_left_whisker{
    transform: rotate(-5deg);
    top: -195px;
    left: 11px;
}

.body{
    background-color: rgb(255, 223, 133);
    width: 190px;
    height: 163px;
    border-radius: 50%;
    position: relative;
    top: 141px;
    left: 7px;
    z-index: -1;
}

.belly{
    background-color: rgb(253 242 219);
    width: 121px;
    height: 105px;
    border-radius: 50%;
    position: relative;
    top: 53px;
    left: 35px;
    z-index: -1;
}

.paws{
    position: relative;
}

.paw{
    border-radius: 50% 50% 25% 25%;
    background-color: rgb(255 193 77);
    height: 37px;
    width: 47px;
    position: absolute;
}

.left_paw{
    transform: rotate(-1deg);
    top: 80px;
    left: 14px;
}

.right_paw{
    transform: rotate(1deg);
    top: 80px;
    left: 65px;
}

.toeline1{
    transform: rotate(-92deg);
    border: solid 2.5px #000;
    border-color: black transparent transparent;
    border-radius: 84%/46% 72% 0 0;
    height: 6px;
    width: 17px;
    position: relative;
    top: 22px;
    left: 5px;
}

.toeline2{
    border-radius: 0 0 0 0;
    background-color: black;
    height: 18px;
    width: 2px;
    position: relative;
    top: 8px;
    left: 23px;
}

.toeline3{
    transform: rotate(85deg);
    border: solid 2.5px #000;
    border-color: black transparent transparent;
    border-radius: 84%/46% 72% 0 0;
    height: 6px;
    width: 17px;
    position: relative;
    top: -6px;
    left: 20px;
}

.feet{
    position: relative;
}

.foot{
    border-radius: 50% 50% 25% 25%;
    background-color: rgb(255 193 77);
    height: 37px;
    width: 49px;
    position: absolute;
}

.left_foot{
    transform: rotate(-1deg);
    top: 73px;
    left: -38px;
}

.right_foot{
    transform: rotate(0deg);
    top: 70px;
    left: 114px;
}

.tail {
    position: absolute;
    margin-left: 26px;
    margin-top: 40px;
    height: 83px;
    width: 61px;
    border: 22px solid rgb(255 193 77);
    border-radius: 50px;
    display: inline-block;
    top: 99px;
    left: 116px;
    transform: rotate(-60deg);
    z-index: -3;
}
  
.tail_mask {
    position: absolute;
    margin-top: 17px;
    margin-left: 112px;
    height: 65px;
    width: 94px;
    background-color: #ffffff;
    top: 118px;
    left: 22px;
    z-index: -2;
}

.tail_end{
    position: absolute;
    background-color: rgb(255 193 77);
    border-radius: 55%;
    width: 27px;
    height: 27px;
    top: 161.3px;
    left: 212px;
}

[mcgrane5]

it seems like your cats body’s css is appearing behind the background. you could fix this by changig the z-index css property of the background to like -1 or something. z-index: -1

[codinginlondon]

Hi All,

This cat can change its head, body, ears and legs colors.

I had to modify code in catFactory.js and catSetting.js

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/scared_cat.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">Kitty Freakout</h1>
        <p class="c-white">This kitty accidently broke an OFAC sanction</p>
    </div>
        <div class="row">
            <div class="col-lg-6 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 id="head">
                        <div class="eyes">
                            <div class="eye">
                                <div class="pupils"></div>
                            </div>
                            <div class="eye">
                                <div class="pupils"></div>
                            </div>
                        </div>
        
                        <div class="mouth">
        
                        </div>
        
                    </div>
                    <div class="catbody">
                        <div class="legs">
                            <div class="legs" id="leg1"></div>
                            <div class="legs" id="leg2"></div>
                        </div>
                    </div>
                </div>
        
                <br>
                <div class="dnaDiv" id="catDNA">
                    <b>
                        DNA:
                        <!-- Colors -->
                        <span id="dnabody"></span>
                        <span id="dnahead"></span>
                        <span id="dnaears"></span>
                        <span id="dnalegs"></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-5 cattributes m-2 light-b-shadow">
        
                <!-- Cat colors -->
                <div id="catColors">
                    <div class="form-group">
                        <label for="formControlRange"><b>Body</b><span class="badge badge-dark ml-2"
                                id="bodycode"></span></label>
                        <input type="range" min="10" max="98" class="form-control-range" id="bodycolor">
                        <label for="formControlRange"><b>Head</b><span class="badge badge-dark ml-2"
                                id="headcode"></span></label>
                        <input type="range" min="10" max="98" class="form-control-range" id="headcolor">
                        <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">
                    <label for="formControlRange"><b>Legs</b><span class="badge badge-dark ml-2"
                        id="legscode"></span></label>
                <input type="range" min="10" max="98" class="form-control-range" id="legscolor">

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

scared_cat.css

.cat{
    /* border-style: solid; */
    width: 400px;
    position: relative; 
    top: 46px; 
    margin: auto; 
}

#head{
    background-color: #a19796;
    width: 200px;
    height: 180px;
    border-radius: 50%;
}

.catbody{
    background-color: #666160;
    border-radius: 20%;
    position: absolute;
    top: 60px;
    left: 145px;
    width: 192px;
    height: 112px;
    transform: skewX(30deg);
    z-index: -1;
    transform: rotate(-8deg);
}

.eyes{
    position: relative;
    top: 30px;
    display: flex;
}

.eye{
    background-color: white;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    margin: 4px;
    position: relative;
}

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


.ears{
    position: relative;
    z-index: -1;
}

.ear{
    border-radius: 90% 0 90% 0;
    background-color: salmon;
    height: 100px;
    width: 100px;
    position: absolute;
    left: 100px;
}

.left-ear{
    transform: rotate(-10deg);
    left: 0;
    left: 57px;
    top: -10px; 
}

.right-ear{
    left: 100px;
    top: 5px;
}


.mouth{
    background-color: salmon;
    border-radius: 50%;
    position: absolute;
    top: 136px;
    left: 120px;
    width: 35px;
    height: 22px;
    transform: skewX(18.6deg);
}


.legs{
    background-color: a19796;
    z-index: -1; 

}


#leg1{
    border-radius: 50%;
    position: absolute;
    top: 87px;
    left: 148px;    
    width: 23px;
    height: 52px;
    transform: rotate(-40deg);
}


#leg2{
    border-radius: 50%;
    position: absolute;
    top: 78px;
    left: 179px;    
    width: 23px;
    height: 52px;
    transform: rotate(-50deg);
  }  

catFactory.js

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

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


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


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


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


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



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

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

function decorationVariation(num) {
    $('#dnadecoration').html(num)
    switch (num) {
        case 1:
            $('#decorationName').html('Basic')
            normaldecoration()
            break
    }
}

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

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

catSettings.js

var colors = Object.values(allColors())

var defaultDNA = {
    "bodyColor" : 10,
    "headColor" : 13,
    "earsColor" : 96,
    "legsColor" : 10,
    //Cattributes
    "eyesShape" : 1,
    "decorationPattern" : 1,
    "decorationMidcolor" : 13,
    "decorationSidescolor" : 13,
    "animation" :  1,
    "lastNum" :  1
    }

// when page load
$( document ).ready(function() {
  $('#dnabody').html(defaultDNA.bodyColor);
  $('#dnahead').html(defaultDNA.headColor);
  $('#dnaears').html(defaultDNA.earsColor);
  $('#dnalegs').html(defaultDNA.legsColor);
    
//   $('#dnashape').html(defaultDNA.eyesShape)
//   $('#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 += $('#dnahead').html()
    dna += $('#dnaears').html()
    dna += $('#dnalegs').html()
    dna += $('#dnashape').html()
    dna += $('#dnadecoration').html()
    dna += $('#dnadecorationMid').html()
    dna += $('#dnadecorationSides').html()
    dna += $('#dnaanimation').html()
    dna += $('#dnaspecial').html()

    return parseInt(dna)
}

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



  // headColor(colors[dna.headcolor], dna.headcolor)
  // $('#headcolor').val(dna.headcolor)

  
  
}

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

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

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

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

[codinginlondon]

This cat looks awesome!

[alejandravisa]

I’ve tried that but it doesn’t work

[mcgrane5]

hmmm can u share a github link i can clone into your code and take a look myself for you

[PaulS96]

Hi. Here is my solution for this exercise.

index.html

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Academy Bears </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/bears.css">
  <link rel="stylesheet" href="assets/css/colors.css">
  <link rel="stylesheet" href="assets/css/factory.css">
  <link rel="stylesheet" href="assets/css/frontend.css">
</head>
  <body>
    <div class="container p-5" style="margin-top: 12vh;margin-bottom: 10vh;">
        <div align="center">
        <h1 class="c-white">Bear-Factory</h1>
        <p class="c-white">Create your custom Bear</p>
    </div>
        <div class="row">
            <div class="col-lg-4 bearBox m-2 light-b-shadow">
                <div class="bear">
                    <div class="ears">
                        <div class="ear leftEar">
                            <div class="innerEar"></div>
                        </div>
                        <div class="ear rightEar">
                            <div class="innerEar"></div>
                        </div>
                    </div>
                    <div class="head">
                        <div class="eyes">
                            <div class="eye">
                                <div class="pupils"></div>
                            </div>
                            <div class="eye">
                                <div class="pupils"></div>
                            </div>
                        </div>
                        <div class="nose"></div>
                        <div class="mouth"></div>
                    </div>
                    <div class="body">
                        <div class="frontPaws">
                            <div class="frontPaw leftFrontPaw"></div>
                            <div class="frontPaw rightFrontPaw"></div>
                        </div>
                        <div class="belly"></div>
                        <div class="backPaws">
                            <div class="backPaw leftBackPaw"></div>
                            <div class="backPaw rightBackPaw"></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>
                        
                         <!-- Attributes -->
                         <span id="dnashape"></span>
                         <span id="dnadecoration"></span>
                         <span id="dnadecorationMid"></span>
                         <span id="dnadecorationSides"></span>
                         <span id="dnadanimation"></span>
                         <span id="dnaspecial"></span>
                    </b>
                </div>
            </div>
            <div class="col-lg-7 bearAttributes m-2 light-b-shadow">
                <!-- Bear colors -->
                <div id="bearColors">
                <!-- Bear Head and Body -->
                <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>
                <!-- Bear Mouth, Belly and Nose -->
                <div class="form-group">
                    <label for="formControlRange"><b>Mouth, Belly and Nose</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>
                <!-- Bear Pupil Color -->
                <div class="form-group">
                    <label for="formControlRange"><b>Eye 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>
                <!-- Bear Inner Ear and Paw Color -->
                <div class="form-group">
                    <label for="formControlRange"><b>Ear and Paw 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>

            </div>

            </div>
            <br>

        </div>



    </div>
    <footer align="left">
        <p>Project for NFT Marketplace Course @ Moralis Academy, August 2022</p>
    </footer>

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

</html>

bears.css

*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: inherit;
}

html {
    box-sizing: border-box;
    overflow-y: scroll;
}

body {
    background: #607d8b;
 
}

.head {
    background-color: #804000;
    width: 200px;
    height: 200px;
    border-radius: 45%;
    margin-left: 40px;
}

.eyes {
    position: relative;
    top: 30px;
    display: flex;
}

.eye {
    background-color: #fff;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    margin: 25px;
    position: relative;
    
}

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

.ears {
    position: relative;
    z-index: -1;
}

.ear {
    border-radius: 50%;
    background-color: #804000;
    height: 100px;
    width: 100px;
    position: absolute;
}

.leftEar {
    transform: scale(1,-1);
    left: 15px;
}

.rightEar {
    left: 160px;
}

.innerEar {
    border-radius: 50%;
    background-color: #996600;
    height: 70px;
    width: 70px;
    position: relative;
    margin: 15px;
}

.nose {
    background-color: #997300;
    border-radius: 20% 20% 50% 50%;
    width: 40px;
    height: 40px;
    position: relative;
    left: 75px;
}

.mouth {
    background-color: #997300;
    width: 50px;
    height: 20px;
    border-radius: 130% 90% 130% 90%;
    margin-left: 75px;
    margin-top: 5px;
}

.body {
    position: absolute;
    top: 145px;
    background-color: #804000;
    width: 300px;
    height: 300px;
    border-radius: 85% 85% 25% 25%;
    z-index: -1;
}

.belly {
    background-color: #996600;
    width: 130px;
    height: 150px;
    border-radius: 85% 85% 25% 25%;
    top: 100px;
    left: 80px;
    position: relative;
}

.frontPaws {
    position: relative;
    top: 95px;
    left: 10px;
}

.frontPaw {
    background-color: #996633;
    width: 75px;
    height: 75px;
    border-radius: 25% 25% 85% 85%;
    position: absolute;
}

.rightFrontPaw {
    left: 200px;
}

.backPaws {
    position: relative;
    top: 50px;
}

.backPaw {
    background-color: #996633;
    width: 100px;
    height: 100px;
    border-radius: 85% 85% 25% 25%;
    position: absolute;
}

.rightBackPaw {
    left: 200px;
}

bearFactory.js

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) {
    $('.ear, .head, .body').css('background', '#' + color)  //This changes the color of the bear
    $('#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 bear
};

function mouthColor(color,code) {
    $('.mouth, .nose, .belly').css('background', '#' + color) 
    $('#mouthcode').html('code: '+ code) 
    $('#dnamouth').html(code) 
};

function eyesColor(color,code) {
    $('.pupils').css('background', '#' + color)  
    $('#eyescode').html('code: '+ code) 
    $('#dnaeyes').html(code) 
};

function earsColor(color,code) {
    $('.innerEar, .frontPaw, .backPaw').css('background', '#' + color)  
    $('#earscode').html('code: '+ code) 
    $('#dnaears').html(code) 
};

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

    $('#dnashape').html(num)
    switch (num) {
        case 1:
            normalEyes()
            $('#eyeName').html('Basic')
            break
    }
};

function decorationVariation(num) {
    $('#dnadecoration').html(num)
    switch (num) {
        case 1:
            $('#decorationName').html('Basic')
            normaldecoration()
            break
    }
};

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

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

bearSettings.js

var colors = Object.values(allColors())

var defaultDNA = {
    "headColor" : 10,
    "mouthColor" : 19,
    "eyesColor" : 96,
    "earsColor" : 21,
    //Attributes
    "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)

  renderBear(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 renderBear(dna){
    headColor(colors[dna.headColor],dna.headColor)
    $('#bodycolor').val(dna.headColor)

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

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

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

// Changing bear 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)
});

[CipherGrind]

I am enjoying this project! lol! Check out my github page and repo for the code.

https://ciphergrind.github.io/CryptoSquirrelsNFTMaker/

https://github.com/CipherGrind/CryptoSquirrelsNFTMaker/tree/gh-pages

[Fernando_Ribas]

I’m very bad at graphic design, I made this based on a drawing from my daughter.

I built it in React instead of using HTML/Jquery / Js… a lot of things could be improved but it’s an iteration improvement.

The sliders change the color hue CSS, I’m using HSL.

app.js

import React, {useEffect, useState } from 'react';
import './App.css';
import "bootstrap/dist/css/bootstrap.min.css";
import "bootstrap/dist/js/bootstrap.bundle.min";

//Using a template from bootswatch


import 'bootswatch/dist/minty/bootstrap.min.css';
import '@fortawesome/fontawesome-free/js/all';



import Header from './components/Header/Header';
import CreateCrupie from './components/CreateCrupie/CreateCrupie';


function App(props) {
  const [DNA,setDNA] = useState("");
  


  
  const handleUpdateDNA = (_dna) =>{
  
    setDNA(_dna);


  }
  useEffect(() =>{
    console.log("new use effect " + DNA);
  })
  return (
    <div className="App">
      
      <Header />
      <CreateCrupie h={450} 
                    w={450}
                    dna={DNA}
                    handleUpdateDNA={handleUpdateDNA}/>

      

    </div>
  );
}

export default App;

CreateCrupie.jsx

import React from 'react'
import Container from 'react-bootstrap/Container';


import CrupieBox from '../CrupieBox/CrupieBox';
import Crupiebutes from '../Crupiebutes/Crupiebutes';
import styled from 'styled-components';

const Jumbotron = styled.div`
      padding: 2rem 1rem;
      margin-bottom: 2rem;
      background-color: #e9ecef;
      border-radius: .3rem;
`

export default function CreateCrupie(props) {
  return (
    <Container fluid>

      <Container className="p-5" >
              <div align="center">
              <Jumbotron className="c-white"> 
              <h1 className="display-4"> Crupie Factory</h1>
              
              <p className="c-white">Create your custom Crupie!!</p>
              </Jumbotron>
              </div>
      </Container>

      <Container fluid align="center">
          <CrupieBox  dna={props.dna}/> 
          <Crupiebutes dna={props.dna}
                       handleUpdateDNA={props.handleUpdateDNA}/>
      </Container>

      <Container className="p-5" >
        <div align="center">
            <Jumbotron className="c-white"> 
              <h4> Your Crupie DNA is: </h4>
              
              <p className="c-white">{props.dna}</p>
            </Jumbotron>
         </div>
      </Container> 
  
    </Container>
  ) 
}

CrupieBox.jsx

import React from ‘react’
import styled from ‘styled-components’;
import Crupie from ‘…/Crupie/Crupie’

const Div = styled.div`
width: 350px;
height: 350px;

`

export default function CrupieBox(props) {
return (

</Div>

)
}

Crupie.jsx

import React, {useState} from 'react';
import * as crupie from './crupieBody.js'



export default function Crupie(props) {
    const  bgHue = props.dna.slice(0,3);
    const bgColor = "hsl("+ bgHue + "," + bgHue+"%,50%);";
    const  bodyHue = props.dna.slice(3,6);
    const bodyColor = "hsl("+ bodyHue + ",100%,50%);";
    const  earsHue = props.dna.slice(6,9);
    const earsColor = "hsl("+ earsHue + ",100%,50%);";
    const  shoesHue = props.dna.slice(9,12);
    const shoesColor = "hsl("+ shoesHue + ",100%,20%);";
    const  tailHue = props.dna.slice(12,15);
    const tailColor = "hsl("+ tailHue + ",100%,60%);";



  return (
    <>

    <crupie.Background bgColor = {bgColor} >
            <crupie.Ears>
                <crupie.LeftEar earsColor = {earsColor}>
                    <crupie.InnerEarL tailColor={tailColor}>
                    </crupie.InnerEarL>
                </crupie.LeftEar>
                <crupie.RightEar earsColor = {earsColor}>
                    <crupie.InnerEarR tailColor={tailColor}></crupie.InnerEarR>
                </crupie.RightEar>
            </crupie.Ears>
        <crupie.Body bodyColor={bodyColor}>
            <crupie.Eyes>
                <crupie.LeftEye>
                    <crupie.Pupil>
                         <crupie.Shine></crupie.Shine>
                    </crupie.Pupil>
                </crupie.LeftEye>
                <crupie.RightEye>
                    <crupie.Pupil>
                        <crupie.Shine></crupie.Shine>
                    </crupie.Pupil>
                </crupie.RightEye>
            </crupie.Eyes>
            <crupie.Nose>
            <crupie.Shine></crupie.Shine>
            </crupie.Nose>
            <crupie.Mouth>

            </crupie.Mouth>
            <crupie.Shoes>
            <crupie.Shoe shoesColor={shoesColor}><crupie.Shine></crupie.Shine></crupie.Shoe>
            <crupie.Shoe shoesColor={shoesColor}><crupie.Shine></crupie.Shine></crupie.Shoe>
            </crupie.Shoes>
         
        
            
        </crupie.Body>
        <crupie.Tail tailColor={tailColor}>
                
                </crupie.Tail>
    
    </crupie.Background>
    </>
  )
}

CrupieBody.js

This is the styled-components structure:

import styled from 'styled-components';

export const  Background = styled.div`
    background-color: ${(props) => props.bgColor};
    border-radius:100%;
    border: solid 3px black;
    width: 100%;
    height: 100%;
    position: relative;
    
    `
export const  Ears = styled.div`
    position: absolute;
    width: 100%;
    height: 100%;
    `

export const  RightEar = styled.div`
    border-radius: 70% 0% 90% 0%;
    background-color:  ${(props) => props.earsColor};
    width: 20%;
    height: 30%;
    position: absolute;
    border: solid 3px black;
    top:0%;
    right: 15%;
    z-index:1;
    `
export const  LeftEar = styled.div`
    border-radius: 0% 70% 00% 90%;
    background-color:  ${(props) => props.earsColor};
    width: 20%;
    height: 30%;
    position: absolute;
    border: solid 3px black;
    top:0%;
    left: 15%;
    z-index:1;
    `

export const  Eyes  = styled.div`
    position: relative;
    height: 25%;
    width: 25%;
    top:10%;
`

export const  LeftEye = styled.div`
    background-color: white;
    border-radius: 50%;
    height: 100%;
    width: 100%;
    border: solid 2px black;
    position: absolute; 
    margin:15%;
    left: -80%;
`
export const  RightEye = styled.div`
    background-color: white;
    border-radius: 50%;
    height: 100%;
    width: 100%;
    border: solid 2px black;
    position: absolute;
    margin:15%;
    right: -80%;
    `


export const  Body = styled.div`
    background-color:  ${(props) => props.bodyColor};
    width: 70%;
    height: 60%;
    border-radius: 40% 40% 10% 10%;
    border: solid 3px black;
    position: absolute;
    top:15%;
    left:15%;
    z-index:3; 
    `

export const  InnerEarL = styled.div`
    border-radius:  0% 70% 00% 90%;
    background-color:  ${(props) => props.tailColor};
    width: 60%;
    height: 60%;
    position: absolute;
    border: solid 3px black;
    top:20%;
    left: 20%;
    z-index:2;

`

export const  InnerEarR = styled.div`
    border-radius: 70% 0% 90% 0%;
    background-color: ${(props) => props.tailColor};
    width: 60%;
    height: 60%;
    position: absolute;
    border: solid 3px black;
    top:20%;
    left: 20%;
    z-index:2;
`

export const  Pupil = styled.div`
    background-color: black;
    width: 50%;
    height: 50%;
    border-radius: 50%;
    position: absolute;
    top: 10%;
    left: 10%;
    `
export const  Shine = styled.div`
    width: 35%;
    height: 35%;
    border-radius: 50% 0% 50% 0%;
    background-color: white;
    top: 10%;
    left: -10%;
    position: relative;
    `

export const Nose = styled.div`
width: 15%;
height: 15%;
border-radius: 25% 25% 50% 50%;
border: solid 2px;
background-color: red;
position: relative;
top:15%
`

export const Mouth = styled.div`
    width: 40%;
    height: 15%;
    border-radius: 0% 0% 50% 50%;
    border: solid 2px;
    background-color: white;
    position: relative;
    top:25%
`

export const Shoes = styled.div`
position: relative;
top:40%;
display: flex;
width:80%;
height:10%;

`
export const Shoe = styled.div`
width: 20%;
height: 100%;
border-radius: 50% 50% 0% 0%;
border: solid 2px;
background-color: ${(props) => props.shoesColor};
position: relative;
margin-left: 15%;
margin-right: 15%;

`
export const Tail = styled.div`
border-radius: 70% 0% 90% 0%;
background-color: ${(props) => props.tailColor};
width: 15%;
height: 25%;
position: absolute;
border: solid 3px black;
top:45%;
left: 80%;
z-index:1;
`

Crupiebutes.jsx

import React, { useState } from 'react'
import styled from 'styled-components';

const Div = styled.div``

const colorAppender = (_val) =>{
  if(_val<10){
    return '00'.concat(_val);
  }
  if(_val<100){
    return '0'.concat(_val);
  }
  return _val;
}

export default function Crupiebutes(props) {
  
  const [backgroundRangeValue, setBackgroundRangeValue] = useState('000');
  const [bodyRangeValue, setBodyRangeValue] = useState('000');
  const [earsRangeValue, setEarsRangeValue] = useState('000');
  const [shoeRangeValue, setShoeRangeValue] = useState('000');
  const [tailRangeValue, setTailRangeValue] = useState('000');




  const handleBackgroundRangeUpdate = (event) =>{
      const val = colorAppender(Number(event.target.value));
      setBackgroundRangeValue(val);
      const _dna =  "".concat(val, bodyRangeValue ,earsRangeValue
                   ,shoeRangeValue,tailRangeValue);
      props.handleUpdateDNA(_dna);
 
  }

  const handleBodyRangeUpdate = (event) =>{
    const val = colorAppender(Number(event.target.value));

    setBodyRangeValue(val);
    
    const _dna =  "".concat(backgroundRangeValue, val ,earsRangeValue
                 ,shoeRangeValue,tailRangeValue);
    props.handleUpdateDNA(_dna);             
 
  }
  const handleEarsRangeUpdate = (event) =>{
    const val = colorAppender(Number(event.target.value));

    setEarsRangeValue(val);
    
    const _dna =  "".concat(backgroundRangeValue, bodyRangeValue ,val
                 ,shoeRangeValue,tailRangeValue);
    props.handleUpdateDNA(_dna);                     
  }
const handleShoeRangeUpdate = (event) =>{
  const val = colorAppender(Number(event.target.value));
  setShoeRangeValue(val);
  const _dna =  "".concat(backgroundRangeValue, bodyRangeValue ,earsRangeValue
               ,val,tailRangeValue);
  props.handleUpdateDNA(_dna); 
  }
const handleTailRangeUpdate = (event) =>{
  const val = colorAppender(Number(event.target.value));
  setTailRangeValue(val);
  const _dna =  "".concat(backgroundRangeValue, bodyRangeValue ,earsRangeValue
               ,shoeRangeValue,val);
  props.handleUpdateDNA(_dna); 
  }


  return (
   <Div  className="col-lg-7 crupiebutes m-2 light-b-shadow">

        <div className="form-group">
        
        <label htmlFor="backgroundRange" className="form-label">Background: {backgroundRangeValue}</label>
        <input type="range" className="form-range" id="backgroundRange" min="00" max="360"
               defaultValue={backgroundRangeValue} onChange={handleBackgroundRangeUpdate}/>
        
        <label htmlFor="bodyRange" className="form-label">Body: {bodyRangeValue}</label>
        <input type="range" className="form-range" id="bodyRange" min="00" max="360"
               defaultValue={bodyRangeValue} onChange={handleBodyRangeUpdate} />
        
        <label htmlFor="earsRange" className="form-label">Ears: {earsRangeValue}</label>
        <input type="range" className="form-range" id="earsRange" min="00" max="360"
               defaultValue={earsRangeValue} onChange={handleEarsRangeUpdate} />
        
        <label htmlFor="shoeRange" className="form-label">Shoes: {shoeRangeValue}</label>
        <input type="range" className="form-range" id="shoeRange" min="00" max="360"
               defaultValue={shoeRangeValue} onChange={handleShoeRangeUpdate}/>

        <label htmlFor="tailRange" className="form-label">Tail: {tailRangeValue}</label>
        <input type="range" className="form-range" id="tailRange" min="00" max="360"
               defaultValue={tailRangeValue} onChange={handleTailRangeUpdate}/>
        
        </div>
    
   </Div>

  )
}

Result:

[tutatenso]

var colors = Object.values(allColors());

var defaultDNA = {
headcolor: 10,
mouthColor: 13,
eyesColor: 96,
earsColor: 10,
whiskersColor: 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);
$("#dnawhiskers").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 += $("#dnawhiskers").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);
earsColor(colors[dna.headcolor], dna.headcolor);
$("#earcolor").val(dna.headcolor);
whiskersColor(colors[dna.headcolor], dna.headcolor);
$("#whiskerscolor").val(dna.headcolor);
}

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

// Changing cat colors
$("#earcolor").change(() => {
var colorVal = $("#earcolor").val();
earsColor(colors[colorVal], colorVal);
});

// Changing cat colors
$("#whiskerscolor").change(() => {
var colorVal = $("#whiskerscolor").val();
whiskersColor(colors[colorVal], colorVal);
});

[versus]

index.html

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

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

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

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

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

                    <div class="cat__body">

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

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


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


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


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

            <!-- Cat colors -->
            <div id="catColors">
                <div class="form-group">
                    <label for="formControlRange"><b>Head and body</b><span class="badge badge-dark ml-2" id="headcode"></span></label>
                    <input type="range" min="10" max="98" class="form-control-range" id="bodycolor">
                </div>
            </div>
            <!-- Mouth colors -->
            <div id="mouthColors">
                <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>
            <!-- Eyes colors -->
            <div id="eyesColors">
                <div class="form-group">
                    <label for="formControlRange"><b>Eyes</b><span class="badge badge-dark ml-2" id="eyescode"></span></label>
                    <input type="range" min="10" max="98" class="form-control-range" id="eyescolor">
                </div>
            </div>
            <!-- Ears colors -->
            <div id="earsColors">
                <div class="form-group">
                    <label for="formControlRange"><b>Ears</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>

            </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 mouthColor(color,code) {
    $('.cat__mouth-contour').css('background', '#' + color)  //This changes the color of the cat
    $('#mouthcode').html('code: '+code) //This updates text of the badge next to the slider
    $('#dnamouth').html(code) //This updates the body color part of the DNA that is displayed below the cat
}
function eyesColor(color,code) {
    $('.cat__eye .pupil-left, .cat__eye .pupil-right').css('background', '#' + color)  //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) {
    $('.cat__ear .cat__ear--left, .cat__ear .cat__ear--right').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
}


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

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

function decorationVariation(num) {
    $('#dnadecoration').html(num)
    switch (num) {
        case 1:
            $('#decorationName').html('Basic')
            normaldecoration()
            break
    }
}

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

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

CatSettings.js

var colors = Object.values(allColors())

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

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

  renderCat(defaultDNA)
});

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

    return parseInt(dna)
}

function renderCat(dna){
    headColor(colors[dna.headcolor],dna.headcolor)
    $('#bodycolor').val(dna.headcolor)
    mouthColor(colors[dna.mouthColor],dna.mouthColor)
    $('#mouthcolor').val(dna.mouthColor)
    eyesColor(colors[dna.eyesColor],dna.eyesColor)
    $('#eyescolor').val(dna.eyesColor)
    earsColor(colors[dna.earsColor],dna.earsColor)
    $('#earscolor').val(dna.eyesColor)
}

// Changing cat colors
$('#bodycolor').change(()=>{
    var colorVal = $('#bodycolor').val()
    headColor(colors[colorVal],colorVal)
})
// Changing mouth colors
$('#mouthcolor').change(()=>{
    var colorVal = $('#mouthcolor').val()
    mouthColor(colors[colorVal],colorVal)
})
// Changing mouth colors
$('#eyescolor').change(()=>{
    var colorVal = $('#eyescolor').val()
    eyesColor(colors[colorVal],colorVal)
})
// Changing ears colors
$('#earscolor').change(()=>{
    var colorVal = $('#earscolor').val()
    earsColor(colors[colorVal],colorVal)
})

[Tomahawk]

Bodyless cat

index.html

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

  <link rel="stylesheet" href="assets/css/mystyle.css">
  <link rel="stylesheet" href="assets/css/cats.css">
  <link rel="stylesheet" href="assets/css/colors.css">
  <link rel="stylesheet" href="assets/css/factory.css">
  <link rel="stylesheet" href="assets/css/frontend.css">
</head>
  <body>
    <div class="container p-5" style="margin-top: 12vh;margin-bottom: 10vh;">
        <div align="center">
        <h1 class="c-white">Kitties-Factory</h1>
        <p class="c-white">Create your custom Kitty</p>
    </div>
        <div class="row">
            <div class="col-lg-4 catBox m-2 light-b-shadow">
                <div class="cat">
                    <div class="ears">
                        <div class="ear left_ear">
                            <div class="inner_ear left_inner_ear"></div>
                        </div>
                        <div class="ear right_ear">
                            <div class="inner_ear left_inner_ear"></div>
                        </div>         
                    </div>
                    <div class="face">
                        <div class="eyes">
                            <div class="eye">
                                <div class="pupils">
                                    <div class="reflection1"></div>
                                    <div class="reflection2"></div>
                                </div>
                            </div>
                            <div class="eye">
                                <div class="pupils">
                                    <div class="reflection1"></div>
                                    <div class="reflection2"></div>
                                </div>
                            </div>
                        </div>
                        <div class="nose"></div>
                        <div class="mouth">
                            <div class="teeth left_teeth"></div>
                            <div class="teeth right_teeth"></div>
                            <div class="tongue"></div>
                        </div>
                        <div class="spots">
                            <div class="spot spot1"></div>
                            <div class="spot spot2"></div>
                            <div class="spot spot3"></div>
                        </div>
                        <div class="whiskers">
                            <div class="whisker_left whisker1"></div>
                            <div class="whisker_left whisker2"></div>
                            <div class="whisker_left whisker3"></div>
                            <div class="whisker_right whisker4"></div>
                            <div class="whisker_right whisker5"></div>
                            <div class="whisker_right whisker6"></div>
                        </div>
                    </div>   
                </div>
                <br>
                <div class="dnaDiv" id="catDNA">
                    <b>
                        DNA:
                        <!-- Colors -->
                         <span id="dnabody"></span>
                         <span id="dnateeth"></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</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>Teeth</b><span class="badge badge-dark ml-2" id="teethcode"></span></label>
                        <input type="range" min="10" max="98" class="form-control-range" id="teethcolor">
                    </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>

            </div>
            <br>

        </div>



    </div>
    <footer align="left">
        <p>tommahawk25 on January 2023</p>
    </footer>

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

</html>

cats.css

*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: inherit;
}
html {
    box-sizing: border-box;
    overflow-y: scroll;
}
body {
    background: #607d8b;
 
}
.face{
    background-color: rgb(255 245 185);
    width: 200px;
    height: 180px;
    border-radius: 50%;
    position: relative;
}
.eyes{
    position: relative;
    top: 40px;
    display: flex;
}
.eye{
    background-color: white;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    margin: 25px;
    position: relative;
}
.pupils{
    background-color: black;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    position: absolute;
    top: 10px;
    left: 10px;
}
.reflection1{
    background-color: white;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    position: absolute;
    top: 8px;
    left: 5px;
}
.reflection2{
    background-color: white;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    position: absolute;
    top: 18px;
    left: 4px;
}
.ears{
    position: relative;
}
.ear{
    border-radius: 90% 0 90% 0;
    background-color: #ffcc80;
    height: 100px;
    width: 100px;
    position: absolute;
}
.left_ear{
    transform: scale(1,-1) rotate(0deg);
    left: 0;
}
.right_ear{
    left: 100px;
}
.inner_ear{
    border-radius: 90% 0 90% 0;
    background-color: pink;
    height: 70px;
    width: 70px;
    position: absolute;
}
.left_inner_ear{
    left: 15px;
    top: 15px;
}
.right_inner_ear{
    transform: scale(1,-1) rotate(0deg);
    left: 100px;
}
.nose{
    background-color: black;
    height: 15px;
    width: 20px;
    border-radius: 50%;
    position: relative;
    left: 93px;
    top: 18px;
}
.mouth{  
    height: 10px;
    width: 50px;
    border-width: 3px;
    border-radius: 100% 100% 100% 100%;
    border-style: solid;
    border-top: none;
    border-left: none;
    border-right: none;
    position: relative;
    left: 78px;
    top: 20px;
}
.teeth{
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 5px 0 5px;
    border-color: black transparent transparent transparent;
    position: absolute;
    top: 9px;
    left: 4px;
}
.left_teeth{
    transform: rotate(8deg);
}
.right_teeth{
    left: 36px;
    transform: rotate(-8deg);
}
.tongue{
    width: 10px;
    height: 10px;
    border-radius: 0% 0% 100% 100%;
    background-color: pink;
    border-color: black;
    position: absolute;
    top: 10px;
    left: 23px;
}
.spots{
    position: relative;
}
.spot{
    width: 50px;
    height: 15px;
    border-radius: 40%;
    background-color: rgb(158, 146, 129);
    position: absolute;
    left: 76px;
}
.spot1{
    top: -119px;
}
.spot2{   
    width: 38px;
    height: 13px;
    top: -102px;
    left: 83px;
}
.spot3{
    width: 26px;
    height: 11px;
    top: -87px;
    left: 90px;
}
.whisker_left{
    width: 30px;
    height: 4px;
    background-color: rgb(70, 70, 70);
    margin: 8px;
    position: relative;
    top: -20px;
    left: -5px;
}
.whisker1{
    transform: rotate(10deg);
}
.whisker2{
    transform: rotate(0deg);
}
.whisker3{
    transform: rotate(-10deg);
}
.whisker_right{
    width: 30px;
    height: 4px;
    background-color: rgb(70, 70, 70);
    margin: 8px;
    position: relative;
    top: -57px;
    left: 160px;
}
.whisker4{
    transform: rotate(-10deg);
}
.whisker5{
    transform: rotate(0deg);
}
.whisker6{
    transform: rotate(10deg);
}
/* .cursor {
    position: absolute;
    height: 23px;
    width: 23px;
    border: none;
    border-radius: 50%;
    background: #b40660;
    transform: translateX(-50%) translateY(-50%);
    z-index: 4000;
} */

catSettings.js

var colors = Object.values(allColors())

var defaultDNA = {
    "headcolor" : 10,
    "teethColor" : 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);
  $('#dnateeth').html(defaultDNA.teethColor);
  $('#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 += $('#dnateeth').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)
    teethColor(colors[dna.teethColor],dna.teethColor)
    $('#teethcolor').val(dna.teethColor)
    eyesColor(colors[dna.eyeColor],dna.eyesColor)
    $('#eyesdolor').val(dna.eyesColor)
    earsColor(colors[dna.earsColor],dna.earsColor)
    $('#earscolor').val(dna.earsColor)
}

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

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

catFactory.js

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

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

//This function code needs to modified so that it works with Your cat code.
function headColor(color,code) {
    $('.face').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 teethColor(color,code) {
    $('.teeth').css('border-color', '#' + color + ' transparent transparent transparent')  //This changes the color of the cat
    $('#teethcode').html('code: '+code) //This updates text of the badge next to the slider
    $('#dnateeth').html(code) //This updates the body color part of the DNA that is displayed below the cat
}

function eyesColor(color,code) {
    $('.pupils').css('background', '#' + color)  //This changes the color of the cat
    $('#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').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
}



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

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

function decorationVariation(num) {
    $('#dnadecoration').html(num)
    switch (num) {
        case 1:
            $('#decorationName').html('Basic')
            normaldecoration()
            break
    }
}

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

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