Assignment - Template and Color

Clone the below Github repository, and implement Mouth/Body/Tail Color, Eye Color, and Ear Color. We encourage you to experiment in this assignment and rewrite the repository code to suit your earlier cat design. If you will have issues, post your questions below.

Repository link to clone:
https://github.com/Ivan-on-Tech-Academy/academy-kitties-template/

Wow, a bunch of tideous work but said and done :smiley: haha
Look at my funky crypto Bear
CryptoBear05042021
here is my code:

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

.cat__head {
    position: relative;
    width: 200px;
    height: 200px;
    border: 6px solid transparent;
    -webkit-border-radius: 50% 50% 45% 45%;
    border-radius: 59% 55% 66% 66%;
    background-color: #c18900;
    z-index: 20;
}
.cat__head-dots {
    position: absolute;
    left: 90px;
    height: 35px;
    top: 1px;
    width: 14px;
    background: #ffb74d;
    -webkit-border-radius: 0 0 50% 50%;
    border-radius: 10px 10px 10px 10px;
}

 .cat__head-dots_first {
    position: absolute;
    content: '';
    top: 1px;
    width: 14px;    
    height: 28px;
    background: #ffb74d;
    left: -30px;
    border-radius: 10px 10px 10px 10px;
}
.cat__head-dots_second {
    position: absolute;
    content: '';
    top: 1px;
    width: 14px;    
    height: 40px;
    background: #ffb74d;
    left: 30px;
    border-radius: 10px 10px 10px 10px;
}

.cat__ear {
    position: relative;
}

.cat__ear--left, .cat__ear--right {
    position: absolute;
    top: -8px;
    width: 100px;
    height: 100px;
    border: 5px solid  transparent;
    border-radius: 21px 70px 12px 70px;
    background: #c18900;
    display: flex;
    justify-content: center;
    align-items: center;
}
.cat__ear--left {
   left: 0px;    
}
.cat__ear--right {
    transform: scale(1,-1);
    left: 100px;
}
.cat__ear--left-inside, .cat__ear--right-inside {
    width: 88px;
    height: 88px;
    border-radius: 21px 70px 12px 70px;
    background: #976d03;
}
.cat__eye {
    position: absolute;
    top: 9px;
    left: -32px;
    display: flex;
}
.cat__eye--left, .cat__eye--right {
    width: 49px;
    height: 49px;
    background: #fff;
    border-radius: 50%;
    margin-left: 50px;
    margin-right: -5px;
    margin-top: 34px;
    z-index: 100;
}
.cat__eye span {
    position: absolute;
    top: 41px;
    width: 42px;
    height: 42px;
    background: #373737;
    border-radius: 50%;
    z-index: 200;
}
.cat__eye span::after {
    content: '';
    top: 8px;
    left: 8px;
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #fff;
}
.cat__eye span::before {
    content: '';
    top: 20px;
    left: 8px;
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff;
}
.cat__eye span.pupil-left {
    left: 60px;
}
.cat__eye span.pupil-right {
    left: 140px;
}
.cat__nose {
    position: absolute;
    top: 110px;
    left: 80px;
    width: 0;
    height: 0;
    border-right: 35px solid rgba(255, 255, 255, 0);
    border-top: 24px solid #5c4004;
    border-radius: 80%;
    z-index: 100;
}
.cat__mouth-contour {
    position: absolute;
    top: 103px;
    left: 32px;
    background: #c18900;
    width: 132px;
    height: 67px;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    z-index: -1;
}

.cat__mouth-left, .cat__mouth-right {
    background-color: #3b2a03;
    position: absolute;
    margin-left: -36px;
    margin-top: 6px;
    top: 137px;
    height: 13px;
    width: 75px;
    border-radius: 50%;

}
.cat__mouth-left {
    left: 95px;
}
.cat__mouth-right {
    left: 95px;
}
.cat__whiskers-left, .cat__whiskers-right {
    position: relative;
}
.cat__whiskers-left, .cat__whiskers-right, .cat__whiskers-left::after, .cat__whiskers-right::after, .cat__whiskers-left::before, .cat__whiskers-right::before {
    width: 32px;
    height: 5px;
    background: #373737;
}
.cat__whiskers-left::before, .cat__whiskers-right::before, .cat__whiskers-left::after, .cat__whiskers-right::after {
    content: '';
    position: absolute;
    left: 0;
}
.cat__whiskers-left {
    top: 134px;
    left: 13px;
}
.cat__whiskers-left::before {
    top: -16px;
    transform: rotate(15deg);
}
.cat__whiskers-left::after {
    top: 16px;
    transform: rotate(-15deg);
}
.cat__whiskers-right {
    top: 126px;
    left: 150px;
}
.cat__whiskers-right::before {
    top: -16px;
    transform: rotate(-15deg);
}
.cat__whiskers-right::after {
    top: 16px;
    transform: rotate(15deg);
}
.cat__body {
    position: relative;
}
.cat__chest {
    position: absolute;
    left: 21px;
    top: -48px;
    width: 170px;
    height: 275px;
    background: #caa036;
    border: 5px solid  transparent;
    border-radius: 75px 75px 70px 70px;
    z-index: 3;
}
.cat__chest_inner {
    content: '';
    position: absolute;
    top: 20px;
    left: 59px;
    width: 94px;
    height: 176px;
    border-radius: 50%;
    background: #f5c13d;
    z-index: 4;
}
.cat__paw-left, .cat__paw-right {
    position: absolute;
    top: 24px;
    width: 50px;
    height: 54px;
    background: #c18900;    
    border: none;
    border-bottom: 5px solid transparent;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    z-index: 5;
}


.cat__paw-right_inner {
    content: '';
    position: absolute;
    top: 34px;
    left: 168px;
    width: 35px;
    height: 35px;
    background: #5c4004;
    border-radius: 15px 15px 25px 25px;
    border: 5px solid transparent;
    z-index: 8;
}

.cat__paw-left_inner {
    content: '';
    position: absolute;
    top: 34px;
    left: 8px;
    width: 35px;
    height: 35px;
    background: #5c4004;
    border-radius:15px 15px 25px 25px;
    border: 5px solid transparent;
    z-index: 8;
}
.cat__paw-left {
    left: 1px;
    border-radius: 15px 15px 25px 25px;
}
.cat__paw-left::after {
    left: -32px;
}
.cat__paw-right {
    left: 161px;
    border-radius: 15px 15px 25px 25px;
}
.cat__paw-right::after {
    left: 16px;
}

.cat__paw-leftLower, .cat__paw-rightLower {
    position: absolute;
    top: 146px;
    width: 50px;
    height: 54px;
    background: #c18900;    
    border: none;
    border-bottom: 5px solid transparent;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    z-index: 5;
}
.cat__paw-leftLower {    
    left: 1px;
    border-radius: 15px 15px 25px 25px;
}
.cat__paw-rightLower {    
    left: 161px;
    border-radius: 15px 15px 25px 25px;
}
.cat__paw-rightLower_inner {
    content: '';
    position: absolute;
    top: 156px;
    left: 168px;
    width: 35px;
    height: 35px;
    background: #5c4004;
    border-radius: 15px 15px 25px 25px;
    border: 5px solid transparent;
    z-index: 8;
}

.cat__paw-leftLower_inner {
    content: '';
    position: absolute;
    top: 156px;
    left: 8px;
    width: 35px;
    height: 35px;
    background: #5c4004;
    border-radius:15px 15px 25px 25px;
    border: 5px solid transparent;
    z-index: 8;
}

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

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 head and body
    $('#headcode').html('code: '+code) //This updates text of the badge next to the slider
    $('#dnabody').html(code) //This updates the body color part of the DNA that is displayed below the cat
}

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

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

function earsColor(color,code) {
    $('.cat__ear--left, .cat__ear--right').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%" })
}

catSettings.js

var colors = Object.values(allColors())

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

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

  renderCat(defaultDNA)
});

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

    return parseInt(dna)
}

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

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

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


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

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

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

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

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

                    <div class="cat__body">

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

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


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


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

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

                        <div class="cat__paw-rightLower"></div>
                        <div class="cat__paw-rightLower_inner"></div>


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

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

Also, watch out! I found a typo in the template! in catsettings.js at line 4 var defaultDNA did not have the same convention for Color identifier, it said headcolor and mouthColor causing my script to not run correctly, as I used capital C to call for headcolor. So make sure to fix this in your script!

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

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

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

                            <div class="patch-right"></div>
                                <div class="cat__eye--right">
                                    <span class="pupil-right">
                                        <div class="iris-right">
                                            <div class="shine"></div>
                                        </div>
                                </span>
                            </div>
                        </div>
                        <div class="cat__nose"></div>

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

                        <div class="cat__whiskers-left">
                            <div class="cat__whiskers-left_1"></div>
                            <div class="cat__whiskers-left_2"></div> 
                        </div>
                        
                        <div class="cat__whiskers-right">
                            <div class="cat__whiskers-right_1"></div>
                            <div class="cat__whiskers-right_2"></div> 
                        </div>
                         
                        <div class="cat__mouth-right"></div>
                        <div class="cat__mouth-left"></div>
                    </div>

                    <div class="cat__body">

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

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


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


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


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

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

                    <label for="formControlRange"><b>Pattern</b><span class="badge badge-dark ml-2" id="headcode2"></span></label>
                    <input type="range" min="0" max="98" class="form-control-range" id="patternColorH">

                    <label for="formControlRange"><b>Ears</b><span class="badge badge-dark ml-2" id="headcode3"></span></label>
                    <input type="range" min="0" max="98" class="form-control-range" id="earsColorH">

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

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

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

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

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

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

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

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

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

}
.cat__ear--left-inside, .cat__ear--right-inside {
    position:absolute;
    top:10px;
    left:45px;
    width: 40px;
    height: 40px;
    border-radius: 70% 10% 50% 30%;
    background: #ffffff5d;
}
.cat__eye {
    position: relative;
    top: 50px;
    left: 27px;
    display: flex;
}
.patch-left {
    position:absolute;
    width: 60px;
    height: 50px;
    background: #96000080;
    border-radius: 15% 45% 45% 55%;
    top:3px;
    left:83;
    transform: scale(-1, 1) rotate(0deg);
}
.patch-right {
    position:absolute;
    width: 60px;
    height: 50px;
    background: #96000080;
    border-radius: 15% 45% 45% 55%;
    top:3px;
    left:-7px;
} 
.cat__eye--left {
    border: solid 2px;
    border-color: #141414;
    width: 50px;
    height: 50px;
    background: #ede4e4;
    border-radius: 50%;
    margin: 0px;
    z-index: 100;
}
.cat__eye--right{
    position:relative;
    border: solid 2px;
    border-color: #141414;
    width: 50px;
    height: 50px;
    background: #f0dcdc;
    border-radius: 50%;
    margin: 0px;
    left: 35px;
    z-index: 100; 
}

.cat__eye span {
    position: absolute;
    top: 41px;
    width: 35px;
    height: 35px;
    background: #1e1e1e;
    border-radius: 50%;
    z-index: 200;
}
.cat__eye span::after {
    content: '';
    top: 16px;
    left: 22px;
    position: absolute;
    width: 4px;
    height: 7px;
    border-radius: 50%;
    background: #ede4e4d7;
}
.cat__eye span::before {
    content: '';
    top: 16px;
    left: 22px;
    position: absolute;
    width: 3px;
    height: 4px;
    border-radius: 50%;
    background: #ede4e4;
}
.cat__eye span.pupil-left {
    left: 9px;
    top:9px;
}
.cat__eye span.pupil-right {
    left: 6px;
    top:9px;
}
.iris-left {
    border: solid 1px;
    border-color:  #14141436;
    position: absolute;
    background-color: #960000;
    border-radius: 50%;
    width: 13px;
    height: 25px;
    left:13px;
    top:8px;
}
.iris-right {
    border: solid 1px;
    border-color: #14141436;
    position:absolute;
    background-color: #960000;
    border-radius: 50%;
    width: 13px;
    height: 25px;
    left:13;
    top:8px;
}
.shine {
    position: absolute;
    background-color: #ede4e4ef;
    border-radius: 50%;
    width: 3px;
    height: 4px;
    top:13px;
    left:5px;
}
.cat__nose {
    position: absolute;
    top: 55px;
    left: 85px;
    border:solid 2px;
    border-color: #c800005e;
    background-color: #ff7878;
    height:13px;
    width: 20px;
    position:relative;
    border-radius:30% 30% 79% 79%;
    z-index: 100;
}
.cat__mouth-contour {
    position: absolute;
    top: 100px;
    left: 20px;
    background-color: #111111c2;
    border-radius: 40% 40% 50% 50%;
    width: 150px;
    height: 85px;
    -webkit-border-radius: 55% 55% 60% 60%;
}
.cat__mouth-left, .cat__mouth-right {
    position: absolute;
    top: 108px;
    width: 34px;
    height: 28px;
    border: solid 4px rgb(255, 255, 255);
    border-color: #fbfbfb00 #141414 #141414;
    border-radius:  50% 50% 60% 60%;
}
.cat__mouth-left {
    left: 61px;
}
.cat__mouth-right {
    left: 94px;
}
.cat__whiskers-left, .cat__whiskers-right {
    position: relative;
}
.cat__whiskers-left, .cat__whiskers-right, .cat__whiskers-left_1, .cat__whiskers-right_1, .cat__whiskers-left_2, .cat__whiskers-right_2 {
    width: 82px;
    height: 4px;
    background: #820000;
}
.cat__whiskers-left_1, .cat__whiskers-right_1, .cat__whiskers-left_2, .cat__whiskers-right_2 {
    content: '';
    background: #820000;
    position: absolute;
}
.cat__whiskers-left {
    top: 60px;
    left: -20px;
}
.cat__whiskers-left_1 {
    top: -13px;
    transform: rotate(11deg);
    background: #820000;
}
.cat__whiskers-left_2 {
    top: 10px;
    left:4px;
    transform: rotate(-6deg);
    background: #820000; 
} 
.cat__whiskers-right {
    top: 55px;
    left: 125px;
}
.cat__whiskers-right_1 {
    top: -13px;
    transform: rotate(-11deg);
    background: #820000;
} 
.cat__whiskers-right_2 {
    top: 10px;
    right:2;
    transform: rotate(6deg);
    background: #820000;
}
.cat__body {
    position: relative;
}
.cat__chest {
    position: absolute;
    left: 24px;
    top: -49px;
    width: 150px;
    height: 150px;
    background: #141414;
    border: 5px solid  transparent;
    border-radius: 30% 30% 40% 40%;
    z-index: 3;
}
.cat__chest_inner {
    content: '';
    position: absolute;
    top: -5px;
    left: 60px;
    width: 80px;
    height: 100px;
    border-radius: 50%;
    background: #5a0000;
    z-index: 4;
}
.cat__paw-left, .cat__paw-right {
    position: absolute;
    top: 5px;
    background-color: #141414;
    border: solid 3px;
    border-color: #14141400 #14141440;
    width: 33px;
    height: 95px;
    border-radius: 25% 25% 40% 40%;
    z-index: 5;
}

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

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

i made the background black somehow -.-, but im too sleepy RN to find wheres the piece of code that changes that background there it is rossonero in his new house

omg im so dumm xD, i realised my noob mistake, an advice form me is : when it seems that everything is right in your code but you still dont understand whats going on, dont blame the pc, go eat somethimg, or go to sleep, and then when youre back, check your code again, and youll see all thhe liittle errors -.- xD

2 Likes

Here is my code (edited to fix tail and add paws after seeing final solution). I liked Filip’s cat better so used his instead of mine which I posted earlier.
Made changes to index.htm, catSettings.js and catFactory.js. In same order:

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

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

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

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

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

                    <div class="cat__body">

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

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


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


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


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

<!-- Cat colors -->
<div id="catColors">
                <div class="form-group">
                    <label for="formControlRange"><b>Head and body</b><span class="badge badge-dark ml-2" id="headcode"></span></label>
                    <input type="range" min="10" max="98" class="form-control-range" id="bodycolor">
                </div>
                <div class="form-group">
                    <label for="formControlRange"><b>Mouth, Body and Tail</b><span class="badge badge-dark ml-2" id="mouthcode"></span></label>
                    <input type="range" min="10" max="98" class="form-control-range" id="mouthcolor">
                </div>
                <div class="form-group">
                    <label for="formControlRange"><b>Eyes</b><span class="badge badge-dark ml-2" id="eyecode"></span></label>
                    <input type="range" min="10" max="98" class="form-control-range" id="eyecolor">
                </div>
                <div class="form-group">
                    <label for="formControlRange"><b>Ears and Paws</b><span class="badge badge-dark ml-2" id="earcode"></span></label>
                    <input type="range" min="10" max="98" class="form-control-range" id="earcolor">
                </div>
            </div>

            </div>

            </div>
            <br>

        </div>



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

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

</html>

catSettings.js :


var colors = Object.values(allColors())

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

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

  renderCat(defaultDNA)
});

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

    return parseInt(dna)
}

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

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

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

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

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

catFactory.js


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

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

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

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

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

function earColor(color,code) {
    $('.cat__ear--left, .cat__ear--right, .cat__paw-left, .cat__paw-right, .cat__paw-left_inner, .cat__paw-right_inner').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%" })
}

1 Like

Very good advice :grin:

Here is my crypto kitty:

Screenshot 2021-04-13 at 16.29.18

index.html:

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

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


                <div class = "cat">
                    <div class = "ears">
                        <div class= "ear left-ear">
                            <div class = " left-inner-ear"></div>
                        </div>
                        <div class = "ear right-ear">
                            <div class = "right-inner-ear"></div>
                        </div>
                    </div>
        
                    <div class = "tail">
                        <div class = "inner-tail"></div>
                    </div>
        
                    <div class = "body"></div>
                    <div class = "head">
                        <div class= "head-pattern"></div>
        
                        <div class = "eyes">
                            <div class = "eye">
                                <div class = "pupils">
                                    <div class = "inner-eyes-big"></div>
                                    <div class = "inner-eyes-small"></div>
                                </div>
                            </div>
        
                            <div class = "eye">
                                <div class = "pupils">
                                    <div class = "inner-eyes-big"></div>
                                    <div class = "inner-eyes-small"></div>
                                </div>
                            </div>    
                        </div>
        
                        <div class = "belly"></div>
                        <div class = "mouth"></div>
                        <div class = "whiskers">
                            <div class = "whisker1"></div>
                            <div class = "whisker2"></div>
                            <div class = "whisker3"></div>
                            <div class = "whisker4"></div>
                            <div class = "whisker5"></div>
                            <div class = "whisker6"></div>
                        </div>
        
                        <div class = "feet">
                            <div class = "foot-left"></div>
                            <div class = "foot-right"></div>
                        </div>
                        
                            <div class = "mouth-left"></div>
                            <div class = "mouth-right"></div>

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


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

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

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

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

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

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

                
                
            </div>

            </div>

            </div>
            <br>

        </div>



    </div>
    <footer align="left">
        <p>Ivan on Tech Academy April 2021</p>
    </footer>

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

</html>

catSettings.js:


var colors = Object.values(allColors())

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

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

  renderCat(defaultDNA)
});

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

    return parseInt(dna)
}

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

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

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

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

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

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

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

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

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

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

catFactory.js:


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

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

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

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

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

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

function tailColor(color, code) {
    $('.tail, .inner-tail').css('background', '#' + color);
    $('#tailcode').html('code: '+ code);
    $('#dnatail').html(code);
}

1 Like