Menu
Okay, I'm having trouble making two text values showing up within the same list item (one <input>, one <textarea>) Is this possible?
I'm trying to create a simple diary/log application, in which you can add a title (optional) and the content of the post entry itself, press submit and have it create a list item displaying the content.
HTML:
<html>
<head>
<title>WriteUp</title>
</head>
<body>
<div id="textWrap">
<div class="border">
<h1>Start Writing</h1><br />
<input id="title" placeholder="Title (Optional)">
<textarea rows="4" cols="50" type="text" id="entry" maxlength="500" placeholder="Add stuff..."></textarea><br />
<button id="add">Submit</button>
<button id="removeAll">Remove All</button>
<ul id="list"></ul>
</div><!--end of border div-->
</div><!--end of textWrap-->
</body>
</html>
JS:
//js to add text entries
var ul = document.getElementById('list'),
removeAll = document.getElementById('removeAll'),
add = document.getElementById('add');
//make something happen when clicking on 'submit'
add.onclick = function(){
addLi(ul);
document.getElementById("titleHead");
};
//function for adding items
function addLi(targetUl){
var inputText = document.getElementById('entry').value,
li = document.createElement('li'),
textNode = document.createTextNode(inputText + ''),
removeButton = document.createElement('button');
if (inputText.split(' ').join(' ').length === 0) {
//check for empty inputs
alert ('No input');
return false;
}
removeButton.className = 'removeMe'; //add class to button for CSS
removeButton.innerHTML = 'Remove'; //add text to the remove button
removeButton.setAttribute('onclick', 'removeMe(this);');
li.appendChild(textNode);
li.appendChild(removeButton);
targetUl.appendChild(li);
}
//function to remove entries
function removeMe(item){
var parent = item.parentElement;
parent.parentElement.removeChild(parent);
}
removeAll.onclick = function(){
ul.innerHTML = '';
};
demo: http://codepen.io/Zancrash/pen/rxMxxQ (ignore angular login stuff)
978
Here is some javascript
//js to add text entries
var ul = document.getElementById('list'),
removeAll = document.getElementById('removeAll'),
add = document.getElementById('add');
//make something happen when clicking on 'submit'
add.onclick = function(){
addLi(ul);
document.getElementById("titleHead");
};
//function for adding items
function addLi(targetUl){
var inputText = document.getElementById('entry').value,
header= document.getElementById('title').value,
li = document.createElement('li'),
content=document.createElement('div'),
title=document.createElement('div'),
// textNode = document.createTextNode(inputText + ''+),
removeButton = document.createElement('button');
content.setAttribute('class','content')
title.setAttribute('class','title')
content.innerHTML=inputText;
title.innerHTML=header;
if (inputText.split(' ').join(' ').length === 0) {
//check for empty inputs
alert ('No input');
return false;
}
removeButton.className = 'removeMe'; //add class to button for CSS
removeButton.innerHTML = 'Remove'; //add text to the remove button
removeButton.setAttribute('onclick', 'removeMe(this);');
li.appendChild(title);
li.appendChild(content);
li.appendChild(removeButton);
targetUl.appendChild(li);
}
//function to remove entries
function removeMe(item){
var parent = item.parentElement;
parent.parentElement.removeChild(parent);
}
removeAll.onclick = function(){
ul.innerHTML = '';
};body {
margin: 0;
}
*{
font-family: Gotham Book, Arial, Helvetica, Sans-serif;
}
#navbar {
background-color: #f1f1f1;
text-align: center;
}
#navbaritems {
margin: 0 auto;
}
#navbaritems ul {
padding: 0;
width: 100%;
list-style-type: none;
margin: 0;
display: inline;
position: relative;
font-size: 0;
}
#navbaritems ul li {
display: inline-block;
white-space: nowrap;
text-align: center;
color: #000;
position: relative;
}
#navbaritems ul li ul {
width: 100%;
padding: 0;
position: absolute;
top: 6vh;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
display: none;
opacity: 0;
visibility: hidden;
text-align: center;
-webkit-transiton: opacity 0.2s;
-moz-transition: opacity 0.2s;
-ms-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
-transition: opacity 0.2s;
}
#navbaritems ul li ul li {
background-color: #f1f1f1;
display: block;
}
#navbaritems ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}
#navbaritems ul li:hover {
-o-transition: 1s;
-ms-transition: 1s;
-moz-transition: 1s;
-webkit-transition: 1s;
transition: 1s;
width: 22%;
}
#navbaritems ul li ul li:hover {
-o-transition: 1s;
-ms-transition: 1s;
-moz-transition: 1s;
-webkit-transition: 1s;
transition: 1s;
width: 100%;
}
#navbaritems ul li a {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
font-size: 1vw;
display: block;
height: 4vh;
line-height: 4vh;
color: #808080;
text-decoration: none;
padding: 1vh;
margin: 0;
}
#navbaritems ul li a:hover:not(.active) {
background-color: #82c986;
color: #ffffff;
-o-transition: .3s;
-ms-transition: .3s;
-moz-transition: .3s;
-webkit-transition: .3s;
transition: .3s;
cursor: pointer;
display: block;
}
#navbaritems ul li a.active {
color: #ffffff;
background-color: #4CAF50;
}
.title {
display:inline-block;
color:blue;
font-weight:bold;
text-decoration:underline;
} <title>WriteUp</title>
</head>
<body>
<div id="textWrap">
<div class="border">
<h1>Start Writing</h1><br />
<input id="title" placeholder="Title (Optional)">
<textarea rows="4" cols="50" type="text" id="entry" maxlength="500" placeholder="Add stuff..."></textarea><br />
<button id="add">Submit</button>
<button id="removeAll">Remove All</button>
<ul id="list"></ul>
</div><!--end of border div-->
</div><!--end of textWrap-->
</body>
</html>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
