I got this code for an array an infinite array in javascript and I can add more to it delete from it update elements inside of it.
I need to show that array as a table in html page the design does not matter I can work on that.
I am only allowed to use JavaScript not jQuery, I'm really not sure what to do here.
let students = [];
let x = 0;
document.getElementById("submit").addEventListener("click", (e) => {
e.preventDefault();
let nameInputEl = document.getElementById("name");
let idInputEl = document.getElementById("idNumber");
let gdpaInputEl = document.getElementById("gdpa");
// Validation for input
inputValidation(nameInputEl.value, idInputEl.value, gdpaInputEl.value);
// insert student
if (x == 1) {
insertStudent(nameInputEl.value, idInputEl.value, gdpaInputEl.value);
}
// Show success message
});
function inputValidation(name, id, gdpa) {
// check for the value of each element
if (name == "") {
document.getElementById("Error101").style.display = "block";
} else if (id == "") {
document.getElementById("Error101").style.display = "block";
} else if (gdpa == "") {
document.getElementById("Error101").style.display = "block";
} else {
document.getElementById("Succes101").style.display = "block";
x = 1;
}
setTimeout(function() {
document.getElementById("Error101").style.display = "none";
document.getElementById("Succes101").style.display = "none";
}, 3000);
}
function insertStudent(name, id, gdpa) {
let student = {
name: name,
id: id,
gdpa: gdpa,
};
students.push(student);
console.log("students array: ", students);
x = 0;
}
function showList() {
students.forEach(element => {
document.getElementById("showLi").innerHTML = (students);
});
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" />
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="assets/style.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>School Managment System</title>
</head>
<body>
<div class="container">
<div class="big-title">
<h2 class="title">Assignment</h2>
<span class="ligne"> </span>
</div>
<div class="big_box col-md-12">
<form>
<!-- student name -->
<div class="from-control col-md-4">
<label for="name" class="Name_Label">Student Name</label>
<input type="text" class="Name_Input" id="name" placeholder="jo aqra" />
</div>
<!-- student name -->
<!-- student id -->
<div class="from-control col-md-4">
<label for="idNumber" class="NO_Label">Student ID</label>
<input type="number" class="NO_Input" id="idNumber" placeholder="411420876" />
</div>
<!-- student id -->
<!-- student gdpa -->
<div class="from-control col-md-4">
<label for="gdpa" class="gp_Label">Student GDPA</label>
<input type="number" step="0.01" class="gp_Input" id="gdpa" placeholder="3.50" />
</div>
<!-- student gdpa -->
<div class="col-md-12">
<button id="submit" type="submit">Add</button>
<button id="list" id="list" type="button" onclick="showList()">Show</button>
</div>
</form>
</div>
</div>
<div id="ShowLi"></div>
<div class="Error" id="Error101" aria-hidden="true"><i class="far fa-times-circle"></i>Please fill all the empty fields</div>
<div class="Succes" id="Succes101" aria-hidden="true"><i class="fas fa-check"></i>Student added</div>
<script src="./src/main.js"></script>
</body>
</html>
You mean this
document.getElementById("ShowLi").innerHTML = students
.map(({ name, id, gdpa }) => `<tr><td>${name}</td><td>${id}</td><td>${gdpa}</td></tr>`)
.join("");
I added a table inside the div
let students = [];
let x = 0;
document.getElementById("submit").addEventListener("click", (e) => {
e.preventDefault();
let nameInputEl = document.getElementById("name");
let idInputEl = document.getElementById("idNumber");
let gdpaInputEl = document.getElementById("gdpa");
// Validation for input
inputValidation(nameInputEl.value, idInputEl.value, gdpaInputEl.value);
// insert student
if (x == 1) {
insertStudent(nameInputEl.value, idInputEl.value, gdpaInputEl.value);
}
// Show success message
});
function inputValidation(name, id, gdpa) {
// check for the value of each element
if (name == "") {
document.getElementById("Error101").style.display = "block";
} else if (id == "") {
document.getElementById("Error101").style.display = "block";
} else if (gdpa == "") {
document.getElementById("Error101").style.display = "block";
} else {
document.getElementById("Succes101").style.display = "block";
x = 1;
}
setTimeout(function() {
document.getElementById("Error101").style.display = "none";
document.getElementById("Succes101").style.display = "none";
}, 3000);
}
function insertStudent(name, id, gdpa) {
let student = {
name: name,
id: id,
gdpa: gdpa,
};
students.push(student);
console.log("students array: ", students);
x = 0;
}
function showList() {
document.getElementById("ShowLi").innerHTML = students
.map(({ name, id, gdpa }) => `<tr><td>${name}</td><td>${id}</td><td>${gdpa}</td></tr>`)
.join("");
document.getElementById("showTable").classList.remove("hide");
}
.hide { display:none }
#showTable tr td { border: 1px solid black; padding: 3px; }
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" />
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="assets/style.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>School Managment System</title>
</head>
<body>
<div class="container">
<div class="big-title">
<h2 class="title">Assignment</h2>
<span class="ligne"> </span>
</div>
<div class="big_box col-md-12">
<form>
<!-- student name -->
<div class="from-control col-md-4">
<label for="name" class="Name_Label">Student Name</label>
<input type="text" class="Name_Input" id="name" placeholder="jo aqra" />
</div>
<!-- student name -->
<!-- student id -->
<div class="from-control col-md-4">
<label for="idNumber" class="NO_Label">Student ID</label>
<input type="number" class="NO_Input" id="idNumber" placeholder="411420876" />
</div>
<!-- student id -->
<!-- student gdpa -->
<div class="from-control col-md-4">
<label for="gdpa" class="gp_Label">Student GDPA</label>
<input type="number" step="0.01" class="gp_Input" id="gdpa" placeholder="3.50" />
</div>
<!-- student gdpa -->
<div class="col-md-12">
<button id="submit" type="submit">Add</button>
<button id="list" id="list" type="button" onclick="showList()">Show</button>
</div>
</form>
</div>
</div>
<div>
<table id="showTable" class="hide">
<thead>
<tr>
<th>Name</th>
<th>ID</th>
<th>GDPA</th>
</tr>
</thead>
<tbody id="ShowLi"></tbody>
</table>
</div>
<div class="Error" id="Error101" aria-hidden="true"><i class="far fa-times-circle"></i>Please fill all the empty fields</div>
<div class="Succes" id="Succes101" aria-hidden="true"><i class="fas fa-check"></i>Student added</div>
<script src="./src/main.js"></script>
</body>
</html>
let students = [];
let x = 0;
document.getElementById("submit").addEventListener("click", (e) => {
e.preventDefault();
let nameInputEl = document.getElementById("name");
let idInputEl = document.getElementById("idNumber");
let gdpaInputEl = document.getElementById("gdpa");
// Validation for input
inputValidation(nameInputEl.value, idInputEl.value, gdpaInputEl.value);
// insert student
if (x == 1) {
insertStudent(nameInputEl.value, idInputEl.value, gdpaInputEl.value);
}
// Show success message
});
function inputValidation(name, id, gdpa) {
// check for the value of each element
if (name == "") {
document.getElementById("Error101").style.display = "block";
} else if (id == "") {
document.getElementById("Error101").style.display = "block";
} else if (gdpa == "") {
document.getElementById("Error101").style.display = "block";
} else {
document.getElementById("Succes101").style.display = "block";
x = 1;
}
setTimeout(function() {
document.getElementById("Error101").style.display = "none";
document.getElementById("Succes101").style.display = "none";
}, 3000);
}
function insertStudent(name, id, gdpa) {
let student = {
name: name,
id: id,
gdpa: gdpa,
};
students.push(student);
console.log("students array: ", students);
x = 0;
}
function showList() {
const resultElement = document.getElementById("showli");
while(resultElement.firstChild && resultElement.removeChild(resultElement.firstChild));
var table = document.getElementById("showli").appendChild( document.createElement('table') );
students.forEach((element, i) => {
var row = table.insertRow(i);
var j = 0;
for (const v of Object.keys(element)) {
row.insertCell(j).innerText = element[v];
j++;
}
});
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" />
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="assets/style.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>School Managment System</title>
</head>
<body>
<div class="container">
<div class="big-title">
<h2 class="title">Assignment</h2>
<span class="ligne"> </span>
</div>
<div class="big_box col-md-12">
<form>
<!-- student name -->
<div class="from-control col-md-4">
<label for="name" class="Name_Label">Student Name</label>
<input type="text" class="Name_Input" id="name" placeholder="jo aqra" />
</div>
<!-- student name -->
<!-- student id -->
<div class="from-control col-md-4">
<label for="idNumber" class="NO_Label">Student ID</label>
<input type="number" class="NO_Input" id="idNumber" placeholder="411420876" />
</div>
<!-- student id -->
<!-- student gdpa -->
<div class="from-control col-md-4">
<label for="gdpa" class="gp_Label">Student GDPA</label>
<input type="number" step="0.01" class="gp_Input" id="gdpa" placeholder="3.50" />
</div>
<!-- student gdpa -->
<div class="col-md-12">
<button id="submit" type="submit">Add</button>
<button id="list" id="list" type="button" onclick="showList()">Show</button>
</div>
</form>
</div>
</div>
<div id="showli"></div>
<div class="Error" id="Error101" aria-hidden="true"><i class="far fa-times-circle"></i>Please fill all the empty fields</div>
<div class="Succes" id="Succes101" aria-hidden="true"><i class="fas fa-check"></i>Student added</div>
<script src="./src/main.js"></script>
</body>
</html>
Related
this is my first post here. Please excuse my poor code, I will try my best to describe my issue.
I'm building a Library app from Odin Project. Currently I'm able to create an object with values I'm inputting in a popup form. Created object is being displayed on the screen with correct values as intended.
My goal is to update Read status in a myLibrary array when I click on a button. I was able to update the text content on the button with a click, unfortunately I have no idea how to update a read value in an array for the created object.
I would really appreciate any suggestions.
Thank you for your time
let myLibrary = [];
const registerBook = document.getElementById("registerBook");
const title = document.getElementById("title");
const author = document.getElementById("author");
const pages = document.getElementById("pages");
let read = document.getElementById("read-btn");
let form = document.getElementById("bookForm");
let optionYes = document.getElementById("option-yes");
let optionNo = document.getElementById("option-no");
function openForm() {
document.getElementById("bookForm").style.display = "block";
}
function closeForm() {
document.getElementById("bookForm").style.display = "none";
}
registerBook.addEventListener("click", function() {
myLibrary.push({
title: title.value,
author: author.value,
pages: pages.value,
read: read.value,
})
renderBooks();
console.log(myLibrary);
})
function renderBooks() {
let bookShelf = document.querySelector('#bookShelf');
let bookCover = document.createElement('div');
bookCover.classList.add('bookCover');
bookShelf.appendChild(bookCover);
let deleteCard = document.createElement('div');
deleteCard.classList.add('delete-card');
deleteCard.id = "deleteCard";
bookCover.append(deleteCard);
let bookTitleTag = document.createElement('div');
bookTitleTag.classList.add('book-title-tag');
bookCover.append(bookTitleTag);
bookTitleTag.textContent = 'Book title:';
let bookTitle = document.createElement('div');
bookTitle.classList.add('book-title');
bookCover.append(bookTitle);
let bookAuthorTag = document.createElement('div');
bookAuthorTag.classList.add('book-author-tag');
bookCover.append(bookAuthorTag);
bookAuthorTag.textContent = 'Book author:';
let bookAuthor = document.createElement('div');
bookAuthor.classList.add('book-author');
bookCover.append(bookAuthor);
let bookPagesTag = document.createElement('div');
bookPagesTag.classList.add('book-pages-tag');
bookCover.append(bookPagesTag);
bookPagesTag.textContent = 'No of pages:';
let bookPages = document.createElement('div');
bookPages.classList.add('book-pages');
bookCover.append(bookPages);
let bookStatusTag = document.createElement('div');
bookStatusTag.classList.add('book-pages-tag');
bookCover.append(bookStatusTag);
bookStatusTag.textContent = 'Have you read the book?:';
let bookStatus = document.createElement('button');
bookStatus.classList.add('book-status-btn');
bookStatus.id = 'book-status-btn';
bookCover.append(bookStatus);
bookTitle.textContent = title.value;
bookAuthor.textContent = author.value;
bookPages.textContent = pages.value;
bookStatus.textContent = read.value;
/*Book status in card is updated */
bookStatus.addEventListener("click", () => {
if (bookStatus.textContent === 'Yes') {
bookStatus.textContent = 'No'
} else {
if (bookStatus.textContent === 'No') {
bookStatus.textContent = 'Yes'
}
}
});
/* Trying to update array */
bookStatus.addEventListener("click", () => {
if (bookCover.read === 'Yes') {
bookCover.read = 'No'
} else {
if (bookCover.read === 'No') {
bookCover.read = 'Yes'
}
}
console.log(myLibrary);
});
deleteCard.addEventListener("click", () => {
bookShelf.removeChild(bookCover);
myLibrary.splice(bookCover, 1);
});
}
<!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="styles.css">
<script defer src="index.js"></script>
<title>Library</title>
</head>
<body>
<div class="wrapper">
<div class="header">
<div class="logo">Library</div>
<div class="buttons">
<div class="add-book-btn" id="addBookBtn" onclick="openForm()">Add Book</div>
<!--<div class="login-btn">Log in</div> -->
</div>
</div>
<div class="main">
<div class="form-popup" id="bookForm">
<form action="/action_page.php" onsubmit="event.preventDefault()" class="form-container">
<div class="form-popup-close" onclick="closeForm()"></div>
<h1>Add Book</h1>
<label for="title"><b>Book title</b></label>
<input type="text" id="title" placeholder="Enter book title" name="title" required>
<label for="author"><b>Author</b></label>
<input type="text" id="author" placeholder="Enter author name" name="author">
<label for="pages"><b>No. of pages</b></label>
<input type="number" id="pages" placeholder="Number of pages" name="pages">
<div class="form-bot">
<p>Have you read it?</p>
<select name="read" id="read-btn">
<option id="option-yes" value="Yes">Yes</option>
<option id="option-no" value="No">No</option>
</select>
</div>
<button type="button" class="btn" id="registerBook" onclick="closeForm()">Register Book</button>
</form>
</div>
<div id="bookShelf"></div>
</div>
</div>
</body>
</html>
You can get the title from the bbookTitle DIV, and search the array for that title. Then you can toggle the read property.
let myLibrary = [];
const registerBook = document.getElementById("registerBook");
const title = document.getElementById("title");
const author = document.getElementById("author");
const pages = document.getElementById("pages");
let read = document.getElementById("read-btn");
let form = document.getElementById("bookForm");
let optionYes = document.getElementById("option-yes");
let optionNo = document.getElementById("option-no");
function openForm() {
document.getElementById("bookForm").style.display = "block";
}
function closeForm() {
document.getElementById("bookForm").style.display = "none";
}
registerBook.addEventListener("click", function() {
myLibrary.push({
title: title.value,
author: author.value,
pages: pages.value,
read: read.value,
})
renderBooks();
console.log(myLibrary);
})
function renderBooks() {
let bookShelf = document.querySelector('#bookShelf');
let bookCover = document.createElement('div');
bookCover.classList.add('bookCover');
bookShelf.appendChild(bookCover);
let deleteCard = document.createElement('div');
deleteCard.classList.add('delete-card');
deleteCard.id = "deleteCard";
bookCover.append(deleteCard);
let bookTitleTag = document.createElement('div');
bookTitleTag.classList.add('book-title-tag');
bookCover.append(bookTitleTag);
bookTitleTag.textContent = 'Book title:';
let bookTitle = document.createElement('div');
bookTitle.classList.add('book-title');
bookCover.append(bookTitle);
let bookAuthorTag = document.createElement('div');
bookAuthorTag.classList.add('book-author-tag');
bookCover.append(bookAuthorTag);
bookAuthorTag.textContent = 'Book author:';
let bookAuthor = document.createElement('div');
bookAuthor.classList.add('book-author');
bookCover.append(bookAuthor);
let bookPagesTag = document.createElement('div');
bookPagesTag.classList.add('book-pages-tag');
bookCover.append(bookPagesTag);
bookPagesTag.textContent = 'No of pages:';
let bookPages = document.createElement('div');
bookPages.classList.add('book-pages');
bookCover.append(bookPages);
let bookStatusTag = document.createElement('div');
bookStatusTag.classList.add('book-pages-tag');
bookCover.append(bookStatusTag);
bookStatusTag.textContent = 'Have you read the book?:';
let bookStatus = document.createElement('button');
bookStatus.classList.add('book-status-btn');
bookStatus.id = 'book-status-btn';
bookCover.append(bookStatus);
bookTitle.textContent = title.value;
bookAuthor.textContent = author.value;
bookPages.textContent = pages.value;
bookStatus.textContent = read.value;
/*Book status in card is updated */
bookStatus.addEventListener("click", () => {
if (bookStatus.textContent === 'Yes') {
bookStatus.textContent = 'No'
} else {
if (bookStatus.textContent === 'No') {
bookStatus.textContent = 'Yes'
}
}
});
/* Trying to update array */
bookStatus.addEventListener("click", () => {
let title = bookTitle.textContent;
let book = myLibrary.find(book => book.title === title);
if (book) {
book.read = book.read === 'Yes' ? 'No' : 'Yes';
bookStatus.textContent = book.read;
}
console.log(myLibrary);
});
deleteCard.addEventListener("click", () => {
bookShelf.removeChild(bookCover);
myLibrary.splice(bookCover, 1);
});
}
<!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="styles.css">
<script defer src="index.js"></script>
<title>Library</title>
</head>
<body>
<div class="wrapper">
<div class="header">
<div class="logo">Library</div>
<div class="buttons">
<div class="add-book-btn" id="addBookBtn" onclick="openForm()">Add Book</div>
<!--<div class="login-btn">Log in</div> -->
</div>
</div>
<div class="main">
<div class="form-popup" id="bookForm">
<form action="/action_page.php" onsubmit="event.preventDefault()" class="form-container">
<div class="form-popup-close" onclick="closeForm()"></div>
<h1>Add Book</h1>
<label for="title"><b>Book title</b></label>
<input type="text" id="title" placeholder="Enter book title" name="title" required>
<label for="author"><b>Author</b></label>
<input type="text" id="author" placeholder="Enter author name" name="author">
<label for="pages"><b>No. of pages</b></label>
<input type="number" id="pages" placeholder="Number of pages" name="pages">
<div class="form-bot">
<p>Have you read it?</p>
<select name="read" id="read-btn">
<option id="option-yes" value="Yes">Yes</option>
<option id="option-no" value="No">No</option>
</select>
</div>
<button type="button" class="btn" id="registerBook" onclick="closeForm()">Register Book</button>
</form>
</div>
<div id="bookShelf"></div>
</div>
</div>
</body>
</html>
I try to develop credit card payment form through using pure CSS and Vanilla JS. Almost, It is done. After submitting the form, thank you section supposed to be displayed, however, it does not work. That section has created by using JS. I do not get it what I am missing. In addition, despite using prevent default, it continues to refresh the page.
Also, after clicking submit button, I want to show alert if input is string rather than number or vice versa. I did not use input number because of the pattern issue. How can I solve it?
Thank you for taking the time.
const holderName = document.querySelector("#name")
const cardNumber = document.querySelector("#card-number");
const cardMonth = document.querySelector("#month")
const cardYear = document.querySelector("#year")
const cvcNumber = document.querySelector("#cvc")
const form = document.querySelector("#form")
const submitBtn = document.querySelector("#submit")
const displayedName = document.querySelector(".displayed-name")
const displayedNumber = document.querySelector(".displayed-number")
const displayedMonth = document.querySelector(".displayed-month")
const displayedYear = document.querySelector(".displayed-year")
const displayedCvc = document.querySelector(".displayed-cvc")
holderName.oninput = () => {
displayedName.textContent = holderName.value.toUpperCase();
}
cardNumber.oninput = () => {
displayedNumber.textContent = cardNumber.value.replace(/[^0-9]+/gi, '').replace(/(.{4})/g, '$1 ');
}
cardMonth.oninput = () => {
displayedMonth.textContent = cardMonth.value.replace(/[^0-9]+/gi, "")
}
cardYear.oninput = () => {
displayedYear.textContent = cardYear.value.replace(/[^0-9]+/gi, "");
}
cvcNumber.oninput = () => {
displayedCvc.textContent = cvcNumber.value.replace(/[^0-9]+/gi, "")
}
submitBtn.addEventListener("submit", (e) => {
e.preventDefault()
ThankYouDisplay()
form.classList.add("hidden");
})
function ThankYouDisplay () {
const main = document.querySelector("main")
const thankSection = document.createElement("section");
thankSection.classList.add("thank-you")
main.appendChild(thankSection)
const thanksDIV = document.createElement("div")
thanksDIV.classList.add("thank-you-wrapper")
thankSection.appendChild(thanksDIV)
const imgComplete = document.createElement("img");
imgComplete.src = "images/icon-complete.svg";
imgComplete.alt = "complete icon"
thanksDIV.appendChild(imgComplete);
const thankYouHeader = document.createElement("h3");
thankYouHeader.textContent = "THANK YOU";
thanksDIV.appendChild(thankYouHeader);
const thankYouText = document.createElement("p");
thankYouText.textContent = "We've added your card details";
thanksDIV.appendChild(thankYouText);
const continueBtn = document.createElement("button");
continueBtn.textContent = "Continue";
thanksDIV.appendChild(continueBtn);
}
Hidden class involves display: none;
<!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 -->
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<link rel="stylesheet" href="style.css">
<title>Frontend Mentor | Interactive card details form</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk&display=swap" rel="stylesheet">
<script src="credit-card.js" defer></script>
</head>
<body>
<main>
<section class="background-image">
<aside>
<img id="background-img" src="images/bg-main-desktop.png" alt="background-for-desktop">
</aside>
</section>
<section class="card-front">
<div class="logos">
<img src="images/card-logo.svg" alt="">
</div>
<div class="displayed-number">
<span>0000 0000 0000 0000</span>
</div>
<div class="displayed-info">
<span class="displayed-name">Jonathan</span>
<div>
<span class="displayed-month">00</span>
<span>/</span>
<span class="displayed-year">00</span>
</div>
</div>
</section>
<section class="card-back">
<span class="displayed-cvc">000</span>
</section>
<!-- <section class="thank-you hidden">
<div class="thank-you-wrapper">
<img src="images/icon-complete.svg" alt="">
<h3>THANK YOU!</h3>
<p>We've added your card details</p>
<button>Continue</button>
</div>
</section> -->
<section class="form-wrapper">
<div class="form-div">
<form id="form">
<label for="name">CARDHOLDER NAME</label>
<input type="text" name="name" id="name" maxlength="25" required>
<label for="card-number">CARD NUMBER</label>
<input type="text" name="card-number" id="card-number" autocomplete="cc-number" maxlength="16" placeholder="xxxx xxxx xxxx xxxx" required>
<div class="date-and-cvc">
<div class="datefield">
<label for="month">DATE</label>
<div class="date">
<input type="text" name="month" id="month" maxlength="2" placeholder="month" required>
<input type="text" name="year" id="year" maxlength="2" placeholder="year" required>
</div>
</div>
<div class="cvc-field">
<label for="cvc">CVC</label>
<div class="cvc">
<input type="text" name="cvc" id="cvc" maxlength="3" minlength="3" required>
</div>
</div>
</div>
<button id="submit" type="submit">Confirm</button>
</form>
</div>
</section>
</main>
</body>
</html>
The submit should be on the form not on the submission button.
const holderName = document.querySelector("#name")
const cardNumber = document.querySelector("#card-number");
const cardMonth = document.querySelector("#month")
const cardYear = document.querySelector("#year")
const cvcNumber = document.querySelector("#cvc")
const form = document.querySelector("#form")
const submitBtn = document.querySelector("#submit")
const displayedName = document.querySelector(".displayed-name")
const displayedNumber = document.querySelector(".displayed-number")
const displayedMonth = document.querySelector(".displayed-month")
const displayedYear = document.querySelector(".displayed-year")
const displayedCvc = document.querySelector(".displayed-cvc")
holderName.oninput = () => {
displayedName.textContent = holderName.value.toUpperCase();
}
cardNumber.oninput = () => {
displayedNumber.textContent = cardNumber.value.replace(/[^0-9]+/gi, '').replace(/(.{4})/g, '$1 ');
}
cardMonth.oninput = () => {
displayedMonth.textContent = cardMonth.value.replace(/[^0-9]+/gi, "")
}
cardYear.oninput = () => {
displayedYear.textContent = cardYear.value.replace(/[^0-9]+/gi, "");
}
cvcNumber.oninput = () => {
displayedCvc.textContent = cvcNumber.value.replace(/[^0-9]+/gi, "")
}
form.addEventListener("submit", (e) => {
e.preventDefault()
ThankYouDisplay()
form.classList.add("hidden");
})
function ThankYouDisplay () {
const main = document.querySelector("main")
const thankSection = document.createElement("section");
thankSection.classList.add("thank-you")
main.appendChild(thankSection)
const thanksDIV = document.createElement("div")
thanksDIV.classList.add("thank-you-wrapper")
thankSection.appendChild(thanksDIV)
const imgComplete = document.createElement("img");
imgComplete.src = "images/icon-complete.svg";
imgComplete.alt = "complete icon"
thanksDIV.appendChild(imgComplete);
const thankYouHeader = document.createElement("h3");
thankYouHeader.textContent = "THANK YOU";
thanksDIV.appendChild(thankYouHeader);
const thankYouText = document.createElement("p");
thankYouText.textContent = "We've added your card details";
thanksDIV.appendChild(thankYouText);
const continueBtn = document.createElement("button");
continueBtn.textContent = "Continue";
thanksDIV.appendChild(continueBtn);
}
.hidden {
display: none;
}
<!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 -->
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<link rel="stylesheet" href="style.css">
<title>Frontend Mentor | Interactive card details form</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk&display=swap" rel="stylesheet">
<script src="credit-card.js" defer></script>
</head>
<body>
<main>
<section class="background-image">
<aside>
<img id="background-img" src="images/bg-main-desktop.png" alt="background-for-desktop">
</aside>
</section>
<section class="card-front">
<div class="logos">
<img src="images/card-logo.svg" alt="">
</div>
<div class="displayed-number">
<span>0000 0000 0000 0000</span>
</div>
<div class="displayed-info">
<span class="displayed-name">Jonathan</span>
<div>
<span class="displayed-month">00</span>
<span>/</span>
<span class="displayed-year">00</span>
</div>
</div>
</section>
<section class="card-back">
<span class="displayed-cvc">000</span>
</section>
<!-- <section class="thank-you hidden">
<div class="thank-you-wrapper">
<img src="images/icon-complete.svg" alt="">
<h3>THANK YOU!</h3>
<p>We've added your card details</p>
<button>Continue</button>
</div>
</section> -->
<section class="form-wrapper">
<div class="form-div">
<form id="form">
<label for="name">CARDHOLDER NAME</label>
<input type="text" name="name" id="name" maxlength="25" required>
<label for="card-number">CARD NUMBER</label>
<input type="text" name="card-number" id="card-number" autocomplete="cc-number" maxlength="16" placeholder="xxxx xxxx xxxx xxxx" required>
<div class="date-and-cvc">
<div class="datefield">
<label for="month">DATE</label>
<div class="date">
<input type="text" name="month" id="month" maxlength="2" placeholder="month" required>
<input type="text" name="year" id="year" maxlength="2" placeholder="year" required>
</div>
</div>
<div class="cvc-field">
<label for="cvc">CVC</label>
<div class="cvc">
<input type="text" name="cvc" id="cvc" maxlength="3" minlength="3" required>
</div>
</div>
</div>
<button id="submit" type="submit">Confirm</button>
</form>
</div>
</section>
</main>
</body>
</html>
I am trying to add a style [text-decoration: line-through] to a value of an object property. How to add the style at javascript code line no 28 closeIssue?
I want to add style to the currentIssue.description.
Here is my code:
document.getElementById('issueInputForm').addEventListener('submit', submitIssue);
function submitIssue(e) {
const getInputValue = id => document.getElementById(id).value;
const description = getInputValue('issueDescription');
const severity = getInputValue('issueSeverity');
const assignedTo = getInputValue('issueAssignedTo');
const id = Math.floor(Math.random() * 100000000) + '';
const status = 'Open';
const issue = { id, description, severity, assignedTo, status }; // issue = object
let issues = [];
if (localStorage.getItem('issues')) {
issues = JSON.parse(localStorage.getItem('issues'));
}
issues.push(issue);
localStorage.setItem('issues', JSON.stringify(issues));
document.getElementById('issueInputForm').reset();
fetchIssues();
e.preventDefault();
}
const closeIssue = id => {
const issues = JSON.parse(localStorage.getItem('issues'));
const currentIssue = issues.find(issue => issue.id == id);
currentIssue.status = 'Closed';
// How to add a style on "currentIssue.description"
localStorage.setItem('issues', JSON.stringify(issues));
fetchIssues();
}
const deleteIssue = id => {
const issues = JSON.parse(localStorage.getItem('issues'));
const remainingIssues = issues.filter(issue => issue.id != id)
localStorage.setItem('issues', JSON.stringify(remainingIssues));
fetchIssues();
}
const fetchIssues = () => {
const issues = JSON.parse(localStorage.getItem('issues'));
const issuesList = document.getElementById('issuesList');
issuesList.innerHTML = '';
for (var i = 0; i < issues.length; i++) {
const { id, description, severity, assignedTo, status } = issues[i];
issuesList.innerHTML += `<div class="well">
<h6>Issue ID: ${id} </h6>
<p><span class="label label-info"> ${status} </span></p>
<h3 id="xxx"> ${description} </h3>
<p><span class="glyphicon glyphicon-time"></span> ${severity}</p>
<p><span class="glyphicon glyphicon-user"></span> ${assignedTo}</p>
Close
Delete
</div>`;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Issue Tracker: </title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style>
.lt {
text-decoration: line-through;
}
</style>
</head>
<body onload="fetchIssues()">
<div class="container">
<h1>Issue Tracker: <span id="issue-counter"></span></h1>
<div class="jumbotron">
<h3>Add New Issue:</h3>
<form id="issueInputForm">
<div class="form-group">
<label for="issueDescription">Description</label>
<input type="text" class="form-control" id="issueDescription" placeholder="Describe the issue ...">
</div>
<div class="form-group">
<label for="issueSeverity">Severity</label>
<select id="issueSeverity" class="form-control">
<option value="Low">Low</option>
<option value="Medium">Medium</option>
<option value="High">High</option>
</select>
</div>
<div class="form-group">
<label for="issueAssignedTo">Assigned To</label>
<input type="text" class="form-control" id="issueAssignedTo" placeholder="Enter responsible ...">
</div>
<button type="submit" class="btn btn-primary">Add</button>
</form>
</div>
<div class="col-lg-12">
<div id="issuesList"></div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous"></script>
<script src="main.js"></script>
</body>
</html>
How can I do that?
man u can try this :
value.style.textDecoration = 'line-through'
hey i need help with creating a delete button for my "notes" so it will delete it from the screen and the localstorage (u will notice i tried to make a delBtn function but with no success) i would appreciate if someone could post a fix to mine and explain me where i went wrong.
My JS
const tableBody = document.getElementById("tableBody");
const taskInfo = document.getElementById("taskInfo");
const taskDate = document.getElementById("taskDate");
const taskTime = document.getElementById("taskTime");
const delBtn = document.getElementById("delBtn")
let x = new Task("this is a test", "2021-04-14", "03:19");
let y = new Task("this is a 2nd test", "2021-04-14", "03:19");
//x.add();
//y.add();
let taskList = [
x, y, (new Task("this is a 3rd test", "2021-04-14", "03:19"))
];
if (localStorage.savedTaskList)
taskList = JSON.parse(localStorage.savedTaskList);
displayTable();
function displayTable() {
tableBody.innerHTML = "";
for (let task of taskList) {
const div = document.createElement("div");
div.setAttribute("class","taskZone");
const divTaskInfo = document.createElement("div");
divTaskInfo.setAttribute("class","taskInfo");
const divTaskDate = document.createElement("div");
divTaskDate.setAttribute("class","taskDate");
const divTaskTime = document.createElement("div");
divTaskTime.setAttribute("class","taskTime");
const delBtn = document.createElement("span");
delBtn.setAttribute("class","delBtn");
divTaskInfo.innerText = task.taskInfo;
divTaskDate.innerText = task.taskDate;
divTaskTime.innerText = task.taskTime;
div.append(divTaskInfo, divTaskDate, divTaskTime);
tableBody.appendChild(div);
}
}
delBtn.onclick = function delTask() {
delBtn.parentNode.removeChild(taskZoneElmToDel)
}
function addTask() {
if (taskInfo.value == '' || taskDate.value == '' || taskTime.value == '') {
return alert(`Please fill all the fields.`);
}else{newTask = new Task(taskInfo.value, taskDate.value, taskTime.value);
taskList.push(newTask);
localStorage.savedTaskList = JSON.stringify(taskList);
displayTable();
}
}
Thats the Html part of it
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Task Board</title>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
</head>
<body>
<div class="scaleable-wrapper" id="scaleable-wrapper">
<div class="very-specific-design" id="very-specific-design">
<header class="Title">
My Task Board
</header>
<div id="Input">
</br>
</br>
<form class="Form" id="formInfo">
<label for="taskInfo">Task Info:</label>
<input type="text" id="taskInfo" name="taskInfo" required autofocus></input></br>
<label for="taskDate">Task Date:</label>
<input type="date" id="taskDate" name="taskDate" required></input></br>
<label for="taskTime">Task Time:</label>
<input type="time" id="taskTime" name="taskTime" required></input></br>
<input type="submit" id="addTaskDiv" class="btn" value="Save" onclick="addTask()"></input>
<input type="reset" id="resetForm" class="btn"></input>
</form>
</br>
</br>
</div>
<div class="outNotes"></div>
<div class="tableBody">
<table>
<tbody id="tableBody">
</tbody>
</table>
</div>
</div>
</div>
<input type="button" id="delBtn">x</input>
</body>
<script src="Task.js"></script>
<script src="script2.js"></script>
</html>
So like I want to make an input field required when a checkbox is checked an 'not required' when it is unchecked...I've tried the following code but it was not working ...please help...
<form action="#">
<input id='req'><input type="submit"></form><input type="checkbox" onclick="req()" id="check">
<script>
function req(){
var req = document.getElementById("req");
var checkBox = document.getElementById("check");
if (checkBox.checked == true){
alert("checked")
req.required==true
} else {
alert("uncheck")
req.required==false
}
}
</script>
Give this a try:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
<title>Ilan's Test</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-12">
<div id="results">
<form name="test" id="test" action="#" method="GET">
<div class="input-group">
<div class="form-check">
<input type="checkbox" class="form-check-input" id="cbox">
<label class="form-check-label" for="cbox">Make field required</label>
</div>
</div><br>
<div class="input-group">
<input type="text" id="tbox" class="form-control">
</div><br>
<button type="submit" id="sub" class="btn btn-primary">Submit</button><br>
<small><span class="status"></span></small>
</form>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>
<script>
$(document).ready(function() {
// On click of checkbox
$('#cbox').click(function() {
// Check if it's checked
if ($(this).prop('checked')) {
// Add the required attribute to the text input
$('#tbox').attr('required', '');
// log our results and display a small indicator span status
console.log('input is now required');
$('.status').text('input is now required');
} else {
// If it isn't checked, remove the required attribute
$('#tbox').removeAttr('required');
// log our results and display a small indicator span status
console.log('input is no longer required');
$('.status').text('input is no longer required');
}
});
});
</script>
</body>
</html>