Patent Website
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”.
So I created a couple of javascript functions. One that took a list of patents from a file and then randomly put them into an array. Then I had a second function that wrote those patents out onto the screen in the proper format. And he also wanted the number of patents to stop at 1000. So even though he has over 1600 patents in the file, it would only shot the first 1000 that were randomly added to the array.
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.
Languages – HTML, Javascript, Bootstrap
My delivered version is here: