I have a simple list of "News Articles" that I would like to be available for commentary. I've created an "Add Comment" button.
I want the button to create a <form> with a <textarea> immediately before the clicked button AND also create a "Cancel" button immediately after the clicked button. (I figured this out while posing this question)
The only thing that remains is that I would like the "Cancel" button to delete the newly created <textarea> and itself upon click. AND for extra credit, how do I prevent the "Add Comment" button from making more than one blank "textareas"?
$(document).ready(function(){
$(".AddComment").click(function () {
$("<form><textarea name='ResearchUpdate' placeholder='Enter your comment here' rows='3' cols='40' class='Commentary'></textarea> </form>").insertBefore(this);
$("<button class='CancelComment'>Cancel</button>").insertAfter(this);
});
$(".CancelComment").click(function (){
$(this).prev(".Commentary").remove();
$(this).remove();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>News Entries</title>
</head>
<body>
<h2>Killer Rabbit On The Loose</h2>
<p>Date: 01/23/2015</p>
<p>Author: Bobert</p>
<p>Subject: Animals</p>
<p>Most Recent Comment: None Yet.</p>
<button class="AddComment">Add Comment</button>
<h2>Porsche Unveils Ultra Fast Minivan</h2>
<p>Date:02/14/2015</p>
<p>Author: Jimmy</p>
<p>Subject: Cars</p>
<p>Most Recent Comment:</p>
<p>This is genius on Porsche's behalf! I can drop off the kids at school, go grocery shopping and still have time to go racing with my buddies. All without worrying that my emissions aren't falsified and polluting the world. --SemiProRacer997</p>
<button class="AddComment">Add Comment</button>
<h2> Apple Releases iPhone Inifity</h2>
<p>Date:03/11/2015</p>
<p>Author: Frank</p>
<p>Subject: Technology</p>
<p>Most Recent Comment:</p>
<button class="AddComment">Add Comment</button>
</body>
</html>
<script type="text/javascript">
$('.AddComment').one('click',function(e){
e.preventDefault();
var bt=$(this);
var el=$('<textarea name="comment" />');
el.insertBefore(this);
bt.text('Send comment').on('click',function(e){
if (el.val().length==0){
alert("Please fill the comment before send.");
el.focus(); //Delete this row if you don't want user to focus on the textarea.
return false;
}
$.ajax({
type: 'POST',
data : el,
cache: false,
url: 'postUrl.php',
success: function(data){
bt.after($('<b>Comment sent</b>').hide().fadeIn());
bt.add(el).hide();
}
})
})
})
</script>
It is better to show and hide already existing items, than creating on the fly and inserting them.
Extra credit for not making Add Comment more than one textarea:
$(".AddComment").click(function () {
$("<form><textarea name='ResearchUpdate' placeholder='Enter your comment here' rows='3' cols='40' class='Commentary'></textarea> </form>").insertBefore(this);
$("<button class='CancelComment'>Cancel</button>").insertAfter(this);
// Remove the click event and disable the button.
$(this).off("click").prop("disabled", true);
});
My proposed solution:
Make sure you load the the comment box with every post with a class .comment-box and a style="display: none;" and use the following event handler.
$(".AddComment").click(function () {
$(this).prev(".comment-box").toggle();
});
Also, you can have the cancel button to have the following event handler:
$(".cancel").click(function () {
$(this).closest(".AddComment").hide();
});
The best solution is to wrap every post items in a container div with a css class which we can use for jQuery selection later.
<div class="postItem">
<h2>Killer Rabbit On The Loose</h2>
<p>Date: 01/23/2015</p>
<p>Author: Bobert</p>
<button class="AddComment">Add Comment</button>
</div>
<div class="postItem">
<h2>Second post</h2>
<p>Date: 01/23/2015</p>
<p>Author: Shyju</p>
<button class="AddComment">Add Comment</button>
</div>
And in your cancel button click event, get the container div, find the form and the cancel button and remove it,
$(document).on("click",".CancelComment",function (e){
var _this = $(this);
_this.closest(".postItem").find("form").remove();
_this.remove();
});
Working sample here
You need to use jQuery on method to bind the click event on the cancel button as they are dynamically created by your code and injected to the DOM.
I would have the form there already but have it hidden so that when you click the button it appears. You can then disable the button using $('#buttonId').prop('disabled', true);
This will prevent any further clicks although the click wouldn't matter this way anyway as you only have one form to show so it wouldn't pop up any more.
Clicking the cancel button should fire a function that removes the content of the textarea in question, hides the form/textarea and re-enables the comment button
show_comment :
function show_comment(){<br>
$('#formId').show();<br>
$('#cancelButton').show();<br>
$('#commentButton').prop('disabled', true)<br>
}
remove_comment:
function remove_comment(){<br>
$('#textareaId').html('');<br>
$('#commentButton').prop('disabled', false);<br>
$('#cancelButton').hide();
}
Issues in your code.
You are adding click function for cancel button that does not exist on page load. You will have to add click after you add cancel button
You are doing prev() on cancel button which is wrong. The prev sibling of cancel button is add comment button and not text area.
Please see if following code fixes your issue.
I am also disabling add button once comment text area is added so that you dont add more text areas
$(document).ready(function(){
$(".AddComment").click(function () {
var $addCommentBtn = $(this),
$commentTextArea;
$addCommentBtn.prop( "disabled", true );
$commentTextArea = $("<form><textarea name='ResearchUpdate' placeholder='Enter your comment here' rows='3' cols='40' class='Commentary'></textarea> </form>").insertBefore(this);
$("<button class='CancelComment'>Cancel</button>").insertAfter(this).click(function (){
$commentTextArea.remove();
$(this).remove();
$addCommentBtn.prop( "disabled", false );
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>News Entries</title>
</head>
<body>
<h2>Killer Rabbit On The Loose</h2>
<p>Date: 01/23/2015</p>
<p>Author: Bobert</p>
<p>Subject: Animals</p>
<p>Most Recent Comment: None Yet.</p>
<button class="AddComment">Add Comment</button>
<h2>Porsche Unveils Ultra Fast Minivan</h2>
<p>Date:02/14/2015</p>
<p>Author: Jimmy</p>
<p>Subject: Cars</p>
<p>Most Recent Comment:</p>
<p>This is genius on Porsche's behalf! I can drop off the kids at school, go grocery shopping and still have time to go racing with my buddies. All without worrying that my emissions aren't falsified and polluting the world. --SemiProRacer997</p>
<button class="AddComment">Add Comment</button>
<h2> Apple Releases iPhone Inifity</h2>
<p>Date:03/11/2015</p>
<p>Author: Frank</p>
<p>Subject: Technology</p>
<p>Most Recent Comment:</p>
<button class="AddComment">Add Comment</button>
</body>
</html>
Related
I do have a header with a navigation bar. The navigation includes a search button that each time is clicked should change the word from "Search" to "Close Search" and open the search bar initially not displayed below the navigation bar. I tried different ways with .html, .text but the text in the search button sometimes does work and others doesn't. I tried different approaches, but it is not consistent. Every time I click on the "Search" button, it should change the text and open and close the search bar, not just once. I tried using toggle() as well. I paste here below the code for button and search bar.
Also, the search button should display a search icon, defined by the class "btn-search-icon", which disappears once the searchbar closes and the button has the text "close search". The search bar below has a "search" field, submit button and a cancel button. The cancel button should remove the value in the search field. This step works but it reloads the page and as a consequence it closes the search bar, while it should stay open.
Any ideas? I appreciate any help.
HTML:
<button class="bg-btn btn-search btn-search-icon" id="searchBtnBar" type="submit" value="true">Search</button>
div class="container search-bar-container">
<form id="bgSearchBar">
<input type="search" name="searchfield" value="Search" class="searchField">
<button class="bgsearchbtn">Search <i class="fa-solid fa-arrow-right"></i></button>
<button class="bgcancelhbtn"></button>
</form>
</div>
JQuery:
$('#bgSearchBar').hide();
$("#searchBtnBar").click(function () {
$(this).fadeOut(function () {
$(this).text(($(this).text() == 'Search') ? 'Close Search' : 'Search').fadeIn();
})
$(this).toggleClass('btn-search-icon');
$('#bgSearchBar').fadeIn();
})
$(".bgcancelhbtn").on("click", function(event) {
$(".searchField").val("");
});
I tried to make minimal changes so it would work.
$('#bgSearchBar').hide();
$("#searchBtnBar").click(function() {
var flag = ($(this).text() == 'Search');
$(this).fadeOut(function() {
$(this).text(flag ? 'Close Search' : 'Search').fadeIn();
})
$(this).toggleClass('btn-search-icon');
if (flag) {
$('#bgSearchBar').fadeIn();
} else {
$('#bgSearchBar').fadeOut();
}
})
$(".bgcancelhbtn").on("click", function(event) {
$(".searchField").val("");
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" integrity="sha512-1sCRPdkRXhBV2PBLUdRb4tMg1w2YPf37qatUFeS7zlBy7jJI8Lf4VHwWfZZfpXtYSLy85pkm9GaYVYMfw5BC1A==" crossorigin="anonymous" referrerpolicy="no-referrer"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<button class="bg-btn btn-search btn-search-icon" id="searchBtnBar">Search</button>
<div class="container search-bar-container">
<form id="bgSearchBar">
<input type="search" name="searchfield" value="Search" class="searchField">
<button class="bgsearchbtn">Search <i class="fa-solid fa-arrow-right"></i></button>
<button class="bgcancelhbtn" onclick="this.closest('form').reset(); return false">Cancel</button>
</form>
</div>
Here is my problem. I want to create a questionnaire.
How are you? A)Button "Good" B)Button "Bad"
i.e. user click button B.)
Alert Window is shown and notifying user about his/her last choice.
New Question and Buttons appear on the same page. Essentially, users will go through the set of questions on the same page.
Why are you Bad? A)Button "Some Txt" B.)Button "Some Txt"
How can I show new question and new buttons on the same page. The concept should follow some kind of decision tree logic.
Solutions, advises or "where-to-check hints" appreciated. Please, help me!
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Hello</title>
<script type="text/javascript">
function buttonclickgood() {
alert('you have clicked Good');
}
</script>
<script type="text/javascript">
function buttonclickbad() {
alert('you have clicked Bad');
}
</script>
</head>
<p>How are you?</p>
<input type="button" value="Good!" onclick="buttonclickgood()"/>
<input type="button" value="Bad!" onclick="buttonclickbad()"/>
<body>
</body>
</html>
You might want to explore JQuery a bit.
Particularly something around the .click() API
https://api.jquery.com/click/
Are you intending to do this just on the client side? I would recommend doing this through a client/server model thou e.g. Angular(Client) -> NodeJS(Server)
That is, having the question generation logic in node and let the client consume the questions however it is not impossible to do everything on the client.
So you code will be something like
<script src="../script/jquery-2.1.4.js"></script>
<script>
$(document).ready(function() {
<!-- maybe let say define your data (questions) here -->
var data =
[
{
<!--example ... -->
}
]
$("#btn_1").click(function() {
<!-- do some logic with the data above. Process it then print the new question by update your text -->
$('#TxtArea').val(data);
});
</script>
You will need to use some javascript to hide/show your different steps. With JQuery for example you can do something like that:
<script type="text/javascript">
$(document).ready(function() {
$(".step").hide();
$(".step-1").show();
});
function buttonclick(nextStep)
{
$(".step").hide();
$(".step-"+nextStep).show();
}
</script>
<div class="step step-1">
<p> Question 1 </p>
<input type="button" class="button" value="Good!" onclick="buttonclick(2)"/>
<input type="button" class="button" value="Bad!" onclick="buttonclick(2)"/>
</div>
<div class="step step-2">
<p> Question 2 </p>
<input type="button" class="button" value="Good!" onclick="buttonclick(3)"/>
<input type="button" class="button" value="Bad!" onclick="buttonclick(3)"/>
</div>
<div class="step step-3">
<p> Question 3 </p>
<input type="button" class="button" value="Good!" onclick="buttonclick(1)"/>
<input type="button" class="button" value="Bad!" onclick="buttonclick(1)"/>
</div>
Don't forget to add the JQuery library to make it work. The function can also be replaced by .click from JQuery.
I hope this will help.
WORKING CODE FOR YOU . I have added 2 level question only ... you can add more questions.
Click for working demo
<div id="first">
<p id ="text">How are you?</p>
</div>
<input type="button" id="b1" value="Good!" />
<input type="button" id="b2" value="Bad!"/>
<script>
$("#b1").click(function(){
if($("#b1").val()=="Good!")
{
$("#text").text("Good To hear that ! Do you want to spread a smile ?");
$("#b1").val("Yes");
$("#b2").val("No");
}
});
$("#b2").click(function(){
if($("#b2").val()=="Bad!")
{
$("#text").text("Ohh Sad ! Do you want my help ?");
$("#b1").val("Yes");
$("#b2").val("No");
}
}); </script>
Click for working demo
I have done question changes for both button of question 1 only... rest you can add . Include the jquery file
In my solution buttons' texts are changed. A decision tree of object is followed.
<input type="button" id="left" value="good" onclick="buttonclick(this.value)"/>
<input type="button" id="right" value="bad" onclick="buttonclick(this.value)"/>
<script type="text/javascript">
decision_tree = {
'bad': {
'some A': 'done',
' some B' : 'done'
},
'good': {
'yes': {
'like':'done',
'dont like':'done'
},
'no':'done'
}
};
left = document.getElementById("left");
right = document.getElementById("right");
st = decision_tree;
function buttonclick(v) {
alert('you have clicked ' + v);
if(st[v] == 'done'){
alert('you are done with questionnaire');
left.style.visibility = 'hidden';
right.style.visibility = 'hidden';
} else{
console.log(st[v]);
left.setAttribute("value",Object.keys(st[v])[0]);
right.setAttribute("value",Object.keys(st[v])[1]);
st = st[v];
}
}
</script>
I am using an accordion in a dialog to go through different steps that the end user will need to do. Each step has a button or text box with a button. How can I get it so that when a user hits the enter key it activates the button associated with the active heading.
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<div id="accordion">
<h3 id="Step1">Step 1:</h3>
<div>
<p>
To get started click "Setup" and it will configure this spreadsheet for use with the Connected Groups Add-on.
</p>
<p><button id="Step1B" class="action" onclick="step1()">Setup</button></p>
</div>
<h3 id="Step2">Step 2</h3>
<div>
<p>
To get started enter the name of your first contact group below then click "Create".
</p>
<p><input type="text" id="gName">
<button id="Step2B" class="action" onclick="step2()">Create</button></p>
</div>
<h3 id="Step3">Done</h3>
<div>
<p><center>
Thank you for using Connected Groups. More information or help can be found:
</center>
</p>
<p><button id="thankYou" onclick="step3()">Close</button></p>
</div>
</div>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script>
$(function() {
$( "#accordion" ).accordion({
heightStyle: "content"
});
}); // run on launch
function step1(){
alert("Step1");
$('#Step2').click();
};
function step2(){
var tb = $("#gName").val();
alert("Step2: "+tb);
$('#Step3').click();
};
function step3(){
google.script.host.close();
};
</script>
How can I get it so that when a user hits the enter key it activates the button associated with the active heading?
First, we can catch keypress events for input elements. If the keypress is an 'enter' key, then we will dispatch a click() to the 'active' button. We'll store that in a global variable, window.actionButton.
$(':input').keyup(function (event) {
if (event.keyCode == 13) {
window.actionButton.click();
}
});
If we assume that each panel contains a single button with class='action', then we can keep track of the 'active' button.
window.actionButton = ui.newPanel.find(".action");
The activate event fires whenever a header (+ panel) gets selected. During the page load, we will bind a function to that action, and have it update window.actionButton.
activate: function (event, ui) {
window.actionButton = ui.newPanel.find(".action");
},
The workflow improves if we move the focus to highlight the intended action. Ideally, focus should go to the next input, whatever that is, but in this simple accordion it's sufficient to move to the appropriate button:
window.actionButton.focus();
Unfortunately, when running in Google Apps Script HtmlService, we can target a programmatic button click but cannot control focus: Cannot simply force focus on text input in stand-alone Google App using HtmlService? You'll find that the jsFiddle operates differently than when in HtmlService because of this.
Script
Working jsFiddle.
<div id="accordion">
<h3 id="Step1">Step 1:</h3>
<div>
<p>To get started click "Setup" and it will configure this spreadsheet for use with the Connected Groups Add-on.</p>
<p>
<input type="button" id="Step1B" class="action" value="Setup" />
</p>
</div>
<h3 id="Step2">Step 2</h3>
<div>
<p>To get started enter the name of your first contact group below then click "Create".</p>
<p>
<input type="text" id="gName" />
<button id="Step2B" class="action">Create</button>
</p>
</div>
<h3 id="Step3">Done</h3>
<div>
<p>
<center>Thank you for using Connected Groups. More information or help can be found:</center>
</p>
<p>
<button id="thankYou" class="action">Close</button>
</p>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script>
/**
* On document load, set up accordion & event handlers
*/
$(function() {
$("#accordion").accordion({
heightStyle: "content",
// Handle activate event by setting a new "actionButton",
// and putting it into focus.
activate: function (event, ui) {
//alert(ui.newPanel.attr('id'));
window.actionButton = ui.newPanel.find(".action");
window.actionButton.focus();
},
// Likewise for create event
// This doesn't set focus - why not?
create: function (event, ui) {
//alert(ui.panel.attr('id'));
window.actionButton = ui.panel.find(".action");
window.actionButton.focus();
}
});
// Click handlers, assigned upon load
$('#Step1B').click(function () {
alert("Step1");
});
$('#Step2B').click(function () {
var tb = $("#gName").val();
alert("Step2: " + tb);
});
$('#Step3').click(function () {
google.script.host.close();
});
// Setup keypress event handler for all inputs
// If 'enter' is pressed, click the current actionButton.
$(':input').keyup(function (event) {
if (event.keyCode == 13) {
window.actionButton.click();
}
});
});
</script>
I have a simple application, where I'd like to toggle between showing and hiding elements in a fieldset using jQuery's .toggle effect. The trouble is, occasionally I have to double-click the button that enables the toggle, to get it to work.
Any ideas on what's going on?
HTML:
<!DOCTYPE html>
<html>
<head>
<script src="jquery-2.1.1.min.js"></script>
<script src="test.js"></script>
</head>
<body>
<div class="LeftFrame">
<div id="LeftTable"><strong>Left</div>
</div>
<div id="MainTable"><strong>Main
<div>
<br>
<form><fieldset><legend><button id="buttonShowFields">Add Info</button></legend>
<div id="InfoAddFields">
ID: <input type="text"><br>
Serial Number: <input type="text"><br>
Location: <select id="inputLocation">
<option>Location1</option>
<option>Location2</option></select><br>
Status: <select id="inputStatus">
<option>Complete</option>
<option>In Process</option></select><br>
</div>
</fieldset></form>
</div>
</div>
</body>
</html>
... and javascript (test.js ref in html above):
$(document).ready(function(){
// Show options to add workorder
// $("#WOAddFields").hide();
$("#buttonShowFields").click(function(){
$("#InfoAddFields").toggle();
});
});
Prevent the submit with event.preventDefault() when you click the button
http://jsfiddle.net/3NPPP/
$(document).ready(function(){
$("#buttonShowFields").click(function(e){
e.preventDefault();
$("#InfoAddFields").toggle();
});
});
I was having the same problem when using plain javaScript to toggle an element with the following function:
function toggle(element){
if (element.style.display !== "none")
element.style.display = "none";
else element.style.display = "block";
}
I noticed that when I added display:none to the CSS of the element I wanted to toggle, I needed to double click to first show the element. To fix this, I had to explicitly add style="display:none" to the HTML element tag.
instead of this...
<button id="buttonShowFields">Add Info</button>
use this...
<input type="button" id="buttonShowFields" value="Add Info" />
Please change event method to bind instead click.
$("#buttonShowFields").bind('click',function(){
$("#InfoAddFields").toggle();
});
I work on the simple ToDo list written on jQuery (and JS, of course).
I already created the static ToDo list with a possibility to add new items only by editing the code. It is logically that I am going to create a dynamic list now.
I've already tried some methods, like .load() code from external file, create .after(), but it all goes wrong for me.
What would you suggest me to do?
You may find all the source codes in strasbourgmeetings.org/ccc
I would be very grateful if you could help me solving this question.
Gloserio, yes, Add Item does not work now, because I of the problem I described.
ncubica, the problem is that at the moment I am not able to add new items to my list (only bu editing the code). Dynamic means that it would be possible to add/delete items. To do that I tried to use .after() method with the function inside it, that will copy the <li id="item1">List item here</li><li id="buttons1">Buttons here</li> (roughly speaking), but it puts all list items on the upper side and all buttons to the bottom.
This is a part of the JS code:
<script>
// Waiting for the document to load
$(document).ready(function() {
// Wanted to create a dynamic item list, that's why I used this variable. I thought it would
// generate unique IDs (there was 'id++' somewhere in the function I already deleted).
var id = 1;
// This is going to be used as an action for 'Add Item' button. (It is not a button, actually, it is just <span> with cursor: pointer. Using <a> causes page reload);
$('.add').click(function() {
$('#item'+id).after(function(i) { // '#item'+id should be something like this in the code: #item2, #item3, etc.
})
})
// 'Done' button
$('#done1').click(function() {
console.log('# "Done" button pressed');
$('#list1').css('background-color','#89f49a').css('border','1px solid #16bf31').css('text-decoration','line-through').css('color','#817f7f').css('font-weight','normal');
console.log('# Item doned successfully');
});
// 'Undone' button (is gonna be renamed to 'Reset');
$('#undone1').click(function() {
console.log('# "Undone" button pressed');
$('#list1').css('background-color','').css('border','').css('text-decoration','').css('color','').css('font-weight','normal');
});
// 'Working' button
$('#working1').click(function() {
$('#list1').css('background-color','#edc951').css('border','1px solid #dda119').css('font-weight','bold').css('color','#000').css('text-decoration','none');
});
// 'Cancel' button
$('#cancel1').click(function() {
$('#list1').css('background-color','#ff8c8c').css('border','1px solid #ea2c2c').css('font-weight','normal').css('text-decoration','line-through').css('color','#f00');
});
// 'Delete' button
$('#del1').click(function() {
$('div#dlist1').remove();
$('li#action1').remove();
});
});
</script>
And HTML part:
<div class="list">
<ul id="sortable">
<div class="list-item" id="item1"><div class="spacer1" id="spacer1"></div>
<div class="l-element" id="dlist1"><li id="list1" class="ui-widget ui-state-default">Create add feature</div>
<li id="action1" class="action"><input type="button" value="Done" class="done" id="done1"><input type="button" value="Undone" class="undone" id="undone1"><input type="button" value="Working" class="working" id="working1"><input type="button" value="Cancel" class="cancel" id="cancel1"><span id="del1" class="delete">Delete</span></li>
<div class="spacer"></div></div>
</ul>
<div>
As you can see, there is only 1 list item I wrote. IDs are static and can not be changed at the moment. All I need is to change IDs (ok, it will be var id = 1; id++) and to add the part of the code (inside <div class="list-item")
why don't you try jQuery's .clone() and attach it to the "Add Item" behaviour?
You can check it here.
I personally made one as well, and it works really simply, a checkbox, the text, followed by a delete button.
Works great, though I'm still working on a way to make it save it after you close the browser.
jQuery code:
function addListItem() {
var textToAdd = $('#new-text').val(); // The finish class is just for css styling
$('#list').append('<li class="item"><input type="checkbox" class="finish" />' + textToAdd + '<button class="delete">Delete</button></li>');
$('#new-text').val('');
}
function deleteItem() {
$(this).parent().remove();
}
$(document).ready(function() {
$('#add').on('click', addListItem);
$(document).on('click', '.delete', deleteItem);
});
HTML code:
<!DOCTYPE html>
<html>
<head>
<title>To Do List</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h2>To Do List</h2>
<p>Project started on <strong>4-1-2015</strong>.</p>
<input type="text" id="new-text" /><button id="add">Add</button>
<ul id="list">
</ul>
<script src="jquery.js" type="text/javascript"></script>
<script src="script.js" type="text/javascript"></script>
</body>
</html>
Hope this helped :)