Hi @kenn.eth
Being from a Non Technical Background ( no prior CS or Programming Experience, I am having a harrowing time getting to grasp everything, especially because whatever Java Script I have learnt is all by the means of doing the Basic Courses given by Ivan and then i proceeded with ETH 101 AND ETH 201 ).
I was not able to fully understand this code 
function createCatBox(id,catDetails){
var catBox = `<div id="box`+id+`">
<div id="head` + id + `">
</div>
<div id="body` + id + `">
</div>
<div id="paws` + id + `">
</div>
</div>`;
document.getElementById("catBoxes").append(catBox);
}
So Then I started on my own Journey to create a simple website and write simple Code 
My whole Code below 
Solidity : Kittycontract
pragma solidity 0.5.12;
import "./IERC721.sol";
import "./utils/SafeMath.sol";
import "./IERC721Receiver.sol";
contract Kittycontract is IERC721 {
using SafeMath for uint;
//constructors and Modifiers
constructor() public {
contractOwner = msg.sender;
}
modifier onlyOwner() {
require(msg.sender == contractOwner);
_;
//continue execution
}
//events
event Birth(
address owner,
uint256 genes,
uint256 newKittenId,
uint256 mumId,
uint256 dadId);
event Transfer(address indexed oldOwner, address indexed newOwner, uint256 indexed tokenId);
event Approval(address indexed Owner, address indexed approvedTo, uint256 indexed tokenId);
event ApproveAll(address indexed Owner, address operator, bool success);
event NewDnaCreated(uint256 indexed DNA);
//Struct- it gets stored in storage on EVM
struct Cat {
uint256 genes;
uint64 birthTime;
uint32 mumId;
uint32 dadId;
uint16 generation;
}
//Mappings
// owner number of Cats
mapping(address => uint256) public tokenOwnershipCount;
// tokenId owner
mapping(uint256 => address) public ownershipCertificate;
// approval mapping
mapping(uint256 => address) public kittyIndexToApprove;
// approval all (operator) mapping
//[MYAADDR][OPERATORADDR] => TRUE/FALSE;
mapping(address => mapping(address => bool)) private _operatorApprovals;
//State variables
address public contractOwner;
string public constant Name = "MEOW-CATS";
string public constant Symbol = "MEOW";
uint public constant CREATION_LIMIT_GEN0 = 100;
uint public gen0Counter = 0;
bytes4 internal constant MAGIC_ERC721_RECEIVED = bytes4(keccak256("onERC721Received(address,address,uint256,bytes)"));
bytes4 private constant _INTERFACE_ID_ERC721 = 0x80ac58cd;
bytes4 private constant _INTERFACE_ID_ERC165 = 0x01ffc9a7;
//arrays
Cat[] public cats;
//##############################################################################################################
//FUNCTIONS START HERE :
//Function when called from external contract returns whether this contract support IERC721 or IERC165 standard?
function supportsInterface(bytes4 _interfaceId) external view returns(bool) {
return ( _interfaceId == _INTERFACE_ID_ERC165 || _interfaceId == _INTERFACE_ID_ERC721);
}
// SAFE TRANSFER FUNCTIONS
//Function executing an External Call from another User/ Contract(without Data):
function safeTransferFrom(address _from, address _to, uint256 _tokenId) public {
safeTransferFrom(_from, _to, _tokenId, " ");
}
//Function executing an Public Call which then goes through external Interface(called with @param bytes calldata _data):
function safeTransferFrom(address _from, address _to, uint256 _tokenId, bytes memory _data) public {
require(isApprovedOrOwner(msg.sender, _from, _to, _tokenId));
_safeTransfer(_from, _to, _tokenId, _data);
}
//Internal safeTransfer Function
function _safeTransfer(address _from, address _to, uint256 _tokenId, bytes memory _data) internal {
require( _checkERC721Support(_from, _to, _tokenId, _data) );
_transfer(_from, _to, _tokenId);
}
//Function executing an External Call from another User/ Contract:
function transferFrom(address _from, address _to, uint256 _tokenId) public {
require(isApprovedOrOwner(msg.sender, _from, _to, _tokenId));
//require(_to != address(0));
//require(_to != address(this));
//require(_owns(_from, _tokenId));
//require(msg.sender == _from || approvedFor(msg.sender, _tokenId) || isApprovedForAll(_from, msg.sender));
//require(_tokenId < cats.length);
_transfer(_from, _to, _tokenId);
}
//Function executing an External Call from another User/ Contract:
function transfer(address _to, uint256 _tokenId) public {
require(_to != address(0));
require(_to != address(this));
require(_owns(msg.sender, _tokenId));
_transfer(msg.sender, _to, _tokenId);
}
//Actual transfer of the token happens from this below Internal Function:
function _transfer(address _from, address _to, uint256 _tokenId) internal {
tokenOwnershipCount[_to]++ ;
if(_from != address(0)){
tokenOwnershipCount[_from]-- ;
delete(kittyIndexToApprove[_tokenId]);
}
//Event Transfer to be emitted now :
emit Transfer(_from, _to, _tokenId);
}
//##########################################################################################################
//BASIC CAT CREATION, BREEDING & GETTER FUNCTIONS
function createKittyGen0(uint256 _genes) public onlyOwner returns(uint256){
require(gen0Counter < CREATION_LIMIT_GEN0);
gen0Counter ++;
return _createKitty(0,0, _genes, 0, msg.sender);
}
function breed(uint256 _dadId, uint256 _mumId) public returns(uint256) {
( uint256 _dadDna,,,,, uint256 dadGeneration) = getKitty(_dadId);
( uint256 _mumDna,,,,, uint256 mumGeneration) = getKitty(_mumId);
uint256 newDna = _mixDna(_dadDna, _mumDna);
uint256 kidGen = 0;
if (dadGeneration < mumGeneration) {
kidGen = mumGeneration +1;
kidGen /= 2;
}
else if (dadGeneration < mumGeneration) {
kidGen = dadGeneration +1 ;
kidGen /= 2;
}
else {
kidGen = mumGeneration + 1;
}
}
function _mixDna(uint256 _dadDna, uint256 _mumDna) internal returns(uint256) {
uint256 firstHalf = _dadDna /100000000;
uint256 secondhalf = _mumDna % 100000000;
uint256 newDna = firstHalf * 100000000;
newDna += secondhalf;
//emit event DNA
emit NewDnaCreated(newDna);
return newDna;
}
function _createKitty (
uint256 _mumId,
uint256 _dadId,
uint256 _genes,
uint256 _generation,
address _owner
) private returns(uint256) {
Cat memory _cat = Cat({
genes : _genes,
birthTime : uint64(now),
mumId : uint32(_mumId),
dadId : uint32(_dadId),
generation : uint16(_generation)
});
uint256 newKittenId = cats.push(_cat) - 1;
//Event Birth to be emitted :
emit Birth(_owner, _genes, newKittenId, _mumId, _dadId);
_transfer(address(0), _owner, newKittenId);
return newKittenId;
}
function getKitty(uint256 _newKittenId) public view returns(
uint256 _genes,
uint256 _mumId,
uint256 _dadId,
uint256 _birthTime,
address _owner,
uint256 _generation){
Cat storage cat = cats[_newKittenId];
_genes = cat.genes;
_dadId = uint256(cat.dadId);
_mumId = uint256(cat.mumId);
_generation = uint256(cat.generation);
_birthTime = uint256(cat.birthTime);
_owner = ownershipCertificate[_newKittenId];
}
function getKittyByOwner(address _owner) external view returns(uint[] memory) {
uint[] memory result = new uint[](tokenOwnershipCount[_owner]);
uint counter = 0;
for (uint i = 0; i < cats.length; i ++) {
if (ownershipCertificate[i] == _owner) {
result[counter] = i;
counter ++;
}
}
return result;
}
function balanceOf(address owner) external view returns (uint256 balance) {
return tokenOwnershipCount[owner];
}
function totalSupply() public view returns (uint256 total) {
total = cats.length;
return total;
}
function name() external view returns (string memory tokenName) {
tokenName = Name;
return tokenName;
}
function symbol() external view returns (string memory tokenSymbol) {
tokenSymbol = Symbol;
return tokenSymbol;
}
function ownerOf(uint256 tokenId) external view returns (address owner) {
return ownershipCertificate[tokenId];
}
//This below Function called "_owns" gives bool result whether the address has actual ownership of the _tokenId:
function _owns(address _claimant, uint256 _tokenId) internal view returns(bool) {
return ownershipCertificate[_tokenId] == _claimant;
}
// APPROVE FUNCTION & GETTER FUNCTIONS RELATED TO APPROVALS :
function approve(address _to, uint256 _tokenId) public {
require(_owns(msg.sender, _tokenId));
_approve(_to, _tokenId);
//emit event Approve
emit Approval(msg.sender, _to, _tokenId);
}
function _approve(address _approved, uint _tokenId ) internal {
_approved = kittyIndexToApprove[_tokenId];
}
function getApproved(uint256 _tokenId) public view returns (address) {
require(_tokenId < cats.length); //Token must exist
return kittyIndexToApprove[_tokenId];
}
function setApprovalForAll(address _operator, bool approved) public {
require(_operator != msg.sender);
approved = _operatorApprovals[msg.sender][_operator];
//emit event ApproveAll
emit ApproveAll(msg.sender, _operator, approved);
}
function approvedFor(address _claimant, uint256 _tokenId) internal view returns(bool) {
return kittyIndexToApprove[_tokenId] == _claimant;
}
function isApprovedForAll(address _owner, address _operator) public view returns (bool) {
return _operatorApprovals[_owner][_operator];
}
function isApprovedOrOwner(address _spender, address _from, address _to, uint256 _tokenId) internal view returns(bool) {
require(_to != address(0));
require(_to != address(this));
require(_owns(_from, _tokenId));
require(_tokenId < cats.length);
return (_spender == _from || approvedFor(_spender, _tokenId) || isApprovedForAll(_from, _spender));
}
//#######################################################################################################
// INTERNAL FUNCTION ASKING FOR ERC 721 SUPPORT :
function _checkERC721Support(address _from, address _to, uint256 _tokenId, bytes memory _data) internal returns(bool) {
if ( !_isContract(_to) ) {
return true;
}
bytes4 returnData = IERC721Receiver(_to).onERC721Received(msg.sender, _from, _tokenId, _data);
// Call on onERC721Received in the _to contract
return returnData == MAGIC_ERC721_RECEIVED;
// Check on Return Value;
}
// IF SIZE = O =>ITS A USER WALLET, IF > 0 => ITS A CONTRACT :
function _isContract(address _to) internal view returns(bool) {
uint32 size;
assembly{
size := extcodesize(_to)
}
return size > 0;
}
}
**But I know the problem is not coming from Solidity as the Contract is compiling fine **
*So below is my JS code *
index.js
var web3 = new Web3(Web3.givenProvider);
var contractInstance;
const contractAddress = "0xF2224FC1C0149FA056bE9ABc45b48bE3bad516B5";
$(document).ready(async () => {
window.ethereum.enable().then(function(accounts){
contractInstance = new web3.eth.Contract(abi, contractAddress, {from: accounts[0]});
console.log(contractInstance);
console.log(`Use Contract address: ${contractInstance._address}`);
//EVENT LISTENERS
contractInstance.events.Birth()
.on("data", function(event){
console.log(event);
let owner = event.returnValues.owner;
let mumId = event.returnValues.mumId;
let dadId = event.returnValues.dadId;
let genes = event.returnValues.genes;
let newKittenId = event.returnValues.newKittenId;
jQuery("#jackpot_output").append("<div class='alert alert-success' role='alert'>Congrats, You are proud owner of this Kitty !</div>");
jQuery("#jackpot_output1").append("<div class='alert alert-success' role='alert'>Mint another Kitty !</div>");
setTimeout(function(){
jQuery("#jackpot_output").hide();
jQuery("#jackpot_output1").hide()
},5000);
})
.on("error", function(err){
console.log('Error :' + err);
});
});
$("#mintkitty").click(async()=> {
await mintKitty();
});
$("#breedkitty").click(async()=> {
await window.location.replace("/client/breed.html");
});
});
async function mintKitty(){
var dnaStr = getDna();
await contractInstance.methods.createKittyGen0(dnaStr).send()
.on("transactionHash", function(hash){
console.log(hash);
})
.on("confirmation", function(confirmationNr){
console.log(confirmationNr);
})
.on("receipt", function(receipt){
console.log(receipt);
});
};
Its running fine until this Page 
So, Now i come to breed.js 
var web3 = new Web3(Web3.givenProvider);
var contractInstance;
var contractAddress="0xF2224FC1C0149FA056bE9ABc45b48bE3bad516B5";
$(document).ready(function() {
window.ethereum.enable().then(function(accounts){
contractInstance = new web3.eth.Contract(abi, contractAddress, { from: accounts[0]})
console.log(contractInstance);
console.log(`Use Contract address: ${contractInstance._address}`);
//EVENT LISTENERS
contractInstance.events.Birth({
//filter: {myIndexedParam: [20,23], myOtherIndexedParam: '0x123456789...'}, // Using an array means OR: e.g. 20 or 23
fromBlock: 'latest'
}, function(error, event){ console.log(event); })
.on("connected", function(subscriptionId){
console.log("Event subsciption connected with id: " + subscriptionId);
//console.log(subscriptionId);
})
.on('data', function(event){
//console.log(event); // same results as the optional callback above
alertstring = "Kitten born with following properties: id: " + event.returnValues.kittenId +
", mumId: " + event.returnValues.mumId + ", dadId: " + event.returnValues.dadId + ", genes: " +
event.returnValues.genes + ", owner: " + event.returnValues.owner + ".";
console.log(alertstring);
alert(alertstring);
//console.log(event.returnValues.genes);
})
.on('changed', function(event){
// nothing to do yet
})
.on('error', function(error, receipt) { // If the transaction was rejected by the network with a receipt, the second parameter will be the receipt.
console.log(error);
});
});
$('#BreedCatButton').click(async () =>{
await breedKitty();
await renderNewCat();
});
$("#ViewCatButton").click(async ()=> {
await window.location.replace("/client/catalogue.html");
});
});
async function breedKitty(dadId, mumId){
var dadId = $('#dad-id').val();
var mumId = $('#mum-id').val();
await contractInstance.methods.breed(dadId,mumId).send()
.on("transactionHash", function(hash){
console.log(hash);
})
.on("confirmation", function(confirmationNr){
console.log(confirmationNr);
})
.on("receipt", function(receipt){
console.log(receipt);
});
};
And this runs fine too, Until I hit the #BreedNewCat button.
after this the Tx happens on Metamask , but then it says property “slice” of undefined:
see below the catalogue.js file 
catalogue.js
var web3 = new Web3(Web3.givenProvider);
var contractInstance;
var contractAddress="0xF2224FC1C0149FA056bE9ABc45b48bE3bad516B5";
var newDna;
var user;
$(document).ready(function() {
window.ethereum.enable().then(function(accounts){
contractInstance = new web3.eth.Contract(abi, contractAddress, { from: accounts[0]})
user = accounts[0];
console.log(contractInstance);
console.log(`Use Contract address: ${contractInstance._address}`);
//EVENT LISTENERS
contractInstance.events.Birth()
.on("data", function(event){
console.log(event);
let dna = event.returnValues.genes;
});
$("#BackToShoppingButton").click(async()=>{
await window.location.replace("/client/index.html");
});
$("#BackToBreedingButton").click(async ()=> {
await window.location.replace("/client/breed.html");
});
$('#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);
});
});
async function renderNewCat() {
newDna.headColor = dna.slice(0,2);
newDna.mouthColor = dna.slice(2,4);
newDna.eyesColor = dna.slice(4,6);
newDna.earsColor = dna.slice(6,8);
newDna.eyesShape = dna.slice(8,9);
newDna.decorationPattern = dna.slice(9,10);
newDna.decorationMidcolor = dna.slice(10,12);
newDna.decorationSidescolor = dna.slice(12,14);
newDna.animation = dna.slice(14,15);
newDna.lastNum = dna.slice(15,16);
$('#dnabody').html(newDNA.headColor);
$('#dnamouth').html(newDNA.mouthColor);
$('#dnaeyes').html(newDNA.eyesColor);
$('#dnaears').html(newDNA.earsColor);
$('#dnashape').html(newDNA.eyesShape);
$('#dnadecoration').html(newDNA.decorationPattern);
$('#dnadecorationMid').html(newDNA.decorationMidcolor);
$('#dnadecorationSides').html(newDNA.decorationSidescolor);
$('#dnaanimation').html(newDNA.animation);
$('#dnaspecial').html(newDNA.lastNum);
renderCat(newDNA);
};
also, the Catalogue.html file 
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Catalogue </title>
<script type="text/javascript" src="assets/js/jquery-3.4.1.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<!-- <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<script src="assets/bootstrap/js/popper.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>-->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
<script src="assets/js/abi.js"></script>
<script src="assets/js/web3.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">My Catalogue</h1>
</div>
<br>
<div class="row">
<div class="col-lg-12 cattributes 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>
<br><br>
<div id="BackToShoppingButton" class="d-flex justify-content-center">
<button class="btn btn-success">Go Shopping More Cats</button>
</div><br>
<div id="BackToBreedingButton" class="d-flex justify-content-center">
<button class="btn btn-success">Go Breeding More Cats</button>
</div>
</div>
</div>
</div>
<footer align="left">
<p>Ivan on Tech Academy - Asignment</p>
</footer>
</body>
and my breed.html file 
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Catalogue </title>
<script type="text/javascript" src="assets/js/jquery-3.4.1.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<!-- <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<script src="assets/bootstrap/js/popper.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>-->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
<script src="assets/js/abi.js"></script>
<script src="assets/js/web3.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">My Catalogue</h1>
</div>
<br>
<div class="row">
<div class="col-lg-12 cattributes 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>
<br><br>
<div id="BackToShoppingButton" class="d-flex justify-content-center">
<button class="btn btn-success">Go Shopping More Cats</button>
</div><br>
<div id="BackToBreedingButton" class="d-flex justify-content-center">
<button class="btn btn-success">Go Breeding More Cats</button>
</div>
</div>
</div>
</div>
<footer align="left">
<p>Ivan on Tech Academy - Asignment</p>
</footer>
</body>
<script src="./catalogue.js"></script>
<script src="assets/js/colors.js"></script>
<script src="assets/js/catSettings.js"></script>
<script src="assets/js/catFactory.js"></script>
</html>
Not sharing my Index.html file because that page is running smoothly :
Can You please have a detailed Look at my Code and advise me what all I am doing wrong and How to correct the same ? I just want to create one Box with the Cat the owner owns after breeding it => not too fancy stuff because I would forever be lost in Java Script and I want to avoid that
*But if you tell me its necessary to learn more, I will do it *
I really want to learn Blockchain Programming and I am really trying extremely hard - sometime even 10 hours a Day , and when i fail completely i write such lengthy threads on the forum hoping you will help me soon.
In my opinion the problem lies in catalogue.js where my the cat dna is not visible, because i tried to extract it out of the event: Birth and then slice it into 2 digits each to assign values to newDna.headColor, newDna.mouthColor and so on .
If this is not the right way, then what is the right way ?
Thanks and Regards
su.kal Crypto