jquery

by mugur_serban

HTML

<div class="problema">
<h2>Problema: 4</h2>
  <p id='blink'>Blinking text</p>
</div>

<div class="problema">
<h2>Problema: 5, 9, 12</h2>
  <table id='myTable'> 
   <caption>Zebra Table (by JQuery)</caption>
    <tr>
      <td>A1</td>
      <td>B1</td>      
      <td>C1</td>      
    </tr>
    <tr>
      <td>A2</td>
      <td>B2</td>
      <td>C2</td>
    </tr>
    <tr>
      <td>A3</td>
      <td>B3</td>
      <td>C3</td>
    </tr>
    <tr>
      <td>A4</td>
      <td>B4</td>
      <td>C4</td>
    </tr>
    <tr>
      <td>A5</td>
      <td>B5</td>
      <td>C5</td>
    </tr>
  </table>
  <button id='deleteRowsBtn'>delete rows exept first one</button>
</div>

<div class='problema'>
 <h2>Problemele: 1-3, 11, 13</h2>
   <button id='scrollBtn' disabled>click me to scroll up</button>
  <input type="checkbox" id="enableBtnCheckbox"> Check me to enable button
  
</div>
<div class="problema">
<h2>Problema: 6</h2>
  <textarea id='myTextarea'></textarea>
  <br><label id='myLabel'>0</label> characters
</div>

<div class="problema">
<h2>Problema: 7</h2>
  <select id='mySelect'>
    <option>optiune 1</option>
    <option>optiune 2</option>
    <option>optiune 3</option>
    <option>optiune 4</option>
  </select>
  <br>
  <button id='emptyBtn'>goleste lista</button>
</div>

<div class="problema">
<h2>Problema: 8</h2>
  <button id='verifyJqBtn'>verifica jquery element</button>
</div>

<div class="problema">
<h2>Problema: 10</h2>
  <button class="test-class-name" id='getMyClassBtn'>check my classname</button>
</div>

<div class="problema">
<h2>Problema: 8</h2>
  <button id='verifyJqBtn'>verifica jquery element</button>
</div>

<div class="problema">
<h2>Problema: 14</h2>
  <button id='countElementsBtn'>count all elements</button>
</div>

<div class="problema">
<h2>Problema: 15</h2>
  <input id='messageOnBlur' value='message on blur'>
</div>

<div class="problema">
<h2>Problema: 16</h2>
  <input type="checkbox" id='myCheckbox'><label for='myCheckbox'>Eticheta checkbox</label>
 ...

CSS

.problema {
  border: 1px solid blue;
  padding: 20px;
  margin: 20px;
}
.problema button {
   display: block;
   order-radius: 10px;
   padding: 10px;
}
#myTable {
  border: 1px solid black;
  padding: 5px;
  margin: 10px;
}

#myTable td{
  width: 50px;
}
#showLabels, #showMultipleLabels {
  border: 1px solid red;
  margin-top:20px;
  min-height: 20px;
}

JavaScript

$(document).ready(function(){
//problema1
  $('#scrollBtn').on('click', function(){
      $(document).scrollTop(0);
  })
//problema 2
  $(document).on('contextmenu', function(ev){
    ev.preventDefault();
    alert('not alowed!');
    
  })
//problema 3, 11, 13
  $("#enableBtnCheckbox").on('change', function(){
    if(this.checked){
      $('#scrollBtn').removeAttr('disabled');
    } else {
          $('#scrollBtn').attr('disabled', 'disabled');
    }
  });
//problema 4
  function Animate(){
    let op = $(this).css('opacity');
    op = (op == 1) ? 0 : 1;
    $(this).animate({opacity:op}, 500, Animate);
  }
  $("#blink").animate({opacity:0}, 500,"linear", Animate);
  
//problema 5
  $('#myTable tr:odd td').css('background-color','#aaa');

//problema 6
  $('#myTextarea').on('keypress',function(ev){
    var text = $(this).val();
    var nr = text.length;
    if(nr >= 10){
      ev.preventDefault();
      //text = text.substr(0,10);
      //$(this).val(text);
      $('#myLabel').html('Maximum: 10');
     } else {
       $('#myLabel').html(nr);
     }
  })  
  
//problema 7
  $('#emptyBtn').on('click', function(){
     var mySelect = $('#mySelect');
     mySelect.empty();
     console.log('myselect:', typeof mySelect);
     let newOption = $('<option>optiune noua</option>');
     mySelect.append(newOption);
  })
  
//problema 8
  function elmIsJq(elm){
    return elm instanceof jQuery;
  }
  $('#verifyJqBtn').on('click', function(){
    alert(elmIsJq($(this)));
  })

//problema 9
  $('#deleteRowsBtn').on('click', function(){
    var sel = $('#myTable tr').filter(function(index){ return index!=0;});
    sel.remove();
  })

//problema 10
  $('#getMyClassBtn').on('click', function(){
    alert('My class is: '+$(this).attr('class'));
  })

//problema 12
  $('#myTable').on('click', function(){
    alert('outer width: '+$(this).outerWidth());
  })
  
//problema 14
  $('#countElementsBtn').on('click', function(){
    alert('total elements on page: '+$('*').length)
  });
 ...