Create a simple dynamic grid using JavaScript, HTML

Показать описание

As an example, we used a Udacity project "Pixel Art Maker" starter files.

Natalia Romankevich

Рекомендации по теме

Комментарии

keep going girl, need some css html recap, will watch your videos

pawel_html

Priviet Natalia, :) I wanted to thank you for your gridMaker code! :D

Here are my results:

<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamic Grid</title>
<style>
/* Add CSS styles for the grid cells if needed */
table {
border-collapse: collapse;
}

td {
width: 30px;
height: 30px;
border: 1px solid black;
}
</style>
</head>
<body>


<form id="sizePicker">
Grid Height:
<input type="number" id="inputHeight" name="height" min="1" max="20">
Grid Width:
<input type="number" id="inputWidth" name="width" min="1" max="20">
<input type="submit">
</form>


<table id="pixelCanvas">

</table>

<script>
// Function to create grid
function makeGrid() {
// Get the user input for grid size
const height =
const width =

// Get the grid container
const gridContainer =

// Clear existing grid
gridContainer.innerHTML = '';

// Create new grid
for (let i = 0; i < height; i++) {
const row = document.createElement("tr");
for (let j = 0; j < width; j++) {
const cell = document.createElement("td");
row.appendChild(cell);
}

}
}

// Event listener for form submission
document.getElementById("sizePicker").addEventListener("submit", function(event) {
event.preventDefault(); // Prevent default form submission behavior
makeGrid(); // Call makeGrid function when form is submitted
});
</script>

</body>
</html>

skyrockstartrade

how is this dinamic if the 11 is hardcoded ?

islacassamo

Small doubt how can I add click event on each record

lokeshbsr

i tried your code but it didn't work! idk why

suzansamer

i tried your code but it didn't work.. i'm still trying to fix it but thank you anyways :)

lesnoopy

Create a simple dynamic grid using JavaScript, HTML

Create a simple dynamic grid using JavaScript, HTML

The Joy of CSS Grid - Build 3 Beautifully Simple Responsive Layouts

GameDev Tutorial: HowTo make a Dynamic Grid in Unity C# (2d sprites)

Responsive Image Gallery Using Only CSS Grid

How To Create a Responsive Image Grid (Masonry Layout) with HTML and CSS - Flexbox

Learn how to create a responsive CSS grid layout

Responsive Service Box Using CSS Grid Layout

Create a dynamic layout using CSS Grid (preview)

Generate Dynamic QR Codes for Your Wix Website

The Magic of CSS Grid AUTO-FIT vs AUTO-FILL

How to Create a Dynamic Grid with JavaScript Course Introduction

Easy Grid Layouts with Tailwind CSS for Beginners

Trendy Grid Transition in After Effects - After Effects Tutorial

Build a Simple Editable Grid in Appian | Editable Grids - Part 1

Material UI Tutorial #10 - Grid System

#4 Responsive Layout - with React Hooks and Grid Template Areas for beginners

CSES Grid Paths | Dynamic Programming | C++ solution | Simple Dynamic Programming

Pinterest layout style with CSS | CSS Only Masonry grid

5 Simple Steps for Solving Dynamic Programming Problems

Create A Dynamic Unique Grid Card In Bricks Builder. So Easy!

Dynamic CMS Grid in Webflow

Perfect Responsive Grid Systems Masterclass | UI Design & Figma Tutorial

CSS Tips & Tricks: Creating a Masonry Grid Layout with Pure CSS, No JavaScript Required

Poster Grids YOU MUST USE For Professional Results! | Poster Design Lesson