This repo contains all the projects that I have made from Florin Pop's app-ideas.
| Name | Stack ⚙ | Short Description 📒 | Design 🎨 | Live Link ✨ |
|---|---|---|---|---|
| Bin2Dec |     |
Binary-to-Decimal number converter | - | Link |
| Border Radius Previewer | |
Preview how CSS3 border-radius values affect an element | Figma | Link |
| Calculator | |
Calculator | Figma | Link |
| Christmas Lights | |
Simulate a string of Christmas lights | Figma | Link |
| Cause Effect App | |
Click list item to display item details | Figma | Link |
| Color Cycle | |
Cycle a color value through incremental changes | Figma | Link |
| Dollars to Cents | |
Convert dollars to cents | Figma | Link |
| Dynamic CSS Variables | |
Dynamically change CSS variable settings | - | Link |
| Flip Image | |
Change the orientation of images across two axes | Figma | Link |
| GitHub Status |   |
Display Current GitHub Status | - | Link |
| Hello | |
User native language greeting | Figma | Link |
| JS Input Validation | |
Script to validate inputs entered by a user using RegEx | Figma | Link |
| JSON2CSV | |
JSON to CSV converter | Figma | Link |
| Key Value | |
Keyboard Event Values | Figma | Link |
| Lorem Ipsum Generator | |
Generate lorem ipsum placeholder text | Figma | Link |
| Notes App |  |
Create an online note pad | Figma | Link |
| Quiz App | |
Test your knowledge by answering questions | Figma | Link |
| Random Meal Generator | |
Generate random meals | Figma | Link |
| Random Number Generator | |
Generate random number between range. | Figma | Link |
| Slider Design | |
Display images using a slider control | Figma | Link |
| Vigenere Cipher | |
Encrypt text using the Vigenere Cypher | Figma | Link |
| Wind Chill | |
Calculate the windchill factor from an actual temperature | Figma | Link |
| Word Frequency | |
Calculate word frequency in a block of text | Figma | Link |
| Weather App | |
Get the temperature, weather condition of a city. | Figma | Link |
| Name | Stack ⚙ | Short Description 📒 | Design 🎨 | Live Link ✨ |
|---|---|---|---|---|
| Password Generator |   |
Generate random passwords | Figma | Link |
Almost all fonts used in these projects are local. Located in the fonts folder.
Fonts are downloaded from Google Fonts with the help of google webfont helper.
A NodeJS script named Google Fonts to CSS (gftocss.js) is used to generate a CSS file containing the @font-face definitions for that font from the font files present.
A very basic service worker - sw.js - is used to cache fonts and project files (external assets are not cached). It also enables projects to be registered as PWA.
Separate cache containers are created for each project but only a single font cache container is shared among all of them.
While the font cache uses the cache-first strategy, the individual project cache uses stale-while-revalidate.