Eagle Sight

Inspiration

I wanted to build a mini game to entertain people and I also wanted to add a lot of design to it. So, I got an idea of making a quiz like game where it tests your eyes.

What it does

Eagle Sight is a website which is mobile-friendly too, therefore it can be used by any device with an internet connection. At Eagle Sight, you get 10 questions that are all related to your eyesight. The questions are like, "How many numbers do you see?" or "Do you see a circle?" It is not really easy but anyone with very good sight can get 10 out of 10... After answering the 10 questions, your result will come... It will say how good your eyes are or whether your eyes aren't really good. Then you can either play the game again or share your results on Facebook by pressing the "share score" button.

How I built it

Firstly, I wrote down what sort of questions to add and how to make questions more difficult as you go.. Then, I designed the graphics needed for the questions and the website. After that using html I coded the basic website with no CSS or JavaScript. I made all the pages except for the homepage and results page. Then, I started designing the homepage. I used a lot of CSS to design the homepage and also added a beautiful floating colorful balls design using JavaScript. After that I started adding CSS effects to the buttons and text of each and every question page. Finally, I created the results page with a similar design to the homepage. The domain was obtained for free through freenom and hosting was done through infinity free. Also I used Cloudflare and secured my website...

Challenges I ran into

As this was my first time using 100% code and no website builders at all this was difficult. I ran into so much of challenges.

Whenever I couldn't add a beautiful design I would use an open source library's help. But most of the codes in open-source libraries didn't work really well on mobile, either the text would not show up or it would be really ugly. So, I had to try out so much of these codes...
Making the site mobile friendly, similar to the second challenge I mentioned, sometimes my own code made the site ugly on mobile. Sometimes I had to make pages all over again because it worked well on PC but not on mobile. But finally I made the website really mobile-friendly.

Accomplishments that I'm proud of

I'm really proud of building a website with this much of code... Specially this much of CSS, I didn't even know something called CSS exists until this week, but now I have a website with a lot of it... Also, I am proud of the function of my website, when I told my family and few friends to try it out, it was perfect. Everyone got perfect results...

What's next for Eagle Sight

Now, Eagle Sight is live and anyone can visit it... I have two main goals with this new website,

Bring in more people to my website and make it known among the people. Although I have published my website it doesn't mean I am done, it's now that the real game starts. I will have to promote it on my social media accounts as well as on other sites.
I have to develop my site. I need professionals to review my site and learn about how I can develop it.