Fovway/ToDoAppJS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Добавил кнопку скриншота

Browse Source
This commit is contained in:
Fovway 2025-03-09 22:22:27 +07:00
parent 33f3a277b2
commit aad8b23aa8
1 changed files with 46 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
index.html
View File

@ -4,6 +4,7 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>To-Do List</title> <title>To-Do List</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
<link rel="stylesheet" href="style.css" /> <link rel="stylesheet" href="style.css" />
</head> </head>
<body> <body>
@ -11,9 +12,54 @@
<div class="todo-header"> <div class="todo-header">
<input type="text" placeholder="Добавить задачу..." /> <input type="text" placeholder="Добавить задачу..." />
<button>+</button> <button>+</button>
<button class="save-btn" onclick="saveAsImage()">
<svg
id="SvgjsSvg1001"
width="20"
height="20"
xmlns="http://www.w3.org/2000/svg"
version="1.1"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:svgjs="http://svgjs.com/svgjs"
>
<defs id="SvgjsDefs1002"></defs>
<g id="SvgjsG1008">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 22"
width="20"
height="20"
>
<path
fill="none"
fill-rule="evenodd"
stroke="#ffffff"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M1 16v3a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-3M6 11l4 4 4-4M10 1v14"
class="colorStroke000 svgStroke"
></path>
</svg>
</g>
</svg>
</button>
</div> </div>
<div class="todo-list"></div> <div class="todo-list"></div>
</div> </div>
<script>
function saveAsImage() {
let gridElement = document.querySelector(".todo-list");
html2canvas(gridElement, { scale: 2 }).then((canvas) => {
let link = document.createElement("a");
link.download = "todo.png";
link.href = canvas.toDataURL("image/png");
link.click();
});
}
</script>
<script src="app.js"></script> <script src="app.js"></script>
</body> </body>
</html> </html>