<html>
<head>
  <title>Vanilla JavaScript</title>
  <link rel="stylesheet" type="text/css" href="project.css">
</head>
<body>
  <div class="hContainer" id="header" >
    <h1>CodeParadox</h1>
    <span id="searchBar">
      <input id="search" type="text" name="search" placeholder="search" >

    </span>
  </div>  

  <div class="bContainer">
    <div class="addItem" ">
      <div><label>Add Course</label></div>
      <input type="text" name="addItem" placeholder="addItem" id="value">
      <button id="formId" type="submit" >Submit</button>
    </div>
    <div>
      <label>Courses</label>
    <ul class="item" id="item">
      <li class="itemContent">HTML <button class="but">X</button></li>  
      <li class="itemContent">CSS<button class="but">X</button></li>  
      <li class="itemContent">JavaScript <button class="but">X</button></li>  
      <li class="itemContent">Machine Learning<button class="but">X</button></li> 
      <li class="itemContent">Deep Learning<button class="but">X</button></li>
    </ul>
    
    </div>
  </div>

  <script type="text/javascript" src="project.js"></script>
</body>
</html>
*{
  margin: 0px;
  padding: 0px;
}
.hContainer{
  background: #212121;
  color: #00E676;
  height: 150px;
  text-align: center;
  font-style: monospace;
  box-shadow: 5px 10px 18px #888888;
  width: 100%;
}
.hContainer h1{
  font-size: 60px;
  padding-top: 30px;
}
#searchBar{
  float: right;
  padding-top: 10px;
  padding-right: 100px;
  padding-bottom: 10px; 
}
#searchBar input[type=text]{
  width: 200px;
  height: 25px;
  margin-bottom: 30px;
  border-radius: 7px;
}

.bContainer{
  margin-left:  35%;
  margin-top: 35px;
  margin-right: 35%;
  padding: 20px;
  border: 5px solid orange;
  border-radius: 10px;
  background: #212121;
  width: 30%;
  box-shadow: 5px 10px 18px #888888;
}
.addItem{
  border: 3px solid green;
  padding: 10px;
  border-radius: 10px;

}
label{
  font-weight: bold;
  padding-bottom: 12px;
  font-size: 22px;
  color: #00E676;
}
.addItem input[type="text"]{
  height: 20px;
  border-radius: 6px;
  width: 80%;
}
.itemContent{
  border: 4px solid green;
  margin-bottom: 8px;
    background: #f3f3f3;
    border-radius: 8px;
    padding: 6px;
    list-style-type: none;
    height: 28px;

}
.but{
  background: red;
  float: right;
  font-weight: bold;
  width: 20px;
  height: 26px;
}



var form = document.getElementById('formId');

var item = document.getElementById('item');


form.addEventListener('click', youClicked);


function youClicked(e){
  e.preventDefault();
  var value =document.getElementById('value').value;
  if(value==""){
    alert('ENTER VALID VALUE');
  }else{
      var li = document.createElement('li');

      li.className='itemContent';

      li.appendChild(document.createTextNode(value));

      

      var but = document.createElement('button');

      but.className='but';
    
      but.appendChild( document.createTextNode('X'));
      
      li.appendChild(but);
      item.appendChild(li); 

      console.log(item);
    }
}
var del = document.getElementById('item');

del.addEventListener('click', remove);

function remove(e){
  if(e.target.classList.contains('but')){
    if(confirm('Are you sure ?')){
      var delParent = e.target.parentElement;
      del.removeChild(delParent);     
    }
  }
}

var hell = document.getElementById('search');

  hell.addEventListener('keyup', searchfn);

function searchfn(e){
  var text = e.target.value.toLowerCase();

  var items = item.getElementsByTagName('li');



  Array.from(items).forEach(function(item){
    var itemName = item.firstChild.textContent;
    if(itemName.toLowerCase().indexOf(text) != -1){
      item.style.display = 'block';
    } else {
      item.style.display = 'none';
    }
  });
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.