Related
This question already has answers here:
JavaScript closure inside loops – simple practical example
(44 answers)
Event binding on dynamically created elements?
(23 answers)
Closed last year.
I can't figure out why the for loops won't iterate. I had them working at one point inside of the printInput function, but not outside. BTW, I'm still working on the code portion of the for both loops. One is supposed to close the object by removing it. The other is supposed to make the html element editable.
// close button
var closes = document.getElementsByClassName("closes");
for (var i = 0; i < closes.length; i++){
closes[i].onclick = function (){
var l = closes[i];
l.remove();
}
}
// edit button
var edit = document.getElementsByClassName("edit");
for(var i = 0; i < edit.length; i++){
edit[i].onclick = function (){
var x = this.parentElement;
x.contentEditable = true;
}
}
// Submits input by hitting enter
document.addEventListener("keyup", function(e) {
if (e.keyCode === 13) {
printInput();
}
});
// Toggles checked class for finished chores
let selection = document.querySelector('ul');
selection.addEventListener("click", function(event) {
if (event.target.tagName === 'LI') {
event.target.classList.toggle('checked');
}
}, false);
// This creates a new list object.
function printInput() {
let input = document.getElementById('todotext').value;
if (input === "" || null){
alert("You haven't written anything!");
} else {
const newItem = document.createElement('li');
const newNode = document.createTextNode(input);
newItem.className = "closes";
newItem.appendChild(newNode);
document.getElementById("list").appendChild(newItem);
const img = document.createElement("img");
img.src = 'edit.png';
img.className = "edit";
const newSpan = document.createElement("span");
const xBtn = document.createTextNode("x");
newSpan.className = "close";
newSpan.appendChild(xBtn);
newItem.appendChild(img);
newItem.appendChild(newSpan);
document.getElementById("todotext").value = "";
}
}
body {
min-width: 850px;
font-family: sans-serif;
background-color: #ece0d9;
}
h1.title {
width: auto;
margin: auto;
padding: 25px;
text-align: center;
-webkit-text-stroke: 1px #460a1e; /* width and color */
font-family: sans-serif; color: white;
}
div.form {
display: flex;
padding: 10px;
width: 50%;
margin: auto;
}
input {
width: 75%;
padding: 10px 14px 11px 14px;
margin: 0;
border-radius: 0;
border-width: thin;
font-size: inherit;
}
input:focus {
border-radius: 0;
outline: none;
}
span.addTo {
width: 25%;
padding: 8px 14px 10px 14px;
margin: 0;
border-style: solid;
border-width: thin;
border-color: black;
border-left: none;
text-align: center;
background-color: rgb(236, 235, 235);
}
span.addTo:hover {
background-color: #e0e0e0;
cursor: pointer;
}
ul.list{
width: 50%;
display: table;
text-align: left;
padding: 0;
margin: auto;
}
ul.list li{
padding: 10px 10px;
background-color: snow;
clear: right;
margin: 0;
position: relative;
cursor: pointer;
}
ul.list li:nth-child(2n){
background-color: rgb(240, 239, 239);
}
ul.list li.checked:nth-child(2n){
text-decoration: line-through;
background-color: rgb(170, 168, 168);
}
ul li.checked {
text-decoration: line-through;
background-color: rgb(170, 168, 168);
}
img.edit {
position: absolute;
right: 40px;
top: 0;
padding: 1px;
width: 34px;
height: 36.4px;
cursor: pointer;
background-color: transparent;
color: rgb(75, 71, 71);
}
img.edit:hover {
padding: 0;
width: 34px;
height: 36.4px;
transition-property: background-color;
transition-duration: .3s;
border-style: ridge;
border-color: black;
border-width: 1px;
}
span.close {
position: absolute;
right: 0;
top: 0;
padding: 10px 14px 10px 14px;
cursor: pointer;
background-color: transparent;
color: rgb(75, 71, 71);
}
span.close:hover {
color: black;
padding: 9px 13px 9px 13px;
transition-property: background-color;
transition-duration: .3s;
border-style: ridge;
border-color: black;
border-width: 1px;
}
<!DOCTYPE html>
<html>
<head>
<title>To-Do List</title>
<meta charset="en">
<link rel="stylesheet" href="main.css">
</head>
<body>
<h1 class="title">To-Do List</h1>
<div class="form">
<input type="text" id="todotext">
<span onclick="printInput()" id="addTo" class="addTo">Add</span>
</div>
<ul style="list-style-type:none;" class="list" id="list">
<li hidden id="close">Clean room<img src="edit.png" class="edit"><span class="close">x</span></li>
</ul>
<script src="main.js">
</script>
</body>
</html>
I'm new to Stack Overflow. I hope that I'm doing this correctly. ❤
I'm working on an old Etch-a-Sketch JavaScript project from months ago and decided to rework the 'mobile' form of the project because I hadn't bothered to do so at the time. At first, I tried just moving the buttons to the top horizontally, but I didn't like any of the variations I tried. So I decided I'd be better off with a dropdown menu instead that would appear when the screen is 500px or smaller, replacing the buttons.
The dropdown menu is supposed to do exactly what the buttons do - when a certain mode is selected, that's the mode that the program is supposed to switch to. For example, when the "Party mode" button is clicked, the program switches to "party mode". I want the dropdown menu to behave similarly - when the "party mode" option is selected, the program should switch to "party mode".
My logic was that I needed a function that grabbed the value of the dropdown menu, and then an "if" condition would run that pretty much says "If the value is x, x mode should run; else if the value is y, y mode should run", and so on. I added the function to the existing window.onload function so it would run upon the window loading. This didn't work.
Note that the dropdown menu will, in the future, only appear when the screen size is 500px or less. In addition, I still have the buttons on the screen for all sizes, just for testing/debugging purposes. When I'm done and have this figured out, the buttons will have "display = 'none'" and be hidden for the "mobile size".
Anyway, so yeah, the program is still just listening to the buttons, and not the dropdown menu. That leads me to believe that I need to somehow turn "off" the button mode? If that's the case, how do I do that? If that's not the case, what am I supposed to do here? Any help or insight would be greatly appreciated. Thanks!
const defaultMode = 'default';
const defaultSize = 30;
const defaultColor = '#0b478b';
let currentMode = defaultMode;
let currentSize = defaultSize;
let currentColor = defaultColor;
// Sets the program's current mode
function setCurrentMode(newMode) {
activeButton(newMode);
currentMode = newMode;
}
// Sets the grid's size
function setCurrentSize(newSize) {
currentSize = newSize;
}
// Sets the color of the square (if in default mode)
function setCurrentColor(newColor) {
currentColor = newColor;
}
// Links the various HTML elements to this script
const sizeValue = document.querySelector('#sizevalue');
const sizeSlider = document.querySelector('#sizeslider');
const colorPicker = document.querySelector('#colorpicker');
const defaultBtn = document.querySelector('#default');
const partyBtn = document.querySelector('#party');
const grayBtn = document.querySelector('#grayscale');
const eraserBtn = document.querySelector('#eraser');
const clearBtn = document.querySelector('#clear');
const grid = document.querySelector('#maincontainer');
// DOM manipulations for buttons, color picker, and size slider
colorPicker.onchange = (e) => setCurrentColor(e.target.value);
defaultBtn.onclick = () => setCurrentMode('default');
partyBtn.onclick = () => setCurrentMode('party');
grayBtn.onclick = () => setCurrentMode('gray');
eraserBtn.onclick = () => setCurrentMode('eraser');
clearBtn.onclick = () => reloadGrid();
sizeSlider.onmousemove = (e) => updateSizeValue(e.target.value);
sizeSlider.onchange = (e) => changeSize(e.target.value);
// When the size is changed, we set the grid size, update the size value (text), and reload the grid.
function changeSize(num) {
setCurrentSize(num);
updateSizeValue(num);
reloadGrid();
}
// When we update the size value, the text changes to reflect the value. (It's a square, so the value is always the same for length and width).
function updateSizeValue(num) {
sizeValue.innerHTML = `${num} x ${num}`;
}
// When we reload the grid (which happens when "Clear grid" is pressed), we ensure that we clear the grid and that the size is still the current size.
function reloadGrid() {
clearGrid()
makeGrid(currentSize)
}
// When we clear the grid, it clears the grid.
function clearGrid() {
grid.innerHTML = ''
}
// Creates the base grid and includes the code that says "when the mouse goes over the squares, draw."
function makeGrid(size) {
grid.style.gridTemplateColumns = `repeat(${size}, 1fr)`;
grid.style.gridTemplateRows = `repeat(${size}, 1fr)`;
for (i = 0; i < size * size; i++) {
let square = document.createElement('div');
square.addEventListener('mouseover', changeColor);
grid.appendChild(square);
}
}
// These are the conditions to set the color of the "pen" (squares)
function changeColor(e) {
if (currentMode === 'party') {
const randomR = Math.floor(Math.random() * 256);
const randomG = Math.floor(Math.random() * 256);
const randomB = Math.floor(Math.random() * 256);
e.target.style.backgroundColor = `rgb(${randomR}, ${randomG}, ${randomB})`;
} else if (currentMode === 'default') {
e.target.style.backgroundColor = currentColor;
} else if (currentMode === 'gray') {
e.target.style.backgroundColor = calculateGray(e);
} else if (currentMode === 'eraser') {
e.target.style.backgroundColor = 'white';
}
}
// Shading mode code
function calculateGray(e) {
let clr = returnRGB(e.target.style.backgroundColor);
if (!clr || clr[1] !== clr[2] || clr[1] !== clr[3]) {
return `rgb(255, 255, 255)`;
}
return clr[1] <= 0 ? `rgb(255, 255, 255)` : `rgb(${clr[1]-25}, ${clr[1]-25}, ${clr[1]-25})`;
}
function returnRGB(num) {
return num.match(/rgb\(([0-9]*), ([0-9]*), ([0-9]*)\)/);
}
// Changes the button styling to indicate which mode is the active mode
function activeButton(newMode) {
if (currentMode === 'party') {
partyBtn.classList.remove('active');
} else if (currentMode === 'default') {
defaultBtn.classList.remove('active');
} else if (currentMode === 'gray') {
grayBtn.classList.remove('active');
} else if (currentMode === 'eraser') {
eraserBtn.classList.remove('active');
}
if (newMode === 'party') {
partyBtn.classList.add('active');
} else if (newMode === 'default') {
defaultBtn.classList.add('active');
} else if (newMode === 'gray') {
grayBtn.classList.add('active');
} else if (newMode === 'eraser') {
eraserBtn.classList.add('active');
}
}
// Ensures that, when we load the page, we make the grid and activate the correct mode (default).
window.onload = () => {
makeGrid(defaultSize);
activeButton(defaultMode);
dropdownModeThing(document.getElementById('dropdown-mode').value);
}
// Code for the dropdown menu
function dropdownModeThing(val) {
if (val === 'default') {
setCurrentMode('default');
} else if (val === 'party') {
setCurrentMode('party');
} else if (val === 'shading') {
setCurrentMode('gray');
} else if (val === 'eraser') {
setCurrentMode('eraser');
} else if (val === 'clear') {
reloadGrid();
}
}
body,
html {
min-height: 100vh;
height: 100%;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
margin: 0;
padding: 0;
background-color: white;
overflow-x: hidden;
}
header {
text-align: center;
margin: 0;
border-bottom: 1px solid black;
background-color: #0b478b;
color: white;
padding: 10px;
box-shadow: rgba(0, 0, 0, 0.15) 0px 3px 3px 0px;
}
p {
margin: 0;
}
h1 {
text-align: center;
margin: 0;
font-size: 2.5rem;
padding: 0;
}
#maincontainer {
background-color: white;
margin: 20px auto 10px auto;
display: grid;
border: 1px solid black;
width: 45vw;
height: 45vw;
min-height: 300px;
min-width: 300px;
box-shadow: rgba(0, 0, 0, 0.15) 0px 3px 3px 0px;
}
.testing {
padding-top: 100%;
color: hsla(0, 0%, 68%, 0.596);
}
#btncontainer {
padding-top: 20px;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
a {
color: #2aa5a1;
text-decoration: none;
}
a:hover {
color: white;
}
button {
background-color: #2aa5a1;
color: white;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
border: 1px solid black;
margin: 10px 15px;
padding: 8px 10px;
font-size: .9em;
transition: 0.3s;
box-shadow: rgba(0, 0, 0, 0.15) 0px 3px 3px 0px;
}
button:active {
background-color: #3F86D8;
color: white;
border: 1px solid black;
}
.active {
background-color: #3F86D8;
transition: 0.3s;
color: white;
border: 1px solid black;
}
button:hover {
background-color: #0b478b;
color: white;
border: 1px solid black;
opacity: 1;
}
#rightside {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
text-align: center;
min-height: 500px;
padding: 0;
margin: 0;
}
#sizevalue {
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
margin-bottom: 0;
}
input[type=range] {
background-color: white;
height: 28px;
-webkit-appearance: none;
margin: 0;
margin-bottom: 35px;
width: 250px;
padding: 0;
}
input[type=range]:focus {}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 11px;
cursor: pointer;
animate: 0.2s;
box-shadow: 1px 1px 1px #000000;
background: #3F86D8;
border-radius: 13px;
border: 0px solid #010101;
}
input[type=range]::-webkit-slider-thumb {
box-shadow: 1px 1px 2px #000031;
border: 1px solid #00001E;
height: 20px;
width: 20px;
border-radius: 15px;
background: #FFFFFF;
cursor: pointer;
-webkit-appearance: none;
margin-top: -5px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
background: #3F86D8;
}
input[type=range]::-moz-range-track {
width: 100%;
height: 11px;
cursor: pointer;
animate: 0.2s;
box-shadow: 1px 1px 1px #000000;
background: #3F86D8;
border-radius: 13px;
border: 0px solid #010101;
}
input[type=range]::-moz-range-thumb {
box-shadow: 1px 1px 2px #000031;
border: 1px solid #00001E;
height: 20px;
width: 20px;
border-radius: 15px;
background: #F3EEED;
cursor: pointer;
}
input[type=range]::-ms-track {
width: 100%;
height: 11px;
cursor: pointer;
animate: 0.2s;
background: transparent;
border-color: transparent;
color: transparent;
}
input[type=range]::-ms-fill-lower {
background: #3F86D8;
border: 0px solid #010101;
border-radius: 26px;
box-shadow: 1px 1px 1px #000000;
}
input[type=range]::-ms-fill-upper {
background: #3F86D8;
border: 0px solid #010101;
border-radius: 26px;
box-shadow: 1px 1px 1px #000000;
}
input[type=range]::-ms-thumb {
margin-top: 1px;
box-shadow: 1px 1px 2px #000031;
border: 1px solid #00001E;
height: 20px;
width: 20px;
border-radius: 15px;
background: #F3EEED;
cursor: pointer;
}
input[type=range]:focus::-ms-fill-lower {
background: #3F86D8;
}
input[type=range]:focus::-ms-fill-upper {
background: #3F86D8;
}
main {
display: flex;
justify-content: center;
margin: 0;
margin-bottom: 20px;
padding: 0;
}
#colorpicker {
-webkit-appearance: none;
border-radius: 100vw;
width: 50px;
height: 50px;
padding: 0;
margin: 0 auto 10px auto;
overflow: hidden;
border: 1px solid black;
box-shadow: rgba(0, 0, 0, 0.15) 0px 3px 3px 0px;
}
input[type='color']:hover {
transform: scale(1.05);
}
input[type='color']::-webkit-color-swatch-wrapper {
padding: 0;
}
input[type='color']::-webkit-color-swatch {
border: none;
border-radius: 50px;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
/* Tooltip container */
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
/* If you want dots under the hoverable text */
}
/* Tooltip text */
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
/* Position the tooltip text - see examples below! */
position: absolute;
z-index: 1;
}
/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
visibility: visible;
}
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
top: 50%;
right: 100%;
/* To the left of the tooltip */
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent black transparent transparent;
}
footer {
color: white;
text-align: center;
background-color: #0b478b;
position: fixed;
bottom: 0;
width: 100%;
margin: 0;
padding-top: 10px;
padding-bottom: 15px;
}
#media (max-width: 500px) {
main {
flex-direction: column;
}
#btncontainer {
margin: 0 auto;
padding: 20px 10px 5px 10px;
flex-wrap: wrap;
flex-direction: row;
justify-content: center;
}
#btncontainer button {
margin: 0 3px;
height: 35px;
}
#colorpicker {
-webkit-appearance: none;
border-radius: 100px;
width: 35px;
height: 35px;
padding: 0;
margin: 0 auto 10px auto;
overflow: hidden;
border: 1px solid black;
box-shadow: rgba(0, 0, 0, 0.15) 0px 3px 3px 0px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- CSS spreadsheet -->
<link href="styles.css" rel="stylesheet">
<title>Etch-a-Sketch</title>
</head>
<body>
<!-- Note that this is set up in various divs so
that we can use Flex to create our wanted layout. -->
<div id="entirepage">
<header>
<h1>Etch-a-Sketch</h1>
<p title="Testing">Select a color or a different mode, then select your size, and get drawing!</p>
</header>
<main>
<div id="btncontainer">
<select id="dropdown-mode">
<option value="default">Default mode</option>
<option value="party">Party mode</option>
<option value="shading">Shading</option>
<option value="eraser">Eraser mode</option>
<option value="clear">Clear grid</option>
</select>
<input type="color" id="colorpicker" value="#0b478b">
<button id="default">Default mode</button>
<button id="party">Party mode</button>
<button id="grayscale">Shading</button>
<button id="eraser">Eraser mode</button>
<button id="clear">Clear grid</button>
</div>
<div id="rightside">
<div id="maincontainer">
</div>
<label for="sizeslider" id="sizevalue">30 x 30</label>
<input type="range" min="1" max="100" value="30" id="sizeslider">
</div>
</main>
<footer>
<p>Created by Sara Dunlop (RiscloverYT)</p>
</footer>
</div>
<!-- JavaScript script -->
<script src="script.js"></script>
</body>
</html>
Luckily, there's an easy way to do that. Add this piece of code into your javascript file and see the magic.
const dropdown = document.getElementById('dropdown-mode');
dropdown.addEventListener('change', (e) => {
setCurrentMode(e.target.value);
});
Read more about change event here.
I am fairly new to javascript, and am working on a note-taking app to practice some things I have learned so far. It all works fine, however, when I click on the Read More button to view overflow text of the note, it displays the text from the most recent note, as opposed to the note I click Read More on. I want the entire text of a particular note to be displayed when its corresponding Read More button is pressed. Am I overthinking this? I think some kind of implementation of for...of, or for loops may help me achieve this outcome. This is a link to my codepen: https://codepen.io/oliverc96/pen/xxdZYrr
const addNote = document.querySelector('.add-note');
const newNote = document.querySelector('#new-note');
const noteFeed = document.querySelector('#note-feed');
let modalBg = document.createElement('div');
let modalWindow = document.createElement('div');
let exitSymbol = document.createElement('i');
let modalText = document.createElement('p');
function expandNote() {
modalWindow.classList.add('enterAnimation');
modalBg.style.visibility = 'visible';
exitSymbol.addEventListener('click', () => {
modalBg.style.visibility = 'hidden';
modalWindow.classList.remove('enterAnimation');
})
}
function createNote() {
const noteContainer = document.createElement('div');
noteContainer.classList.add('containerStyle');
let noteHeader = document.createElement('h1');
const noteNum = noteFeed.childElementCount;
noteHeader.innerText = `Note #${noteNum + 1}`;
noteHeader.classList.add('headerStyle');
noteContainer.append(noteHeader);
let noteText = document.createElement('p');
noteText.innerText = `${newNote.value}`;
noteText.classList.add('paraStyle');
noteContainer.append(noteText);
let readMore = document.createElement('button');
readMore.innerText = 'Read More';
readMore.classList.add('btnStyle');
noteContainer.append(readMore);
noteFeed.append(noteContainer);
readMore.addEventListener('click', expandNote);
modalBg.classList.add('modal-bg');
modalWindow.classList.add('modal-window');
exitSymbol.className = 'far fa-times-circle';
exitSymbol.classList.add('exitSymbol');
modalWindow.append(exitSymbol);
modalText.classList.add('fullTextStyle');
modalText.innerText = `${noteText.innerText}`;
modalWindow.append(modalText);
modalBg.append(modalWindow);
noteContainer.append(modalBg);
newNote.value = '';
}
addNote.addEventListener('click', createNote);
newNote.addEventListener('keyup', function(e) {
if (e.keyCode === 13) {
e.preventDefault();
createNote();
}
})
Actually your modalText will always store the latest value according to your code. You can follow the following steps to solve this.
Attach an data-attribute to that noteText.
When click on read more pass the id of that specific note.
Now just show the innerText of that selected item. You can use querySelector to get the element using data-attribute.
You can check my implementation.
console.clear();
const addNote = document.querySelector('.add-note');
const newNote = document.querySelector('#new-note');
const noteFeed = document.querySelector('#note-feed');
let modalBg = document.createElement('div');
let modalWindow = document.createElement('div');
let exitSymbol = document.createElement('i');
let modalText = document.createElement('p');
function expandNote(noteContainer, noteNum) {
return function () {
modalWindow.classList.add('enterAnimation');
modalBg.style.visibility = 'visible';
exitSymbol.addEventListener('click', () => {
modalBg.style.visibility = 'hidden';
modalWindow.classList.remove('enterAnimation');
})
const data = document.querySelector(`[data-id='${noteNum}']`).innerText;
showMoreModal(noteContainer, data);
}
}
function showMoreModal(noteContainer, data) {
modalBg.classList.add('modal-bg');
modalWindow.classList.add('modal-window');
exitSymbol.className = 'far fa-times-circle';
exitSymbol.classList.add('exitSymbol');
modalWindow.append(exitSymbol);
modalText.classList.add('fullTextStyle');
modalText.innerText = `${data}`;
modalWindow.append(modalText);
modalBg.append(modalWindow);
noteContainer.append(modalBg);
}
function createNote() {
const noteContainer = document.createElement('div');
noteContainer.classList.add('containerStyle');
let noteHeader = document.createElement('h1');
const noteNum = noteFeed.childElementCount;
noteHeader.innerText = `Note #${noteNum + 1}`;
noteHeader.classList.add('headerStyle');
noteContainer.append(noteHeader);
let noteText = document.createElement('p');
noteText.innerText = `${newNote.value}`;
noteText.classList.add('paraStyle');
noteText.setAttribute('data-id', noteNum);
noteContainer.append(noteText);
let readMore = document.createElement('button');
readMore.innerText = 'Read More';
readMore.classList.add('btnStyle');
noteContainer.append(readMore);
noteFeed.append(noteContainer);
readMore.addEventListener('click', expandNote(noteContainer, noteNum));
newNote.value = '';
}
addNote.addEventListener('click', createNote);
newNote.addEventListener('keyup', function(e) {
if (e.keyCode === 13) {
e.preventDefault();
createNote();
}
})
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'Montserrat', sans-serif;
}
#wrapper {
width: 1600px;
height: 100vh;
margin: auto;
text-align: center;
}
h1 {
font-size: 100px;
margin-top: 20px;
font-weight: 500;
}
h2 {
font-size: 50px;
font-weight: 400;
margin-top: 10px;
}
#add-new-note {
color: rgb(0, 153, 153);
}
textarea {
width: 1500px;
margin-top: 30px;
height: 60px;
border-radius: 6px;
padding: 20px;
font-size: 18px;
}
textarea:focus {
outline-color: black;
}
.add-note {
font-size: 20px;
width: 180px;
height: 50px;
border-radius: 6px;
margin-top: 30px;
background-color: rgb(0, 153, 153);
color: white;
border-style: solid;
border-color: rgb(0, 102, 102);
}
.add-note:hover {
background-color: rgb(0, 128, 128);
cursor: pointer;
}
#note-feed {
background-color: rgb(0, 153, 153);
height: 500px;
margin-top: 25px;
width: 1500px;
border-radius: 6px;
display: flex;
overflow: scroll;
flex-wrap: wrap;
padding: 20px 10px;
margin-left: 50px;
}
.containerStyle {
display: flex;
flex-direction: column;
justify-content: space-around;
background-color: rgb(169, 169, 214);
height: 48%;
width: 31%;
margin-right: 11px;
margin-left: 20px;
border-radius: 6px;
margin-bottom: 20px;
overflow: hidden;
padding: 0 28px;
padding-bottom: 15px;
text-align: left;
}
.headerStyle {
font-size: 30px;
}
.paraStyle {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
font-size: 18px;
text-overflow: ellipsis;
overflow: hidden;
}
.btnStyle {
font-size: 20px;
width: 150px;
height: 40px;
border-radius: 6px;
background-color: rgb(255, 128, 128);
color: white;
border-style: solid;
border-color: rgb(255, 77, 77);
align-self: left;
}
.btnStyle:hover {
background-color: rgb(255, 102, 102);
cursor: pointer;
}
.modal-bg {
z-index: 1;
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(0,0,0,0.5);
color: white;
display: flex;
justify-content: center;
align-items: center;
visibility: hidden;
overflow: scroll;
}
.modal-window {
border-radius: 6px;
background: white;
width: 70%;
min-height: 30%;
max-height: 70%;
overflow: scroll;
display: flex;
justify-content: flex-start;
align-items: flex-start;
}
.enterAnimation {
animation-name: fadeInDown;
animation-duration: 1s;
}
#keyframes fadeInDown {
0% {
opacity: 0;
transform: translateY(-200px);
}
100% {
opacity: 1;
}
}
.exitSymbol {
color: rgb(0, 128, 128);
font-size: 30px;
margin: 20px 20px;
}
.exitSymbol:hover {
cursor: pointer;
opacity: 0.8;
}
.fullTextStyle {
color: black;
width: 90%;
height: 80%;
text-align: left;
margin-top: 60px;
margin-bottom: 30px;
font-size: 18px;
}
<html>
<head>
<title> Note Taker </title>
<link type="text/css" href="notes.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#100;200;300;400;500;600;700&display=swap" rel="stylesheet">
</head>
<body>
<div id="wrapper">
<h1> Note Taker </h1>
<h2 id="add-new-note"> Add A New Note: </h2>
<textarea id="new-note" name="note-box" placeholder="Write your note here"></textarea>
<button class="add-note"> Add Note </button>
<div id="note-feed">
</div>
</div>
<script src="notes.js"></script>
<script src="https://kit.fontawesome.com/6fc6f370ca.js" crossorigin="anonymous"></script>
</body>
</html>
I was building a todo app , everything is work very well until i decided to add a button to remove all todos(ul) in one click. When I click on the button of remove all todos is removed but when I click on add button they all come back at once.
const input = document.getElementById('input');
const addBtn = document.getElementById('btn');
const removeBtn = document.getElementById('removeBtn')
const todoList = document.getElementById('todoList');
var ulElement = document.createElement('ul');
let placeholderValue = '';
// This code is for clear placeholder value
input.addEventListener('focus' , () => {
placeholderValue = input.placeholder;
input.placeholder = '';
});
input.addEventListener('blur' , ()=> {
input.placeholder = placeholderValue;
});
// this function is for add to do to a list
function addTodo(){
let liElements = document.createElement('li');
todoList.appendChild(ulElement);
ulElement.appendChild(liElements);
liElements.classList.add('liElement')
liElements.innerHTML = input.value;
// this code is for remove todo from the list
liElements.addEventListener('contextmenu' , (e)=> {
e.preventDefault();
liElements.classList.add('done');
});
liElements.addEventListener('dblclick' , (e) => {
e.preventDefault()
liElements.remove()
});
};
addBtn.addEventListener('click' , addTodo)
removeBtn.addEventListener('click' , () => {
ulElement.remove()
});
#import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght#1,600&display=swap');
*{
margin: 0;
box-sizing: border-box;
font-family: 'Playfair Display', serif;
}
body{
background-color: #DC86A9;
}
.mainInput {
display: flex;
justify-content: center;
margin-top: 15%;
}
.mainInput input + button {
margin-left: 10px;
}
.mainInput input {
width: 500px;
height: 50px;
border: none;
border-radius: 50px;
box-shadow: 4px 4px 60px white;
padding: 25px;
}
.mainInput input::placeholder{
font-size: 22px;
text-align: center;
}
.mainInput button {
border-radius: 10px ;
background-color: rgb(102, 102, 255);
margin-left: 10px;
border: none;
border-radius: 550px;
color: white;
font-weight: 900;
font-size: 32px;
width: 80px;
cursor: pointer;
box-shadow: 4px 4px 30px white;
}
.btn1 {
font-size: 14px !important;
background-color: rgb(252, 53, 53) !important;
padding-left: 5px;
}
span {
display: flex;
justify-content: center;
margin-top: 50px;
font-size: 30px;
color: white;
}
.todoList {
display:flex;
justify-content:center;
margin-top : 2%;
}
.todoList ul {
list-style-type: none;
margin-right: 30px;
color: white;
font-size: 26px;
font-weight: 500
}
.todoList ul li {
cursor: pointer;
}
.done {
color: rgb(190, 190, 190);
text-decoration: line-through
}
.note {
display: flex;
justify-content: center;
margin-top: 10px;
font-size: 14px;
color: white;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
<title>TodoApp</title>
</head>
<body>
<div class="mainInput">
<input type="text" class="input" id="input" placeholder="Enter your todo : ">
<button class="btn" id="btn">+</button><button class="btn btn1" id="removeBtn">RemoveAll</button>
</div>
<span> Todo list : </span>
<div class="todoList" id="todoList"></div>
<span class="note">Right click to make todo done</span>
<span class="note">dbl click to remove todo</span>
<script src="js/main.js"></script>
<script src="https://kit.fontawesome.com/a81368914c.js"></script>
</body>
</html>
Change your remove logic to this to empty everything inside your <ul>
removeBtn.addEventListener('click' , () => {
ulElement.innerHTML = "";
});
You can use remove the child to remove all child elements.
const input = document.getElementById('input');
const addBtn = document.getElementById('btn');
const removeBtn = document.getElementById('removeBtn')
const todoList = document.getElementById('todoList');
var ulElement = document.createElement('ul');
let placeholderValue = '';
// This code is for clear placeholder value
input.addEventListener('focus' , () => {
placeholderValue = input.placeholder;
input.placeholder = '';
});
input.addEventListener('blur' , ()=> {
input.placeholder = placeholderValue;
});
// this function is for add to do to a list
function addTodo(){
let liElements = document.createElement('li');
todoList.appendChild(ulElement);
ulElement.appendChild(liElements);
liElements.classList.add('liElement')
liElements.innerHTML = input.value;
// this code is for remove todo from the list
liElements.addEventListener('contextmenu' , (e)=> {
e.preventDefault();
liElements.classList.add('done');
});
liElements.addEventListener('dblclick' , (e) => {
e.preventDefault()
liElements.remove()
});
};
addBtn.addEventListener('click' , addTodo)
removeBtn.addEventListener('click' , () => {
while (ulElement.firstChild) ulElement.removeChild(ulElement.firstChild);
ulElement.remove()
});
#import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght#1,600&display=swap');
*{
margin: 0;
box-sizing: border-box;
font-family: 'Playfair Display', serif;
}
body{
background-color: #DC86A9;
}
.mainInput {
display: flex;
justify-content: center;
margin-top: 15%;
}
.mainInput input + button {
margin-left: 10px;
}
.mainInput input {
width: 500px;
height: 50px;
border: none;
border-radius: 50px;
box-shadow: 4px 4px 60px white;
padding: 25px;
}
.mainInput input::placeholder{
font-size: 22px;
text-align: center;
}
.mainInput button {
border-radius: 10px ;
background-color: rgb(102, 102, 255);
margin-left: 10px;
border: none;
border-radius: 550px;
color: white;
font-weight: 900;
font-size: 32px;
width: 80px;
cursor: pointer;
box-shadow: 4px 4px 30px white;
}
.btn1 {
font-size: 14px !important;
background-color: rgb(252, 53, 53) !important;
padding-left: 5px;
}
span {
display: flex;
justify-content: center;
margin-top: 50px;
font-size: 30px;
color: white;
}
.todoList {
display:flex;
justify-content:center;
margin-top : 2%;
}
.todoList ul {
list-style-type: none;
margin-right: 30px;
color: white;
font-size: 26px;
font-weight: 500
}
.todoList ul li {
cursor: pointer;
}
.done {
color: rgb(190, 190, 190);
text-decoration: line-through
}
.note {
display: flex;
justify-content: center;
margin-top: 10px;
font-size: 14px;
color: white;
}
<div class="mainInput">
<input type="text" class="input" id="input" placeholder="Enter your todo : ">
<button class="btn" id="btn">+</button><button class="btn btn1" id="removeBtn">RemoveAll</button>
</div>
<span> Todo list : </span>
<div class="todoList" id="todoList"></div>
<span class="note">Right click to make todo done</span>
<span class="note">dbl click to remove todo</span>
<script src="https://kit.fontawesome.com/a81368914c.js"></script>
You needed to simplify.
Here there is a static UL and the button empties it
const input = document.getElementById('input');
const addBtn = document.getElementById('btn');
const removeBtn = document.getElementById('removeBtn')
const todoList = document.getElementById('todoList');
let placeholderValue = '';
// This code is for clear placeholder value
input.addEventListener('focus', () => {
placeholderValue = input.placeholder;
input.placeholder = '';
});
input.addEventListener('blur', () => {
input.placeholder = placeholderValue;
});
// this function is for add to do to a list
function addTodo() {
let liElement = document.createElement('li');
liElement.classList.add('liElement')
liElement.innerHTML = input.value;
todoList.appendChild(liElement);
// this code is for remove todo from the list
liElement.addEventListener('contextmenu', (e) => {
e.preventDefault();
liElement.classList.add('done');
});
liElement.addEventListener('dblclick', (e) => {
e.preventDefault()
liElement.remove()
});
};
addBtn.addEventListener('click', addTodo)
removeBtn.addEventListener('click', () => {
document.getElementById("todoList").innerHTML = "";
});
#import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght#1,600&display=swap');
* {
margin: 0;
box-sizing: border-box;
font-family: 'Playfair Display', serif;
}
body {
background-color: #DC86A9;
}
.mainInput {
display: flex;
justify-content: center;
margin-top: 15%;
}
.mainInput input+button {
margin-left: 10px;
}
.mainInput input {
width: 500px;
height: 50px;
border: none;
border-radius: 50px;
box-shadow: 4px 4px 60px white;
padding: 25px;
}
.mainInput input::placeholder {
font-size: 22px;
text-align: center;
}
.mainInput button {
border-radius: 10px;
background-color: rgb(102, 102, 255);
margin-left: 10px;
border: none;
border-radius: 550px;
color: white;
font-weight: 900;
font-size: 32px;
width: 80px;
cursor: pointer;
box-shadow: 4px 4px 30px white;
}
.btn1 {
font-size: 14px !important;
background-color: rgb(252, 53, 53) !important;
padding-left: 5px;
}
span {
display: flex;
justify-content: center;
margin-top: 50px;
font-size: 30px;
color: white;
}
.todoList {
display: flex;
justify-content: center;
margin-top: 2%;
}
.todoList ul {
list-style-type: none;
margin-right: 30px;
color: white;
font-size: 26px;
font-weight: 500
}
.todoList ul li {
cursor: pointer;
}
.done {
color: rgb(190, 190, 190);
text-decoration: line-through
}
.note {
display: flex;
justify-content: center;
margin-top: 10px;
font-size: 14px;
color: white;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
<title>TodoApp</title>
</head>
<body>
<div class="mainInput">
<input type="text" class="input" id="input" placeholder="Enter your todo : ">
<button class="btn" id="btn">+</button><button class="btn btn1" id="removeBtn">RemoveAll</button>
</div>
<span> Todo list : </span>
<div class="todoList">
<ul id="todoList"></ul>
</div>
<span class="note">Right click to make todo done</span>
<span class="note">dbl click to remove todo</span>
<script src="js/main.js"></script>
<script src="https://kit.fontawesome.com/a81368914c.js"></script>
</body>
</html>
I'm creating lists which contain cards that are created by the user via forms.
The issue that I'm having here is that I want to show only 1 add-item-form form * on the page at a time (Not 1 form in each list but 1 form on the page overall). So, If a user creates multiple lists, then opens a form by clicking on the Add a card button, and then goes and click on another Add a card button from another list on the page, the first form should disappear, and a new form should appear in the list that it was clicked. Right now, multiple forms are being shown in different lists when I click the Add a card button, especially whenever I create multiple lists.
So basically, whenever Add a card is clicked, if a form is already open somewhere else, it will be closed and a new form will be opened within the list that I clicked the Add a card button.
I hope my explanation is useful. A sample of the code is shown below.
Here's a link to the code on [Codepen][https://codepen.io/Joanc/pen/MZjJvy]1.
Your help will be appreciated.
ATTENTION: I only want to change the cards form with class add-item-form not the list form with id add-list-form. The (grey) lists are fine, my only issue is with the cards.
// *************** ADD LISTS ***************
// add new list submit eventlistener
document.getElementById("add-list-form").addEventListener("submit", addList);
function addList(e) {
e.preventDefault();
const input = document.getElementById("list-name");
const name = input.value;
input.value = '';
if ('' == name) {
return;
}
const list = document.createElement('div');
list.setAttribute('class', 'list');
list.innerHTML =
`<div class="list-container">
<div class="list-heading" >
<h3 contenteditable="true">` + name + `</h3>
<div class= "ellipsis">…</div>
</div>
<div>
<div class="link-wrapper">
<a href="#" id="show-card-form" onclick="hideSHowForm('add-item-form', 'show-card-form');">
<span class="placeholder"><i class="fas fa-plus"></i> Add a card</span>
<span class="placeholder"><i class="fas fa-plus"></i> Add another card</span>
</a>
</div>
<form class="add-item-form">
<textarea placeholder="Enter a title for this card..."></textarea>
<div>
<input type="submit" value="Add Card">
<input type="button" value="X" onclick="hideSHowForm('add-item-form', 'show-card-form');">
<div class= "ellipsis">…</div>
</div>
</form>
</div>
</div>`;
document.getElementById("list-wrapper").appendChild(list);
}
// add new item submit eventlistener
document.addEventListener('submit', function(e) {
if (e.target.matches('.add-item-form')) {
e.preventDefault();
const textarea = e.target.getElementsByTagName('textarea')[0];
const text = textarea.value;
textarea.value = '';
if ('' == text) {
return;
}
//create card
const cardItem = document.createElement('p');
const card = document.createElement('div');
card.setAttribute('class', 'card');
//create pen icon
const pen = document.createElement('a');
pen.innerHTML = '<i class="fas fa-pen"></i>';
cardItem.innerHTML = text;
card.appendChild(cardItem)
card.appendChild(pen);
e.target.parentElement.prepend(card);
}
});
let spans = document.getElementsByClassName("placeholder");
//toggle between 'add a list' and 'add another list' links
window.onload = function(){
spans[1].style.display='none';
document.forms[0].style.display='none';
};
let clicked = 0;
//toggle between links and 'add-list-form'
function toggleDiv(formId, linkId){
clicked++;
if(document.getElementById( formId ).style.display == 'block'){
document.getElementById( formId ).style.display = 'none';
document.getElementById( linkId ).style.display = 'block';
}else{
document.getElementById( linkId ).style.display = 'none';
document.getElementById( formId ).style.display = 'block'
}if(clicked > 0) {
spans[0].style.display='none';
spans[1].style.display='block';
}
}
//toggle between links and 'add-list-form'
function hideSHowForm(form, link){
// var getForm = document.getElementsByClassName("listContainer");
for (var i=0;i<document.getElementsByClassName(form).length;i++){
// getForm[i].style.display = 'block';
if(document.getElementsByClassName(form )[i].style.display == 'block'){
document.getElementsByClassName(form)[i].style.display = 'none';
document.getElementById(link).style.display = 'block';
}else{
document.getElementById(link).style.display = 'none';
document.getElementsByClassName(form)[i].style.display = 'block'
}if(clicked > 0) {
spans[0].style.display='none';
spans[1].style.display='block';
}
}
}
// function showTitleAndCardSection(){
// var showCardSection = document.getElementsByClassName("listContainer");
// for (var i=0;i<showCardSection.length;i+=1){
// showCardSection [i].style.display = 'block';
// }
//}
/*************** ADD LISTS ***************/
.work-board {
background-color: transparent;
border-radius: 5px;
display: flex;
flex-direction: row;
}
#list-wrapper {
margin: 8px 5px 10px 0px;
padding: 2px;
border-radius: 4px;
background: transparent;
border: none;
display: flex;
flex-direction: row;
}
.list {
background: transparent;
}
.list-container {
padding: 4px 8px;
border-radius: 4px;
width: 256px;
background-color: rgb(226,228,230);
border: none;
margin: 2px 5px;
}
.list-heading {
display: flex;
flex-direction: row;
padding-bottom: 3px;
margin-bottom: 5px;
}
.list .list-heading h3 {
margin: 2px 3px 0px 0px;
width: 82%;
border-radius: 4px;
outline:none;
font-size: 14px;
font-weight: 600;
padding: 5px;
}
.list .list-heading h3:focus{
border: solid 2px rgb(91,164,207);
background-color: rgb(255, 255, 255);
}
.ellipsis {
/* display: inline-block; */
width: 30px;
text-align: center;
border-radius: 4px;
margin: 0px 1px 0px 0px;
padding: 0px;
float: right;
}
.ellipsis:hover {
background-color: rgba(131, 140, 145, 0.2)
}
form.add-item-form .ellipsis{
margin-top: 5px;
padding-bottom: 5px;
}
a {
text-decoration: none;
color: rgb(131, 140, 145);
font-size: 19px;
vertical-align:middle;
/* line-height:3px; */
text-align:center;
}
form#add-list-form {
margin-top: 12px;
width: 270px;
}
.form-inner-container {
background-color: rgb(226,228,230);
padding: 5px 5px 0px 5px;
border-radius: 4px;
}
input[type=text] {
height: 32px;
display: block;
border-radius: 4px;
border: solid 1px rgb(91,164,207);
width: 247px;
font-size: 14px;
outline: none;
box-shadow: 0 0 0 1px rgb(91,164,207);
word-wrap: break-word;
overflow: hidden;
color: rgb(131, 140, 145);
padding-left: 10px;
}
input[type=submit] {
outline: none;
font-size: 14px;
font-weight: 700;
color: rgb(255, 255, 255);
padding: 8px 13px;
background-color: rgb(90, 172, 68);
box-shadow: 0 1px 0 0 rgb(63, 111, 33);
border: none;
border-radius: 4px;
margin: 10px 0;
}
input[type=submit]:hover {
background-color: rgb(71, 138, 53);
}
input[type=button]{
margin-right: -5px;
border: none;
background-color: transparent;
font-size: 18px;
font-weight: 500;
color: rgb(131, 140, 145);
}
input[type=button]:hover{
color: rgb(103,109,112);
}
form.add-item-form {
margin-top: 20px;
}
form.add-item-form textarea {
outline: none;
width: 92%;
height: 50px;
max-height: 120px;
padding: 10px;
font-size: 14px;
box-shadow: 0px 1px 0px 0 rgba(1, 1, 1, 0.2);
border: none;
border-radius: 3px;
display: block;
word-wrap: break-word;
resize: none;
margin-top: -5px;
}
.card {
width: 92%;
box-shadow: 0px 1px 0px 0 rgba(1, 1, 1, 0.2);
border: none;
border-radius: 3px;
background-color: rgb(255, 255, 255);
min-height: 18px;
word-wrap: break-word;
padding: 0px 10px;
margin-top: 9px;
display: flex;
flex-direction: row;
position: relative;
}
.card:hover {
background-color: rgba(248,249,249,0.7);
}
.card p{
position: relative;
padding: 0px;
margin: 6px 0;
font-size: 14px;
z-index: 1;
}
.card a{
position: absolute;
margin-left: 220px;
z-index: 2;
}
.fa-pen {
font-size: 10px;
margin: 0;
padding: 7px;
border-radius: 4px;
}
.fa-pen:hover {
background-color: rgb(226,228,230);
}
#add-list-form, .add-item-form {
display: none;
}
.link-wrapper {
display: inline-block;
margin-top: 20px;
}
a#show-list-form {
text-decoration: none;
color: rgb(255, 255, 255);
background-color: rgba(1, 1, 1, 0.3);
padding: 10px 15px 10px 20px;
width: 242px;
text-align: left;
border-radius: 4px;
font-size: 14px;
height: 17px;
}
a#show-list-form:hover {
background-color: rgba(1, 1, 1, 0.4);
}
a#show-list-form span:first-child {
padding-right: 172px;
}
a#show-list-form span:nth-child(2), a#show-card-form span:nth-child(2){
display: none; /* hides the 'Add another link' when window loads */
}
<div class="board-wrapper">
<div id="workBoard" class="work-board">
<div id="list-wrapper"></div>
<div class="link-wrapper">
<a href="#" id="show-list-form" onclick="toggleDiv('add-list-form', 'show-list-form');">
<span class="placeholder"><i class="fas fa-plus"></i> Add a list</span>
<span class="placeholder"><i class="fas fa-plus"></i> Add another list</span>
</a>
</div>
<form id="add-list-form">
<div class="form-inner-container">
<input type="text" id="list-name" placeholder="Enter list title..." autocomplete="off">
<input type="submit" value="Add List">
<!-- <input type="button" onclick="toggleDiv('add-list-form', 'show-list-form');"><i class="fas fa-times"></i></input> -->
<input type="button" onclick="toggleDiv('add-list-form', 'show-list-form')" value="X">
</div>
</form>
</div>
</div><!-- end of board-wrapper -->
It happens because you iterate with for loop over all add-item-form elements and add those styles. You add inline events listeners in addList() and you are not able to specify which of those elements were actually clicked, since you can't catch an event. I know how frustrating it may sound to you but I would recommend trying to write it all over again but keeping good practices. I advise you to use innerHTML as little you can, don't add inline styles to HTML in JS. Rather create classes that match your expectations like shown, hidden, style them and add them to events. Also use addEventListener instead of adding onclick() in HTML. You are really close to getting what you want, but its pretty messed up in this form.
Edit: The simplest workaround I can give you is this, but there is still much work to be done there:
// *************** ADD LISTS ***************
// add new list submit eventlistener
document.getElementById("add-list-form").addEventListener("submit", addList);
//Declaring index
var listIndex = 0
function addList(e) {
e.preventDefault();
const input = document.getElementById("list-name");
const name = input.value;
input.value = '';
if ('' == name) {
return;
}
const list = document.createElement('div');
list.setAttribute('class', 'list');
list.innerHTML =
`<div class="list-container">
<div class="list-heading" >
<h3 contenteditable="true">` + name + `</h3>
<div class= "ellipsis">…</div>
</div>
<div>
<div class="link-wrapper">
<a href="#" id="show-card-form" onclick="hideSHowForm('add-item-form', 'show-card-form', ` + listIndex + `);">
<span class="placeholder"><i class="fas fa-plus"></i> Add a card</span>
<span class="placeholder"><i class="fas fa-plus"></i> Add another card</span>
</a>
</div>
<form class="add-item-form">
<textarea placeholder="Enter a title for this card..."></textarea>
<div>
<input type="submit" value="Add Card">
<input type="button" value="X" onclick="hideSHowForm('add-item-form', 'show-card-form');">
<div class= "ellipsis">…</div>
</div>
</form>
</div>
</div>`;
//Increasing index
listIndex++
document.getElementById("list-wrapper").appendChild(list);
}
// add new item submit eventlistener
document.addEventListener('submit', function(e) {
if (e.target.matches('.add-item-form')) {
e.preventDefault();
const textarea = e.target.getElementsByTagName('textarea')[0];
const text = textarea.value;
textarea.value = '';
if ('' == text) {
return;
}
//create card
const cardItem = document.createElement('p');
const card = document.createElement('div');
card.setAttribute('class', 'card');
//create pen icon
const pen = document.createElement('a');
pen.innerHTML = '<i class="fas fa-pen"></i>';
cardItem.innerHTML = text;
card.appendChild(cardItem)
card.appendChild(pen);
e.target.parentElement.prepend(card);
}
});
let spans = document.getElementsByClassName("placeholder");
//toggle between 'add a list' and 'add another list' links
window.onload = function(){
spans[1].style.display='none';
document.forms[0].style.display='none';
};
let clicked = 0;
//toggle between links and 'add-list-form'
function toggleDiv(formId, linkId){
clicked++;
if(document.getElementById( formId ).style.display == 'block'){
document.getElementById( formId ).style.display = 'none';
document.getElementById( linkId ).style.display = 'block';
}else{
document.getElementById( linkId ).style.display = 'none';
document.getElementById( formId ).style.display = 'block'
}if(clicked > 0) {
spans[0].style.display='none';
spans[1].style.display='block';
}
}
document.getElementsByClassName('')
//toggle between links and 'add-list-form'
function hideSHowForm(form, link, id){
// var getForm = document.getElementsByClassName("listContainer");
// getForm[i].style.display = 'block';
if(document.getElementsByClassName(form)[id].style.display == 'block'){
document.getElementsByClassName(form)[id].style.display = 'none';
document.getElementById(link).style.display = 'block';
}else{
document.getElementById(link).style.display = 'none';
document.getElementsByClassName(form)[id].style.display = 'block'
}if(clicked > 0) {
spans[0].style.display='none';
spans[1].style.display='block';
}
}
// function showTitleAndCardSection(){
// var showCardSection = document.getElementsByClassName("listContainer");
// for (var i=0;i<showCardSection.length;i+=1){
// showCardSection [i].style.display = 'block';
// }
/*************** ADD LISTS ***************/
.work-board {
background-color: transparent;
border-radius: 5px;
display: flex;
flex-direction: row;
}
#list-wrapper {
margin: 8px 5px 10px 0px;
padding: 2px;
border-radius: 4px;
background: transparent;
border: none;
display: flex;
flex-direction: row;
}
.list {
background: transparent;
}
.list-container {
padding: 4px 8px;
border-radius: 4px;
width: 256px;
background-color: rgb(226,228,230);
border: none;
margin: 2px 5px;
}
.list-heading {
display: flex;
flex-direction: row;
padding-bottom: 3px;
margin-bottom: 5px;
}
.list .list-heading h3 {
margin: 2px 3px 0px 0px;
width: 82%;
border-radius: 4px;
outline:none;
font-size: 14px;
font-weight: 600;
padding: 5px;
}
.list .list-heading h3:focus{
border: solid 2px rgb(91,164,207);
background-color: rgb(255, 255, 255);
}
.ellipsis {
/* display: inline-block; */
width: 30px;
text-align: center;
border-radius: 4px;
margin: 0px 1px 0px 0px;
padding: 0px;
float: right;
}
.ellipsis:hover {
background-color: rgba(131, 140, 145, 0.2)
}
form.add-item-form .ellipsis{
margin-top: 5px;
padding-bottom: 5px;
}
a {
text-decoration: none;
color: rgb(131, 140, 145);
font-size: 19px;
vertical-align:middle;
/* line-height:3px; */
text-align:center;
}
form#add-list-form {
margin-top: 12px;
width: 270px;
}
.form-inner-container {
background-color: rgb(226,228,230);
padding: 5px 5px 0px 5px;
border-radius: 4px;
}
input[type=text] {
height: 32px;
display: block;
border-radius: 4px;
border: solid 1px rgb(91,164,207);
width: 247px;
font-size: 14px;
outline: none;
box-shadow: 0 0 0 1px rgb(91,164,207);
word-wrap: break-word;
overflow: hidden;
color: rgb(131, 140, 145);
padding-left: 10px;
}
input[type=submit] {
outline: none;
font-size: 14px;
font-weight: 700;
color: rgb(255, 255, 255);
padding: 8px 13px;
background-color: rgb(90, 172, 68);
box-shadow: 0 1px 0 0 rgb(63, 111, 33);
border: none;
border-radius: 4px;
margin: 10px 0;
}
input[type=submit]:hover {
background-color: rgb(71, 138, 53);
}
input[type=button]{
margin-right: -5px;
border: none;
background-color: transparent;
font-size: 18px;
font-weight: 500;
color: rgb(131, 140, 145);
}
input[type=button]:hover{
color: rgb(103,109,112);
}
form.add-item-form {
margin-top: 20px;
}
form.add-item-form textarea {
outline: none;
width: 92%;
height: 50px;
max-height: 120px;
padding: 10px;
font-size: 14px;
box-shadow: 0px 1px 0px 0 rgba(1, 1, 1, 0.2);
border: none;
border-radius: 3px;
display: block;
word-wrap: break-word;
resize: none;
margin-top: -5px;
}
.card {
width: 92%;
box-shadow: 0px 1px 0px 0 rgba(1, 1, 1, 0.2);
border: none;
border-radius: 3px;
background-color: rgb(255, 255, 255);
min-height: 18px;
word-wrap: break-word;
padding: 0px 10px;
margin-top: 9px;
display: flex;
flex-direction: row;
position: relative;
}
.card:hover {
background-color: rgba(248,249,249,0.7);
}
.card p{
position: relative;
padding: 0px;
margin: 6px 0;
font-size: 14px;
z-index: 1;
}
.card a{
position: absolute;
margin-left: 220px;
z-index: 2;
}
.fa-pen {
font-size: 10px;
margin: 0;
padding: 7px;
border-radius: 4px;
}
.fa-pen:hover {
background-color: rgb(226,228,230);
}
#add-list-form, .add-item-form {
display: none;
}
.link-wrapper {
display: inline-block;
margin-top: 20px;
}
a#show-list-form {
text-decoration: none;
color: rgb(255, 255, 255);
background-color: rgba(1, 1, 1, 0.3);
padding: 10px 15px 10px 20px;
width: 242px;
text-align: left;
border-radius: 4px;
font-size: 14px;
height: 17px;
}
a#show-list-form:hover {
background-color: rgba(1, 1, 1, 0.4);
}
a#show-list-form span:first-child {
padding-right: 172px;
}
a#show-list-form span:nth-child(2), a#show-card-form span:nth-child(2){
display: none; /* hides the 'Add another link' when window loads */
}
<div class="board-wrapper">
<div id="workBoard" class="work-board">
<div id="list-wrapper"></div>
<div class="link-wrapper">
<a href="#" id="show-list-form" onclick="toggleDiv('add-list-form', 'show-list-form');">
<span class="placeholder"><i class="fas fa-plus"></i> Add a list</span>
<span class="placeholder"><i class="fas fa-plus"></i> Add another list</span>
</a>
</div>
<form id="add-list-form">
<div class="form-inner-container">
<input type="text" id="list-name" placeholder="Enter list title..." autocomplete="off">
<input type="submit" value="Add List">
<!-- <input type="button" onclick="toggleDiv('add-list-form', 'show-list-form');"><i class="fas fa-times"></i></input> -->
<input type="button" onclick="toggleDiv('add-list-form', 'show-list-form')" value="X">
</div>
</form>
</div>
</div><!-- end of board-wrapper -->
Just add these two lines above your const list = document.createElement('div'); line inside your addList() function like this:
var listWrap = document.getElementById("list-wrapper");
listWrap.innerHTML = "";
What the above does is assign the list-wrapper div to a variable called listWrap and then reset the list-wrapper div to an empty div whenever someone tries to submit a new form. After emptying the list-wrapper div, the function then proceeds to add the new "add-item-form form" submitted to the empty list-wrapper div.
Run the Code Snippet below to see how the above two lines work:
// *************** ADD LISTS ***************
// add new list submit eventlistener
document.getElementById("add-list-form").addEventListener("submit", addList);
function addList(e) {
e.preventDefault();
const input = document.getElementById("list-name");
const name = input.value;
input.value = '';
if ('' == name) {
return;
}
var listWrap = document.getElementById("list-wrapper");
listWrap.innerHTML = "";
const list = document.createElement('div');
list.setAttribute('class', 'list');
list.innerHTML =
`<div class="list-container">
<div class="list-heading" >
<h3 contenteditable="true">` + name + `</h3>
<div class= "ellipsis">…</div>
</div>
<div>
<div class="link-wrapper">
<a href="#" id="show-card-form" onclick="hideSHowForm('add-item-form', 'show-card-form');">
<span class="placeholder"><i class="fas fa-plus"></i> Add a card</span>
<span class="placeholder"><i class="fas fa-plus"></i> Add another card</span>
</a>
</div>
<form class="add-item-form">
<textarea placeholder="Enter a title for this card..."></textarea>
<div>
<input type="submit" value="Add Card">
<input type="button" value="X" onclick="hideSHowForm('add-item-form', 'show-card-form');">
<div class= "ellipsis">…</div>
</div>
</form>
</div>
</div>`;
document.getElementById("list-wrapper").appendChild(list);
}
// add new item submit eventlistener
document.addEventListener('submit', function(e) {
if (e.target.matches('.add-item-form')) {
e.preventDefault();
const textarea = e.target.getElementsByTagName('textarea')[0];
const text = textarea.value;
textarea.value = '';
if ('' == text) {
return;
}
//create card
const cardItem = document.createElement('p');
const card = document.createElement('div');
card.setAttribute('class', 'card');
//create pen icon
const pen = document.createElement('a');
pen.innerHTML = '<i class="fas fa-pen"></i>';
cardItem.innerHTML = text;
card.appendChild(cardItem)
card.appendChild(pen);
e.target.parentElement.prepend(card);
}
});
let spans = document.getElementsByClassName("placeholder");
//toggle between 'add a list' and 'add another list' links
window.onload = function(){
spans[1].style.display='none';
document.forms[0].style.display='none';
};
let clicked = 0;
//toggle between links and 'add-list-form'
function toggleDiv(formId, linkId){
clicked++;
if(document.getElementById( formId ).style.display == 'block'){
document.getElementById( formId ).style.display = 'none';
document.getElementById( linkId ).style.display = 'block';
}else{
document.getElementById( linkId ).style.display = 'none';
document.getElementById( formId ).style.display = 'block'
}if(clicked > 0) {
spans[0].style.display='none';
spans[1].style.display='block';
}
}
//toggle between links and 'add-list-form'
function hideSHowForm(form, link){
// var getForm = document.getElementsByClassName("listContainer");
for (var i=0;i<document.getElementsByClassName(form).length;i++){
// getForm[i].style.display = 'block';
if(document.getElementsByClassName(form )[i].style.display == 'block'){
document.getElementsByClassName(form)[i].style.display = 'none';
document.getElementById(link).style.display = 'block';
}else{
document.getElementById(link).style.display = 'none';
document.getElementsByClassName(form)[i].style.display = 'block'
}if(clicked > 0) {
spans[0].style.display='none';
spans[1].style.display='block';
}
}
}
// function showTitleAndCardSection(){
// var showCardSection = document.getElementsByClassName("listContainer");
// for (var i=0;i<showCardSection.length;i+=1){
// showCardSection [i].style.display = 'block';
// }
//}
/*************** ADD LISTS ***************/
.work-board {
background-color: transparent;
border-radius: 5px;
display: flex;
flex-direction: row;
}
#list-wrapper {
margin: 8px 5px 10px 0px;
padding: 2px;
border-radius: 4px;
background: transparent;
border: none;
display: flex;
flex-direction: row;
}
.list {
background: transparent;
}
.list-container {
padding: 4px 8px;
border-radius: 4px;
width: 256px;
background-color: rgb(226,228,230);
border: none;
margin: 2px 5px;
}
.list-heading {
display: flex;
flex-direction: row;
padding-bottom: 3px;
margin-bottom: 5px;
}
.list .list-heading h3 {
margin: 2px 3px 0px 0px;
width: 82%;
border-radius: 4px;
outline:none;
font-size: 14px;
font-weight: 600;
padding: 5px;
}
.list .list-heading h3:focus{
border: solid 2px rgb(91,164,207);
background-color: rgb(255, 255, 255);
}
.ellipsis {
/* display: inline-block; */
width: 30px;
text-align: center;
border-radius: 4px;
margin: 0px 1px 0px 0px;
padding: 0px;
float: right;
}
.ellipsis:hover {
background-color: rgba(131, 140, 145, 0.2)
}
form.add-item-form .ellipsis{
margin-top: 5px;
padding-bottom: 5px;
}
a {
text-decoration: none;
color: rgb(131, 140, 145);
font-size: 19px;
vertical-align:middle;
/* line-height:3px; */
text-align:center;
}
form#add-list-form {
margin-top: 12px;
width: 270px;
}
.form-inner-container {
background-color: rgb(226,228,230);
padding: 5px 5px 0px 5px;
border-radius: 4px;
}
input[type=text] {
height: 32px;
display: block;
border-radius: 4px;
border: solid 1px rgb(91,164,207);
width: 247px;
font-size: 14px;
outline: none;
box-shadow: 0 0 0 1px rgb(91,164,207);
word-wrap: break-word;
overflow: hidden;
color: rgb(131, 140, 145);
padding-left: 10px;
}
input[type=submit] {
outline: none;
font-size: 14px;
font-weight: 700;
color: rgb(255, 255, 255);
padding: 8px 13px;
background-color: rgb(90, 172, 68);
box-shadow: 0 1px 0 0 rgb(63, 111, 33);
border: none;
border-radius: 4px;
margin: 10px 0;
}
input[type=submit]:hover {
background-color: rgb(71, 138, 53);
}
input[type=button]{
margin-right: -5px;
border: none;
background-color: transparent;
font-size: 18px;
font-weight: 500;
color: rgb(131, 140, 145);
}
input[type=button]:hover{
color: rgb(103,109,112);
}
form.add-item-form {
margin-top: 20px;
}
form.add-item-form textarea {
outline: none;
width: 92%;
height: 50px;
max-height: 120px;
padding: 10px;
font-size: 14px;
box-shadow: 0px 1px 0px 0 rgba(1, 1, 1, 0.2);
border: none;
border-radius: 3px;
display: block;
word-wrap: break-word;
resize: none;
margin-top: -5px;
}
.card {
width: 92%;
box-shadow: 0px 1px 0px 0 rgba(1, 1, 1, 0.2);
border: none;
border-radius: 3px;
background-color: rgb(255, 255, 255);
min-height: 18px;
word-wrap: break-word;
padding: 0px 10px;
margin-top: 9px;
display: flex;
flex-direction: row;
position: relative;
}
.card:hover {
background-color: rgba(248,249,249,0.7);
}
.card p{
position: relative;
padding: 0px;
margin: 6px 0;
font-size: 14px;
z-index: 1;
}
.card a{
position: absolute;
margin-left: 220px;
z-index: 2;
}
.fa-pen {
font-size: 10px;
margin: 0;
padding: 7px;
border-radius: 4px;
}
.fa-pen:hover {
background-color: rgb(226,228,230);
}
#add-list-form, .add-item-form {
display: none;
}
.link-wrapper {
display: inline-block;
margin-top: 20px;
}
a#show-list-form {
text-decoration: none;
color: rgb(255, 255, 255);
background-color: rgba(1, 1, 1, 0.3);
padding: 10px 15px 10px 20px;
width: 242px;
text-align: left;
border-radius: 4px;
font-size: 14px;
height: 17px;
}
a#show-list-form:hover {
background-color: rgba(1, 1, 1, 0.4);
}
a#show-list-form span:first-child {
padding-right: 172px;
}
a#show-list-form span:nth-child(2), a#show-card-form span:nth-child(2){
display: none; /* hides the 'Add another link' when window loads */
}
<div class="board-wrapper">
<div id="workBoard" class="work-board">
<div id="list-wrapper"></div>
<div class="link-wrapper">
<a href="#" id="show-list-form" onclick="toggleDiv('add-list-form', 'show-list-form');">
<span class="placeholder"><i class="fas fa-plus"></i> Add a list</span>
<span class="placeholder"><i class="fas fa-plus"></i> Add another list</span>
</a>
</div>
<form id="add-list-form">
<div class="form-inner-container">
<input type="text" id="list-name" placeholder="Enter list title..." autocomplete="off">
<input type="submit" value="Add List">
<!-- <input type="button" onclick="toggleDiv('add-list-form', 'show-list-form');"><i class="fas fa-times"></i></input> -->
<input type="button" onclick="toggleDiv('add-list-form', 'show-list-form')" value="X">
</div>
</form>
</div>
</div><!-- end of board-wrapper -->