Using the repository from previous lessons implement Animations for the cats. We encourage you to experiment in this assignment and rewrite the repository code to suit your earlier cat design and your own project.
When then with your code, share it below!
If you will have issues with the assignment, feel free to post your questions below.
Done, and it was good fun!
.movingHead {
animation: moveHead 2s infinite;
}
@keyframes moveHead {
0% {
transform: rotate(0deg);
}
33% {
transform: rotate(7deg);
}
66% {
transform: rotate(-7deg);
}
100% {
transform: rotate(0deg);
}
}
.movingEyes {
animation: moveEyes 2s infinite;
}
@keyframes moveEyes {
0% {
left: -32px;
}
33% {
left: 0px;
}
66% {
left: -50px;
}
100% {
left: -32px;
}
}
.midDotSpin {
animation: midDotSpinning 2s infinite;
}
@keyframes midDotSpinning {
0% {
transform: rotate3d(0);
}
50% {
transform: rotate3d(0, 1, 0, 3.14rad);
}
100% {
transform: rotate3d(0);
}
}
.earScale {
animation: bigEars 4s infinite;
}
@keyframes bigEars {
0% {
transform: scale(1);
left: 0px;
}
50% {
transform: scale(1.3);
left: 15px;
}
100% {
transform: scale(1);
left: 0px;
}
}
.tailWig {
animation: wiggelyTail 1s infinite;
}
@keyframes wiggelyTail {
0% {
transform: skewY(0deg)
}
33% {
transform: skewY(20deg)
}
90%{
transform: skewY(-20deg)
}
100% {
transform: skewY(0deg)
}
}
.whiskShake {
animation: shakeWhisks 3s infinite;
}
@keyframes shakeWhisks {
0% {
transform: skewY(0deg)
}
33% {
transform: skewY(8deg)
}
90%{
transform: skewY(-8deg)
}
100% {
transform: skewY(0deg)
}
}
.sayHello {
animation: wink 1s infinite;
}
@keyframes wink {
0% {
transform: rotate(0deg)
}
33% {
transform: rotate(35deg)
}
90%{
transform: rotate(-35deg)
}
100% {
transform: rotate(0deg)
}
}
<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">
<div class="form-group">
<label for="formControlRange"><b>Head and body</b><span class="badge badge-dark ml-2" id="headcode"></span></label>
<input type="range" min="10" max="98" class="form-control-range" id="bodycolor">
</div>
<div class="form-group">
<label for="formControlRange"><b>Mouth, Belly & 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="eyescode"></span></label>
<input type="range" min="10" max="98" class="form-control-range" id="eyescolor">
</div>
<div class="form-group">
<label for="formControlRange"><b>Ears & Paws</b><span class="badge badge-dark ml-2" id="earscode"></span></label>
<input type="range" min="10" max="98" class="form-control-range" id="earscolor">
</div>
<div 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>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 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 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 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>
</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>
var colors = Object.values(allColors())
var defaultDNA = {
"headColor" : 11,
"mouthColor" : 13,
"eyesColor" : 11,
"earsColor" : 18,
//Cattributes
"eyesShape" : 7,
"decorationPattern" : 4,
"decorationMidcolor" : 15,
"decorationSidescolor" : 20,
"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)
}
// 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()
console.log(colorVal)
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()
console.log(colorVal)
decorationMidColorVar(colors[colorVal],colorVal)
})
$('#decSideColor').change(()=>{
var colorVal = $('#decSideColor').val()
console.log(colorVal)
decorationSidesColorVar(colors[colorVal],colorVal)
})
$('#animation').change(()=>{
var anim = parseInt($('#animation').val())
console.log(anim)
animationsPlayer(anim)
})
//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) {
console.log(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) {
console.log(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
default:
console.log(num)
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)"})
}
Fiinally done ooof i dont know how to put the little preview of my cat, im sorry about that 
//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
}
function headColorF(color,code) {
$('.cat__head, .cat__chest, .cat__tail, .cat__paw-left, .cat__paw-right').css('background', '#' + color) //This changes the color of the cat
$('#fur').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 patternColorF(color,code) {
$('.cat__chest_inner, .cat__mouth-contour, .patch-right, .patch-left, .cat__head-dots, .cat__head-dots_first, .cat__head-dots_second').css('background', '#' + color) //This changes the color of the cat
$('#pattern').html('code: '+code) //This updates text of the badge next to the slider
$('#dnapattern').html(code) //This updates the body color part of the DNA that is displayed below the cat
}
function earsColorF(color,code) {
$('.cat__ear--left, .cat__ear--right').css('background', '#' + color) //This changes the color of the cat
$('#ears').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 eyesColorF(color,code) {
$('.cat__eye--left, .cat__eye--right').css('background', '#' + color) //This changes the color of the cat
$('#eyes').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 whiskersColorF(color,code) {
$('.cat__whiskers-left, .cat__whiskers-right, .cat__whiskers-left_1, .cat__whiskers-right_1, .cat__whiskers-left_2, .cat__whiskers-right_2').css('background', '#' + color) //This changes the color of the cat
$('#whisks').html('code: '+code) //This updates text of the badge next to the slider
$('#dnawhiskers').html(code) //This updates the body color part of the DNA that is displayed below the cat
}
function pawsColorF(color,code) {
$('.cat__paw-left_inner, .cat__paw-right_inner, .hand_left, .hand_right').css('background', '#' + color) //This changes the color of the cat
$('#paws').html('code: '+code) //This updates text of the badge next to the slider
$('#dnapaws').html(code) //This updates the body color part of the DNA that is displayed below the cat
}
//Cattributes
function eyeVariation(num) {
$('#dnashape').html(num)
switch (num) {
case 1:
normalEyes()
$('#eye5').html('Basic')
break
case 2:
normalEyes()
$('#eye5').html('Stylish')
eyesType1()
break
case 3:
normalEyes()
$('#eye5').html('Boxy')
eyesType2()
break
case 4:
normalEyes()
$('#eye5').html('Stylish 2')
eyesType3()
break
case 5:
normalEyes()
$('#eye5').html('Sad')
eyesType4()
break
}
}
function decorationShape(num) {
$('#dnadecoration').html(num)
switch (num) {
case 1:
$('#deco1').html('Basic')
normaldecoration()
break
case 2:
normaldecoration()
$('#deco1').html('Dots')
dotsdecoration()
break
case 3:
normaldecoration()
$('#deco1').html('Horizontal')
horizontaldecoration()
break
case 4:
normaldecoration()
$('#deco1').html('T')
tdecoration()
break
case 5:
normaldecoration()
$('#deco1').html('Swords')
swordsdecoration()
break
}
}
function animationF (num){
$('#dnaanimation').html(num);
switch(num){
case 1:
resetAnimation()
$('#deco4').html('Basic')
break
case 2:
resetAnimation()
$('#deco4').html('No, Sir')
animationType1();
break
case 3:
resetAnimation()
$('#deco4').html('Happy')
animationType2();
break
case 4:
resetAnimation()
$('#deco4').html('Dancing')
animationType3();
break
case 5:
resetAnimation()
$('#deco4').html('Curious')
animationType4();
break
}
}
function animationType1(){
$("#head").addClass("movingHead");
}
function animationType2(){
$("#tail").addClass("movingTail");
}
function animationType3(){
$("#paw1").addClass("movingArms");
$("#paw2").addClass("movingArms");
}
function animationType4(){
$("#eye1").addClass("movingEyes");
$("#eye2").addClass("movingEyes");
}
function resetAnimation(){
$("#head").removeClass("movingHead");
$("#tail").removeClass("movingTail");
$("#paw1").removeClass("movingArms");
$("#paw2").removeClass("movingArms");
$("#eye1").removeClass("movingEyes");
$("#eye2").removeClass("movingEyes");
}
async function normalEyes() {
$('.cat__eye--right, .cat__eye--left').css('border-radius', '50%')
}
async function eyesType1() {
$('.cat__eye--right').css('border-radius', '50% 20% 50% 50%')
$('.cat__eye--left').css('border-radius', '20% 50% 50% 50%')
}
async function eyesType2() {
$('.cat__eye--right, .cat__eye--left').css('border-radius', '30% 30% 40% 40%')
}
async function eyesType3() {
$('.cat__eye--right').css('border-radius', '50% 50% 50% 10%')
$('.cat__eye--left').css('border-radius', '50% 50% 10% 50%')
}
async function eyesType4() {
$('.cat__eye--right').css('border-radius', '50% 90% 20% 50%')
$('.cat__eye--left').css('border-radius', '90% 50% 50% 20%')
}
function decorationMidColorF(color,code) {
$('.cat__head-dots').css('background', '#' + color) //This changes the color of the cat
$('#deco2').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 decorationSideColorF(color,code) {
$('.cat__head-dots_first, .cat__head-dots_second').css('background', '#' + color) //This changes the color of the cat
$('#deco3').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
}
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": "-3px", "border-radius": "40% 40% 65% 65%" })
$('.cat__head-dots_first').css({ "transform": "rotate(0deg)", "height": "36px", "width": "12px", "top": "1px","left": "-16px", "border-radius": "65% 15% 65% 65%" })
$('.cat__head-dots_second').css({ "transform": "rotate(0deg)", "height": "36px", "width": "12px", "top": "1px", "border-radius": "15% 65% 65% 65%" })
}
async function dotsdecoration() {
//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": "9px", "width": "9px", "top": "25px", "border-radius": "50%" })
$('.cat__head-dots_first').css({ "transform": "rotate(0deg)", "height": "9px", "width": "9px", "top": "0px", "border-radius": "50%" })
$('.cat__head-dots_second').css({ "transform": "rotate(0deg)", "height": "9px", "width": "9px", "top": "0px","border-radius": "50%" })
}
async function horizontaldecoration() {
//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": "9px", "width": "9px", "top": "25px", "border-radius": "50%" })
$('.cat__head-dots_first').css({ "transform": "rotate(0deg)", "height": "9px", "width": "40px", "top":"0px", "left": "-50px", "border-radius": "50% 20% 20% 50%" })
$('.cat__head-dots_second').css({ "transform": "rotate(0deg)", "height": "9px", "width": "40px", "top":"0px", "border-radius": "20% 50% 50% 20%" })
}
async function tdecoration() {
//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": "50px", "width": "9px", "top": "45px", "border-radius": "20% 20% 50% 50%" })
$('.cat__head-dots_first').css({ "transform": "rotate(0deg)", "height": "9px", "width": "40px", "top":"-10px", "left": "-50px", "border-radius": "10% 50% 10% 50%" })
$('.cat__head-dots_second').css({ "transform": "rotate(0deg)", "height": "9px", "width": "40px", "top":"-10px", "border-radius": "50% 10% 50% 10%" })
}
async function swordsdecoration() {
//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": "-3px", "border-radius": "40% 40% 65% 65%" })
$('.cat__head-dots_first').css({ "transform": "rotate(8deg)", "height": "36px", "width": "12px", "top": "1px","left": "-16px", "border-radius": "65% 15% 65% 65%" })
$('.cat__head-dots_second').css({ "transform": "rotate(-8deg)", "height": "36px", "width": "12px", "top": "1px", "border-radius": "15% 65% 65% 65%" })
}
var colors = Object.values(allColors())
var defaultDNA = {
"headcolor" : 10,
"patternColor" : 25,
"earsColor" : 10,
"eyesColor" : 25,
"whiskerColor" : 10,
"pawsColor" : 25,
//Cattributes
"eyesShape" : 1,
"decorationPattern" : 1,
"decorationMidcolor" : 25,
"decorationSidescolor" : 25,
"animation" : 1,
"lastNum" : 1
}
// when page load
$( document ).ready(function() {
$('#dnabody').html(defaultDNA.headColor);
$('#dnapattern').html(defaultDNA.patternColor);
$('#dnaears').html(defaultDNA.earsColor);
$('#dnaeyes').html(defaultDNA.eyesColor);
$('#dnawhiskers').html(defaultDNA.whiskerColor);
$('#dnapaws').html(defaultDNA.pawsColor);
$('#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 += $('#dnapattern').html()
dna += $('#dnaears').html()
dna += $('#dnaeyes').html()
dna += $('#dnawhiskers').html()
dna += $('#dnapaws').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){
headColorF(colors[dna.headcolor],dna.headcolor)
$('#bodycolorH').val(dna.headcolor)
patternColorF(colors[dna.patternColor],dna.patternColor)
$('#patternColorH').val(dna.patternColor)
earsColorF(colors[dna.earsColor],dna.earsColor)
$('#earsColorH').val(dna.earsColor)
eyesColorF(colors[dna.eyesColor],dna.eyesColor)
$('#eyesColorH').val(dna.eyesColor)
whiskersColorF(colors[dna.whiskerColor],dna.whiskerColor)
$('#whiskersColorH').val(dna.whiskerColor)
pawsColorF(colors[dna.pawsColor],dna.pawsColor)
$('#pawsColorH').val(dna.pawsColor)
eyeVariation(dna.eyesShape)
$('#decoShapeH').val(dna.eyesShape)
decorationShape(dna.decorationPattern)
$('#eyesShapeH').val(dna.eyesShape)
decorationMidColorF(colors[dna.decorationMidcolor],dna.decorationMidcolor)
$('#decoMidColorH').val(dna.decorationMidcolor)
decorationSideColorF(colors[dna.decorationSidescolor],dna.decorationSidescolor)
$('#decoSideColorH').val(dna.decorationSidescolor)
animationF(dna.animation)
$('#animationH').val(dna.animation) //<----problem is here somehwere, either the funct
}
// Changing cat colors
$('#bodycolorH').change(()=>{
var colorVal = $('#bodycolorH').val()
headColorF(colors[colorVal],colorVal)
})
// Changing patterncolor
$('#patternColorH').change(()=>{
var colorVal = $('#patternColorH').val()
patternColorF(colors[colorVal],colorVal)
})
// Changing ears color
$('#earsColorH').change(()=>{
var colorVal = $('#earsColorH').val()
earsColorF(colors[colorVal],colorVal)
})
// Changing eyes color
$('#eyesColorH').change(()=>{
var colorVal = $('#eyesColorH').val()
eyesColorF(colors[colorVal],colorVal)
})
// Changing whiskers color
$('#whiskersColorH').change(()=>{
var colorVal = $('#whiskersColorH').val()
whiskersColorF(colors[colorVal],colorVal)
})
// Changing paws color
$('#pawsColorH').change(()=>{
var colorVal = $('#pawsColorH').val()
pawsColorF(colors[colorVal],colorVal)
})
//changing the shape of the eyes
$('#eyesShapeH').change(()=>{
var shape = parseInt($('#eyesShapeH').val())
eyeVariation(shape)
})
// changing the shape of the foreheads decorations
$('#decoShapeH').change(()=>{
var shape = parseInt($('#decoShapeH').val())
decorationShape(shape)
})
//changing the color of the decoration in the middle
$('#decoMidColorH').change(()=>{
var colorVal = $('#decoMidColorH').val()
decorationMidColorF(colors[colorVal],colorVal)
})
//changing the color of the side deoorations
$('#decoSideColorH').change(()=>{
var colorVal = $('#decoSideColorH').val()
decorationSideColorF(colors[colorVal],colorVal)
})
//changing the animations
$('#animationH').change(()=>{
var animationVal = parseInt( $('#animationH').val() )
animationF(animationVal)
})
.movingHead{
animation:moveHead 3s infinite;
}
@keyframes moveHead{
0% {
transform: rotate(0deg);
}
30% {
transform: rotate(5deg);
}
60% {
transform: rotate(-5deg);
}
100% {
transform: rotate(0deg);
}
}
.movingTail{
animation:moveTail 2s infinite;
}
@keyframes moveTail{
0% {
transform: rotate(0deg);
}
33% {
transform: rotate(20deg);
}
66% {
transform: rotate(-10deg);
}
100% {
transform: rotate(0deg);
}
}
.movingArms{
animation:moveArms 2s infinite;
}
@keyframes moveArms{
0% {
transform: skew(0deg);
}
25% {
transform: skew(9deg);
}
50% {
transform: skew(0deg);
}
75% {
transform: skew(-9deg);
}
100% {
transform: skew(0deg);
}
}
.movingEyes{
animation:moveEyes 2s infinite;
}
@keyframes moveEyes{
0% {
left: 14px;
}
12% {
left: 20px;
}
25% {
left: 15px;
}
37% {
left: 10px;
}
50% {
left: 5px;
}
62% {
left: 0px;
}
75% {
left: 5px;
}
87% {
left: 10px;
}
100% {
left: 14px;
}
}
<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">
</head>
<body>
<div class="container p-5" style="margin-top: 12vh;margin-bottom: 10vh;">
<div align="center">
<h1 class="c-white">Kitties-Factory</h1>
<p class="c-white">Create your custom Kitty</p>
</div>
<div class="row">
<div class="col-lg-4 catBox m-2 light-b-shadow">
<div class="cat">
<div class="cat__ear">
<div id="leftEar" class="cat__ear--left">
<div class="cat__ear--left-inside"></div>
</div>
<div id="rightEar" class="cat__ear--right">
<div class="cat__ear--right-inside"></div>
</div>
</div>
<div id="head" class="cat__head">
<div id="midDot" class="cat__head-dots">
<div id="leftDot" class="cat__head-dots_first"></div>
<div id="rightDot" class="cat__head-dots_second"></div>
</div>
<div class="cat__eye">
<div class="patch-left"></div>
<div class="cat__eye--left">
<span id="eye1" class="pupil-left"></span>
</div>
<div class="patch-right"></div>
<div class="cat__eye--right">
<span id="eye2" class="pupil-right"></span>
</div>
</div>
<div class="cat__nose"></div>
<div class="cat__mouth-contour"></div>
<div class="cat__whiskers-left">
<div class="cat__whiskers-left_1"></div>
<div class="cat__whiskers-left_2"></div>
</div>
<div class="cat__whiskers-right">
<div class="cat__whiskers-right_1"></div>
<div class="cat__whiskers-right_2"></div>
</div>
<div class="cat__mouth-right"></div>
<div class="cat__mouth-left"></div>
</div>
<div class="cat__body">
<div class="cat__chest"></div>
<div class="cat__chest_inner"></div>
<div id="paw1" class="cat__paw-left">
<div class="hand_left">
<div class="fingers"></div>
</div>
</div>
<div class="cat__paw-left_inner"></div>
<div id="paw2" class="cat__paw-right">
<div class="hand_right">
<div class="fingers"></div>
</div>
</div>
<div class="cat__paw-right_inner"></div>
<div id="tail" class="cat__tail"></div>
</div>
</div>
<br>
<div class="dnaDiv" id="catDNA">
<b>
DNA:
<!-- Colors -->
<span id="dnabody"></span>
<span id="dnapattern"></span>
<span id="dnaears"></span>
<span id="dnaeyes"></span>
<span id="dnawhiskers"></span>
<span id="dnapaws"></span>
<!-- Cattributes -->
<span id="dnashape"></span>
<span id="dnadecoration"></span>
<span id="dnadecorationMid"></span>
<span id="dnadecorationSides"></span>
<span id="dnadanimation"></span>
<span id="dnaspecial"></span>
</b>
</div>
</div>
<div class="col-lg-7 cattributes m-2 light-b-shadow">
<!-- Cat colors -->
<div id="catColors">
<div class="form-group">
<label for="formControlRange"><b>Fur</b><span class="badge badge-dark ml-2" id="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 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>Mid 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>
</div>
<br>
</div>
</div>
<footer align="left">
<p>Ivan on Tech Academy Bootcamp 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>
*, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: inherit;
}
html {
box-sizing: border-box;
overflow-y: scroll;
}
body {
background: #dad6d6;
}
.cat__head {
position: relative;
top:-5;
width: 200px;
height: 200px;
border: 6px solid transparent;
-webkit-border-radius: 50% 50% 45% 45%;
border-radius: 50% 50% 45% 45%;
background: #141414;
z-index: 20;
}
.cat__head-dots {
position:absolute;
top: -3px;
left: 88px;
height: 48px;
width: 14px;
background: #160d0d;
-webkit-border-radius: 25% 25% 65% 65%;
border-radius: 40% 40% 65% 65%;
}
.cat__head-dots_first {
content: '';
position:absolute;
top: 1px;
left:-16px;
width: 12px;
height: 36px;
background: #0f0909;
border-radius: 65% 15% 65% 65%;
}
.cat__head-dots_second {
content: '';
position:absolute;
top: 1px;
left:18px;
width: 12px;
height: 36px;
background: #271414;
border-radius: 15% 65% 65% 65%;
}
.cat__ear {
position: relative;
}
.cat__ear--left, .cat__ear--right {
position: absolute;
top: -15px;
left: 60px;
width: 100px;
height: 100px;
border: 5px solid transparent;
border-radius: 70% 10% 50% 30%;
background: #141414;
display: flex;
justify-content: center;
align-items: center;
}
.cat__ear--right {
transform: scale(-1, 1) rotate(0deg);
left:-10px;
}
.cat__ear--left {
transform: rotate(10deg);
left:110px;
}
.cat__ear--left-inside, .cat__ear--right-inside {
position:absolute;
top:10px;
left:45px;
width: 40px;
height: 40px;
border-radius: 70% 10% 50% 30%;
background: #ffffff5d;
}
.patch-left {
position:absolute;
width: 60px;
height: 50px;
background: #96000080;
border-radius: 15% 45% 45% 55%;
top:3px;
left:83;
transform: scale(-1, 1) rotate(0deg);
}
.patch-right {
position:absolute;
width: 60px;
height: 50px;
background: #96000080;
border-radius: 15% 45% 45% 55%;
top:3px;
left:-7px;
}
.cat__eye {
position: relative;
top: 50px;
left: 27px;
display: flex;
}
.cat__eye--left {
border: solid 2px;
border-color: #141414;
width: 50px;
height: 50px;
background: #960000;
border-radius: 50%;
margin: 0px;
z-index: 100;
}
.cat__eye--right{
position:relative;
border: solid 2px;
border-color: #141414;
width: 50px;
height: 50px;
background: #960000;
border-radius: 50%;
margin: 0px;
left: 35px;
z-index: 100;
}
.cat__eye span {
position: absolute;
top: 41px;
width: 21px;
height: 35px;
background: #1e1e1e;
border-radius: 50%;
z-index: 200;
}
.cat__eye span::after {
content: '';
top: 16px;
left: 19px;
position: absolute;
width: 4px;
height: 7px;
border-radius: 50%;
background: #ede4e4d7;
}
.cat__eye span::before {
content: '';
top: 21px;
left: 16px;
position: absolute;
width: 3px;
height: 4px;
border-radius: 50%;
background: #ede4e4;
}
.cat__eye span.pupil-left {
left: 14px;
top:9px;
}
.cat__eye span.pupil-right {
left: 14px;
top:8px;
}
.cat__nose {
position: absolute;
top: 55px;
left: 85px;
border:solid 2px;
border-color: #c800005e;
background-color: #ff7878;
height:13px;
width: 20px;
position:relative;
border-radius:30% 30% 79% 79%;
z-index: 100;
}
.cat__mouth-contour {
position: absolute;
top: 100px;
left: 20px;
background-color: #111111c2;
border-radius: 40% 40% 50% 50%;
width: 150px;
height: 85px;
-webkit-border-radius: 55% 55% 60% 60%;
}
.cat__mouth-left, .cat__mouth-right {
position: absolute;
top: 108px;
width: 34px;
height: 28px;
border: solid 4px rgb(255, 255, 255);
border-color: #fbfbfb00 #141414 #141414;
border-radius: 50% 50% 60% 60%;
}
.cat__mouth-left {
left: 61px;
}
.cat__mouth-right {
left: 94px;
}
.cat__whiskers-left, .cat__whiskers-right {
position: relative;
}
.cat__whiskers-left, .cat__whiskers-right, .cat__whiskers-left_1, .cat__whiskers-right_1, .cat__whiskers-left_2, .cat__whiskers-right_2 {
width: 82px;
height: 4px;
background: #820000;
}
.cat__whiskers-left_1, .cat__whiskers-right_1, .cat__whiskers-left_2, .cat__whiskers-right_2 {
content: '';
background: #820000;
position: absolute;
}
.cat__whiskers-left {
top: 60px;
left: -20px;
}
.cat__whiskers-left_1 {
top: -13px;
transform: rotate(11deg);
background: #820000;
}
.cat__whiskers-left_2 {
top: 10px;
left:4px;
transform: rotate(-6deg);
background: #820000;
}
.cat__whiskers-right {
top: 55px;
left: 125px;
}
.cat__whiskers-right_1 {
top: -13px;
transform: rotate(-11deg);
background: #820000;
}
.cat__whiskers-right_2 {
top: 10px;
right:2;
transform: rotate(6deg);
background: #820000;
}
.cat__body {
position: relative;
}
.cat__chest {
position: absolute;
left: 24px;
top: -49px;
width: 150px;
height: 150px;
background: #141414;
border: 5px solid transparent;
border-radius: 30% 30% 40% 40%;
z-index: 3;
}
.cat__chest_inner {
content: '';
position: absolute;
top: -5px;
left: 60px;
width: 80px;
height: 100px;
border-radius: 50%;
background: #5a0000;
z-index: 4;
}
.cat__paw-left, .cat__paw-right {
position: absolute;
top: 5px;
background-color: #141414;
border: solid 3px;
border-color: #14141400 #14141440;
width: 33px;
height: 95px;
border-radius: 25% 25% 40% 40%;
z-index: 5;
}
.cat__paw-right_inner {
content: '';
position: absolute;
top: 60px;
left: 133px;
width:50px;
height:40px;
border: solid 2px;
border-color: #14141460;
background-color: #960000;
border-radius: 50% 50% 30% 30%;
z-index: 2;
}
.cat__paw-left_inner {
content: '';
position: absolute;
top: 60px;
left: 15px;
width:50px;
height:40px;
border: solid 2px;
border-color: #14141460;
background-color: #960000;
border-radius: 50% 50% 30% 30%;
z-index: 2;
}
.cat__paw-left {
left: 135px;
border-radius: 15% 15% 40% 40%;
}
.hand_left {
position:relative;
background-color: #960000;
border: solid 2px;
border-color: #14141460;
width: 43px;
height: 30px;
border-radius: 60% 60% 40% 40%;
top:65;
right: 8;
}
.cat__paw-left::after {
left: -32px;
}
.cat__paw-right {
left: 30px;
border-radius: 15% 15% 40% 40%;
}
.hand_right {
position:relative;
background-color: #960000;
border: solid 2px;
border-color: #14141460;
width: 43px;
height: 30px;
border-radius: 60% 60% 40% 40%;
top:65;
left:-8;
}
.cat__paw-right::after {
left: 16px;
}
.fingers {
width: 15px;
height: 22px;
border: solid 4px #ffffff;
border-color: #14141400 #14141435 #14141400;
border-radius: 60px 60px 30px 30px;
position:relative;
top:6px;
left:12px;
}
.cat__tail {
position: absolute;
top: 20px;
left: 145px;
width: 90px;
height: 30px;
background: #141414;
border: 5px solid transparent;
border-radius: 45%;
z-index: 1;
transform: rotate(-25deg);
}
/* .cursor {
position: absolute;
height: 23px;
width: 23px;
border: none;
border-radius: 50%;
background: #b40660;
transform: translateX(-50%) translateY(-50%);
z-index: 4000;
} */
That was a fun exercise, never animated anything in CSS before. Here is my updated code:
index.html
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Academy kitties </title>
<script type="text/javascript" src="assets/js/jquery-3.4.1.js"></script>
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<script src="assets/bootstrap/js/popper.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="assets/css/mystyle.css">
<link rel="stylesheet" href="assets/css/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 -->
<div id="catColors">
<div class="form-group">
<label for="formControlRange"><b>Head and body</b><span class="badge badge-dark ml-2" id="headcode"></span></label>
<input type="range" min="10" max="98" class="form-control-range" id="bodycolor">
</div>
<div class="form-group">
<label for="formControlRange"><b>Mouth, Body and Tail</b><span class="badge badge-dark ml-2" id="mouthcode"></span></label>
<input type="range" min="10" max="98" class="form-control-range" id="mouthcolor">
</div>
<div class="form-group">
<label for="formControlRange"><b>Eyes</b><span class="badge badge-dark ml-2" id="eyecode"></span></label>
<input type="range" min="10" max="98" class="form-control-range" id="eyecolor">
</div>
<div class="form-group">
<label for="formControlRange"><b>Ears and Paws</b><span class="badge badge-dark ml-2" id="earcode"></span></label>
<input type="range" min="10" max="98" class="form-control-range" id="earcolor">
</div>
<div 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>
<br>
</div>
</div>
<footer align="left">
<p>Ivan on Tech Academy Bootcamp July 2020</p>
</footer>
</body>
<script src="assets/js/colors.js"></script>
<script src="assets/js/catSettings.js"></script>
<script src="assets/js/catFactory.js"></script>
</html>
catSettings.js
var colors = Object.values(allColors())
var defaultDNA = {
"headColor" : 10,
"mouthColor" : 13,
"eyesColor" : 96,
"earsColor" : 10,
//Cattributes
"eyesShape" : 1,
"decorationPattern" : 1,
"decorationMidcolor" : 13,
"decorationSidescolor" : 13,
"animation" : 1,
"lastNum" : 1
}
// when page load
$( document ).ready(function() {
$('#dnabody').html(defaultDNA.headColor);
$('#dnamouth').html(defaultDNA.mouthColor);
$('#dnaeyes').html(defaultDNA.eyesColor);
$('#dnaears').html(defaultDNA.earsColor);
$('#dnashape').html(defaultDNA.eyesShape)
$('#dnadecoration').html(defaultDNA.decorationPattern)
$('#dnadecorationMid').html(defaultDNA.decorationMidcolor)
$('#dnadecorationSides').html(defaultDNA.decorationSidescolor)
$('#dnaanimation').html(defaultDNA.animation)
$('#dnaspecial').html(defaultDNA.lastNum)
renderCat(defaultDNA)
});
function getDna(){
var dna = ''
dna += $('#dnabody').html()
dna += $('#dnamouth').html()
dna += $('#dnaeyes').html()
dna += $('#dnaears').html()
dna += $('#dnashape').html()
dna += $('#dnadecoration').html()
dna += $('#dnadecorationMid').html()
dna += $('#dnadecorationSides').html()
dna += $('#dnaanimation').html()
dna += $('#dnaspecial').html()
return parseInt(dna)
}
function renderCat(dna){
headColor(colors[dna.headColor],dna.headColor)
$('#bodycolor').val(dna.headColor)
mouthColor(colors[dna.mouthColor],dna.mouthColor)
$('#mouthcolor').val(dna.mouthColor)
eyeColor(colors[dna.eyesColor],dna.eyesColor)
$('#eyecolor').val(dna.eyesColor)
earColor(colors[dna.earsColor],dna.earsColor)
$('#earcolor').val(dna.earsColor)
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)
})
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;
default:
$('#animationName').html("No 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%" })
}
animations.css
.movingHead{
animation: rotateBackAndForth5 5s infinite;
}
.wagTail{
animation: rotateBackAndForth25 3s infinite;
}
.kittyEyes{
animation: sizeBigSmall 3s infinite;
}
.wiggleEar{
animation: rotateBackAndForth5 2s infinite;
}
@keyframes vibrateX {
0%{
transform: translate(5px, 0px);
}
50%{
transform: translate(-5px, 0px);
}
}
@keyframes sizeBigSmall{
0%{
transform: scale(1);
}
30%{
transform: scale(1.2);
}
60%{
transform: scale(0.9);
}
100%{
transform: scale(1);
}
}
@keyframes rotateBackAndForth5{
0%{
transform: rotate(0deg);
}
30%{
transform: rotate(5deg);
}
60%{
transform: rotate(-5deg);
}
100%{
transform: rotate(0deg);
}
}
@keyframes rotateBackAndForth25{
0%{
transform: rotate(0deg);
}
30%{
transform: rotate(25deg);
}
60%{
transform: rotate(-25deg);
}
100%{
transform: rotate(0deg);
}
}
catFactory:
//Random color
function getColor() {
var randomColor = Math.floor(Math.random() * 16777215).toString(16);
return randomColor
}
function genColors(){
var colors = []
for(var i = 10; i < 99; i ++){
var color = getColor()
colors[i] = color
}
return colors
}
//This function code needs to modified so that it works with Your cat code.
function bodyColor(color, code) {
$('.body, .head, .foot-left, .foot-right').css('background', '#' + color) //This changes the color of the cat
$('#bodycode').html('code: '+ code) //This updates text of the badge next to the slider
$('#dnabody').html(code) //This updates the body color part of the DNA that is displayed below the cat
}
function eyeColor(color, code) {
$('.eyes').find('span').css('background', '#' + color);
$('#eyecode').html('code: '+ code);
$('#dnaeyes').html(code);
}
function bellyColor(color, code) {
$('.mouth, .belly').css('background', '#' + color);
$('#bellycode').html('code: '+ code);
$('#dnabelly').html(code);
}
function earColor(color, code) {
$('.ear, .inner-tail').css('background', '#' + color);
$('#earcode').html('code: '+ code);
$('#dnaears').html(code);
}
function tailColor(color, code) {
$('.tail').css('background', '#' + color);
$('#tailcode').html('code: '+ code);
$('#dnatail').html(code);
}
function decorationMidColor(color, code) {
$('.head-shapes').css('background', '#' + color) //This changes the mid decoration color of the cat
$('#middlecolorcode').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) {
$('.left_head-shape, .right_head-shape').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()//reset to default
$('#eyeName').html('Basic')//set the badge "Basic"
break
case 2:
normalEyes()
$('#eyeName').html('Chiller')
eyesType1()
break
case 3:
normalEyes()
$('#eyeName').html('Welling Up')
eyesType2()
break
case 4:
normalEyes()
$('#eyeName').html('Down Left')
eyesType3()
break
case 5:
normalEyes()
$('#eyeName').html('Down Right')
eyesType4()
break
case 6:
normalEyes()
$('#eyeName').html('Sleepy')
eyesType5()
break
case 7:
normalEyes()
$('#eyeName').html('Sour (left)')
eyesType6()
break
case 8:
normalEyes()
$('#eyeName').html('Sour (right)')
eyesType7()
break
case 9:
normalEyes()
$('#eyeName').html('Cross-Eyed')
eyesType8()
break
case 10:
normalEyes()
$('#eyeName').html('Wink')
eyesType9()
break
case 11:
normalEyes()
$('#eyeName').html('Focus')
eyesType10()
break
default:
console.log("Undefined eyeshape : "+ num)
}
}
function decorationVariation(num) {
$('#dnadecoration').html(num)
switch (num) {
case 1:
$('#patternName').html('Basic')
normaldecoration()
break
case 2:
normaldecoration()
$('#patternName').html('Spread')
headPattern1()
break
case 3:
normaldecoration()
$('#patternName').html('Long and Wide')
headPattern2()
break
case 4:
normaldecoration()
$('#patternName').html('Tiny')
headPattern3()
break
case 5:
normaldecoration()
$('#patternName').html('Upside Down')
headPattern4()
break
case 6:
normaldecoration()
$('#patternName').html('Fringe')
headPattern5()
break
case 7:
normaldecoration()
$('#patternName').html('Specks')
headPattern6()
break
}
}
function animationVariation(num){
$('#dnaanimation').html(num)
switch (num){
case 1:
noAnimation()
$('#animationName').html('Still')
break
case 2:
noAnimation()
$('#animationName').html('Head and Ears Weave')
animationType1()
break
case 3:
noAnimation()
$('#animationName').html('Ears Move')
animationType2()
break
case 4:
noAnimation()
$('#animationName').html('Tail Moves')
animationType3()
break
case 5:
noAnimation()
$('#animationName').html('Eyes Grow')
animationType4()
break
case 6:
noAnimation()
$('#animationName').html('Whiskers Move')
animationType5()
break
case 7:
noAnimation()
$('#animationName').html('Fat')
animationType6()
break
case 8:
noAnimation()
$('#animationName').html('Eye Size')
animationType7()
break
case 9:
noAnimation()
$('#animationName').html('Multi')
animationType8()
break
}
}
//**********EYE TYPES************
async function normalEyes() {
await $('.eyes').find('span').css('border', 'none')
await $('.eyes').find(innerBigLeft).css('background-color', 'blanchedalmond')
await $('.eyes').find(innerBigRight).css('background-color', 'blanchedalmond')
await $('.eyes').find(innerSmallLeft).css('background-color', 'blanchedalmond')
await $('.eyes').find(innerSmallRight).css('background-color', 'blanchedalmond')
}
async function eyesType1() {//top lids half shut-- chiller
await $('.eyes').find('span').css('border-top', '13px solid')
}
async function eyesType2() {//bottom lids half shut-- welling up
await $('.eyes').find('span').css('border-bottom', '13px solid')
}
async function eyesType3() {//looking down left
await $('.eyes').find('span').css('border-top', '12px solid')
await $('.eyes').find('span').css('border-right', '12px solid')
}
async function eyesType4() {//looking down right
await $('.eyes').find('span').css('border-top', '12px solid')
await $('.eyes').find('span').css( 'border-left', '12px solid')
}
async function eyesType5() {//sleepy
await $('.eyes').find('span').css('border-top', '17px solid')
await $('.eyes').find('span').css('border-bottom', '10px solid')
await $('.eyes').find(innerBigRight).css('background-color', '#ffebcd00')
await $('.eyes').find(innerSmallLeft).css('background-color', '#ffebcd00')
await $('.eyes').find(innerSmallRight).css('background-color', '#ffebcd00')
await $('.eyes').find(innerBigLeft).css('background-color', '#ffebcd00')
}
async function eyesType6() {//top lid half shut left eye
await $('.eyes').find(leftPupil).css('border-top', '13px solid')
}
async function eyesType7() {//top lid half shut right eye
await $('.eyes').find(rightPupil).css('border-top', '13px solid')
}
async function eyesType8() {//cross-eyed
await $('.eyes').find(leftPupil).css('border-left', '11px solid')
await $('.eyes').find(rightPupil).css('border-right', '12px solid')
}
async function eyesType9() { //wink left eye
await $('.eyes').find(leftPupil).css('border-top', '14px solid')
await $('.eyes').find(leftPupil).css('border-bottom', '15px solid')
await $('.eyes').find(innerBigLeft).css('background-color', '#ffebcd00')
await $('.eyes').find(innerSmallLeft).css('background-color', '#ffebcd00')
}
async function eyesType10() {//small pupil
await $('.eyes').find('span').css('border-top', 'solid 7px')
await $('.eyes').find('span').css('border-bottom', 'solid 7px')
await $('.eyes').find('span').css('border-left', 'solid 7px')
await $('.eyes').find('span').css('border-right', 'solid 7px')
}
//********** HEAD PATTERNS **********
var innerSmallLeft = document.getElementsByClassName('inner-eyes-small-left' )
var innerBigLeft = document.getElementsByClassName('inner-eyes-big-left')
var innerSmallRight = document.getElementsByClassName('inner-eyes-small-right')
var innerBigRight = document.getElementsByClassName('inner-eyes-big-right')
var leftPupil = document.getElementsByClassName('pupil-left')
var rightPupil = document.getElementsByClassName('pupil-right')
async function normaldecoration() {
//Remove all style from other decorations
//In this way we can also use normalDecoration() to reset the decoration style
$('.head-shapes').css({ "transform": "rotate(0deg)", "height": "48px", "width": "14px", "top": "1px", "left": "92px", "border-radius": "0 0 50% 50%" })
$('.left_head-shape').css({ "transform": "rotate(0deg)", "height": "35px", "width": "14px", "top": "0px", "left": "-13px", "border-radius": "50% 0 50% 50%" })
$('.right_head-shape').css({ "transform": "rotate(0deg)", "height": "35px", "width": "14px", "top": "0px", "left": "13px", "border-radius": "0 50% 50% 50%" })
}
async function headPattern1(){
$('.head-shapes').css({ "top": "3px", "border-radius": "30% 30% 50% 50%"})
$('.left_head-shape').css({ "transform": "rotate(63deg)", "height": "35px", "width": "14px", "top": "-3px", "border-radius": "50% 0 50% 50%" })
$('.right_head-shape').css({ "transform": "rotate(-63deg)", "height": "35px", "width": "14px", "top": "-2px", "border-radius": "50% 0 50% 50%" })
}
async function headPattern2() {
await $('.head-shapes').css({ "top": "3px", "border-radius": "30% 30% 50% 50%"})
await $('.left_head-shape').css({ "transform": "rotate(72deg)", "height": "63px", "width": "14px", "top": "-19px", "left": "-27px", "border-radius": "50% 0 50% 50%" })
await $('.right_head-shape').css({ "transform": "rotate(-74deg)", "height": "63px", "width": "14px", "top": "-17px", "left": "27px", "border-radius": "50% 0 50% 50%" })
}
async function headPattern3() {
await $('.head-shapes').css({ "top": "4px", "border-radius": "30% 30% 50% 50%"})
await $('.left_head-shape').css({ "transform": "rotate(30deg)", "height": "35px", "width": "14px", "top": "1px", "border-radius": "50% 0 50% 50%" })
await $('.right_head-shape').css({ "transform": "rotate(-30deg)", "height": "35px", "width": "14px", "top": "1px", "border-radius": "50% 0 50% 50%" })
await $('.head-shapes').css({ "transform": "scale(0.3)"})
await $('.head-shapes').css({ "top": "-5"})
}
async function headPattern4() {
await $('.head-shapes').css({ "top": "4px", "border-radius": "30% 30% 50% 50%"})
await $('.left_head-Shape').css({ "transform": "rotate(25deg)", "height": "38px", "width": "14px", "top": "-2px", "left": "-8px" })
await $('.right_head-Shape').css({ "transform": "rotate(-30deg)", "height": "35px", "width": "14px", "top": "0px", "left": "9px" })
await $('.head-shapes').css({ "transform": "rotate(180deg)"})
await $('.head-shapes').css({ "top": "4px"})
}
async function headPattern5() {
await $('.left_head-shape').css({"height": "60px", "width": "15px"})
await $('.right_head-shape').css({"height": "60px", "width": "15px", "top": "0px"})
}
async function headPattern6() {
await $('.head-shapes').css({ "height": "10px", "width": "5px", "transform": "rotate(-1deg)", "left": "97px"})
await $('.left_head-shape').css({"height": "10px", "width": "5px"})
await $('.right_head-shape').css({"height": "10px", "width": "5px"})
}
//*********ANIMATIONS**********
function noAnimation(){
$('.head').removeClass('noddingHead')
$('.ears').removeClass('noddingHead')
$('.left-ear').removeClass('movingLeftEar')
$('.right-ear').removeClass('movingRightEar')
$('.tail').removeClass('movingTail')
$('.head').removeClass('movingHead')
$('.whiskers-right').removeClass('movingWhiskersRight')
$('.whiskers-left').removeClass('movingWhiskersLeft')
$('.body').removeClass('enflatedBelly')
$('.belly').removeClass('enflatedBelly')
$('.pupil-left').removeClass('eyesTired')
$('.pupil-right').removeClass('eyesTired')
$('.pupil-left').removeClass('eyesChangeColor')
$('.pupil-right').removeClass('eyesChangeColor')
$('.eyes').removeClass('eyesBigger')
}
async function animationType1(){//head and ears weave side to side
$('.head').addClass('noddingHead')
$('.ears').addClass('noddingHead')
}
async function animationType2(){ //ears move
$('.left-ear').addClass('movingLeftEar')
$('.right-ear').addClass('movingRightEar')
}
async function animationType3(){
$('.tail').addClass('movingTail')
}
async function animationType4(){ //bigger eyes
$('.eyes').addClass('eyesBigger')
}
async function animationType5(){ //whiskers move
$('.whiskers-right').addClass('movingWhiskersRight')
$('.whiskers-left').addClass('movingWhiskersLeft')
}
async function animationType6(){ //fat
$('.body').addClass('enflatedBelly')
$('.belly').addClass('enflatedBelly')
}
async function animationType7(){
$('.pupil-left').addClass('eyesTired')
$('.pupil-right').addClass('eyesTired')
}
async function animationType8(){// mutli-coloured eyes
$('.pupil-left').addClass('eyesChangeColor')
$('.pupil-right').addClass('eyesChangeColor')
}
Animations:
.noddingHead{
animation: noddingHead 5s infinite;
}
.eyesBigger{
animation: eyeLarger 7s infinite;
}
.movingTail{
animation: moveTail 5s infinite;
}
.movingLeftEar{
animation: moveEarLeft 5s infinite;
}
.movingRightEar{
animation: moveEarRight 5s infinite;
}
.movingWhiskersRight{
animation: moveWhiskersRight 5s infinite;
}
.movingWhiskersLeft{
animation: moveWhiskersLeft 5s infinite;
}
.enflatedBelly{
animation: enflateBelly 5s infinite;
}
.eyesTired{
animation: eyesTire 10s infinite;
}
.eyesChangeColor{
animation: multi-Colored 3s infinite;
}
@keyframes eyeLarger {
0%{ transform: scale(1)}
30%{transform: scale(1.2)}
60%{ transform: scale(1.2)}
100%{transform: scale(1)}
}
@keyframes multi-Colored{
0%{ background-color: rgb(255, 0, 0)}
7%{ background-color:rgb(253, 93, 0);}
14%{ background-color:rgb(255, 153, 0); }
21%{ background-color:rgb(253, 207, 0); }
28%{ background-color:rgb(251, 255, 0) }
35%{ background-color:rgb(145, 255, 0) }
42%{ background-color:rgb(20, 255, 118) }
49%{ background-color:rgb(0, 195, 255) }
56%{ background-color:rgb(0, 119, 255) }
63%{ background-color:rgb(0, 17, 255) }
70%{ background-color:rgb(112, 9, 230) }
77%{ background-color: rgb(184, 14, 236); }
84%{ background-color: rgb(247, 0, 255);}
100%{ background-color:rgb(255, 0, 119); }
}
@keyframes eyesTire{
0%{ border-top: 0px solid }
25%{ border-top: 10px solid }
50%{ border-top: 5px solid }
75%{ border-top: 13px solid }
100%{ border-top: 0px solid }
}
@keyframes enflateBelly{
0%{ transform: scale(1) }
30%{ transform: scale(1.2) }
60%{ transform: scale(1.4) }
100%{ transform: scale(1) }
}
@keyframes moveWhiskersRight{
0%{ transform: rotate(0deg) }
30%{ transform: rotate(-3deg) }
60%{ transform: rotate(3deg) }
100%{ transform: rotate(0deg) }
}
@keyframes moveWhiskersLeft{
0%{ transform: rotate(0deg) }
30%{ transform: rotate(-3deg) }
60%{ transform: rotate(3deg) }
100%{ transform: rotate(0deg) }
}
@keyframes moveHead{
0%{ transform: rotate(0deg) }
30%{ transform: rotate(5deg) }
60%{ transform: rotate(-5deg) }
100%{ transform: rotate(0deg) }
}
@keyframes noddingHead{
0%{ transform: translate(0px, 0px); }
30%{ transform: translate(-10px, 0px); }
60%{ transform: translate(10px, 0px); }
100%{ transform: translate(0px, 0px); }
}
@keyframes moveTail{
0%{ transform: rotate(53deg) }
50%{ transform: rotate(65deg) }
100%{ transform: rotate(53deg) }
}
@keyframes moveEarLeft{
0%{ transform: rotate(90deg) }
30%{ transform: rotate(75deg) }
60%{ transform: rotate(105deg) }
100%{ transform: rotate(90deg) }
}
@keyframes moveEarRight{
0%{ transform: rotate(0deg) }
30%{ transform: rotate(-5deg) }
60%{ transform: rotate(15deg) }
100%{ transform: rotate(0deg) }
}
Here You go with my Github repository 
https://github.com/Suveett/DappKitties.git
https://github.com/Suveett/DappKitties.git
It was Fun learning this Dapp Programming, more chilled out as compared to the Serious Money Involving Solidity ( which I like more btw )
thanks and Regards
Su.kal Crypto
Ok, hereās my animated Doraemon.
Wish I could post videoā¦
Only posting changes from previous post.
.cat__close_eyes{
width: 20px;
height: 20px;
border: solid 3px #000;
border-color: #000 transparent transparent transparent;
border-radius: 90% 90% 0 0;
background-color: #ffffff;
position: absolute;
}
.cat__close_eyes.left{
transform: rotate(0deg);
}
.cat__close_eyes.right{
transform: rotate(180deg);
}
.cat__mouth_smile{
width: 140px;
height: 230px;
border: solid 1.5px #000;
border-color: #000 transparent transparent transparent;
border-radius: 80% 80% 20% 20%;
transform: rotate(180deg);
background-color: transparent;
position: absolute;
}
.cat__mouth_still{
width: 50px;
height: 10px;
border: solid 1.5px #000;
border-color: #000 transparent transparent transparent;
border-radius: 50% 50% 0% 0%;
transform: rotate(180deg);
background-color: transparent;
position: absolute;
}
.cat__mouth_thinking{
width: 80px;
height: 90px;
border: solid 1.5px #000;
border-color: #000 transparent transparent transparent;
border-radius: 80% 80% 20% 20%;
background-color: transparent;
position: absolute;
}
/* Animation */
.movingBell {
animation: moveBell 2s infinite;
}
@keyframes moveBell {
0% {
transform: rotate(20deg);
}
50% {
transform: rotate(-20deg);
}
100% {
transform: rotate(20deg);
}
}
.movingArm.right{
animation: moveArmRight 2s infinite;
}
.movingArm.left{
animation: moveArmLeft 2s infinite;
}
@keyframes moveArmRight{
0% {
transform: rotate(178deg);
}
50% {
transform: rotate(190deg);
}
100% {
transform: rotate(178deg);
}
}
@keyframes moveArmLeft{
0% {
transform: rotate(-30deg);
}
50% {
transform: rotate(-20deg);
}
100% {
transform: rotate(-30deg);
}
}
.movingFoot.right{
/* transform-origin: 25px 7px; */
animation: moveFootRight 2s infinite;
}
.movingFoot.left{
animation: moveFootLeft 2s infinite;
}
@keyframes moveFootRight{
0% {
transform: scale(-1,1) rotate(0deg);
}
50% {
transform: scale(-1,1) rotate(7deg);
}
100% {
transform: scale(-1,1) rotate(0deg);
}
}
@keyframes moveFootLeft{
0% {
transform: rotate(7deg);
}
50% {
transform: rotate(0deg);
}
100% {
transform: rotate(7deg);
}
}
.jump {
animation: jumpCat 0.5s infinite;
}
@keyframes jumpCat {
0% {
top: 120px;
}
80% {
top: 100px;
}
100% {
top: 120px;
}
}
//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
}
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");
}
Hello this is my code
I created 4 animations.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--<link rel="stylesheet" href="styles.css"> -->
<script type="text/javascript" src="client/assets/js/jquery-3.4.1.js"></script>
<link rel="stylesheet" href="client/assets/bootstrap/css/bootstrap.min.css">
<script src="client/assets/bootstrap/js/popper.js"></script>
<script src="client/assets/bootstrap/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="client/assets/css/mystyle.css">
<link rel="stylesheet" href="client/assets/css/cats.css">
<link rel="stylesheet" href="client/assets/css/colors.css">
<link rel="stylesheet" href="client/assets/css/factory.css">
<link rel="stylesheet" href="client/assets/css/frontend.css">
<link rel="stylesheet" href="client/assets/css/animation.css">
</head>
<body>
<div class="container p-5" style="margin-top: 12vh;margin-bottom: 10vh;">
<div align="center">
<h1 class="c-white">Kitties-Factory</h1>
<p class="c-white">Create your custom Kitty</p>
</div>
<div class="row">
<div class="col-lg-4 catBox m-2 light-b-shadow">
<div class='cat'>
<div class= 'ears'>
<div class= 'rightear'>
<div class = 'innerear'></div>
</div>
<div class= 'leftear'>
<div class= 'innerear'></div>
</div>
</div>
<div class= 'head'>
<div class= 'front'></div>
<div class= 'nouse'></div>
<div class= 'eyes'>
<div class = 'eye'>
<div class = 'pupil'></div>
<div class= 'intoeye'></div>
</div>
<div class = 'eye2'>
<div class = 'pupil'></div>
<div class= 'intoeye'></div>
</div>
</div>
<div class= 'mouth'>
<div class= 'tongue'></div>
</div>
<div class ='whiskergroup1'>
<div class= 'whisker'></div>
<div class= 'whisker2'></div>
<div class= 'whisker3'></div>
</div>
<div class ='whiskergroup2'>
<div class= 'whisker4'></div>
<div class= 'whisker5'></div>
<div class= 'whisker6'></div>
</div>
</div>
<div class = 'tail'>
<div class= 'intotail'></div>
</div>
<div class = 'neck'></div>
<div class= 'body'>
<div class = 'belly'> </div>
<div class = 'legs'>
<div class = 'rightleg'></div>
<div class = 'leftleg'></div>
</div>
</div>
</div>
<br>
<div class="dnaDiv" id="catDNA">
<b>
DNA:
<!-- Colors -->
<span id="dnabody"></span>
<span id="dnamouth"></span>
<span id="dnaeyes"></span>
<span id="dnaears"></span>
<!-- Cattributes -->
<span id="dnashape"></span>
<span id="dnadecoration"></span>
<span id="dnadecorationMid"></span>
<span id="dnadecorationSides"></span>
<span id="dnaanimation"></span>
<span id="dnaspecial"></span>
</b>
</div>
</div>
<div class="col-lg-7 cattributes m-2 light-b-shadow">
<div id="catColors">
<div class="form-group">
<label for="formControlRange"><b>Head and body</b><span class="badge badge-dark ml-2" id="headcode"></span></label>
<input type="range" min="10" max="98" class="form-control-range" id="bodycolor">
</div>
<div class="form-group">
<label for="formControlRange"><b>Body and 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="bodycolor2">
</div>
<div class="form-group">
<label for="formControlRange"><b>Eye</b><span class="badge badge-dark ml-2" id="eyecode"></span></label>
<input type="range" min="10" max="98" class="form-control-range" id="bodycolor3">
</div>
<div class="form-group">
<label for="formControlRange"><b>Ear</b><span class="badge badge-dark ml-2" id="earcode"></span></label>
<input type="range" min="10" max="98" class="form-control-range" id="bodycolor4">
</div>
<div class="form-group">
<label for="formControlRange"><b>Eye Orientation</b><span class="badge badge-dark ml-2" id="eyeshapecode"></span></label>
<input type="range" min="1" max="5" class="form-control-range" id="eyeshape">
</div>
<div class="form-group">
<label for="formControlRange"><b>Decorative Pattern</b><span class="badge badge-dark ml-2" id="decorativecode"></span></label>
<input type="range" min="1" max="4" class="form-control-range" id="decorativepattern">
</div>
<div class="form-group">
<label for="formControlRange"><b>Pattern Color</b><span class="badge badge-dark ml-2" id="patterncolorcode"></span></label>
<input type="range" min="10" max="98" class="form-control-range" id="patterncolor">
</div>
<div class="form-group">
<label for="formControlRange"><b>Pattern2 Color</b><span class="badge badge-dark ml-2" id="pattern2colorcode"></span></label>
<input type="range" min="10" max="98" class="form-control-range" id="pattern2color">
</div>
<div class="form-group">
<label for="formControlRange"><b>Animation</b><span class="badge badge-dark ml-2" id="animationcode"></span></label>
<input type="range" min="1" max="4" class="form-control-range" id="animation">
</div>
</div>
</div>
</body>
<script src="client/assets/js/colors.js"></script>
<script src="client/assets/js/catSettings.js"></script>
<script src="client/assets/js/catFactory.js"></script>
</html>
catSettings
var colors = Object.values(allColors())
var defaultDNA = {
"headcolor" : 10,
"mouthcolor" : 13,
"eyescolor" : 96,
"earscolor" : 10,
//Cattributes
"eyesShape" : 1,
"decorationPattern" : 1,
"decorationMidcolor" : 46,
"decorationSidescolor" : 21,
"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)
tailColor(colors[dna.mouthcolor],dna.mouthcolor)
$('#bodycolor2').val(dna.mouthcolor)
eyeColor(colors[dna.eyescolor],dna.eyescolor)
$('#bodycolor3').val(dna.eyescolor)
earColor(colors[dna.earscolor],dna.earscolor)
$('#bodycolor4').val(dna.earscolor)
eyeVariation(dna.eyesShape)
$('#eyeshape').val(dna.eyesShape)
decorationVariation(dna.decorationPattern)
$('#decorativepattern').val(dna.decorationPattern)
pattern(colors[dna.decorationMidcolor],dna.decorationMidcolor)
$('#patterncolor').val(dna.decorationMidcolor)
pattern2(colors[dna.decorationSidescolor],dna.decorationSidescolor)
$('#patterncolor2').val(dna.decorationSidescolor)
animationVariation(dna.animation)
$('#animation').val(dna.animation)
}
// Changing cat colors
$('#bodycolor').change(()=>{
var colorVal = $('#bodycolor').val()
headColor(colors[colorVal],colorVal)
})
$('#bodycolor2').change(()=>{
var colorVal = $('#bodycolor2').val()
tailColor(colors[colorVal],colorVal)
})
$('#bodycolor3').change(()=>{
var colorVal = $('#bodycolor3').val()
eyeColor(colors[colorVal],colorVal)
})
$('#bodycolor4').change(()=>{
var colorVal = $('#bodycolor4').val()
earColor(colors[colorVal],colorVal)
})
$('#eyeshape').change(()=>{
var shape = parseInt($('#eyeshape').val())
eyeVariation(shape)
})
$('#decorativepattern').change(()=>{
var decorative = parseInt($('#decorativepattern').val())
decorationVariation(decorative)
})
$('#patterncolor').change(()=>{
var colorVal = $('#patterncolor').val()
pattern(colors[colorVal],colorVal)
})
$('#pattern2color').change(()=>{
var colorVal = $('#pattern2color').val()
pattern2(colors[colorVal],colorVal)
})
$('#animation').change(()=>{
var animation = parseInt($('#animation').val())
animationVariation(animation)
})
catFactory
//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, .body').css('background', '#' + color) //This changes the color of the cat
$('#headcode').html('code: '+code) //This updates text of the badge next to the slider
$('#dnabody').html(code) //This updates the body color part of the DNA that is displayed below the cat
}
function tailColor(color,code) {
$(' .body, .tail').css('background', '#' + color)
$('#tailcode').html('code: '+code)
$('#dnamouth').html(code)
}
function eyeColor(color,code) {
$('.pupil').css('background', '#' + color)
$('#eyecode').html('code: '+code)
$('#dnaeyes').html(code)
}
function earColor(color,code) {
$('.rightear,.leftear').css('background', '#' + color)
$('#earcode').html('code: '+code)
$('#dnaears').html(code)
}
function pattern(color,code) {
$('.front').css('background', '#' + color)
$('#patterncolorcode').html('code: '+code)
$('#dnadecorationMid').html(code)
}
function pattern2(color,code) {
$('.rightleg, .leftleg, .neck').css('background', '#' + color)
$('#pattern2colorcode').html('code: '+code)
$('#dnadecorationSides').html(code)
}
//###################################################
//Functions below will be used later on in the project
//###################################################
function eyeVariation(num) {
$('#dnashape').html(num)
switch (num) {
case 1:
$('#eyeshapecode').html('center')
return eyesType()
case 2:
//normalEyes()
$('#eyeshapecode').html('below')
return eyesType1()
case 3:
//normalEyes()
$('#eyeshapecode').html('under')
return eyesType2()
case 4:
//normalEyes()
$('#eyeshapecode').html('right')
return eyesType3()
case 5:
//normalEyes()
$('#eyeshapecode').html('left')
return eyesType4()
}
}
function decorationVariation(num) {
$('#dnadecoration').html(num)
switch (num) {
case 1:
normalDecoration()
$('#decorativecode').html('Basic')
return normalDecoration()
case 2:
normalDecoration()
$('#decorativecode').html('Variation1')
return decoration()
case 3:
normalDecoration()
$('#decorativecode').html('Variation2')
return decoration2()
case 4:
normalDecoration()
$('#decorativecode').html('Variation3')
return decoration3()
}
}
function animationVariation(num){
$('#dnaanimation').html(num)
switch(num) {
case 1:
$('#animationcode').html('Legs Animation')
console.log('hola')
return animation1()
case 2:
$('#animationcode').html('Tail Animation')
return animation2()
case 3:
$('#animationcode').html('Head Animation')
return animation3()
case 4:
$('#animationcode').html('ears Animation')
return animation4()
}
}
/*async function normalEyes() {//prototype
await $('.eye').find('span').css('border', 'none')
}*/
function eyesType() {
$('.pupil').css('transform', 'translate(9%, 9%)')
}
function eyesType1() {
$('.pupil').css('transform', 'translate(7%, 18%)')
}
function eyesType2() {
$('.pupil').css('transform', 'translate(7%, 0%)')
}
function eyesType3() {
$('.pupil').css('transform', 'translate(17%, 9%)')
}
function eyesType4() {
$('.pupil').css('transform', 'translate(0%, 9%)')
}
/*async function normaldecoration() {//prototype
//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%" })
}*/
function normalDecoration(){
$('.front').css({'transform': 'translate(90%, 0%)',
"height": "50px",
"width": "80px",
"border-radius": "0 0 18px 46px"})
}
function decoration() {
$('.front').css({ "height": "100px", "width": "104px", "border-radius": "70px 150px 150px 250px"})
}
function decoration2() {
$('.front').css({"height": "156px", "width": "78px", "border-radius": "6px 34px 18px 46px"})
}
function decoration3(){
$('.front').css({"transform": "translate(27%, -63%)",
"height": "73px",
"width": "141px",
"border-radius": "100px 100px 58px 58px"})
}
function noanimation(){
$('.legs').removeClass("movingLegs")
$('.tail').removeClass('movingTail')
$('.head').removeClass("movingLegs")
$('.ears').removeClass("movingTail")
}
function animation1(){
noanimation()
$('.legs').addClass("movingLegs")
}
function animation2(){
noanimation()
$('.tail').addClass('movingTail')
}
function animation3(){
noanimation()
$('.head').addClass("movingLegs")
}
function animation4(){
noanimation()
$('.ears').addClass("movingTail")
}
animation css. Simple but works
.movingLegs{
animation: moveLegs 5s infinite;
}
@keyframes moveLegs{
0% {
transform: rotate(0deg);
}
30% {
transform: rotate(5deg);
}
60% {
transform: rotate(-5deg);
}
100% {
transform: rotate(0deg);
}
}
.movingTail{
animation: moveTail 5s infinite;
}
@keyframes moveTail {
0% {
transform: rotate3d(1, 1, 0, 0deg)
}
30%{
transform: rotate3d(1, 1, 0, 15deg)
}
60%{
transform: rotate3d(1, 1, 0, 35deg)
}
100%{
transform: rotate3d(1, 1, 0, 15deg)
}
Copied most of Filipās cats.css from previous lessons 
Here are the codes:
var colors = Object.values(allColors())
var defaultDNA = {
"headcolor" : 21,
"mouthColor" : 39,
"eyesColor" : 16,
"earsColor" : 42,
//Cattributes
"eyesShape" : 1,
"decorationPattern" : 1,
"decorationMidcolor" : 61,
"decorationSidescolor" : 61,
"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) //sets slider value
mouthColor(colors[dna.mouthColor],dna.mouthColor)
$('#bodycolor').val(dna.mouthColor)
eyeColor(colors[dna.eyesColor],dna.eyesColor)
$('#eyescolor').val(dna.eyesColor)
earColor(colors[dna.earsColor],dna.earsColor)
$('#earscolor').val(dna.earsColor)
eyeVariation(dna.eyesShape)
$('#eyeshape').val(dna.eyesShape)
hairStyle(dna.decorationPattern)
$('#hairstyle').val(dna.decorationPattern)
middleHairColor(colors[dna.decorationMidcolor],dna.decorationMidcolor)
$('#hairColor1').val(dna.decorationMidcolor)
sidesHairColor(colors[dna.decorationSidescolor],dna.decorationSidescolor)
$('#hairColor2').val(dna.decorationSidescolor)
animationVariation(dna.animation)
$('#animation').val(dna.animation)
}
// Changing cat colors
$('#bodycolor').change(()=>{
var colorVal = $('#bodycolor').val()
headColor(colors[colorVal],colorVal)
})
$('#mouthcolor').change( () => {
var colorVal = $('#mouthcolor').val()
mouthColor(colors[colorVal], colorVal)
})
$('#eyescolor').change( () => {
var colorVal = $('#eyescolor').val()
eyeColor(colors[colorVal], colorVal)
})
$('#earscolor').change( () => {
var colorVal = $('#earscolor').val()
earColor(colors[colorVal], colorVal)
})
$('#hairColor1').change( () => {
var colorVal = $('#hairColor1').val()
middleHairColor(colors[colorVal], colorVal)
})
$('#hairColor2').change( () => {
var colorVal = $('#hairColor2').val()
sidesHairColor(colors[colorVal], colorVal)
})
//Changing cat designs
$('#eyeshape').change( () => {
var shape = parseInt($('#eyeshape').val())
eyeVariation(shape)
})
$('#hairstyle').change( () => {
var style = parseInt($('#hairstyle').val())
hairStyle(style)
})
//Changing animation
$('#animation').change( () => {
var animationVal = parseInt($('#animation').val())
animationVariation(animationVal)
})
.movingHead{
animation: move 4s infinite;
}
@keyframes move {
0%{
transform: rotate(0deg);
}
25%{
transform: rotate(5deg);
}
50%{
transform: rotate(0deg);
}
75%{
transform: rotate(-5deg);
}
100%{
transform: rotate(0deg);
}
}
.leftEarwithHead{
animation: moveLeftEar 4s infinite;
}
@keyframes moveLeftEar {
0%{
transform: scale(-1, 1) rotate(0deg);
}
25%{
transform: scale(-1, 1) rotate(-5deg);
}
50%{
transform: scale(-1, 1) rotate(0deg);
}
75%{
transform: scale(-1, 1) rotate(5deg);
}
100%{
transform: scale(-1, 1) rotate(0deg);
}
}
.leftEarFast{
animation: leftOpposite 0.5s infinite;
}
@keyframes leftOpposite {
0%{
transform: scale(-1, 1) rotate(3deg);
}
50%{
transform: scale(-1, 1) rotate(-3deg);
}
100%{
transform: scale(-1, 1) rotate(3deg);
}
}
.rightEarFast{
animation: rightOpposite 0.5s infinite;
}
@keyframes rightOpposite {
0%{
transform: rotate(3deg);
}
50%{
transform: rotate(-3deg);
}
100%{
transform: rotate(3deg);
}
}
.movingTail{
animation: tail 0.2s infinite;
}
@keyframes tail {
0%{
transform: rotate(-43deg);
}
50%{
transform: rotate(-48deg);
}
100%{
transform: rotate(-43deg);
}
}
.headBop {
animation: bop 0.8s infinite;
}
@keyframes bop {
0%{
transform: translate(0px, 0px)
}
50%{
transform: translate(0px, 5px)
}
100%{
transform: translate(0px, 0px)
}
}
.faceZoom{
animation: zoom 2s infinite;
}
@keyframes zoom {
0%{
transform: scale(1)
}
50%{
transform: scale(1.15)
}
100%{
transform: scale(1)
}
}
.leftEyeGoofy{
animation: goofyEyesLeft 1.5s infinite;
}
@keyframes goofyEyesLeft {
0%{
left: 42px
}
25%{
left: 46px
}
50%{
left: 46px
}
75%{
left: 46px
}
100%{
left: 42px
}
}
.rightEyeGoofy{
animation: goofyEyesRight 1.5s infinite;
}
@keyframes goofyEyesRight {
0%{
left: 167px
}
25%{
left: 163px
}
50%{
left: 163px
}
75%{
left: 163px
}
100%{
left: 167px
}
}
.headTilt{
animation: tilt 1.5s infinite;
}
@keyframes tilt {
0%{
transform: rotate(0deg);
}
25%{
transform: rotate(-5deg);
}
50%{
transform: rotate(-5deg);
}
75%{
transform: rotate(-5deg);
}
100%{
transform: rotate(0deg);
}
}
.leftEarTilt{
animation: tiltLeftEar 1.5s infinite;
}
@keyframes tiltLeftEar {
0%{
transform: scale(-1, 1) rotate(0deg);
}
25%{
transform: scale(-1, 1) rotate(5deg);
}
50%{
transform: scale(-1, 1) rotate(5deg);
}
75%{
transform: scale(-1, 1) rotate(5deg);
}
100%{
transform: scale(-1, 1) rotate(0deg);
}
}
//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__ear--left-inside, .cat__ear--right-inside, .cat__tail').css('background', '#' + color)
$('#mouthcode').html('code: '+code)
$('#dnamouth').html(code)
}
function eyeColor(color,code) {
$('.cat__eye span, .cat__tail-end').css('background', '#' + color)
$('#eyecode').html('code: '+code)
$('#dnaeyes').html(code)
}
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)
$('#earcode').html('code: '+code)
$('#dnaears').html(code)
}
function middleHairColor(color,code) {
$('.cat__head-dots').css('background', '#' + color)
$('#middleHair').html('code: '+code)
$('#dnadecorationMid').html(code)
}
function sidesHairColor(color,code) {
$('.cat__head-dots_first, .cat__head-dots_second').css('background', '#' + color)
$('#sidesHair').html('code: '+code)
$('#dnadecorationSides').html(code)
}
function eyeVariation(num) {
$('#dnashape').html(num)
switch (num) {
case 1:
normalEyes()
$('#eyeName').html('Basic')
break
case 2:
normalEyes()
$('#eyeName').html('Chill')
return eyesType1()
case 3:
normalEyes()
$('#eyeName').html('Look Right')
return eyesType2()
case 4:
normalEyes()
$('#eyeName').html('Look Left')
return eyesType3()
case 5:
normalEyes()
$('#eyeName').html('Scary')
return eyesType4()
case 6:
normalEyes()
$('#eyeName').html('Cute1')
return eyesType5()
case 7:
normalEyes()
$('#eyeName').html('Cute2')
return eyesType6()
default:
break
}
}
async function normalEyes() {
await $('.cat__eye').find('span').css('border', 'none')
}
async function eyesType1() {
await $('.cat__eye').find('span').css('border-top', '15px solid')
}
async function eyesType2() {
await $('.cat__eye').find('span').css('border-left', '15px solid')
}
async function eyesType3() {
await $('.cat__eye').find('span').css('border-right', '15px solid')
}
async function eyesType4() {
await $('.cat__eye').find('span').css('border-right', '10px solid')
await $('.cat__eye').find('span').css('border-left', '10px solid')
await $('.cat__eye').find('span').css('border-top', '10px solid')
await $('.cat__eye').find('span').css('border-bottom', '10px solid')
}
async function eyesType5() {
await $('.cat__eye').find('span').css('border-bottom', '33px dashed white')
await $('.cat__eye').find('span').css('border-top', '3px dotted white')
}
async function eyesType6() {
await $('.cat__eye').find('span').css('border-left', '10px dashed white')
await $('.cat__eye').find('span').css('border-right', '10px dotted white')
}
function hairStyle(num) {
$('#dnadecoration').html(num)
switch (num) {
case 1:
$('#hairName').html('Basic')
style1()
break
case 2:
$('#hairName').html('Inverted')
style2()
break
case 3:
$('#hairName').html('Brush Up')
style3()
break
case 4:
$('#hairName').html('Mowhawk')
style4()
break
case 5:
$('#hairName').html('Long sides')
style5()
break
case 6:
$('#hairName').html('Side outs')
style6()
break
case 7:
$('#hairName').html('Long Middle')
style7()
default:
break
}
}
function style1() {
//Remove all style from other decorations
//In this way we can also use style1() 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%" })
}
function style2() {
$('.cat__head-dots').css({ "transform": "rotate(180deg)", "height": "48px", "width": "14px", "top": "1px", "border-radius": "0 0 50% 50%" })
$('.cat__head-dots_first').css({ "transform": "rotate(180deg)", "height": "35px", "width": "14px", "top": "1px", "border-radius": "50% 0 50% 50%" })
$('.cat__head-dots_second').css({ "transform": "rotate(180deg)", "height": "35px", "width": "14px", "top": "1px", "border-radius": "0 50% 50% 50%" })
}
function style3() {
$('.cat__head-dots').css({ "transform": "rotate(180deg)", "height": "48px", "width": "14px", "top": "-37px", "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%" })
}
function style4() {
$('.cat__head-dots').css({ "transform": "rotate(180deg)", "height": "48px", "width": "14px", "top": "-30px", "border-radius": "0 0 50% 50%" })
$('.cat__head-dots_first').css({ "transform": "rotate(-15deg)", "height": "35px", "width": "14px", "top": "1px", "border-radius": "50% 0 50% 50%" })
$('.cat__head-dots_second').css({ "transform": "rotate(15deg)", "height": "35px", "width": "14px", "top": "1px", "border-radius": "0 50% 50% 50%" })
}
function style5() {
$('.cat__head-dots').css({ "transform": "rotate(180deg)", "height": "48px", "width": "14px", "top": "1px", "border-radius": "0 0 50% 50%" })
$('.cat__head-dots_first').css({ "transform": "rotate(10deg)", "height": "70px", "width": "14px", "top": "1px", "border-radius": "50% 0 50% 50%" })
$('.cat__head-dots_second').css({ "transform": "rotate(-10deg)", "height": "70px", "width": "14px", "top": "1px", "border-radius": "0 50% 50% 50%" })
}
function style6() {
$('.cat__head-dots').css({ "transform": "rotate(0)", "height": "48px", "width": "14px", "top": "1px", "border-radius": "0 0 50% 50%" })
$('.cat__head-dots_first').css({ "transform": "rotate(12deg)", "height": "35px", "width": "14px", "top": "1px", "border-radius": "50% 0 50% 50%" })
$('.cat__head-dots_second').css({ "transform": "rotate(-12deg)", "height": "35px", "width": "14px", "top": "1px", "border-radius": "0 50% 50% 50%" })
}
function style7() {
$('.cat__head-dots').css({ "transform": "rotate(180deg)", "height": "70px", "width": "14px", "top": "-50px", "border-radius": "0 0 50% 50%" })
$('.cat__head-dots_first').css({ "transform": "rotate(12deg)", "height": "35px", "width": "14px", "top": "1px", "border-radius": "50% 0 50% 50%" })
$('.cat__head-dots_second').css({ "transform": "rotate(-12deg)", "height": "35px", "width": "14px", "top": "1px", "border-radius": "0 50% 50% 50%" })
}
function animationVariation(num) {
$('#dnaanimation').html(num);
switch (num) {
case 1:
$('#animationName').html('Moving Head')
animation1();
break;
case 2:
$('#animationName').html('Moving Ears')
animation2();
break;
case 3:
$('#animationName').html('Moving Tail')
animation3();
break;
case 4:
$('#animationName').html('Head Bop')
animation4();
break;
case 5:
$('#animationName').html('Zoom Face')
animation5();
break;
case 6:
$('#animationName').html('Wacky')
animation6();
break;
default:
break;
}
}
function resetAnimation() {
$("#head").removeClass("movingHead");
$("#leftEar").removeClass("leftEarwithHead");
$("#rightEar").removeClass("movingHead");
$("#leftEar").removeClass("leftEarFast");
$("#rightEar").removeClass("rightEarFast");
$("#tail").removeClass("movingTail");
$("#head").removeClass("headBop");
$("#head").removeClass("faceZoom");
$("#left-eye").removeClass("leftEyeGoofy");
$("#right-eye").removeClass("rightEyeGoofy");
$("#head").removeClass("headTilt");
$("#leftEar").removeClass("leftEarTilt");
$("#rightEar").removeClass("headTilt");
}
function animation1() {
//Reset animation here
resetAnimation();
$("#head").addClass("movingHead");
$("#leftEar").addClass("leftEarwithHead");
$("#rightEar").addClass("movingHead");
}
function animation2() {
resetAnimation();
$("#leftEar").addClass("leftEarFast");
$("#rightEar").addClass("rightEarFast");
}
function animation3() {
resetAnimation();
$("#tail").addClass("movingTail");
}
function animation4() {
resetAnimation();
$("#head").addClass("headBop");
}
function animation5() {
resetAnimation();
$("#head").addClass("faceZoom");
}
function animation6() {
resetAnimation();
$("#left-eye").addClass("leftEyeGoofy");
$("#right-eye").addClass("rightEyeGoofy");
$("#head").addClass("headTilt");
$("#leftEar").addClass("leftEarTilt");
$("#rightEar").addClass("headTilt");
}
Iām not really into CSS ( just did 6 plain animations) but this was fun! 
So what I did was soft fork Crypto Kitty and fork centrifuge to have product orders serve as NFTs. Here is my animation for my product order.
html{
box-sizing: border-box;
overflow-y: scroll;
overflow:visible;
}
body{
background-color:gray;
}
@keyframes example {
from {background-color: rgb(22,22,80);}
to {background-color: blueviolet;}
}
#order{
background-color:rgb(22, 22, 80);
width:350px;
height:350px;
text-align: center;
border-radius: 10%;
animation-name: example;
animation-fill-mode: both;
animation-duration: 5s;
animation-iteration-count: 3;
border:10%;
margin:10px;
margin-right: 10px;
margin-left: -10px;
float:initial;
}
So, here is the animated kitty 
<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/cattributes.css">
<link rel="stylesheet" href="assets/css/colors.css">
<link rel="stylesheet" href="assets/css/factory.css">
<link rel="stylesheet" href="assets/css/frontend.css">
<link rel="stylesheet" href="assets/css/animations.css">
</head>
<body>
<div class="container p-5" style="margin-top: 12vh;margin-bottom: 10vh;">
<div align="center">
<h1 class="c-white">Kitties-Factory</h1>
<p class="c-white">Create your custom Kitty</p>
</div>
<div class="row">
<div class="col-lg-4 catBox m-2 light-b-shadow">
<div class="cat">
<div class="tail"></div>
<div class="tail-mask"></div>
<div class="tail-end"></div>
<div class="ears">
<div class="ear left_ear">
<div class="inner_ear left_inner_ear"></div>
</div>
<div class="ear right_ear">
<div class="inner_ear right_inner_ear"></div>
</div>
</div>
<div id="head" class="cat_head" >
<div class="eyes">
<div class="eye">
<div class="pupils">
<span class="inner_eye_big"></span>
<span class="inner_eye_small"></span>
<span class="inner_eye_smallest"></span>
</div>
</div>
<div class="eye">
<div class="pupils">
<span class="inner_eye_big"></span>
<span class="inner_eye_small"></span>
<span class="inner_eye_smallest"></span>
</div>
</div>
</div>
<div class="nose"></div>
<div class=cat_mouth-contour></div>
<div class="cat_mouth-left"></div>
<div class="cat_mouth-right"></div>
<div class="cat_whiskers-left"></div>
<div class="cat_whiskers-right"></div>
</div>
<div class="body">
<div class="collar">
<div class="collar_shape"></div>
</div>
<div class="belly"></div>
<div class="feet">
<div class="foot">
<div class="inner_foot_small1"></div>
<div class="inner_foot_small2"></div>
<div class="inner_foot_small3"></div>
<div class="inner_foot_big"></div>
</div>
<div class="foot">
<div class="inner_foot_small4"></div>
<div class="inner_foot_small5"></div>
<div class="inner_foot_small6"></div>
<div class="inner_foot_big"></div>
</div>
</div>
</div>
</div>
<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="dnacollarShape"></span>
<span id="dnashapeColor"></span>
<span id="dnacollarColor"></span>
<span id="dnaanimation"></span>
<span id="dnaspecial"></span>
</b>
</div>
</div>
<div class="col-lg-7 cattributes m-2 light-b-shadow">
<!-- Cat colors -->
<div id="catColors">
<div class="form-group">
<label for="formControlRange"><b>Head | body</b><span class="badge badge-dark ml-2" id="headcode"></span></label>
<input type="range" min="10" max="98" class="form-control-range" id="bodycolor">
</div>
<div class="form-group">
<label for="formControlRange"><b>Mouth | belly</b><span class="badge badge-dark ml-2" id="bellycode"></span></label>
<input type="range" min="10" max="98" class="form-control-range" id="mouthcolor">
</div>
<div class="form-group">
<label for="formControlRange"><b>Eyes</b><span class="badge badge-dark ml-2" id="eyescode"></span></label>
<input type="range" min="10" max="98" class="form-control-range" id="eyescolor">
</div>
<div class="form-group">
<label for="formControlRange"><b>Ears | Paws</b><span class="badge badge-dark ml-2" id="earscode"></span></label>
<input type="range" min="10" max="98" class="form-control-range" id="earscolor">
</div>
<div class="form-group">
<label for="formControlRange"><b>Eyes shape</b><span class="badge badge-dark ml-2" id="eyeName"></span></label>
<input type="range" min="1" max="4" class="form-control-range" id="eyeshape">
</div>
<div class="form-group">
<label for="formControlRange"><b>Collar shape</b><span class="badge badge-dark ml-2" id="shapeName"></span></label>
<input type="range" min="1" max="5" class="form-control-range" id="collarshape">
</div>
<div class="form-group">
<label for="formControlRange"><b>Collar shape color</b><span class="badge badge-dark ml-2" id="shapecode"></span></label>
<input type="range" min="10" max="98" class="form-control-range" id="shapecolor">
</div>
<div class="form-group">
<label for="formControlRange"><b>Collar color</b><span class="badge badge-dark ml-2" id="collarcode"></span></label>
<input type="range" min="10" max="98" class="form-control-range" id="collarcolor">
</div>
<div class="form-group">
<label for="formControlRange"><b>Animation</b><span class="badge badge-dark ml-2" id="animationName"></span></label>
<input type="range" min="1" max="7" class="form-control-range" id="animation">
</div>
</div>
</div>
</div>
<br>
</div>
</div>
<footer align="left">
<p>Ivan on Tech Academy 2021</p>
</footer>
</body>
<script src="assets/js/colors.js"></script>
<script src="assets/js/catSettings.js"></script>
<script src="assets/js/catFactory.js"></script>
</html>
.movingHead{
animation: moveHead 3s infinite;
}
.movingEars{
animation: moveEars 5s infinite;
}
.movingEyes{
animation: moveEyes 3s infinite;
}
.movingFeet{
animation: moveFeet 3s infinite;
}
.movingBelly{
animation: moveBelly 3s infinite;
}
.movingTail{
animation: moveTail 3s infinite;
}
@keyframes moveHead{
0%{
transform: rotate(0deg);
}
30%{
transform: rotate(5deg);
}
60%{
transform: rotate(-5deg);
}
100%{
transform: rotate(0deg);
}
}
@keyframes moveEars{
0%{
transform: rotate(0deg);
}
30%{
transform: rotate(5deg);
}
60%{
transform: rotate(-5deg);
}
100%{
transform: rotate(0deg);
}
}
@keyframes moveEyes{
0%{
transform: scale(0.7);
}
30%{
transform: scale(1);
}
60%{
transform: scale(1.5);
}
100%{
transform: scale(0.7);
}
}
@keyframes moveFeet{
0%{
transform: scale(0.7);
}
30%{
transform: scale(1);
}
60%{
transform: scale(2);
}
100%{
transform: scale(0.7);
}
}
@keyframes moveBelly{
0%{
transform: rotate(0deg);
}
30%{
transform: rotate(10deg);
}
60%{
transform: rotate(-10deg);
}
100%{
transform: rotate(0deg);
}
}
@keyframes moveTail{
0%{
transform: rotate(0deg);
}
30%{
transform: rotate(10deg);
}
60%{
transform: rotate(-10deg);
}
100%{
transform: rotate(0deg);
}
}
//Random color
function getColor() {
var randomColor = Math.floor(Math.random() * 16777215).toString(16);
return randomColor
}
function genColors(){
var colors = []
for(var i = 10; i < 99; i ++){
var color = getColor()
colors[i] = color
}
return colors
}
//This function code needs to modified so that it works with Your cat code.
function headcolor(color,code) {
$('.cat_head, .body').css('background', '#' + color) //This changes the color of the cat
$('#headcode').html('code: '+code) //This updates text of the badge next to the slider
$('#dnabody').html(code) //This updates the body color part of the DNA that is displayed below the cat
}
function mouthColor(color,code) {
$('.cat_mouth-contour, .belly').css('background', '#' + color) //This changes the color of the cat
$('#bellycode').html('code: '+code) //This updates text of the badge next to the slider
$('#dnamouth').html(code) //This updates the body color part of the DNA that is displayed below the cat
}
function eyesColor(color,code) {
$('.eye').css('background', '#' + color) //This changes the color of the cat
$('#eyescode').html('code: '+code) //This updates text of the badge next to the slider
$('#dnaeyes').html(code) //This updates the body color part of the DNA that is displayed below the cat
}
function earsColor(color,code) {
$('.ear, .foot').css('background', '#' + color) //This changes the color of the cat
$('#earscode').html('code: '+code) //This updates text of the badge next to the slider
$('#dnaears').html(code) //This updates the body color part of the DNA that is displayed below the cat
}
function shapeColor(color,code) {
$('.collar_shape').css('background', '#' + color) //This changes the color of the cat
$('#shapecode').html('code: '+code) //This updates text of the badge next to the slider
$('#dnashapeColor').html(code) //This updates the body color part of the DNA that is displayed below the cat
}
function collarColor(color,code) {
$('.collar').css('background', '#' + color) //This changes the color of the cat
$('#collarcode').html('code: '+code) //This updates text of the badge next to the slider
$('#dnacollarColor').html(code) //This updates the body color part of the DNA that is displayed below the cat
}
//###################################################
//Functions below will be used later on in the project
//###################################################
function eyeVariation(num) {
$('#dnashape').html(num)
switch (num) {
case 1:
normalEyes()
$('#eyeName').html('Basic')
break
case 2:
eyesType1()
$('#eyeName').html('Chill')
break
case 3:
eyesType2()
$('#eyeName').html('Scared')
break
case 4:
eyesType3()
$('#eyeName').html('Looks up')
break
}
}
function normalEyes() {
$('.eye').css('border', 'none')
}
function eyesType1() {
normalEyes()
$('.eye').css('border-top', '8px solid')
$('.inner_eye_big').css('width', '7px')
$('.inner_eye_big').css('left', '15px')
$('.inner_eye_small').css('display', 'none')
$('.inner_eye_smallest').css('display', 'none')
}
function eyesType2() {
normalEyes()
$('.pupils').css('width', '10px')
$('.pupils').css('left', '16px')
$('.inner_eye_big').css('display', 'none')
$('.inner_eye_small').css('display', 'none')
$('.inner_eye_smallest').css('display', 'none')
}
function eyesType3() {
normalEyes()
$('.pupils').css('width', '24px')
$('.pupils').css('left','14px' )
$('.pupils').css('top', '0px')
$('.inner_eye_big').css('width', '7px')
$('.inner_eye_big').css('left', '15px')
$('.inner_eye_small').css('display', 'none')
$('.inner_eye_smallest').css('display', 'none')
}
function collarVariation(num) {
$('#dnacollarShape').html(num)
switch (num) {
case 1:
$('#shapeName').html('Circle')
normalCollar()
break
case 2:
$('#shapeName').html('Rectangle')
collarShape1()
break
case 3:
$('#shapeName').html('Diamond')
collarShape2()
break
case 4:
$('#shapeName').html('Oval')
collarShape3()
break
case 5:
$('#shapeName').html('None')
collarShape4()
break
}
}
function normalCollar() {
$('.collar_shape').css('background-color', 'rgb(146, 201, 182)')
$('.collar_shape').css('width', '25px')
$('.collar_shape').css('height', '25px')
$('.collar_shape').css('border-radius', '50%')
$('.collar_shape').css('position', 'relative')
$('.collar_shape').css('top', '6px')
$('.collar_shape').css('left', '28px')
$('.collar_shape').css('transform', 'rotate(-5deg)')
}
function collarShape1() {
normalCollar()
$('.collar_shape').css('border-radius', '0px')
$('.collar_shape').css('width', '30px')
$('.collar_shape').css('left', '30px')
$('.collar_shape').css('top', '6px')
$('.collar_shape').css('transform', 'rotate(-1deg)')
}
function collarShape2() {
normalCollar()
$('.collar_shape').css('border-radius', '0px')
$('.collar_shape').css('width', '20px')
$('.collar_shape').css('height', '20px')
$('.collar_shape').css('left', '32px')
$('.collar_shape').css('top', '11px')
$('.collar_shape').css('transform', 'rotate(45deg)')
}
function collarShape3() {
normalCollar()
$('.collar_shape').css('border-radius', '100px/ 50px')
$('.collar_shape').css('width', '29px')
$('.collar_shape').css('height', '14px')
$('.collar_shape').css('left', '30px')
$('.collar_shape').css('top', '14px')
$('.collar_shape').css('transform', 'rotate(90deg)')
}
function collarShape4() {
normalCollar()
$('.collar_shape').css('display', 'none')
}
function animationVariation(num) {
$('#dnaanimation').html(num)
switch (num) {
case 1:
animationType1()
$('#animationName').html('Head move')
break
case 2:
animationType2()
$('#animationName').html('Ears move')
break
case 3:
animationType3()
$('#animationName').html('Big eyes')
break
case 4:
animationType4()
$('#animationName').html('Feet move')
break
case 5:
animationType5()
$('#animationName').html('Jiggly belly')
break
case 6:
animationType6()
$('#animationName').html('Tail wiggle')
break
case 7:
animationType7()
$('#animationName').html('No animation')
break
}}
function animationType1(){
$(".cat_head").addClass("movingHead");
}
function animationType2(){
removeAnimation()
$(".ears").addClass("movingEars");
}
function animationType3(){
removeAnimation()
$(".eyes").addClass("movingEyes");
}
function animationType4(){
removeAnimation()
$(".foot").addClass("movingFeet");
}
function animationType5(){
removeAnimation()
$(".belly").addClass("movingBelly");
}
function animationType6(){
removeAnimation()
$(".tail").addClass("movingTail");
}
function animationType7(){
removeAnimation()
}
function removeAnimation(){
$(".cat_head").removeClass("movingHead")
$(".ears").removeClass("movingEars")
$(".eyes").removeClass("movingEyes")
$(".foot").removeClass("movingFeet")
$(".belly").removeClass("movingBelly")
$(".tail").removeClass("movingTail")
}
var colors = Object.values(allColors())
var defaultDNA = {
"headcolor" : 10,
"mouthColor" : 13,
"eyesColor" : 96,
"earsColor" : 10,
//Cattributes
"eyesShape" : 1,
"collarShape" : 1,
"shapeColor" : 13,
"collarColor" : 13,
"animation" : 1,
"lastNum" : 1
}
// when page load
$( document ).ready(function() {
$('#dnabody').html(defaultDNA.headcolor);
$('#dnamouth').html(defaultDNA.mouthColor);
$('#dnaeyes').html(defaultDNA.eyesColor);
$('#dnaears').html(defaultDNA.earsColor);
$('#dnashape').html(defaultDNA.eyesShape);
$('#dnacollarShape').html(defaultDNA.collarShape);
$('#dnashapeColor').html(defaultDNA.shapeColor);
$('#dnacollarColor').html(defaultDNA.collarColor);
$('#dnaanimation').html(defaultDNA.animation);
$('#dnaspecial').html(defaultDNA.lastNum);
renderCat(defaultDNA);
});
function getDna(){
var dna = ''
dna += $('#dnabody').html()
dna += $('#dnamouth').html()
dna += $('#dnaeyes').html()
dna += $('#dnaears').html()
dna += $('#dnashape').html()
dna += $('#dnacollarShape').html()
dna += $('#dnashapeColor').html()
dna += $('#dnacollarColor').html()
dna += $('#dnaanimation').html()
dna += $('#dnaspecial').html()
return parseInt(dna)
}
function renderCat(dna){
headcolor(colors[dna.headcolor],dna.headcolor)
$('#bodycolor').val(dna.headcolor)
mouthColor(colors[dna.mouthColor], dna.mouthColor)
$('#mouthcolor').val(dna.mouthColor)
eyesColor(colors[dna.eyesColor], dna.eyesColor)
$('#eyescolor').val(dna.eyesColor)
earsColor(colors[dna.earsColor], dna.earsColor)
$('#earscolor').val(dna.earsColor)
eyeVariation(dna.eyesShape)
$('#eyeshape').val(dna.eyesShape)
collarVariation(dna.collarShape)
$('#collarshape').val(dna.collarShape)
shapeColor(colors[dna.shapeColor], dna.shapeColor)
$('#shapecolor').val(dna.shapeColor)
collarColor(colors[dna.collarColor], dna.collarColor)
$('#collarcolor').val(dna.collarColor)
animationVariation(dna.animation)
$('#animation').val(dna.animation)
}
// Changing cat colors
$('#bodycolor').change(()=>{
var colorVal = $('#bodycolor').val()
headcolor(colors[colorVal],colorVal)
})
$('#mouthcolor').change(()=>{
var colorVal = $('#mouthcolor').val()
mouthColor(colors[colorVal],colorVal)
})
$('#eyescolor').change(()=>{
var colorVal = $('#eyescolor').val()
eyesColor(colors[colorVal],colorVal)
})
$('#earscolor').change(()=>{
var colorVal = $('#earscolor').val()
earsColor(colors[colorVal],colorVal)
})
$('#eyeshape').change(()=>{
var shape = parseInt($('#eyeshape').val())
eyeVariation(shape)
})
$('#collarshape').change(()=>{
var shape= parseInt($('#collarshape').val())
collarVariation(shape)
})
$('#shapecolor').change(()=>{
var colorVal = $('#shapecolor').val()
shapeColor(colors[colorVal],colorVal)
})
$('#collarcolor').change(()=>{
var colorVal = $('#collarcolor').val()
collarColor(colors[colorVal],colorVal)
})
$('#animation').change(()=>{
var animationVal= parseInt($('#animation').val())
animationVariation(animationVal)
})
All done, good fun creating the animations.
animations.css
.movingHead{
animation: moveHead 3s infinite;
}
@keyframes moveHead{
0%{
transform: rotate(0deg);
}
30%{
transform: rotate(5deg);
}
60%{
transform: rotate(-5deg);
}
100%{
transform: rotate(0deg);
}
}
.movingTail{
animation: moveTail 3s infinite ;
}
@keyframes moveTail{
0%{
transform: rotate(-122deg);
}
30%{
transform: rotate(-111deg);
}
60%{
transform: rotate(-117deg);
}
100%{
transform: rotate(-122deg);
}
}
.moveEars{
animation: moveEars 3s infinite;
}
@keyframes moveEars{
0%{
transform: rotate(-3deg);
}
30%{
transform: rotate(0deg);
}
60%{
transform: rotate(3deg);
}
100%{
transform: rotate(-3deg);
}
}
.movingIris{
animation: moveIris 2s infinite;
}
@keyframes moveIris{
0%{
left: -86;
}
50%{
left: -98;
}
100%{
left: -86;
}
}
.movingIris2{
animation: moveIris2 2s infinite;
}
@keyframes moveIris2{
0%{
left: 14;
}
50%{
left: 2;
}
100%{
left: 14;
}
This was fun adding animations to my kitty 
lol
index.html
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ishoboy kitties </title>
<script type="text/javascript" src="assets/js/jquery-3.4.1.js"></script>
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<script src="assets/bootstrap/js/popper.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="assets/css/animations.css">
<link rel="stylesheet" href="assets/css/mystyle.css">
<link rel="stylesheet" href="assets/css/cats.css">
<link rel="stylesheet" href="assets/css/colors.css">
<link rel="stylesheet" href="assets/css/factory.css">
<link rel="stylesheet" href="assets/css/frontend.css">
</head>
<body>
<div class="container p-5" style="margin-top: 12vh;margin-bottom: 10vh;">
<div align="center">
<h1 class="c-white">Kitties-Factory</h1>
<p class="c-white">Create your customized Crypto Kitty</p>
</div>
<div class="row">
<div class="col-lg-4 catBox m-2 light-b-shadow">
<div class="cat">
<div id="head" class="ears">
<div class="ear left_ear">
<div class="ear left_inside"></div>
</div>
<div class="ear right_ear">
<div class="ear right_inside"></div>
</div>
</div>
<div id="body">
<div id="face" class="cat__eye">
<div class="cat__eye--left">
<span class="pupil-left"></span>
</div>
<div class="cat__eye--right">
<span class="pupil-right"></span>
</div>
</div>
<div id="midDot" class="cat__head-dots">
<div id="leftDot" class="cat__head-dots_first"></div>
<div id="rightDot" class="cat__head-dots_second"></div>
</div>
<div id="nasal" class="nose"></div>
<div class="mouth_right"></div>
<div class="mouth_left"></div>
<div id="whiskerers" class="whiskers">
<div class="whisker_left1"></div>
<div class="whisker_left2"></div>
<div class="whisker_left3"></div>
<div class="whisker_left4"></div>
<div class="whisker_left5"></div>
<div class="whisker_right1"></div>
<div class="whisker_right2"></div>
<div class="whisker_right3"></div>
<div class="whisker_right4"></div>
<div class="whisker_right5"></div>
</div>
<div id="lips" class="chin"></div>
<div class = "belly">
<div class="belly_2">
</div>
</div>
<div class="foot_left">
</div>
<div class="foot_right">
</div>
</div>
<div class="body_2">
<div id="tails" class="tail">
</div>
</div>
</div>
<br>
<div class="dnaDiv" id="catDNA">
<b>
DNA:
<!-- Colors -->
<span id="dnabody"></span>
<span id="dnamouth"></span>
<span id="dnaeyes"></span>
<span id="dnaears"></span>
<!-- Cattributes -->
<span id="dnashape"></span>
<span id="dnadecoration"></span>
<span id="dnadecorationMid"></span>
<span id="dnadecorationSides"></span>
<span id="dnadanimation"></span>
<span id="dnaspecial"></span>
</b>
</div>
</div>
<div class="col-lg-7 cattributes m-2 light-b-shadow">
<!-- Cat colors -->
<div id="catColors">
<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>
<div class="form-group">
<label for="formControlRange"><b>Tummy and Back<//+b><span class="badge badge-dark ml-2" id="tummycode"></span></label>
<input type="range" min="10" max="98" class="form-control-range" id="tummycolor">
</div>
<div class="form-group">
<label for="formControlRange"><b>Ears</b><span class="badge badge-dark ml-2" id="earscode"></span></label>
<input type="range" min="10" max="98" class="form-control-range" id="earscolor">
</div>
<div class="form-group">
<label for="formControlRange"><b>Mouth and Tail</b><span class="badge badge-dark ml-2" id="mouthTailcode"></span></label>
<input type="range" min="10" max="98" class="form-control-range" id="mouthTailcolor">
</div>
<div class="form-group">
<label for="formControlRange"><b>Eyes shape</b><span class="badge badge-dark ml-2" id="eyeName"></span></label>
<input type="range" min="1" max="5" class="form-control-range" id="eyeshape">
</div>
<div class="form-group">
<label for="formControlRange"><b>Decorative pattern</b><span class="badge badge-dark ml-2" id="decorativeName"></span></label>
<input type="range" min="1" max="5" class="form-control-range" id="decorativeShape">
</div>
<div class="form-group">
<label for="formControlRange"><b>Middle Shade Color</b><span class="badge badge-dark ml-2" id="firstCombination"></span></label>
<input type="range" min="10" max="98" class="form-control-range" id="midColors">
</div>
<div class="form-group">
<label for="formControlRange"><b>Side Shade Colors</b><span class="badge badge-dark ml-2" id="secondCombination"></span></label>
<input type="range" min="10" max="98" class="form-control-range" id="sideColors">
</div>
<div class="form-group">
<label for="formControlRange"><b>Animation</b><span class="badge badge-dark ml-2" id="animation"></span></label>
<input type="range" min="1" max="8" class="form-control-range" id="animationChange">
</div>
</div>
<br>
</div>
</div>
<footer align="left">
<p>Ishoboy Kitty Factory 2021</p>
</footer>
</body>
<script src="assets/js/colors.js"></script>
<script src="assets/js/catSettings.js"></script>
<script src="assets/js/catFactory.js"></script>
</html>
catSettings.js
var colors = Object.values(allColors())
var defaultDNA = {
//"headcolor" : 10,
"mouthColor" : 13,
"eyesColor" : 96,
//"earscolor" : 0,
//"mouthTailcolor" : 10,
//"tummycolor" : 0,
//Cattributes
"eyesShape" : 1,
"decorationPattern" : 1,
"decorationMidcolor" : 13,
"decorationSidescolor" : 13,
"animation" : 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)
$('#dnadanimation').html(defaultDNA.animation)
$('#dnaspecial').html(defaultDNA.lastNum)
renderCat(defaultDNA)
});
function defaultCat(){
renderCat(defaultDNA)
}
function randomDNA(){
var dnaStr = string(Math.floor(Math.random()*1E16))
//Colors
}
function getDna(){
var dna = ''
dna += $('#dnabody').html()
dna += $('#dnamouth').html()
dna += $('#dnaeyes').html()
dna += $('#dnaears').html()
dna += $('#dnashape').html()
dna += $('#dnadecoration').html()
dna += $('#dnadecorationMid').html()
dna += $('#dnadecorationSides').html()
dna += $('#dnaanimation').html()
dna += $('#dnaspecial').html()
return parseInt(dna)
}
function renderCat(dna){
headColor(colors[dna.headcolor],dna.headcolor)
$('#bodycolor').val(dna.headcolor)
tummyColor(colors[dna.tummycolor],dna.tummycolor)
$('#tummycolor').val(dna.tummycolor)
earsColor(colors[dna.earscolor],dna.earscolor)
$('#earscolor').val(dna.earscolor)
mouthTailColor(colors[dna.mouthTailcolor],dna.mouthTailcolor)
$('#mouthTailcolor').val(dna.mouthTailcolor)
eyesShape(shape[dna.eyesShape],dna.eyesShape)
$('#eyeshape').val(dna.eyesShape)
decorationPattern(pattern[dna.decorationPattern],dna.decorationPattern)
$('#decorativeShape').val(dna.decorationPattern)
decorationMidcolor(colors[dna.decorationMidcolor],dna.decorationMidcolor)
$('#midColors').val(dna.decorationMidcolor)
decorationSidescolor(colors[dna.decorationSidescolor],dna.decorationSidescolor)
$('#sideColors').val(dna.decorationSidescolor)
animatioon(dna.dnadanimation)
$('#animationChange').val(dna.dnadanimation)
}
// Changing cat colors
$('#bodycolor').change(()=>{
var colorVal = $('#bodycolor').val()
headColor(colors[colorVal],colorVal)
})
$('#tummycolor').change(()=>{
var colorVal = $('#tummycolor').val()
tummyColor(colors[colorVal],colorVal)
})
$('#earscolor').change(() => {
var colorVal = $('#earscolor').val()
earsColor(colors[colorVal],colorVal)
})
$('#mouthTailcolor').change(() => {
var colorVal = $('#mouthTailcolor').val()
mouthTailColor(colors[colorVal],colorVal)
})
$('#midColors').change(() => {
var colorVal = parseInt($('#midColors').val())
midColorCombinations(colors[colorVal],colorVal)
})
$('#sideColors').change(() => {
var colorVal = parseInt($('#sideColors').val())
sideColorCombination(colors[colorVal],colorVal)
})
//cattributes
$('#eyeshape').change(()=>{
var shape = parseInt($('#eyeshape').val())
eyeVariation(shape)
})
$('#decorativeShape').change(() => {
var pattern = parseInt($('#decorativeShape').val())
decorationVariation(pattern)
})
//animation
$('#animationChange').change(() => {
var animationVal = parseInt($('#animationChange').val())
animatioon(animationVal)
})
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, .belly').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 tummyColor(color,code) {
$('.belly_2, .body_2').css('background', '#' + color)
$('#tummycode').html(code)
$('#dnabody').html(code)
}
function earsColor(color,code) {
$('.ear').css('background', '#' + color)
$('#earscode').html(code)
$('#dnaears').html(code)
}
function mouthTailColor(color,code) {
$('.mouth_right, .mouth_left, .tail').css('background', '#' + color)
$('#mouthTailcode').html(code)
$('#dnamouth').html(code)
}
function midColorCombinations(color,code) {
$('.cat__head-dots').css('background', '#' + color)
$('#firstCombination').html('code:' +code)
$('#dnadecorationMid').html(code)
}
function sideColorCombination(color,code) {
$('.cat__head-dots_second , .cat__head-dots_first ').css('background', '#' + color)
$('#secondCombination').html('code:' +code)
$('#dnadecorationSides').html(code)
}
//###################################################
//Functions below will be used later on in the project
//###################################################
function eyeVariation(num) {
$('#dnashape').html(num)
switch (num) {
case 1:
normalEyes()
$('#eyeName').html('Normal')
break
case 2:
normalEyes()
$('#eyeName').html('lookingDown')
eyesType1()
break
case 3:
normalEyes()
$('#eyeName').html('lookingUp')
eyesType2()
break
case 4:
normalEyes()
$('#eyeName').html('LOOK to the RIGHT')
eyesType3()
break
case 5:
normalEyes()
$('#eyeName').html('LOOK to the LEFT')
eyesType4()
break
default:
normalEyes()
//console.log('None of the above choices')
}
}
function decorationVariation(num) {
$('#dnadecoration').html(num)
switch (num) {
case 1:
$('#decorativeName').html('Normal')
normaldecoration()
break
case 2:
$('#decorativeName').html('Tribal')
tribaldecoration()
break
case 3:
$('#decorativeName').html('Long Bangs')
longBangsdecoration()
break
case 4:
$('#decorativeName').html('antenna')
antennaDecoration()
break
case 5:
$('#decorativeName').html('Crown')
crownDecoration()
break
}
}
function animatioon(num) {
$('#dnadanimation').html(num)
switch (num) {
case 1:
animationType1();
$('#animation').html('Moving Ears')
break;
case 2:
animationType2();
$('#animation').html('Crazy Eyes')
break;
case 3:
animationType3();
$('#animation').html('Rolling Nose')
break;
case 4:
animationType4();
$('#animation').html('Close Up')
break;
case 5:
animationType5();
$('#animation').html('Mouth moving')
break;
case 6:
animationType6();
$('#animation').html('Tail moving')
break;
case 7:
animationType7()
$('#animation').html('Whiskers moving');
break;
case 8:
animationType8()
$('#animation').html('No Animation');
break;
}
}
function animationType1() {
resetAnimation();
$("#head").addClass("movingEars");
//Remove the rest of the animations that you will implement
}
function animationType2(){
resetAnimation();
$("#face").addClass("movingEyes");
}
function animationType3(){
resetAnimation();
$('#nasal').addClass("movingNose");
}
function animationType4(){
resetAnimation();
$("#body").addClass("scalingBody");
}
function animationType5(){
resetAnimation();
$("#lips").addClass("movingMouth");
}
function animationType6(){
resetAnimation();
$("#tails").addClass("movingTail");
}
function animationType7() {
resetAnimation();
$('#whiskerers').addClass("movingWhiskers");
}
function animationType8() {
resetAnimation();
}
function resetAnimation() {
$("#head").removeClass("movingEars");
$("#face").removeClass("movingEyes");
$('#nasal').removeClass("movingNose");
$("#body").removeClass("scalingBody");
$("#lips").removeClass("movingMouth");
$("#tails").removeClass("movingTail");
$('#whiskerers').removeClass("movingWhiskers");
}
//Eyes change shape
function normalEyes() {
$('.cat__eye').find('span').css('border', 'none')
}
function eyesType1() {
$('.cat__eye').find('span').css('border-top', '15px solid')
}
function eyesType2() {
$('.cat__eye').find('span').css('border-bottom', '15px solid')
}
function eyesType3() {
$('.cat__eye').find('span').css('border-left', '15px solid')
}
function eyesType4() {
$('.cat__eye').find('span').css('border-right', '15px solid')
}
async function normaldecoration() {
//Remove all style from other decorations
//In this way we can also use normalDecoration() to reset the decoration style
$('.cat__head-dots').css({ "transform": "rotate(0deg)", "height": "48px", "width": "14px", "top": "1px", "border-radius": "0 0 50% 50%" })
$('.cat__head-dots_first').css({ "transform": "rotate(0deg)", "height": "35px", "width": "14px", "top": "1px", "border-radius": "50% 0 50% 50%" })
$('.cat__head-dots_second').css({ "transform": "rotate(0deg)", "height": "35px", "width": "14px", "top": "1px", "border-radius": "0 50% 50% 50%" })
}
async function tribaldecoration() {
$('.cat__head-dots').css({ "transform": "rotate(179deg)", "height": "56px", "width": "13px", "top": "1px", "border-radius": "0 0 50% 50%", "left": "105px" })
$('.cat__head-dots_first').css({ "transform": "rotate(32deg)", "height": "54px", "width": "14px", "top": "-4px", "border-radius": "50% 0 50% 50%", "left": "-31px" })
$('.cat__head-dots_second').css({ "transform": "rotate(333deg)", "height": "54px", "width": "13px", "top": "-2px", "border-radius": "0 50% 50% 50%", "left": "28px" })
}
async function longBangsdecoration() {
$('.cat__head-dots').css({ "transform": "rotate(179deg)", "width": "13px", "top": "1px", "left": "102px", "height": "128px"})
$('.cat__head-dots_first').css({ "transform": "rotate(184deg)", "height": "140px", "width": "14px", "top": "-13px", "left": "18px" })
$('.cat__head-dots_second').css({"transform": "rotate(176deg)", "height": "142px", "width": "14px", "top": "-14px", "left": "-19px" })
}
function antennaDecoration() {
$('.cat__head-dots').css({ "transform": "rotate(357deg)", "width": "13px", "top": "-22px", "left": "101px", "height": "37px"})
$('.cat__head-dots_first').css({ "transform": "rotate(220deg)", "height": "42px", "width": "14px", "top": "-37px", "left": "18px" })
$('.cat__head-dots_second').css({"transform": "rotate(133deg)", "height": "47px", "width": "14px", "top": "-40px", "left": "-19px" })
}
function crownDecoration() {
$('.cat__head-dots').css({ "transform": "rotate(178deg)", "width": "13px", "top": "-47px", "left": "104px", "height": "47px"})
$('.cat__head-dots_first').css({ "transform": "rotate(349deg)", "height": "46px", "width": "14px", "top": "-3px", "left": "18px" })
$('.cat__head-dots_second').css({"transform": "rotate(18deg)", "height": "48px", "width": "14px", "top": "-5px", "left": "-21px" })
}
animations.css
.movingEars{
animation: moveEars 2s infinite;
}
.movingEyes{
animation: moveEyes 4s infinite;
}
.movingNose{
animation: moveNose 1s infinite;
}
.scalingBody{
animation: bodyScale 1s infinite;
}
.movingMouth{
animation: moveMouth 1s infinite;
}
.movingTail{
animation: moveTail 1s infinite;
}
.movingWhiskers{
animation: moveWhiskers 1s infinite;
}
@keyframes moveEars {
0%{
transform: rotate(0deg);
}
30% {
transform: rotate(5deg);
}
60% {
transform: rotate(-5deg);
}
100% {
transform: rotate(0deg);
}
}
@keyframes moveEyes {
0%{
transform: rotateX(264deg);
}
20%{
transform: rotate(60deg);
}
40%{
transform: scale(0.5);
}
60%{
transform: scale(1.5);
}
80%{
transform: translate(-10px);
}
100%{
transform: translate(15px);
}
}
@keyframes moveNose{
0%{
transform: rotate(45deg);
}
40%{
transform: rotate(314deg);
}
80% {
transform: scale3d(1.5, 1.5, 1.5);
}
100%{
transform: scaleY(2.5);
}
}
@keyframes bodyScale {
0%{
transform: scale(1.0);
}
40%{
transform: scale(1.0);
}
80%{
transform: scale(1.1);
}
100%{
transform: scale(1.2);
}
}
@keyframes moveMouth {
0%{
top: 53px;
}
40%{
top: 54px;
}
70%{
top: 55px;
}
100%{
top: 56px;
}
}
@keyframes moveTail {
0%{
transform: rotateY(14deg);
}
30%{
transform: rotateY(15deg);
}
50%{
transform: rotateY(14deg);
}
70%{
transform: rotate(16deg);
}
100%{
transform: rotate(15deg);
}
}
@keyframes moveWhiskers {
0%{
transform: rotateY(309deg);
}
50%{
transform: rotateY(323deg);
}
100%{
transform: rotateY(360deg);
}
}
Hey Kenn, Thank you for complimenting my cat, I really appreciate it.
Iām having fun with this one!
Here you go! I added some body movements (playful and tense) and some animations for the star decorations of my cat:
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My DApp</title>
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous"
/>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"
></script>
<script type="text/javascript" src="assets/js/jquery-3.6.0.js"></script>
<link rel="stylesheet" href="assets/css/mystyle.css" />
<link rel="stylesheet" href="assets/css/cats.css" />
<link rel="stylesheet" href="assets/css/animations.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>
<main>
<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 justify-content-center">
<div
class="
col-lg-4
catBox
m-2
light-b-shadow
position-relative
d-flex
justify-content-center
text-center
"
>
<!-- CAT HTML -->
<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">
<span class="star1">🟄</span>
<span class="star2">🟄</span>
<span class="star3">🟄</span>
</div>
<div class="cat__eye">
<div class="cat__eye--left">
<span class="pupil-left"></span>
</div>
<div class="cat__eye--right">
<span class="pupil-right"></span>
</div>
</div>
<div class="cat__nose"></div>
<div class="cat__mouth-contour"></div>
<div class="cat__mouth-left"></div>
<div class="cat__mouth-right"></div>
<div class="cat__whiskers-left"></div>
<div class="cat__whiskers-right"></div>
</div>
<div class="cat__body">
<div class="cat__chest"></div>
<div class="cat__chest_inner"></div>
<div class="cat__paw-left"></div>
<div class="cat__paw-left_inner"></div>
<div class="cat__paw-right"></div>
<div class="cat__paw-right_inner"></div>
<div class="cat__tailBase">
<div id="tail" class="cat__tail"></div>
</div>
</div>
</div>
<!-- CAT DNA -->
<div
class="dnaDiv position-absolute bottom-0 start-0 px-1"
id="catDNA"
>
<b>
DNA:
<!-- Colors -->
<span id="dnaouter"></span>
<span id="dnainner"></span>
<span id="dnaeyes"></span>
<!-- Cattributes -->
<span id="dnadecoration1"></span>
<span id="dnadecoration2"></span>
<span id="dnadecoration3"></span>
<span id="dnadecorationsrotation"></span>
<span id="dnaanimationcat"></span>
<span id="dnaanimationdecorations"></span>
</b>
</div>
</div>
<!-- DNA SETTER -->
<div class="col-lg-6 cattributes m-2 light-b-shadow">
<!-- Set colors -->
<div id="catColors">
<div class="mb-3">
<label for="outercolor"
><b>Outer Color</b
><span class="badge bg-dark ms-2" id="outercode"></span
></label>
<input
type="range"
min="10"
max="90"
class="form-range"
id="outercolor"
/>
</div>
<div class="mb-3">
<label for="innercolor"
><b>Inner Color</b
><span class="badge bg-dark ms-2" id="innercode"></span
></label>
<input
type="range"
min="10"
max="90"
class="form-range"
id="innercolor"
/>
</div>
<div class="mb-3">
<label for="eyescolor"
><b>Eyes Color</b
><span class="badge bg-dark ms-2" id="eyescode"></span
></label>
<input
type="range"
min="100"
max="460"
class="form-range"
id="eyescolor"
/>
</div>
</div>
<!-- Set cattributes -->
<div class="mb-3">
<label for="decorationsVisibility">
<b>Decorations Visibility</b>
<span class="badge bg-dark ms-2">
<span>code: </span>
<span id="decorationscode1"></span>
<span id="decorationscode2"></span>
<span id="decorationscode3"></span>
</span>
</label>
<div id="decorationsVisibility">
<div class="form-check form-check-inline">
<input
class="form-check-input"
type="checkbox"
id="decoration1"
/>
<label class="form-check-label" for="decoration1"
>Star 1</label
>
</div>
<div class="form-check form-check-inline">
<input
class="form-check-input"
type="checkbox"
id="decoration2"
/>
<label class="form-check-label" for="decoration2"
>Star 2</label
>
</div>
<div class="form-check form-check-inline">
<input
class="form-check-input"
type="checkbox"
id="decoration3"
/>
<label class="form-check-label" for="decoration3"
>Star 3</label
>
</div>
</div>
</div>
<div class="mb-3">
<label for="decorationsrotation"
><b>Decorations Rotation</b
><span
class="badge bg-dark ms-2"
id="decorationsrotationcode"
></span
></label>
<input
type="range"
min="10"
max="55"
class="form-range"
id="decorationsrotation"
/>
</div>
<div class="mb-3">
<div class="row">
<label for="animationcat"><b>Animations</b></label>
<div class="col">
<label for="animationcat"
><b>Cat</b
><span
class="badge bg-dark ms-2"
id="animationcatcode"
></span
></label>
<input
type="range"
min="0"
max="2"
class="form-range animation"
id="animationcat"
/>
</div>
<div class="col">
<label for="animationdecorations"
><b>Decorations</b
><span
class="badge bg-dark ms-2"
id="animationdecorationscode"
></span
></label>
<input
type="range"
min="0"
max="2"
class="form-range animation"
id="animationdecorations"
/>
</div>
</div>
</div>
</div>
</div>
<br />
</div>
</main>
<footer align="left">
Ivan on Tech Academy - Ethereum DApp Programming Course 2021
</footer>
<script src="assets/js/catSettings.js"></script>
<script src="assets/js/catFactory.js"></script>
</body>
</html>
const defaultDNA = {
//Colors
outerColor: 20,
innerColor: 20,
eyesColor: 300,
//Cattributes
decoration1: 1,
decoration2: 0,
decoration3: 0,
decorationsRotation: 35,
animationcat: 1,
animationdecorations: 0,
};
// when page load
$(document).ready(function () {
renderCat(defaultDNA);
});
function renderCat(dna) {
$("#outercolor").val(dna.outerColor).change();
$("#innercolor").val(dna.innerColor).change();
$("#eyescolor").val(dna.eyesColor).change();
$("#decoration1").prop("checked", Boolean(dna.decoration1)).change();
$("#decoration2").prop("checked", Boolean(dna.decoration2)).change();
$("#decoration3").prop("checked", Boolean(dna.decoration3)).change();
$("#decorationsrotation").val(dna.decorationsRotation).change();
$("#animationcat").val(dna.animationcat).change();
$("#animationdecorations").val(dna.animationdecorations).change();
}
// On changed color settings
$("#outercolor").change(() => {
const val = $("#outercolor").val();
outerColor(val);
});
$("#innercolor").change(() => {
const val = $("#innercolor").val();
innerColor(val);
});
$("#eyescolor").change(() => {
const val = $("#eyescolor").val();
eyesColor(val);
});
// On changed cattributes settings
$("#decoration1").change(() => {
const isChecked = $("#decoration1").is(":checked");
decorationsVisiblity(1, isChecked);
});
$("#decoration2").change(() => {
const isChecked = $("#decoration2").is(":checked");
decorationsVisiblity(2, isChecked);
});
$("#decoration3").change(() => {
const isChecked = $("#decoration3").is(":checked");
decorationsVisiblity(3, isChecked);
});
$("#decorationsrotation").change(() => {
const val = $("#decorationsrotation").val();
decorationsRotation(val);
});
$("#animationcat").change(() => {
const val = $("#animationcat").val();
animationCat(val);
});
$("#animationdecorations").change(() => {
const val = $("#animationdecorations").val();
animationDecorations(val);
});
/* Shining stars */
.shiningStarV1 {
animation: shineStarV1 8s infinite;
}
.shiningStarV2 {
animation: shineStarV2 9s infinite;
}
.shiningStarV3 {
animation: shineStarV3 7s infinite;
}
/* Shining stars rotating*/
.shiningStarV1Rotating {
animation: shineStarV1 8s infinite, rotateStar 20s linear infinite;
}
.shiningStarV2Rotating {
animation: shineStarV2 9s infinite, rotateStar 20s linear infinite;
}
.shiningStarV3Rotating {
animation: shineStarV3 7s infinite, rotateStar 20s linear infinite;
}
/* Playful motions */
.playingTail {
animation: playTail 5s infinite;
}
.playingHead {
animation: playHead 7s infinite;
}
.playingRightEar {
animation: playRightEar 7s infinite;
}
.playingLeftEar {
animation: playLeftEar 7s infinite;
}
/* Tense motions */
.tensingTail {
animation: tenseTail 7s infinite;
}
.tensingRightEar {
animation: tenseRightEar 7s infinite;
}
.tensingLeftEar {
animation: tenseLeftEar 7s infinite;
}
/* KEYFRAMES */
@keyframes shineStarV1 {
0%,
5%,
100% {
opacity: 0;
}
30% {
opacity: 0.6;
}
60% {
opacity: 0.1;
}
90% {
opacity: 1;
}
}
@keyframes shineStarV2 {
30%,
35% {
opacity: 0;
}
60% {
opacity: 0.6;
}
90% {
opacity: 0.1;
}
20% {
opacity: 1;
}
}
@keyframes shineStarV3 {
60%,
65% {
opacity: 0;
}
90% {
opacity: 0.6;
}
20% {
opacity: 0.1;
}
50% {
opacity: 1;
}
}
@keyframes rotateStar {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes playTail {
0%,
100% {
transform: rotate(0deg);
}
33% {
transform: rotate(-2deg);
}
66% {
transform: rotate(2deg);
}
}
@keyframes playHead {
0%,
55%,
100% {
transform: rotate(0deg);
}
60%,
65% {
transform: rotate(5deg);
}
66%,
95% {
transform: rotate(0deg);
}
96%,
99% {
transform: rotate(-5deg);
}
}
@keyframes playRightEar {
0%,
55%,
100% {
transform: rotate(170deg);
}
60%,
65% {
transform: rotate(178deg);
}
66%,
95% {
transform: rotate(170deg);
}
96%,
99% {
transform: rotate(160deg);
}
}
@keyframes playLeftEar {
0%,
55%,
100% {
transform: scale(-1, 1) rotate(170deg);
}
60%,
65% {
transform: scale(-1, 1) rotate(162deg);
}
66%,
95% {
transform: scale(-1, 1) rotate(170deg);
}
96%,
99% {
transform: scale(-1, 1) rotate(180deg);
}
}
@keyframes tenseTail {
0%,
20%,
80%,
100% {
transform: rotate(0deg);
}
22%,
77% {
transform: rotate(-10deg);
}
}
@keyframes tenseRightEar {
0%,
20%,
80%,
100% {
transform: rotate(170deg);
}
22%,
77% {
transform: rotate(160deg);
}
}
@keyframes tenseLeftEar {
0%,
20%,
80%,
100% {
transform: scale(-1, 1) rotate(170deg);
}
22%,
77% {
transform: scale(-1, 1) rotate(160deg);
}
}
/* COLORS */
function outerColor(code) {
//This changes the color of the cat
const color = parseInt(code);
$(`.cat__head,
.cat__chest,
.cat__ear--right,
.cat__ear--left,
.cat__paw-left,
.cat__paw-right,
.cat__paw-left_inner,
.cat__paw-right_inner,
.cat__tail`).css("background", `hsl(0,0%,${color}%)`);
$("#outercode").html("code: " + code); //This updates the text of the badge next to the slider
$("#dnaouter").html(code); //This updates the DNA text below the cat
}
function innerColor(code) {
const color = parseInt(code);
$(`.cat__mouth-contour,
.cat__chest_inner,
.cat__ear--left-inside,
.cat__ear--right-inside`).css("background", `hsl(0,0%,${color}%)`);
$("#innercode").html("code: " + code); //This updates the text of the badge next to the slider
$("#dnainner").html(code); //This updates the DNA text below the cat
}
function eyesColor(code) {
//This changes the color of the cat
const color = parseInt(code) - 100;
$(".cat__eye span").css("background", `hsl(${color}, 100%, 40%)`);
$("#eyescode").html("code: " + code); //This updates the text of the badge next to the slider
$("#dnaeyes").html(code); //This updates the DNA text below the cat
}
/* CATTRIBUTES */
function decorationsVisiblity(idOfDeco, isChecked) {
let code = "0";
//This sets the visibility of the decorations
if (isChecked) {
code = "1";
$(`.star${idOfDeco}`).css("visibility", "visible");
} else {
$(`.star${idOfDeco}`).css("visibility", "hidden");
}
//This updates text of the badge next to the slider
$(`#decorationscode${idOfDeco}`).html(code);
//This updates the DNA text that is displayed below the cat
$(`#dnadecoration${idOfDeco}`).html(code);
}
function decorationsRotation(code) {
//This changes the rotation of the decorations
const rotation = parseInt(code) - 10;
$(".cat__head-dots > *").css("transform", `rotate(${rotation}deg)`);
$("#decorationsrotationcode").html("code: " + code); //This updates the text of the badge next to the slider
$("#dnadecorationsrotation").html(code); //This updates the DNA text below the cat
}
/* ANIMATIONS */
function shiningStars() {
$(".star1").addClass("shiningStarV1");
$(".star2").addClass("shiningStarV2");
$(".star3").addClass("shiningStarV3");
}
function shiningAndRotatingStars() {
$(".star1").addClass("shiningStarV1Rotating");
$(".star2").addClass("shiningStarV2Rotating");
$(".star3").addClass("shiningStarV3Rotating");
}
function removeAnimationsDecorations() {
$(".cat__head-dots > *").removeClass(`
shiningStarV1 shiningStarV2 shiningStarV3
shiningStarV1Rotating shiningStarV2Rotating shiningStarV3Rotating
`);
}
function playfulMotions() {
$(".cat__tailBase").addClass("playingTail");
$("#head").addClass("playingHead");
$("#rightEar").addClass("playingRightEar");
$("#leftEar").addClass("playingLeftEar");
}
function tenseMotions() {
$(".cat__tailBase").addClass("tensingTail");
$("#rightEar").addClass("tensingRightEar");
$("#leftEar").addClass("tensingLeftEar");
}
function removeAnimationsCat() {
$("#head").removeClass("playingHead");
$("#rightEar").removeClass("playingRightEar tensingRightEar");
$("#leftEar").removeClass("playingLeftEar tensingLeftEar");
$(".cat__tailBase").removeClass("playingTail tensingTail");
}
function animationCat(code) {
//This changes the animation of the cat
removeAnimationsCat();
const animation = parseInt(code);
switch (animation) {
case 1:
playfulMotions();
break;
case 2:
tenseMotions();
break;
default:
break;
}
$("#animationcatcode").html("code: " + code); //This updates the text of the badge next to the slider
$("#dnaanimationcat").html(code); //This updates the DNA text below the cat
}
function animationDecorations(code) {
//This changes the animation of the decorations
removeAnimationsDecorations();
const animation = parseInt(code);
switch (animation) {
case 1:
shiningStars();
break;
case 2:
shiningAndRotatingStars();
break;
default:
break;
}
$("#animationdecorationscode").html("code: " + code); //This updates the text of the badge next to the slider
$("#dnaanimationdecorations").html(code); //This updates the DNA text below the cat
}
I added another animation. Now my cat can jump 
this exercise was a BLAST!
catfactory.js code snippet
//remove all animation effects
async function resetAnimation(){
$('.cat__head').removeClass("movingHead");
$('.cat__head').removeClass("nodingHead");
$('.tail').removeClass("tailWag");
$('.inner_ear').removeClass("earsCurl");
$('.front_foot').removeClass("pawsMove");
}
// Head bob animation
async function animationType1(){
resetAnimation(); //remove any existing animation
$('.cat__head').addClass("movingHead"); //send moving head bob
}
// Head bob animation
async function animationType1(){
resetAnimation(); //remove any existing animation
$('.cat__head').addClass("movingHead"); //send moving head bob
}
// Head bob animation
async function animationType2(){
resetAnimation(); //remove any existing animation
$('.cat__head').addClass("nodingHead"); //send moving head bob
}
// Head bob animation
async function animationType3(){
resetAnimation(); //remove any existing animation
$('.tail').addClass("tailWag"); //send moving head bob
}
// Head bob animation
async function animationType4(){
resetAnimation(); //remove any existing animation
$('.inner_ear').addClass("earsCurl"); //send moving head bob
}
// Head bob animation
async function animationType5(){
resetAnimation(); //remove any existing animation
$('.front_foot').addClass("pawsMove"); //send moving head bob
}
animation.css code
.movingHead {
animation: moveHead 3s infinite;
}
.nodingHead {
animation: nodHead 2s infinite;
}
.tailWag {
animation: tailWagging 2s infinite;
}
.earsCurl {
animation: earCurling 2s infinite;
}
.pawsMove {
animation: pawsMoving 3s infinite;
}
@keyframes moveHead{
0% {
transform: rotate(0deg);
}
30% {
transform: rotate(-5deg);
}
60% {
transform: rotate(5deg);
}
100% {
transform: rotate(0deg);
}
}
@keyframes nodHead{
0% {
transform: translateY(0px);
}
50% {
transform: translateY(-3px);
}
100% {
transform: translateY(0px);
}
}
@keyframes tailWagging{
0% {
transform: rotate(45deg);
}
30% {
transform: rotate(35deg);
}
60% {
transform: rotate(55deg);
}
100% {
transform: rotate(45deg);
}
}
@keyframes earCurling{
0% {
border-radius: 90% 0 90% 0;
}
30% {
border-radius: 60% 0 60% 0;
}
60% {
border-radius: 120% 0 120% 0;
}
100% {
border-radius: 90% 0 90% 0;
}
}
@keyframes pawsMoving{
0% {
transform: rotate(0deg);
}
30% {
transform: rotate(-10deg);
}
60% {
transform: rotate(10deg);
}
100% {
transform: rotate(0deg);
}
}