Created
March 4, 2023 20:10
-
-
Save mohamedelhefni/c277d764fa50cd523079e5c9b1fc67df to your computer and use it in GitHub Desktop.
Challenge Maker
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<link rel="stylesheet" href=" https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css"> | |
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script> | |
<title>Challenge Maker</title> | |
<style> | |
#printable { | |
min-width: 800px; | |
max-width: 800px; | |
margin: auto; | |
} | |
.container { | |
max-width: 900px; | |
} | |
</style> | |
</head> | |
<body class="bg-gray-100 h-screen flex flex-col items-center justify-center"> | |
<div class="container mx-auto bg-white roudned shadow p-5"> | |
<div class="flex flex-col items-center "> | |
<h1 class="my-3 text-center font-bold text-4xl ">Challenge Maker</h1> | |
<div class="w-full flex justify-center items-center gap-4"> | |
<input id="titleInput" type="text" placeholder="Challenge Title" class="rounded border-2 my-2 p-2 "> | |
<input id="numberOfDays" type="number" placeholder="Days Number" class="rounded border-2 my-2 p-2" | |
step="10"> | |
<button id="generate" | |
class="bg-green-500 hover:bg-green-600 px-4 py-2 text-white rounded text-lg font-bold ">Generate</button> | |
</div> | |
</div> | |
<div id="printable" class="p-1 hidden "> | |
<div class="w-full border border-black border-b-0 p-3 "> | |
<h3 id="title" class="text-center text-2xl font-bold p-3 -mt-5 "></h3> | |
</div> | |
<div id="grid" class="grid grid-cols-10"></div> | |
</div> | |
<button id="print" | |
class=" hidden mt-3 bg-blue-500 hover:bg-blue-600 px-4 py-2 text-white rounded text-lg font-bold ">Print</button> | |
</div> | |
<script> | |
const gridContainer = document.getElementById("grid") | |
const printableContainer = document.getElementById("printable") | |
const generateButton = document.getElementById("generate") | |
const printButton = document.getElementById("print") | |
function addDays(date, days) { | |
let result = new Date(date) | |
result.setDate(result.getDate() + days) | |
return result; | |
} | |
function generateCell(i, date) { | |
return ` | |
<div class="relative p-2 flex flex-col items-center justify-center border ${i % 10 == 0 ? "border-l-1" : "border-l-0"} ${i < 10 ? "border-t-1" : "border-t-0"} border-black"> | |
<h3 class="font-bold text-xl ">${i + 1}</h3> | |
<span class="mb-1 text-muted text-xs">${date.toLocaleString('en-us', { day: 'numeric', month: 'short' })}</span> | |
<div class="border border-black border-r-0 border-b-0 absolute w-4 h-4 bottom-0 right-0"> </div> | |
</div> | |
` | |
} | |
generateButton.addEventListener("click", () => { | |
const titleInput = document.getElementById("titleInput").value | |
const titleContainer = document.getElementById("title") | |
const numberOfDays = +document.getElementById("numberOfDays").value | |
let gridCells = "" | |
for (let i = 0; i < numberOfDays; i++) { | |
gridCells += generateCell(i, addDays(new Date(), i)) | |
} | |
titleContainer.textContent = titleInput; | |
printableContainer.classList.remove("hidden"); | |
printButton.classList.remove("hidden"); | |
gridContainer.innerHTML = gridCells; | |
}) | |
printButton.addEventListener("click", () => { | |
html2canvas(printableContainer) | |
.then(canvas => { | |
canvas.style.display = 'none' | |
document.body.appendChild(canvas) | |
return canvas | |
}) | |
.then(canvas => { | |
const titleInput = document.getElementById("titleInput").value | |
const image = canvas.toDataURL('image/png').replace('image/png', 'image/octet-stream') | |
const a = document.createElement('a') | |
a.setAttribute('download', `${titleInput.replaceAll(" ", "-")}.png`) | |
a.setAttribute('href', image) | |
a.click() | |
canvas.remove() | |
}) | |
}); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment