Assignment - Buttons

tutatenso · October 19, 2022, 11:33am

//Randomize Function
$("#random").click(() => {
var bodycolor = Math.floor(Math.random() * 89) + 10;
headColor(colors[bodycolor], bodycolor);
$("#bodycolor").val(bodycolor);
var mouthcolor = Math.floor(Math.random() * 89) + 10;
mouthColor(colors[mouthcolor], mouthcolor);
$("#mouthcolor").val(mouthcolor);
var eyescolor = Math.floor(Math.random() * 89) + 10;
eyesColor(colors[eyescolor], eyescolor);
$("#eyescolor").val(eyescolor);
var earscolor = Math.floor(Math.random() * 89) + 10;
earsColor(colors[earscolor], earscolor);
$("#earscolor").val(earscolor);
var eyevar = Math.floor(Math.random() * (7 - 1 + 1) + 1);
eyeVariation(eyevar);
$("#eyeshape").val(eyevar);
var anim = Math.floor(Math.random() * (7 - 1 + 1) + 1);
animationsPlayer(anim);
$("#animation").val(anim);
});

// default kitty reset
$("#reset").click(() => {
renderCat(defaultDNA);
});

versus · January 19, 2023, 11:47am

Index.html

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

  <link rel="stylesheet" href="assets/css/mystyle.css">
  <link rel="stylesheet" href="assets/css/cats.css">
  <link rel="stylesheet" href="assets/css/colors.css">
  <link rel="stylesheet" href="assets/css/factory.css">
  <link rel="stylesheet" href="assets/css/frontend.css">
  <link rel="stylesheet" href="assets/css/animation.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">
                <!-- Nav tabs -->
                <ul class="nav nav-tabs nav-tabs__title" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link active" data-toggle="tab" href="#home">Colors</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-toggle="tab" href="#menu1">Attributes</a>
                    </li>
                </ul>

                <!-- Tab panes -->
                <div class="tab-content">
                    <div id="home" class="container tab-pane active"><br>
                        <!-- Cat colors -->
                        <div id="catColors">
                            <div class="form-group">
                                <label for="formControlRange"><b>Head and body</b><span class="badge badge-dark ml-2" id="headcode"></span></label>
                                <input type="range" min="10" max="98" class="form-control-range" id="bodycolor">
                            </div>
                        </div>
                        <!-- Mouth colors -->
                        <div id="mouthColors">
                            <div class="form-group">
                                <label for="formControlRange"><b>Mouth | Belly | Tail</b><span class="badge badge-dark ml-2" id="mouthcode"></span></label>
                                <input type="range" min="10" max="98" class="form-control-range" id="mouthcolor">
                            </div>
                        </div>
                        <!-- Eyes colors -->
                        <div id="eyesColors">
                            <div class="form-group">
                                <label for="formControlRange"><b>Eyes</b><span class="badge badge-dark ml-2" id="eyescode"></span></label>
                                <input type="range" min="10" max="98" class="form-control-range" id="eyescolor">
                            </div>
                        </div>
                        <!-- Ears colors -->
                        <div id="earsColors">
                            <div class="form-group">
                                <label for="formControlRange"><b>Ears | Paw</b><span class="badge badge-dark ml-2" id="earscode"></span></label>
                                <input type="range" min="10" max="98" class="form-control-range" id="earscolor">
                            </div>
                        </div>
                    </div>
                    <div id="menu1" class="container tab-pane fade"><br>
                        <!-- Ears shape -->
                        <div id="eyesShape">
                            <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>
                        <!-- Decoration Pattern -->
                        <div id="decorations">
                            <div class="form-group">
                                <label for="formControlRange"><b>Decoration Pattern</b><span class="badge badge-dark ml-2" id="decorationName"></span></label>
                                <input type="range" min="1" max="7" class="form-control-range" id="decoration">
                            </div>
                        </div>
                        <!-- Decoration Middle Colors -->
                        <div id="decorationsMidColors">
                            <div class="form-group">
                                <label for="formControlRange"><b>Decoration Colors - Middle</b><span class="badge badge-dark ml-2" id="decorationMidName"></span></label>
                                <input type="range" min="1" max="98" class="form-control-range" id="decorationMid">
                            </div>
                        </div>
                        <!-- Decoration Side Colors -->
                        <div id="decorationsSideColors">
                            <div class="form-group">
                                <label for="formControlRange"><b>Decoration Colors - Side</b><span class="badge badge-dark ml-2" id="decorationSideName"></span></label>
                                <input type="range" min="1" max="98" class="form-control-range" id="decorationSide">
                            </div>
                        </div>
                        <!-- Animations -->
                        <div id="animationCat">
                            <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="8" class="form-control-range" id="animation">
                            </div>
                        </div>
                    </div>
                </div>

                <div class="cattributes__actions">
                    <button type="button" class="btn btn-outline-primary" onclick="random()">Random</button>
                    <button type="button" class="btn btn-outline-secondary" onclick="reset()">Default</button>
                    <button type="button" class="btn btn-outline-success" onclick="create()">Create</button>
                </div>


            </div>

            </div>
            <br>

        </div>



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

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

</html>

CatFactory.js


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

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

//This function code needs to modified so that it works with Your cat code.
function headColor(color,code) {
    $('.cat__head, .cat__chest').css('background', '#' + color)  //This changes the color of the cat
    $('#headcode').html('code: '+code) //This updates text of the badge next to the slider
    $('#dnabody').html(code) //This updates the body color part of the DNA that is displayed below the cat
}
function mouthColor(color,code) {
    $('.cat__mouth-contour, .cat__chest_inner, .cat__tail').css('background', '#' + color)  //This changes the color of the cat
    $('#mouthcode').html('code: '+code) //This updates text of the badge next to the slider
    $('#dnamouth').html(code) //This updates the body color part of the DNA that is displayed below the cat
}
function eyesColor(color,code) {
    $('.cat__eye .pupil-left, .cat__eye .pupil-right').css('background', '#' + color)  
    $('#eyescode').html('code: '+code)
    $('#dnaeyes').html(code) 
}
function earsColor(color,code) {
    $('.cat__ear .cat__ear--left, .cat__ear .cat__ear--right, .cat__paw-left, .cat__paw-right').css('background', '#' + color)  
    $('#earscode').html('code: '+code) 
    $('#dnaears').html(code) 
}
function decorationMidColor(color,code) {
    $('#midDot').css('background', '#' + color) 
    $('#decorationMidName').html('code: '+code) 
    $('#dnadecorationMid').html(code) 
}
function decorationSideColor(color,code) {
    $('#midDot #leftDot, #midDot #rightDot').css('background', '#' + color)  
    $('#decorationSideName').html('code: '+code) 
    $('#dnadecorationSides').html(code) 
}


//###################################################
//Functions below will be used later on in the project
//###################################################
function eyeVariation(num) {
    $('#eyeshape').val(num)
    $('#dnashape').html(num)
    switch (num) {
        case 1:
            normalEyes()
            $('#eyeName').html('Basic')
            break
        case 2:
            normalEyes()
            $('#eyeName').html('Chill')
            eyesType1()
            break
        case 3:
            normalEyes()
            $('#eyeName').html('Up')
            eyesType2()
            break
    }
}

function decorationVariation(num) {
    $('#dnadecoration').html(num)
    $('#decoration').val(num)
    switch (num) {
        case 1:
            $('#decorationName').html('Basic')
            normaldecoration()
            break
        case 2:
            $('#decorationName').html('Cool')
            normaldecoration()
            cooldecoration()
            break
        case 3:
            $('#decorationName').html('Relax')
            normaldecoration()
            relaxdecoration()
            break
        case 4:
            $('#decorationName').html('Thin')
            normaldecoration()
            thindecoration()
            break
        case 5:
            $('#decorationName').html('Bold')
            normaldecoration()
            bolddecoration()
            break  
        case 6:
            $('#decorationName').html('Spring Break')
            normaldecoration()
            springBreakecoration()
            break    
    }
}
function animationVariation(num) {
    $('#dnaanimation').html(num)
    $('#animation').val(num)

    switch (num) {
        case 1:
            $('#animationName').html('Basic')
            resetAnimations()
            break
        case 2:
            $('#animationName').html('Hello')
            resetAnimations()
            Hello()
            break
        case 3:
            $('#animationName').html('Ears')
            resetAnimations()
            moveEars()
            break
        case 4:
            $('#animationName').html('Nose')
            resetAnimations()
            moveNose()
            break
        case 5:
            $('#animationName').html('Surprised')
            resetAnimations()
            surprised()
            break  
        case 6:
            $('#animationName').html('Smile')
            resetAnimations()
            smiling()
            break   
        case 7:
            $('#animationName').html('Tail')
            resetAnimations()
            movingTail()
            break  
        case 8:
            $('#animationName').html('Fat')
            resetAnimations()
            fat()
            break    
    }
}

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

async function normaldecoration() {
    //Remove all style from other decorations
    //In this way we can also use normalDecoration() to reset the decoration style
    $('.cat__head-dots').css({ "transform": "rotate(0deg)", "height": "48px", "width": "14px", "top": "1px", "border-radius": "0 0 50% 50%" })
    $('.cat__head-dots_first').css({ "transform": "rotate(0deg)", "height": "35px", "width": "14px", "top": "1px", "border-radius": "50% 0 50% 50%", "left": "-20px" })
    $('.cat__head-dots_second').css({ "transform": "rotate(0deg)", "height": "35px", "width": "14px", "top": "1px", "border-radius": "0 50% 50% 50%", "left": "20px" })
}
function cooldecoration() {
    //Remove all style from other decorations
    //In this way we can also use normalDecoration() to reset the decoration style
    $('.cat__head-dots_first').css( "transform", "rotate(15deg)")
    $('.cat__head-dots_second').css("transform", "rotate(-15deg)")
}
function relaxdecoration() {
    //Remove all style from other decorations
    //In this way we can also use normalDecoration() to reset the decoration style
    $('.cat__head-dots_first').css({ "transform": "rotate(40deg)", "height": "45px", "width": "14px", "top": "1px", "border-radius": "50% 0 50% 50%", "left": "-35px" })
    $('.cat__head-dots_second').css({ "transform": "rotate(-40deg)", "height": "45px", "width": "14px", "top": "1px", "border-radius": "0 50% 50% 50%", "left": "35px" })
}
function thindecoration() {
    //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": "75px", "width": "8px", "top": "1px", "border-radius": "0 0 50% 50%" })
    $('.cat__head-dots_first').css({ "transform": "rotate(40deg)", "height": "75px", "width": "8px", "top": "1px", "border-radius": "100% 0 100% 0%", "left": "-44px" })
    $('.cat__head-dots_second').css({ "transform": "rotate(-40deg)", "height": "75px", "width": "8px", "top": "1px", "border-radius": "0 100% 0% 100%", "left": "44px" })
}
function bolddecoration() {
    //Remove all style from other decorations
    //In this way we can also use normalDecoration() to reset the decoration style
    $('.cat__head-dots').css({ "height": "41px", "width": "31px", "top": "1px", "border-radius": "50% 0 50% 0%" })
    $('.cat__head-dots_first').css( {"transform": "rotate(15deg)", "width": "33px", "left": "-39px" })
    $('.cat__head-dots_second').css({"transform": "rotate(-15deg)", "width": "33px", "left": "39px", "top": "8px" })
}
function springBreakecoration() {
    //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": "49px", "width": "47px", "top": "1px", "border-radius": "50% 0 50% 0%" })
    $('.cat__head-dots_first').css( {"transform": "rotate(13deg)", "width": "38px", "height": "53px", "top": "3px", "left": "-39px", "border-radius": "50% 0 50% 0%" })
    $('.cat__head-dots_second').css({"transform": "rotate(10deg)", "width": "43px", "height": "42px", "top": "17px", "left": "45px", "border-radius": "0px 100% 50%" })
}

function resetAnimations() {
    $('.cat__head').removeClass("movingHead")
    $('.cat__ear--left').removeClass("movingEars")
    $('.cat__nose').removeClass("movingNose")
    $('.cat__mouth-left').removeClass("surprising")
    $('.cat__mouth-right').css("display", "block")
    $('.cat__eye .pupil-left, .cat__eye .pupil-right').removeClass("surprising")
    $('.cat__mouth-left, .cat__mouth-right').css({"transform": "rotate(-45deg)", "top": "120"})
    $('.cat__mouth-left').css("left", "88px")
    $('.cat__mouth-right').css("left", "108px")
    $('.cat__tail').removeClass("movingTail")
    $('.cat__chest').removeClass("fatting")
}
function Hello() {
    $('.cat__head').addClass(" movingHead ")
}
function moveEars() {
    $('.cat__ear--left').addClass(" movingEars ")
}
function moveNose() {
    $('.cat__nose').addClass(" movingNose ")
}
function surprised() {    
    $('.cat__eye .pupil-left, .cat__eye .pupil-right').addClass(" surprising ")
    $('.cat__mouth-right').css("transform", "rotate(-131deg)")
    $('.cat__mouth-left').css("transform", "rotate(45deg)")
    $('.cat__mouth-left, .cat__mouth-right').css({"left": "100px", "top": "134px"})
}
function smiling() {
    $('.cat__mouth-left').addClass(" surprising ")
    $('.cat__mouth-right').css("display", "none")
    $('.cat__tail').addClass(" movingTail ")
}
function movingTail() {
    $('.cat__tail').addClass(" movingTail ")
}
function fat() {
    $('.cat__chest').addClass(" fatting ")
}

function random() {
    const randomDna = {
        "headcolor" : getRndInteger(10, 98),
        "mouthColor" : getRndInteger(10, 98),
        "eyesColor" : getRndInteger(10, 98),
        "earsColor" : getRndInteger(10, 98),
        "eyesShape" : getRndInteger(1, 7),
        "decorationPattern" : getRndInteger(1, 7),
        "decorationMidcolor" : getRndInteger(10, 98),
        "decorationSidescolor" : getRndInteger(10, 98),
        "animation" :  getRndInteger(1, 8),
        "lastNum" :  getRndInteger(0, 100)
    }
    renderCat(randomDna)
}
function reset() {
    renderCat(defaultDNA)
}
function create() {
    console.log('let\'s go create new kittie')
}

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

CatSetting.js


var colors = Object.values(allColors())

var defaultDNA = {
    "headcolor" : 10,
    "mouthColor" : 13,
    "eyesColor" : 96,
    "earsColor" : 10,
    //Cattributes
    "eyesShape" : 2,
    "decorationPattern" : 1,
    "decorationMidcolor" : 42,
    "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){
    console.log({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(defaultDNA.eyesShape)
    decorationVariation(dna.decorationPattern)
    decorationMidColor(colors[dna.decorationMidcolor], dna.decorationMidcolor)
    decorationSideColor(colors[dna.decorationSidescolor], dna.decorationSidescolor)
    animationVariation(dna.animation)

}

// Changing cat colors
$('#bodycolor').change(()=>{
    var colorVal = $('#bodycolor').val()
    headColor(colors[colorVal],colorVal)
})
// Changing mouth colors
$('#mouthcolor').change(()=>{
    var colorVal = $('#mouthcolor').val()
    mouthColor(colors[colorVal],colorVal)
})
// Changing eyes colors
$('#eyescolor').change(()=>{
    var colorVal = $('#eyescolor').val()
    eyesColor(colors[colorVal],colorVal)
})
// Changing ears colors
$('#earscolor').change(()=>{
    var colorVal = $('#earscolor').val()
    earsColor(colors[colorVal],colorVal)
})
// Changing eyes shape
$('#eyeshape').change(()=>{
    var shape = parseInt($('#eyeshape').val())
    eyeVariation(shape)
})
// Changing decoration pattern
$('#decoration').change(()=>{
    var deco = parseInt($('#decoration').val())
    decorationVariation(deco)
})
// Changing decoration middle
$('#decorationMid').change(()=>{
    var deco = parseInt($('#decorationMid').val())
    decorationMidColor(colors[deco], deco)
})
// Changing decoration side
$('#decorationSide').change(()=>{
    var deco = parseInt($('#decorationSide').val())
    decorationSideColor(colors[deco], deco)
})
// Changing animation
$('#animation').change(()=>{
    var animationVal = parseInt($('#animation').val())
    animationVariation(animationVal)
})

Tomahawk · January 23, 2023, 2:58pm

I didn’t separate it since I like it more without it. Rest of the code is here:

index.html

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

  <link rel="stylesheet" href="assets/css/mystyle.css">
  <link rel="stylesheet" href="assets/css/cats.css">
  <link rel="stylesheet" href="assets/css/colors.css">
  <link rel="stylesheet" href="assets/css/factory.css">
  <link rel="stylesheet" href="assets/css/frontend.css">
  <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">Kitties-Factory</h1>
        <p class="c-white">Create your custom Kitty</p>
    </div>
        <div class="row">
            <div class="col-lg-4 catBox m-2 light-b-shadow">
                <div class="cat">
                    <div class="ears">
                        <div class="ear left_ear">
                            <div class="inner_ear left_inner_ear"></div>
                        </div>
                        <div class="ear right_ear">
                            <div class="inner_ear left_inner_ear"></div>
                        </div>         
                    </div>
                    <div class="face">
                        <div class="eyes">
                            <span class="eye">
                                <div class="pupils">
                                    <div class="reflection1"></div>
                                    <div class="reflection2"></div>
                                </div>
                            </span>
                            <span class="eye">
                                <div class="pupils">
                                    <div class="reflection1"></div>
                                    <div class="reflection2"></div>
                                </div>
                            </span>
                        </div>
                        <div class="nose"></div>
                        <div class="mouth">
                            <div class="teeth left_teeth"></div>
                            <div class="teeth right_teeth"></div>
                            <div class="tongue"></div>
                        </div>
                        <div class="spots">
                            <div class="spot spot1"></div>
                            <div class="spot spot2"></div>
                            <div class="spot spot3"></div>
                        </div>
                        <div class="whiskers">
                            <div class="whisker_left whisker1"></div>
                            <div class="whisker_left whisker2"></div>
                            <div class="whisker_left whisker3"></div>
                            <div class="whisker_right whisker4"></div>
                            <div class="whisker_right whisker5"></div>
                            <div class="whisker_right whisker6"></div>
                        </div>
                    </div>   
                </div>
                <br>
                <div class="dnaDiv" id="catDNA">
                    <b>
                        DNA:
                        <!-- Colors -->
                         <span id="dnabody"></span>
                         <span id="dnateeth"></span>
                         <span id="dnaeyes"></span>
                         <span id="dnaears"></span>
                        
                         <!-- Cattributes -->
                         <span id="dnashape"></span>
                         <span id="dnadecoration"></span>
                         <span id="dnadecorationColor"></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 -->
                <div id="catColors">
                    <div class="form-group">
                        <label for="formControlRange"><b>Head</b><span class="badge badge-dark ml-2" id="headcode"></span></label>
                        <input type="range" min="10" max="98" class="form-control-range" id="bodycolor">
                    </div>
                    <div class="form-group">
                        <label for="formControlRange"><b>Teeth</b><span class="badge badge-dark ml-2" id="teethcode"></span></label>
                        <input type="range" min="10" max="98" class="form-control-range" id="teethcolor">
                    </div>
                    <div class="form-group">
                        <label for="formControlRange"><b>Eyes</b><span class="badge badge-dark ml-2" id="eyescode"></span></label>
                        <input type="range" min="10" max="98" class="form-control-range" id="eyescolor">
                    </div>
                    <div class="form-group">
                        <label for="formControlRange"><b>Ears</b><span class="badge badge-dark ml-2" id="earscode"></span></label>
                        <input type="range" min="10" max="98" class="form-control-range" id="earscolor">
                    </div>
                    <div 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="3" 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="decorationName"></span></label>
                        <input type="range" min="1" max="3" class="form-control-range" id="decoration">
                    </div>
                    <div class="form-group">
                        <label for="formControlRange"><b>Decoration color</b><span class="badge badge-dark ml-2" id="decorationColorCode"></span></label>
                        <input type="range" min="10" max="98" class="form-control-range" id="decorationcolor">
                    </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="4" class="form-control-range" id="animation">
                    </div>
            </div>

            <div class="buttons">
                    <button id="random" type="button" class="btn btn-primary">Random kitty</button>
                    <button id="default" type="button" class="btn btn-primary">Default</button>
                    <button id="create" type="button" class="btn btn-success">Create kitty!</button>

            </div>

            </div>
            <br>

        </div>



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

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

</html>

catFactory.js


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

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

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

function teethColor(color,code) {
    $('.teeth').css('border-color', '#' + color + ' transparent transparent transparent')  //This changes the color of the cat
    $('#teethcode').html('code: '+code) //This updates text of the badge next to the slider
    $('#dnateeth').html(code) //This updates the body color part of the DNA that is displayed below the cat
}

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

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

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



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

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

function decorationVariation(num) {
    $('#dnadecoration').html(num)
    switch (num) {
        case 1:
            $('#decorationName').html('Basic')
            normaldecoration()
            break
        case 2:
            $('#decorationName').html('One')
            decorationType2()
            break
        case 3:
            $('#decorationName').html('None')
            decorationType3()
            break
    }
}

function animation(num) {
    $('#dnaanimation').html(num)
    switch (num) {
        case 1:
            $('#animationName').html('Moving head')
            animationType1()
            break
        case 2:
            $('#animationName').html('Moving eyes')
            animationType2()
            break
        case 3:
            $('#animationName').html('Crazy')
            animationType3()
            break
        case 4:
            $('#animationName').html('None')
            resetAnimation()
            break
    }
}

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

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

async function eyesType2() {
    await $('.eyes').find('span').css('border-left', '8px solid')
}


async function normaldecoration() {
    //Remove all style from other decorations
    //In this way we can also use normalDecoration() to reset the decoration style
    $('.spot').css({ "width": "50px", "height": "15px", "border-radius": "40%", "background-color": "rgb(158, 146, 129)", "position": "absolute", "left": "76px", "Transform": "rotate(0deg)", "top": "-119px"})
    $('.spot2').css({ "width": "38px", "height": "13px", "top": "-102", "left": "83px", "Transform": "rotate(0deg)"})
    $('.spot3').css({ "width": "26px", "height": "11px", "top": "-87", "left": "90px", "Transform": "rotate(0deg)"})
}

async function decorationType2() {
    //Remove all style from other decorations
    //In this way we can also use normalDecoration() to reset the decoration style
    $('.spot').css({ "width": "50px", "height": "15px", "border-radius": "40%", "background-color": "rgb(158, 146, 129)", "position": "absolute", "left": "76px", "Transform": "rotate(90deg)", "top": "-105px"})
    $('.spot2').css({ "width": "0px", "height": "0px", "top": "-102", "left": "83px"})
    $('.spot3').css({ "width": "0px", "height": "0px", "top": "-87", "left": "90px"})
}

async function decorationType3() {
    //Remove all style from other decorations
    //In this way we can also use normalDecoration() to reset the decoration style
    $('.spot').css({ "width": "0px", "height": "0px", "border-radius": "40%", "background-color": "rgb(158, 146, 129)", "position": "absolute", "left": "76px", "Transform": "rotate(90deg)"})
    $('.spot2').css({ "width": "0px", "height": "0px", "top": "-102", "left": "83px"})
    $('.spot3').css({ "width": "0px", "height": "0px", "top": "-87", "left": "90px"})
}

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

function animationType2() {
    resetAnimation()
    $('.eye').addClass("movingEyes")
}

function animationType3() {
    resetAnimation()
    $('.eye').addClass("movingEyes")
    $('.face').addClass("movingHead")
}

function resetAnimation() {
    $('.face').removeClass('movingHead')
    $('.eye').removeClass('movingEyes')
}

$('#random').click(()=>{

    var randomDNA = {
        "headcolor" : Math.floor(Math.random() * 89) + 10,
        "teethColor" : Math.floor(Math.random() * 89) + 10,
        "eyesColor" : Math.floor(Math.random() * 89) + 10,
        "earsColor" : Math.floor(Math.random() * 89) + 10,
        //Cattributes
        "eyesShape" : Math.floor(Math.random() * 3) + 1,
        "decorationPattern" : Math.floor(Math.random() * 3) + 1,
        "decorationColor" : Math.floor(Math.random() * 89) + 10,
        // "decorationSidescolor" : 13,
        "animation" :  Math.floor(Math.random() * 4) + 1,
        // "lastNum" :  1
        }
    
        renderCat(randomDNA)
})

$("#default").click(()=>renderCat(defaultDNA))

// $("#create").on("click", createKitty())