When you add a book, you will see the item added to the table with a cool font and an X icon for removal. However, I noticed that when hovering over the icon to increase its size, it slightly shifts the text in the other cells. Is there a way to prevent this from happening?
I discovered that wrapping the link in a p tag and applying width: 0 along with margin-bottom: 0 seems to fix the issue, but it feels like more of a workaround. Is there a better solution available?
function Book(title, author, isbn){
this.title = title;
this.author = author;
this.isbn = isbn;
}
function UI(){}
UI.addTr = function (book){
const table = document.getElementById("tbody");
const row = table.insertRow(-1);
const td0 = row.insertCell(0);
const td1 = row.insertCell(1);
const td2 = row.insertCell(2);
const td3 = row.insertCell(3);
td0.innerHTML = book.title;
td1.innerHTML = book.author;
td2.innerHTML = book.isbn;
td3.innerHTML = '<a href="#" class="fa fa-remove text-align-center"></a>';
const x = document.querySelectorAll('a');
//console.log(x,x[x.length - 1]);
x[x.length - 1].addEventListener('click', myDelete);
}
UI.deleteTr = function(tr){
}
function myDelete(e){
//console.log(e.target)
}
const submit=document.getElementById('submit').addEventListener('click',mySubmit);
//console.log(document.getElementById('submit'));
function mySubmit(e){
e.preventDefault();
const inputs = Array.from(document.getElementsByClassName('inputs'));
let title, author, isbn;
inputs.forEach((input,i) => {
switch(i){
case 0:
title = input.value;
break;
case 1:
author = input.value;
break;
case 2:
isbn = input.value;
break;
}
});
if(title == '' || author == '' || isbn == ''){
console.log('check inputs');
}else{
inputs.forEach((input) => {
input.value='';
});
const book = new Book(title,author,isbn);
UI.addTr(book);
}
}#submit{
height: calc(1.5em + .75rem + 2px);
padding: .375rem .75rem;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
}
h1{
font-size:3rem!important;
}
#submit{
font-size:12px;
}
body{
letter-spacing:.1rem;
}
a, a:hover{
text-decoration:none!important;
color:red!important;
text-align:left;
}
a:hover{
font-size:larger;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title></title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</head>
<body>
<div class="container w-75">
<h1 class="display-4 mb-4">Add Book</h1>
<form id="bookInputs">
<div class="form-group">
<label class='font-weight-bold' for="title">Title</label>
<input type="text" class="form-control inputs" id="title">
</div>
<div class="form-group">
<label class='font-weight-bold' for="author">Author</label>
<input type="text" class="form-control inputs" id="author">
</div>
<div class="form-group">
<label class='font-weight-bold' for="isbn">ISBN#</label>
<input type="text" class="form-control inputs" id="isbn">
</div>
<input id='submit' type='submit' value='submit' class='font-weight-bold w-100 bg-white border border-grey rounded'>
</form>
<table id='myTable' class="table table-striped">
<thead>
<tr>
<th class='border-top-0'>Title</th>
<th class='border-top-0'>Author</th>
<th class='border-top-0'>ISBN</th>
<th class='border-top-0'></th>
</tr>
</thead>
<tbody id='tbody'>
</tbody>
</table>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<!--<script src="https://cdn.jsdelivr.net/npm/popper/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>
</body>
</html>