Functions
*/
function defaultKitty() {
// render the kitty based on default dna
$(’#dnabody’).html(defaultDNA.headColor);
$(’#dnamouth’).html(defaultDNA.mouthColor);
$(’#dnaeyes’).html(defaultDNA.eyesColor);
$(’#dnaears’).html(defaultDNA.earsColor);
// render the kitty based on the random dna
$('#dnabody').html(randomDNA.headColor);
$('#dnamouth').html(randomDNA.mouthColor);
$('#dnaeyes').html(randomDNA.eyesColor);
$('#dnaears').html(randomDNA.earsColor);
$('#dnashape').html(randomDNA.eyesShape)
$('#dnadecoration').html(randomDNA.decorationPattern)
$('#dnadecorationMid').html(randomDNA.decorationMidcolor)
$('#dnadecorationSides').html(randomDNA.decorationSidescolor)
$('#dnaanimation').html(randomDNA.animation)
$('#dnaspecial').html(randomDNA.lastNum)
renderCat(randomDNA)
}
function getDna(){
var dna = ‘’
dna += $(’#dnabody’).html()
dna += $(’#dnamouth’).html()
dna += $(’#dnaeyes’).html()
dna += $(’#dnaears’).html()
dna += $(’#dnashape’).html()
dna += $(’#dnadecoration’).html()
dna += $(’#dnadecorationMid’).html()
dna += $(’#dnadecorationSides’).html()
dna += $(’#dnaanimation’).html()
dna += $(’#dnaspecial’).html()
Hey Carlos, sorry for taking so long to get back to you, I’m juggling between the assignments and getting to learn more about truffle config in VS and ganache Eth on Metamask. So much to learn. Oh well, here you can check all that I have regarding this assignment. I don’t know why some slides are not working at all, I mean, no change is visible as I move throughout the slides. Could you please let me know what am I missing out?
Thank you very much,
Maia https://github.com/Maiajc/Assig01.git
Is different id from the one you are using with Jquery
The rest looks good and should work. Please check if it is any errors in the console and send me a picture. Also make a console.log(Random ) to see the results from maths functions and check that everything is ok
//The two buttons that switch between Colours and Cattributes
<div id="toggleButtons">
<button type="button" onclick="showColours()" class="btn btn-primary">Colours</button>
<button type="button" onclick="showCattributes()" class="btn btn-primary">Cattributes</button>
</div>
//The three buttons that create a random, a default and a new kitty
<div class="catCreations">
<button type="button" onclick="createDefaultKitty()" class="btn btn-success">Create Default Kitty</button>
<button type="button" onclick="createRandomKitty()" class="btn btn-danger">Create Random Kitty</button>
<button type="button" onclick="showColours()" class="btn btn-warning">Create Actual Kitty</button>
</div>
factory.css
//I used flexbox to space the creation buttons
.catCreations {
display: flex;
justify-content: space-around;
}
catFactory.js
//Toggling between Colours and Cattributes
function showColours() {
$('#catColors').show();
$('#catCattributes').hide();
}
function showCattributes() {
$('#catCattributes').show();
$('#catColors').hide();
}
catSettings.js
//The two functions that create a random cat and the default cat
//Create Default Cat
function createDefaultKitty() {
renderCat(defaultDNA)
}
//Create Random Cat
function createRandomKitty() {
//Create a rounded down number from 10 to 98
var numHead = Math.floor(Math.random() * 89) + 10;
headColor(colors[numHead], numHead)
$('#bodycolor').val(numHead)
var numPaw = Math.floor(Math.random() * 89) + 10;
earPawFeetColor(colors[numPaw], numPaw)
$('#earPawFeetcolor').val(numPaw)
var numTummy = Math.floor(Math.random() * 89) + 10;
tummyMouthAreaColor(colors[numTummy], numTummy)
$('#tummyMouthAreacolor').val(numTummy)
var numEyes = Math.floor(Math.random() * 89) + 10;
eyeColor(colors[numEyes], numEyes)
$('#eyecolor').val(numEyes)
var numEyesShape = Math.floor(Math.random() * 10) + 1;
eyeVariation(numEyesShape)
$('#eyeshape').val(numEyesShape)
var numDecorationPattern = Math.floor(Math.random() * 10) + 1;
decorationVariation(numDecorationPattern)
$('#decorationshape').val(numDecorationPattern)
var numTopBottomDecoration = Math.floor(Math.random() * 89) + 10;
topBottomDecorationColor(colors[numTopBottomDecoration], numTopBottomDecoration)
$('#topBottomDecorationcolor').val(numTopBottomDecoration)
var numMiddleDecoration = Math.floor(Math.random() * 89) + 10;
middleDecorationColor(colors[numMiddleDecoration], numMiddleDecoration)
$('#middleDecorationcolor').val(numMiddleDecoration)
var numAnimation = Math.floor(Math.random() * 10) + 1;
animationVariation(numAnimation)
$('#animation').val(numAnimation)
}
Made two tabs for colors and cattributes - supported by bootstrap pills.
Set Up 3 bootstrap buttons on the button of the from - labelled Reset Kitty, Randomize Kitty, and Mint Kitty. All pretty self-explanatory.
Then I set up a new file called frontendFunctions.js which to help control the buttons and tabs.
I made a concerted effort to not hardcode anything if it didn’t need to be.
So this meant with the randomizer, that it was fetching the min and max props from the inputs in on the index.html to put into the Math.random() function.
Here is my code for this assignment. For whatever reason - the head decoration colors will not go back to their default color setting. I believe my code is correct as the console is not putting any errors out or anything, please correct me if I’m wrong!
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)
let animate_dna = Math.floor(Math.random() * 5) + 1;
$("#animateCat").val(animate_dna);
changeAnimation(animate_dna);
}
function getRandomDnaNum() {
return Math.floor(Math.random() * 89) + 10
}
$("#defaultBtn").click(() => {
renderCat(defaultDNA)
})
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) {
$('#body, #mask, #mask-right, #smile-right, #mask-left, #smile-left').css('background-color', '#' + color) //This changes the color of the cat
// $("#tail").css("border", "15px solid #" + color);
// $("#tail-end").css("background-color", "#" + color);
$('#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 eyeColor(color,code) {
$('.eye').css('background-color', '#' + color) //This changes the color of the cat
$('#eyecode').html('code: '+code) //This updates text of the badge next to the slider
$('#dnaeyes').html(code) //This updates the body color part of the DNA that is displayed below the cat
}
function ETColor(color,code) {
$("#tail").css("border", "15px solid #" + color);
$("#tail-end").css("background-color", "#" + color);
$(".ear").css("background-color", "#" + color);
$('#ETcode').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 IEBColor(color,code) {
$(".ear-inner").css("background-color", "#" + color);
$("#tummy").css("background-color", "#" + color);
$('#IEBcode').html('code: '+code) //This updates text of the badge next to the slider
$('#dnabelly').html(code) //This updates the body color part of the DNA that is displayed below the cat
}
function SWColor(color,code) {
$(".fur").css("background-color", "#" + color);
$('#SWcode').html('code: ' + code); //This updates text of the badge next to the slider
$('#dnastripes').html(code) //This updates the body color part of the DNA that is displayed below the cat
//Random color
function getColor() {
var randomColor = Math.floor(Math.random() * 16777215).toString(16);
return randomColor
}
function genColors(){
var colors = []
for(var i = 10; i < 99; i ++){
var color = getColor()
colors[i] = color
}
return colors
}
//This function code needs to modified so that it works with Your cat code.
function headColor(color,code) {
$('.head, .chest').css('background', '#' + color) //This changes the color of the cat
$('#headcode').html(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 pawColor(color,code) {
$('.paw_front_left, .paw_front_right, .paw_back_right, .paw_back_left, .tail, .ear').css('background', '#' + color) //This changes the color of the cat
$('#pawcode').html(code) //This updates text of the badge next to the slider
$('#dnapaw').html(code) //This updates the body color part of the DNA that is displayed below the cat
}
function markingColor(color,code) {
$('.forehead_markings_middle, .forehead_markings_left, .forehead_markings_right, .paw_stripe, .bottom_stripe, .tail_marking, .inner_ear').css('background', '#' + color) //This changes the color of the cat
$('#markingcode').html(code) //This updates text of the badge next to the slider
$('#dnamarking').html(code) //This updates the body color part of the DNA that is displayed below the cat
}
function snoutColor(color,code) {
$('.snout, .stomach').css('background', '#' + color) //This changes the color of the cat
$('#snoutcode').html(code) //This updates text of the badge next to the slider
$('#dnasnout').html(code) //This updates the body color part of the DNA that is displayed below the cat
}
function eyeColor(color,code) {
$('.irus').css('background', '#' + color) //This changes the color of the cat
$('#eyecode').html(code) //This updates text of the badge next to the slider
$('#dnaeye').html(code) //This updates the body color part of the DNA that is displayed below the cat
}
//Cattributes
function snoutOnlyColor(color,code) {
$('.snout').css('background', '#' + color) //This changes the color of the cat
$('#snoutOnlycode').html(code) //This updates text of the badge next to the slider
$('#dnasnoutOnly').html(code) //This updates the body color part of the DNA that is displayed below the cat
}
function stomachOnlyColor(color,code) {
$('.stomach').css('background', '#' + color) //This changes the color of the cat
$('#stomachOnlycode').html(code) //This updates text of the badge next to the slider
$('#dnastomachOnly').html(code) //This updates the body color part of the DNA that is displayed below the cat
}
function innerEarOnlyColor(color,code) {
$('.inner_ear').css('background', '#' + color) //This changes the color of the cat
$('#innerEarOnlycode').html(code) //This updates text of the badge next to the slider
$('#dnainnerEarOnly').html(code) //This updates the body color part of the DNA that is displayed below the cat
}
function markingsOnlyColor(color,code) {
$('.forehead_markings_middle, .forehead_markings_left, .forehead_markings_right, .paw_stripe, .bottom_stripe, .tail_marking').css('background', '#' + color) //This changes the color of the cat
$('#markingsOnlycode').html(code) //This updates text of the badge next to the slider
$('#dnamarkingsOnly').html(code) //This updates the body color part of the DNA that is displayed below the cat
}
//###################################################
//Functions below will be used later on in the project
//###################################################
function eyeVariation(num) {
$('#dnashape').html(num)
switch (num) {
case 1:
normalEyes()
$('#eyename').html('None')
break
case 2:
normalEyes() // reset
$('#eyename').html('Day') // set badge to "Chill"
eyesType1() //Set border to change the shape of the eye
break
case 3:
normalEyes() // reset
$('#eyename').html('Night') // set badge to "Chill"
eyesType2() //Set border to change the shape of the eye
break
default:
console.log("Not 1, 2 or 3")
break
}
}
function decorationVariation(num) {
$('#dnadecoration').html(num)
switch (num) {
case 1:
normaldecoration()
$('#markingsName').html('Tabby')
console.log(num)
break
case 2:
normaldecoration() // reset
$('#markingsName').html('None')
nodecoration()
console.log(num)
break
case 3:
normaldecoration() // reset
$('#markingsName').html('Tabby')
normaldecoration()
console.log(num)
break
}
}
function snoutVariation(num) {
$('#dnasnouttype').html(num)
switch (num) {
case 1:
normalSnout()
$('#snoutName').html('Normal')
break
case 2:
normalSnout() // reset
$('#snoutName').html('Burmese') // set badge to "Chill"
burmeseSnout() //Set border to change the shape of the eye
break
case 3:
normalSnout() // reset
$('#snoutName').html('Tuxedo') // set badge to "Chill"
tuxedoSnout() //Set border to change the shape of the eye
break
case 4:
normalSnout() // reset
$('#snoutName').html('British Shorthair') // set badge to "Chill"
unicolorSnout() //Set border to change the shape of the eye
break
}
}
function animationVariation(num) {
$('#dnaanimation').html(num)
switch (num) {
case 1:
$('#animationName').html('None')
noAnimation()
break
case 2:
earAnimation()
$('#animationName').html('Ear') // set badge
break
case 3:
$('#animationName').html('Whiskers') // set badge to "Chill"
whiskersAnimation() //Set border to change the shape of the eye
break
case 4:
$('#animationName').html('Tail') // set badge to "Chill"
tailAnimation() //Set border to change the shape of the eye
break
}
}
function normalEyes() {
$('.eyes').find('span').css('background', 'transparent')
}
function eyesType1() {
$('.eyes').find('span').css({'background': '#18331d', 'width': '7px', 'left': '13px'})
}
function eyesType2() {
$('.eyes').find('span').css({'background': '#18331d', 'width': '15px', 'left': '9px'})
}
function normaldecoration() {
$('.cat').find('span2').css('background', '#d7c3a3')
}
function nodecoration() {
$('.cat').find('span2').css('background', 'transparent')
}
function normalSnout() {
$('.cat').find('span3').css({
'background': '#fff3e0',
'width': '132px',
'height': '64px',
'margin-top': '61px',
'margin-left': '40px',
'border-bottom': '0px solid transparent',
'border-left': '0px solid transparent',
'border-right': '0px solid transparent',
'border-radius': '55% 55% 60% 60%',
})
}
function unicolorSnout() {
$('.cat').find('span3').css({
'background': '#fff3e0',
'width': '51px',
'height': '44px',
'margin-top': '63px',
'margin-left': '81px',
'border-bottom': '0px solid transparent',
'border-left': '0px solid transparent',
'border-right': '0px solid transparent',
'border-radius': '55% 55% 60% 60%',
})
}
function burmeseSnout() {
$('.cat').find('span3').css({'width': '171px', 'height': '132px', 'margin-top': '-9px','margin-left': '21px'})
}
function tuxedoSnout() {
$('.cat').find('span3').css({
'background': 'transparent',
'width': '0',
'height': '0',
'margin-top': '10px',
'margin-left': '7px',
'border-bottom': '120px solid #fff3e0',
'border-left': '100px solid transparent',
'border-right': '100px solid transparent',
'border-radius': '50% 50% 50% 50%',
})
}
function noAnimation() {
resetAnimation()
}
function earAnimation() {
resetAnimation()
$('#left_ear').addClass("movingEar_left")
}
function whiskersAnimation() {
resetAnimation()
$("#whisker_mid_left").addClass('movingWhiskers_mid_left')
$("#whisker_top_left").addClass('movingWhiskers_top_left')
$("#whisker_bottom_left").addClass('movingWhiskers_bottom_left')
$("#whisker_mid_right").addClass('movingWhiskers_mid_right')
$("#whisker_top_right").addClass('movingWhiskers_top_right')
$("#whisker_bottom_right").addClass('movingWhiskers_bottom_right')
}
function tailAnimation() {
resetAnimation()
$("#tail").addClass("movingTail")
}
function resetAnimation() {
$("#left_ear").removeClass('movingEar_left')
$("#tail").removeClass('movingTail')
$("#whisker_mid_left").removeClass('movingWhiskers_mid_left')
$("#whisker_top_left").removeClass('movingWhiskers_top_left')
$("#whisker_bottom_left").removeClass('movingWhiskers_bottom_left')
$("#whisker_mid_right").removeClass('movingWhiskers_mid_right')
$("#whisker_top_right").removeClass('movingWhiskers_top_right')
$("#whisker_bottom_right").removeClass('movingWhiskers_bottom_right')
}
/*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%" })
}*/
