kowsheek · December 12, 2017 22:39
diff --git a/demo.html b/demo.html
 <!DOCTYPE html>
 <html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  </head>
  <body>
  <section id="container">
    <button name="dog">Add Dog</button>
    <button name="cat">Add Cat</button>
    <button id="all">Add all</button>
    <div id="animals"></div>
  </section>

  <script src="script.js" type="text/javascript"></script>
 </body>
 </html>
diff --git a/demo1.js b/demo1.js
 $(document).ready(function () {
    $('button').on('click', function (evt) {
        console.log(evt.offsetX, evt.offsetY);
        var $this = $(this);
        var $animals = $this.siblings('#animals');
        var name = $this.attr('name');
        console.log(name);
        $animals
            .append(`<strong>${name}</strong>`)
            .append('<br/>');
    });
 });
diff --git a/demo2.js b/demo2.js
 $(document).ready(function () {
    var $container = $('#container').append('<div id="animals"></div>');
    var $animals = $('#animals', $container);

    $('button').on('click', function (evt) {
        console.log(evt.offsetX, evt.offsetY);
        var $this = $(this);
        var name = $this.attr('name');
        console.log(name);
        $animals.append(name);
    });
 });
diff --git a/demo3.js b/demo3.js
 $(document).ready(function () {
    var $container = $('#container').append('<div id="animals"></div>');
    var $animals = $('#animals', $container);

    var animals = [
        {
            name: 'dog',
            age: 10
        },
        {
            name: 'cat',
            age: 30
        },
        {
            name: 'monkey',
            age: 18
        },
        {
            name: 'dog',
            age: 20
        }
    ];

    $('#all').on('click', function (evt) {
        animals.forEach(function (animal) {
            $('<article>')
                .append(`<strong>${animal.name}</strong>`)
                .append(' is ')
                .append(animal.age)
                .append(' years old.')
                .addClass('animal')
                .addClass(animal.name)
                .appendTo($animals);
        });
    });
 });
diff --git a/outline.md b/outline.md
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title></title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
	</head>
	<body>
	<section id="container">
	<button name="dog">Add Dog</button>
	<button name="cat">Add Cat</button>
	<button id="all">Add all</button>
	<div id="animals"></div>
	</section>

	<script src="script.js" type="text/javascript"></script>
	</body>
	</html>
	$(document).ready(function () {
	$('button').on('click', function (evt) {
	console.log(evt.offsetX, evt.offsetY);
	var $this = $(this);
	var $animals = $this.siblings('#animals');
	var name = $this.attr('name');
	console.log(name);
	$animals
	.append(`<strong>${name}</strong>`)
	.append('<br/>');
	});
	});
	$(document).ready(function () {
	var $container = $('#container').append('<div id="animals"></div>');
	var $animals = $('#animals', $container);

	$('button').on('click', function (evt) {
	console.log(evt.offsetX, evt.offsetY);
	var $this = $(this);
	var name = $this.attr('name');
	console.log(name);
	$animals.append(name);
	});
	});