javascript - জাভাস্ক্রিপ্ট ব্যবহার করে একটি 16x16 গ্রিড তৈরি করা হচ্ছে




html css (3)

আমি জাভাস্ক্রিপ্টে একটি 16x16 গ্রিড তৈরি করার চেষ্টা করছি। আমি যে পদ্ধতিটি ব্যবহার করার চেষ্টা করছি তা হ'ল এইচটিএমএলতে একটি খালি div তৈরি করা, এবং তারপরে এটির সাথে অন্য ডিভগুলি সংযুক্ত করা এবং তাদের সীমানাটি রূপরেখা। আমি এই কাজটি করতে পারে বলে মনে হচ্ছে না এবং আমি আমার কোডটি নীচে রেখেছি।

এইচটিএমএল:

<!DOCTYPE html>

<head>
    <title>Etch-a-Sketch</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script type="text/javascript" src="app.js"></script>
</head>

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

</body>

javascript:

// Sets important constants and variables

const container = document.getElementById("container");
let rows = document.getElementsByClassName("gridRow");
let cells = document.getElementsByClassName("cell");

// Creates a default grid sized 16x16
function defaultGrid() {
    makeRows(16);
    makeColumns(16);
}

// Takes (rows, columns) input and makes a grid
function makeRows(rowNum) {

    // Creates rows
    for (r = 0; r < rowNum; r++) {
        let row = document.createElement("div");
        container.appendChild(row).className = "gridRow";
    };
};

// Creates columns
function makeColumns(cellNum) {
    for (i = 0; i < rows.length; i++) {
        for (j = 0; j < cellNum; j++) {
            let newCell = document.createElement("div");
            rows[j].appendChild(newCell).className = "cell";
        };

    };
};

সিএসএস:

.gridRow {
    border: 1px solid black;
}

.cell {
    border: 1px solid black;
}

এইচটিএমএল কোড

<html>
<head>
    <link rel=stylesheet type="text/css" href="Project_Javascript_jQuery.css">
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script type="text/javascript" src="Project_Javascript_jQuery.js"></script>
</head>

<body>
<h4><a href="http://www.theodinproject.com/home">The Odin Project</a> >> <a href="http://www.theodinproject.com/web-development-101">Web Development 101</a> >> <a href="http://www.theodinproject.com/web-development-101#section-the-front-end">The Front End</a> >> <a href="http://www.theodinproject.com/web-development-101/javascript-and-jquery">Project: JavaScript and jQuery</a> >> Nick Kessler entry February 6, 2015</h4>

<center><button class="newGrid">New Grid</button></center>

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

<br><br>

</body>

</html>

সিএসএস

 #container {
    position: relative;
    top: 30px;
    outline: 2px solid #000;
    font-size: 0;
    margin: auto;
    height: 960px;
    width: 960px;
    padding: 0;
    border: none;
}

.grid {
    margin: 0;
    padding: 0;
    border: none;
    outline: 1px solid #000;
    display: inline-block;
}

জাভাস্ক্রিপ্ট

// Function that builds a grid in the "container"
function createGrid(x) {
    for (var rows = 0; rows < x; rows++) {
        for (var columns = 0; columns < x; columns++) {
            $("#container").append("<div class='grid'></div>");
        };
    };
    $(".grid").width(960/x);
    $(".grid").height(960/x);
};

// Function that clears the grid
function clearGrid(){
    $(".grid").remove();
};

// Function that prompts the user to select the number of boxes in a new grid
// the function then also creates that new grid
function refreshGrid(){
    var z = prompt("How many boxes per side?");
    clearGrid();
    createGrid(z);
};

// Create a 16x16 grid when the page loads.
// Creates a hover effect that changes the color of a square to black when the mouse passes over it, leaving a (pixel) trail through the grid
// allows the click of a button to prompt the user to create a new grid
$(document).ready(function() {
    createGrid(16);

    $(".grid").mouseover(function() {
        $(this).css("background-color", "black");
        });

    $(".newGrid").click(function() {
        refreshGrid();

        $(".grid").mouseover(function() {
        $(this).css("background-color", "black");
        });
    });
});

গতিশীল সারি এবং কলামগুলি তৈরি করতে সিএসএস ভেরিয়েবল এবং সিএসএস গ্রিড ব্যবহার করা আরও ক্লিনার হবে।

const container = document.getElementById("container");

function makeRows(rows, cols) {
  container.style.setProperty('--grid-rows', rows);
  container.style.setProperty('--grid-cols', cols);
  for (c = 0; c < (rows * cols); c++) {
    let cell = document.createElement("div");
    cell.innerText = (c + 1);
    container.appendChild(cell).className = "grid-item";
  };
};

makeRows(16, 16);
:root {
  --grid-cols: 1;
  --grid-rows: 1;
}

#container {
  display: grid;
  grid-gap: 1em;
  grid-template-rows: repeat(var(--grid-rows), 1fr);
  grid-template-columns: repeat(var(--grid-cols), 1fr);
}

.grid-item {
  padding: 1em;
  border: 1px solid #ddd;
  text-align: center;
}
<div id="container">
</div>


জেরার্ডো ফুর্তাদো প্রদত্ত সমাধানটি হ'ল সিএসএস পরিবর্তন করা।

পুরানো সিএসএস:

.gridRow {
    border: 1px solid black;
}

.cell {
    border: 1px solid black;
}

স্থির সিএসএস:

.cell {
  border: 1px solid gray;
  min-width: 10px;
  min-height: 20px;
  display: inline-block;
}





css