You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
66 lines
2.9 KiB
66 lines
2.9 KiB
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<style>
|
|
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,300;0,400;1,300;1,400&family=Orelega+One&display=swap');
|
|
</style>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<script
|
|
src="https://code.jquery.com/jquery-3.7.1.min.js"
|
|
integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
|
|
crossorigin="anonymous">
|
|
</script>
|
|
<script
|
|
src="https://code.jquery.com/ui/1.13.1/jquery-ui.min.js"
|
|
integrity="sha256-eTyxS0rkjpLEo16uXTS0uVCS4815lc40K2iVpWDvdSY="
|
|
crossorigin="anonymous">
|
|
</script>
|
|
<link rel="icon" type="image/x-icon" href="favicon.png">
|
|
<title>Cost in Coffee</title>
|
|
<link rel="stylesheet" href="index.css" />
|
|
<meta content="Cost In Coffee" property="og:title" />
|
|
<meta content="So often you see in ads that their subscription is just the price of a coffee a week or something similar. So just how many coffees a day are you really spending on all these subscriptions?" property="og:description" />
|
|
<meta content="https://costin.coffee" property="og:url" />
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<div class="preface">
|
|
So often you see in ads that their subscription is just <i>the price of a coffee a week</i>
|
|
or something similar. So just how many coffees a day are you really spending on all these
|
|
subscriptions?
|
|
</div>
|
|
<div class="header">
|
|
<h1>Cost in Coffee</h1>
|
|
<h2>See the true cost of your subscriptions in terms of cups of coffee a day.</h2>
|
|
</div>
|
|
<div class="result">
|
|
<p>Your subscriptions are equivalent to</p>
|
|
<div id="coffee-count">0.00</div>
|
|
<p>cups of coffee a day.</p>
|
|
<p>That's <span id="cost-display">$0.00</span> of coffee.</p>
|
|
</div>
|
|
<div id="subscriptions">
|
|
<div id="subscription-header">
|
|
<p>Your Subscriptions</p>
|
|
<button type="button" id="addSubButton">Add</button>
|
|
</div>
|
|
<div class="add-sub-item-container" id="addSubFormContainer" hidden>
|
|
<form action="none" id="add-sub-form" class="sub-item">
|
|
<input type="text" name="subName" id="subName" placeholder="Subscription">
|
|
<input type="text" name="subPrice" id="subPrice" placeholder="$0.00">
|
|
<button type="button" id="confirmSubButton">✓</button>
|
|
</form>
|
|
</div>
|
|
<p class="no-subs-text">Start adding subscriptions and see the costs rise.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="footer">
|
|
<p>©2023 Gabe Farrell</p>
|
|
<a href="https://github.com/gabehf/CostInCoffee">View the source on GitHub</a>
|
|
</div>
|
|
|
|
<script src="main.js"></script>
|
|
</body>
|
|
</html> |