Inspiration
As a beginner who have learned a few programming languages, was wondering for building my own website. Then out of nowhere I find out about Algo-Thon through social media and thought of participating in it. But I have a deadline of 2 days in which I have to prepare and submit a project. So the night of the day when I enrolled in it, I thought of building a gaming website. I was interested in building something which last a fun and enjoyable impression on someone. So I thought of building a gaming website which gives kind of "Treasure Hunt" vibes but not exactly that thing. It's something to which I have done a magic spell of mine - "Quest Arena".
What it does
Quest Arena! It is a gaming website where: User will deal with login and signup kind of thing to give an original experience. Added 'Enter Player-name' field to wish warm welcome to the user in my gaming website.
Then comes the main game - Here four flippable cards are there and each card has a clue behind it. The user need to solve each clue that will give an answer and total of four clues give four answers and all these answers are connected to one single word and that one single word is the "code". After entering the code a little surprise is unfolded for the user at the end!
How I built it
Quest Arena is built purely on front-end web technologies.
For Quest Arena I used:
- Html : Through Html I build the basic layout of all the webpages like adding text and emojis, input fields and buttons.
- CSS : Through CSS I made the basic layout made through Html into eyecatching, user appealing and styled webpages with better alignment and orientation of all the text and emojis, input fields and buttons in them.
- JavaScript : After all the Layout and designing it's finally time to add the functionality to all the webpages like the flippable effect, the confetti thing, button functionality, input field functionality and also the hover effect and connecting them and turning into a gaming website.
Note: js-confetti library is being used in this gaming website for showing confetti celebration
Challenges I ran into
I have my own idea about what to do and how to do but while building this gaming website I face many errors and as a beginner it was a bit tough to catch it all. But rather than giving up, I faced all this - I just noticed the error behaviour about where it's going wrong and what impact is it creating on the webpage. By thinking, searching, noticing and changing codes regarding it helps me make it!
Accomplishments that I'm proud of
As a beginner who have just entered the tech-world, I'm proud to make my own gaming website all by myself and being able to participate with this first project of mine in hackathon "Algo-Thon". Also, grateful to have being participated and learning much new things while building the gaming website.
What I learned
I learned many new syntaxes, faced many errors and each error was a lesson of learning, many different functions, many different CSS styling and properties, discovered many new html elements and a great experience as a participant of "Algo-Thon" hackathon.
What's next for Quest Arena
Because of very short deadline I was unable to add some extra features but still will work on adding:
- Timer
- Number of guesses made
- Live animations
- Music in background
- Multiplayer challenges
Log in or sign up for Devpost to join the conversation.