For this assignment, we want you to add these elements:
Post your solutions below!
Buttons Done
Tabs Done
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/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">Bears-Factory</h1>
<p class="c-white">Create your custom Bear</p>
</div>
<div class="row">
<div class="col-lg-4 catBox m-3 light-b-shadow">
<div class="cat">
<div id="catEars" 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="catEyes" 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 id="whiskLeft" class="cat__whiskers-left"></div>
<div id="whiskRight" 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 id="pawRIGHT" class="cat__paw-right"></div>
<div id="pawRIGHTINNER" class="cat__paw-right_inner"></div>
<div class="cat__paw-leftLower"></div>
<div class="cat__paw-leftLower_inner"></div>
<div class="cat__paw-rightLower"></div>
<div class="cat__paw-rightLower_inner"></div>
<div id="tail" class="cat__tail"></div>
</div>
</div>
<br>
<div class="dnaDiv" id="catDNA">
<b>
DNA:
<!-- Colors -->
<span id="dnabody"></span>
<span id="dnamouth"></span>
<span id="dnaeyes"></span>
<span id="dnaears"></span>
<!-- Cattributes -->
<span id="dnashape"></span>
<span id="dnadecoration"></span>
<span id="dnadecorationMid"></span>
<span id="dnadecorationSides"></span>
<span id="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">
<button id="btnColorsTab" type="button" class="btn btn-dark">Colors</button>
<button id="btnAttributesTab" type="button" class="btn btn-dark">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, 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 id="eyesGroup" 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 id="earsGroup" 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 id="eyeShapeGroup" 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 id="decoGroup" class="form-group">
<label for="formControlRange"><b>Decoration Style</b><span class="badge badge-dark ml-2" id="decorationname"></span></label>
<input type="range" min="1" max="7" class="form-control-range" id="decorationstyle">
</div>
<div id="midDecoGroup" class="form-group">
<label for="formControlRange"><b>Decoration Center Color</b><span class="badge badge-dark ml-2" id="decorationMidCode"></span></label>
<input type="range" min="10" max="98" class="form-control-range" id="decMidColor">
</div>
<div id="sideDecoGroup" class="form-group">
<label for="formControlRange"><b>Decoration Sides Color</b><span class="badge badge-dark ml-2" id="decorationSidesCode"></span></label>
<input type="range" min="10" max="98" class="form-control-range" id="decSideColor">
</div>
<div id="animGroup" 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="7" class="form-control-range" id="animation">
</div>
</div>
<div class="col-lg-7">
<button id="random" type="button" class="btn btn-dark">Randomize</button>
<button id="reset" type="button" class="btn btn-dark">Reset</button>
<button type="button" class="btn btn-dark">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>
var colors = Object.values(allColors())
var defaultDNA = {
"headColor" : 11,
"mouthColor" : 13,
"eyesColor" : 11,
"earsColor" : 18,
//Cattributes
"eyesShape" : 7,
"decorationPattern" : 4,
"decorationMidcolor" : 18,
"decorationSidescolor" : 18,
"animation" : 1,
"lastNum" : 1
}
// when page load
$( document ).ready(function() {
$('#dnabody').html(defaultDNA.headColor);
$('#dnamouth').html(defaultDNA.mouthColor);
$('#dnaeyes').html(defaultDNA.eyesColor);
$('#dnaears').html(defaultDNA.earsColor);
$('#dnashape').html(defaultDNA.eyesShape)
$('#dnadecoration').html(defaultDNA.decorationPattern)
$('#dnadecorationMid').html(defaultDNA.decorationMidcolor)
$('#dnadecorationSides').html(defaultDNA.decorationSidescolor)
$('#dnaanimation').html(defaultDNA.animation)
$('#dnaspecial').html(defaultDNA.lastNum)
renderCat(defaultDNA)
});
function getDna(){
var dna = ''
dna += $('#dnabody').html()
dna += $('#dnamouth').html()
dna += $('#dnaeyes').html()
dna += $('#dnaears').html()
dna += $('#dnashape').html()
dna += $('#dnadecoration').html()
dna += $('#dnadecorationMid').html()
dna += $('#dnadecorationSides').html()
dna += $('#dnaanimation').html()
dna += $('#dnaspecial').html()
return parseInt(dna)
}
function renderCat(dna){
headColor(colors[dna.headColor],dna.headColor)
$('#bodycolor').val(dna.headColor)
mouthColor(colors[dna.mouthColor],dna.mouthColor)
$('#mouthcolor').val(dna.mouthColor)
eyesColor(colors[dna.eyesColor],dna.eyesColor)
$('#eyescolor').val(dna.eyesColor)
earsColor(colors[dna.earsColor],dna.earsColor)
$('#earscolor').val(dna.earsColor)
eyeVariation(dna.eyesShape)
$('#eyeshape').val(dna.eyesShape)
decorationVariation(dna.decorationPattern)
$('#decorationstyle').val(dna.decorationPattern)
decorationMidColorVar([dna.decorationMidcolor],dna.decorationMidcolor)
$('#decMidColor').val(dna.decorationMidcolor)
decorationSidesColorVar([dna.decorationSidescolor],dna.decorationSidescolor)
$('#decSideColor').val(dna.decorationSidescolor)
animationsPlayer(dna.animation)
$('#animation').val(dna.animation)
$("#eyeShapeGroup").hide();
$("#decoGroup").hide();
$('#midDecoGroup').hide();
$('#sideDecoGroup').hide();
$("#animGroup").hide();
}
//Listeners for Buttons and Sliders!
// 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)
})
$('#decorationstyle').change(()=>{
var decostyle = parseInt($('#decorationstyle').val())
decorationVariation(decostyle)
})
$('#decMidColor').change(()=>{
var colorVal = $('#decMidColor').val()
decorationMidColorVar(colors[colorVal],colorVal)
})
$('#decSideColor').change(()=>{
var colorVal = $('#decSideColor').val()
decorationSidesColorVar(colors[colorVal],colorVal)
})
$('#animation').change(()=>{
var anim = parseInt($('#animation').val())
animationsPlayer(anim)
})
$('#btnColorsTab').click(()=>{
$("#headGroup").show()
$("#mouthGroup").show()
$("#eyesGroup").show()
$("#earsGroup").show()
$("#eyeShapeGroup").hide();
$("#decoGroup").hide();
$('#midDecoGroup').hide();
$('#sideDecoGroup').hide();
$("#animGroup").hide();
})
$('#btnAttributesTab').click(()=>{
$('#headGroup').hide();
$('#mouthgroup').hide();
$('#eyesGroup').hide();
$('#earsGroup').hide();
$('#eyeShapeGroup').show();
$('#decoGroup').show();
$('#midDecoGroup').show();
$('#sideDecoGroup').show();
$("#animGroup").show();
})
//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 decovar = Math.floor(Math.random() * (7 - 1 + 1) + 1);
decorationVariation(decovar)
$("#decorationstyle").val(decovar)
var decMidVar = Math.floor(Math.random() * 89) + 10;
decorationMidColorVar(colors[decMidVar],decMidVar)
$("#decMidColor").val(decMidVar)
var decSideVar = Math.floor(Math.random() * 89) + 10;
decorationSidesColorVar(colors[decSideVar],decSideVar)
$("#decSideColor").val(decSideVar)
var anim = Math.floor(Math.random() * (7 - 1 + 1) + 1);
animationsPlayer(anim)
$("#animation").val(anim)
})
$('#reset').click(()=>{
headColor(colors[defaultDNA.headColor],defaultDNA.headColor)
$("#bodycolor").val(defaultDNA.headColor)
mouthColor(colors[defaultDNA.mouthColor],defaultDNA.mouthColor)
$("#mouthcolor").val(defaultDNA.mouthColor)
eyesColor(colors[defaultDNA.eyesColor],defaultDNA.eyesColor)
$("#eyescolor").val(defaultDNA.eyesColor)
earsColor(colors[defaultDNA.earsColor],defaultDNA.earsColor)
$("#earscolor").val(defaultDNA.earsColor)
eyeVariation(defaultDNA.eyesShape)
$("#eyeshape").val(defaultDNA.eyesShape)
decorationVariation(defaultDNA.decorationPattern)
$("#decorationstyle").val(defaultDNA.decorationPattern)
decorationMidColorVar(colors[defaultDNA.decorationMidcolor],defaultDNA.decorationMidcolor)
$("#decMidColor").val(defaultDNA.decorationMidcolor)
decorationSidesColorVar(colors[defaultDNA.decorationSidescolor],defaultDNA.decorationSidescolor)
$("#decSideColor").val(defaultDNA.decorationSidescolor)
animationsPlayer(defaultDNA.animation)
$("#animation").val(defaultDNA.animation)
})
//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 be modified so that it works with Your cat code.
function headColor(color,code) {
$('.cat__head, .cat__chest').css('background', '#' + color) //This changes the color of head and body
$('#headcode').html('code: '+code) //This updates text of the badge next to the slider
$('#dnabody').html(code) //This updates the body color part of the DNA that is displayed below the cat
}
function mouthColor(color,code) {
$('.cat__mouth-contour, .cat__tail, .cat__chest_inner').css('background', '#' + color) //This changes the color of mouth
$('#mouthcode').html('code: '+code) //This updates text of the badge next to the slider
$('#dnamouth').html(code) //This updates the body color part of the DNA that is displayed below the cat
}
function eyesColor(color,code) {
$('.cat__eye--left, .cat__eye--right').css('background', '#' + color) //This changes the color of eyes
$('#eyescode').html('code: '+code) //This updates text of the badge next to the slider
$('#dnaeyes').html(code) //This updates the body color part of the DNA that is displayed below the cat
}
function earsColor(color,code) {
$('.cat__ear--left, .cat__ear--right, .cat__paw-left, .cat__paw-right, .cat__paw-leftLower, .cat__paw-rightLower').css('background', '#' + color) //This changes the color of eyes
$('#earscode').html('code: '+code) //This updates text of the badge next to the slider
$('#dnaears').html(code) //This updates the body color part of the DNA that is displayed below the cat
}
function decorationMidColorVar(color,code) {
$('.cat__head-dots').css('background', '#' + color) //This changes the color of Mid head decoration
$('#decorationMidCode').html('code: '+code) //This updates text of the badge next to the slider
$('#dnadecorationMid').html(code) //This updates the body color part of the DNA that is displayed below the cat
}
function decorationSidesColorVar(color,code) {
$('.cat__head-dots_first, .cat__head-dots_second').css('background', '#' + color) //This changes the color of Sides head decoration
$('#decorationSidesCode').html('code: '+code) //This updates text of the badge next to the slider
$('#dnadecorationSides').html(code) //This updates the body color part of the DNA that is displayed below the cat
}
//###################################################
//Functions below will be used later on in the project
//###################################################
//Variation functions
function eyeVariation(num) {
$('#dnashape').html(num)
switch (num) {
case 1:
normalEyes()
$('#eyename').html('Straight')
break
case 2:
normalEyes()
$('#eyename').html('Chill')
eyesType1()
break
case 3:
normalEyes()
$('#eyename').html('Happy')
eyesType2()
break
case 4:
normalEyes()
$('#eyename').html('Right')
eyesType3()
break
case 5:
normalEyes()
$('#eyename').html('Left')
eyesType4()
break
case 6:
normalEyes()
$('#eyename').html('Sad')
eyesType5()
break
case 7:
normalEyes()
$('#eyename').html('Huge')
setTimeout(eyesType6, 10);
break
}
}
function decorationVariation(decostyle) {
$('#dnadecoration').html(decostyle)
switch (decostyle) {
case 1:
$('#decorationname').html('Deco1')
normaldecoration()
break
case 2:
normaldecoration()
$('#decorationname').html('Deco2')
decostyle1()
break
case 3:
normaldecoration()
$('#decorationname').html('Deco3')
decostyle2()
break
case 4:
normaldecoration()
$('#decorationname').html('Deco4')
decostyle3()
break
case 5:
normaldecoration()
$('#decorationname').html('Deco5')
setTimeout(decostyle4, 10)
break
case 6:
normaldecoration()
$('#decorationname').html('Deco6')
setTimeout(decostyle5, 10)
break
case 7:
normaldecoration()
$('#decorationname').html('Deco7')
setTimeout(decostyle6, 10)
break
}
}
//AnimationSwitcher
function animationsPlayer(anim) {
$('#dnaanimation').html(anim)
switch (anim) {
case 1:
$('#animationName').html('Wobbely Head')
animationType1();
break
case 2:
$('#animationName').html('Side Looking')
animationType2();
break
case 3:
$('#animationName').html('Deco Twist')
animationType3();
break
case 4:
$('#animationName').html('Big Ears')
animationType4();
break
case 5:
$('#animationName').html('Wiggley Tail')
animationType5();
break
case 6:
$('#animationName').html('Whiskers Shake')
animationType6();
break
case 7:
$('#animationName').html('Winking')
animationType7();
break
}
}
function animationType1() {
resetAnimation();
$("#head").addClass("movingHead");
}
function animationType2() {
resetAnimation();
$("#catEyes").addClass("movingEyes");
}
function animationType3() {
resetAnimation();
$("#midDot").addClass("midDotSpin");
}
function animationType4() {
resetAnimation();
$("#catEars").addClass("earScale");
}
function animationType5() {
resetAnimation();
$("#tail").addClass("tailWig");
}
function animationType6() {
resetAnimation();
$("#whiskLeft, #whiskRight").addClass("whiskShake");
}
function animationType7() {
resetAnimation();
$("#pawRIGHT, #pawRIGHTINNER").addClass("sayHello");
}
function resetAnimation(){
$("#head").removeClass("movingHead");
$("#catEyes").removeClass("movingEyes");
$("#midDot").removeClass("midDotSpin");
$("#catEars").removeClass("earScale");
$("#tail").removeClass("tailWig");
$("#whiskLeft, #whiskRight").removeClass("whiskShake");
$("#pawRIGHT, #pawRIGHTINNER").removeClass("sayHello");
}
//EyeShape functions
async function normalEyes() {
await $('.cat__eye').find('span').css('border', 'none')
await $('.cat__eye').find('span').css('transform', 'scale(1)')
}
async function eyesType1() {
await $('.cat__eye').find('span').css('border-top', '10px solid')
}
async function eyesType2() {
await $('.cat__eye').find('span').css('border-bottom', '10px solid')
}
async function eyesType3() {
await $('.cat__eye').find('span').css('border-left', '10px solid')
}
async function eyesType4() {
await $('.cat__eye').find('span').css('border-right', '10px solid')
}
async function eyesType5() {
await $('.cat__eye').find('span').css('border-top', '20px solid')
}
async function eyesType6() {
await $('.cat__eye').find('span').css('transform', 'scale(1.3)')
}
//Deco Style functions
async function normaldecoration() {
//Remove all style from other decorations
//In this way we can also use normalDecoration() to reset the decoration style
await $('.cat__head-dots').css({ "transform": "rotate(0deg)", "height": "48px", "width": "14px", "top": "1px", "border-radius": "15% 15% 50% 50%" })
await $('.cat__head-dots_first').css({ "transform": "rotate(0deg)", "height": "35px", "width": "14px", "top": "1px", "border-radius": "50% 0 50% 50%" })
await $('.cat__head-dots_second').css({ "transform": "rotate(0deg)", "height": "35px", "width": "14px", "top": "1px", "border-radius": "0 50% 50% 50%" })
}
async function decostyle1() {
await $('.cat__head-dots').css({ "top": "6px", "border-radius": "30% 30% 50% 50%"})
await $('.cat__head-dots_first').css({ "transform": "rotate(30deg)", "height": "35px", "width": "14px", "top": "1px", "border-radius": "50% 0 50% 50%" })
await $('.cat__head-dots_second').css({ "transform": "rotate(-30deg)", "height": "35px", "width": "14px", "top": "1px", "border-radius": "50% 0 50% 50%" })
}
async function decostyle2() {
await $('.cat__head-dots').css({ "top": "6px", "border-radius": "30% 30% 50% 50%"})
await $('.cat__head-dots_first').css({ "transform": "rotate(30deg)", "height": "35px", "width": "14px", "top": "1px", "border-radius": "50% 0 50% 50%" })
await $('.cat__head-dots_second').css({ "transform": "rotate(-30deg)", "height": "35px", "width": "14px", "top": "1px", "border-radius": "50% 0 50% 50%" })
await $('.cat__head-dots').css({ "transform": "scale(0.3)"})
await $('.cat__head-dots').css({ "top": "-5"})
}
async function decostyle3() {
await $('.cat__head-dots').css({ "top": "6px", "border-radius": "30% 30% 50% 50%"})
await $('.cat__head-dots_first').css({ "transform": "rotate(30deg)", "height": "35px", "width": "14px", "top": "1px", "border-radius": "50% 0 50% 50%" })
await $('.cat__head-dots_second').css({ "transform": "rotate(-30deg)", "height": "35px", "width": "14px", "top": "1px", "border-radius": "50% 0 50% 50%" })
await $('.cat__head-dots').css({ "transform": "rotate(180deg)"})
await $('.cat__head-dots').css({ "top": "-5"})
}
async function decostyle4() {
await $('.cat__head-dots_first').css({"height": "60px", "width": "15px"})
await $('.cat__head-dots_second').css({"height": "60px", "width": "15px"})
}
async function decostyle5() {
await $('.cat__head-dots').css({ "height": "10px", "width": "5px"})
await $('.cat__head-dots_first').css({"height": "10px", "width": "5px"})
await $('.cat__head-dots_second').css({"height": "10px", "width": "5px"})
}
async function decostyle6() {
await $('.cat__head-dots').css({ "transform": "rotate(33deg)"})
await $('.cat__head-dots_first').css({"transform": "rotate(33deg)"})
await $('.cat__head-dots_second').css({"transform": "rotate(33deg)"})
}
Done finally -.-, this front end stuff is killing me, too much new stuff at once D:
really iwas just putitng piece of information that i got from internet, and stuff that was already built in the project, i suspect that there was waayy easier ways to get things done, but i feel uncomfortable with all these new enviroment and the new languages, i suck at learning new things so yes, im not using the tools that phillip expected us to use, except for the default button everything else is made by me using the info that i got form internet, and things look like they dont belong here but anyyways everything works fine, and i even put some little styling on the tabs and buttons and stuff nothing too fancy xp
The final part of the index code, where i created the tabs and the buttons, the rest of the index code in untouched, here is also the default dna button where i just used the function: renderCat(defaultDNA) thats the only thing that im proud of in this section D: at least i did this one thing right, i realize that i have to learn a lot of JS
<ul class="tabs">
<li data-tab-target="#colorId" class="active tab">Colors</li>
<li data-tab-target="#attributesId" class="tab">Cattributes</li>
</ul>
<div class="tab-content">
<div id="colorId" data-tab-content class="active">
<div class="form-group">
<label for="formControlRange"><b>Fur</b><span class="badge badge-dark ml-2" id="fur"></span></label>
<input type="range" min="0" max="98" class="form-control-range" id="bodycolorH">
</div>
<div class="form-group">
<label for="formControlRange"><b>Pattern</b><span class="badge badge-dark ml-2" id="pattern"></span></label>
<input type="range" min="0" max="98" class="form-control-range" id="patternColorH">
</div>
<div class="form-group">
<label for="formControlRange"><b>Ears</b><span class="badge badge-dark ml-2" id="ears"></span></label>
<input type="range" min="0" max="98" class="form-control-range" id="earsColorH">
</div>
<div class="form-group">
<label for="formControlRange"><b>Eyes</b><span class="badge badge-dark ml-2" id="eyes"></span></label>
<input type="range" min="0" max="98" class="form-control-range" id="eyesColorH">
</div>
<div class="form-group">
<label for="formControlRange"><b>Whiskers</b><span class="badge badge-dark ml-2" id="whisks"></span></label>
<input type="range" min="0" max="98" class="form-control-range" id="whiskersColorH">
</div>
<div class="form-group">
<label for="formControlRange"><b>Paws</b><span class="badge badge-dark ml-2" id="paws"></span></label>
<input type="range" min="0" max="98" class="form-control-range" id="pawsColorH">
</div>
</div>
<div id="attributesId" data-tab-content>
<div class="form-group">
<label for="formControlRange"><b>Eyes Shape</b><span class="badge badge-dark ml-2" id="eye5"></span></label>
<input type="range" min="1" max="5" class="form-control-range" id="eyesShapeH">
</div>
<div class="form-group">
<label for="formControlRange"><b>Decoration</b><span class="badge badge-dark ml-2" id="deco1"></span></label>
<input type="range" min="1" max="5" class="form-control-range" id="decoShapeH">
</div>
<div class="form-group">
<label for="formControlRange"><b>Middle Color</b><span class="badge badge-dark ml-2" id="deco2"></span></label>
<input type="range" min="0" max="98" class="form-control-range" id="decoMidColorH">
</div>
<div class="form-group">
<label for="formControlRange"><b>Sides Color</b><span class="badge badge-dark ml-2" id="deco3"></span></label>
<input type="range" min="0" max="98" class="form-control-range" id="decoSideColorH">
</div>
<div class="form-group">
<label for="formControlRange"><b>Animation</b><span class="badge badge-dark ml-2" id="deco4"></span></label>
<input type="range" min="1" max="5" class="form-control-range" id="animationH">
</div>
</div>
</div>
<button type="button" class="botones" onclick="renderCat(defaultDNA)">Default Cat </button>
<button type="button" class="botones" >Create Cat</button>
<button type="button" class="botones" onclick="randomCat1()">Random Cat</button>
</div>
</div>
This is the random cat function, as you can see is a very unprofessional function xp, and i know i was supposed to use the getColor and genColor functions, and i tried but i couldnt easily figure out how, so i just went ahead and did in this unsophisitcated fashion xp
function randomCat1(){
var furRandom = Math.floor(Math.random()*99)+1;
headColorF(colors[furRandom],furRandom);
$("#bodycolorH").val(furRandom)
var patternRandom = Math.floor(Math.random()*99)+1;
patternColorF(colors[patternRandom],patternRandom);
$("#patternColorH").val(patternRandom)
var earsRandom = Math.floor(Math.random()*99)+1;
earsColorF(colors[earsRandom],earsRandom);
$("#earsColorH").val(earsRandom)
var eyesRandom = Math.floor(Math.random()*99)+1;
eyesColorF(colors[eyesRandom],eyesRandom);
$("#eyesColorH").val(eyesRandom)
var whiskersRandom = Math.floor(Math.random()*99)+1;
whiskersColorF(colors[whiskersRandom],whiskersRandom);
$("#whiskersColorH").val(whiskersRandom)
var pawsRandom = Math.floor(Math.random()*99)+1;
pawsColorF(colors[pawsRandom],pawsRandom);
$("#pawsColorH").val(pawsRandom)
var decorationSideRandom = Math.floor(Math.random()*99)+1;
decorationSideColorF(colors[decorationSideRandom],decorationSideRandom);
$("#decoSideColorH").val(decorationSideRandom)
var decorationMidRandom = Math.floor(Math.random()*99)+1;
decorationMidColorF(colors[decorationMidRandom],decorationMidRandom);
$("#decoMidColorH").val(decorationMidRandom)
var eyeVariationRandom = Math.floor(Math.random()*5)+1;
eyeVariationF(eyeVariationRandom);
$("#eyesShapeH").val(eyeVariationRandom)
var decorationShapeRandom = Math.floor(Math.random()*5)+1;
decorationShapeF(decorationShapeRandom);
$("#decoShapeH").val(decorationShapeRandom)
var animationRandom = Math.floor(Math.random()*5)+1;
animationF(animationRandom);
$("#animationH").val(animationRandom)
}
I created this script document because i learned from some guy on youtube, i know there was built in tools to do this but i didnt know how to use em, anyways heres te function that switches the tabs, later i learned about the simple onClick function, so i used onClick for the random cat and default cat buttons
const tabs = document.querySelectorAll('[data-tab-target]')
const tabContents = document.querySelectorAll('[data-tab-content]')
tabs.forEach(tab => {
tab.addEventListener('click' , () => {
const target = document.querySelector(tab.dataset.tabTarget)
tabContents.forEach(tabContent => {
tabContent.classList.remove('active')
})
tabs.forEach(tab => {
tab.classList.remove('active')
})
target.classList.add('active')
tab.classList.add('active')
})
})
Hi @AdamFortuna,
I’m trying to get the tabs done but I’m not very familiar with Bootstrap and I have the tabs working but they won’t change the content. I’ve watched several youtube tutorials to get this far and can’t find anything wrong with the code. Could you please help? What is wrong with the 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/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 -->
<nav>
<ul class="nav nav-tabs">
<li class="nav-item"><a href="#catColors" class="nav-link" role="tab" data-toggle="tab">Colors</a></li>
<li class="nav-item"><a href="#catAttributes" class="nav-link" role="tab" data-toggle="tab">Attributes</a></li>
</ul>
</nav>
<div class="tab-content">
<div id="catColors" role="tabpanel" class="tab-pane active">
<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="catAtrributes" role="tabpanel" class="tab-pane">
<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>
</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>
Hey @Vivek20! You just have to add bootstrap JS at end of the document where the scripts are. In order to use JS functionality that interact with the DOM, we always place this files at end.
AT BOTTOM OF THE DOCUMENT
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
Also double check that you are closing the divs with the right Id.
Hi @kenn.eth,
Thankyou for your tips. I was hoping it was something as simple that I had overlooked. Unfortunately after moving the scripts to the end of the body and checking all the divs I still have the same issue. I’m sure it’s something small that I’m not seeing. Could you please have another look? Thanks!
<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 -->
<nav>
<ul class="nav nav-tabs">
<li class="nav-item"><a href="#catColorsTab" class="nav-link" role="tab" data-toggle="tab">Colors</a></li>
<li class="nav-item"><a href="#catAttributesTab" class="nav-link" role="tab" data-toggle="tab">Attributes</a></li>
</ul>
</nav>
<div class="tab-content">
<div id="catColorsTab" role="tabpanel" class="tab-pane active">
<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">
<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>
Use this structure, i just try it. Let me know if its work for you.
<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>My Code:
catSettings:
//Random Click
$('#random').click( ()=>{
//cattributes
var shape = Math.floor(Math.random()*11)+1
eyeVariation(shape)
$('#eyeshape').val(shape)
var pattern = Math.floor(Math.random()*7)+1
decorationVariation(pattern)
$('#decorationpattern').val(pattern)
var anim = Math.floor(Math.random()*9)+1
animationVariation(anim)
parseInt( $('#animations').val(anim) )
var sides = Math.floor(Math.random()*89)+10
decorationSidesColor(colors[sides],sides)
$('#decorationside').val(sides)
var mid = Math.floor(Math.random()*89)+10
decorationMidColor(colors[mid],mid)
$('#decorationmid').val(mid)
//colors
var body = Math.floor(Math.random()*89)+10
bodyColor(colors[body],body)
$('#bodycolor').val(body)
var eyes = Math.floor(Math.random()*89)+10
eyeColor(colors[eyes], eyes)
$('#eyecolor').val(eyes)
var ears = Math.floor(Math.random()*89)+10
earColor(colors[ears], ears)
$('#earcolor').val(ears)
var tail = Math.floor(Math.random()*89)+10
tailColor(colors[tail], tail)
$('#tailcolor').val(tail)
var belly = Math.floor(Math.random()*89)+10
bellyColor(colors[belly], belly)
$('#bellycolor').val(belly)
})
//Reset Click
$('#default').click(()=>{
eyeVariation(defaultDNA.eyesShape)
$('#eyeshape').val(defaultDNA.eyesShape)
decorationVariation(defaultDNA.decorationPattern)
$('#decorationpattern').val(defaultDNA.decorationPattern)
decorationSidesColor(colors[defaultDNA.decorationSidescolor],defaultDNA.decorationSidescolor)
$('#decorationside').val(defaultDNA.decorationSidescolor)
decorationMidColor(colors[defaultDNA.decorationMidcolor],defaultDNA.decorationMidcolor)
$('#decorationmid').val(defaultDNA.decorationMidcolor)
animationVariation(defaultDNA.animation)
parseInt( $('#animations').val(defaultDNA.animation) )
bodyColor(colors[defaultDNA.headColor],defaultDNA.headColor)
$('#bodycolor').val(defaultDNA.headColor)
eyeColor(colors[defaultDNA.eyesColor], defaultDNA.eyesColor)
$('#eyecolor').val(defaultDNA.eyesColor)
earColor(colors[defaultDNA.earsColor], defaultDNA.earsColor)
$('#earcolor').val(defaultDNA.earsColor)
tailColor(colors[defaultDNA.TailColor], defaultDNA.TailColor)
$('#tailcolor').val(defaultDNA.TailColor)
bellyColor(colors[defaultDNA.BellyColor], defaultDNA.BellyColor)
$('#bellycolor').val(defaultDNA.BellyColor)
})
$('#btnColorsTab').click(()=>{
$("#headGroup").show()
$("#mouthGroup").show()
$("#eyesGroup").show()
$("#earsGroup").show()
$("#tailGroup").show()
$("#eyeShapeGroup").hide();
$("#patternGroup").hide();
$('#patternColorGroup').hide();
$("#animationGroup").hide();
})
$('#btnAttributesTab').click(()=>{
$('#headGroup').hide();
$('#mouthGroup').hide();
$('#eyesGroup').hide();
$('#earsGroup').hide();
$("#tailGroup").hide()
$("#eyeShapeGroup").show();
$("#patternGroup").show();
$('#patternColorGroup').show();
$("#animationGroup").show();
})
html:
<!-- 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= "headGroup" class="form-group">
<label for="formControlRange"><b>Head & Body</b><span class="badge badge-dark ml-2" id="bodycode"></span></label>
<input type="range" min="10" max="98" class="form-control-range" id="bodycolor">
</div>
<div id = "eyesGroup" 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 id = "mouthGroup" class="form-group">
<label for="formControlRange"><b>Belly & Mouth</b><span class="badge badge-dark ml-2" id="bellycode"></span></label>
<input type="range" min="10" max="98" class="form-control-range" id="bellycolor">
</div>
<div id = "earsGroup" class="form-group">
<label for="formControlRange"><b>Ears & Inner Tail</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 id = "tailGroup" class="form-group">
<label for="formControlRange"><b>Tail</b><span class="badge badge-dark ml-2" id="tailcode"></span></label>
<input type="range" min="10" max="98" class="form-control-range" id="tailcolor">
</div>
</div>
<br>
<div id = "cattributes">
<div id = "eyeShapeGroup" 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="11" class="form-control-range" id="eyeshape">
</div>
<div id = "patternGroup" class="form-group">
<label for="formControlRange"><b>Head Pattern</b><span class="badge badge-dark ml-2" id="patternName"></span></label>
<input type="range" min="1" max="7" class="form-control-range" id="decorationpattern">
</div>
<div id = "patternColorGroup" class="form-group">
<label for="formControlRange"><b>Middle Shape Color</b><span class="badge badge-dark ml-2" id="middlecolorcode"></span></label>
<input type="range" min="10" max="98" class="form-control-range" id="decorationmid">
<label for="formControlRange"><b>Sides Shape 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="decorationside">
</div>
<div id = "animationGroup" 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="9" class="form-control-range" id="animations">
</div>
</div>
<button id = "random" class = "badge badge-pill badge-info">Random Cat</button>
<button id = "default" class = "badge badge-pill badge-warning">Default</button>
<button id = "create" class = "badge badge-pill badge-success">Create New Cat</button>
</div>
<br>
</div>
</div>
<footer align="left">
<p>Ivan on Tech Academy April 2021</p>
</footer>
</body>
<script src="assets/js/colors.js"></script>
<script src="assets/js/catSettings.js"></script>
<script src="assets/js/catFactory.js"></script>
</html>
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>
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");
})
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.
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.
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%" })
}
Finally finished with the factory!!!
<!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>
*, *::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;
}
.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;
}
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)
})
// 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
// }
Wooooo Incredible! I Like a loot ! Looks even legit project! Keep going on! Wonder to see whats next.
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();
})
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"
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.
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();
})
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!