I am not sure how you go about styling a data attribute made in javascript.
const createTask = () => {
const id = createId()
const task = elements.input.value;
const date = elements.cal.value;
if(!task && !date) return alert("Please fill in task and select date");
if(!task) return alert("Please fill in task");
if(!date) return alert("Please select date");
const tasks = document.createElement("div");
tasks.innerHTML = `
<div class="task" date-id = "${id}">
<div class="content">
<input type ="checkbox" class="tick">
<input type ="text" class = text id = "text" data-id="" readonly>${task}
<label class = "due-date" for ="text">${date}</label>
<input type ="date" class = date id = "date">
</div>
<div class = "actions">
<button class="edit" data-id="${id}>Edit</button>
<button class="delete" data-id="${id}>Delet</button>
</div>
</div>
`
elements.list.appendChild(tasks)
return tasks
}
What I am trying to style is the data-id="${id} for the edit and delete button. I did style the class edit and delete in CSS
CSS:
.task .actions .edit {
background-image: linear-gradient(to right, var(--pink), var(--purple));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.task .actions .edit
{
font-size: 0.8rem;
margin-left: 3rem;
margin-top: 1rem;
}
.task .actions .delete {
color: crimson;
}
That data-id="${id} is preventing the buttons from appearing, but I need it there as it tracks with the list ID and it can delete or edit the list.
Related
After entering value in the text box and pressing submit button, how to resize the textbox according to value inside. So the text center alignment displays properly(Using plain javascript or css).
<!DOCTYPE html>
<body>
<div class="block">
☀
<input type="text" id="inputValue" placeholder="Change City"></input>
<button type="submit" id="submit">Submit</button>
</div>
<style>
.block{
border: 2px solid;
width: 300px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
}
#inputValue{
border: none;
}
#submit{
display: none;
}
</style>
<script>
var inputValue = document.querySelector("#inputValue");
var submit = document.querySelector("#submit");
inputValue.addEventListener("click",function(){
submit.style.display = "block";
});
submit.addEventListener("click",function(){
submit.style.display = "none";
});
</script>
</body>
</html>
I will give a example to you. Ge the idea from here
<input class="txt" id="inputBox" type="text"><br>
<button onClick=test()>test</button>
function test(){
var getClass = document.querySelector( ".txt" );
var getValue = document.getElementById("inputBox").value.length
getClass.style.width = ((getValue + 1) * 8) + 'px';
}
As well as this is another way to do this , this will be better for you.
click here
function test(){
var getClass = document.querySelector( ".txt" );
var getValue = document.getElementById("inputBox").value.length
getClass.style.width = ((getValue + 1) * 8) + 'px';
}
<input class="txt" id="inputBox" type="text"><br>
<button onClick=test()>
test
</button>
The sun-icon is decorative and would therefore be suited to being in a CSS pseudo element rather than part of the main HTML.
It is not possible to add a pseudo before element to an input element, but we can give it a label and add the sun-icon in its before pseudo element.
label::before {
content: '\2600';
/* Unicode value for the HTML characer '☀';*/
}
We can also use this when the user clicks on submit. The text the user has input can become the label text - this will mean the user can select it if wanted, and can also click on it again to go back to edit it and submit (it is not clear from the question if this is what is required, but it seems logical to restore the input element on click).
let inputValue = document.querySelector("#inputValue");
let submit = document.querySelector("#submit");
let label = document.querySelector("#label");
inputValue.addEventListener("click", function() {
submit.style.display = "block";
inputValue.style.display = "inline-block";
label.innerHTML = '';
});
submit.addEventListener("click", function() {
submit.style.display = "none";
label.innerHTML = inputValue.value;
inputValue.style.display = 'none';
});
.block {
border: 2px solid;
width: 300px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
}
label::before {
content: '\2600';
/* Unicode value for the HTML characer '☀';*/
}
#inputValue {
border: none;
}
#submit {
display: none;
}
<div class="block">
<label for="inputValue" id="label"></label>
<input type="text" id="inputValue" placeholder="Change City" />
<button type="submit" id="submit">Submit</button>
</div>
Aim was to take input and create radio buttons and label dynamically like a list which when checked goes to bottom while label name coming from the input textfield that we write. I was able to do this with the radio button but not with the label. Please help me out I'm new here.
[Fiddle] (http://jsfiddle.net/wju6t7k3/2/)
<div id = "container" >
<div class="row">
<div class="col-12">
<input id = "txt" type = "text" placeholder="Add new.." >
<button id="btn" value = "add" type = "button" onClick = "add()" >
</button>
</div>
<div id="done" class="col-12">
</div>
</div> <!-- row -->
<script>
//js
var j = 0;
var textval="";
function getInputValue(){
// Selecting the input element and get its value
inputVal = document.getElementById("txt").value;
// Displaying the value
alert(inputVal);
}
function add() {
if (document.getElementById('txt').value != '') {
j++;
var title = document.getElementById('txt').value;
var node = document.createElement('div');
node.innerHTML = '<input type="checkbox" class="checkbox-round" id="check' + j + '" name="check' + j + '"><label for="check' + j + '">' + title + '</label>';
document.getElementById('done').appendChild(node);
}
}
input = document.getElementById("txt");
input.addEventListener("keyup", function(event) {
if (event.keyCode === 13) {
document.getElementById("btn").click();
textval =this.value;
onfocus=this.value='';
}
});
function countChecked(event) {
alert(textval);
alert("balle");
getInputValue();
$(this).parent().parent().append(this).append('<label>textvalh</label>').append('<br>');
}
$("#container").on( "click", "input[type=checkbox]", countChecked );
function getForm(event) {
event.preventDefault();
var form = document.getElementById("task").value;
console.log(form);
}
</script>
You have to make a container or a parent element for the checkbox and its label to have more control of it.
and if you want to separate the checkbox that is checked, then make another div element to make a separation.
Here's an example, this is based on your code:
//js
var j = 0;
function add() {
if (document.getElementById('txt').value != '') {
j++;
var title = document.getElementById('txt').value;
var node = document.createElement('div');
node.innerHTML = '<div><input type="checkbox" class="checkbox-round" id="check' + j + '" name="check' + j + '"><label for="check' + j + '">' + title + '</label></div>';
document.getElementById('done').appendChild(node);
}
}
input = document.getElementById("txt");
input.addEventListener("keyup", function(event) {
if (event.keyCode === 13) {
document.getElementById("btn").click();
textval = this.value;
this.value='';
}
});
function countChecked(event) {
const isChecked = event.currentTarget.checked;
// Get parent of checkbox which is the closest <div> element
const checkbox_parent = $(event.currentTarget).closest('div');
if (isChecked) // Move element to div with ID = selected
checkbox_parent.appendTo('#selected')
else // Move element to div with ID = done
checkbox_parent.appendTo('#done')
}
$('#container').on('change', 'input[type="checkbox"]', countChecked)
input, input:active{
border:none;
cursor: pointer;
outline: none;
}
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: blue;
}
::-moz-placeholder { /* Firefox 19+ */
color: blue;
}
:-ms-input-placeholder { /* IE 10+ */
color: blue;
}
:-moz-placeholder { /* Firefox 18- */
color: blue;
}
button{
display:none;
}
.checkbox-round {
width: 1.3em;
height: 1.3em;
background-color: white;
border-radius: 50%;
vertical-align: middle;
border: 1px solid #ddd;
-webkit-appearance: none;
outline: none;
cursor: pointer;
}
.checkbox-round:checked {
background-color: gray;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container" >
<div class="row">
<div class="col-12" style="border: dashed red 3px;">
<input id = "txt" type="text" placeholder="Add new.." />
<button id="btn" value="add" type="button" onClick ="add()">Add</button>
<div id="done" class="col-12" style="border: solid purple 3px;">
</div>
<div id="selected" class="col-12" style="border: solid gray 3px;">
</div>
</div>
</div> <!-- row -->
</div>
Happy Coding!
I am currently creating a meme generator app where the user can submit an image, as well as top and bottom text. I want to make it so that after form submission, the text is added onto the image and styled using CSS. I have already tried adding a class to the elements and adding css to it but that does not work. Here is my code:
JS
let form = document.querySelector('#meme-form');
let img = document.querySelector('#img');
let topTxt = document.querySelector('#top-txt');
let bottomTxt = document.querySelector('#bottom-txt');
form.addEventListener('submit', function(e) {
e.preventDefault();
let memePic = document.createElement('img');
//create the divs for the memes
let newDiv = document.createElement('div');
form.appendChild(newDiv);
topTxt.classList.add('top')
bottomTxt.classList.add('bottom')
memePic.src = img.value;
newDiv.append(memePic, topTxt.value, bottomTxt.value);
//set the textbox inputs equal to nothing
img.value = '';
topTxt.value = '';
bottomTxt.value= '';
})
CSS
div {
width: 30%;
height: 300px;
margin: 10px;
display: inline-block;
}
img {
width: 100%;
height: 100%;
margin: 10px;
display: inline-block;
}
.top{
color: blue;
}
#bottom-txt {
color: red;
}
HTML
<body>
<form action="" id="meme-form">
<label for="image">img url here</label>
<input id="img" type="url"><br>
<label for="top-text">top text here</label>
<input id="top-txt" type="text"><br>
<label for="bottom-text">bottom text here</label>
<input id="bottom-txt" type="text"><br>
<input type="submit"><br>
</form>
<script src="meme.js"></script>
</body>
</html>
You just need to fix up some of logic how the elements are being appended after form is submitted.
For that you need to div after your form which will hold you results and then order your element to be displayed. I have also added a line hr to have separator between each results displayed.
You can style your element the way you would like them to be - i have added some basic CSS to show some styling and an actual img url for demo purpose only.
Live Working Demo:
let form = document.querySelector('#meme-form');
let img = document.querySelector('#img');
let topTxt = document.querySelector('#top-txt');
let bottomTxt = document.querySelector('#bottom-txt');
let results = document.querySelector('.meme-results');
form.addEventListener('submit', function(e) {
e.preventDefault();
let memePic = document.createElement('img');
var hrLine = document.createElement('hr');
//create the divs for the memes
let newDiv = document.createElement('div');
let topText = document.createElement('span');
let bttomText = document.createElement('span');
//Top text
topText.classList.add('top')
topText.textContent = topTxt.value
//Img
memePic.src = img.value;
results.appendChild(topText);
results.append(memePic);
//bottom text
bttomText.classList.add('bottom')
bttomText.textContent = bottomTxt.value
results.append(bttomText);
results.append(hrLine);
//set the textbox inputs equal to nothing
//img.value = '';
topTxt.value = '';
bottomTxt.value = '';
})
.meme-results {
width: 30%;
height: 300px;
margin: 10px;
display: block;
}
img {
width: 100%;
height: 100%;
display: block;
}
.top, #top-txt {
color: blue;
}
.bottom, #bottom-txt {
color: red;
}
<html>
<body>
<form action="" id="meme-form">
<label for="image">img url here</label>
<input id="img" type="url" value="https://via.placeholder.com/150"><br>
<label for="top-text">top text here</label>
<input id="top-txt" type="text"><br>
<label for="bottom-text">bottom text here</label>
<input id="bottom-txt" type="text"><br>
<input type="submit"><br>
</form>
<div class="meme-results"></div>
<script src="meme.js"></script>
</body>
</html>
I am making a todo-list. And I added row striping on it, which worked.
Now when I delete a task it should update the row striping, which it does not. After deleting an element instead of being eg. white white beige it should update to white beige white.
I have a tried a lot of things but I couldn't get anything to work. To be fair I am new to all of this and not quite experienced in working with row striping.
Is there even a way to do it?
Here is what I have so far:
loadEvents();
function loadEvents() {
document.querySelector('form').addEventListener('submit', submit);
document.querySelector('ul').addEventListener('click', deleteOrTick);
}
function submit(a) {
a.preventDefault();
let input = document.querySelector('input');
if (input.value != '')
addTask(input.value);
input.value = '';
}
function addTask(task) {
let ul = document.querySelector('ul');
let li = document.createElement('li');
li.innerHTML = `<div class="input-group mb-3 row"><div class="col-11"><label>${task}</label></div>
<span class="delete">x</span></div>`;
ul.appendChild(li);
document.querySelector('.allToDos').style.display = 'block';
}
function deleteOrTick(a) {
if (a.target.className == 'delete')
deleteTask(a);
}
function deleteTask(a) {
let remove = a.target.parentNode;
let parentNode = remove.parentNode;
parentNode.removeChild(remove);
event.stopPropagation();
}
ul {
list-style-type: none;
}
li {
font-size: 1.3em;
color: #2f4f4f;
}
.todo li:nth-child(2n) {
background: #e0d9c3;
}
.todo {
width: 500px;
}
.delete {
cursor: pointer;
}
<div class="container">
<form action="index.html" method="post">
<div class="heading">
<h1 class="header">ToDo-List</h1>
<p class="intro">Do what you do</p>
</div>
<div class="input-group mb-3">
<input type="text" class="form-control" name="task" placeholder="Add a todo" aria-describedby="basic-addon2">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="submit">Add</button>
</div>
</div>
</form>
</div>
<div class="container">
<div class="allToDos ">
<ul class="todo">
<li>
<div class="input-group mb-3 row">
<div class="col-11">
<label>hi was geht ab</label>
</div>
<span class="delete">x</span>
</div>
</li>
</ul>
</div>
</div>
deleteTask can be
function deleteTask(event) {
let remove = event.target.parentNode;
let parentNode = remove.parentNode;
remove.parentNode.remove();
event.stopPropagation();
}
document.querySelector('li').addEventListener('click',deleteOrTick); // not ul
function deleteTask(a){
let remove = a.currentTarget;
let parentNode = remove.parentNode;
parentNode.removeChild(remove);
a.stopPropagation(); //not event
}
I'm trying to create a new li element using a text input. The problem is while the text is appearing, it doesn't to create an actual li element that I can style. The text is there, but it just forms right next to each other in a row. Here is my html:
const button = document.getElementById('submit');
button.addEventListener ("click", () => {
var taskInput = document.getElementById('task').value;
// Creating the text for list item.
if (taskInput === '') { // Prevents empty list item.
alert("You have to type a task!");
} else {
var listItem = document.createElement("li"); // Create li element.
var text = document.createTextNode(taskInput); // Create text for list item.
listItem.appendChild(text); // Append text to li element.
}
//Add new list item to list
var list = document.getElementById("list");
list.appendChild(text);
});
<body>
<h1>Start your list!</h1>
<div class="input">
<input type="text" id="task">
<button id="submit">Create</button>
</div>
<section id="list">
</section>
</body>
just use <ul> instead of <section> and append to it listeItem and not text.
const button = document.getElementById('submit');
button.addEventListener ("click", () => {
var taskInput = document.getElementById('task').value;
// Creating the text for list item.
if (taskInput === '') { // Prevents empty list item.
alert("You have to type a task!");
} else {
var listItem = document.createElement("li"); // Create li element.
var text = document.createTextNode(taskInput); // Create text for list item.
listItem.appendChild(text); // Append text to li element.
}
//Add new list item to list
var list = document.getElementById("list");
list.appendChild(listItem);
});
<body>
<h1>Start your list!</h1>
<div class="input">
<input type="text" id="task">
<button id="submit">Create</button>
</div>
<ul id="list">
</ul>
</body>
You are appending text you need to append listItem. Check this out:
Your code:
list.appendChild(text);
How it should be:
list.appendChild(listItem);
Best!
<section>: Used to either group different articles into different purposes or subjects, or to define the different sections of a single article. ref for more info
You can add the created list element to this <section> <ol> <li> tags at different possible positions as show below.
var listItem = document.createElement("li"); // Create li element.
listItem.innerHTML = `taskInput`;
var list = document.getElementById("sectionlist");
list.appendChild(listItem);
const button = document.getElementById('submit');
button.addEventListener ("click", () => {
var taskInput = document.getElementById('task').value;
if (taskInput !== '') {
var listItem = document.createElement("li"); // Create li element.
listItem.innerHTML = taskInput;
var val = $("input[name='Radios']:checked").val();
var list = document.getElementById("sectionlist");
// https://stackoverflow.com/a/13166249/5081877
var listCount = $("#sectionlist li").length;
var xpath = '//section/ol/li['+listCount+']';
if( val == "Option 1") {
list.appendChild(listItem);
} else if ( val == "Option 2" ) {
var element = document.evaluate(xpath, window.document, null, 9, null ).singleNodeValue;
list.insertBefore(listItem, element);
} else if ( val == "Option 3" ) {
// https://stackoverflow.com/a/2470148/5081877
var newElem = new XMLSerializer().serializeToString(listItem);
list.insertAdjacentHTML('afterbegin', newElem);
}
} else {
alert("You have to type a task!");
}
});
body {margin: 2em; font-family: Arial, Helvetica, sans-serif;}
span {
/* style this span element so we can display nicely, this stlying is not neccessary */
margin: 10px 0;
display: block;
width: 100%;
float: left;
}
input[type="radio"] {
/* hide the inputs */
opacity: 0;
}
/* style your lables/button */
input[type="radio"] + label {
/* keep pointer so that you get the little hand showing when you are on a button */
cursor: pointer;
/* the following are the styles */
padding: 4px 10px;
border: 1px solid #ccc;
background: #efefef;
color: #aaa;
border-radius: 3px;
text-shadow: 1px 1px 0 rgba(0,0,0,0);
}
input[type="radio"]:checked + label {
/* style for the checked/selected state */
background: #777;
border: 1px solid #444;
text-shadow: 1px 1px 0 rgba(0,0,0,0.4);
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<body>
<div id="myFORM">
<h3>Insert Element into the DOM tree at a specified position.</h3>
<span>
<input id="Radio1" name="Radios" type="radio" value="Option 1" checked="checked">
<label for="Radio1">Node.appendChild() - Insert as END Ele.</label>
</span>
<span>
<input id="Radio2" name="Radios" type="radio" value="Option 2" >
<label for="Radio2">Node.insertBefore() - Insert as Last but one Ele.</label>
</span>
<span>
<input id="Radio3" name="Radios" type="radio" value="Option 3" >
<label for="Radio3">Element.insertAdjacentHTML() - Insert as Start Ele.</label>
</span>
</div>
<h1>Start your list!</h1>
<div class="input">
<input type="text" id="task">
<button id="submit">Create</button>
</div>
<section id="list">
<ol id="sectionlist">
<li>Default list Data</li>
</ol>
</section>
</body>
For more information regarding inserting element you can refer my previous post.
#See
Element.insertAdjacentElement()
Element.insertAdjacentHTML()
Node.appendChild()
Node.insertBefore()