Skip to content

Instantly share code, notes, and snippets.

@jake-walker
Last active November 20, 2019 17:43
Show Gist options
  • Save jake-walker/4639c2c88cf5b538bf4fb74096e38b9f to your computer and use it in GitHub Desktop.
Save jake-walker/4639c2c88cf5b538bf4fb74096e38b9f to your computer and use it in GitHub Desktop.
Secret Santa Card Generator
<!--
Secret Santa Card Generator by Jake Walker.
This is a quick and dirty web app for generating cards to be used for the
'Fool-Proof Secret Santa' video by Numberphile - https://www.youtube.com/watch?v=GhnCj7Fvqt0.
Save this HTML file to your computer and open in your favourite browser, then
follow the instructions on the page. This is designed to be printer friendly
so they do look a bit bland.
-->
<html>
<head>
<title>Secret Santa Cards</title>
<link href="https://fonts.googleapis.com/css?family=Lobster&display=swap" rel="stylesheet">
<style>
body {
font-family: "Lobster", cursive;
font-size: 1.2em;
}
table {
width: 100%;
}
table, th, td {
border: 2px solid red;
border-collapse: collapse;
white-space: nowrap;
}
th, td {
width: 50%;
text-align: center;
padding: 7;
}
.number {
font-size: 1.4em;
}
@media print {
#message {
display: none;
}
table {
page-break-inside: auto !important;
}
tr {
page-break-inside: avoid !important;
page-break-after: auto !important;
}
}
</style>
</head>
<body>
<div id="app">
<div id="message">
<p>
This is a simple web app for generating cards for the video <a href="https://www.youtube.com/watch?v=GhnCj7Fvqt0">'Fool-Proof Secret Santa' by Numberphile</a>.
Using this method stops people from getting themselves and makes things more fair. Type in the number
of people playing below and print the page, then watch the video for instructions on how to deal the
cards.
</p>
<p>
Number of people: <input type="number" v-model="people">
</p>
</div>
<table>
<tr v-for="i in parseInt(people)" :key="index">
<td>
You are number<br>
<span class="number">{{ i }}</span>
</td>
<td>
You are buying a gift for number<br>
<span class="number">{{ i }}</span>
</td>
</tr>
</table>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
people: 30
}
})
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment