I'm trying to make an APP, which allows me to add days to a table

I have the following Code

function addDay() {

for (k = 1; k < 11; k++) {
    let div = document.createElement("div");
    div.style.background = "red"
    div.style.color = "white"
    div.style.width = "40px"
    div.style.height = "20px"
    div.style.margin = "0.5px"
    div.style.textAlign = "center"
    div.style.borderRadius = "6px"
    div.setAttribute("class", "studentGrades")
    // div.setAttribute("class", "sgID" + k)
    div.className += " sgID" + k
    div.setAttribute("onclick", "averageFunc(this, Number(prompt('Please, enter number here')))");

    div.innerHTML = "0"

    document.querySelector("#container3").appendChild(div)
}} 

This works perfectly fine for me, But I also have to make a Responsive design for this app, so on a smaller screen,

These properties are too big,

    div.style.width = "40px"
    div.style.height = "20px"

I need something like ,

    div.style.width = "20px"
    div.style.height = "10px"

So here is the problem, These elements are dynamically created, They are not present when HTML is loaded, So I can't style them with CSS, Is it Possible to style those elements via CSS? And if yes how?

This is on a big screen, Add day button adds 1 green and 10 red boxes

Same here, except i want those boxes to be smaller (same size as the boxes next to it)

P.S

I'm into a 3rd week of my coding adventure, I'm familiar with only Vanilla JS, So no Library/Framework's.

I'm trying to make an APP, which allows me to add days to a table

I have the following Code

function addDay() {

for (k = 1; k < 11; k++) {
    let div = document.createElement("div");
    div.style.background = "red"
    div.style.color = "white"
    div.style.width = "40px"
    div.style.height = "20px"
    div.style.margin = "0.5px"
    div.style.textAlign = "center"
    div.style.borderRadius = "6px"
    div.setAttribute("class", "studentGrades")
    // div.setAttribute("class", "sgID" + k)
    div.className += " sgID" + k
    div.setAttribute("onclick", "averageFunc(this, Number(prompt('Please, enter number here')))");

    div.innerHTML = "0"

    document.querySelector("#container3").appendChild(div)
}} 

This works perfectly fine for me, But I also have to make a Responsive design for this app, so on a smaller screen,

These properties are too big,

    div.style.width = "40px"
    div.style.height = "20px"

I need something like ,

    div.style.width = "20px"
    div.style.height = "10px"

So here is the problem, These elements are dynamically created, They are not present when HTML is loaded, So I can't style them with CSS, Is it Possible to style those elements via CSS? And if yes how?

This is on a big screen, Add day button adds 1 green and 10 red boxes

Same here, except i want those boxes to be smaller (same size as the boxes next to it)

P.S

I'm into a 3rd week of my coding adventure, I'm familiar with only Vanilla JS, So no Library/Framework's.

• javascript
• html
• css
• responsive

• You use actual CSS, not inline, attribute-based styling. Read about applying CSS rules to elements through style sheets. – zero298 Commented Jul 13, 2018 at 14:44
• 1 So here is the problem, These elements are dynamically created, They are not present when HTML is loaded, So I can't style them with CSS => it doesn't matter if they're present or not whem DOM is ready/loaded, CSS gets rendered by browser anyway. I'd add custom CSS classes for every new element added and write custom CSS for it. – Nicolae Olariu Commented Jul 13, 2018 at 14:45
• please start using CSS files and classes – Philipp Sander Commented Jul 13, 2018 at 15:10
• css doesn't care if they are in dom or not, if you have your css selector correct it will style element. To make this even more meaningful consider this "div.style" is object, so why don't pass it object with your styles like "div.style = {width: "20px", height: "20px"}" – Raimonds Commented Jul 13, 2018 at 15:17

3 Answers 3

You can make a class and add that class to created elemets.

Example:

for (k = 1; k < 11; k++) {
    let div = document.createElement("div");
    div.setAttribute("onclick", "averageFunc(this, Number(prompt('Please, enter number here')))");
    div.className = 'custom-class';
    div.innerHTML = "0"
    document.getElementById("container3").appendChild(div)
}

.custom-class {
  background : red;
  color: white;
  width : 20px;
  height : 20px;
  margin-top :2px;
  text-align : center;
  border : 1px solid black;
}

<div id="container3"></div>

When adding a new DOM node, the browser will do what's called repaint the node, simply meaning it will reapply css to the DOM node:

Dynamic changes The browsers try to do the minimal possible actions in response to a change. So changes to an element's color will cause only repaint of the element. Changes to the element position will cause layout and repaint of the element, its children and possibly siblings. Adding a DOM node will cause layout and repaint of the node. Major changes, like increasing font size of the "html" element, will cause invalidation of caches, relayout and repaint of the entire tree.

Absolutely use a css class and a media query for this

let div = document.createElement("div");
// could abstract this to an addClass func for reuse
if (div.classList)
  div.classList.add('sweet-class-name');
else
  div.className += ' ' + 'sweet-class-name';
// the rest of your func

Then in a css file

.sweet-class-name {
    ... all your default styles. I usually make mobile styles my defaults
}

@media screen and (min-width : 768px) {
   .sweet-class-name {
     // styles for screens bigger than 768px
   }
}

useful links that helped me a lot when I was starting out

• you might not need jquery
• Shay Howe's html/css tutorials

And also why mobile first and media query basics

Good luck and have fun!