Back
logo

Experiments

test-tube

Experimenting with Codepen

Take a look at some of the tinkering I've done using Codepen for different front-end projects. In these cases, either a solution wasn't readily available, or I needed to vividly demonstrate the functionality I envisioned for a particular element. It's nothing spectacular, but it shows I like to go that extra mile when needed.

table-sync Salary Conversion Table

Look up your salary before and after taxes (take home pay).
Annual Salary Hourly Wage BiWeekly Salary Monthly Salary Net Annual Salary Net Hourly Wage Net BiWeekly Salary Net Monthly Salary

bi-robot Crypto Currency Price Lookup

I explored the power of AI collaboration by using ChatGPT 4 and the Code Co-pilot agent along with free APIs from CoinLore.com to create a very simple crypto currency price retriever. I started by creating a user-centric wireframe of what the price card should look like and then outlining (in detail) the user interactions and system behavior. After ChatGPT generate the code I then reviewed and implemented it. This shows my approach to utilizing AI tools to enhance my productivity. Took all of 30mins.
Here is the prompt I used:
"I want to have a responsive card that looks like attached. It will contain crypto currency pricing. More specifically "symbol", "name", "price_usd", "percent_change_24h". If "percent_change_24h" is a positive number then a green Arrow up-short will be displayed to the left of the "percent_change_24h" value. Otherwise, if the "percent_change_24h" is a negative number then a red (#FF6666) Arrow down-short will be displayed to the left of the "percent_change_24h" value. In order to display the crypto currency of a specific currency, the system will take input from a user in the form of a dropdown menu of the first 100 crypto currencies. [ BTC v ] User shall be able to select a symbol from the drop down input at which point the system should do two things: 1. call GET https://api.coinlore.net/api/tickers/?start=100&limit=100 2. Match the selected value to the 'tickers.symbol' value. If match, then collect neccessary field values and display card."
A couple things I noticed, it didn't really deal with responsiveness because the card is too small, that's fine I could tweak the CSS to make the card bigger if I wanted to. The other thing I noticed was I missed a use case for when percent_change_24 is equal to 0.00, in this case the value should be grey. Lastly, in my wireframe I had the price formatted as $#,###.## and the price and percent change & icon were right aligned on the card and middle aligned with symbol and name.
So, clearly AI still has a ways to go before 100% interpreting wireframes into responsive web designs, but I'm sure it won't be long.

bi-lightning Ohm's Law Calculator

Thought I'd try to make a "cool" looking ohm's law calculator. Just hover over what you're looking to calculate and select the formula. Input your values and see your result.