Position a button next to a text in a created div - javascript

When I create an div I want to position my button to the right of the text. It works fine when i just put in some text like "PHP" but when write in a longer word like "Javascript" the button moves down so it is under the text. I have tried using float and display but it does not seem to work. Any ideas on how I can do this?
$(document).ready(() => {
//You can use IDs here because these elements are unique
const $addBtn = $("#läggatill");
const $inputBox = $("#myText");
const $flexBox = $("#flexbox");
$addBtn.click(() => {
//Creating a new box that contains everything we need and saving it to a variable
//I'm using ES6 template strings to embed the value of $inputBox
const $box = $(`
<div class="box">
<div class="newrect">
${$inputBox.val()}
<button class="hej">X</button></div>
<div class="dropdown">
<p class="text" id="text">Add description</p>
<textarea maxlength="255" class="autoExpand"></textarea>
</div>
</div>
`);
//Adding event listeneres for the box elements
$box.find(".hej").click(function () {
//Removing the parent .box wrapper DIV
$(this).closest(".box").remove();
});
$box.find(".newrect").click(() => {
const $dropdown = $box.find(".dropdown");
//If the dropdown is invisible, show it. Otherwise, hide it
if ($dropdown.css("display") === "none") {
$box.find(".dropdown").show();
} else {
$box.find(".dropdown").hide();
}
});
//Appending the box to the flexBox
$box.appendTo($flexBox);
});
});
// Expands all textareas with the class autoExpand
$(document)
.one('focus.autoExpand', 'textarea.autoExpand', function(){
var savedValue = this.value;
this.value = '';
this.baseScrollHeight = this.scrollHeight;
this.value = savedValue;
})
.on('input.autoExpand', 'textarea.autoExpand', function(){
var minRows = this.getAttribute('data-min-rows')|0, rows;
this.rows = minRows;
rows = Math.ceil((this.scrollHeight - this.baseScrollHeight) / 16);
this.rows = minRows + rows;
});
/* Start of lägga till kompetens */
.newrect {
min-width: 105px;
max-width: 220px;
margin-top: 1%;
margin-right: 1%;
margin-left: 1%;
margin-bottom: 0%;
padding: 5px 10px 5px 10px;
border: 1px solid green;
border-radius: 40px;
text-align: center;
background-color: white;
z-index: 2;
cursor: pointer;
}
.flexbox{
display: flex;
flex-direction: row;
}
.box {
z-index: 1;
}
.skriv {
border-radius: 40px 40px 40px 40px;
outline: none;
padding: 0 2%;
width: 51%;
margin: 2%;
}
.läggatill {
border: 1px solid black;
background-color: white;
border-radius: 5px 5px 5px 5px;
outline: none;
margin: 2% 5%;
width: 23%;
max-width: 200px;
float: right;
}
.dropdown {
display: none;
background-color: darkgrey;
height: 400px;
margin-top: -20%;
margin-right: 0%;
margin-left: 1.5%;
margin-bottom: 0%;
z-index: -1;
padding-top: 10%;
width: 97%;
}
.dropdown textarea{
width: 90%;
}
.show {
display: block;
}
.hej {
position: relative;
border: none;
background-color: transparent;
color: darkblue;
}
.autoExpand {
margin-top: 0%;
margin-right: 0%;
margin-left: 5%;
margin-bottom: 0%;
z-index: 2;
display: block;
overflow: hidden;
padding: 10px;
font-size: 14px;
border-radius: 6px;
border: 0;
resize: none;
}
.text {
text-align: center;
margin-top: 30%;
cursor: default;
}
/* End of lägga till kompetens */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="css/test.css"> <!-- Länk till CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <!-- Bootstrap -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<!-- Start of lägga till kompetenser function -->
<div class="col-md-12">
<div class="reform">
<input id="myText" maxlength="25" type="text" class="skriv" name="Kompetenser" autocomplete="off" autofocus> <!-- Textfield for kompetenser -->
<input id="läggatill" class="läggatill" type="button" value="Add box"> <!-- Button lägga till -->
</div>
</div>
<div class="flexbox" id="flexbox"></div> <!-- Container for the boxes -->

The issue is due to the max-width you set in CSS on .newrect causing the content to overflow. Similarly, the margin-left and margin-right encroached in to the content so .hej occasionally overflowed due to that too.
To fix this, remove max-width from .newrect (or make it much bigger) and use padding to set the horizontal gutters for the content within the .newrect instead:
.newrect {
min-width: 105px;
padding; 0 5px 0 15px;
/* other rules ... */
}
$(document).ready(() => {
//You can use IDs here because these elements are unique
const $addBtn = $("#läggatill");
const $inputBox = $("#myText");
const $flexBox = $("#flexbox");
$addBtn.click(() => {
//Creating a new box that contains everything we need and saving it to a variable
//I'm using ES6 template strings to embed the value of $inputBox
const $box = $(`
<div class="box">
<div class="newrect">
${$inputBox.val()}
<button class="hej">X</button></div>
<div class="dropdown">
<p class="text" id="text">Add description</p>
<textarea maxlength="255" class="autoExpand"></textarea>
</div>
</div>
`);
//Adding event listeneres for the box elements
$box.find(".hej").click(function() {
//Removing the parent .box wrapper DIV
$(this).closest(".box").remove();
});
$box.find(".newrect").click(() => {
const $dropdown = $box.find(".dropdown");
//If the dropdown is invisible, show it. Otherwise, hide it
if ($dropdown.css("display") === "none") {
$box.find(".dropdown").show();
} else {
$box.find(".dropdown").hide();
}
});
//Appending the box to the flexBox
$box.appendTo($flexBox);
});
});
// Expands all textareas with the class autoExpand
$(document)
.one('focus.autoExpand', 'textarea.autoExpand', function() {
var savedValue = this.value;
this.value = '';
this.baseScrollHeight = this.scrollHeight;
this.value = savedValue;
})
.on('input.autoExpand', 'textarea.autoExpand', function() {
var minRows = this.getAttribute('data-min-rows') | 0,
rows;
this.rows = minRows;
rows = Math.ceil((this.scrollHeight - this.baseScrollHeight) / 16);
this.rows = minRows + rows;
});
/* Start of lägga till kompetens */
.newrect {
min-width: 105px;
margin-top: 1%;
padding; 0 5px 0 15px;
margin-bottom: 0%;
padding: 5px 10px 5px 10px;
border: 1px solid green;
border-radius: 40px;
text-align: center;
background-color: white;
z-index: 2;
cursor: pointer;
}
.flexbox {
display: flex;
flex-direction: row;
}
.box {
z-index: 1;
}
.skriv {
border-radius: 40px 40px 40px 40px;
outline: none;
padding: 0 2%;
width: 51%;
margin: 2%;
}
.läggatill {
border: 1px solid black;
background-color: white;
border-radius: 5px 5px 5px 5px;
outline: none;
margin: 2% 5%;
width: 23%;
max-width: 200px;
float: right;
}
.dropdown {
display: none;
background-color: darkgrey;
height: 400px;
margin-top: -20%;
margin-right: 0%;
margin-left: 1.5%;
margin-bottom: 0%;
z-index: -1;
padding-top: 10%;
width: 97%;
}
.dropdown textarea {
width: 90%;
}
.show {
display: block;
}
.hej {
position: relative;
border: none;
background-color: transparent;
color: darkblue;
}
.autoExpand {
margin-top: 0%;
margin-right: 0%;
margin-left: 5%;
margin-bottom: 0%;
z-index: 2;
display: block;
overflow: hidden;
padding: 10px;
font-size: 14px;
border-radius: 6px;
border: 0;
resize: none;
}
.text {
text-align: center;
margin-top: 30%;
cursor: default;
}
/* End of lägga till kompetens */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="css/test.css">
<!-- Länk till CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- Bootstrap -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<!-- Start of lägga till kompetenser function -->
<div class="col-md-12">
<div class="reform">
<input id="myText" maxlength="25" type="text" class="skriv" name="Kompetenser" autocomplete="off" autofocus>
<!-- Textfield for kompetenser -->
<input id="läggatill" class="läggatill" type="button" value="Add box">
<!-- Button lägga till -->
</div>
</div>
<div class="flexbox" id="flexbox"></div>
<!-- Container for the boxes -->

I think it's gonna work for you
$(document).ready(() => {
//You can use IDs here because these elements are unique
const $addBtn = $("#läggatill");
const $inputBox = $("#myText");
const $flexBox = $("#flexbox");
$addBtn.click(() => {
//Creating a new box that contains everything we need and saving it to a variable
//I'm using ES6 template strings to embed the value of $inputBox
const $box = $(`
<div class="box">
<div class="newrect">
<span class="inputText">${$inputBox.val()}</span>
<button class="hej">X</button></div>
<div class="dropdown">
<p class="text" id="text">Add description</p>
<textarea maxlength="255" class="autoExpand"></textarea>
</div>
</div>
`);
//Adding event listeneres for the box elements
$box.find(".hej").click(function () {
//Removing the parent .box wrapper DIV
$(this).closest(".box").remove();
});
$box.find(".newrect").click(() => {
const $dropdown = $box.find(".dropdown");
//If the dropdown is invisible, show it. Otherwise, hide it
if ($dropdown.css("display") === "none") {
$box.find(".dropdown").show();
} else {
$box.find(".dropdown").hide();
}
});
//Appending the box to the flexBox
$box.appendTo($flexBox);
$inputBox.val('');
});
});
// Expands all textareas with the class autoExpand
$(document)
.one('focus.autoExpand', 'textarea.autoExpand', function(){
var savedValue = this.value;
this.value = '';
this.baseScrollHeight = this.scrollHeight;
this.value = savedValue;
})
.on('input.autoExpand', 'textarea.autoExpand', function(){
var minRows = this.getAttribute('data-min-rows')|0, rows;
this.rows = minRows;
rows = Math.ceil((this.scrollHeight - this.baseScrollHeight) / 16);
this.rows = minRows + rows;
});
.newrect {
/* min-width: 105px; */
/* max-width: 220px; */
margin-top: 1%;
margin-right: 1%;
margin-left: 1%;
margin-bottom: 0%;
padding: 5px 10px 5px 10px;
border: 1px solid green;
border-radius: 40px;
text-align: center;
background-color: white;
z-index: 2;
cursor: pointer;
display: inline-block;
text-overflow:ellipsis;
white-space:nowrap;
line-height: 100%;
}
.flexbox{
display: flex;
flex-direction: row;
}
.box {
z-index: 1;
}
.skriv {
border-radius: 40px 40px 40px 40px;
outline: none;
padding: 0 2%;
width: 51%;
margin: 2%;
}
.läggatill {
border: 1px solid black;
background-color: white;
border-radius: 5px 5px 5px 5px;
outline: none;
margin: 2% 5%;
width: 23%;
max-width: 200px;
float: right;
}
.dropdown {
display: none;
background-color: darkgrey;
height: 400px;
margin-top: -20%;
margin-right: 0%;
margin-left: 1.5%;
margin-bottom: 0%;
z-index: -1;
padding-top: 10%;
width: 97%;
}
.dropdown textarea{
width: 90%;
}
.show {
display: block;
}
.hej {
position: relative;
border: none;
background-color: transparent;
color: darkblue;
}
.autoExpand {
margin-top: 0%;
margin-right: 0%;
margin-left: 5%;
margin-bottom: 0%;
z-index: 2;
display: block;
overflow: hidden;
padding: 10px;
font-size: 14px;
border-radius: 6px;
border: 0;
resize: none;
}
.text {
text-align: center;
margin-top: 30%;
cursor: default;
}
/* End of lägga till kompetens */
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="css/test.css"> <!-- Länk till CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <!-- Bootstrap -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<!-- Start of lägga till kompetenser function -->
<div class="col-md-12">
<div class="reform">
<input id="myText" maxlength="25" type="text" class="skriv" name="Kompetenser" autocomplete="off" autofocus> <!-- Textfield for kompetenser -->
<input id="läggatill" class="läggatill" type="button" value="Add box"> <!-- Button lägga till -->
</div>
</div>
<div class="flexbox" id="flexbox"></div> <!-- Container for the boxes -->
</body>
</html>

Related

Problem adding text inside tags using createTextNode and createElement in javascript

I want to add new text node and a new li element but the result is a new li empty tag and a new separated string.
The string should be inside the created li tag.
Maybe my question is easy to answer but I really still don't understand how can the a new string can be added inside a tag since they are separately inserted into the DOM.
Inspecting results
any ideas ?
The source code is below
function Adding(){
let li = document.createElement('li')
let inputValue = document.getElementById('text').value;
let t = document.createTextNode(inputValue);
document.getElementById('list').appendChild(li);
document.getElementById('list').appendChild(t);
}
let btn = document.getElementById('btn');
btn.addEventListener('click', Adding)
body {
background-color: aliceblue;
}
h1{
display: block;
margin: 10% auto 0 auto;
width: 300px;
color: #96e5ff;
}
.title{
display: block;
}
.form{
display: block;
}
input{
display: block;
margin: 10px auto 0 auto;
width: 300px;
padding: 10px;
border-radius: 10px;
border: 1px #d6eeff solid;
}
button{
display: block;
margin: 10px auto 0 auto;
width: 300px;
border-radius: 20px;
border: none;
padding: 10px;
background-color: snow;
border: solid 1px #d6eeff;
}
#list{
padding: 150px;
height: 300px;
max-width: 300px !important;
background-color: snow;
border-radius: 10px;
border: #d6eeff solid 1px;
display: block;
margin: 5px auto 0 auto
}
li{
list-style-type: none;
background-color: grey;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Todo List</title>
</head>
<body>
<div class="title">
<h1>TODO List using JS</h1>
</div>
<div class="form">
<input id="text" placeholder="Add something" type="text">
<button id="btn">Submit</button>
</div>
<ul id="list">
<li></li>
</ul>
</body>
<script src="app.js"></script>
</html>
There's no need to create a textNode. Just set the innerText property on the <li> element you created, and append the <li> to the <ul> element.
function Adding(){
let li = document.createElement('li')
li.innerText = document.getElementById('text').value;
document.getElementById('list').appendChild(li);
}
let btn = document.getElementById('btn');
btn.addEventListener('click', Adding)
body {
background-color: aliceblue;
}
h1{
display: block;
margin: 10% auto 0 auto;
width: 300px;
color: #96e5ff;
}
.title{
display: block;
}
.form{
display: block;
}
input{
display: block;
margin: 10px auto 0 auto;
width: 300px;
padding: 10px;
border-radius: 10px;
border: 1px #d6eeff solid;
}
button{
display: block;
margin: 10px auto 0 auto;
width: 300px;
border-radius: 20px;
border: none;
padding: 10px;
background-color: snow;
border: solid 1px #d6eeff;
}
#list{
padding: 150px;
height: 300px;
max-width: 300px !important;
background-color: snow;
border-radius: 10px;
border: #d6eeff solid 1px;
display: block;
margin: 5px auto 0 auto
}
li{
list-style-type: none;
background-color: grey;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Todo List</title>
</head>
<body>
<div class="title">
<h1>TODO List using JS</h1>
</div>
<div class="form">
<input id="text" placeholder="Add something" type="text">
<button id="btn">Submit</button>
</div>
<ul id="list">
<li></li>
</ul>
</body>
<script src="app.js"></script>
</html>
You just need to modify your Javascript code in this way:
function Adding(){
let ul = document.getElementById("list");
let li = document.createElement("li");
let inputValue = document.getElementById('text').value;
li.appendChild(document.createTextNode(inputValue));
ul.appendChild(li);
}

How to decrese an image in JavaScript?

I'm trying to create that every time that the image is clicked, it will decrease in size until it completely disappears. But I can't do this, help me!
HTML code:
<html lang="en" dir="ltr">
<head>
<link rel="stylesheet" href="main.css">
<meta charset="utf-8">
<title>Stupid Project</title>
</head>
<body>
<header class="header-top">
<h1>Shrink the image</h1>
</header>
<img src="D:\MATEUS\Programação\Stupid project\images\levi.png" alt="Levi" id="image">
</body>
</html>
<script type="main/javascript" src="jquery-3.3.1.js"></script>
CSS code:
#import "variables.css";
#import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght#300&display=swap');
*
{
margin: 0%;
font-family: 'Ubuntu', sans-serif;
background-color: var(--body-color);
}
.header-top
{
background-color: var(--body-color);
height: 49px;
}
.header-top > h1
{
color: white;
display: inline-block;
vertical-align: top;
margin-left: 10px 10px;
}
#image
{
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
margin-top: 90px;
border-radius: 20px;
}
Assuming you want to scale the image down in size on each click we can do this:
set the inital scale of the image to 1 (through a CSS variable --scale)
set up an event listener on the image
when the image is clicked read the current value of --scale, decrease it by 0.1, say, (as long as it hasn't already hit 0)
<html lang="en" dir="ltr">
<head>
<link rel="stylesheet" href="main.css">
<meta charset="utf-8">
<title>Stupid Project</title><style>
*
{
margin: 0%;
font-family: 'Ubuntu', sans-serif;
background-color: var(--body-color);
}
.header-top
{
background-color: var(--body-color);
height: 49px;
}
.header-top > h1
{
color: white;
display: inline-block;
vertical-align: top;
margin-left: 10px 10px;
}
#image
{
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
margin-top: 90px;
border-radius: 20px;
transform: scale(var(--scale));
}
</style>
</head>
<body>
<header class="header-top">
<h1>Shrink the image</h1>
</header>
<img src="https://picsum.photos/id/1016/1024/768" alt="test picture" id="image">
<script>
const image = document.getElementById("image");
image.style.setProperty('--scale', 1);
image.addEventListener("click", function () {
const curScale = image.style.getPropertyValue('--scale');
if (curScale > 0) {image.style.setProperty('--scale', curScale - 0.1); }
});
</script>
</body>
</html>
I found the solution to the problem, here's the example code:
HTML:
<button type="button" id="button" onclick="zoomout()">Click Me!</button>
<img src="https://images.pexels.com/photos/1108099/pexels-photo-1108099.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" id="image">
CSS:
#image
{
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
margin-top: 0px; /* 90px */
margin-bottom: 10px;
border-radius: 20px;
transition: all 1s;
}
#button
{
color: white;
margin-left: 570px;
margin-top: 39px;
margin-bottom: 0%;
padding: 15px 32px;
background-color: var(--button-color);
}
JavaScript:
function zoomout() {
var GFG = document.getElementById("image");
var currWidth = GFG.clientWidth;
GFG.style.width = (currWidth - 100) + "px"
}
You can just reduce the image width one by one (or with whatever rate you wish), and to visualize this change have some transition set on the image.
const img = document.querySelector("img");
const imgWidth = getComputedStyle(img, null).getPropertyValue('width')
document.querySelector("button").addEventListener("click", () => {
for (let i = parseInt(imgWidth); i >= 0; i--) {
img.style.width = `${i}px`
}
})
img {
display: block;
width: 200px;
transition: all 1s;
}
button {
margin-bottom: 5px;
}
<button>Click</button>
<img src="https://images.unsplash.com/photo-1618141411216-96de9f2bd309?ixid=MXwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwyN3x8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" />

JavaScript not working properly in a To-Do List Project

So I'm working on this simple project. It's a To-Do List. Every task has to buttons, namely, done and delete (These are images). And there are two divisions, one will store the pending tasks and the other will stored the completed tasks.
I want that when the user clicks on the done button (tick image) the task should be removed from the "Pending Tasks" division and shifted to the "Completed Tasks" division. I tried to add this functionality by adding an event listener to the images. The event listens for a single click. But the code is not working properly. For the first task, I've to click twice to remove it. The same is the case with other tasks as well. Which means every single task is added twice to the "Completed Tasks" division.
Also, I've added functionality to add new tasks. But the buttons (images) don't work on these new tasks. Basically, event listening is not working on them. Kindly help with the issue. I've added the code below.
(I've not added any functionality for deletion)
var completedTasks = document.querySelector(".Completed-Tasks");
var pendingTasks = document.querySelector(".Pending-Tasks");
var addTaskButton = document.querySelector(".Add-Task-Button");
var doneButtons = document.querySelectorAll(".Tick");
var deleteButtons = document.querySelectorAll(".Cross");
doneButtons.forEach(checkClickEvent);
console.log(doneButtons.length);
function checkClickEvent(button, index) {
button.addEventListener("click", function() {
let task = button.parentNode.parentNode;
pendingTasks.removeChild(pendingTasks.childNodes[index]);
let doneTaskHTML = `<div class="Task Done"><p class="Task-Text">${task.children[0].textContent}</p><div class="Task-Operations"><img src="./Cross.png" alt="Delete" class="Operation"></div></div>`;
completedTasks.insertAdjacentHTML("beforeend", doneTaskHTML);
});
}
addTaskButton.addEventListener("click", function(event) {
event.preventDefault();
let newTaskText = document.querySelector(".Add-Task-Input");
if (newTaskText.value != "") {
let newTaskHTML = `<div class="Task"><p class="Task-Text">${newTaskText.value}</p><div class="Task-Operations"><img src="./Tick.png" alt="Done" class="Operation Tick"><img src="./Cross.png" alt="Delete" class="Operation Cross"></div></div>`;
pendingTasks.insertAdjacentHTML("beforeend", newTaskHTML);
newTaskText.value = "";
}
});
#import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
font-family: "Poppins";
}
body {
background: #EDF2F4;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
min-height: 100vh;
}
.Header {
background: #2B2D42;
color: #FFFFFF;
max-width: 500px;
width: 100%;
padding: 15px;
margin-bottom: 20px;
}
.Heading {
font-size: 25px;
text-align: center;
}
.Tasks-Space {
background: #8D99AE;
max-width: 500px;
width: 100%;
padding: 15px;
position: relative;
}
.Add-Task {
position: relative;
width: 100%;
}
.Add-Task-Input {
outline: none;
border: none;
padding: 5px 10px;
width: 100%;
font-size: 16px;
}
.Add-Task-Button {
outline: none;
border: none;
width: 100%;
padding: 5px 10px;
margin-top: 15px;
font-size: 16px;
cursor: pointer;
background: #D90429;
color: #FFFFFF;
}
.Add-Task-Button:hover {
background: #EF233C;
color: #FFFFFF;
}
.Tasks-Space-Heading {
margin-top: 15px;
padding: 5px 10px;
background: #2B2D42;
color: #FFFFFF;
}
.Pending-Tasks {
margin-top: 15px;
}
.Completed-Tasks {
margin-top: 15px;
}
.Task {
background: #FFFFFF;
padding: 5px 10px;
display: flex;
align-items: center;
justify-content: space-between;
}
.Task-Operations {
display: flex;
align-items: center;
}
.Operation {
height: 20px;
margin-left: 10px;
cursor: pointer;
}
.Done {
text-decoration: line-through;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>To-Do List</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="Header">
<p class="Heading">TO-DO LIST</p>
</div>
<div class="Tasks-Space">
<div class="Add-Task">
<input type="text" placeholder="Enter your task here" class="Add-Task-Input">
<button class="Add-Task-Button">Add Task</button>
</div>
<p class="Tasks-Space-Heading">Pending Tasks</p>
<div class="Pending-Tasks">
<div class="Task">
<p class="Task-Text">Make a pie</p>
<div class="Task-Operations">
<img src="./Tick.png" alt="Done" class="Operation Tick">
<img src="./Cross.png" alt="Delete" class="Operation Cross">
</div>
</div>
<div class="Task">
<p class="Task-Text">Play Minecraft</p>
<div class="Task-Operations">
<img src="./Tick.png" alt="Done" class="Operation Tick">
<img src="./Cross.png" alt="Delete" class="Operation Cross">
</div>
</div>
</div>
<p class="Tasks-Space-Heading">Completed Tasks</p>
<div class="Completed-Tasks"></div>
</div>
<script src="./main.js"></script>
</body>
</html>
Instead of pendingTasks.removeChild(pendingTasks.childNodes[index]); do task.remove(); since you already have the node that you want to remove. here is the reference to remove() function.
Also added document.querySelectorAll(".Tick").forEach(checkClickEvent); in add task click handler. This should add event listener to newly added tasks as well.
Edited
The solution did work but there was a slight problem. When we are adding event listeners to the new tasks using document.querySelectorAll(".Tick").forEach(checkClickEvent);, multiple event listeners are getting added to the existing tasks. To avoid this simply reinitialize the HTML inside the division. This can be done using pendingTasks.innerHTML = pendingTasks.innerHTML;. This code will remove all the existing event listeners on any element inside the division. Note that this code has to be used before adding event listeners again.
var completedTasks = document.querySelector(".Completed-Tasks");
var pendingTasks = document.querySelector(".Pending-Tasks");
var addTaskButton = document.querySelector(".Add-Task-Button");
var doneButtons = document.querySelectorAll(".Tick");
var deleteButtons = document.querySelectorAll(".Cross");
doneButtons.forEach(checkClickEvent);
console.log(doneButtons.length);
function checkClickEvent(button, index) {
button.addEventListener("click", function() {
let task = button.parentNode.parentNode;
task.remove();
let doneTaskHTML = `<div class="Task Done"><p class="Task-Text">${task.children[0].textContent}</p><div class="Task-Operations"><img src="./Cross.png" alt="Delete" class="Operation"></div></div>`;
completedTasks.insertAdjacentHTML("beforeend", doneTaskHTML);
});
}
addTaskButton.addEventListener("click", function(event) {
event.preventDefault();
let newTaskText = document.querySelector(".Add-Task-Input");
if (newTaskText.value != "") {
let newTaskHTML = `<div class="Task"><p class="Task-Text">${newTaskText.value}</p><div class="Task-Operations"><img src="./Tick.png" alt="Done" class="Operation Tick"><img src="./Cross.png" alt="Delete" class="Operation Cross"></div></div>`;
pendingTasks.insertAdjacentHTML("beforeend", newTaskHTML);
newTaskText.value = "";
pendingTasks.innerHTML = pendingTasks.innerHTML; // Re-initialize
document.querySelectorAll(".Tick").forEach(checkClickEvent); // Adding event listeners again
}
});
#import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
font-family: "Poppins";
}
body {
background: #EDF2F4;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
min-height: 100vh;
}
.Header {
background: #2B2D42;
color: #FFFFFF;
max-width: 500px;
width: 100%;
padding: 15px;
margin-bottom: 20px;
}
.Heading {
font-size: 25px;
text-align: center;
}
.Tasks-Space {
background: #8D99AE;
max-width: 500px;
width: 100%;
padding: 15px;
position: relative;
}
.Add-Task {
position: relative;
width: 100%;
}
.Add-Task-Input {
outline: none;
border: none;
padding: 5px 10px;
width: 100%;
font-size: 16px;
}
.Add-Task-Button {
outline: none;
border: none;
width: 100%;
padding: 5px 10px;
margin-top: 15px;
font-size: 16px;
cursor: pointer;
background: #D90429;
color: #FFFFFF;
}
.Add-Task-Button:hover {
background: #EF233C;
color: #FFFFFF;
}
.Tasks-Space-Heading {
margin-top: 15px;
padding: 5px 10px;
background: #2B2D42;
color: #FFFFFF;
}
.Pending-Tasks {
margin-top: 15px;
}
.Completed-Tasks {
margin-top: 15px;
}
.Task {
background: #FFFFFF;
padding: 5px 10px;
display: flex;
align-items: center;
justify-content: space-between;
}
.Task-Operations {
display: flex;
align-items: center;
}
.Operation {
height: 20px;
margin-left: 10px;
cursor: pointer;
}
.Done {
text-decoration: line-through;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>To-Do List</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="Header">
<p class="Heading">TO-DO LIST</p>
</div>
<div class="Tasks-Space">
<div class="Add-Task">
<input type="text" placeholder="Enter your task here" class="Add-Task-Input">
<button class="Add-Task-Button">Add Task</button>
</div>
<p class="Tasks-Space-Heading">Pending Tasks</p>
<div class="Pending-Tasks">
<div class="Task">
<p class="Task-Text">Make a pie</p>
<div class="Task-Operations">
<img src="./Tick.png" alt="Done" class="Operation Tick">
<img src="./Cross.png" alt="Delete" class="Operation Cross">
</div>
</div>
<div class="Task">
<p class="Task-Text">Play Minecraft</p>
<div class="Task-Operations">
<img src="./Tick.png" alt="Done" class="Operation Tick">
<img src="./Cross.png" alt="Delete" class="Operation Cross">
</div>
</div>
</div>
<p class="Tasks-Space-Heading">Completed Tasks</p>
<div class="Completed-Tasks"></div>
</div>
<script src="./main.js"></script>
</body>
</html>
Try using this code
// Create a "close" button and append it to each list item
var myNodelist = document.getElementsByTagName("LI");
var i;
for (i = 0; i < myNodelist.length; i++) {
var span = document.createElement("SPAN");
var txt = document.createTextNode("\u00D7");
span.className = "close";
span.appendChild(txt);
myNodelist[i].appendChild(span);
}
// Click on a close button to hide the current list item
var close = document.getElementsByClassName("close");
var i;
for (i = 0; i < close.length; i++) {
close[i].onclick = function(data) {
var div = this.parentElement;
div.style.display = "none";
var data = div.innerText;
var list = document.getElementById("list");;
var firstname = div.value;
var entry = document.createElement('li');
entry.appendChild(document.createTextNode(data));
list.appendChild(entry);
}
}
// Add a "checked" symbol when clicking on a list item
var list = document.querySelector('ul');
list.addEventListener('click', function(ev) {
if (ev.target.tagName === 'LI') {
ev.target.classList.toggle('checked');
}
}, false);
// Create a new list item when clicking on the "Add" button
function newElement() {
var li = document.createElement("li");
var inputValue = document.getElementById("myInput").value;
var t = document.createTextNode(inputValue);
li.appendChild(t);
if (inputValue === '') {
alert("You must write something!");
} else {
document.getElementById("myUL").appendChild(li);
}
document.getElementById("myInput").value = "";
var span = document.createElement("SPAN");
var txt = document.createTextNode("\u00D7");
span.className = "close";
span.appendChild(txt);
li.appendChild(span);
for (i = 0; i < close.length; i++) {
close[i].onclick = function() {
var div = this.parentElement;
div.style.display = "none";
}
}
}
body {
margin: 0;
min-width: 250px;
font-family: arial;
}
/* Include the padding and border in an element's total width and height */
* {
box-sizing: border-box;
}
/* Remove margins and padding from the list */
ul {
margin: 0;
padding: 0;
}
/* Style the list items */
ul li {
cursor: pointer;
position: relative;
padding: 12px 8px 12px 40px;
list-style-type: none;
font-size: 18px;
transition: 0.2s;
border-bottom: 1px solid #eee;
margin-top: -1px;
/* make the list items unselectable */
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* When clicked on, add a background color and strike out text */
ul li.checked {
background: #888;
color: #fff;
text-decoration: line-through;
}
/* Add a "checked" mark when clicked on */
ul li.checked::before {
content: '';
position: absolute;
border-color: #fff;
border-style: solid;
border-width: 0 2px 2px 0;
top: 10px;
left: 16px;
transform: rotate(45deg);
height: 15px;
width: 7px;
}
/* Style the close button */
.close {
position: absolute;
right: 0;
top: 0;
padding: 12px 16px 12px 16px;
}
.close:hover {
background-color: #f44336;
color: white;
}
/* Style the header */
.header {
background-color: #f44336;
padding: 30px 40px;
color: white;
text-align: center;
}
/* Clear floats after the header */
.header:after {
content: "";
display: table;
clear: both;
}
/* Style the input */
input {
margin: 0;
border: none;
border-radius: 0;
width: 75%;
padding: 10px;
float: left;
font-size: 16px;
}
input[type=text] {
outline: 0;
background: #eee;
border: 0;
transition: all .2s;
}
input[type=text]:focus {
background: #fff;
box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);}
/* Style the "Add" button */
.addBtn {
padding: 10px;
width: 25%;
background: #d9d9d9;
color: #555;
float: left;
text-align: center;
font-size: 16px;
cursor: pointer;
transition: 0.3s;
border-radius: 0;
}
.addBtn:hover {
background-color: #bbb;
}
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<div id="myDIV" class="header">
<h2 style="margin:5px">My To Do List</h2>
<input type="text" id="myInput" placeholder="Title..." autocomplete="off">
<span onclick="newElement()" class="addBtn">Add</span>
</div>
<ul id="myUL">
<li>Hit the gym</li>
<li>Pay bills</li>
<li>Meet George</li>
<li>Buy eggs</li>
<li>Read a book</li>
<li>Organize office</li>
</ul>
<p style="padding-left: 30px;">Completed Tasks</p>
<ul id="list"></ul>

Form validation with if statements not working

I'm working on a form validation for a uni project and I can't seem to get it right.
I'm using if statements inside a function and I get no reaction from the first-name input.
I also tried to change the 'href'-link of the form element and no reaction, thank you in advance!
JsFiddle : https://jsfiddle.net/gcdb2nj3/2/
var form = document.querySelector('form');
var firstName = document.getElementById('first-name');
var lastName = document.getElementById('last-name');
var eMail = document.getElementById('e-mail');
var phoneNumber = document.getElementById('phone-number');
var textArea = document.getElementById('custom-text-area');
var warning = document.querySelector('.warning');
// Prevent-Default Funktion
function preventtDefault(e) {
e.preventDefault();
};
formularValidierung();
function formularValidierung() {
form.addEventListener('submit', function(e) {
if(firstName.value === "") {
warning.style.display="block"
firstName.classList.add('input-invalid')
e.preventDefault();
} else {
warning.style.display="none"
e.preventDefault();
}
});
};
You have to pass the event object to your preventDefault function to prevent the default action. Note that the code you provided should work fine as you are calling event.preventDefault if the form validation does not pass whereas in your JSFiddle you are calling the preventDefault function without any arguments.
// Burger Menu Section
var mySideNav = document.getElementById('mySidenav');
var burgerLines = document.querySelector('.burger-lines');
var closeBtn = document.querySelector('.closebtn');
var logo = document.querySelector('.logo');
var what = $('.what');
$(burgerLines).on('click', function openNav() {
mySideNav.style.width="100%";
mySideNav.style.opacity="1";
burgerLines.style.opacity="0"
closeBtn.style.color="white"
closeBtn.style.fontSize="66px"
closeBtn.style.top="-29px"
});
$(closeBtn).on('click', function closeNav() {
mySideNav.style.width="0";
mySideNav.style.opacity = ".00775";
burgerLines.style.opacity="1"
});
// Form validation begins here
var form = document.querySelector('form');
var firstName = document.getElementById('first-name');
var lastName = document.getElementById('last-name');
var eMail = document.getElementById('e-mail');
var phoneNumber = document.getElementById('phone-number');
var textArea = document.getElementById('custom-text-area');
var warning = document.querySelector('.warning');
// Prevent-Default Funktion
function preventDefault(e) {
e.preventDefault();
};
formularValidierung();
function formularValidierung() {
form.addEventListener('submit', function(e) {
if(firstName.value === "") {
warning.style.display="block"
firstName.classList.add('input-invalid')
preventDefault(e);
} else {
warning.style.display="none"
preventDefault(e);
}
});
};
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #FCFCFC;
}
.sidenav {
font-family: 'Cormorant Garamond';
font-weight: bold;
width: 0px;
height: 100%;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.8);
overflow-x: hidden;
padding-top: 65px;
margin-left: 0px;
text-align: center;
transition: .7s;
}
.sidenav a {
padding: 45px 8px 20px 32px;
text-decoration: none;
font-size: 28px;
color: white;
display: block;
transition: 0.7s;
}
.sidenav a:hover {
color: rgb(155, 155, 155);
}
.burger-lines {
font-size:30px;
cursor:pointer;
position: fixed;
top: 44px;
right: 70px;
}
.logo {
font-family: 'Oswald', sans-serif;
padding: 40px 0px 0px 40px;
text-decoration: none;
font-size: 26px;
color: black;
display: block;
position: fixed;
z-index: 1;
top: 5px;
}
.sidenav .closebtn {
color: black;
cursor:pointer;
position: absolute;
top: -5px;
right: 60px;
font-size: 46px;
}
.headline-2 {
text-transform: uppercase;
text-align: center;
position: relative;
top: 9.5rem;
right: 15rem;
font-size: 18px;
}
.form-wrap {
text-align: center;
margin-top: 10rem;
}
.form-wrap > input {
font-family: 'Cormorant Garamond';
margin-top: 20px;
padding: 5px;
font-size: 16px;
border: 1px solid lightgray;
background: #FCFCFC;
}
#first-name, #last-name, #e-mail, #phone-number {
width: 350px;
height: 40px;
}
#custom-text-area {
font-family: 'Cormorant Garamond';
padding: 10px;
margin-top: 1rem;
width: 707px;
height: 230px;
font-size: 16px;
background: #FCFCFC;
border: 1px solid lightgray;
}
#submit {
background: black;
border: 1px solid black;
font-size: 19px;
text-align: left;
color: white;
width: 120px;
height: 45px;
margin-right: 29.3rem;
margin-top: 25px;
}
#submit:hover {
background: rgb(53, 53, 53);
transition: .5s;
}
/*input:hover, #custom-text-area:hover {
border: 1px solid red;
color: red;
transition: .5s ease-in;
}*/
.input-invalid {
border: 1px solid red;
color: red;
transition: .5s ease-in;
}
.warning {
font-family: 'Cormorant Garamond';
color: red;
position: relative;
top: -36px;
left: -3rem;
display: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Styx Somnus || Contact</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css#3.5.2/animate.min.css">
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Fjalla+One" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Cormorant+Garamond:400,700" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
</head>
<body>
<header>
<nav>
<a class="logo" href="index.html">STYX SOMNUS</a>
<div class="sidenav" id="mySidenav">
<a href="javascript:void(0)" class="closebtn" >×</a>
Home
About
Projects
Contact
</div>
<span class="burger-lines">☰</span>
</nav>
</header>
<main>
<p class="headline-2">Contact Form</p>
<form action="#" class="form-wrap">
<input type="text" id="first-name" placeholder="First Name*">
<input type="text" id="last-name" placeholder="Last Name*"><br>
<input type="email" id="e-mail" placeholder="Your E-Mail*">
<input type="text" id="phone-number" placeholder="Phone Number"><br>
<textarea id="custom-text-area" cols="40" rows="7" placeholder="Your Message..."></textarea><br>
<input type="submit" id="submit" value="Submit →">
<p class="warning">All fields with * must be filled in.</p>
</form>
</main>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
You should call preventDefault immediately upon submission, run your validation, then if validation passes, continue on with submission: https://jsfiddle.net/gcdb2nj3/4/
function formularValidierung() {
form.addEventListener('submit', function(e) {
e.preventDefault();
if (firstName.value === "") {
warning.style.display = "block"
firstName.classList.add('input-invalid')
} else {
warning.style.display = "none"
// submit form here
}
});
};
formularValidierung();

onclick event doesn't work in span tag

I just finished my javascript course in somewhere in online, and tried to make my own small project 'todolist'.
when user put work into and click , list should be added, but it shows a white and clear page.. I really can't see what's the problem in here.
I tested using console.log() but It shows me what I want, but it doesn't works in tag.
Here is my Code :
input[type=text] {
width: 500px;
height: 40px;
float: left;
}
#input_table {
display: block;
margin-left: auto;
margin-right: auto;
}
#input_box {
text-align: center;
padding-bottom: 50px;
background-color: crimson;
}
.align_center {
display: inline-block;
text-align: center;
}
.submit_box {
padding: 10px;
width: 50px;
height: 25px;
background: #d9d9d9;
color: #555;
float: left;
font-size: 16px;
cursor: pointer;
transition: 0.3s;
border-radius: 0;
text-align: center;
}
body {
background-color: gold;
}
.input_text {
float: left;
}
.store_ul {
margin: 0;
padding: 0;
text-align: right;
}
.oneLine {
font-size: 30px;
width: 100%;
height: 50px;
background-color: blue;
}
.close_box {
padding: 5px;
width: 50px;
height: 25px;
color: #555;
cursor: pointer;
}
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="main.css">
<title>ToDoList</title>
</head>
<body>
<script>
var count = 50;
var i = 0;
var tag = '';
</script>
<div id="input_table">
<div id="input_box">
<h1 style="color:white">My To Do List</h1>
<div class="align_center">
<input class="text_box" type="text" value="Title...">
<span class="submit_box" onclick="write()">Add</span>
</div>
</div>
</div>
<div class="output_table">
<div class="store_box">
<ul class="store_ul">
</ul>
</div>
</div>
<script>
function write() {
var text = document.querySelector('.text_box').value;
console.log(text);
if (i < 50) {
tag += '<div class="oneLine"><li class="input_text">' + text + '</li><span class="close_box">x</span></div>';
document.querySelector('.store_ul').innerHTML = tag;
console.log(tag);
i++;
} else {
alert("lists can't be added more than 50 works");
}
}
</script>
</body>
write will refer to the global function document.write, which will completely replace the page if the page has already been loaded. Use a different function name, perhaps "addTodo":
It would also probably be better to use a placeholder rather than a hard-coded value of Title... in the input box:
var count = 50;
var i = 0;
var tag = '';
function addTodo() {
var text = document.querySelector('.text_box').value;
console.log(text);
if (i < 50) {
tag += '<div class="oneLine"><li class="input_text">' + text + '</li><span class="close_box">x</span></div>';
document.querySelector('.store_ul').innerHTML = tag;
console.log(tag);
i++;
} else {
alert("lists can't be added more than 50 works");
}
}
input[type=text] {
width: 500px;
height: 40px;
float: left;
}
#input_table {
display: block;
margin-left: auto;
margin-right: auto;
}
#input_box {
text-align: center;
padding-bottom: 50px;
background-color: crimson;
}
.align_center {
display: inline-block;
text-align: center;
}
.submit_box {
padding: 10px;
width: 50px;
height: 25px;
background: #d9d9d9;
color: #555;
float: left;
font-size: 16px;
cursor: pointer;
transition: 0.3s;
border-radius: 0;
text-align: center;
}
body {
background-color: gold;
}
.input_text {
float: left;
}
.store_ul {
margin: 0;
padding: 0;
text-align: right;
}
.oneLine {
font-size: 30px;
width: 100%;
height: 50px;
background-color: blue;
}
.close_box {
padding: 5px;
width: 50px;
height: 25px;
color: #555;
cursor: pointer;
}
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="main.css">
<title>ToDoList</title>
</head>
<body>
<script>
</script>
<div id="input_table">
<div id="input_box">
<h1 style="color:white">My To Do List</h1>
<div class="align_center">
<input class="text_box" type="text" placeholder="Title...">
<span class="submit_box" onclick="addTodo()">Add</span>
</div>
</div>
</div>
<div class="output_table">
<div class="store_box">
<ul class="store_ul">
</ul>
</div>
</div>
<script>
</script>
</body>
You have a name conflict and the native method overrides yours in the global scope. In the example below you can see it is document.write.
<button onclick="console.log(write)">console</button>
<button onclick="console.log(write('hi'))">Hi</button>

Categories

Resources