conversation cost time simulator

I have been playing around with JavaScript and Tailwind CSS for the last couple of weeks. I am very impressed with Tailwind's capabilities, add JavaScript and within a single html file you can build a complex app. As always I wanted to build a real world app to show how easy and beautiful apps can be written using Tailwind and JavaScript!

Let's first talk about the app itself. I call it the Conversation Cost Time Simulator, just another fancy name that I could think of.

Ok, now lets setup the plot - Imagine you walk into the elevator and see Jeff Bezos standing in front of you, so you now have 30 seconds to strike up a conversation with him. Jeff politely talks to you for 30 seconds and walks off. Cool eh, but ever imagined how much did that 30 second conversation cost Jeff and you? That's what the app tries to simulate.

Checkout the app here

The app will ask for the user's name and his estimated yearly income. It then asks you to select the famous figure (any one of the five most richest people) in the world. You then select a type of conversation, 30 seconds in the elevator, 1 min at the coffee machine or 2 mins before he goes on the stage for the quarterly town hall with all employees.

Once you feed in these details you hit the "Start Conversation" button and the app starts to create a conversation between you and the figure for the duration you selected. The conversation is randomly generated AI content and does not have any relation to the actual figures. The conversation happens at a steady rate of 130 words per minute, which is the standard spoken language speed. There is a timer at the top of the page which shows the remaining duration of the conversation.

Now the fun part - The app then starts a counter which shows how much this conversation is costing for both you and the figure. the calculations are based on the numbers you provided as your yearly income and the yearly income of the figure. The costs ($) are multiplied with the number of seconds into the conversation and updated in real time! Try it out and compare your time cost with the world's richest and see how precious time really is.

The overall idea is to showcase the importance of time in modern times. We may not realize its important in our everyday life but if you compare it with the richest and busiest people in the world we can really understand how costly time can really be!

Now to the boring part - my reflections of building this app and of Tailwind CSS. 1. It was very easy to create a visually appealing without writing custom CSS from scratch, which I have always hated. 2. Direct styling, right within the html code! 3. Ease of pairing the interface with the JavaScript logic app. 4. Everything is neatly tucked away in one single html file! 5. Most of the conversational content was generated using Google's Gemini APIs and are purely for demonstration purposes, they do not necessarily represent the views of the figures.

Overall it took me just about 2 weeks to write and fine tune this app, but the availability of resources like Tailwind CSS, Google Gemini made it very easy to build this app so quickly.

I hope you liked this little project of mine and reading this post.