JoelCodes · June 14, 2017 01:25
diff --git a/jquery.html b/jquery.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script
  src="https://code.jquery.com/jquery-3.2.1.js"
  integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
  crossorigin="anonymous"></script>
  <style type="text/css">
  .tomato{
    color: tomato;
  }
  .title {
    font-weight: bold;
  }
  </style>
 </head>
 <body>
  <!--<p class='title'>This is my title</p>
  <script>
    /* Mess with title */
    var $title = $('.title')
      .css('background-color', 'papayawhip')
      .css('transition', 'color 1s');

    // var title = document.getElementsByClassName('title')[0];
    // title.style.backgroundColor = 'snow';
    // title.style.transition = 'color 1s';

    setInterval(function(){
      $title.toggleClass('tomato');
    }, 2000);
    // setInterval(function(){
    //   title.classList.toggle('tomato');
    // }, 2000);

    setTimeout(function(){
      $title.html('This is a <em>better</em> title');
    }, 1000);
    // setTimeout(function(){
    //   title.innerText = 'This is a <em>better</em> title';
    // }, 1000);
  </script>-->
  <!--<ul id='list'>
    <li>Joel</li>
    <li>Don</li>
    <li>David</li>
  </ul>
  <script>
    setTimeout(function(){
      var $newListItem = $('<li>')
        .text('Karl')
        .appendTo('#list');
        setTimeout(function(){
          $newListItem.remove();
        }, 2000);
    }, 2000);
    // /* Add And Remove List Item */
    // var list = document.getElementById('list');
    // console.log(list);
    // setTimeout(function(){
    //   var newListItem = document.createElement('li');
    //   newListItem.innerText = 'Karl';
    //   list.appendChild(newListItem);
    //   debugger;
    //   setTimeout(function(){
    //     debugger;
    //     newListItem.remove();
    //   }, 2000);
    // }, 2000);
  </script>-->
  <!--<div id='div'>
    <button id='button'>I'm a button!</button>
  </div>
  
  <script>
    // $('<p>')
    //   .text('Click me')
    //   .appendTo('#div')
    //   .on('click', function(){
    //     // this refers to the p tag
    //     console.log('P', this);
    //     $('<button>')
    //       .appendTo(this)
    //       .text('Delete')
    //       .on('click', function(){
    //         debugger;
    //         this.remove();
    //       });
    //   });

    $('#button').on('click', function(event){
      console.log(event);
      console.log(this);
      $(this).text('I was changed with jQuery');
    });
    // var button = document.querySelector('#button');
    // button.addEventListener('click', function(event){
    //   console.log(event);
    //   console.log(this);
    // });
  </script>-->
  <!--<input type="text" id="txt" value='Too Soon'/>
  <script>

    // var txt = document.querySelector('#txt');
    var $txt = $('#txt').on('keyup keydown', function(){
      console.log($(this).val());
    });
    // function inputListener(evt){
    //   console.log(this.value);
    //   console.log(evt);
    // }
    // txt.addEventListener('keyup', inputListener);
  </script>-->
  <!--<form>
    <p><label for="email">Email</label><input type="email" name="email"/></p>
    <p><input id='button' type="submit" value='Submit This Form'/></p>
  </form>
  <ul id='list'>
  </ul>
  <script>
    var $form = $('form').on('submit', function(evt){
      evt.preventDefault();
      $('<li>')
        .text($input.val())
        .appendTo($list);
      $input.val('');
    });
    var $list = $('#list');
    var $input = $form.find('input[type=email]');
    // var form = document.querySelector('form');
    // var list =document.querySelector('#list');
    // form.addEventListener('submit', function(event){
    //   event.preventDefault();

    //   var newElement = document.createElement('li');
    //   newElement.innerText = this.elements.email.value;
    //   list.appendChild(newElement);
    //   this.elements.email.value = '';
    // });
  </script>-->
  <script>
    $(function(){
      $('button').data('team-score', 0);
      $('button').on('click', function(){
        var $this = $(this);
        var lastTeamScore = $this.data('team-score');
        $this.data('team-score', lastTeamScore + 1);
        $this.text($this.data('team-id') + ': ' + $this.data('team-score'));
      });
    });
  </script>
  <button data-team-id='Good'>Good: 0</button><br/>
  <button data-team-id='Evil'>Evil: 0</button><br/>
 </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	<script
	src="https://code.jquery.com/jquery-3.2.1.js"
	integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
	crossorigin="anonymous"></script>
	<style type="text/css">
	.tomato{
	color: tomato;
	}
	.title {
	font-weight: bold;
	}
	</style>
	</head>
	<body>
	<!--<p class='title'>This is my title</p>
	<script>
	/* Mess with title */
	var $title = $('.title')
	.css('background-color', 'papayawhip')
	.css('transition', 'color 1s');

	// var title = document.getElementsByClassName('title')[0];
	// title.style.backgroundColor = 'snow';
	// title.style.transition = 'color 1s';

	setInterval(function(){
	$title.toggleClass('tomato');
	}, 2000);
	// setInterval(function(){
	// title.classList.toggle('tomato');
	// }, 2000);

	setTimeout(function(){
	$title.html('This is a <em>better</em> title');
	}, 1000);
	// setTimeout(function(){
	// title.innerText = 'This is a <em>better</em> title';
	// }, 1000);
	</script>-->
	<!--<ul id='list'>
	<li>Joel</li>
	<li>Don</li>
	<li>David</li>
	</ul>
	<script>
	setTimeout(function(){
	var $newListItem = $('<li>')
	.text('Karl')
	.appendTo('#list');
	setTimeout(function(){
	$newListItem.remove();
	}, 2000);
	}, 2000);
	// /* Add And Remove List Item */
	// var list = document.getElementById('list');
	// console.log(list);
	// setTimeout(function(){
	// var newListItem = document.createElement('li');
	// newListItem.innerText = 'Karl';
	// list.appendChild(newListItem);
	// debugger;
	// setTimeout(function(){
	// debugger;
	// newListItem.remove();
	// }, 2000);
	// }, 2000);
	</script>-->
	<!--<div id='div'>
	<button id='button'>I'm a button!</button>
	</div>

	<script>
	// $('<p>')
	// .text('Click me')
	// .appendTo('#div')
	// .on('click', function(){
	// // this refers to the p tag
	// console.log('P', this);
	// $('<button>')
	// .appendTo(this)
	// .text('Delete')
	// .on('click', function(){
	// debugger;
	// this.remove();
	// });
	// });

	$('#button').on('click', function(event){
	console.log(event);
	console.log(this);
	$(this).text('I was changed with jQuery');
	});
	// var button = document.querySelector('#button');
	// button.addEventListener('click', function(event){
	// console.log(event);
	// console.log(this);
	// });
	</script>-->
	<!--<input type="text" id="txt" value='Too Soon'/>
	<script>

	// var txt = document.querySelector('#txt');
	var $txt = $('#txt').on('keyup keydown', function(){
	console.log($(this).val());
	});
	// function inputListener(evt){
	// console.log(this.value);
	// console.log(evt);
	// }
	// txt.addEventListener('keyup', inputListener);
	</script>-->
	<!--<form>
	<p><label for="email">Email</label><input type="email" name="email"/></p>
	<p><input id='button' type="submit" value='Submit This Form'/></p>
	</form>
	<ul id='list'>
	</ul>
	<script>
	var $form = $('form').on('submit', function(evt){
	evt.preventDefault();
	$('<li>')
	.text($input.val())
	.appendTo($list);
	$input.val('');
	});
	var $list = $('#list');
	var $input = $form.find('input[type=email]');
	// var form = document.querySelector('form');
	// var list =document.querySelector('#list');
	// form.addEventListener('submit', function(event){
	// event.preventDefault();

	// var newElement = document.createElement('li');
	// newElement.innerText = this.elements.email.value;
	// list.appendChild(newElement);
	// this.elements.email.value = '';
	// });
	</script>-->
	<script>
	$(function(){
	$('button').data('team-score', 0);
	$('button').on('click', function(){
	var $this = $(this);
	var lastTeamScore = $this.data('team-score');
	$this.data('team-score', lastTeamScore + 1);
	$this.text($this.data('team-id') + ': ' + $this.data('team-score'));
	});
	});
	</script>
	<button data-team-id='Good'>Good: 0</button><br/>
	<button data-team-id='Evil'>Evil: 0</button><br/>
	</body>
	</html>
No results found