Assignment - Buttons

Ethereum Dapp Programming
#9

I tried it and inspected everything in the browser. Somehow it doesn’t work. I’ve pasted my HTML code below. Also tried to paste the sample code you posted into a default template to test and that also didn’t work in 3 different browsers.

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Academy kitties </title>
        
        <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">


        <link rel="stylesheet" href="assets/css/mystyle.css">
        <link rel="stylesheet" href="assets/css/animations.css">
        <link rel="stylesheet" href="assets/css/cats.css">
        <link rel="stylesheet" href="assets/css/colors.css">
        <link rel="stylesheet" href="assets/css/factory.css">
        <link rel="stylesheet" href="assets/css/frontend.css">
    </head>

    <body>
        <div class="container p-5" style="margin-top: 12vh;margin-bottom: 10vh;">
            <div align="center">
                <h1 class="c-white">Kitties-Factory</h1>
                <p class="c-white">Create your custom Kitty</p>
            </div>
        
        
            <div class="row">
                <div class="col-lg-4 catBox m-2 light-b-shadow">
                    <div class="cat">
                        <div class="cat__ear">
                            <div id="leftEar" class="cat__ear--left">
                                <div class="cat__ear--left-inside"></div>
                            </div>
                            <div id="rightEar" class="cat__ear--right">
                                <div class="cat__ear--right-inside"></div>
                            </div>
                        </div>

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

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

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

                        <div class="cat__body">

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

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


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


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


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

                    <!-- Cat colors -->
                   
                    <ul id="cattabs" class="nav nav-tabs" role="tablist">
                        <li class="nav-item" role="presentation">
                            <button type="button" id="catColorsTabButton" href="#catColorsTab" class="nav-link active" data-bs-target="#catColorsTab" aria-controls="catColorsTab" role="tab" data-bs-toggle="tab">Cat Colors</button>
                        </li>
                        <li class="nav-item active" role="presentation">
                            <button type="button"id="catAttributesTabButton" href="#catAttributesTab" class="nav-link" data-bs-target="#catAttributesTab" aria-controls="catAttributesTab" role="tab" data-bs-toggle="tab">Attributes</button>
                        </li>
                    </ul>

                    <div class="tab-content" id="catTabContent">
                        <div id="catColorsTab" role="tabpanel" class="tab-pane fade show active" aria-labelledby="catColorsTabButton">
                            <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 id="catAtrributesTab" role="tabpanel" class="tab-pane fade" aria-labelledby="catAttributesTabButton">
                            <div class="form-group">
                                <label for="formControlRange"><b>Eyes shape</b><span class="badge badge-dark ml-2" id="eyeName"></span></label>
                                <input type="range" min="1" max="7" class="form-control-range" id="eyeshape">
                            </div>
                            <div class="form-group">
                                <label for="formControlRange"><b>Decorative Patern</b><span class="badge badge-dark ml-2" id="decorationName"></span></label>
                                <input type="range" min="1" max="7" class="form-control-range" id="decorationpattern">
                            </div>
                            <div class="form-group">
                                <label for="formControlRange"><b>Decoration Mid Color</b><span class="badge badge-dark ml-2" id="midcolorcode"></span></label>
                                <input type="range" min="10" max="98" class="form-control-range" id="decorationmid">
                            </div>
                            <div class="form-group">
                                <label for="formControlRange"><b>Decoration Sides Color</b><span class="badge badge-dark ml-2" id="sidecolorcode"></span></label>
                                <input type="range" min="10" max="98" class="form-control-range" id="decorationsides">
                            </div>
                            <div class="form-group">
                                <label for="formControlRange"><b>Animation</b><span class="badge badge-dark ml-2" id="animationName"></span></label>
                                <input type="range" min="1" max="6" class="form-control-range" id="animation">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <br>
        </div>

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

        <script type="text/javascript" src="assets/js/jquery-3.4.1.js"></script>
        <script src="assets/bootstrap/js/popper.js"></script>
        <script src="assets/bootstrap/js/bootstrap.min.js"></script>

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

    </body>
</html>

Test code:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
    
    <ul class="nav nav-tabs" id="myTab" role="tablist">

        <li class="nav-item" role="presentation">
          <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">
            Home
          </button>
        </li>
      
        <li class="nav-item" role="presentation">
          <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">
            Profile
         </button>
        </li>
      
        <li class="nav-item" role="presentation">
          <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" 
            type="button" role="tab" aria-controls="contact" aria-selected="false">
            Contact
          </button>
        </li>
      
      </ul>

      <div class="tab-content" id="myTabContent">

        <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
          Home Content
        </div>
      
        <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
          Profile Content
        </div>
      
        <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
          Contact Content
        </div>
      
      </div>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>
    -->
  </body>
</html>
#10

It is my understanding that there is no need for additional js if the syntax is correct in bootstrap. But as a work arround i also tried to handle in js with following function but that also didn’t work.

$('#catAttributesTabButton').click(() =>{
  console.log("click registered")
  // remove active and show from other tab and active from nav li
  $("#catColorsTab").removeClass("active");
  $("#catColorsTab").removeClass("show");
  $("#catColorsTabButton").removeClass("active");
  // add active to catColorTab
  $("#catAtrributesTab").addClass("active");
  $("#catAtrributesTab").addClass("show");
  $("#catAttributesTabButton").addClass("active");
})
#11

OK so i notice the issue here was about the bootstrap version. The version I was showing you is for V5, and you are using V4.6.

Here is the code that will work with your version V4.6.


  <div class="nav nav-tabs" id="nav-tab" role="tablist">
    <a class="nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
    <a class="nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a>
    <a class="nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a>
  </div>
</nav>
<div class="tab-content" id="nav-tabContent">
  <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab"><h1>this is home</h1></div>
  <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab"><h1>this is profile</h1></div>
  <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab"><h1>this is contact</h1></div>
</div>

    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>    
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>

You will have to upgrade to V5 if you want to use my first example. But not really need if you keep aware of your version.

#12

Thanks for spotting that version conflict, this works better, I found out that the initial library supplied for the assignment was 4.3 and I replaced it now with 4.6. I still couldn’t get the attributes tab to work with only the html but my .js workarround worked. So I’m good for now.

1 Like
#13

Here is my final code for submission, thanks for the help after tackling the version conflict the rest was easy and also strangely satisfying to render random cats :).

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Academy kitties </title>
        
        <!-- <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css"> -->
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
        


        <link rel="stylesheet" href="assets/css/mystyle.css">
        <link rel="stylesheet" href="assets/css/animations.css">
        <link rel="stylesheet" href="assets/css/cats.css">
        <link rel="stylesheet" href="assets/css/colors.css">
        <link rel="stylesheet" href="assets/css/factory.css">
        <link rel="stylesheet" href="assets/css/frontend.css">
    </head>

    <body>
        <div class="container p-5" style="margin-top: 12vh;margin-bottom: 10vh;">
            <div align="center">
                <h1 class="c-white">Kitties-Factory</h1>
                <p class="c-white">Create your custom Kitty</p>
            </div>
        
        
            <div class="row">
                <div class="col-lg-4 catBox m-2 light-b-shadow">
                    <div class="cat">
                        <div class="cat__ear">
                            <div id="leftEar" class="cat__ear--left">
                                <div class="cat__ear--left-inside"></div>
                            </div>
                            <div id="rightEar" class="cat__ear--right">
                                <div class="cat__ear--right-inside"></div>
                            </div>
                        </div>

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

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

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

                        <div class="cat__body">

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

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


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


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


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

                    <!-- Cat colors and attributes -->
                    

                    <div class="nav nav-tabs" id="nav-tab" role="tablist">
                        <a class="nav-link active" id="catColorsTabButton" data-toggle="tab" href="#catColorsTab" role="tab" aria-controls="catColorsTab" aria-selected="true">Colors</a>
                        <a class="nav-link" id="catAttributesTabButton" data-toggle="tab" href="#catAttributesTab" role="tab" aria-controls="catAttributesTab" aria-selected="false">Attributes</a>
                    </div>
                    

                    <div class="tab-content" id="nav-tabContent">
                        <div id="catColorsTab" role="tabpanel" class="tab-pane fade show active" aria-labelledby="catColorsTabButton">
                            <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 id="catAtrributesTab" role="tabpanel" class="tab-pane fade" aria-labelledby="catAttributesTabButton">
                            <div class="form-group">
                                <label for="formControlRange"><b>Eyes shape</b><span class="badge badge-dark ml-2" id="eyeName"></span></label>
                                <input type="range" min="1" max="7" class="form-control-range" id="eyeshape">
                            </div>
                            <div class="form-group">
                                <label for="formControlRange"><b>Decorative Patern</b><span class="badge badge-dark ml-2" id="decorationName"></span></label>
                                <input type="range" min="1" max="7" class="form-control-range" id="decorationpattern">
                            </div>
                            <div class="form-group">
                                <label for="formControlRange"><b>Decoration Mid Color</b><span class="badge badge-dark ml-2" id="midcolorcode"></span></label>
                                <input type="range" min="10" max="98" class="form-control-range" id="decorationmid">
                            </div>
                            <div class="form-group">
                                <label for="formControlRange"><b>Decoration Sides Color</b><span class="badge badge-dark ml-2" id="sidecolorcode"></span></label>
                                <input type="range" min="10" max="98" class="form-control-range" id="decorationsides">
                            </div>
                            <div class="form-group">
                                <label for="formControlRange"><b>Animation</b><span class="badge badge-dark ml-2" id="animationName"></span></label>
                                <input type="range" min="1" max="6" class="form-control-range" id="animation">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <br>
            <div class="row">
                <div class="col-lg-4 cattributes m-2 light-b-shadow">
                    <button id="randomCatButton"class="btn btn-primary">Random</button>
                    <button id= "defaultCatButton" class="btn btn-default" style="float: right;">Default</button>
                </div>
                <div class="col-lg-7 cattributes m-2 light-b-shadow">
                    <div id="createCatButton" class="d-flex justify-content-center">
                        <button class="btn btn-success" >Create</button>
                    </div>
                </div>
            </div>
        </div>

        <footer align="left">
            <p>Ivan on Tech Academy - Asignment</p>
        </footer>

        
        <!-- <script type="text/javascript" src="assets/js/jquery-3.4.1.js"></script>
        <script src="assets/bootstrap/js/popper.js"></script>
        <script src="assets/bootstrap/js/bootstrap.min.js"></script> -->

        <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>

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

    </body>
</html>

catSettings.js


var colors = Object.values(allColors())

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

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

  renderCat(defaultDNA)
});

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

    return parseInt(dna)
}

function renderCat(dna){
    headColor(colors[dna.headColor],dna.headColor)
    $('#bodycolor').val(dna.headColor)
    mouthColor(colors[dna.mouthColor],dna.mouthColor)
    $('#mouthcolor').val(dna.mouthColor)
    eyeColor(colors[dna.eyesColor],dna.eyesColor)
    $('#eyecolor').val(dna.eyesColor)
    earColor(colors[dna.earsColor],dna.earsColor)
    $('#earcolor').val(dna.earsColor)
    eyeVariation(dna.eyesShape)
    $('#eyeshape').val(dna.eyesShape)
    decorationVariation(dna.decorationPattern)
    $('#decorationpattern').val(dna.decorationPattern)
    decorationMidColor(colors[dna.decorationMidcolor],dna.decorationMidcolor)
    $('#decorationmid').val(dna.decorationMidcolor)
    decorationSidesColor(colors[dna.decorationSidescolor],dna.decorationSidescolor)
    $('#decorationsides').val(dna.decorationSidescolor)
    animationVariation(dna.animation)
    $('#animation').val(dna.animation)
  
}

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

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

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

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

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

$('#decorationpattern').change(()=>{
  var pattern = parseInt($('#decorationpattern').val())
  decorationVariation(pattern)
})

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

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

$('#animation').change(()=>{
  var animationVal = parseInt($('#animation').val())
  animationVariation(animationVal)
})

// Version conflict workarround for the Attributes tab

$('#catAttributesTabButton').click(() =>{
  // remove active and show from other tab and active from nav
  $("#catColorsTab").removeClass("active");
  $("#catColorsTab").removeClass("show");
  $("#catColorsTabButton").removeClass("active");
  // add active to catColorTab
  $("#catAtrributesTab").addClass("active");
  $("#catAtrributesTab").addClass("show");
  $("#catAttributesTabButton").addClass("active");
})

$('#defaultCatButton').click(() =>{
  renderCat(defaultDNA);
})

function getRndInteger(min, max) {
  return Math.floor(Math.random() * (max - min + 1) ) + min;
}

$('#randomCatButton').click(() =>{
  colorVal=getRndInteger(10,98);
  $('#bodycolor').val(colorVal);
  headColor(colors[colorVal],colorVal);

  colorVal=getRndInteger(10,98);
  $('#mouthcolor').val(colorVal);
  mouthColor(colors[colorVal],colorVal);

  colorVal=getRndInteger(10,98);
  $('#eyecolor').val(colorVal);
  eyeColor(colors[colorVal],colorVal);

  colorVal=getRndInteger(10,98);
  $('#earcolor').val(colorVal);
  earColor(colors[colorVal],colorVal);

  // attributes

  shape=getRndInteger(1,7);
  $('#eyeshape').val(shape);
  eyeVariation(shape);

  pattern=getRndInteger(1,7);
  $('#decorationpattern').val(pattern);
  decorationVariation(pattern);

  colorVal=getRndInteger(10,98);
  $('#decorationmid').val(colorVal);
  decorationMidColor(colors[colorVal],colorVal);

  colorVal=getRndInteger(10,98);
  $('#decorationsides').val(colorVal);
  decorationSidesColor(colors[colorVal],colorVal);

  animation=getRndInteger(1,6);
  $('#animation').val(animation);
  animationVariation(animation);

})

catFactory.js


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

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

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

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

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

function earColor(color,code) {
    $('.cat__ear--left, .cat__ear--right, .cat__paw-left, .cat__paw-right, .cat__paw-left_inner, .cat__paw-right_inner').css('background', '#' + color)  //This changes the ear and paw color of the cat
    $('#earcode').html('code: '+code) //This updates text of the badge next to the slider
    $('#dnaears').html(code) //This updates the body color part of the DNA that is displayed below the cat
}

function decorationMidColor(color,code) {
    $('.cat__head-dots').css('background', '#' + color)  //This changes the mid decoration color of the cat
    $('#midcolorcode').html('code: '+code) //This updates text of the badge next to the slider
    $('#dnadecorationMid').html(code) //This updates the eye color part of the DNA that is displayed below the cat
}

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


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

    $('#dnashape').html(num)
    switch (num) {
        case 1:
            normalEyes()
            $('#eyeName').html('Basic')
            break
        case 2:
            normalEyes()
            $('#eyeName').html('Chill')
            eyesType1()
            break
        case 3:
            normalEyes()
            $('#eyeName').html('Looking Up')
            eyesType2()
            break
        case 4:
            normalEyes()
            $('#eyeName').html('Looking Left')
            eyesType3()
            break
        case 5:
            normalEyes()
            $('#eyeName').html('Looking Right')
            eyesType4()
            break
        case 6:
            normalEyes()
            $('#eyeName').html('Focused')
            eyesType5()
            break
        case 7:
            normalEyes()
            $('#eyeName').html('Dreamy')
            eyesType6()
            break
        default:
            console.log("Undefined eyeshape : "+ num)
    }
}

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

async function decorationType1() {
    // Long
    $('.cat__head-dots').css({ "transform": "rotate(0deg)", "height": "55px", "width": "14px", "top": "1px", "border-radius": "0 0 50% 50%" })
    $('.cat__head-dots_first').css({ "transform": "rotate(0deg)", "height": "42px", "width": "14px", "top": "1px", "border-radius": "50% 0 50% 50%" })
    $('.cat__head-dots_second').css({ "transform": "rotate(0deg)", "height": "42px", "width": "14px", "top": "1px", "border-radius": "0 50% 50% 50%" })
}

async function decorationType2() {
    //Longer
    $('.cat__head-dots').css({ "transform": "rotate(0deg)", "height": "63px", "width": "14px", "top": "1px", "border-radius": "0 0 50% 50%" })
    $('.cat__head-dots_first').css({ "transform": "rotate(0deg)", "height": "50px", "width": "14px", "top": "1px", "border-radius": "50% 0 50% 50%" })
    $('.cat__head-dots_second').css({ "transform": "rotate(0deg)", "height": "50px", "width": "14px", "top": "1px", "border-radius": "0 50% 50% 50%" })
}

async function decorationType3() {
    // Long Left
    $('.cat__head-dots').css({ "transform": "rotate(20deg)", "height": "55px", "width": "14px", "top": "1px", "border-radius": "0 0 50% 50%" })
    $('.cat__head-dots_first').css({ "transform": "rotate(0deg)", "height": "42px", "width": "14px", "top": "1px", "border-radius": "50% 0 50% 50%" })
    $('.cat__head-dots_second').css({ "transform": "rotate(0deg)", "height": "42px", "width": "14px", "top": "1px", "border-radius": "0 50% 50% 50%" })
}

async function decorationType4() {
    // Long Right
    $('.cat__head-dots').css({ "transform": "rotate(-20deg)", "height": "55px", "width": "14px", "top": "1px", "border-radius": "0 0 50% 50%" })
    $('.cat__head-dots_first').css({ "transform": "rotate(0deg)", "height": "42px", "width": "14px", "top": "1px", "border-radius": "50% 0 50% 50%" })
    $('.cat__head-dots_second').css({ "transform": "rotate(0deg)", "height": "42px", "width": "14px", "top": "1px", "border-radius": "0 50% 50% 50%" })
}

async function decorationType5() {
    // Long Spread
    $('.cat__head-dots').css({ "transform": "rotate(0deg)", "height": "55px", "width": "14px", "top": "1px", "border-radius": "0 0 50% 50%" })
    $('.cat__head-dots_first').css({ "transform": "rotate(28deg)", "height": "42px", "width": "14px", "top": "1px", "border-radius": "50% 0 50% 50%" })
    $('.cat__head-dots_second').css({ "transform": "rotate(-28deg)", "height": "42px", "width": "14px", "top": "1px", "border-radius": "0 50% 50% 50%" })
}

async function decorationType6() {
    //Longer Spread
    $('.cat__head-dots').css({ "transform": "rotate(0deg)", "height": "63px", "width": "14px", "top": "1px", "border-radius": "0 0 50% 50%" })
    $('.cat__head-dots_first').css({ "transform": "rotate(28deg)", "height": "50px", "width": "14px", "top": "1px", "border-radius": "50% 0 50% 50%" })
    $('.cat__head-dots_second').css({ "transform": "rotate(-28deg)", "height": "50px", "width": "14px", "top": "1px", "border-radius": "0 50% 50% 50%" })
}
1 Like
#14

Finally finished with the factory!!!

vid2

Code

index.html 
<!DOCTYPE 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.6.0.js"></script>
  <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
  <script src="assets/bootstrap/js/popper.js"></script>
  <script src="assets/bootstrap/js/bootstrap.min.js"></script>

  <link rel="stylesheet" href="assets/css/mystyle.css">
  <link rel="stylesheet" href="assets/css/cats.css">
  <link rel="stylesheet" href="assets/css/cattributes.css">
  <link rel="stylesheet" href="assets/css/colors.css">
  <link rel="stylesheet" href="assets/css/factory.css">
  <link rel="stylesheet" href="assets/css/frontend.css">
</head>
  <body>

  <div class="container p-5" style="margin-top: 12vh;margin-bottom: 10vh;">
    <div align="center">
      <h1 class="c-white">Dora-Factory</h1>
      <p class="c-white">Create your custom Doraemon</p>
    </div>

    <div class="row">
      <div class="col-lg-4 catBox m-2 light-b-shadow">
        
        <div class="cat">
          <div class="cat__ears">
            <div class="cat__ear left">
              <div class="cat__ear_inside left"></div>
            </div>
            <div class="cat__ear right">
              <div class="cat__ear_inside right"></div>
            </div>
          </div>
    
          <div class="cat__head">

            <div class="cat__eyes">
              <div class="cat__eye left">
                <div class="cat__pupil left"><div class="cat__inner_pupil left"></div></div>
              </div>
              <div class="cat__eye right">
                <div class="cat__pupil right"><div class="cat__inner_pupil right"></div></div>
              </div>
            </div>
    
            <div class="cat__mouth_contour">
              <div class="cat__mouth_round left"></div>
              <div class="cat__mouth_round right"></div>
            </div>
            <div class="cat__nose">
              <div class="cat__inner_nose"></div>
            </div>
    
            <div class="cat__mouth">
              <div class="cat__tongue"></div>
            </div>
    
            <div class="cat__whiskers">
              <div class="cat__whisker left top"></div>
              <div class="cat__whisker left middle"></div>
              <div class="cat__whisker left bottom"></div>
              <div class="cat__whisker right top"></div>
              <div class="cat__whisker right middle"></div>
              <div class="cat__whisker right bottom"></div>
            </div>
    
            <div class="cat__face_lines">
              <div class="cat__line_nose_to_mouth"></div>
              <div class="cat__face_line left"></div>
              <div class="cat__face_line right"></div>
            </div>
          </div>
    
          <div class="cat__decoration">
            <div class="cat__ribbon"></div>
            <div class="cat__bell">
              <div class="cat__bell_dot"></div>
              <div class="cat__bell_vertical_line"></div>
              <div class="cat__bell__horizontal_line_top"></div>
              <div class="cat__bell__horizontal_line_bottom"></div>
            </div>
            <div class="cat__pocket"></div>
          </div>
    
          <div class="cat__body">
            <div class="cat__chest"></div>
            <div class="cat__inner_chest"></div>
          </div>
    
          <div class="cat__arms">
            <div class="cat__arm left">
              <div class="cat__hand left"></div>
            </div>
            <div class="cat__arm right">
              <div class="cat__hand right"></div>
            </div>
          </div>
    
          <div class="cat__feet">
            <div class="cat__feet_seperator"></div>
            <div class="cat__foot left"></div>
            <div class="cat__foot right"></div>
          </div>
        </div>

        <br>
        <br>
        <div class="dnaDiv" id="catDNA">
          <b>
            DNA:
            <!-- Colors -->
             <span id="dnabody"></span>
             <span id="dnafist"></span>
             <span id="dnapocket"></span>
             <span id="dnaribbon"></span>
            
             <!-- Cattributes -->
             <span id="dnaeyeshape"></span>
             <span id="dnamouthshape"></span>
             <span id="dnaearshape"></span>
             <span id="dnaearcolor"></span>
             <span id="dnaanimation"></span>
             <span id="dnaspecial"></span>
          </b>
        </div>
      </div>

      <!-- Cat colors -->
      <div class="col-lg-7 menu m-2 light-b-shadow">
        <div id="catColors">
          
          <div class="buttons">
            <button type="button" class="btn btn-primary colors">Colors</button>
            <button type="button" class="btn btn-primary cattributes">Cattributes</button>
            <button type="button" class="btn btn-danger create"><b>Create</b></button>
            <button type="button" class="btn btn-success random">Random</button>
            <button type="button" class="btn btn-success default">Default</button>
          </div>
          <br><br>
          <div class="form-group">
            <div class="tab colors">
              <label for="formControlRange"><b>Main Color</b><span class="badge bg-dark ml-2" id="bodycode"></span></label> 
                <br>
              <input type="range" min="10" max="98" class="form-range" id="bodycolor">
                <br>
              <label for="formControlRange"><b>Fist and Feet Color</b><span class="badge bg-dark ml-2" id="fistcode"></span></label>
                <br>
              <input type="range" min="10" max="98" class="form-range" id="fistcolor">
                <br>
              <label for="formControlRange"><b>Pocket Color</b><span class="badge bg-dark ml-2" id="pocketcode"></span></label>
                <br>
              <input type="range" min="10" max="98" class="form-range" id="pocketcolor">
                <br>
              <label for="formControlRange"><b>Ribbon Color</b><span class="badge bg-dark ml-2" id="ribboncode"></span></label>
                <br>
              <input type="range" min="10" max="98" class="form-range" id="ribboncolor">
                <br><br><br>
            </div>
            <div class="tab cattributes">
              <label for="formControlRange"><b>Eye State</b><span class="badge bg-dark ml-2" id="eyeName"></span></label>
                <br>
              <input type="range" min="1" max="7" class="form-range" id="eyeshape">
              <label for="formControlRange"><b>Mouth Shape</b><span class="badge bg-dark ml-2" id="mouthName"></span></label>
                <br>
              <input type="range" min="1" max="4" class="form-range" id="mouthshape">     
              <label for="formControlRange"><b>Ear Shape</b><span class="badge bg-dark ml-2" id="earName"></span></label>
                <br>
              <input type="range" min="1" max="6" class="form-range" id="earshape">
              <label for="formControlRange"><b>Ear Color</b><span class="badge bg-dark ml-2" id="earcolorcode"></span></label>
                <br>
              <input type="range" min="10" max="98" class="form-range" id="earcolor">
              <label for="formControlRange"><b>Animation</b><span class="badge bg-dark ml-2" id="animationName"></span></label>
                <br>
              <input type="range" min="1" max="4" class="form-range" id="animation">
            </div>  
          </div>

        </div>
      </div>

    </div>
    <br>

  </div>

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

.cat{
  transform: scale(1.5);
  position: absolute;
  left: 100px;
  top: 75px;
}

.cat *{
  border: 1px solid black;
}

/**EARS****************************************/
 .cat__ears{
  position: absolute;
  border-style: none;
  z-index: -1;
} 

.cat__ear {
  background-color: #1DBEFE;
  position: absolute;
}

.cat__ear.right {
  border-radius: 20% 100% 0% 100%;
  height: 90px;
  width: 70px;
  /* transform: scale(1,-1) rotate(200deg);  */
  bottom: -80px;
  left: 80px;
}

.cat__ear.left {
  border-radius: 100% 20% 100% 0%;
  height: 90px;
  width: 70px;
  /* transform: scale(1,-1) rotate(160deg);  */
  bottom: -80px;
} 

.cat__ear_inside{
  background-color: #FFFFFF;
  height: 80px;
  width: 60px;
  position: absolute;
}

.cat__ear_inside.right{
  border-radius: 20% 100% 0% 100%;
  top: 5px;
  left: 5px;
}

.cat__ear_inside.left{
  border-radius: 100% 20% 100% 0%;
  top: 5px;
  left: 5px;
}

/**HEAD****************************************/
.cat__head{
  position: relative;
  background-color: #1DBEFE;
  width: 150px;
  height: 150px;
  border-radius: 60% 60% 55% 55%;
  z-index: 0;
}

.cat__eyes{
  position: absolute;
  border-style: none;
}

.cat__eye{
  position: absolute;
  background-color: #FFFFFF;
  width: 30px;
  height: 40px;
  border-radius: 60% 60% 60% 60%;
  z-index: 1;
  top: 10px;
}

.cat__eye.left{
  transform: scale(1,-1) rotate(10deg);
  left: 45px;
}

.cat__eye.right{
  transform: rotate(10deg);
  left: 75px;
} 

.cat__pupil{
  background-color: #000000;
  width: 8px;
  height: 10px;
  border-radius: 60%;
  position: absolute;
  border-style: none;
} 

.cat__pupil.left{
  top: 10px;
  left: 16px;
  transform: rotate(-10deg);
}

.cat__pupil.right{
  top: 19px;
  left: 5px;
  transform: rotate(-10deg);
}

.cat__inner_pupil{
  background-color: white;
  width: 3px;
  height: 4px;
  border-radius: 50%;
  position: absolute;
  display: none;
}

.cat__inner_pupil.left{
  top: 3px;
  left: 3px;
  border-style: none;
}

.cat__inner_pupil.right{
  top: 3px;
  left: 2px;
  border-style: none;
}

.cat__mouth_contour{
  position: absolute;
  background-color: #FFFFFF;
  width: 130px;
  height: 130px;
  border-radius: 60% 60% 55% 55%;
  top: 25px;
  left: 10px;
}

.cat__nose{
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #D60035;
  z-index: 2;
  top: 43px;
  left: 65px;
}

.cat__inner_nose{
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #FDFCFD;
  z-index: 2;
  top: 2px;
  left: 2.5px;
  border-style: none;
}

.cat__mouth{
  position: absolute;
  height: 45px;
  width: 90px;
  border-radius: 15px 15px 45px 45px;
  background-color: #8A0004;
  left: 30px;
  top: 85px;
}

.cat__mouth_round{
  position: absolute;
  border-style: none;
  width: 60px;
  height: 30px;
  border-radius: 0px 0px 25px 25px;
  background-color: #FFFFFF;
  z-index: 1;
}

.cat__mouth_round.left{
  left: 15px;
  top: 33px;
}

.cat__mouth_round.right{
  transform: scale(1,-1) rotate(180deg);
  left: 53px;
  top: 33px;
}

.cat__tongue{
  position: absolute;
  height: 30px;
  width: 65px;
  border-radius: 10px 10px 35px 35px;
  background-color: #FB0005;
  left: 12px;
  top: 13px;
  border-style: none;
}

.cat__whiskers{
  position: absolute;
  border-style: none;
  z-index: 4;
}

.cat__whisker{
  width: 40px;
  border: black;
  border-width: 0.7px;
  border-style: solid;
  position: absolute;
  top: 65px;
}

.cat__whisker.top.left{
  transform-origin: 60px 0px;
  transform: rotate(25deg); 
}

.cat__whisker.bottom.left{
  transform-origin: 60px 0px;
  transform: rotate(-15deg); 
}

.cat__whisker.top.right{
  transform-origin: -20px 2px;
  transform: rotate(15deg); 
}

.cat__whisker.bottom.right{
  transform-origin: -20px 2px;
  transform: rotate(-25deg); 
}

.cat__whisker.left{
  left: 10px;
}

.cat__whisker.right{
  left: 100px;
}

.cat__face_lines{
  position: absolute;
  border-style: none;
}

.cat__line_nose_to_mouth{
  position: absolute;
  border: black;
  border-width: 0.7px;
  background-color: #000;
  border-style: solid;
  height: 23px;
  outline: none;
  top: 63px;
  left: 74px;
  z-index: 2;
}

.cat__face_line{
  position: absolute;
  border-style: none;
  width: 60px;
  height: 160px;
  border: solid 1.2px #000;
  border-color: #000 transparent transparent transparent;
  border-radius: 140% 80% 0 0;
  z-index: 2;
  top: -7px;
}

.cat__face_line.left{
  position: absolute;
  left: 70px;
  transform: rotate(-90deg);
}

.cat__face_line.right{
  position: absolute;
  left: 20px;
  transform: scale(1, -1) rotate(90deg);
}

/**DECORATION****************************************/

.cat__decoration{
  position: relative;
  z-index: 10;
  border-style: none;
}

.cat__ribbon{
  position: absolute;
  z-index: 10;
  width: 92px;
  height: 8px;
  border-radius: 20% 20% 30% 30%;
  background-color: #FB0006;
  top: -14px;
  left: 30px;
}

.cat__bell{
  position: absolute;
  z-index: 10;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #FFE737;
  left: 65px;
  top: -12px;
}

.cat__bell_dot{
  position: absolute;
  z-index: 11;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: #9E2624;
  left: 6.5px;
  top: 8.5px;
}

.cat__bell_vertical_line{
  position: absolute;
  border: black;
  border-width: 0.9px;
  border-style: solid;
  width: 6px;
  outline: none;
  transform: rotate(-90deg); 
  top: 15px;
  left: 6px;
  z-index: 2;
}

.cat__bell__horizontal_line_top{
  position: absolute;
  border: black;
  border-width: 0.8px;
  border-style: solid;
  width: 17px;
  outline: none;
  top: 4px;
  left: 1px;
  z-index: 2;
}

.cat__bell__horizontal_line_bottom{
  position: absolute;
  border: black;
  border-width: 0.8px;
  border-style: solid;
  width: 19px;
  outline: none;
  top: 7px;
  left: 0px;
  z-index: 2;
}

.cat__pocket{
  position: absolute;
  z-index: 10;
  width:50px;
  height:25px;
  border-radius:0 0 25px 25px;
  background:#FFFFFF;
  top: 20px;
  left: 50px;
}

/**BODY****************************************/
.cat__body{
  position: relative;
  border-style: none;
}

.cat__chest{
  z-index: -1;
  position: absolute;
  width: 90px;
  height: 100px;
  background-color: #1DBEFE;
  border-radius: 30% 30% 0% 0%;
  top: -30px;
  left: 29.5px;
}

.cat__inner_chest{
  position: absolute;
  width: 75px;
  height: 65px;
  background-color: #FFFFFF;
  border-radius: 80% 80% 70% 70%;
  top: -10px;
  left: 37px;
  z-index: 2;
} 

/**ARM****************************************/
.cat__arms{
  position: relative;
  border-style: none;
}

.cat__arm{
  position: absolute;
  background-color: #1DBEFE;
  z-index: 1;
  height: 25px;
}

.cat__arm.left{
  position: absolute;
  width: 85px;
  border-radius: 80% 80% 30% 60%;
  transform-origin: 85px 12px;
  transform: rotate(-30deg);
  left: -31px;
  top: -22px;
}

.cat__arm.right{
  position: absolute;
  width: 85px;
  border-radius: 300% 80% 80% 60%;
  transform-origin: 85px 12px;
  transform: rotate(178deg);
  left: 5px;
  top: -10px;
}

.cat__hand{
  position: absolute;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background-color: #FFFFFF;
}

.cat__hand.right{
  position: absolute;
  left: -5px;
  top: 2px;
}

.cat__hand.left{
  position: absolute;
  left: -5px;
  top: 1px;
}

/**FEET****************************************/

.cat__feet{
  position: relative;
  border-style: none;
}

.cat__feet_seperator{
  position: absolute;
  background-color: #E2EFFF;
  height: 13px;
  width: 25px;
  border-radius: 50% 50% 50% 50%;
  top: 62px;
  left: 62.5px;
  border-style: none;
  z-index: 3;
}

.cat__foot{
  position: absolute;
  background-color: #FFFFFF;
  height: 16px;
  width: 42px;
  border-radius: 70% 50% 50% 50%;
  z-index: 4;
  top: 64px;
}

.cat__foot.left{
  left: 22px;
}

.cat__foot.right{
  transform: scale(-1,1);
  left: 86px;
}
factory.css 
.catBox {
  background-color: #e2efff;
  border-radius: 10px;
  padding-top: 50px;
  padding-left: 65px;
  padding-bottom: 100px;
  position: relative;
}

.menu {
  padding: 25px;
  background-color: #ededed;
  border-radius: 10px;
}

.dnaDiv {
  position: absolute;
  left:10px;
  top: 390px;
}

.buttons .btn{
  margin: 5px;
}

.btn.create, .btn.random, .btn.default{
  float: right;
}

.tab.colors{
  display: block;
}

.tab.cattributes{
  display: none;
}
catSettings.js 

var colors = Object.values(allColors())

var defaultDNA = {
  "bodycolor" : 11,
  "fistcolor" : 21,
  "pocketcolor" : 21,
  "ribboncolor" : 31,
  "eyeshape" : 7,
  "mouthshape" : 1,
  "earshape" : 1,
  "earcolor" : 21,
  "animation" : 1,
  "lastNum" : 1
}

$( document ).ready(function () {
  makeDefaultCat();
});

$(".btn.colors").click(()=>{
  $(".tab.colors").css('display', 'block');
  $(".tab.cattributes").css('display', 'none');
})

$(".btn.cattributes").click(()=>{
  $(".tab.colors").css('display', 'none');
  $(".tab.cattributes").css('display', 'block');
})

$(".btn.default").click(()=>{
  makeDefaultCat();
})

$(".btn.random").click(()=>{
  var randomDNA = {
    "bodycolor" : Math.floor(Math.random() * 89) + 10,
    "fistcolor" : Math.floor(Math.random() * 89) + 10,
    "pocketcolor" : Math.floor(Math.random() * 89) + 10,
    "ribboncolor" : Math.floor(Math.random() * 89) + 10,
    "eyeshape" : Math.floor(Math.random() * 7) + 1,
    "mouthshape" : Math.floor(Math.random() * 4) + 1,
    "earshape" : Math.floor(Math.random() * 6) + 1,
    "earcolor" : Math.floor(Math.random() * 89) + 10,
    "animation" : Math.floor(Math.random() * 4) + 1,
    "lastNum" : 1
  }
  $('#dnabody').html(randomDNA.bodycolor);
  $('#dnafist').html(randomDNA.fistcolor);
  $('#dnapocket').html(randomDNA.pocketcolor);
  $('#dnaribbon').html(randomDNA.ribboncolor);
  $('#dnaeyeshape').html(randomDNA.eyeshape);
  $('#dnamouthshape').html(randomDNA.mouthshape);
  $('#dnaearshape').html(randomDNA.earshape);
  $('#dnaearcolor').html(randomDNA.earcolor);
  $('#dnaanimation').html(randomDNA.animation);
  renderCat(randomDNA)
})

$(".btn.create").click(()=>{
  console.log("Create cat");
})


function makeDefaultCat(){
  $('#dnabody').html(defaultDNA.bodycolor);
  $('#dnafist').html(defaultDNA.fistcolor);
  $('#dnapocket').html(defaultDNA.pocketcolor);
  $('#dnaribbon').html(defaultDNA.ribboncolor);
  $('#dnaeyeshape').html(defaultDNA.eyeshape);
  $('#dnamouthshape').html(defaultDNA.mouthshape);
  $('#dnaearshape').html(defaultDNA.earshape);
  $('#dnaearcolor').html(defaultDNA.earcolor);
  $('#dnaanimation').html(defaultDNA.animation);
  renderCat(defaultDNA)
}

function getDna(){
  var dna = ''
  dna += $('#dnabody').html()
  dna += $('#dnafist').html()
  dna += $('#dnapocket').html()
  dna += $('#dnaribbon').html()
  dna += $('#dnaeyeshape').html()
  dna += $('#dnamouthshape').html()
  dna += $('#dnaearshape').html()
  dna += $('#dnadearcolor').html()
  dna += $('#dnaanimation').html()
  dna += $('#dnaspecial').html()

  return parseInt(dna)
}

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

  changeFistColor(colors[dna.fistcolor],dna.fistcolor)
  $('#fistcolor').val(dna.fistcolor)

  changePocketColor(colors[dna.pocketcolor],dna.pocketcolor)
  $('#pocketcolor').val(dna.pocketcolor)

  changeRibbonColor(colors[dna.ribboncolor],dna.ribboncolor)
  $('#ribboncolor').val(dna.ribboncolor)

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

  changeMouthShape(dna.mouthshape)
  $('#mouthshape').val(dna.mouthshape)

  changeEarShape(dna.earshape)
  $('#earshape').val(dna.earshape)

  changeEarColor(colors[dna.earcolor],dna.earcolor)
  $('#earcolor').val(dna.earcolor)

  changeAnimation(dna.animation)
  $('#animation').val(dna.animation)
}

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

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

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

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

$('#eyeshape').change(()=>{
  var shapeVal = parseInt($('#eyeshape').val())
  changeEyeShape(shapeVal)
})

$('#mouthshape').change(()=>{
  var shapeVal = parseInt($('#mouthshape').val())
  changeMouthShape(shapeVal)
})

$('#earshape').change(()=>{
  var shapeVal = parseInt($('#earshape').val())
  changeEarShape(shapeVal)
})

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

$('#animation').change(()=>{
  var animationVal = parseInt($('#animation').val())
  changeAnimation(animationVal)
})
catFactory.js 
// Functions to change colors and cattributes

function changeBodyColor(color,code) {
  $('.cat__head, .cat__ear, .cat__chest, .cat__arm').css('background', '#' + color)  //Change cat
  $('#bodycode').html('code: '+code) //Update code badge text
  $('#dnabody').html(code) //Update DNA number
}

function changeFistColor(color,code) {
  $('.cat__hand, .cat__foot').css('background', '#' + color)  
  $('#fistcode').html('code: '+code) 
  $('#dnafist').html(code) 
}

function changePocketColor(color,code) {
  $('.cat__pocket').css('background', '#' + color)  
  $('#pocketcode').html('code: '+code) 
  $('#dnapocket').html(code) 
}

function changeRibbonColor(color,code) {
  $('.cat__ribbon').css('background', '#' + color)  
  $('#ribboncode').html('code: '+code) 
  $('#dnaribbon').html(code) 
}

function changeEyeShape(num) {
  $('#dnaeyeshape').html(num)
  switch (num) {
    case 1:
      eyeType1()
      $('#eyeName').html('Basic')
      break
    case 2:
      eyeType2()
      $('#eyeName').html('Down')
      break
    case 3:
      eyeType3()
      $('#eyeName').html('Up')
      break
    case 4:
      eyeType4()
      $('#eyeName').html('Close')
      break
    case 5:
      eyeType5()
      $('#eyeName').html('Wink')
      break
    case 6:
      eyeType6()
      $('#eyeName').html('Confused')
      break
    case 7:
      eyeType7()
      $('#eyeName').html('Tilted')
      break
  }
}

function eyeType1(){
  $('.cat__eye.left').css('transform', 'scale(1,-1) rotate(0deg)');
  $('.cat__eye.left').css('left', '45px');
  $('.cat__eye.right').css('transform', 'rotate(0deg)');
  $('.cat__eye.right').css('left', '75px');
  $('.cat__eye').css('top', '10px');
  $('.cat__pupil.left').css('top', '10px');
  $('.cat__pupil.left').css('left', '16px');
  $('.cat__pupil.right').css('top', '19px');
  $('.cat__pupil.right').css('left', '5px');
  $('.cat__inner_pupil').css('display', 'block');
  $('.cat__pupil').removeClass("cat__close_eyes");
}

function eyeType2(){
  eyeType1()
  $('.cat__pupil.left').css('top', '3px');
  $('.cat__pupil.left').css('left', '11px');
  $('.cat__pupil.right').css('top', '26px');
  $('.cat__pupil.right').css('left', '10px');
}

function eyeType3(){
  eyeType1()
  $('.cat__pupil.left').css('top', '23px');
  $('.cat__pupil.left').css('left', '11px');
  $('.cat__pupil.right').css('top', '6px');
  $('.cat__pupil.right').css('left', '10px');
}

function eyeType4(){
  eyeType1()
  $('.cat__inner_pupil').css('display', 'none');
  $('.cat__pupil').addClass("cat__close_eyes");
  $('.cat__close_eyes.left').css('top', '9px');
  $('.cat__close_eyes.left').css('left', '6px');
  $('.cat__close_eyes.right').css('top', '10px');
  $('.cat__close_eyes.right').css('left', '3px');
}

function eyeType5(){
  eyeType1()
  $('.cat__inner_pupil.right').css('display', 'none');
  $('.cat__pupil.right').addClass("cat__close_eyes");
  $('.cat__close_eyes.right').css('top', '10px');
  $('.cat__close_eyes.right').css('left', '3px');
}

function eyeType6(){
  eyeType1()
  $('.cat__pupil.left').css('top', '20px');
  $('.cat__pupil.right').css('top', '24px');
}

function eyeType7(){
  eyeType1()
  $('.cat__eye.left').css('transform', 'scale(1,-1) rotate(10deg)');
  $('.cat__eye.right').css('transform', 'rotate(10deg)');
}

function changeMouthShape(num){
  $('#dnamouthshape').html(num)
}

function changeMouthShape(num) {
  $('#dnamouthshape').html(num)
  switch(num) {
    case 1:
      mouthType1()
      $('#mouthName').html('Happy')
      break
    case 2:
      mouthType2()
      $('#mouthName').html('Smile')
      break
    case 3:
      mouthType3()
      $('#mouthName').html('Still')
      break
    case 4:
      mouthType4()
      $('#mouthName').html('Thinking')
      break
  }
}

function mouthType1(){
  $('.cat__mouth').removeClass("cat__mouth_smile");
  $('.cat__mouth').removeClass("cat__mouth_still");
  $('.cat__mouth').removeClass("cat__mouth_thinking");
  $('.cat__mouth_round').css('display', 'block');
  $('.cat__face_line').css('display', 'block');
  $('.cat__tongue').css('display', 'block');
  $('.cat__mouth').css('top', '85px');
  $('.cat__mouth').css('left', '30px');
  $('.cat__line_nose_to_mouth').css('height', '23px');
}

function mouthType2(){
  mouthType1();
  $('.cat__mouth_round').css('display', 'none');
  $('.cat__face_line').css('display', 'none');
  $('.cat__tongue').css('display', 'none');
  $('.cat__mouth').addClass("cat__mouth_smile");
  $('.cat__mouth_smile').css('top', '-110px');
  $('.cat__mouth_smile').css('left', '5px');
  $('.cat__line_nose_to_mouth').css('height', '56px');
}

function mouthType3(){
  mouthType1();
  $('.cat__mouth_round').css('display', 'none');
  $('.cat__face_line').css('display', 'none');
  $('.cat__tongue').css('display', 'none');
  $('.cat__mouth').addClass("cat__mouth_still");
  $('.cat__mouth_still').css('top', '110px');
  $('.cat__mouth_still').css('left', '50px');
  $('.cat__line_nose_to_mouth').css('height', '56px');
}

function mouthType4(){
  mouthType1();
  $('.cat__mouth_round').css('display', 'none');
  $('.cat__face_line').css('display', 'none');
  $('.cat__tongue').css('display', 'none');
  $('.cat__mouth').addClass("cat__mouth_thinking");
  $('.cat__mouth_thinking').css('top', '111px');
  $('.cat__mouth_thinking').css('left', '34px');
  $('.cat__line_nose_to_mouth').css('height', '50px');
}


function changeEarShape(num) {
  $('#dnaearshape').html(num)
  switch (num) {
    case 1:
      earType(0,0)
      $('#earName').html('"The Actual"')
      break
    case 2:
      earType(200,160);
      $('#earName').html('Basic')
      break
    case 3:
      earType(180,180);
      $('#earName').html('Away')
      break
    case 4:
      earType(150,210);
      $('#earName').html('Far Away')
      break
    case 5:
      earType(220,140);
      $('#earName').html('Straight')
      break
    case 6:
      earType(240,120);
      $('#earName').html('Close')
      break
  }
}

function earType(angleRight, angleLeft){
  $('.cat__ears').css('display', 'block') 
  if(angleRight==0&&angleLeft==0){
    $('.cat__ears').css('display', 'none')
  }else{
    $('.cat__ear.left').css('transform', 'scale(1,-1) rotate('+angleLeft.toString()+'deg)')
    $('.cat__ear.right').css('transform', 'scale(1,-1) rotate('+angleRight.toString()+'deg)')
  }
}

function changeEarColor(color,code) {
  $('.cat__ear_inside').css('background', '#' + color)  
  $('#earcolorcode').html('code: '+code) 
  $('#dnaearcolor').html(code) 
}

function changeAnimation(num) {
  $('#dnaanimation').html(num)
  switch (num) {
    case 1:
      animateType1()
      $('#animationName').html('Moving Bell')
      break
    case 2:
      animateType2()
      $('#animationName').html('Wave')
      break
    case 3:
      animateType3()
      $('#animationName').html('Dance')
      break
    case 4:
      animateType4()
      $('#animationName').html('Jump!')
      break
  }
}

function resetAnimation(){
  $(".cat__bell").removeClass("movingBell");
  $(".cat__arm").removeClass("movingArm");
  $(".cat__foot").removeClass("movingFoot");
  $(".cat").removeClass("jump");
}

function animateType1(){
  resetAnimation();
  $(".cat__bell").addClass("movingBell");
}

function animateType2(){
  resetAnimation();
  $(".cat__arm.right").addClass("movingArm");
}

function animateType3(){
  resetAnimation();
  $(".cat__arm").addClass("movingArm");
  $(".cat__foot").addClass("movingFoot");
}

function animateType4(){
  resetAnimation();
  $(".cat").addClass("jump");
}



//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
// }
6 Likes
Assignment - Cat Website
#15

Wooooo Incredible! I Like a loot ! Looks even legit project! Keep going on! Wonder to see whats next.

1 Like
#16

Hi Everyone!

Can someone help me out? I am working on the buttons section now (right now on the colors and attributes) but it seems I cannot pull it out. I believe the Jquery things are okay on the cat settings section but nothing is happening if I click on the buttons. Thanks for the help.

html code:

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

  <link rel="stylesheet" href="assets/css/animations.css">
  <link rel="stylesheet" href="assets/css/mystyle.css">
  <link rel="stylesheet" href="assets/css/cats.css">
  <link rel="stylesheet" href="assets/css/colors.css">
  <link rel="stylesheet" href="assets/css/factory.css">
  <link rel="stylesheet" href="assets/css/frontend.css">
  <link rel="stylesheet" href="assets/css/buttons.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">    
            
                
    <button id="catColors" type="button" class="anybutton">Colors</button>
    <button id="catAttributes" type="button" class="anybutton">Attributes</button>
               
        
                <div id="headGroup" 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 id="mouthGroup" class="form-group">
                    <label for="formControlRange"><b>Mouth and Tail color</b><span class="badge badge-dark m1-2" id="mouthcode"></span></label>
                    <input type="range" min="10" max="98" class="form-control-range" id="mouthcolor">
                </div>
                <div id="eyeGroup" class="form-group">
                    <label for="formControlRange"><b>Eyes color</b><span class="badge badge-dark m1-2" id="eyecode"></span></label>
                    <input type="range" min="10" max="98" class="form-control-range" id="eyecolor">
                </div>
                <div id="earGroup" class="form-group">
                    <label for="formControlRange"><b>Ear color</b><span class="badge badge-dark m1-2" id="earscode"></span></label>
                    <input type="range" min="10" max="98" class="form-control-range" id="earcolor">
                </div>
                <div id="eyeShapes" class="form-group">
                    <label for="formControlRange"><b>Eye shape</b><span class="badge badge-dark m1-2" id="eyeName"></span></label>
                    <input type="range" min="1" max="2" class="form-control-range" id="eyeshape">
                </div>
                <div id="dotShapes" class="form-group">
                    <label for="formControlRange"><b>Dot Shapes</b><span class="badge badge-dark m1-2" id="dotName"></span></label>
                    <input type="range" min="1" max="3" class="form-control-range" id="dotshape">
                </div>
                <div id="animationShapes" class="form-group">
                    <label for="formControlRange"><b>Animation</b><span class="badge badge-dark m1-2" id="animationName"></span></label>
                    <input type="range" min="1" max="2" class="form-control-range" id="animation">
                </div>
                <div class="col-lg-7">
                    <button id="random" type="button" class="anybutton">Randomize</button>
                    <button id="reset" type="button" class="anybutton">Default</button>
                    <button type="button" class="anybutton">Create</button>
            
                </div>

            </div>
        

        
              </div>  
         
        </div>
    
       

    </div>
    
    <footer align="left">
        <p>Ivan on Tech Academy Bootcamp July 2020</p>
    </footer>
   
  </body>
  <script src="assets/js/colors.js"></script>
  <script src="assets/js/catSettings.js"></script>
  <script src="assets/js/catFactory.js"></script>

</html>

Cat Settings


var colors = Object.values(allColors())

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

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

  renderCat(defaultDNA)
});

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

    return parseInt(dna)
}

function renderCat(dna){
    headColor(colors[dna.headcolor],dna.headcolor)
    $('#bodycolor').val(dna.headcolor)
    mouthColor(colors[dna.mouthcolor],dna.mouthcolor)
    $('#mouthcolor').val(dna.mouthcolor)
    eyeColor(colors[dna.eyeColor],dna.eyeColor)
    $('#eyecolor').val(dna.eyeColor)
    earColor(colors[dna.earColor],dna.earColor)
    $('#earColor').val(dna.earColor)
    eyeVariation(dna.eyesShape)
    $('#eyeshape').val(dna.eyesShape)
    decorationVariation(dna.decorationPattern)
    $('#decorationmiddle').val(dna.decorationMidcolor)
    animationVariation(dna.animation)
    $('#animations').val(dna.animation)

    $("headGroup").hide();
    $("mouthGroup").hide();
    $("eyeGroup").hide();
    $("earGroup").hide();

}

// Changing cat colors
$('#bodycolor').change(()=>{
    var colorVal = $('#bodycolor').val()
    headColor(colors[colorVal],colorVal)
})
$('#mouthcolor').change(()=>{
  var colorVal = $('#mouthcolor').val()
  mouthColor(colors[colorVal],colorVal)
})
$('#eyecolor').change(()=>{
  var colorVal = $('#eyecolor').val()
  eyeColor(colors[colorVal],colorVal)
})
$('#earcolor').change(()=>{
  var colorVal = $('#earcolor').val()
  earColor(colors[colorVal],colorVal)
})
$('#eyeshape').change(()=>{
  var shape = parseInt($('#eyeshape').val())
  eyeVariation(shape)
})
$('#decoration').change(()=>{
  var decoration = parseInt($('#decoration').val())
  decorationVariation(decoration)
}) 

$('#dotshape').change(()=>{
  var shape = parseInt($('#dotshape').val())
  decorationVariation(shape)
}) 
$('#animation').change(()=>{
  var animationVal = parseInt($('#animation').val())
  animationVariation(animationVal)
})
$('#catColors').click(() =>{
  $("headGroup").show()
  $("mouthGroup").show()
  $("eyeGroup").show()
  $("earGroup").show()

  $("eyeShapes").hide();
  $("dotShapes").hide();
  $("animationShapes").hide();
})
$('#catAttributes').click(()=>{
  $("eyeShapes").show();
  $("dotShapes").show();
  $("animationShapes").show();

  $("headGroup").hide();
  $("mouthGroup").hide();
  $("eyeGroup").hide();
  $("earGroup").hide();
})
#17

Any errors in the console??
You can also use traditional javascript way:

document.getElementById("yourId").addEventListener("click",yourFunction());

Or just add onclick property to buttons

onclick="yourFunction"

#18

Hello @kenn.eth

Thanks for the reply.

I have checked the console and I am getting the following message as error:

Uncaught TypeError: Cannot read property ‘enable’ of undefined
at HTMLDocument. (index.js:8)
at e (jquery-3.4.1.js:1165)
at t (jquery-3.4.1.js:1171)
(anonymous) @ index.js:8
e @ jquery-3.4.1.js:1165
t @ jquery-3.4.1.js:1171

So I do not know if it effects something or not because it is in the very big Jqeury file we have not touched during the course.

Thank you for your help.

#19

Hi again.
I think you are missing “#” in the jQuery selector.

$('#catColors').click(() =>{
  $("headGroup").show()
  $("mouthGroup").show()
  $("eyeGroup").show()
  $("earGroup").show()

  $("eyeShapes").hide();
  $("dotShapes").hide();
  $("animationShapes").hide();
})
$('#catAttributes').click(()=>{
  $("eyeShapes").show();
  $("dotShapes").show();
  $("animationShapes").show();

  $("headGroup").hide();
  $("mouthGroup").hide();
  $("eyeGroup").hide();
  $("earGroup").hide();
})
1 Like
#20

Yes that solved the part if I click (does not matter where) it changes only to the colors part, but if I click on attributes, it’s the same, the attributes part will diminish and only the colors part will stay. Also if I click on attributes, the same thing happen, colorst will stay only.

Update: If I put out the two buttons outside of the Color parts, it actually working fine, I just need to find how to position them correctly because they are appearing on the spans!

But at least that is one step ahead, Thanks!

1 Like
#21

my code. I solved the tab problems in two ways(with buttons and tabs) :grinning:( I learned a lot)

image
image

code added on index.html

<div align="center" >
                    <button class="white-btn" id='defaultCat'>
                        Default Cat
                    </button>
                    <button class="white-btn" id='randomCat'>
                        Random Cat
                    </button>
                    <button class="white-btn" onclick="openTab('catColors')">
                        Cat Colors Tab
                    </button>
                    <button class="white-btn" onclick="openTab('catAttributes')">
                        Cat Attributes Tab
                    </button>
<div>

code added on catSettings.js

// to reload default cat 
$('#defaultCat').click(()=>{
  renderCat(defaultDNA)
})

// for random cats
function randomNumber() {
  let random = Math.floor(Math.random()*100)
    if (random == 0) {
    random = 10
    }
    else if (random < 10){
      random = random*10
    }
    else if (random > 98) {
      random = random -2
    }
    return random 
}

$('#randomCat').click(()=>{
    let random = randomNumber()
    headColor(colors[random],random)
    $('#bodycolor').val(random)
    random = randomNumber()
    tailColor(colors[random],random)
    $('#bodycolor2').val(random)
    random = randomNumber()
    eyeColor(colors[random],random)
    $('#bodycolor3').val(random)
    random = randomNumber()
    earColor(colors[random],random)
    $('#bodycolor4').val(random)
    random = Math.floor(Math.random()*10)%5+1 // 5 options to choose
    parseInt($('#eyeshape').val(random))
    eyeVariation(random)
    random = Math.floor(Math.random()*10)%4+1 // 4 options to choose
    parseInt($('#decorativepattern').val(random))
    decorationVariation(random)
    random = randomNumber()
    pattern(colors[random],random)
    $('#patterncolor').val(random)
    random = randomNumber()
    pattern2(colors[random],random)
    $('#pattern2color').val(random)
    random = Math.floor(Math.random()*10)%4+1
    parseInt($('#animation').val(random))
    animationVariation(random)
})


// for tabs to change from color or attributes
function openTab(colorAttribute) {
  var i;
  var x = document.getElementsByClassName("tabs");
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";  
  }
  document.getElementById(colorAttribute).style.display = "block";  
}
2 Likes
#22

Learned how to use bootstrap as Filip suggested! I don’t know how to manually edit the buttons yet or other components in bootstrap, but it makes the job a lot easier
image

Codes:

catSettings.js 

var colors = Object.values(allColors())

var defaultDNA = {
  "headcolor" : 96,
  "mouthColor" : 39,
  "eyesColor" : 98,
  "earsColor" : 98,
  //Cattributes
  "eyesShape" : 6,
  "decorationPattern" : 3,
  "decorationMidcolor" : 84,
  "decorationSidescolor" : 69,
  "animation" :  6,
  "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) //sets slider value

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

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

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

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

  hairStyle(dna.decorationPattern)
  $('#hairstyle').val(dna.decorationPattern)

  middleHairColor(colors[dna.decorationMidcolor],dna.decorationMidcolor)
  $('#hairColor1').val(dna.decorationMidcolor)

  sidesHairColor(colors[dna.decorationSidescolor],dna.decorationSidescolor)
  $('#hairColor2').val(dna.decorationSidescolor)

  animationVariation(dna.animation)
  $('#animation').val(dna.animation)
}

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

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

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

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

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

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

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

$('#hairstyle').change( () => {
  var style = parseInt($('#hairstyle').val())
  hairStyle(style)
})

//Changing animation
$('#animation').change( () => {
  var animationVal = parseInt($('#animation').val())
  animationVariation(animationVal)
})

//Random Kitty
$('#random').click(() => {
  var bodyColorRandom = Math.floor(Math.random() * 88) + 10;
  headColor(colors[bodyColorRandom],bodyColorRandom)
  $("#bodycolor").val(bodyColorRandom)

  var mouthColorRandom = Math.floor(Math.random() * 88) + 10;
  mouthColor(colors[mouthColorRandom],mouthColorRandom)
  $("#mouthcolor").val(mouthColorRandom)

  var eyesColorRandom = Math.floor(Math.random() * 88) + 10;
  eyeColor(colors[eyesColorRandom],eyesColorRandom)
  $("#eyescolor").val(eyesColorRandom)

  var earsColorRandom = Math.floor(Math.random() * 88) + 10;
  earColor(colors[earsColorRandom],earsColorRandom)
  $("#earscolor").val(earsColorRandom)

  var eyeShapeRandom = Math.floor(Math.random() * 7) + 1;
  eyeVariation(eyeShapeRandom)
  $("#eyeshape").val(eyeShapeRandom)

  var hairStyleRandom = Math.floor(Math.random() * 7) + 1;
  hairStyle(hairStyleRandom)
  $("#hairstyle").val(hairStyleRandom)

  var hairMidColor = Math.floor(Math.random() * 88) + 10;
  middleHairColor(colors[hairMidColor],hairMidColor)
  $("#hairColor1").val(hairMidColor)

  var hairSideColor = Math.floor(Math.random() * 88) + 10;
  sidesHairColor(colors[hairSideColor],hairSideColor)
  $("#hairColor2").val(hairSideColor)

  var randomAnimation = Math.floor(Math.random() * 6) + 1;
  animationVariation(randomAnimation)
  $("#animation").val(randomAnimation)
})

//Default Kitty
$('#default').click(() => {
  renderCat(defaultDNA)  
})
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>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

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

                    <div id="head" class="cat__head">
                        <div id="midDot" class="cat__head-dots">
                            <div id="leftDot" class="cat__head-dots_first"></div>
                            <div id="rightDot" class="cat__head-dots_second"></div>
                        </div>
                        <div id="eyes" class="cat__eye">
                            <div class="cat__eye--left">
                                <span id="left-eye" class="pupil-left"></span>
                            </div>
                            <div class="cat__eye--right">
                                <span id="right-eye"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 id='left-hand' class="cat__paw-left"></div>
                        <div id='left-foot' class="cat__paw-left_inner"></div>


                        <div id='right-hand' class="cat__paw-right"></div>
                        <div id='right-foot' class="cat__paw-right_inner"></div>


                        <div id="tail" class="cat__tail">
                            <div id="tailend" class = "cat__tail-end"></div>
                        </div>
                    </div>
                </div>
                <br>
                <div class="dnaDiv" id="catDNA">
                    <b>
                        DNA:
                        <!-- Colors -->
                         <span id="dnabody"></span>
                         <span id="dnamouth"></span>
                         <span id="dnaeyes"></span>
                         <span id="dnaears"></span>
                        
                         <!-- Cattributes -->
                         <span id="dnashape"></span>
                         <span id="dnadecoration"></span>
                         <span id="dnadecorationMid"></span>
                         <span id="dnadecorationSides"></span>
                         <span id="dnaanimation"></span>
                         <span id="dnaspecial"></span>
                    </b>
                </div>
            </div>
            <div class="col-lg-7 cattributes m-2 light-b-shadow" id="parent">
                <a class="btn btn-outline-info" data-toggle="collapse" href="#catColors" role="button" aria-expanded="true" aria-controls="catColors">Color Me!</a>
                <a class="btn btn-outline-info collapsed ml-2" data-toggle="collapse" href="#cattributes" role="button" aria-expanded="false" aria-controls="cattributes">Cattributes</a>
                <div class="collapse show mt-3" data-parent="#parent" id="catColors">
                    <div class="form-group">
                        <label for="formControlRange"><b>Head and body</b><span class="badge badge-dark ml-2" id="headcode"></span></label>
                        <input type="range" min="10" max="98" class="form-control-range" id="bodycolor">
                    </div>

                    <div class="form-group">
                        <label for="formControlRange"><b>Mouth | Belly | Inner Ears | 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 | Tailend</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">
                    </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="earscolor">
                    </div>

                    <div class="form-group">
                        <label for="formControlRange"><b>Hair Color - middle</b><span class="badge badge-dark ml-2" id="middleHair"></span></label>
                        <input type="range" min="10" max="98" class="form-control-range" id="hairColor1">
                    </div>

                    <div class="form-group">
                        <label for="formControlRange"><b>Hair Color - sides</b><span class="badge badge-dark ml-2" id="sidesHair"></span></label>
                        <input type="range" min="10" max="98" class="form-control-range" id="hairColor2">
                    </div>
                </div>
            
                <div class="collapse mt-3" data-parent="#parent" id="cattributes">
                    <div class="form-group">
                        <label for="formControlRange"><b>Eye shape</b><span class="badge badge-dark ml-2" id="eyeName"></span></label>
                        <input type="range" min="1" max="7" class="form-control-range" id="eyeshape">
                    </div>

                    <div class="form-group">
                        <label for="formControlRange"><b>Hair Style</b><span class="badge badge-dark ml-2" id="hairName"></span></label>
                        <input type="range" min="1" max="7" class="form-control-range" id="hairstyle">
                    </div>

                    <div class="form-group">
                        <label for="formControlRange"><b>Animations</b><span class="badge badge-dark ml-2" id="animationName"></span></label>
                        <input type="range" min="1" max="6" class="form-control-range" id="animation">
                    </div>
                </div>
                <div class="navbar justify-content-between">
                    <div>
                        <button id="random" type="button" class="btn btn-outline-dark">Random Kitty</button>
                        <button id="default" type="button" class="btn btn-outline-dark ml-2">Default Kitty</button>
                    </div>
                    <button class="btn btn-success my-2 my-sm-0">Create Kitty</button>
                </div>
            </div>

            </div>
            <br>

        </div>



    </div>
    <footer align ="left">
        <p>Project by Xyz Fiegalan | Ivan on Tech Academy (Student)</p>
    </footer>

    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  </body>
  <script src="assets/js/colors.js"></script>
  <script src="assets/js/catSettings.js"></script>
  <script src="assets/js/catFactory.js"></script>

</html>
3 Likes
#23

Button 1 Create New Order(Kitty)

 <button id="NewOrder">Create Product Order</button>
  
<script>
$("#NewOrder").click(function(){
    console.log("New Order");
});
2 Likes
#24

Here is my final version:
Screenshot 2021-06-05 at 03.42.46

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="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

  <link rel="stylesheet" href="assets/css/mystyle.css">
  <link rel="stylesheet" href="assets/css/cats.css">
  <link rel="stylesheet" href="assets/css/cattributes.css">
  <link rel="stylesheet" href="assets/css/colors.css">
  <link rel="stylesheet" href="assets/css/factory.css">
  <link rel="stylesheet" href="assets/css/frontend.css">
  <link rel="stylesheet" href="assets/css/animations.css">
</head>
  <body>
    <div class="container p-5" style="margin-top: 12vh;margin-bottom: 10vh;">
        <div align="center">
        <h1 class="c-white">The Kitties Factory</h1>
        <p class="c-white">Create your custom Kitty</p>
    </div>
        <div class="row">
            <div class="col-lg-4 catBox m-2 light-b-shadow">
                <div class="cat">
                    <div class="tail"></div>
                    <div class="tail-mask"></div>
                    <div class="tail-end"></div>
                    
                    <div class="ears">
                         <div class="ear left_ear">
                             <div class="inner_ear left_inner_ear"></div>
                        </div>
                         <div class="ear right_ear">
                         <div class="inner_ear right_inner_ear"></div>
                           </div>
                           </div>
                         
                <div id="head" class="cat_head" >
                    <div class="eyes">
                        <div class="eye">
                            <div class="pupils">
                                <span class="inner_eye_big"></span>
                                <span class="inner_eye_small"></span>
                                <span class="inner_eye_smallest"></span>
                            </div>
                        </div>
                        <div class="eye">
                            <div class="pupils">
                                <span class="inner_eye_big"></span>
                                <span class="inner_eye_small"></span>
                                <span class="inner_eye_smallest"></span>
                            </div>
                        </div>
                        </div>
                        <div class="nose"></div>
                        <div class=cat_mouth-contour></div>
                        <div class="cat_mouth-left"></div>
                        <div class="cat_mouth-right"></div>
                        <div class="cat_whiskers-left"></div>
                        <div class="cat_whiskers-right"></div>
                        </div>
                        <div class="body">
                            <div class="collar">
                                <div class="collar_shape"></div>
                            </div>
                        <div class="belly"></div> 
                        <div class="feet">
                            <div class="foot">
                                <div class="inner_foot_small1"></div>
                                <div class="inner_foot_small2"></div>
                                <div class="inner_foot_small3"></div>
                                <div class="inner_foot_big"></div>
                            </div>
                            <div class="foot">
                                <div class="inner_foot_small4"></div>
                                <div class="inner_foot_small5"></div>
                                <div class="inner_foot_small6"></div>
                                <div class="inner_foot_big"></div>
                            </div>
                        </div>
                    </div>
            </div>
    
    
    <div class="dnaDiv" id="catDNA">
        <b>
            DNA:
            <!-- Colors -->
             <span id="dnabody"></span>
             <span id="dnamouth"></span>
             <span id="dnaeyes"></span>
             <span id="dnaears"></span>
            
             <!-- Cattributes -->
             <span id="dnashape"></span>
             <span id="dnacollarShape"></span>
             <span id="dnashapeColor"></span>
             <span id="dnacollarColor"></span>
             <span id="dnaanimation"></span>
             <span id="dnaspecial"></span>
        </b>
    </div>
</div>
<div class="col-lg-7 cattributes m-2 light-b-shadow">
    <ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#catColors"> Adjust colors</a></li>
    <li><a data-toggle="tab" href="#cattributes"> Adjust cattributes</a></li>
</ul>
<br>
<br>
<!-- Cat colors -->
<div class="tab-content">
<div id="catColors" class="tab-pane fade in active">
                <div class="form-group">
                    <label for="formControlRange"><b>Head | body</b><span class="badge badge-dark ml-2" id="headcode"></span></label>
                    <input type="range" min="10" max="98" class="form-control-range" id="bodycolor">
                </div>
                <div class="form-group">
                    <label for="formControlRange"><b>Mouth | belly</b><span class="badge badge-dark ml-2" id="bellycode"></span></label>
                    <input type="range" min="10" max="98" class="form-control-range" id="mouthcolor">
                </div>
                <div class="form-group">
                    <label for="formControlRange"><b>Eyes</b><span class="badge badge-dark ml-2" id="eyescode"></span></label>
                    <input type="range" min="10" max="98" class="form-control-range" id="eyescolor">
                </div>

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

            <div id="cattributes" class="tab-pane fade">
                <div class="form-group">
                    <label for="formControlRange"><b>Eyes shape</b><span class="badge badge-dark ml-2" id="eyeName"></span></label>
                    <input type="range" min="1" max="4" class="form-control-range" id="eyeshape">
                </div>

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

                <div class="form-group">
                    <label for="formControlRange"><b>Animation</b><span class="badge badge-dark ml-2" id="animationName"></span></label>
                    <input type="range" min="1" max="7" class="form-control-range" id="animation">
                </div>
            </div>
        </div>
        <br>
<div class="buttons">
    <button type="button" class="btn btn-info new"><b>New kitty</b></button><br><br>
    <button type="button" class="btn btn-warning random">Get random kitty</button><br><br>
    <button type="button" class="btn btn-danger default">Default kitty</button>
</div>

            </div>

            </div>
            <br>

        </div>



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

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

</html>
catSettings.js 

var colors = Object.values(allColors())

var defaultDNA = {
    "headcolor" : 10,
    "mouthColor" : 13,
    "eyesColor" : 96,
    "earsColor" : 10,
    //Cattributes
    "eyesShape" : 1,
    "collarShape" : 1,
    "shapeColor" : 13,
    "collarColor" : 13,
    "animation" :  1,
    "lastNum" :  1
    }

// when page load

$( document ).ready(function() {
  createDefaultCat();
})

$(".btn.default").click(()=>{
  createDefaultCat();
})

function createDefaultCat(){
  $('#dnabody').html(defaultDNA.headcolor);
  $('#dnamouth').html(defaultDNA.mouthColor);
  $('#dnaeyes').html(defaultDNA.eyesColor);
  $('#dnaears').html(defaultDNA.earsColor);
   $('#dnashape').html(defaultDNA.eyesShape);
   $('#dnacollarShape').html(defaultDNA.collarShape);
   $('#dnashapeColor').html(defaultDNA.shapeColor);
   $('#dnacollarColor').html(defaultDNA.collarColor);
   $('#dnaanimation').html(defaultDNA.animation);
   $('#dnaspecial').html(defaultDNA.lastNum);
  renderCat(defaultDNA);
}

$(".btn.random").click(()=>{
  var randomDNA = {
    "headcolor" : Math.floor(Math.random() * 89) + 10,
    "mouthColor" : Math.floor(Math.random() * 89) + 10,
    "eyesColor" : Math.floor(Math.random() * 89) + 10,
    "earsColor" : Math.floor(Math.random() * 89) + 10,
    "eyesShape" : Math.floor(Math.random() * 4) + 1,
    "collarShape" : Math.floor(Math.random() * 5) + 1,
    "shapeColor" : Math.floor(Math.random() * 89) + 10,
    "collarColor" : Math.floor(Math.random() * 89) + 10,
    "animation" : Math.floor(Math.random() * 7) + 1,
    "lastNum" : 1
  }
  $('#dnabody').html(randomDNA.headcolor);
  $('#dnamouth').html(randomDNA.mouthColor);
  $('#dnaeyes').html(randomDNA.eyesColor);
  $('#dnaears').html(randomDNA.earsColor);
   $('#dnashape').html(randomDNA.eyesShape);
   $('#dnacollarShape').html(randomDNA.collarShape);
   $('#dnashapeColor').html(randomDNA.shapeColor);
   $('#dnacollarColor').html(randomDNA.collarColor);
   $('#dnaanimation').html(randomDNA.animation);
   $('#dnaspecial').html(randomDNA.lastNum);
  renderCat(randomDNA);
})

function getDna(){
    var dna = ''
    dna += $('#dnabody').html()
    dna += $('#dnamouth').html()
    dna += $('#dnaeyes').html()
    dna += $('#dnaears').html()
    dna += $('#dnashape').html()
    dna += $('#dnacollarShape').html()
    dna += $('#dnashapeColor').html()
    dna += $('#dnacollarColor').html()
    dna += $('#dnaanimation').html()
    dna += $('#dnaspecial').html()

    return parseInt(dna)
}

function renderCat(dna){
    headcolor(colors[dna.headcolor],dna.headcolor)
    $('#bodycolor').val(dna.headcolor)
    mouthColor(colors[dna.mouthColor], dna.mouthColor)
    $('#mouthcolor').val(dna.mouthColor)
    eyesColor(colors[dna.eyesColor], dna.eyesColor)
    $('#eyescolor').val(dna.eyesColor)
    earsColor(colors[dna.earsColor], dna.earsColor)
    $('#earscolor').val(dna.earsColor)
    eyeVariation(dna.eyesShape)
    $('#eyeshape').val(dna.eyesShape)
    collarVariation(dna.collarShape)
    $('#collarshape').val(dna.collarShape)
    shapeColor(colors[dna.shapeColor], dna.shapeColor)
    $('#shapecolor').val(dna.shapeColor)
    collarColor(colors[dna.collarColor], dna.collarColor)
    $('#collarcolor').val(dna.collarColor)
    animationVariation(dna.animation)
    $('#animation').val(dna.animation)
}

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

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

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

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

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

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

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

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

$('#animation').change(()=>{
  var animationVal= parseInt($('#animation').val())
  animationVariation(animationVal)
})
catFactory.js 

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

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

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

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

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

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

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

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

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

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

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

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

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

}

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

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

     function collarShape3() {
        normalCollar()
         $('.collar_shape').css('border-radius', '100px/ 50px')
         $('.collar_shape').css('width', '29px')
         $('.collar_shape').css('height', '14px')
         $('.collar_shape').css('left', '30px')
         $('.collar_shape').css('top', '14px')
         $('.collar_shape').css('transform', 'rotate(90deg)')
    }
    
    function collarShape4() {
        normalCollar()
        $('.collar_shape').css('display', 'none')   
   }
   
   function animationVariation(num) {
    $('#dnaanimation').html(num)
    switch (num) {
        case 1:
            animationType1()
            $('#animationName').html('Head move')
            break
        case 2:
            animationType2()
            $('#animationName').html('Ears move')
            break
        case 3:
            animationType3()
            $('#animationName').html('Big eyes')
            break
        case 4:
            animationType4()
            $('#animationName').html('Feet move')
            break
        case 5:
            animationType5()
            $('#animationName').html('Jiggly belly')
            break
        case 6:
        animationType6()
        $('#animationName').html('Tail wiggle')
        break
        case 7:
            animationType7()
            $('#animationName').html('No animation')
            break
    }}


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

    function animationType2(){
        removeAnimation()
        $(".ears").addClass("movingEars");
    }

    function animationType3(){
        removeAnimation()
        $(".eyes").addClass("movingEyes");
    }

    function animationType4(){
        removeAnimation()
        $(".foot").addClass("movingFeet");
    }

    function animationType5(){
        removeAnimation()
        $(".belly").addClass("movingBelly");
    }

    function animationType6(){
        removeAnimation()
        $(".tail").addClass("movingTail");
    }

    function animationType7(){
        removeAnimation()
    }
    function removeAnimation(){
        $(".cat_head").removeClass("movingHead")
        $(".ears").removeClass("movingEars")
        $(".eyes").removeClass("movingEyes")
        $(".foot").removeClass("movingFeet")
        $(".belly").removeClass("movingBelly")
        $(".tail").removeClass("movingTail")
    }
cats.css 
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: inherit;
}
html {
    box-sizing: border-box;
    overflow-y: scroll;
}
body {
    background: #607d8b;
 
}

.cat_head{
  background-color: black;
  width: 197px;
  height: 183px;
  left: 43px;
  border-radius: 50% 50% 45% 45%;
  position: absolute;
  }

  
  .eyes{
      position: relative;
      top: 14px;
      display: flex;
  }
  .eye{
    background-color: rgb(235, 155, 35);
    border-radius: 50%;
    width: 43px;
    height: 49px;
    margin: 25px;
    position: relative;
  }
  
  .pupils{
    background-color: black;
    border-radius: 50%;
    width: 28px;
    height: 36px;
    position: absolute;
    top: 5px;
    left: 6px;
  }
  
  .inner_eye_big{
    background-color: white;
    width: 9px;
    height: 11px;
    border-radius: 50%;
    position: absolute;
    top: 6px;
    left: 20px;
  }
  
  .inner_eye_small{
    background-color: white;
    width: 5px;
    height: 4px;
    border-radius: 50%;
    position: absolute;
    top: 25px;
    left: 23px;
  }
  
  .inner_eye_smallest{
    background-color: white;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    position: absolute;
    top: 27px;
    left: 3px;
  }
    
  .ears{
    position:relative;
  }
  
  .ear{
      border-radius:90% 0 90% 0;
      background-color: black;
      height: 100px;
      width: 100px;
      position: absolute;
  }
  
  .left_ear{
    left: -9px;
    transform: scale(-1,1);
      
  }
  
  .right_ear{
    left: 94px;
  }
  
  .inner_ear{
      position: relative;
      background-color: rosybrown;
      border-radius: 90% 0 90% 0;
      height: 80px;
      width: 80px;
  }
  
  .left_inner_ear{
      top: 10px;
      left: 11px;
  }
  
  .right_inner_ear{
      left: 9px;
      top: 11px;
  }
  
  .nose{
      position: absolute;
      top: 100px;
      left: 80px;
      width: 0;
      height: 0;
      border-right: 14px solid rgba(255, 255, 255, 0);
      border-left: 14px solid rgba(255, 255, 255, 0);
      border-top: 14px solid #e57373;
      border-radius: 40%;
      z-index: 100;
  }
  .cat_mouth-contour {
    position: absolute;
    top: 86px;
    left: 18px;
    background: rgb(162 155 155);
    width: 153px;
    height: 78px;
    -webkit-border-radius: 55% 55% 60% 60%;
    border-radius: 55% 55% 60% 60%;
  }

.cat_mouth-left, .cat_mouth-right {
    position: absolute;
    top: 109px;
    width: 23px;
    height: 23px;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    border: 4px solid  #373737;
    border-right: 3px solid rgba(255, 255, 255, 0);
    border-top: 3px solid rgba(255, 255, 255, 0);
    transform: rotate(-45deg);
}
.cat_mouth-left {
    left: 73px;
}
.cat_mouth-right {
    left: 94px;
}

.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: 18px;
    left: 9px;
}
.cat_whiskers-left::before {
  top: -16px;
  transform: rotate(15deg);
}
.cat_whiskers-left::after {
  top: 16px;
  transform: rotate(-15deg);
}
.cat_whiskers-right {
  top: 12px;
  left: 153px;
}
.cat_whiskers-right::before {
  top: -16px;
  transform: rotate(-15deg);
}
.cat_whiskers-right::after {
  top: 16px;
  transform: rotate(15deg);
}
  
.collar{
  background-color: rosybrown;
  width: 75px;
  height: 6px;
  border-radius: 10px;
  position: relative;
  top: 0px;
  left: 46px;
  transform: rotate(-5deg);
}

.collar_shape{
  background-color: rgb(146, 201, 182);
  width: 25px;
  height: 25px;
  border-radius: 50%;
  position: relative;
  top: 6px;
  left: 28px;
  transform: rotate(-5deg);
}

  .belly{
    background-color: rgb(162 155 155);
    width: 128px;
    height: 73px;
    border-radius: 50% 50% 45% 55%;
    position: relative;
    top: 60px;
    left: 32px;
  }
  .body{
    background-color: black;
    width: 189px;
    height: 151px;
    border-radius: 50% 50% 45% 55%;
    position: relative;
    top: 176px;
    left: 24px;
  }
  .tail {
    position: absolute;
    margin-left: 40px;
    margin-top: 40px;
    height: 60px;
    width: 80px;
    border: 15px solid #000000;
    border-radius: 50px;
    display: inline-block;
    z-index: 0;
    top: 227px;
    left: 187px;
}
    
    .tail-mask {
      position: absolute;
      margin-top: 40px;
      margin-left: 100px;
      height: 35px;
      width: 78px;
      background-color: #e1f0fe;
      z-index: 0;
      top: 211px;
      left: 99px;
    }
    
    .tail-end {
      position: absolute;
      margin-top: 63px;
      margin-left: 130px;
      height: 19px;
      width: 19px;
      border-radius: 50%;
      background-color: #000000;
      z-index: 1;
      top: 201px;
      left: 135px;
    }
  
    .feet{
      position: relative;
      display: flex;
      left:-15px;
    }
  
    .foot{
      background-color: black;
      width: 48px;
      height: 61px;
      border-radius: 40% 50% 40% 50%;
      position: relative;
      top: 3px;
      left: 16px;
      margin: 25px;
    }
  
    .inner_foot_small1{
      background-color: rosybrown;
      width: 14px;
      height: 12px;
      border-radius: 20% 80% 20% 80%;
      position: absolute;
      top: 16px;
      left: 3px;
    }
    .inner_foot_small2{
      background-color: rosybrown;
      width: 9px;
      height: 16px;
      border-radius: 80%;
      position: absolute;
      top: 5px;
      left: 19px;
    }
    .inner_foot_small3{
      background-color: rosybrown;
      width: 11px;
      height: 12px;
      border-radius: 80% 20% 80% 20%;
      position: absolute;
      top: 15px;
      left: 30px;
    }
    .inner_foot_small4{
      background-color: rosybrown;
      width: 14px;
      height: 12px;
      border-radius: 20% 80% 20% 80%;
      position: absolute;
      top: 16px;
      left: 6px;
    }
    .inner_foot_small5{
      background-color: rosybrown;
    width: 9px;
    height: 16px;
    border-radius: 80%;
    position: absolute;
    top: 5px;
    left: 21px;
    }
    .inner_foot_small6{
      background-color: rosybrown;
      width: 11px;
      height: 12px;
      border-radius: 80% 20% 80% 20%;
      position: absolute;
      top: 17px;
      left: 32px;
    }
  
    .inner_foot_big{
      background-color: rosybrown;
      width: 26px;
      height: 29px;
      border-radius: 80%;
      position: absolute;
      top: 28px;
      left: 11px;
      
    }
/* .cursor {
    position: absolute;
    height: 23px;
    width: 23px;
    border: none;
    border-radius: 50%;
    background: #b40660;
    transform: translateX(-50%) translateY(-50%);
    z-index: 4000;
} */
animations.css 
.movingHead{
    animation: moveHead 3s infinite;
}

.movingEars{
    animation: moveEars 5s infinite;
}

.movingEyes{
    animation: moveEyes 3s infinite;
}

.movingFeet{
    animation: moveFeet 3s infinite;
}

.movingBelly{
    animation: moveBelly 3s infinite;
}

.movingTail{
    animation: moveTail 3s infinite;
}

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

}

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

}

@keyframes moveEyes{
    0%{
        transform: scale(0.7);
    }
    30%{
        transform: scale(1);
    }
    60%{
        transform: scale(1.5);
    }
    100%{
        transform: scale(0.7);
    }

}

@keyframes moveFeet{
    0%{
        transform: scale(0.7);
    }
    30%{
        transform: scale(1);
    }
    60%{
        transform: scale(2);
    }
    100%{
        transform: scale(0.7);
    }

}

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

}

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

}

I did notice however some issues :frowning:
Once I click on random kitty, I can no longer get the default kitty.
Some of the properties from the default kitty will return upon clicking the button, unfortunately most of them do not.

I believe I have some problems in the catFactory.js file.
When I try to scroll back eyes shape, the shapes remain and do not reset.
Same with the collar shape. Once I scroll to the last shape (no shape), this shape remains.

Any opinions and help will be very welcomed :slight_smile:

2 Likes
#25

index.html

<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 id=cat>
                    <div class="ears">
                        <div class="ear left_ear">
                            <div class="left_ear_inside"></div>
                        </div>
                        <div class="ear right_ear">
                            <div class="right_ear_inside"></div>
                        </div>
                    </div>
                    <div id="body">
                        
                        <div class="face">
                            <div class="contour"></div>
                            <div id="midDot" class="mid_head_dot">
                                <div class="left_head_dot"></div>
                                <div class="right_head_dot"></div>
                            </div>
                            <div class="eyes">
                                <div class="eye-left">
                                    <span class="pupil-left">     
                                    </span>
                                </div>            
                                <div class="eye-right">
                                    <div class="pupil-right"></div>
                                </div>
                            </div>
                            <div class="nose">
                                <div class="whisker_left"></div>
                                <div class="whisker_right"></div> 
                            </div>
                            <div class="mustaches">
                                <div class="mustache mustache_left"></div>
                                <div class="mustache mustache_right"></div>
                            </div>
                            
                        </div>
        
                        <div class="chest">
                            <div class="chest_inner"></div>
                            <div class="chest_left_paw"></div>
                            <div class="chest_right_paw"></div>
                            <div class="chest_left_back_leg"></div>
                            <div class="chest_right_back_leg"></div>
                        </div>
                        <div class="tail"></div>
                        
                    </div>
                </div>
                <br>
                    <div class="dnaDiv" id="catDNA">
                        <b>
                            DNA:
                            <!-- Colors -->
                            <span id="dnamouth"></span>
                            <span id="dnabody"></span>
                            <span id="dnaears"></span>
                            <span id="dnaeyes"></span>
                            <!-- Cattributes -->
                            <span id="dnaeyeshape"></span>
                            <span id="dnadecoration"></span>
                            <span id="dnadecorationMid"></span>
                            <span id="dnadecorationSides"></span>
                            <span id="dnaanimation"></span>
                            <span id="dnaspecial"></span>
                        </b>
                    </div>
                </br>
            </div>
            
            <div class="col-lg-7 cattributes m-2 light-b-shadow">
                <ul class="nav nav-tabs">
                    <li class="active" style="padding: 5px;">
                        <a href="#catColors" data-toggle="tab">Colors </a>
                    </li>
                    <li style="padding: 5px;">
                        <a href="#cattributesId" data-toggle="tab">Catributes</a>
                    </li>
                </ul>
                
                <div class="tab-content">
                    <div class="tab-pane fade show active" id="catColors">
                        <div class="form-group">
                            <label for="formControlRange"><b>face and chest</b><span class="badge badge-dark ml-2" id="headcode"></span></label>
                            <input type="range" min="10" max="98" class="form-control-range" id="faceAndChestColor">
                        </div>

                        <div class="form-group">
                            <label for="formControlRange"><b>Body front feet back feet Tail color</b><span class="badge badge-dark ml-2" id="bodycode"></span></label>
                            <input type="range" min="10" max="98" class="form-control-range" id="legsColor">
                        </div>

                        <div class="form-group">
                            <label for="formControlRange"><b>Inner chest color</b><span class="badge badge-dark ml-2" id="innerchestcode"></span></label>
                            <input type="range" min="10" max="98" class="form-control-range" id="innerChestColor">
                        </div>

                        <div class="form-group">
                            <label for="formControlRange"><b>Eyes and Ears</b><span class="badge badge-dark ml-2" id="eyesearscode"></span></label>
                            <input type="range" min="10" max="98" class="form-control-range" id="eyesAndEarColor">
                        </div>
                    </div>
                
                    <div class="tab-pane fade show" id="cattributesId">
                        <div class="form-group">
                            <label for="formControlRange"><b>Eyes Shape</b><span class="badge badge-dark ml-2" id="eyeShapeCode"></span></label>
                            <input type="range" min="1" max="9" class="form-control-range" id="eyeshape">
                        </div>
                        <div class="form-group">
                            <label for="formControlRange"><b>Decoration</b><span class="badge badge-dark ml-2" id="decorationCode"></span></label>
                            <input type="range" min="1" max="2" class="form-control-range" id="decoration">
                        </div>
                        <div class="form-group">
                            <label for="formControlRange"><b>Decoration Mid</b><span class="badge badge-dark ml-2" id="decorationMidId"></span></label>
                            <input type="range" min="10" max="98" class="form-control-range" id="decorationMid">
                        </div>
                        <div class="form-group">
                            <label for="formControlRange"><b>Decoration Sides</b><span class="badge badge-dark ml-2" id="decorationSidesId"></span></label>
                            <input type="range" min="10" max="98" class="form-control-range" id="decorationSides">
                        </div>
                        <div class="form-group">
                            <label for="formControlRange"><b>Animation</b><span class="badge badge-dark ml-2" id="animationId"></span></label>
                            <input type="range" min="1" max="5" class="form-control-range" id="animation">
                        </div>
                    </div>
                </div>
            </div>
            <div class="buttonsDiv">
                <br >
                    <button id="createKitty" type="button" class="btn btn-outline-primary">Create</button>
                    <button id="defaultKitty" type="button" class="btn btn-outline-secondary">Default</button>
                    <button id="randomKitty" type="button" class="btn btn-outline-success">Random</button>
                </br>
            </div>

            <!-- Modal -->
            <div class="modal fade" id="createNewDialog" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                <div class="modal-content">
                <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Create Kittie</h5>
                <button type="button" id="close-dialog" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p class="text-felt">Please create a new cat with colors and attributes you like</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
  </div>
        </div>
    </div>
    </div>
    <footer align="left">
        <p>Hk Kitty</p>
    </footer>

  </body>

catSettings.js

var colors = Object.values(allColors())

//initial and default DNA are same
var initialDNA = ''
var defaultDNA = {
    "headColor" : 13,
    "mouthColor" : 13,
    "eyesColor" : 96,
    "earsColor" : 10,
    //Cattributes
    "eyeShape" : 1,
    "decorationPattern" : 1,
    "decorationMidcolor" : 13,
    "decorationSidescolor" : 13,
    "animation" :  1,
    "lastNum" :  1
    }

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

function renderRandom() {
  var legscolor = Math.floor(Math.random() * 89) + 1
  $('#dnabody').html(legscolor);
  legsColor(colors[legscolor], legscolor)

  var faceChestColor = Math.floor(Math.random() * 89) + 1
  $('#dnamouth').html(faceAndChestColor)
  faceAndChestColor(colors[faceChestColor],faceChestColor)

  var eyesEarColor = Math.floor(Math.random() * 89) + 1
  $('#dnaeyes').html(eyesAndEarColor)
  eyesAndEarColor(colors[eyesEarColor], eyesEarColor)
  
  var chestColor = Math.floor(Math.random() * 89) + 1
  $('#dnaears').html(innerChestColor)
  innerChestColor(colors[chestColor], chestColor)

  var eShape = Math.floor(Math.random() * 8) + 1
  $('#dnaeyeshape').html(eyeShape)
  eyeShape(eShape)
   
  var dPattern = Math.floor(Math.random() * 2)
  $('#dnadecoration').html(dPattern)
  decorationVariation(dPattern)

  var dMidColor = Math.floor(Math.random() * 89) + 1
  $('#dnadecorationMid').html(dMidColor)
  decorationMidVariationColor(colors[dMidColor], dMidColor)
  
  var dSideColor = Math.floor(Math.random() * 89) + 1
  $('#dnadecorationSides').html(dSideColor)
  decorationSidesVariationColor(colors[dSideColor], dSideColor)

  var animation = Math.floor(Math.random() * 4) + 1
  $('#dnaanimation').html(animation)
  decorationAnimation(animation)
}

function renderDefault() {
  $('#dnabody').html(defaultDNA.headColor);
  legsColor(colors[defaultDNA.headColor], defaultDNA.headColor)
  
  $('#dnamouth').html(defaultDNA.mouthColor);
  faceAndChestColor(colors[defaultDNA.mouthColor],defaultDNA.mouthColor)
  
  $('#dnaeyes').html(defaultDNA.eyesColor);
  eyesAndEarColor(colors[defaultDNA.eyesColor], defaultDNA.eyesColor)
  
  $('#dnaears').html(defaultDNA.earsColor);
  innerChestColor(colors[defaultDNA.earsColor], defaultDNA.earsColor)
  
  $('#dnaeyeshape').html(defaultDNA.eyeShape);
  eyeShape(defaultDNA.eyeShape)
   
  $('#dnadecoration').html(defaultDNA.decorationPattern)
   decorationVariation(defaultDNA.decorationPattern)
  
  $('#dnadecorationMid').html(defaultDNA.decorationMidcolor)
  decorationMidVariationColor(colors[defaultDNA.decorationMidcolor], defaultDNA.decorationMidcolor)
  
  $('#dnadecorationSides').html(defaultDNA.decorationSidescolor)
  decorationSidesVariationColor(colors[defaultDNA.decorationSidescolor], defaultDNA.decorationSidescolor)
  
  $('#dnaanimation').html(defaultDNA.animation)
  decorationAnimation(defaultDNA.animation)
  
  $('#dnaspecial').html(defaultDNA.lastNum)
}

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

    return parseInt(dna)
}


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

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

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

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

$('#eyeshape').change(() => {
  var shapeVal = $('#eyeshape').val()
  eyeShape(shapeVal)
})

$('#decoration').change(() => {
  var val = $('#decoration').val()
  decorationVariation(val)
})

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

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

$('#animation').change(() => {
  var val = $('#animation').val()
  decorationAnimation(val)
})

function getDNAValues() {
  var dna = []

  dna.push($('#dnamouth').html())
  dna.push($('#dnabody').html())
  dna.push($('#dnaears').html())
  dna.push($('#dnaeyes').html())
  dna.push($('#dnaeyeshape').html())
  dna.push($('#dnadecoration').html())
  dna.push($('#dnadecorationMid').html())
  dna.push($('#dnadecorationSides').html())
  dna.push($('#dnadanimation').html())
  dna.push($('#dnaspecial').html())
  //return getDna();
  return dna;
}

$('#defaultKitty').on('click', function() {
  renderDefault()
  console.log(defaultDNA.mouthColor)
  faceAndChestColor(colors[defaultDNA.mouthColor], defaultDNA.mouthColor)
})

$('#randomKitty').on('click', function() {
  renderRandom()
})

$('#createKitty').on('click', function() {
  if(initialDNA === getDna()) {
    $(this).attr("data-toggle", "modal")
    $(this).attr("data-target", "#createNewDialog")
    var myModal = document.getElementById('createNewDialog')
    var myInput = document.getElementById('createKitty')
    myModal.addEventListener('shown.bs.modal', function () {
      myInput.focus()
      $('#close-dialog').on('click', function() {
      })
    })
  } else {
    console.log("They are different")
  }
})

$('#createNewDialog').on('hidden.bs.modal', function (e) {
  $('#createKitty').attr("data-toggle", "")
  $('#createKitty').attr("data-target", "")
})

$('#defaultKitty').on('click', function() {
  console.log("Default kittie clicked")
})

$('#randomKitty').on('click', function() {
  console.log("Random kittie clicked")
})

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 legsColor(color,code) {
    $('.chest_left_paw').css('background', '#' + color)  //This changes the color of the cat
    $('.chest_right_paw').css('background', '#' + color)
    $('.chest_left_back_leg').css('background', '#' + color)
    $('.chest_right_back_leg').css('background', '#' + color)
    $('.tail').css('background', '#' + color)
    $('.pupil').css('background', '#' + color)
    $('#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 faceAndChestColor(color, code) {
    //Body front feet back feet Tail color
    console.log("color - "+color)
    $('.chest').css('background', '#' + color) //This changes the color of the cat
    $('.face').css('background', '#' + color)
    $('#headcode').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 innerChestColor(color, code) {
    $('.chest_inner').css('background', '#' + color) //This changes the color of the cat
    $('#innerchestcode').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 eyesAndEarColor(color, code) {
    $('.eye').css('background', '#' + color)
    $('.ear').css('background', '#' + color) //This changes the color of the cat
    $('#eyesearscode').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 eyeShape(shape, code) {
    $('.eye-left').css('border-radius', '#' +shape)
    console.log("border radius" +shape)
    $('.eye-right').css('border-radius', '#' +shape)
    $('#headcode').html('code: '+code) //This updates text of the badge next to the slider
    $('#dnaeyeshape').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 eyeShape(shape) {
    const choice = parseInt(shape)
    $('#dnaeyeshape').html(shape)
    $('#eyeShapeCode').html('code ' +shape)
    switch (choice) {
        case 1:
            normalEyes()
            $('#eyeName').html('Basic')
            break
        case 2:
            normalEyes()
            lookUpEyes()
            $('eyeName').html('Lookup')
            break
        case 3:
            normalEyes()
            lookDownEyes()
            $('eyeName').html('LookDown')
            break
        case 4:
            lookRightEyes()
            $('eyeName').html('LookRight')
            break
        case 5:
            lookLeftEyes()
            $('eyeName').html('LookLeft')
            break
        default:
            break
    }
}

function decorationVariation(num) {
    var choice = parseInt(num)
    $('#dnadecoration').html(num)
    $('#decorationCode').html('code ' +num)
    switch (choice) {
        case 1:
            $('#decorationName').html('Basic')
            normaldecoration()
            break
        case 2:
            $('#decorationName').html('FatMidHair')
            fatMidDot()
            break
        default:
            break
    }
}

function decorationAnimation(val) {
    var choice = parseInt(val)
    $('#animationId').html(choice)
    $('#dnaanimation').html(choice)
    switch(choice) {
        case 1:
            noAnimation()
            movingHead()
            break
        case 2:
            noAnimation()
            raisedEars()
        default:
            break
    }
}

function noAnimation() {
    $('.face').removeClass("movingHead");
    $('.ear').removeClass("changinColor");
}

function movingHead() {
 $('.face').addClass("movingHead"); 
}

function raisedEars() {
    $('.ear').addClass("changinColor");
}

function decorationMidVariationColor(color, code) {
    $('#dnadecorationMid').html(code)
    $('.mid_head_dot').css('background-color', '#' + color)
    $('#decorationMidId').html(code)
}

function decorationSidesVariationColor(color, code) {
    $('#dnadecorationSides').html(code)
    $('#decorationSidesId').html(code)
    $('.left_head_dot').css('background-color', '#' + color)
    $('.right_head_dot').css('background-color', '#' + color)
}

async function normalEyes() {
    await $('.pupil-left').css('top', '-7px')
    await $('.pupil-right').css('top', '-7px')
    await $('.pupil-left').css('left', '-7px')
    await $('.pupil-right').css('left', '-7px')
}

async function lookUpEyes() {
    await $('.pupil-left').css('top', '-11px')
    await $('.pupil-right').css('top', '-11px')
}

async function lookDownEyes() {
    await $('.pupil-left').css('top', '-3px')
    await $('.pupil-right').css('top', '-3px')
}

async function lookRightEyes() {
    await $('.pupil-left').css('left', '-11px')
    await $('.pupil-right').css('left', '-11px')
}

async function lookLeftEyes() {
    await $('.pupil-left').css('left', '-3px')
    await $('.pupil-right').css('left', '-3px')
}

async function normaldecoration() {
    $('.mid_head_dot').css({ "transform": "rotate(0deg)", "height": "33px", "width": "10px", "top": "6px", "border-radius": "0 0 50% 50%" })
    $('.left_head_dot').css({ "transform": "rotate(0deg)", "height": "26px", "width": "10px", "top": "0px", "border-radius": "50% 0 50% 50%" })
    $('.right_head_dot').css({ "transform": "rotate(0deg)", "height": "26px", "width": "10px", "top": "0px", "border-radius": "0 50% 50% 50%" })
}

async function fatMidDot() {
    $('.mid_head_dot').css({ "transform": "rotate(0deg)", "height": "33px", "width": "12px", "top": "6px", "border-radius": "0 0 50% 50%" })
    $('.left_head_dot').css({ "transform": "rotate(10deg)", "height": "26px", "width": "10px", "top": "0px", "border-radius": "50% 0 50% 50%" })
    $('.right_head_dot').css({ "transform": "rotate(-10deg)", "height": "26px", "width": "10px", "top": "0px", "border-radius": "0 50% 50% 50%" })
}


```![Screen Shot 2021-06-27 at 2.57.33 PM|690x410](upload://1TFX68HR0uxKTEbhC8wXj2xK1OH.png)
2 Likes
#26

Tabs and Buttons done,
but I still have to work with the default kitty since I cant have my default cat when I press default button, only some of the properties go back to default others do not.
Anyway here is the result and the codes:
colorstabwithbuttons
attributeswithbuttons

index.html

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

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

        <div class="cat">

            <div id="head" class="ears">
                <div class="ear left_ear"> 
                    <div class="ear left_inside"></div>
                </div>
                    <div class="ear right_ear"> 
                <div class="ear right_inside"></div>
                </div>
            </div>
            
            <div id="body">

                <div id="face" 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 id="midDot" class="cat__head-dots">
                            <div id="leftDot" class="cat__head-dots_first"></div>
                            <div id="rightDot" class="cat__head-dots_second"></div>
                        </div>

                <div id="nasal" class="nose"></div>
                <div class="mouth_right"></div>
                <div class="mouth_left"></div>
                <div id="whiskerers" class="whiskers">
                    <div class="whisker_left1"></div>
                    <div class="whisker_left2"></div>
                    <div class="whisker_left3"></div>
                    <div class="whisker_left4"></div>
                    <div class="whisker_left5"></div>
                    <div class="whisker_right1"></div>
                    <div class="whisker_right2"></div>
                    <div class="whisker_right3"></div>
                    <div class="whisker_right4"></div>
                    <div class="whisker_right5"></div>                
                </div>
                <div id="lips" class="chin"></div>
                <div class = "belly">
                    <div class="belly_2">
                    </div>
                </div>
                <div class="foot_left">
                </div>
                <div class="foot_right">
                </div>
            </div>
            <div class="body_2">
                <div id="tails" class="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">
    <button id="btnColorsTab" type="button" class="btn btn-dark">Colors</button>
    <button id="btnAttributesTab" type="button" class="btn btn-dark">Attributes</button>

        <div id="headAndBody" 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="tummyAndBack" class="form-group">
        <label for="formControlRange"><b>Tummy and Back</b><span class="badge badge-dark ml-2" id="tummycode"></span></label>
        <input type="range" min="10" max="98" class="form-control-range" id="tummycolor">
    </div>

    <div id="earsss" 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 id="mouthAndTail" class="form-group">
        <label for="formControlRange"><b>Mouth and Tail</b><span class="badge badge-dark ml-2" id="mouthTailcode"></span></label>
        <input type="range" min="10" max="98" class="form-control-range" id="mouthTailcolor">
    </div>

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

    <div id="sideShade" class="form-group">
        <label for="formControlRange"><b>Side Shade Colors</b><span class="badge badge-dark ml-2" id="secondCombination"></span></label>
        <input type="range" min="10" max="98" class="form-control-range" id="sideColors">
    
    </div>

    <!-- Cattributes -->
        
    <div id="eyesss" class="form-group">
        <label for="formControlRange"><b>Eyes shape</b><span class="badge badge-dark ml-2" id="eyeName"></span></label>
        <input type="range" min="1" max="5" class="form-control-range" id="eyeshape">
    </div>

    <div id="decoration" class="form-group">
        <label for="formControlRange"><b>Decorative pattern</b><span class="badge badge-dark ml-2" id="decorativeName"></span></label>
        <input type="range" min="1" max="5" class="form-control-range" id="decorativeShape">
    </div>

    <div id="animationss" class="form-group">
        <label for="formControlRange"><b>Animation</b><span class="badge badge-dark ml-2" id="animation"></span></label>
        <input type="range" min="1" max="8" class="form-control-range" id="animationChange">
    </div>
       <div class="col-lg-7"> </div>
                <button id="random" type="button" class="btn btn-dark">Random Kitty Cat</button>
                <button id="default" type="button" class="btn btn-dark">Default Kitty Cat</button>
                <button type="button" class="btn btn-dark">Create a Kitty Cat</button>
        
        
    </div>
    </div>
    
    </div>
    
    <br>

</div>
</div>

</div>
<footer align="left">
<p>Ishoboy Kitty Factory 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" : 0,
    //"mouthTailcolor" : 10,
    //"tummycolor" : 0,
    //Cattributes
    "eyesShape" : 1,
    "decorationPattern" : 1,
    "decorationMidcolor" : 13,
    "decorationSidescolor" : 13,
    "animation" :  8,
    "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)
   $('#dnadanimation').html(defaultDNA.animation)
   $('#dnaspecial').html(defaultDNA.lastNum)

  renderCat(defaultDNA)
});

function defaultCat(){
  renderCat(defaultDNA)
}

function randomDNA(){
  var dnaStr = string(Math.floor(Math.random()*1E16))
  //Colors
}

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)

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

    mouthTailColor(colors[dna.mouthTailcolor],dna.mouthTailcolor)
    $('#mouthTailcolor').val(dna.mouthTailcolor)

    eyesShape(shape[dna.eyesShape],dna.eyesShape)
    $('#eyeshape').val(dna.eyesShape)

    decorationPattern(pattern[dna.decorationPattern],dna.decorationPattern)
    $('#decorativeShape').val(dna.decorationPattern)

    decorationMidcolor(colors[dna.decorationMidcolor],dna.decorationMidcolor)
    $('#midColors').val(dna.decorationMidcolor)
    
    decorationSidescolor(colors[dna.decorationSidescolor],dna.decorationSidescolor)
    $('#sideColors').val(dna.decorationSidescolor)

    animatioon(dna.dnadanimation)
    $('#animationChange').val(dna.dnadanimation)

    $("#eyesss").hide();
    $("#decoration").hide();
    $("#animationss").hide();
}

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

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

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

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

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

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

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

$('#decorativeShape').change(() => {
  var pattern = parseInt($('#decorativeShape').val())
  decorationVariation(pattern)
})

//animation
$('#animationChange').change(() => {
  var animationVal = parseInt($('#animationChange').val())
  animatioon(animationVal)
})

$('#btnColorsTab').click(()=>{
  $("#headAndBody").show()
  $("#tummyAndBack").show()
  $("#earsssGroup").show()
  $("#mouthAndTail").show()
  $("#middleShade").show()
  $("#sideShade").show()

  $("#eyesss").hide();
  $("#decoration").hide();
  $("#animationss").hide();
})

$('#btnAttributesTab').click(()=>{
  $("#eyesss").show();
  $("#decoration").show();
  $("#animationss").show();

  $("#headAndBody").hide()
  $("#tummyAndBack").hide()
  $("#earsssGroup").hide()
  $("#mouthAndTail").hide()
  $("#middleShade").hide()
  $("#sideShade").hide()
})

//Random Kitty
$('#random').click(() => {
  var bodyColorRandom = Math.floor(Math.random() * 88) + 10;
  headColor(colors[bodyColorRandom],bodyColorRandom)
  $("#bodycolor").val(bodyColorRandom)

  var tummyColorRandom = Math.floor(Math.random() * 88) + 10;
  tummyColor(colors[tummyColorRandom],tummyColorRandom)
  $("#tummycolor").val(tummyColorRandom)

  var earsColorRandom = Math.floor(Math.random() * 88) + 10;
  earsColor(colors[earsColorRandom],earsColorRandom)
  $("#earscolor").val(earsColorRandom)

  var mouthTailColorRandom = Math.floor(Math.random() * 88) + 10;
mouthTailColor(colors[mouthTailColorRandom],mouthTailColorRandom)
  $("#mouthTailcolor").val(mouthTailColorRandom)

  var eyeShapeRandom = Math.floor(Math.random() * 5) + 1;
  eyeVariation(eyeShapeRandom)
  $("#eyeshape").val(eyeShapeRandom)

  var decorationRandom = Math.floor(Math.random() * 5) + 1;
  decorationVariation(decorationRandom)
  $("#decorativeShape").val(decorationRandom)

  var hairMidColor = Math.floor(Math.random() * 88) + 10;
  midColorCombinations(colors[hairMidColor],hairMidColor)
  $("#midColors").val(hairMidColor)

  var hairSideColor = Math.floor(Math.random() * 88) + 10;
  sideColorCombination(colors[hairSideColor],hairSideColor)
  $("#sideColors").val(hairSideColor)

  var randomAnimation = Math.floor(Math.random() * 8) + 1;
  animatioon(randomAnimation)
  $("#animationChange").val(randomAnimation)
})

//Default Kitty
$('#default').click(() => {
   
    renderCat(defaultDNA)
})

Thanks I learned a lot :slight_smile: :smiley:

#27

hey @Ishoboy

This is about the names. Please check that the defaultDna property names you are passing match with original object. For example earsColor you are calliing it as earscolor with that lowercase “c”

#28

Hey Kenn!

Thank you for pointing that typo, I didn’t spot it. :smiley:
With your help I know already fix the problem of the ears, the remaining issues are the decorations and its colors and the animations, currently right now I’m still finding ways to bring them back to default when I press the default button. :slight_smile: :smiley:
anyway thanks again for your help, I really appreciate it :slight_smile: