Inspiration
This week, we had a theme allowing us to recreate old games, so I tried to remake my favourite typing+trivia game using technology I had never used before!
What it does
This prototype has a simple interface, an API for questions, a Timer and a Score section. The user clicks the Start button initiating the timer and starting the loop to bring up questions 1 by 1. Answers for the same are displayed on screen and the user can type in their answer and press enter!
How we built it
This time, I built it using the tech stack I never used before - HTML, CSS and JavaScript. It took a lot of time to learn all these while also finding ways to implement what I wanted.
I tried to make my HTML as simple as possible.
The CSS contains a lot of cheeky stuff, including a sliding double background gradient, opacity and visibility tricks, a Google API Font, and for the first time in my experience, the Grid Layout. This was the most fun part in this project.
JavaScript. To be honest, I never liked the language to begin with, but this project made me want to give it a try. Thankfully, it turned out to be good stuff. I set up Fade In and Fade Out effects, Score and Timer sections, HTML Alterations using DOM, Async API Data fetching and of course, BUGS.
But in the end, it turned out good enough
Challenges we ran into
This time, the one major challenge I ran into was the entire concept of JavaScript. Asynchronicity, Data Types, functions interfering with each other, HTML Tag issues, sytax errors and what not.
I had to learn many work-arounds for these problems which, if nothing else, improved my problem solving skills.
Accomplishments that we're proud of
- The HTML Structure
- The beautiful, flowing-liquid background
- The timer system
- Fetching data through the API
What we learned
- JavaScript basics
- Fetching data through APIs
- DOM
- Animated backgrounds
- Asynchronous functions
What's next for Train Your Brain
- Removing Bugs
- Adding a Login/Sign-up System
Log in or sign up for Devpost to join the conversation.