A friend of mine had asked me if I would help him develop a website he was designing to showcase all of the patents he had been involved in. Seeing as how I like to help out my friends, I jumped ta the chance.
He wanted a site that listed links to all of his patents on a single page, but didn’t give you any information about them. So they would simply be numbered 1 though N in a grid format. He also wanted it so that the numbers would correspond to a different patent every single time you refreshed the page. For instance number 1 would initially link to patent “Blah”, but when you refreshed patent 1 would now be a link to patent “Foobar”.
He also wanted the site to have some responsiveness to it. Initially, I added my own code so that if the screen of the computer was one of two sizes, it would expand or contract to fit it. Then I switch to bootstrap and made it so that there were three different sizes and it would properly space better on any sizes browser as opposed to the size of the screen.
Lastly, He wanted the numbers on the screen to go bold when the mouse went over top of it and then fade back to the original color when the mouse moved away. This took a little bit of work to get right. Mainly, if it was fading out and you moved your mouse over and out of it again, it would wreak havoc on the function. So I added in a sort of mutex to keep track of which numbers were fading out. This solved a majority of the issues.
My delivered version is here: