This is my Basic poject to learn DOM manipulation in js
it is having grids in the square that square is the gridContainer. 1.) user can choose the number of grids themself by clicking the squares per side button. 2.) and on every interaction grid's color will be changed randomly. 3.) also the opacity will be increased by 10% on every interaction upto 10 interactions to 1 starting from zero but on hovering user will be able to see the sketch with full opacity.
1.) how to generate random color. 2.)precedency of inline styles defined in js is higher than the styling defined in css style tag thus have to use !important in css style tag to force the higher precendecy. 3.)learnt how opacity works. 4.)learnt to remove and add grids again and again which was challenging to understand and implement being a beginner. 5.)Also every you apply css effect using cssText multiple times rather do all styling in one line because cssText only executes which one is the last in js file. 6.)also hoe to apply button click eventlistener. 7.)how important is always writing all js in the eventListener of DOMContentLoaded event so that everything would be executed after the loading of all content.