|
|
@@ -0,0 +1,196 @@
|
|
|
+//Таблица умножения
|
|
|
+let table = document.createElement("table");
|
|
|
+for (let i = 0; i <= 9; i++) {
|
|
|
+ let tr = document.createElement("tr");
|
|
|
+
|
|
|
+ for (let j = 0; j <= 9; j++) {
|
|
|
+ let td = document.createElement("td");
|
|
|
+ if (i == 0 || j == 0) {
|
|
|
+ td.innerText = i + j;
|
|
|
+ } else {
|
|
|
+ td.innerText = i * j;
|
|
|
+ }
|
|
|
+ tr.appendChild(td);
|
|
|
+ }
|
|
|
+ table.appendChild(tr);
|
|
|
+}
|
|
|
+tables.appendChild(table);
|
|
|
+
|
|
|
+//Подсветить ячейку
|
|
|
+let table2 = document.createElement("table");
|
|
|
+for (let i = 0; i <= 9; i++) {
|
|
|
+ let tr = document.createElement("tr");
|
|
|
+
|
|
|
+ for (let j = 0; j <= 9; j++) {
|
|
|
+ let td = document.createElement("td");
|
|
|
+ if (i == 0 || j == 0) {
|
|
|
+ td.innerText = i + j;
|
|
|
+ } else {
|
|
|
+ td.innerText = i * j;
|
|
|
+ }
|
|
|
+ tr.appendChild(td);
|
|
|
+
|
|
|
+ td.onmouseover = function (event) {
|
|
|
+ this.style.background = "red";
|
|
|
+ }
|
|
|
+ td.onmouseout = function (event) {
|
|
|
+ this.style.background = "";
|
|
|
+ }
|
|
|
+ }
|
|
|
+ table2.appendChild(tr);
|
|
|
+}
|
|
|
+tables.appendChild(table2);
|
|
|
+
|
|
|
+//Подсветить строку и столбец
|
|
|
+let table3 = document.createElement("table");
|
|
|
+table3.className = "table3";
|
|
|
+
|
|
|
+for (let i = 0; i <= 9; i++) {
|
|
|
+ let tr = document.createElement("tr");
|
|
|
+ let tdIndex = i;
|
|
|
+ for (let j = 0; j <= 9; j++) {
|
|
|
+ let td = document.createElement("td");
|
|
|
+ if (i == 0 || j == 0) {
|
|
|
+ td.innerText = i + j;
|
|
|
+ } else {
|
|
|
+ td.innerText = i * j;
|
|
|
+ }
|
|
|
+ tr.appendChild(td);
|
|
|
+
|
|
|
+ td.onmouseover = function (event) {
|
|
|
+ tdIndex = this.cellIndex; // записываем в переменную индекс ячейки, на которую навели мышкой
|
|
|
+ console.log(tdIndex)
|
|
|
+
|
|
|
+ for (let i = 0; i < table3.children.length; i++) { //перебор всех тр и покраска тд с определенным индексом
|
|
|
+ table3.children[i].children[tdIndex].style.background = "yellow";
|
|
|
+ }
|
|
|
+
|
|
|
+ this.parentElement.style.background = "red" //красим строку
|
|
|
+ this.style.background = "orange"; //красим саму ячейку
|
|
|
+ }
|
|
|
+
|
|
|
+ td.onmouseout = function (event) {
|
|
|
+ for (let i = 0; i < table3.children.length; i++) {
|
|
|
+ table3.children[i].children[tdIndex].style.background = "";
|
|
|
+ }
|
|
|
+ this.parentElement.style.background = ""
|
|
|
+ this.style.background = "";
|
|
|
+ }
|
|
|
+ }
|
|
|
+ table3.appendChild(tr);
|
|
|
+}
|
|
|
+tables.appendChild(table3);
|
|
|
+
|
|
|
+
|
|
|
+//Calc
|
|
|
+let form = document.createElement("form");
|
|
|
+let h3 = document.createElement("h3");
|
|
|
+h3.innerText = "Расчет покупки квартиры"
|
|
|
+
|
|
|
+form.appendChild(h3)
|
|
|
+
|
|
|
+form.setAttribute("id", "formCalc");
|
|
|
+calcs.appendChild(form);
|
|
|
+
|
|
|
+formCalc.style.display = "flex";
|
|
|
+formCalc.style.flexDirection = "column";
|
|
|
+
|
|
|
+function createInput(inputName, inputType, label) {
|
|
|
+ if (label) {
|
|
|
+ let labelForInput = document.createElement("label");
|
|
|
+ labelForInput.innerText = label;
|
|
|
+
|
|
|
+ let input = document.createElement("input");
|
|
|
+ input.id = inputName;
|
|
|
+ input.type = inputType;
|
|
|
+ labelForInput.appendChild(input)
|
|
|
+ return labelForInput;
|
|
|
+ } else {
|
|
|
+ let input = document.createElement("input");
|
|
|
+ input.id = inputName;
|
|
|
+ input.type = inputType;
|
|
|
+ return input;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+formCalc.appendChild(createInput("inputFlatType", "number", "Класс жилья: 1(эконом), 2(комфорт), 3(бизнес), 4(премиум)"));
|
|
|
+formCalc.appendChild(createInput("inputPerSquareMetre", "number", "Размер квартиры (м²)"));
|
|
|
+formCalc.appendChild(createInput("inputIncome", "number", "Ваш доход в месяц"));
|
|
|
+formCalc.appendChild(createInput("inputBtn", "button"));
|
|
|
+
|
|
|
+inputBtn.value = "Посчитаем";
|
|
|
+inputBtn.style.alignSelf = "flex-end";
|
|
|
+
|
|
|
+inputBtn.onclick = function () {
|
|
|
+ let perSquareMetreCost;
|
|
|
+ if (inputFlatType.value == 1) {
|
|
|
+ perSquareMetreCost = 12547;
|
|
|
+ } else if (inputFlatType.value == 2) {
|
|
|
+ perSquareMetreCost = 17635;
|
|
|
+ } else if (inputFlatType.value == 3) {
|
|
|
+ perSquareMetreCost = 20178;
|
|
|
+ } else if (inputFlatType.value == 4) {
|
|
|
+ perSquareMetreCost = 27940;
|
|
|
+ } else {
|
|
|
+ perSquareMetreCost = 30000;
|
|
|
+ }
|
|
|
+
|
|
|
+ let flatCost = inputPerSquareMetre.value * perSquareMetreCost;
|
|
|
+ let timeForBuying = (flatCost / (inputIncome.value * 0.35) / 12).toFixed(1)
|
|
|
+
|
|
|
+ alert("Стоимость квартиры: " + flatCost + " грн" + "\n" + "Время накопления полной суммы (в годах): " + timeForBuying);
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+//Calc Live
|
|
|
+let formLive = document.createElement("form");
|
|
|
+let h3Live = document.createElement("h3");
|
|
|
+h3Live.innerText = "Расчет покупки квартиры ОНЛАЙН"
|
|
|
+
|
|
|
+formLive.appendChild(h3Live)
|
|
|
+
|
|
|
+formLive.setAttribute("id", "formCalcLive");
|
|
|
+calcs.appendChild(formLive);
|
|
|
+
|
|
|
+formCalcLive.style.display = "flex";
|
|
|
+formCalcLive.style.flexDirection = "column"
|
|
|
+
|
|
|
+formCalcLive.appendChild(createInput("inputFlatTypeLive", "number", "Класс жилья: 1(эконом), 2(комфорт), 3(бизнес), 4(премиум)"));
|
|
|
+formCalcLive.appendChild(createInput("inputPerSquareMetreLive", "number", "Размер квартиры (м²)"));
|
|
|
+formCalcLive.appendChild(createInput("inputIncomeLive", "number", "Ваш доход в месяц"));
|
|
|
+formCalcLive.appendChild(createInput("inputPerSquareMetreCost", "number", "Стоимость м²"));
|
|
|
+formCalcLive.appendChild(createInput("inputFlatCost", "number", "Стоимость жилья"));
|
|
|
+formCalcLive.appendChild(createInput("inputTimeForBuying", "number", "Время накопления полной суммы (в годах)"));
|
|
|
+
|
|
|
+inputPerSquareMetreCost.disabled = "disabled"
|
|
|
+inputFlatCost.disabled = "disabled"
|
|
|
+inputTimeForBuying.disabled = "disabled"
|
|
|
+
|
|
|
+function liveResult() {
|
|
|
+ if (inputFlatTypeLive.value == 1) {
|
|
|
+ inputPerSquareMetreCost.value = 12547;
|
|
|
+ } else if (inputFlatTypeLive.value == 2) {
|
|
|
+ inputPerSquareMetreCost.value = 17635;
|
|
|
+ } else if (inputFlatTypeLive.value == 3) {
|
|
|
+ inputPerSquareMetreCost.value = 20178;
|
|
|
+ } else if (inputFlatTypeLive.value == 4) {
|
|
|
+ inputPerSquareMetreCost.value = 27940;
|
|
|
+ } else {
|
|
|
+ inputPerSquareMetreCost.value = "";
|
|
|
+ }
|
|
|
+
|
|
|
+ inputFlatCost.value = inputPerSquareMetreLive.value * inputPerSquareMetreCost.value;
|
|
|
+ inputTimeForBuying.value = (inputFlatCost.value / (inputIncomeLive.value * 0.35) / 12).toFixed(1)
|
|
|
+}
|
|
|
+
|
|
|
+inputFlatTypeLive.oninput = function (event) {
|
|
|
+ liveResult()
|
|
|
+}
|
|
|
+
|
|
|
+inputPerSquareMetreLive.oninput = function (event) {
|
|
|
+ liveResult()
|
|
|
+}
|
|
|
+
|
|
|
+inputIncomeLive.oninput = function (event) {
|
|
|
+ liveResult()
|
|
|
+}
|
