silavsale/CinemaJquery.js

## CinemaJquery.js
<html>

<head>
  <title>JavaScript</title>
  <link rel="stylesheet" href="myCSS.css" />
  <script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>

<body>
  <div id="page">

    <form id="newItemForm">
      <input type="text" id="itemDescription" placeholder="Add description" />
      <input type="button" id="add" value="add" />

    </form>
    <h1 id="header">Movies</h1>
    <h2>Movies</h2>

    <ul>
      <li class="liItem" id="one">Mad Max</li>
      <li class="liItem" id="two">Fugitive</li>
      <li class="liItem" id="tree">Terminator</li>
    </ul>

    <p> hello</p>
  </div>
  <script>

    $(document).on('mouseover', '.liItem', function () {
      let ids = this.id;
      console.log('ids', ids);
      $(this).css({
        "padding-left": "80px",
        "font-size": "+=1em"
      });
    });

    $("li").mouseout(function () {
      $("li").css({
        "padding-left": "1em",
        "font-size": "24px"
      });
    });

    $(function () {
      $("p").after('<p class="notice">David Piruzashvili</p>');
      $("#add").on("click", function () {
        var item = $("#itemDescription").val();
        if (item == null || item == "") {
          alert("enter the value");
        } else {

          let $newItem = $('<li id="">' + item + '</li>');
          $("li:last").after($newItem);
          $($newItem).attr("id", `${item}`);
          $($newItem).attr("class", "liItem");
          // console.log($newItem);
          $("#itemDescription").val("");
        }

      });


      function remove(event) {
        var target = event.target || event.srcElement;
        if (target.nodeName.toLowerCase() == "li") {
          var child = document.getElementsByTagName("li");

          var el_Li = target;
          var el_Ul = el_Li.parentNode;
          if (child.length > 1) {
            el_Ul.removeChild(el_Li);
          }

        }
      }

      var removeEl = document.getElementsByTagName("ul")[0];
      removeEl.addEventListener("click", function (event) {
        remove(event);
      });


      $("#itemDescription").focus();
    });

  </script>
</body>

</html>
	<html>

	<head>
	<title>JavaScript</title>
	<link rel="stylesheet" href="myCSS.css" />
	<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
	</head>

	<body>
	<div id="page">

	<form id="newItemForm">
	<input type="text" id="itemDescription" placeholder="Add description" />
	<input type="button" id="add" value="add" />

	</form>
	<h1 id="header">Movies</h1>
	<h2>Movies</h2>

	<ul>
	<li class="liItem" id="one">Mad Max</li>
	<li class="liItem" id="two">Fugitive</li>
	<li class="liItem" id="tree">Terminator</li>
	</ul>

	<p> hello</p>
	</div>
	<script>

	$(document).on('mouseover', '.liItem', function () {
	let ids = this.id;
	console.log('ids', ids);
	$(this).css({
	"padding-left": "80px",
	"font-size": "+=1em"
	});
	});

	$("li").mouseout(function () {
	$("li").css({
	"padding-left": "1em",
	"font-size": "24px"
	});
	});

	$(function () {
	$("p").after('<p class="notice">David Piruzashvili</p>');
	$("#add").on("click", function () {
	var item = $("#itemDescription").val();
	if (item == null \|\| item == "") {
	alert("enter the value");
	} else {

	let $newItem = $('<li id="">' + item + '</li>');
	$("li:last").after($newItem);
	$($newItem).attr("id", `${item}`);
	$($newItem).attr("class", "liItem");
	// console.log($newItem);
	$("#itemDescription").val("");
	}

	});


	function remove(event) {
	var target = event.target \|\| event.srcElement;
	if (target.nodeName.toLowerCase() == "li") {
	var child = document.getElementsByTagName("li");

	var el_Li = target;
	var el_Ul = el_Li.parentNode;
	if (child.length > 1) {
	el_Ul.removeChild(el_Li);
	}

	}
	}

	var removeEl = document.getElementsByTagName("ul")[0];
	removeEl.addEventListener("click", function (event) {
	remove(event);
	});


	$("#itemDescription").focus();
	});

	</script>
	</body>

	</html>