A majority of it was done just chatting with the AI. Unfortunately I don’t have any of the specific prompts anymore.
I started with the stopwatch. Knowing how the stopwatch worked in classic apps, I prompted it to function exactly the same, but forced it to use a single JSON object instead of two separate fields. The AI decided how the object would be laid out.
To keep things simple, I instructed it to use Unix time to store the datetime. With that, any start/end times and durations are stored in milliseconds.
I asked the AI to create an empty JSON object if it’s null. That part is important if it’s linked to a column that is empty initially. That way it will build the object as needed.
The countdown was a little more work. I don’t think it was terribly complicated, but I had less of a plan going into it compared to the stopwatch. A lot of back and forth with the AI to debug, fix, and try things. There’s a little more involved with the addition of the dropdowns. I didn’t really have a plan as far as how the JSON would be laid out for that, but the AI did pretty good at coming up with it. A lot of the JSON built out automatically as I asked for different features. It did help that it had the context of the stopwatch to build off of.
Things can be pulled out of the JSON object using Query JSON. I included one example in the table that uses JSONnata to convert the stopwatch duration from milliseconds to seconds. Could be converted to whatever you want.
The component could be modified to force the JSON to update at regular intervals, or to update another column with a value at regular intervals.
The JSON can also be manipulated outside of the component to start, stop, set, reset anything within the component.
Eventually I hit a point where the component would be maxed out. (There must be some kind of size limit before the component gets corrupt and pieces of it stop working. I seem to find that limit a lot.) That led to a lot of trial and error with my prompts to get it to do what I wanted without breaking. A lot of trying to make the logic more efficient, or just giving up and switching directions.
For the final stretch, I dug into the code. I grabbed the html code for the component, popped it into notepad++, and made changes directly in the code. Then I copied it back into an empty AI component, telling it to “recreate exactly” (provided it actually respects that request).
So ultimately it was a combination of using the AI for most things and directly tweaking the code to fine tune it. About the only thing I’m not happy with yet is the font. I insist on it being a monospaced font, but sometimes monospaced fonts just don’t look that good.
I think if you wanted to use mine as a base, you can ask the AI to remove the stopwatch feature and the tabs feature, along with anything else you don’t want. Then ask for any changes from there. The final iteration was created via the code, but you can still use the AI to modify it further.
If you have specifics in mind, I could try to help.
