Hello,
Last week at my work I talked on PWA and made a color guessing app. The idea was simple : One needs to guess the right HEXA color value of the background color. One can play the game even there is no network or internet.
Tech Stack used:
- HTML5
- CSS3
- JavaScript
As of now following features I have implemented:
- Add to home screen
- offline support
- splash screen and theme
- icons for the home screen
Future plans:
- Add scores
- Add hints
Screenshots:
Steps to install:
- On the android phone, open Chrom browser and type colormatching.netlify.com
- You will get the prompt 'Add to home screen' tap on 'ok'.The icon will get added to the mobile.
- Now, go back to the mobile home screen and tap on the color icon. It will take you to the app on the browser.
- Go to the mobile setting and turn on the 'Airplane mode'. Now, again go back and tap on the color icon. This time instead of a blank or broken screen you will see the game page. Enjoy the game.
Try the app on mobile browser. Chrome browser and android.
PS: This is still WIP if you see any bugs or broken UI/UX please let me know.
Top comments (17)
umm i confuse.. what is PWA? is it like reactNative?
Thanks for your valuable response. Hope we find someone who can... !!!
Yes, it can work with backend API too.
Okie I will check all things tomorrow morning.
okie that great..!! umm what is diff between reactnative and pwa?
Reactnative is based on the react.
PWA is based on the HTML, CSS, JS or can be done with any JS framework too.
it amazing..! i will definitely try it
Umm Actually right now i m finding something about my interns project. if anything i found through PWA thn i will share with all of you..!!
Hi Neha,
Nice work. I am bit curious about the Technologies that you used for this pwa. By the way this game is quite hard for us 😄
Thank you!!
Tech stack is HTML, CSS, and JavaScript.
Oh!! I got the feedback it is hard. I am planning to add hints.
Do you have any thoughts on how I can make it more simple for folks?
Nice app and good little learning project too! 🙌🏻
You might make it easier by adding multiple choice with 3 similarly hex codes and let us choose the right one?
Well its hard for most of us because most of use CSS frameworks such as TailwindCSS for rapid development and for colors, color selectors and generators are used.
And you can add Options section but it will be a long task.
right now i m django intern.. is it work with any backend API?
Feature request:
Airplane mode turns off after you guess all the 268,435,456.
What these numbers mean 🙄
Yeah!! sounds good for the hints.
Yes, vanilla JS no framework.
interesting...!!!