Sadly, due to the professor's rules, I am not allowed to share my code in a public repository due to threat of being sent to the Honor Board and potentially threatening my degree. However, I will share as much as possible (without code) about the project here. I will also include pictures/videos of the website in the repository.
The final project accumulated all skills learned in the class, specifically in the skills of:
- Client and Server Side JavaScript
- MongoDB Databases
- Security against basic XSS attacks
- User login system and cookies
- AJAX form submissions
- Validating user input in client-side, routes, and database functions
The dependencies we included in the project are as follows: "axios": "^1.6.8", "bcrypt": "^5.1.0", "bcryptjs": "^2.4.3", "chosen-js": "^1.8.7", "express": "^4.19.2", "express-handlebars": "^7.1.2", "express-session": "^1.18.0", "mongodb": "^6.1.0", "multer": "^1.4.5" We also used the chosen plugin, which added a search bar to the multiselect dropdown and showed the already selected morphs. This plugin greatly improved the accessibility of user input.
The theme of the website was up to the group, although the professor required features such as commenting, liking/favoriting, and account visibility (public/private). Thus, we chose to create a Ball Python Genetic Calculator website, which consisted of features such as creating a snake, identifying its weight/sex/morphs(genes), favoriting your own snakes and public snakes, commenting on your own snakes and public snakes, searching for snakes based on name/sex/morph, and most importantly calculating the odds of genes being passed down to your own snakes and public snakes.
My personal contribution to the code consisted of front-end/routes/data functions of specifying a snake's morphs, editing a snake's morphs, breeding two snakes together, the landing page, the help page, and an optional "breed comment". A breed comment is added to both parent snake's pages, listing what the expected results of the pairing (according to the calculator) were as well as any additional information about the breeding (such as number of snakes produced, what the offspring morphs were, what the sex of the offspring were, if any offspring died before hatching or in youth, if offspring were born with birth defects). This feature was important to add as this allows users to keep track if the expected results are consistently off (which means that a snake may not have an expected heterozygous recessive gene OR that a dominant gene is better identified as heterozygous/homozygous). This is why it was so important for us to make a snake's morph(s) editable for users.
There were 8 data functions required just to make the correct Punnett square for breeding two snakes, all of which I entirely created and maintained. This was the heart of the idea for the website, so it was very important that it was completely correct. The following is a description of these data functions:
When a snake is created, the inputs are shortened to just the morph name and added to the morphs list in the database. In addition, based on the prefix of the added morph (homozygous, heterozygous, or super) the shortened morph is added to the individual lists for dominant homozygous, heterozygous recessive, or supers (which are homozygous codominant).
When two snakes are paired together, each snake morphs are converted to letter+number pairs. For example, a1 and A1 refer to the same morph, but the capitalization indicates that the snake has an allele for the morph and the lowercase indicates the snake does not have the allele for the morph. Thus, the calculator can handle 234 different morphs, although this would take an extreme amount of time and space in the stack so we limit it by user input to 10 different morphs. After assigning letters, two objects are created - one with the keys as the gene input capitalized (“A1” -> “albino”) and one with the morph as the key (“albino” -> “A1”). This is done in the getLetters function.
In the makeLettersVisual function, based on user input an array is created of the snake’s alleles. For example, if the snake is homozygous albino, then the array will be [“A1A1’] indicating the snake has two alleles for albino. If the snake is heterozygous albino, it will be [“A1a1”]. This is done for dominant traits, recessive traits, and codominant traits. In compareMorphs, we determine if there are any morphs that one snake has that the other doesn’t. If this is the case, then two lowercase alleles [“a1a1”] are added to the snake that does not have the morph. This is done for every non-shared morph, and both snakes may be updated. This creates a punnett square instead of a punnett rectangle, because the same number of morphs will be compared. Thus, for snakes with 5 entirely different morphs, there will be 10 pairs of alleles for each snake.
In mixLetters and addAnother, this gets every single permutation (combination where order is important) of alleles for each snake. Basically, when making a punnett square, the offspring will only take one of the two alleles from each parent. To relate this to probability, imagine you have 10 boxes of marbles, and each box has two marbles in it. This method essentially calculates every possible result from taking one marble out of each box. This is done for each snake, and this can be different for both snakes because each snake can have either capital marbles or lowercase marbles or a mix of both (aka alleles). Notably though, the snakes will always have the same number of boxes, and the number of boxes maxes out at 10 for time and space efficiency. If there are 10 boxes, this results in 2^(10) permutations per snake.
For the rest of the makePair function, we make a 2d array in which the 1st column is all of snake2’s permutations and the first row is all of snake1’s permutations. Then, we fill the punnett square with the concatenated string of the row and the column.
In readMorphs, we first put all of the matching alleles (case insensitive) next to each other. Once done, we then identify the morph for each pair of alleles, identify the heredity, and make a string indicating what this baby’s square means based on this information. For example, the albino trait is recessive, so if the alleles are A1A1 this means that the baby is albino. If the string is A1a1 then the baby is 100%-het albino (meaning they are not visually albino but genetically carry one allele for albinism). Or if the alleles are a1a1, then albino is not added to the string because the baby is not albino and does not carry albinism. This is done for every gene in the string. If the gene is an empty string, we hard code this to be a normal ball python, which has no morphs.
In the calculateOdds function, we first count the number of offspring. Then we count how many squares in the punnett square have the exact same string, and for that count we calculate (count/totalOffspring)*100 to get the percentage of offspring with that string of morphs. This makes a list of strings of all possible percentages of the offspring. This is then posted on the results page.
At the moment, due to calculating squares with 10 different genes (a decahybrid cross), this creates a punnett square of 1024 x 1024, which has 1,048,576 squares or 2^(20) boxes. This punnett square is traversed approximately 5 times, which potentially could have been done more efficiently but for printing ease I wanted to separate the written out morphs punnett square from the letter punnett square. Thus, this takes a lot of time, and a lot of space. However, the punnett square itself is not at all hardcoded for size, so it could potentially be larger if there wasn’t an added restriction to user input. I was worried about printing the table for users, given how large they are and how they would interfere with the results printed on the page. Thus, because the punnett square is not vital to a user like the results are, it is not printed. What this means is that the website looks much less complex than it is.