Log inSign up
dthyresson avatar
Public
HTTP (deprecated)
Fork
0 Likes
Val Town is a social website to write and deploy JavaScript.
Build APIs and schedule functions from your browser.
Sign up with GitHub
Readme

What's that in Hot Dogs?

Inspired by the 2014 Boston Baseball Hackday submission, this val shows how many hot dogs a baseball player can buy in a year based on his annual salary and the average price of a hot dog sold at their home team's stadium.

Back then, the team spent most of the hackday time collecting data, building s javascript app from scratch and then deployed to Heroku. It took some time. It had much nicer design, artwork, styling, etc to be sure.

I wanted to see how quickly a similar app could be created and made available on Val.town 10 years later.

I asked Chat GPT to build the app:

You are a javascript web developer and a baseball fan. Build a web app using Hono called "What's that in hot dogs?". The app should let you select a baseball player. Based on 1) the player annual salary calculate the number of hot dogs they could buy based on the average price of a hot dog sold at their stadium. For example, Mike Trout played for the Los Angeles Angels and makes $35M per year. The Los Angeles Angels play at Angel Stadium a hot dog costs $8. That means he can buy 35,000,000/8 = 4.375M hot dogs. The app lets you pick a player and then will display an emoji icon of a hot dog. One emoji hot dog is worth 100,000 hot dogs. So picking Mike Trout will show 43.75 (or 44) hot dog icons.

It worked! But, it only had one player's worth of data.

The app needs more player salary and hot dog price data. Find the top players in each MLB team, their salary, and the price of a hot dog at their home stadium.

I then asked for a small improvement:

Improve the app by also showing the team the play plays for, the stadium, salary and price of the hot dog. Include it in a nice table below the hot dog emoji list.

Within 10 minutes, I had a working "What's that in Hot Dogs?". I then re-worked the headings and added a legend and it matched what I remember seeing back in 2014 ... but built and deployed in minutes versus hours.

Note: Much of the 2014 team's time was spent collecting data manually by looking up players' salaries and finding the cost of a hot dog at stadiums. In this example, I've not validated that ChaptGPT correctly identified these figures.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
/** @jsxImportSource npm:hono@3/jsx */
import { Hono } from "npm:hono";
const app = new Hono();
const players = {
"Mike Trout": { team: "Los Angeles Angels", salary: 35450000, stadium: "Angel Stadium", hotDogPrice: 6.5 },
"Gerrit Cole": { team: "New York Yankees", salary: 36000000, stadium: "Yankee Stadium", hotDogPrice: 6 },
"Mookie Betts": { team: "Los Angeles Dodgers", salary: 27000000, stadium: "Dodger Stadium", hotDogPrice: 6.75 },
"Manny Machado": { team: "San Diego Padres", salary: 32000000, stadium: "Petco Park", hotDogPrice: 6.5 },
"Francisco Lindor": { team: "New York Mets", salary: 34100000, stadium: "Citi Field", hotDogPrice: 6.5 },
"Aaron Judge": { team: "New York Yankees", salary: 40000000, stadium: "Yankee Stadium", hotDogPrice: 6 },
"Fernando Tatis Jr.": { team: "San Diego Padres", salary: 34000000, stadium: "Petco Park", hotDogPrice: 6.5 },
"Jacob deGrom": { team: "Texas Rangers", salary: 37000000, stadium: "Globe Life Field", hotDogPrice: 5.5 },
"Shohei Ohtani": { team: "Los Angeles Angels", salary: 30000000, stadium: "Angel Stadium", hotDogPrice: 6.5 },
"Bryce Harper": { team: "Philadelphia Phillies", salary: 27000000, stadium: "Citizens Bank Park", hotDogPrice: 6 },
"Juan Soto": { team: "San Diego Padres", salary: 23000000, stadium: "Petco Park", hotDogPrice: 6.5 },
"Ronald Acuña Jr.": { team: "Atlanta Braves", salary: 17000000, stadium: "Truist Park", hotDogPrice: 5 },
"José Altuve": { team: "Houston Astros", salary: 29000000, stadium: "Minute Maid Park", hotDogPrice: 5.5 },
"Freddie Freeman": { team: "Los Angeles Dodgers", salary: 27000000, stadium: "Dodger Stadium", hotDogPrice: 6.75 },
"Nolan Arenado": { team: "St. Louis Cardinals", salary: 35000000, stadium: "Busch Stadium", hotDogPrice: 5 },
"Justin Verlander": { team: "New York Mets", salary: 43000000, stadium: "Citi Field", hotDogPrice: 6.5 },
"Paul Goldschmidt": { team: "St. Louis Cardinals", salary: 26000000, stadium: "Busch Stadium", hotDogPrice: 5 },
"Trea Turner": { team: "Philadelphia Phillies", salary: 30000000, stadium: "Citizens Bank Park", hotDogPrice: 6 },
"Corey Seager": { team: "Texas Rangers", salary: 32000000, stadium: "Globe Life Field", hotDogPrice: 5.5 },
"Yadier Molina": { team: "St. Louis Cardinals", salary: 10000000, stadium: "Busch Stadium", hotDogPrice: 5 },
};
app.get("/", (c) => {
const playerOptions = Object.keys(players).map(player => `<option value="${player}">${player}</option>`).join("");
return c.html(`
<html>
<head>
<title>What's that in hot dogs?</title>
<style>
body {}
</style>
</head>
<body>
<h1>What's that in hot dogs?</h1>
<form action="/result" method="get">
<label for="player">Choose a player:</label>
<select name="player" id="player">
${playerOptions}
</select>
<button type="submit">Calculate</button>
</form>
<footer>
<p>Made with <a href="https://www.val.town/v/dthyresson/whatsThatInHotDogs">Val.town</a> where you can read what this is <a href="https://www.val.town/v/dthyresson/whatsThatInHotDogs">all about</a>.</p>
</footer>
</body>
</html>
`);
});
app.get("/result", (c) => {
const playerName = c.req.query("player");
const player = players[playerName];
if (!player) {
return c.html("<h1>Player not found</h1>");
}
const numberOfHotDogs = player.salary / player.hotDogPrice;
const hotDogEmojis = Math.round(numberOfHotDogs / 100000);
const emojis = "🌭".repeat(hotDogEmojis);
return c.html(`
<html>
<head>
<title>${playerName} - Hot Dogs</title>
<style>
body {}
table {
width: 90%;
margin: 20px auto;
border-collapse: collapse;
}
table, th, td {
border: 1px solid black;
}
th, td {
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<h1>What's that in hot dogs?</h1>
<h2>${playerName} can buy ${numberOfHotDogs.toLocaleString()} hot dogs!</h2>
<h3>${emojis}</h3>
<h4>1 x 🌭 = $100,000</h4>
<table>
<tr>
<th>Player</th>
<th>Team</th>
<th>Stadium</th>
<th>Salary</th>
<th>Hot Dog Price</th>
</tr>
dthyresson-whatsthatinhotdogs.web.val.run
July 26, 2024