etch-a-sketch | HTML/CSS/JS project from The Odin Project

I'm trying to complete The Odin Project's Etch-a-Sketch challenge and am currently stuck with trying to resize the divs that make up the sketchpad. The app creates a 16x16 grid by default, and when pressing the erase button it asks for a number. It should then recreate the grid based on that number. However, after giving a number the size of the sketchpad is reduced. I have noticed that the number of empty divs created is always 256. Link to codepen for clarification: https://codepen.io/eerolli/pen/abELQbp

Any help as to how I could get the size of the pad to stay the same regardless of the number of divs inside it is greatly appreciated.

Edit: It should probably be noted, that the app works fine when I enter a number equal to or lower than 16.

html:

So I'm making an Etch-a-Sketch with a range slider to change the grid size, but the slider keeps resetting to its default size (16x16) as soon as I move the mouse after changing the value (if I change the value and don't move the mouse, the size doesn't reset). For some reason this doesn't happen on Chrome: the value and grid size both change and stay that way until I change them again.

Here's the JSFiddle: https://jsfiddle.net/CamiCoding/7zpt14cs/

HTML:

I'm working on sort of an Etch-a-Sketch project at the moment. The current issue im facing is how to make each cell of the grid incrementally get darker with every pass of the mouse cursor based on what the opacity of the cell being moused-over is. Currently whenever the cells of the grid are created it sets the background color to black and the opacity to 0, I have a function that I believe pulls the opacity of the current cell on mouseover and should increase that by 10% shadeCells(), however instead of doing that it just sets the opacity to 10% and each recurring pass of the mouse does nothing if the cell already has that 10% shade.

I'm quite new to coding. I'm coding an Etch-a-sketch (via the Odin Project). Basically, it consists of a grid, which when hovered over, the boxes of the grid will change to a random color. (the container is supposed to keep the same dimensions) Upon loading the page, it starts with a basic grid of 16x16 boxes.

The user also has the option to create a custom grid (for example, if the user enters 50, the container will be filled with 50x50 boxes, with their height and width adapted to fill the container)

I seem to be stuck at this stage, when the button is clicked and you enter an amount of boxes, the grid will update. But then, when hovering over this 'custom' grid, the box size resets to the original width/height defined in the CSS.

The boxes should keep their custom size when hovered over. (and when the color is changed)

Below a codepen which will show the issue clearly, (enter a custom grid size(max 100 for performance) and hit enter).

Codepen here with the full HTML/CSS/JS + example: Codepen

I am trying to change the div background color when i hover over them clicking my mouse button.This is what i did so far. I want to make it like a drawing pen, so it won't change color when hover over but it will when hover over while pressing the mouse key.

I'm currently learning Javascript on the Odin Project and I'm doing the Etch-a-Sketch exercise in which you're supposed to create a Etch-a-Sketch board you can draw on with your cursor. You're supposed to implement a resize button which allows the user to enter how many tiles they want on each side of the board, with a max value of 100 (for a 100x100 board). I did just that, and it technically works... except my browser starts chugging around 60 tiles, and crashed if I try to go for the max.

The exercise teaches you how to use Javascript to manipulate the DOM, so I got my script to create a div container for the entire board, and a default 16x16 board is created when starting the page. Each tile is a div with an event listener assigned to it which detects when it's hovered. A new class is given to the tile, which changes its color according to the CSS rule tied to that class.

The reset button calls a function when it's clicked. That function resets the classes for all tiles and prompts the user for a value. Once it gets a proper value, the CSS rule associated with the original div container gets updated with the requested amount of rows and columns, a function is called which removes all existing tiles, and another function fills the div container with new tiles.

HTML

I'm new to Stack Overflow. I hope that I'm doing this correctly. ❤

I'm working on an old Etch-a-Sketch JavaScript project from months ago and decided to rework the 'mobile' form of the project because I hadn't bothered to do so at the time. At first, I tried just moving the buttons to the top horizontally, but I didn't like any of the variations I tried. So I decided I'd be better off with a dropdown menu instead that would appear when the screen is 500px or smaller, replacing the buttons.

The dropdown menu is supposed to do exactly what the buttons do - when a certain mode is selected, that's the mode that the program is supposed to switch to. For example, when the "Party mode" button is clicked, the program switches to "party mode". I want the dropdown menu to behave similarly - when the "party mode" option is selected, the program should switch to "party mode".

My logic was that I needed a function that grabbed the value of the dropdown menu, and then an "if" condition would run that pretty much says "If the value is x, x mode should run; else if the value is y, y mode should run", and so on. I added the function to the existing window.onload function so it would run upon the window loading. This didn't work.

Note that the dropdown menu will, in the future, only appear when the screen size is 500px or less. In addition, I still have the buttons on the screen for all sizes, just for testing/debugging purposes. When I'm done and have this figured out, the buttons will have "display = 'none'" and be hidden for the "mobile size".

Anyway, so yeah, the program is still just listening to the buttons, and not the dropdown menu. That leads me to believe that I need to somehow turn "off" the button mode? If that's the case, how do I do that? If that's not the case, what am I supposed to do here? Any help or insight would be greatly appreciated. Thanks!

I am trying to write a simple function for etch-a-sketch and came across this problem. I attached eventListener to the color and erase buttons like this:

I'm trying to create a 16x16 grid with flexbox. I have set the width property of every 17th element to 100% and flex-wrap to wrap to achieve this. However, for some reason, my code doesn't work. I don't get the 16x16 grid on my page. How can I solve this?