@fazliddinov
front-end beginner

Как создать конструктор таблицы в javascript/html/css? P.S: ищите в google «udacity pixel art maker».?

HTML КОД:
<!DOCTYPE html>
<html>

<head>
    <title>Pixel Art Maker!</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Monoton">
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <h1>Lab: Pixel Art Maker</h1>

    <h2>Choose Grid Size</h2>
    <form id="sizePicker">
        Grid Height:
        <input type="number" id="inputHeight" name="height" min="1" value="1"> Grid Width:
        <input type="number" id="widthValue" name="width" min="1" value="1">
        <input type="submit">
    </form>

    <h2>Pick A Color</h2>
    <input type="color" id="colorPicker">

    <h2>Design Canvas</h2>
    <table id="pixelCanvas"></table>

    <script src="designs.js"></script>
</body>

</html>
CSS КОД :
body {
  text-align: center;
}

h1 {
  font-family: Monoton;
  font-size: 70px;
  margin: 0.2em;
}

h2 {
  margin: 1em 0 0.25em;
}

h2:first-of-type {
  margin-top: 0.5em;
}

table,
tr,
td {
  border: 1px solid black;
}

table {
  border-collapse: collapse;
  margin: 0 auto;
}

tr {
  height: 20px;
}

td {
  width: 20px;
}

input[type="number"] {
  width: 6em;
}
JS КОД:
// Select color input
// Select size input

// When size is submitted by the user, call makeGrid()

var pixel = document.getElementById('pixelCanvas');
 var color = document.getElementById('colorPicker').value;
var height = document.getElementById('inputHeight').value;
 var width = document.getElementById('inputWidth').value;
 var form = document.getElementById('sizePicker');
var td = document.createElement("td");
var tr = document.createElement("tr");
function makeGrid() {
  for(let i=0;i<height;i++) {
    pixel.appendChild(tr);
      for(let j=0;j<width;j++) {
      td.appendChild(td);
  }
  }
  document.querySelector('td').addEventListener('click', function() {
    this.style.backgroundColor = color;
  });}
form.onsubmit = makeGrid();


ПРОБЛЕМА В JS КОДЕ.ССЫЛКА ЕСЛИ КОМУ-ТО ИНТЕРЕСНО : https://classroom.udacity.com/nanodegrees/nd001-1m...
spoiler
5f2c29bd84a54116700644.png
  • Вопрос задан
  • 26 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы