mohamedelhefni/ChallengeMaker.html

## ChallengeMaker.html
<!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>
	<!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>