I am trying to insert an HTML element (in my file it is called "baseketTotal"). This element is something like a checkout form that has the total price and etc... The thing is that I am trying to put it only on the last movie in the list which I add to the bag.
In this link, it is a picture of how it looks now. So I need to display it only on the last movie, no matter if the list has 1,2, or 10 movies. Only on the last one.
HTML
<!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" />
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD#48,400,0,0"
/>
<link rel="stylesheet" href="style.css" />
<title>Filmovizija</title>
</head>
<body>
<h1>Filmovizija</h1>
<div class="prozor"></div>
<h2>Shooping bag</h2>
<div class="shooping-cart"></div>
<script src="script.js"></script>
</body>
</html>
css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #22254b;
font-family: "Poppins", sans-serif;
}
h1 {
text-align: center;
color: #eee;
font-family: inherit;
margin-top: 30px;
margin-bottom: 30px;
}
.prozor {
display: flex;
flex-wrap: wrap;
}
.movie {
width: 300px;
border-radius: 4px;
box-shadow: 0 4px 5px rgba(0, 0, 0, 0.3);
background-color: #373b69;
margin: 25px;
}
.movie-info {
color: #eee;
display: flex;
justify-content: space-between;
padding: 10px;
letter-spacing: 1px;
align-items: center;
}
.movie img {
width: 100%;
border-bottom: 1px solid white;
height: 450px;
}
.movie-info h3 {
font-weight: 300;
margin: 0;
}
.movie-info span {
font-weight: 400;
border-radius: 3px;
background-color: #22254b;
padding: 3px 7px;
}
.movie .kupi {
color: #eee;
display: flex;
justify-content: space-between;
padding: 10px;
padding-bottom: 15px;
letter-spacing: 1px;
align-items: center;
}
.movie .kupi button {
padding: 2px 8px;
font-size: 14px;
font-weight: 500;
}
.movie .kupi span {
font-size: 18px;
font-weight: 500;
}
/* ----------------------------------- SHOOPING CART ------------------------------------------------ */
.shooping-cart {
border-top: 2px solid rgb(214, 214, 214);
width: 1000px;
height: 500px;
margin-left: 25px;
}
h2 {
color: whitesmoke;
text-transform: uppercase;
font-size: 20px;
font-weight: 300;
margin-bottom: 20px;
margin-left: 25px;
}
.shooping-cart .single-item {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px;
border-bottom: 2px dotted grey;
}
.shooping-cart .single-item span {
background-color: rgb(255, 255, 255);
margin-left: 20px;
border-radius: 50%;
color: black;
}
.smallPic {
height: 70px;
width: 70px;
border: 1px solid grey;
}
.shooping-cart .single-item .opis {
align-items: center;
display: flex;
flex-direction: column;
color: white;
font-family: inherit;
}
.shooping-cart .single-item .opis h2 {
font-weight: 300;
margin-bottom: 5px;
}
.shooping-cart .single-item .opis h3 {
font-size: 14px;
font-weight: bold;
color: antiquewhite;
text-transform: uppercase;
}
.shooping-cart .single-item .kolicina input {
width: 30px;
text-align: center;
}
.shooping-cart .single-item .kolicina button {
padding: 2px 6px;
background-color: whitesmoke;
border: 0;
}
.single-total {
color: white;
margin-right: 20px;
}
/* ----------------------------------- SHOOPING CART TOTAL ALL ------------------------------------------------ */
.totalKosara {
float: right;
display: flex;
flex-direction: column;
width: 350px;
height: 160px;
margin-top: 15px;
}
.potvrdi {
display: flex;
width: 100%;
margin: 20px 0;
justify-content: space-between;
text-align: center;
}
.potvrdi .sub,
.price {
color: #eee;
font-weight: bold;
padding: 5px;
}
.text {
color: white;
font-size: 14px;
text-align: center;
}
.blue {
width: 100%;
align-items: center;
display: flex;
justify-content: center;
margin-top: 30px;
}
.blue button {
width: 100%;
border-radius: 2px;
border: 0;
padding: 10px;
background-color: #0b1050;
color: #eee;
font-family: inherit;
border: 1px solid grey;
}
scriptJS
const options = {
method: "GET",
headers: {
"X-RapidAPI-Key": "cd782e9b03mshbd50bac036f1802p16179djsn48c38f33f263",
"X-RapidAPI-Host": "online-movie-database.p.rapidapi.com",
},
};
const main = document.querySelector(`.prozor`);
const shoopingCart = document.querySelector(`.shooping-cart`);
const checkoutBtn = document.querySelector(`.checkoutBtn`);
fetch(
"https://online-movie-database.p.rapidapi.com/auto-complete?q=hacker",
options
)
.then((response) => response.json())
.then((data) => {
const list = data.d;
list.map((item) => {
const name = item.l;
const rank = item.rank;
const price = Math.floor(rank / 100);
const poster = item.i.imageUrl;
const movie = ` <div class="movie">
<img src=${poster} alt="${name}" />
<div class="movie-info">
<h3>${name}</h3>
<span>#${rank}</span>
</div>
<div class="kupi">
<button class="addToBag">Kupi film</button>
<span>${price} HRK</span>
</div>
</div>`;
main.innerHTML += movie;
//---------------------------------- add to basket --------------------------//
const button = document.querySelectorAll(`.addToBag`);
button.forEach((button) => {
button.addEventListener(`click`, function (e) {
const clicked = e.target;
const kupi = clicked.closest(`.kupi`);
const cijena2 = kupi.querySelector(`span`).innerText;
const cijena = cijena2.split(` `)[0];
const parent = kupi.closest(`.movie`);
const imeFilma = parent.querySelector(`.movie-info h3`).innerText;
const imgSrc = parent.querySelector(`img`).src;
const singleItem = `
<div class="single-item">
<span class="material-symbols-outlined deleteItem"> close </span>
<img src=${imgSrc} alt="aaa" class="smallPic" />
<div class="opis">
<h2>${imeFilma}</h2>
</div>
<div class="kolicina">
<button class="plus">+</button>
<input type="text" value="1" max="3" min="1" class="input"/>
<button class="minus">-</button>
</div>
<div class="single-total" data-value="${cijena}">${cijena} KN</div>
</div>
`;
shoopingCart.innerHTML += singleItem;
const basketTotal = `
<div class="totalKosara vidljivo">
<div class="potvrdi">
<p class="sub">Subtotal</p>
<p class="price">675 KN</p>
</div>
<div class="text">
<p>Shipping, taxes and discounts calculated at checkout.</p>
</div>
<div class="blue"><button>Checkout</button></div>
</div>
`;
const removeElement = function () {
const nodes = document.querySelectorAll(`.single-item`);
let lastNode = nodes[nodes.length - 1];
console.log(lastNode);
};
removeElement();
//OBRISI ITEM
const deleteItem = document.querySelectorAll(`.deleteItem`);
deleteItem.forEach((btn) => {
btn.addEventListener(`click`, function (e) {
const mainEl = e.target.closest(`.single-item`);
mainEl.parentNode.removeChild(mainEl);
button.disabled = false;
});
});
//add more movies btn
const plusBtn = document.querySelectorAll(`.plus`);
const minusBtn = document.querySelectorAll(`.minus`);
plusBtn.forEach((btn) => {
btn.addEventListener(`click`, function (e) {
let plus = e.target;
let parent = plus.closest(`.kolicina`);
let input = parent.querySelector(`.input`);
let singleEl = parent.closest(`.single-item`);
let singleTotal = singleEl.querySelector(`.single-total`);
input.value++;
if (input.value > 3) input.value = 3;
singleTotal.innerText = `${
singleTotal.dataset.value * input.value
} KN`;
});
});
minusBtn.forEach((btn) => {
btn.addEventListener(`click`, function (e) {
let plus = e.target;
let parent = plus.closest(`.kolicina`);
let input = parent.querySelector(`.input`);
let singleEl = parent.closest(`.single-item`);
let singleTotal = singleEl.querySelector(`.single-total`);
input.value--;
console.log(input.innerText);
if (input.value < 1) input.value = 1;
singleTotal.innerText = `${
singleTotal.dataset.value * input.value
} KN`;
});
});
});
});
});
})
.catch(
(err) => console.error(err));
I couldn't understand clearly what you are trying to say. But as far as considered to append a child to parent div you can use
parentDiv.appendChild(childElement);
Appreciate it if you can make the question more understable.
Related
I am trying to create a Library and add information that is entered into my form (form is in popup window) to appear in a div (bookCard) within my grid. I was able to create an eventListener for the submit button and make my div (bookCard) appear. However, I am unable to display the input from my form on the bookCard div. How can I add to the function to make the inputs appear and display there when it is entered? Is there something I am missing within the addBookToLibrary function?
Thank you in advance for your help.
HTML
<!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">
<!----GitHub icon-->
<script
src="https://kit.fontawesome.com/4c536a6bd5.js"
crossorigin="anonymous"></script>
<!----------Font Below ---------------->
<link rel="stylesheet" href="https://use.typekit.net/jmq2vxa.css">
<link rel="stylesheet" href="styles.css">
<link rel="icon" type="image/png" href="images/open-book.png"/>
<title>My Library</title>
</head>
<body>
<div class="head-box">
<h1>My Library</h1>
</div>
<main class ="main-container">
<div class="body-box">
<button id="addBook">Add Book</button>
</div>
<div class="books-grid" id="booksGrid">
<div class="library-container" id="library-container"></div>
</div>
</main>
<!-----Form information----->
<div class="form-popup">
<div class="form-content"
<form action="example.com/path" class="form-container" id="popUpForm">
<h3>add new book</h3>
<input class="input" type="text" id="title" placeholder="Title" required maxlength="100">
<input type="author" id="author" placeholder="Author" required maxlength="100">
<input type="number" id="pages" placeholder="Pages" required max="10000">
<div class="isRead">
<label for="readOption">Have you read it?</label>
<input type="checkbox" id="readOption" name="readOption">
</div>
<button class="btn submit" type="submit" id="submit">Submit</button>
</form>
</div>
</div>
<div id="overlay"></div>
<div id="invisibleDiv"></div>
</body>
</html>
CSS
/*CSS RESET*/
* {
margin:0;
padding:0;
}
h1 {
font-family: ohno-blazeface, sans-serif;
font-weight: 100;
font-style: normal;
font-size: 8vh;
color: #001D4A;
}
.head-box {
background-color: #9DD1F1;
display: flex;
align-items: center;
justify-content: center;
height: 20vh;
border-bottom: 2px solid #e0f3ff;
}
h2 {
font-family: poppins, sans-serif;
font-weight: 300;
font-style: normal;
font-size: 5vh;
color: #001D4A;
}
h3 {
font-family: ohno-blazeface, sans-serif;
font-weight: 100;
font-style: normal;
font-size: 4vh;
color: #001D4A;
}
button {
height: 10vh;
width: 20vh;
min-width: 20vh;
min-height: 10vh;
font-size: 3vh;
background-color: #27476E;
border-radius: 22px;
border-style: none;
font-family: poppins, sans-serif;
font-weight: 300;
font-style: normal;
color:#ffffff;
}
button:hover {
background-color: #192c44;
}
body {
min-height: 100vh;
background: linear-gradient(180deg,#d0edff,#9DD1F1) no-repeat;
}
.body-box {
margin: 3vh;
display: flex;
justify-content: center;
}
/* The pop up form - hidden by default */
.form-popup {
display: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 9;
}
.form-content {
text-align: center;
border-radius: 20px;
width: 30vh;
height: auto;
border: 3px solid #001D4A;
padding: 20px;
background-color: #9DD1F1;
gap: 10px;
}
.form-container {
min-width: 20vh;
min-height: 50vh;
}
.isRead{
display: flex;
height: 30px;
width: 100%;
margin: 2px;
align-items: center;
justify-content: center;
}
label {
font-family: poppins, sans-serif;
font-weight: 600;
font-style: normal;
font-size: 2.5vh;
}
input {
border-radius: 10px;
height: 50px;
margin: 3px;
width: 100%;
padding: 4px;
background-color: #d0edff;
border: none;
font-family: poppins, sans-serif;
font-weight: 300;
font-size: 2.5vh;
}
#submit {
margin-top: 4px;
height: 20px;
width: 100%;
border-radius: 15px;
color: #ffffff;
border: none;
}
input[type=checkbox] {
width: 20px;
margin: 10px;
}
#invisibleDiv {
position: fixed;
height: 100%;
width: 100%;
}
#overlay {
position: fixed;
top: 0;
left: 0;
display: none;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
}
.books-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
/* BOOK CARD */
#library-container {
display: none;
height: 50vh;
width: 50vh;
border-radius: 15px;
border: 5px solid #ffffff;
background-color: #d0edff;
flex-direction: column;
justify-content: space-between;
margin: 28px;
}
JS
class book {
constructor(title, author, pages, read) {
this.title = form.title.value;
this.author = form.author.value;
this.pages = form.pages.value + 'pages';
this.read = form.read.checked;
}
}
//creates book from Book Constructor, adds to library
let myLibrary = [];
function addBookToLibrary(book) {
const bookTitle = document.getElementById('title').value;
const bookAuthor = document.getElementById('author').value;
const bookPages = document.getElementById('pages').value;
}
// User interface //
const popUpForm = document.querySelector('.form-popup');
const button = document.getElementById('addBook');
const overlay = document.getElementById('overlay');
const booksGrid = document.getElementById('booksGrid');
const bookCard = document.querySelector('.library-container');
const form = document.querySelector('.form-container');
const submitBtn = document.getElementById('submit');
// Form Pop Up function //
document.getElementById('invisibleDiv').onclick = function()
{
popUpForm.style.display = "none";
overlay.style.display = "none";
};
button.addEventListener("click", () => {
popUpForm.style.display = "block";
overlay.style.display = "block";
});
// Submit Button Event Listener (displays bookCard) //
submitBtn.addEventListener("click", () => {
bookCard.style.display = "block";
popUpForm.style.display = "none";
overlay.style.display = "none";
addBookToLibrary();
});
Check this out, it should help.
Good luck
<!-- https://codepen.io/bradtraversy/pen/OrmKWZ -->
OR
<!-- https://codepen.io/fun/pen/PPVwBY -->
This is on-going, unfinish answer. The code in the question is put into live mode for investigation purposes.
Any reader may try to edit/run to get a solution.
class book {
constructor(title, author, pages, read) {
this.title = form.title.value;
this.author = form.author.value;
this.pages = form.pages.value + 'pages';
this.read = form.read.checked;
}
}
//creates book from Book Constructor, adds to library
let myLibrary = [];
function addBookToLibrary(book) {
const bookTitle = document.getElementById('title').value;
const bookAuthor = document.getElementById('author').value;
const bookPages = document.getElementById('pages').value;
}
// User interface //
const popUpForm = document.querySelector('.form-popup');
const button = document.getElementById('addBook');
const overlay = document.getElementById('overlay');
const booksGrid = document.getElementById('booksGrid');
const bookCard = document.querySelector('.library-container');
const form = document.querySelector('.form-container');
const submitBtn = document.getElementById('submit');
// Form Pop Up function //
document.getElementById('invisibleDiv').onclick = function()
{
popUpForm.style.display = "none";
overlay.style.display = "none";
};
button.addEventListener("click", () => {
popUpForm.style.display = "block";
overlay.style.display = "block";
});
// Submit Button Event Listener (displays bookCard) //
submitBtn.addEventListener("click", () => {
bookCard.style.display = "block";
popUpForm.style.display = "none";
overlay.style.display = "none";
addBookToLibrary();
});
/*CSS RESET*/
* {
margin:0;
padding:0;
}
h1 {
font-family: ohno-blazeface, sans-serif;
font-weight: 100;
font-style: normal;
font-size: 8vh;
color: #001D4A;
}
.head-box {
background-color: #9DD1F1;
display: flex;
align-items: center;
justify-content: center;
height: 20vh;
border-bottom: 2px solid #e0f3ff;
}
h2 {
font-family: poppins, sans-serif;
font-weight: 300;
font-style: normal;
font-size: 5vh;
color: #001D4A;
}
h3 {
font-family: ohno-blazeface, sans-serif;
font-weight: 100;
font-style: normal;
font-size: 4vh;
color: #001D4A;
}
button {
height: 10vh;
width: 20vh;
min-width: 20vh;
min-height: 10vh;
font-size: 3vh;
background-color: #27476E;
border-radius: 22px;
border-style: none;
font-family: poppins, sans-serif;
font-weight: 300;
font-style: normal;
color:#ffffff;
}
button:hover {
background-color: #192c44;
}
body {
min-height: 100vh;
background: linear-gradient(180deg,#d0edff,#9DD1F1) no-repeat;
}
.body-box {
margin: 3vh;
display: flex;
justify-content: center;
}
/* The pop up form - hidden by default */
.form-popup {
display: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 9;
}
.form-content {
text-align: center;
border-radius: 20px;
width: 30vh;
height: auto;
border: 3px solid #001D4A;
padding: 20px;
background-color: #9DD1F1;
gap: 10px;
}
.form-container {
min-width: 20vh;
min-height: 50vh;
}
.isRead{
display: flex;
height: 30px;
width: 100%;
margin: 2px;
align-items: center;
justify-content: center;
}
label {
font-family: poppins, sans-serif;
font-weight: 600;
font-style: normal;
font-size: 2.5vh;
}
input {
border-radius: 10px;
height: 50px;
margin: 3px;
width: 100%;
padding: 4px;
background-color: #d0edff;
border: none;
font-family: poppins, sans-serif;
font-weight: 300;
font-size: 2.5vh;
}
#submit {
margin-top: 4px;
height: 20px;
width: 100%;
border-radius: 15px;
color: #ffffff;
border: none;
}
input[type=checkbox] {
width: 20px;
margin: 10px;
}
#invisibleDiv {
position: fixed;
height: 100%;
width: 100%;
}
#overlay {
position: fixed;
top: 0;
left: 0;
display: none;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
}
.books-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
/* BOOK CARD */
#library-container {
display: none;
height: 50vh;
width: 50vh;
border-radius: 15px;
border: 5px solid #ffffff;
background-color: #d0edff;
flex-direction: column;
justify-content: space-between;
margin: 28px;
}
<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">
<!----GitHub icon-->
<script
src="https://kit.fontawesome.com/4c536a6bd5.js"
crossorigin="anonymous"></script>
<!----------Font Below ---------------->
<link rel="stylesheet" href="https://use.typekit.net/jmq2vxa.css">
<link rel="stylesheet" href="styles.css">
<link rel="icon" type="image/png" href="images/open-book.png"/>
<title>My Library</title>
</head>
<body>
<div class="head-box">
<h1>My Library</h1>
</div>
<main class ="main-container">
<div class="body-box">
<button id="addBook">Add Book</button>
</div>
<div class="books-grid" id="booksGrid">
<div class="library-container" id="library-container"></div>
</div>
</main>
<!-----Form information----->
<div class="form-popup">
<div class="form-content"
<form action="example.com/path" class="form-container" id="popUpForm">
<h3>add new book</h3>
<input class="input" type="text" id="title" placeholder="Title" required maxlength="100">
<input type="author" id="author" placeholder="Author" required maxlength="100">
<input type="number" id="pages" placeholder="Pages" required max="10000">
<div class="isRead">
<label for="readOption">Have you read it?</label>
<input type="checkbox" id="readOption" name="readOption">
</div>
<button class="btn submit" type="submit" id="submit">Submit</button>
</form>
</div>
</div>
<div id="overlay"></div>
<div id="invisibleDiv"></div>
</body>
</html>
// GET
const getAdviceNumber = document.querySelector('#adviceNumber');
const adviceResultsDiv = document.querySelector('#adviceResults');
const diceBtn = document.querySelector('#spinDice');
const staticText = document.querySelector('#static');
const favouriteSection = document.querySelector('.favouriteSection')
diceBtn.addEventListener('click', () => {
const getAPI = async () => {
// Call API
/* eslint-disable */
const res = await axios.get('https://api.adviceslip.com/advice');
// remove static text
staticText.remove();
// Generate spin on btn
const element = document.querySelector('#spinDice');
element.classList.add('rotateMe');
setTimeout(() => element.classList.remove('rotateMe'), 800);
// generate unique id number
const header = document.createElement('h1');
header.className = 'title';
header.append(` ADVICE # ${res.data.slip.id}`);
while (getAdviceNumber.childElementCount > 0) {
getAdviceNumber.firstChild.remove();
}
getAdviceNumber.append(header);
// generate unique advice
const para = document.createElement('p');
para.className = 'para';
para.append(`"${res.data.slip.advice}"`);
while (adviceResultsDiv.childElementCount > 0) {
adviceResultsDiv.firstChild.remove();
}
adviceResultsDiv.append(para);
//generate add to favourites button
const addFavourite = document.createElement('p');
addFavourite.className = 'fav';
addFavourite.innerHTML = `<p>Add to Favourites<i class="fa-solid fa-folder-plus"></i></p>`;
while (favouriteSection.childElementCount > 0) {
favouriteSection.firstChild.remove();
}
favouriteSection.append(addFavourite)
};
getAPI();
favouriteSection.addEventListener('click', () => {
const favouriteItem = document.createElement('p');
favouriteItem.innerHTML = `<p class="icons"><i class="fa-solid fa-magnifying-glass"></i> <i class="fa-solid fa-trash-can"></i></p>`
favouriteItem.className = 'favouriteItemBorder';
favouriteSection.append(favouriteItem)
favouriteItem.append(`${getAdviceNumber.textContent}: ${ adviceResultsDiv.textContent}`)
})
});
body {
background-color: hsl(218, 23%, 16%);
font-family: Arial, Helvetica, sans-serif;
}
#advice-container {
background-color: hsl(217, 19%, 38%);
border-radius: 20px;
position: absolute;
-ms-transform: translateY(-50%);
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 300px;
padding-bottom: 40px;
}
h2 {
color: hsl(193, 38%, 86%);
text-align: center;
}
.title {
color: hsl(150, 100%, 66%);
font-size: 15px;
text-align: center;
margin-top: 20px;
}
.para {
color: hsl(193, 38%, 86%);
font-size: 28px;
font-weight: 500;
text-align: center;
margin: 20px 20px 0 20px;
}
.btn {
margin-top: 40px;
margin-bottom: -75px;
}
.dice-container {
background-color: hsl(150, 100%, 66%);
border: solid 2px hsl(193, 38%, 86%);
border-radius: 33px;
margin: 20px 110px 0 110px;
}
.dice-container:hover {
box-shadow: 0 0 30px -2px #52ffa8;
}
.fa-dice-five {
font-size: 50px;
width: 100%;
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
padding-right: 10px;
/* transform: rotate(90deg); */
}
.rotate {
transition: all 0s ease;
transform: rotate(0deg);
}
.rotateMe {
transition: all 0.3s ease;
transform: rotate(90deg);
}
#icons {
color: hsl(193, 38%, 86%);
}
.icon-container {
padding: 20px 120px 0 120px;
width: 100%;
}
.fa-grip-lines-vertical {
margin: 0 10px 0 10px;
}
.line {
width: 100%;
}
.favouriteSection {
position: absolute;
top: 70%;
}
.fav {
color: #52ffa8;
font-size: 32px;
margin: 20px;
}
.fa-folder-plus {
margin-left: 10px;
}
.favouriteItemBorder {
border: 2px solid white;
width: 300px;
height: 60px;
margin: 20px;
padding: 10px;
text-align: center;
}
.icons {
position:absolute;
bottom:10px;
left: 40%;
font-size: 20px;
}
/* desktop ..................................................................................... */
#media screen and (min-width: 720px) {
#advice-container {
display: flex;
width: 900px;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->
<title>Oshane| Advice generator app</title>
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/030a66e167.js" crossorigin="anonymous"></script>
</head>
<body>
<section id="advice-container">
<div id="static">
<h2>Click the Dice Button <br><br> below <br><br> to get advice</h2>
</div>
<div id="adviceNumber"> </div>
<div id="adviceResults"></div>
<div class="btn" id="getDataBtn">
<button id="spinDice" class="dice-container rotate" type="submit"><i class="fa-solid fa-dice-five"></i></button>
</div>
</section>
<section class="favouriteSection">
</section>
<!-- <script src="./node_modules/axios/dist/axios.min.js"></script> -->
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="app.js"></script>
</body>
</html>
]2]2how can I prevent this from adding the same text each time the add favourite icon is clicked? It should just add it once and if the add favourite btn is selected again and the quote already exists it should not repeat adding the same ones. I tried a few stuff but as I am a beginner those did not work.
Please anyone can assist?
You can check for something before adding/pushing into favorites array.
Check if something like id(best) or string exists in the arrray and if so - return, else push
Step by step, this is what you are missing:
Create an empty object.
Each time the user clicks the "Add to Favourites" button, you should check if it's already in that object.
If it is, you are done handling that click event.
If it is not, you should add it to the object and then proceed with the logic you currently have to update the UI.
Simplified example:
const rollButton = document.getElementById('roll');
const numberElement = document.getElementById('number');
const addToFavouritesButton = document.getElementById('addToFavourites');
const favouritesElement = document.getElementById('favourites');
let number = null;
rollButton.addEventListener('click', () => {
numberElement.textContent = number = Math.floor(Math.random() * 10);
addToFavouritesButton.removeAttribute('disabled');
});
const favourites = {};
addToFavouritesButton.addEventListener('click', () => {
if (favourites[number]) return;
favourites[number] = true;
favouritesElement.textContent = Object.keys(favourites).sort((a, b) => a - b).join(', ');
if (Object.keys(favourites).length === 10) {
numberElement.textContent = '🎉';
rollButton.setAttribute('disabled', true);
addToFavouritesButton.setAttribute('disabled', true);
}
});
body,
button {
font-family: monospace;
}
p {
text-align: center;
}
button {
border: 3px solid black;
border-radius: 4px;
background: transparent;
padding: 8px 16px;
}
button:hover {
background: yellow;
}
button:disabled {
border-color: #CCC;
color: #CCC;
background: transparent;
}
#number {
border: 3px solid black;
width: 48px;
height: 48px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 4px;
}
#favourites {
display: inline-flex;
align-items: center;
justify-content: center;
border: 3px solid black;
border-radius: 4px;
background: transparent;
padding: 8px 16px;
}
<p>
<button id="roll">🎲 Roll Dice</button>
<button id="addToFavourites" disabled>⭐ Add to Favourites</button>
</p>
<p>
<span id="number">?</span>
</p>
<p>
<span id="favourites"> </span>
</p>
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'm trying to create a project card with user info when the user clicks on a button. When the user clicks the new project button, a modal form pops up that takes the user info and has a create button. The program should add a new project card whenever the user clicks the create button. To achieve this I added a click event listener to the Add new project button and another to Create button. I nested the create event listener inside the add new project event listener.
Here's the event listener.
addTileBtn.addEventListener("click", (e) => {
e.preventDefault();
modal.style.display = "block";
const titleField = document.querySelector("#title");
const descriptionField = document.querySelector("#description");
const create = document.querySelector("#create");
const close = document.querySelector("#close");
create.addEventListener("click", (e) => {
e.preventDefault();
title = titleField.value;
description = descriptionField.value;
function createProjectTile() {
const projectTile = document.createElement("div");
projectTile.classList.add("cards-grid__tile");
projectTile.textContent = title;
console.log(title, description);
return projectTile;
}
cardsGrid.appendChild(createProjectTile());
modal.style.display = "none";
});
close.addEventListener("click", (e) => {
e.preventDefault();
modal.style.display = "none";
});
});
The problem is that when I create the first card it works fine. But the second time, it creates two cards and 3 cards on the 3rd time and so on.
Here is the JSFiddle link for the full code.
I've edited your code, this should be what you wanted:
const logoutBtn = document.querySelector("#logout");
const addTileBtn = document.querySelector("#add-tile");
const cardsGrid = document.querySelector(".cards-grid");
const modal = document.querySelector(".modal");
const titleField = document.querySelector("#title");
const descriptionField = document.querySelector("#description");
const create = document.querySelector("#create");
const close = document.querySelector("#close");
addTileBtn.addEventListener("click", (e) => {
e.preventDefault();
modal.style.display = "block";
titleField.value = "";
descriptionField.value = "";
});
create.addEventListener("click", (e) => {
e.preventDefault();
title = titleField.value;
description = descriptionField.value;
function createProjectTile() {
const projectTile = document.createElement("div");
projectTile.classList.add("cards-grid__tile");
projectTile.textContent = title;
console.log(title, description);
return projectTile;
}
cardsGrid.appendChild(createProjectTile());
modal.style.display = "none";
});
close.addEventListener("click", (e) => {
e.preventDefault();
modal.style.display = "none";
});
:root {
--main-red: #be3144;
--main-white: #f0f0f0;
--main-gray: #303841;
--main-blue: #45567d;
--main-blue3: #1c262f;
--main-blue2: #27333d;
--main-blue1: #2e3d49;
--main-light-blue: #02b3e4;
--main-black: #000000;
--main-light-black: #3a3d40;
--main-dark-black: #181719;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
img {
display: block;
max-width: 100%;
height: auto;
}
body {
font-family: "Poppins", sans-serif;
font-size: 1.8rem;
font-weight: 400;
line-height: 1.4;
color: var(--main-white);
}
h1,
h2 {
font-family: "Raleway", sans-serif;
font-weight: 700;
text-align: center;
}
h1 {
font-size: 3.5rem;
}
h2 {
font-size: 2rem;
color: var(--main-blue);
display: block;
}
p {
font-size: 1.8rem;
font-weight: 200;
font-style: italic;
color: var(--main-white);
}
a {
text-decoration: none;
text-align: center;
display: block;
}
.main {
display: flex;
flex-direction: row;
justify-content: space-between;
height: 100vh;
background-color: var(--main-white);
}
.box {
border: none;
box-shadow: 0 2px 4px rgb(0 0 0 / 10%), 0 8px 16px rgb(0 0 0 / 10%);
border-radius: 8px;
background-color: #fff;
}
.box__fields {
padding: 20px;
}
.box-field {
margin-bottom: 20px;
display: flex;
justify-content: center;
}
.icon {
position: absolute;
padding: 10px;
color: gray;
min-width: 50px;
text-align: center;
font-size: 20px;
top: 50%;
transform: translateY(-50%);
}
input,
textarea {
font-size: 17px;
padding: 14px 16px;
width: 300px;
cursor: text;
border: 1px solid var(--main-gray);
border-radius: 6px;
outline: none;
padding-left: 45px;
}
.box-btn {
border: none;
border-radius: 6px;
font-size: 20px;
line-height: 48px;
padding: 0 16px;
}
.app,
.main-content {
height: 100%;
}
.title-area {
background-color: var(--main-blue3);
width: 100%;
font-size: 18px;
min-height: 60px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
position: fixed;
top: 0;
left: 0;
}
.title-area__item {
padding: 10px 30px;
}
.logout-btn {
border: none;
border-radius: 6px;
font-size: 20px;
line-height: 30px;
padding: 0 16px;
width: 100px;
cursor: pointer;
color: #fff;
background-color: var(--main-light-blue);
}
.logout-btn:hover {
background-color: #029be4;
}
.content-area {
margin-top: 60px;
width: 100%;
height: 100%;
overflow: auto;
background-color: var(--main-blue);
}
.cards-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-gap: 50px;
margin-bottom: 3rem;
padding: 5rem 3rem;
}
.cards-grid__tile {
background-color: var(--main-blue2);
max-width: 200px;
padding: 30px;
text-align: center;
font-size: 1.2rem;
}
.add-tile-btn {
border: none;
border-radius: 6px;
font-size: 15px;
line-height: 48px;
padding: 0 10px;
cursor: pointer;
color: #fff;
background-color: var(--main-light-blue);
}
.modal {
display: none;
width: 350px;
font-size: 1.2rem;
position: relative;
top: 10%;
left: 50%;
transform: translateX(-50%);
overflow: visible;
}
.box {
background-color: var(--main-blue1);
opacity: 0.95;
}
.box-field {
flex-direction: column;
}
input,
textarea {
padding: 5px 10px;
resize: none;
}
.wrapper {
position: relative;
text-align: center;
}
.create-btn {
width: 100px;
cursor: pointer;
color: #fff;
background-color: var(--main-light-blue);
}
.close {
cursor: pointer;
position: absolute;
top: 20px;
left: 290px;
}
#modal-form {
position: absolute;
}
.icon {
color: var(--main-blue3);
}
<div class="app">
<div class="nav-wrapper">
<nav id="nav" class="nav"></nav>
</div>
<div class="main-content">
<div class="title-area">
<div class="title-area__item">Menu</div>
<div class="title-area__item">Boards</div>
<div class="title-area__item">
<button id="logout" class="logout-btn btn">
Logout
</button>
</div>
</div>
<div class="content-area">
<div class="modal">
<form id="modal-form" class="box">
<a id="close" class="close">
<i class="fa fa-times icon">close</i>
</a>
<div class="box__fields">
<div class="box-field">
<label for="title"> Title </label>
<input
id="title"
type="text"
name="title"
required
autofocus
/>
</div>
<div class="box-field">
<label for="description">
Description
</label>
<textarea
id="description"
name="title"
rows="6"
cols="40"
></textarea>
</div>
<div class="box-field">
<div class="wrapper">
<button
id="create"
class="create-btn box-btn btn"
>
Create
</button>
</div>
</div>
</div>
</form>
</div>
<div class="cards-grid">
<div class="cards-grid__tile">
<button id="add-tile" class="add-tile-btn btn">
+ Add new project
</button>
</div>
</div>
</div>
</div>
</div>
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>