Таблицы умножения — Практические проекты JavaScript

Таблица умножения — это таблица произведения двух чисел.

Привет 👋 мои дорогие друзья-разработчики JavaScript. Надеюсь, у вас все хорошо и вы создаете проекты своей мечты. В течение достаточно долгого времени я думал о начале серии практических проектов JavaScript, в которых я планирую создать несколько проектов на ванильном JavaScript и поделиться ими со всеми вами.

Итак, для начала сегодня я буду писать код для создания базовой таблицы умножения с таблицей HTML с использованием JavaScript.

Создайте базовую разметку в файле index.html

<div id="container" class="container">
</div>

Напишите несколько основных стилей в styles.css.

body {
   font-family: sans-serif;
   background-color: #fff68f;
}
.container {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   height: 95vh;
}
table {
   border-radius: 5px;
   border: 1px solid #9CCB19
}
th, td {
   padding: 4px 2px 4px 6px;
}
th:not(:last-child), td:not(:last-child)  {
   border-right: 1px solid grey;
}

И давайте добавим немного логики в файл script.js

const num = prompt('How many multiplication tables ?')
const container = document.getElementById('container')
let output = "<h1>Multiplication Tables</h1>";
output = output + "<table>";
output = output + "<tr style='font-size:18px; color: #fff; background-color: #9CCB19;'>";
for(let i = 1; i <= num; i++){
   output = output + "<th> [ " + i + " ] </th>";
}
output = output + "</tr>";
for(let j = 1; j <=10; j++){
   let colorcode = '';
   if(j % 2 === 0){
      colorcode = '#ddd';
   } else {
      colorcode = '#fff';
   }
   output = output + "<tr style='background-color: " + colorcode + "'>";
   for(let  k = 1; k <= num; k++){
      output = output + "<td style='font-size: 16px;'>" + j + " X " + k + " = " + j*k + "</td>"
   }
   output = output + "</tr>"
}

output = output + "</table>";
container.innerHTML = output;

Сохраните, проверьте свой браузер и наслаждайтесь тем, что мы только что создали.

Удачного кодирования и написания статей о кодировании! 😀

Я пишу о программировании и технологиях, и если вы подпишитесь на меня в Твиттере, я не буду тратить ваше время зря. ?