Добавлена возможность сохранять изображение с феминитивом

css/feminitives.css

@@ -7,7 +7,7 @@
 }
 
 #definition {
-	border: solid 1px;
+	/* border: solid 1px; */
 	padding: 30px;
 	width: 600px;
 	margin: 0 auto;
@@ -29,9 +29,15 @@
 	margin-top: 25px;
 }
 
-#definition-card {
+#definition-image {
 	width: 50%;
 	margin: 0 auto;
+	padding: 10px;
+	width: 400px;
+	background-color: white;
+}
+
+#definition-card {
 	border-top: solid 3px;
 	border-bottom: solid 3px;
 	border-color: MediumOrchid;
@@ -66,11 +72,11 @@
 	font-size: 40px;
 	font-weight: regular;
 	text-align: center;
-	text-transform: capitalize;
 }
 
 #definition-full {
 	font-size: 16px;
 	height: 40px;
+	margin-top: 10px;
 }
 

gofem.html

@@ -7,7 +7,6 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
-    <!-- <link href="css/bootstrap.min.css" rel="stylesheet"> -->
     <link href="css/feminitives.css"   rel="stylesheet">
   </head>
 
@@ -19,19 +18,20 @@
         <input id="definition-word" type="text" class="form-control" placeholder="Слово">
         <button type="button" onclick="tr('definition')">Феминитивь!</button>
 
-        <br />
-        <div id="definition-dict"></div><br />
-        <div id="definition-full"></div><br />
+        <div id="definition-dict"></div>
+        <div id="definition-full"></div>
+        <div id="definition-image">
           <div id="definition-card">
             <h1><span> ф — феминитивы </span></h1>
             <div id="definition-content"></div>
           </div>
         </div>
+        <button type="button" onclick="download_image('definition-image')">IMG</button>
+      </div>
     </div>
 
-    <!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> -->
-    <!-- <script src="js/bootstrap.min.js"></script> -->
     <script src="js/feminitives.js"></script>
+    <script src="js/html2canvas.js"></script>
   </body>
 </html>
 

js/feminitives.js

@@ -1,5 +1,3 @@
-// [ ] TODO: сохранение изображения
-// [ ] TODO: разбор переданного адреса
 // [ ] TODO: vk.com
 // [ ] TODO: валидация
 // [ ] TODO: фокус
@@ -132,6 +130,20 @@ function construct_feminitive(stem, ending, gap) {
 	return gap ? stem + css_gender_gap() + css_end(ending) : stem + "_" + ending;
 }
 
+//Сохранение изображения с феминитивом
+function download_image(container) {
+	html2canvas(document.getElementById(container), {
+		onrendered: function (canvas) {
+			var a = document.createElement('a');
+			a.href = canvas.toDataURL();
+			a.download = document.getElementById(container
+						.replace(/-.*$/,"-content"))
+						.innerHTML + '.png';
+			a.click();
+		}
+	});
+};
+
 //Создание феминитива
 function make_feminitives(word) {
 	var stem           = "";             //Основа слова
@@ -238,7 +250,7 @@ function tr(container) {
 
 	//Вывод информации
 	document.getElementById(container + "-dict").innerHTML    = feminitives[1].join(" | ");
-	document.getElementById(container + "-content").innerHTML = feminitives[0];
+	document.getElementById(container + "-content").innerHTML = feminitives[0].replace(/(.)/, s => s.toUpperCase());
 }
 
 //Инициализация с разбором адресной строки