We got the inspiration from the theme of the hackathon and we wanted to build something which would be for all the Sherlock or detective lovers. So we decided to work on making a website for all Sherlock Holmes' fans this weekend and try out something new.

What it does

  • Through the website all Sherlockians can check Sherlock Holmes' merchandise as we have displayed a wide variety of detective products ranging from coat to magnifying glass.
  • We have implemented a number of mini interesting games to get rid of the monotonous everyday websites and to engage all Sherlockians visiting the website.
  • Other than that there is a voice enabled feedback form to make it more interactive for our customers so that they can provide their valuable feedback quite easily.
  • There is a section made for all non sherlockians also wherein they can read about the latest Sherlock Holmes Novels, get to know about the latest movies, games released on Holmes.
  • To make our website more intriguing, there is a facts section with all unknown facts about Holmes.
  • Lastly we have displayed a wide variety of products on Sherlock Holmes to make the website more engaging for our customers.
  • Customers can contact us through the contact form created for that purpose.

How we built it

  • We built the games-
  • Hotch Potch- Detective Jumble word game using CSS, HTML and JAVASCRIPT. We had given a list of fictional detective characters in a list in the JS code and if correct word was guessed, then the score would increase by 5.
  • Spy-Fi- Detective quiz game- to test how good a Sherlockian you are using HTML,CSS and JAVASCIPT. Some questions were given in the JS code based on Sherlock Holmes and the corresponding options with one of them being assigned to correct or true.
  • Solve Puzzle- made using CSS, HTML and JAVASCRIPT with the pictures provided by us. Users can read the rules by clicking on the rules button and also select the levels of the game.
  • Mystery Box- made using HTML,CSS and JAVASCRIPT and we kept our own detective related situations and some conditions based on that in the JS Code provided. Its basically to test your detective skills.
  • Feedback form- made using the web speech api and using it for our JS code. Made using HTML, CSS and JAVASCIPT. Basically it converts our speech to text for voice control.
  • These all codes were hosted onto our main frontend website built using GoDaddy website builder using a domain name we created using website.

Challenges we ran into

Main challenge we faced was hosting the codes we had written on our website. Also working with the voice enabled api caused us a little trouble as it did not work correctly in the first. So we had to make some changes in the javascript code for the error to go away.

Accomplishments that we're proud of

We are proud of our idea which we tried to implement and we had made it in our mind to make a website for all Sherlock Holmes' fans just like there is a current website for all Harry Potter fans. So we are proud that we could implement it in our own way. Hope it is liked by all Sherlockians visiting the website! :)

What we learned

We learned a lot about the front end development of a website, working with html, css and javascipt, how to register for a domain using godaddy and porkbun, using voice enabled api, about godaddy features that could be implemented in making a website.

What's next for Homie Holmes

We would love to host the website using our own domain name and increase the SEO in the future so that it can be available to those who are interested! :)

Built With

Share this project: