Twitter Bootstrap Question posted in

Add enterkeypress function for adding list in javascript and organize the list style properly in todo-Twitter bootstrap

I want to add enterfunction into Javascript for my TODO list project,in which I can press the enter key and the item should be added, now I am able to add list through add button only.

Secondly, I want to organize The List properly for TODO list by giving some style. rightnow it doesn’t looks good.

Rightnow my TODOLIST project looks like this https://i.stack.imgur.com/V1j5z.png

var add = document.getElementById('add');
var removeall = document.getElementById('removeall');
var list = document.getElementById('list');


//remove all button

removeall.onclick= function(){
    list.innerHTML= '';
}

//adding a list element

add.onclick = function(){
    addlis(list);
    document.getElementById('userinput').value= '';
    document.getElementById('userinput').focus();
    }

function addlis(targetUl){
    var inputText = document.getElementById('userinput').value;
    var li = document.createElement('li');
    var textNode= document.createTextNode(inputText + ' ');
    var removeButton= document.createElement('button');
    
    
    if(inputText !== ''){
        removeButton.className= 'btn btn-xs btn-danger';
        removeButton.innerHTML= '×';
        removeButton.setAttribute('onclick','removeMe(this)');
      
    
    li.appendChild(textNode); //onebelowanother
    li.appendChild(removeButton); 
    targetUl.appendChild(li);
} else{
    alert("Please enter a TODO");
}
}

function removeMe(item){
    var p = item.parentElement;
    p.parentElement.removeChild(p);
}
body{
    font-family: 'EB Garamond', serif;
    padding: 0;
    margin: 0;
    background-color: beige;
}

h1{
    margin: 40px;
}

#userinput{
    width: 350px;
    height: 35px;
    display: inline-block;
}

.btn{
    margin: 20px 5px;
}

.form-control{
    margin: 0 auto;
}

ul{
    list-style: none;
}
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" media="screen" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css">
	<link rel="stylesheet" href="css/TodoStyle.css">
	<link href="https://fonts.googleapis.com/css?family=EB+Garamond&display=swap" rel="stylesheet">


	<title>My Online TODO List App</title>

	
</head>

<body>

	<div class="container-fluid text-center">
	    <h1>My First working TODO</h1>
	    <input type="text" id="userinput" class="form-control" placeholder="what you need to do" onkeydown="return searchKeyPress(event);">
	    <button class="btn btn-success" id="add">Add a TODO</button>
	    <button class="btn btn-danger" id="removeall">REMOVE ALL TODO</button>
	    <ul id="list">
	     <li class="list"></li> 
				
				
	    </ul>
	    
	    

	</div>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
	<script src="js/Todo.js"></script>

	

</body>

</html>
Tags:

2

Answers


  1. 0

    Just wrap all the inputs and buttons inside a form tag like this:

    <form id="...">
<input type="text" id="userinput" class="form-control" placeholder="what you need to do" onkeydown="return searchKeyPress(event);">
<button type="submit" class="btn btn-success" id="add">Add a TODO</button>
</form>

    and replace this:

    add.onclick = function(){...})

    with

    form = document.getElementBy...
form.addEventListener('submit', function() {...})

    Also try to avoid writing add.onclick and use addEventListener. That way you can have multiple listeners, remove them easily, and overall have more control.

    Login or Signup to reply.
  2. 0

    Use event listener for key press on your input (13 is the enter key):

    var input = document.getElementById("userinput");

input.addEventListener("keyup", function(event) {
  if (event.keyCode === 13) {
    event.preventDefault();
    searchKeyPress(event);
  }
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search