manipulare dom

by mugur_serban

HTML

<div id="problema_1" class="problema">
  <div class="enunt">
    Clicking on the button the font, font size and color of the paragraph text will be changed.
  </div>
  <p id="text">JavaScript Exercises</p> 
  <div>
    <button id="jsstyle" >Style</button>
  </div>
</div>

<div id="problema_2" class="problema">
 <div class="enunt">
 Write a JavaScript function to get the values of First and Last name of the following form.
 </div>
<form id="form1" >
First name: <input type="text" name="fname" value="John"><br>
Last name: <input type="text" name="lname" value="Doe"><br>
<input type="submit" value="Submit">
</form>
</div>

<div id="problema_3" class="problema">
  <div class="enunt">
    Write a JavaScript program to set the background color of a paragraph.
  </div>
  <p id="text3"><br>JavaScript Exercises<br><br></p> 
  <div>
    <button id="jsstylecolor" >Style</button>
  </div>
</div>


<div id="problema_4" class="problema">
  <div class="enunt">
     Write a JavaScript function to get the value of the href, hreflang, rel, target, and type attributes of the specified link.
  </div>
  <p><a id="gds" type="text/html" hreflang="en-us" rel="nofollow" target="_self" href="https://gds.ro">GDS</a></p>
<button id="btn4" onclick="getAttributes()">Click here to get  attributes value</button>
</div>


<div id="problema_5" class="problema">
  <div class="enunt">
     Write a JavaScript function to add rows to a table. 
  </div>
 <table id="sampleTable" border="1">
<tr><td>Row1 cell1</td>
<td>Row1 cell2</td></tr>
<tr><td>Row2 cell1</td>
<td>Row2 cell2</td></tr>
</table><br>
<input id='insertRowBtn' type="button"  value="Insert row"> 
</div>

<div id="problema_6" class="problema">
  <div class="enunt">
    Write a JavaScript function that accept row, column, (to identify a particular cell) and a string to update the content of that cell.  
  </div>
 <table id="tableToChange" border="1">
<tr><td>Row1 cell1</td>
<td>Row1 cell2</td></tr>
<tr><td>Row2 cell1</td>
<td>Row2...

CSS

body{
  counter-reset: myCounter;
}
.enunt {
    display: block;
    font-family: monospace;
//    white-space: pre;
    margin: 1em 0;
}
.problema {
  border: 1px solid blue;
  padding: 10px;
  margin-bottom: 20px;
}
.problema::before {
    /* Increment "my-sec-counter" by 1 */
    counter-increment: myCounter;
    content: "Problema " counter(myCounter) ". ";
}

JavaScript

//problema 1
var changeStyleButton = document.getElementById("jsstyle");
changeStyleButton.addEventListener('click', function(){
  let pToBeStyled = document.getElementById('text');
  if(pToBeStyled.style.fontFamily != 'arial'){
    pToBeStyled.style.color = 'red';
    pToBeStyled.style.fontFamily = 'arial';
    pToBeStyled.style.fontSize = '30px';
  } else {
    pToBeStyled.style.color = 'black';
    pToBeStyled.style.fontFamily = 'times new roman';
    pToBeStyled.style.fontSize = '20px';
  }
});

//problema 2
var myForm = document.getElementById("form1");
myForm.addEventListener('submit', function(e){
  e.preventDefault();
  document.getElementById("problema_2").insertAdjacentHTML('beforeend','<br>'+this.fname.value+' '+this.lname.value);
});

//problema 3
var changeBgButton = document.getElementById("jsstylecolor");
changeBgButton.addEventListener('click', function(){
  let pToBeStyled = document.getElementById('text3');
  pToBeStyled.style.color = 'red';
  let bgColor = `rgb(${Math.floor(Math.random() * 255)},${Math.floor(Math.random() * 255)},${Math.floor(Math.random() * 255)})`;
  pToBeStyled.style.backgroundColor= bgColor;
  
});

//problema 4
var getAtribBtn = document.getElementById("btn4");
getAtribBtn.addEventListener('click', function(e){
  e.preventDefault();
  let myLink = document.getElementById('gds');
  console.log(myLink);
  let attribs = ['href', 'hreflang','rel','target','type'];
  let text = '';
  for(let attr of attribs){
    text += '<br><b>['+attr+']</b>:'+ myLink.getAttribute(attr);
  }
  document.getElementById("problema_4").insertAdjacentHTML('beforeend',text);
});

//problema 5
function insertRow(table,cols){
  cols = cols || 0
  if(cols == 0){
     cols = table.rows[0].cells.length;
  }
  let row = table.insertRow(-1);
  let colNr = table.rows.length;
    for(let i=0; i<cols; i++){
    var cell = row.insertCell(i);
    cell.innerHTML = 'Row' + colNr +' cell' + (i + 1);
  }
}
var insertRowBtn =...