Lab 12 - Conditionals

Challenge

Create a sorting hat function that sorts you into houses by using conditionals.

Problems

The first thing I knew I wanted to do almost immediately was add a sorting hat like the one from Professor Modes' page, but use one that is animated. I wanted it to align to the right while staying within the borders of the section it was in. Of course I knew right off the bat that I wouldn't know what I was doing, so I consulted ChatGPT for a solution and found a way to do so by using overflow and float. In CSS, I added the overflow parameter in the class, minor-section, and set it to hidden. I then encased the sorting hat into span which allowed me to use the float parameter and align it to the right. It worked the way I wanted it to, but I didn't want to touch it further in case I do something wrong.

Another problem I tackled was with adding a gradient to the heading, Sorting Hat. Using ChatGPT, I realized early on that you couldn't add a gradient to the text, but can add a gradient to the background. I constantly bothered the A.I. program until it gave me a way to do so. Essentially, you can replicate a gradient by turning the color transparent, create a background image with the gradient effect you desire, and then clipping it into the bounds of the text. This worked wonders, but because the color is essentially transparent, text-shadow was incompatible as it nullified the gradient with whatever color you pick for the shadow. I ended up using text stroke instead.

The third problem I encountered was using double or single quotes inside of double or single quotes. Because of the nature of coding, where "" and '' are used to create a string rather than in its actual usage, I sort of had a hard time. I figured things out when I, once again, consulted ChatGPT. I was able to learn about a new thing where putting a \ in front of a " or ' takes away the coding format and allows me to use it properly.

Results

Sorting Hat w

Come one, come all! Place your name into the box below and get registered into a house at Hogwarts today!

Submit