Untitled

///////1 задача аудиториски 8
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Dialog - Default functionality</title>
  <link rel="stylesheet" href="jquery/jquery-ui.css">
  <script src="jquery/jquery.js"></script>
  <script src="jquery/jquery-ui.js"></script>
  <script>
      $(document).ready(function(){
        $( ".selectable" ).selectable();

        $('#add').click(function(){
            $('#source').find('.ui-selected').appendTo('#dest').removeClass('ui-selected');
        });

        $('#remove').click(function(){
            $('#dest').find('.ui-selected').appendTo('#source').removeClass('ui-selected');
        });
      });
  </script>
  <style type="text/css">
      li:hover{cursor: pointer;}
      #feedback { font-size: 1.4em; }
      .selectable .ui-selecting{ background: #FECA40; }
      .selectable .ui-selected{ background: #F39814; color: white; }
      .selectable{ list-style-type: none; margin: 0; padding: 0; width: 40%; display: inline-block; position: absolute;}
      .selectable li{ margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }
      #btns{display: inline-block;top: 6px; position: absolute; left: 555px;}
      #dest{left: 600px;}
      input{margin: 5px; font-size: 30px;}
  </style>
</head>
<body>

<ol id="source" class="selectable">
  <li class="ui-widget-content">Item 1</li>
  <li class="ui-widget-content">Item 2</li>
  <li class="ui-widget-content">Item 3</li>
  <li class="ui-widget-content">Item 4</li>
  <li class="ui-widget-content">Item 5</li>
  <li class="ui-widget-content">Item 6</li>
  <li class="ui-widget-content">Item 7</li>
</ol>

<div id="btns">
  <input type="button" value=">" id="add">
  <br/>
  <input type="button" value="<" id="remove">
</div>

<ol id="dest" class="selectable">
  <li class="ui-widget-content">Item 8</li>
</ol>

</body>
</html>
///////////2 задача аудиториски 8
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Dialog - Default functionality</title>
  <link rel="stylesheet" href="jquery/jquery-ui.css">
  <script src="jquery/jquery.js"></script>
  <script src="jquery/jquery-ui.js"></script>
  <script>
     $.widget( "custom.catcomplete", $.ui.autocomplete, {
    _create: function() {
      this._super();
      this.widget().menu( "option", "items", "> :not(.ui-autocomplete-category)" );
    },
    _renderMenu: function( ul, items ) {
      var that = this,
        currentCategory = "";
      $.each( items, function( index, item ) {
        var li;
        if ( item.category != currentCategory ) {
          ul.append( "<li class='ui-autocomplete-category'>" + item.category + "</li>" );
          currentCategory = item.category;
        }
        li = that._renderItemData( ul, item );
        if ( item.category ) {
          li.attr( "aria-label", item.category + " : " + item.label );
        }
      });
    }
  });

  $(function() {
 var data = [
      { label: "anders", category: "" },
      { label: "andreas", category: "" },
      { label: "antal", category: "" },
      { label: "annhhx10", category: "Products" },
      { label: "annk K12", category: "Products" },
      { label: "annttop C13", category: "Products" },
      { label: "anders andersson", category: "People" },
      { label: "andreas andersson", category: "People" },
      { label: "andreas johnson", category: "People" }
    ];

    $( "#search" ).catcomplete({
      delay: 0,
      source: data
    });
  });
  </script>
  <style type="text/css">
.ui-autocomplete-category {
    font-weight: bold;
    padding: .2em .4em;
    margin: .8em 0 .2em;
    line-height: 1.5;
  }
  </style>
</head>
<body>

<label for="search">Search: </label>
<input id="search">


</body>
</html>
////////////////3 задача аудиториски 8
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Dialog - Default functionality</title>
  <link rel="stylesheet" href="jquery/jquery-ui.css">
  <script src="jquery/jquery.js"></script>
  <script src="jquery/jquery-ui.js"></script>
  <script>
  $(function() {
      $( "#progressbar" ).progressbar({
        value: 0
      });

      progressbarValue = $( "#progressbar" ).find( ".ui-progressbar-value" );

      progressbarValue.css({
          "background": 'red'
      });

      $('input[type=password').keydown(function(){
          var score = calculateStrength($(this).val());

          if(score == 1) {
            progressbarValue.css({
              "background": 'red'
            });
          } else if(score == 2) {
            progressbarValue.css({
              "background": 'yellow'
            });
          } else if(score == 3) {
            progressbarValue.css({
              "background": 'green'
            });
          }

          $( "#progressbar" ).progressbar({
            value: score * 33
          });
      });
  });

  function calculateStrength(password){
    var result = 0;
    result += /[a-zA-Z]+/.test(password) ? 1 : 0;
    result += /[0-9]+/.test(password) ? 1 : 0;
    var specialChars = "<>@!#$%^&*()_+[]{}?:;|'\"\\,./~`-="
    var check = function(string){
     for(i = 0; i < specialChars.length;i++){
       if(string.indexOf(specialChars[i]) > -1){
           return true
        }
     }
     return false;
    }

    result += check(password) ? 1 : 0;
    console.log(result);
    return result;
  }

  </script>
  <style type="text/css">
   label{
        display:  inline-block;
        width: 150px;
        margin: 5px;
   }
   input{
        width: 200px;
        margin: 5px;
   }

   #progressbar{
      display: inline-block;
      width: 200px;
      height: 10px;
   }
  </style>
</head>
<body>

<form>
  <legend>Sample info:</legend>
  <label>Enter password:</label>
  <input type="password" id="first-name" placeholder="letters, digits and special signs"/>
  <div id="progressbar"></div>
</form>


</body>
</html>
/////////////////// 4 задача 8 ауд
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Dialog - Default functionality</title>
  <link rel="stylesheet" href="jquery/jquery-ui.css">
  <script src="jquery/jquery.js"></script>
  <script src="jquery/jquery-ui.js"></script>
  <style type="text/css">
   label{
        display:  inline-block;
        width: 100px;
        margin: 5px;
   }
   input{
        width: 200px;
        margin: 5px;
   }
  </style>
</head>
<body>

<form>
  <legend>Sample info:</legend>
  <label>First name:</label>
  <input type="text" id="first-name" placeholder="Enter first name here"/>
  <br/>
  <label>Last name:</label>
  <input type="text" id="first-name" placeholder="Enter last name here"/>
</form>


</body>
</html>
///////////////// 5 задача 8 ауд
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>Sample</title>
    <style type="text/css">
     form{
     	width: 30%;
     }

     input{
     	margin: 5px;
     }

     label{
     	display: inline-block;
     	width: 100px;
     }

     span{
     	color: red;
     	display: none;
     }

     button{
     	margin-top: 5px;
     	float: left;
     }

     #slider{
     	height: 20px;
		width: 250px;
		border: 1px solid black;
		margin: 10px;
		float: left;
		margin-top: 5px;
		margin-left: 12px;
     }

     #slider div{
     	width: 0%;
     	height: 20px;
     	background: lightblue;
     }

    </style>
</head>

<body>
	<h3>Movie streaming site!</h3>
	<form>
		<!-- General info -->
		<fieldset id="general">
		  <legend>General info:</legend>
		  <label>Username: </label> <input type="text"> <span>*</span> <br>
		  <label>Email: </label> <input type="text"> <span>*</span> <br>
		  <label>Password: </label> <input type="password"> <span>*</span> <br>
		  <label>Confirm: </label> <input type="password"> <span>*</span>
		 </fieldset>
		 <!-- Personal info -->
		 <fieldset id="personal">
		  <legend>Personal info: </legend>
		  <label>First name: </label> <input type="text"><br>
		  <label>Last name: </label> <input type="text"><br>
		  <label>Date of birth: </label> <input type="date"> <span>*</span> <br>
		   <label>Gender: </label> <input type="radio" name="gender" value="male"/>male
		   <input type="radio" id="gender" name="gender" value="female"/>female
		 </fieldset>
		 <!-- Movie category info -->
		 <fieldset id="movie">
		  <legend>Movie category info:</legend>
		  	<input type="checkbox" name="category" value="Action"> Action <br>
			<input type="checkbox" name="category" value="Animation"> Animation <br>
			<input type="checkbox" name="category" value="Comedy"> Comedy <br>
			<input type="checkbox" name="category" value="Crime"> Crime <br>
			<input type="checkbox" name="category" value="Drama"> Drama <br>
			<input type="checkbox" name="category" value="Fantasy"> Fantasy <br>
			<input type="checkbox" name="category" value="Musical"> Musical <br>
			<input type="checkbox" name="category" value="Romance"> Romance <br>
			<input type="checkbox" name="category" value="Horror"> Horror <br>
			<input type="checkbox" name="category" value="Sci-Fi"> Sci-Fi <br>
			<input type="checkbox" name="category" value="Thriller">Thriller <br>
		 </fieldset>
		 <button>Register</button> <div id="slider"><div id="value"></div></div>
	</form>
    <script type="text/javascript" src="jquery/jquery.js"></script>
    <script type="text/javascript">
    	$(document).ready(function(){

    		$('button').click(function(){
    			updateProgress();

    			if(validate()){
    				alert("You have been registered");
    				return true;
    			}else{
    				alert("You have not filled mandatory fields");
    				return false;
    			}
    		});

    	});

    	function validate(){
    		var valid = true;

    		$('#general input, input[type=date]').each(function(index, item){
    			if( $(item).val().trim() == "" ){
    				$(item).next().show();
    				valid = false;
    			} else {
    				$(item).next().hide();
    			}
    		});

    		var $p1 = $('input[type=password]:nth-child(1)');
    		var $p2 = $('input[type=password]:nth-child(2)');

    		valid = valid && ($p1.val() != "" && $p1.val() == $p2.val());

    		return valid;
    	}

    	function updateProgress(){
    		var num = 0;
    		$('input[type=text], input[type=password], input[type=date]').each(function(index, item){
    			if($(item).val().trim() != "")
    				num += 1;
    		});
    		var num2 = $('#personal input:checked').length;
    		var num3 = $('#movie input:checked').length > 0 ? 1 : 0;

    		var percent = 0;

    		if( (num + num2 + num3) > 0 )
    			percent = ( num + num2 + num3) / 9 * 100;

    		console.log(num + " " + num2 + " " + num3 + " " + percent);

    		$('#slider div').css('width', percent + "%");
    	}

    </script>
</body>

</html>