JSFiddle - React, Tailwind, and code Playground

by Jagrati Tomar

HTML

<button type='button'>
This is my button
</button>
<ul>
  <li id = 'post-1'>Item 1</li>
  <li id = 'post-2'>Item 2</li>
  <li id = 'post-3'>Item 3</li>
</ul>

<form>
  <div>
    <label for='username'>First Name : </label>
    <input type='text' id='username' />
  </div>
  <div>
    <label for='password'>Password : </label>
    <input type='password' id='password' />
  </div>

  <button type='submit'>
  Submit
  </button>
</form>

JavaScript

var form = document.querySelector('form')
form.addEventListener('submit', function(e) {
  console.log(e)
  e.preventDefault()
})
var uli = document.querySelector('ul')
uli.addEventListener('click',function(e) {
	console.log(e)
	if (e.target && e.target.localName=='li'){
	   console.log("Clicked list item " +  e.target.id)
  }
}, false)

function random(number) {
  return Math.floor(Math.random() * number)
}

var button = document.querySelector('button')
button.addEventListener('click', function(e) {
	//e.stopImmediatePropagation();
  e.stopPropagation()
  console.log("button clicked")
  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
  this.style.backgroundColor = rndCol
}, {capture : false, once : true})

button.addEventListener('click', function() {
  console.log("m clicke")
})

var counter = (function() {
  var counterVal = 0
  return {
    incrementCounter: function() {
      counterVal++
    },
    getCounterVal: function() {
      return counterVal
    }
  }
})()


var helpText = [
  "my age is 18",
  "my name is jagrati"
]

var a = []

helpText.forEach((text) => {
  a.push(() => {
    console.log(text)
  })
})
console.log(a[1]())

console.log(counter.getCounterVal())