How to remove NodeList at once? - javascript

I m making some project.
When I click "number1" button, I thought "number2" and "drag-zone" box is removed at once
But It's not happened. I have to click "number1" to three time to remove "the number2" and "drag-zone"
I want to remove that at once. What's my problem in my code?
I don't know How could I remove NodeList at once
let list = document.getElementsByClassName("boxDrop");
function remove(num) {
if (num === 0) {
for (let i = 0; i < list[1].childNodes.length; i++)
list[1].removeChild(list[1].childNodes[i]);
}
}
* {
align-items: center;
text-align: center;
justify-content: space-evenly;
}
button {
border: none;
background-color: transparent;
font-size: 20px;
border-radius: 10px;
}
button:hover {
background-color: rgb(252, 211, 77);
}
.thumbDropBox {
display: flex;
border: 3px solid rgb(209, 178, 2);
padding: 15px;
margin-top: 100px;
cursor: pointer;
}
.drop-zone {
display: flex;
border: 3px dashed rgb(253, 196, 39);
margin: 10px;
width: 200px;
height: 200px;
padding: 20px;
font-size: 30px;
font-weight: bold;
border-radius: 14px;
}
.drop-zone__over {
border-style: solid;
}
.drop-zone__input {
display: none;
}
.drop-zone__thumb {
background-color: rgb(235, 235, 235);
height: 100%;
width: 100%;
border-radius: 15px;
overflow: hidden;
position: relative;
}
.drop-zone__thumb::after {
content: attr(data-label);
width: 100%;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
background-color: rgb(192, 192, 192);
position: absolute;
bottom: 0;
}
.question {
display: inline-block;
padding: 20px;
font-size: 30px;
}
<div class="thumbDropBox">
<div class="boxDrop">
<div class="drop-zone">
<span class="drop-zone__prompt">Drag or Choose</span>
<input type="file" class="drop-zone__input">
<!-- <div class="drop-zone__thumb" data-label="eskdflsdf.txt"></div> -->
</div>
<button onclick="remove(0)">Number1</button>
</div>
<div class="boxDrop">
<div class="drop-zone">
<span class="drop-zone__prompt">Drag or Choose</span>
<input type="file" class="drop-zone__input">
<!-- <div class="drop-zone__thumb" data-label="eskdflsdf.txt"></div> -->
</div>
<button onclick="remove(1)">Number2</button>
</div>
</div>
<span class="question">Whose is the Better?</span>

Related

How to insert multiple picture and display it using javascript?

I'm trying to append the picture that inserted, so it can be viewed.
So here the code where i can input or insert the picture :
<style>
body {
height: 100%;
padding: 0;
margin: 0;
background-color: white;
max-width: 1920px;
}
.main-container {
display: flex;
min-height: 100vh;
align-items: center;
justify-content: center;
background-image: url('/img/');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
}
.listing-container {
width: 60%;
padding: 30px;
margin: auto;
border-radius: 35px;
box-shadow: 0px 0px 7px #00000029;
background-color: white;
}
.input-credential {
color: #3C58A7;
}
.form-label {
margin-left: 15px;
font-size: 25px;
font-family: Montserrat-Bold;
}
.question-mark {
color: #3C58A7;
}
.question-mark:hover {
cursor: pointer;
}
.form-control {
font-family: Montserrat-Regular;
}
.input-border {
padding-bottom: 15px;
padding-top: 15px;
border-radius: 25px;
box-shadow: 0px 0px 5px #00000029;
}
.error-message {
font-size: 16px;
color: red;
padding: 15px 12px;
font-family: Montserrat-Regular;
}
.input-gambar {
opacity: 0;
overflow: hidden;
position: absolute;
z-index: -1;
}
#input-gambar-text {
padding-left: 42.5%;
color: #3C58A7;
}
#input-gambar-text:hover {
color: rgb(103, 99, 99);
}
.grid {
margin-top: 50px;
display: flex;
justify-content: space-around;
flex-wrap: wrap;
gap: 20px;
}
.grid .form-element {
width: 200px;
height: 200px;
box-shadow: 0px 0px 20px 5px rgba(100, 100, 100, 0.1);
}
.grid .form-element input {
display: none;
}
.grid .form-element img {
width: 200px;
height: 200px;
}
.grid .form-element div {
position: relative;
height: 40px;
margin-top: -40px;
background: rgba(0, 0, 0, 0.5);
text-align: center;
line-height: 40px;
font-size: 13px;
color: #f5f5f5;
font-weight: 600;
}
.grid .form-element div span {
font-size: 40px;
}
#tombol-cancel-gambar {
margin: auto;
padding-top: 15px;
padding-bottom: 15px;
padding-left: 15px;
padding-right: 25px;
color: white;
font-size: 25px;
background-color: #3C58A7;
border-radius: 45px;
border-color: #3C58A7;
font-family: Montserrat-Bold;
align-items: center;
display: flex;
}
#tombol-cancel-gambar:hover {
color: #3C58A7;
background-color: white;
border-color: #3C58A7;
}
</style>
<body>
<div class="main-container">
<div class="listing-container">
<div class="row">
<div class="col-lg-12">
<div class="mb-3 input-credential">
<label class="form-label" for="myfile">
Masukkan Gambar
<span class="question-mark" data-toggle="tooltip" data-placement="bottom" title="Masukkan gambar produk anda">
<i class="fas fa-question-circle"></i>
</span>
</label>
<div class="grid" id="preview_test1">
<div class="form-element" id="test1">
<input type="file" id="file-1" accept="image/*" multiple>
<label for="file-1" id="file-1-preview">
<img src="/img/insert_gambar_penambahan_listing_barang.jpg" alt="" id="size-preview-image">
<div>
<span>+</span>
</div>
</label>
</div>
</div>
<div id="preview_test2">
</div>
</div>
</div>
</div>
</div>
</div>
</body>
And this is the function that i used to show multiple picture that i inserted :
function cancel_form_data_gambar() {
$("#preview_test1").empty();
$("#preview_test2").empty();
$("#preview_test1").append('<div class="form-element" id="test1"></div>');
$("#test1").append('<input type="file" id="file-1" accept="image/*" multiple>');
$("#test1").append('<label for="file-1" id="file-1-preview"></label>');
$("#file-1-preview").append('<img src="/img/insert_gambar_penambahan_listing_barang.jpg" alt="" id="size-preview-image">');
$("#file-1-preview").append('<div> <span>+</span> </div>');
}
function readURL(input) {
$("#preview_test1").empty();
for (var i = 0; i < input.length; i++) {
$("#preview_test2").append('<img id="test_gambar' + i + '"src="#">');
}
for (var i = 0; i < input.length; i++) {
if (input.files && input.files[i]) {
var reader = new FileReader();
reader.onload = function(e) {
$('#test_gambar' + i + '').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[i]);
}
}
$('#preview_test2').append('<button type="button" id="tombol-cancel-gambar" onclick="cancel_form_data_gambar()" class="btn btn-primary listing-button">Cancel Gambar</button>');
}
$("#file-1").change(function() {
readURL(this);
});
the picture is suppose to be showed in id="#preview_test2" after the picture was inserted. But the picture won't appear in id="#preview_test2" and only the button appear in there. So, how can i solve it?

Javascript - Calendar Flip animation not working

I am attempting to create a calendar wherein upon clicking a particular date, the calendar should flip over to reveal details of a specific reservation. While the calendar interface appears perfectly on the webpage, the flip animation does not work and I cant seem to figure out why. I must add that I found most of this code on codepen and am modifying it based on my preference. I have attached my code breakdown below. I would greatly appreciate any advice and help. Thanks!:
<script type = "text/javascript">
var app = {
settings: {
container: $(".calendar"),
calendar: $(".front"),
days: $(".weeks span"),
form: $(".back"),
input: $(".back input"),
buttons: $(".back button")
},
init: function () {
instance = this;
settings = this.settings;
this.bindUIActions();
},
swap: function (currentSide, desiredSide) {
settings.container.toggleClass("flip");
currentSide.fadeOut(900);
currentSide.hide();
desiredSide.show();
},
bindUIActions: function () {
settings.days.on("click", function () {
instance.swap(settings.calendar, settings.form);
settings.input.focus();
});
settings.buttons.on("click", function () {
instance.swap(settings.form, settings.calendar);
});
}
};
app.init();
</script>
<style type = "text/css">
* {
box-sizing: border-box;
font-family: "Roboto", sans-serif;
list-style: none;
margin: 0;
outline: none;
padding: 0;
}
a {
text-decoration: none;
}
body,
html {
height: 100%;
}
body {
background: #dfebed;
font-family: "Roboto", sans-serif;
}
.container {
align-items: center;
display: flex;
height: 100%;
justify-content: center;
margin: 0 auto;
max-width: 600px;
width: 100%;
}
.calendar {
background: #2b4450;
border-radius: 4px;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
height: 501px;
perspective: 1000;
transition: 0.9s;
transform-style: preserve-3d;
width: 100%;
}
/* Front - Calendar */
.front {
transform: rotateY(0deg);
}
.current-date {
border-bottom: 1px solid rgba(73, 114, 133, 0.6);
display: flex;
justify-content: space-between;
padding: 30px 40px;
}
.current-date h1 {
color: #dfebed;
font-size: 1.4em;
font-weight: 300;
}
.week-days {
color: #dfebed;
display: flex;
justify-content: space-between;
font-weight: 600;
padding: 30px 40px;
}
.days {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.weeks {
color: #fff;
display: flex;
flex-direction: column;
padding: 0 40px;
}
.weeks div {
display: flex;
font-size: 1.2em;
font-weight: 300;
justify-content: space-between;
margin-bottom: 20px;
width: 100%;
}
.last-month {
opacity: 0.3;
}
.weeks span {
padding: 10px;
}
.weeks span.active {
background: #f78536;
border-radius: 50%;
}
.weeks span:not(.last-month):hover {
cursor: pointer;
font-weight: 600;
}
.event {
position: relative;
}
.event:after {
content: "•";
color: #f78536;
font-size: 1.4em;
position: absolute;
right: -4px;
top: -4px;
}
/* Back - Event form */
.back {
height: 100%;
transform: rotateY(180deg);
}
.back input {
background: none;
border: none;
border-bottom: 1px solid rgba(73, 114, 133, 0.6);
color: #dfebed;
font-size: 1.4em;
font-weight: 300;
padding: 30px 40px;
width: 100%;
}
.info {
color: #dfebed;
display: flex;
flex-direction: column;
font-weight: 600;
font-size: 1.2em;
padding: 30px 40px;
}
.info div:not(.observations) {
margin-bottom: 40px;
}
.info span {
font-weight: 300;
}
.info .date {
display: flex;
justify-content: space-between;
}
.info .date p {
width: 50%;
}
.info .address p {
width: 100%;
}
.actions {
bottom: 0;
border-top: 1px solid rgba(73, 114, 133, 0.6);
display: flex;
justify-content: space-between;
position: absolute;
width: 100%;
}
.actions button {
background: none;
border: 0;
color: #fff;
font-weight: 600;
letter-spacing: 3px;
margin: 0;
padding: 30px 0;
text-transform: uppercase;
width: 50%;
}
.actions button:first-of-type {
border-right: 1px solid rgba(73, 114, 133, 0.6);
}
.actions button:hover {
background: #497285;
cursor: pointer;
}
.actions button:active {
background: #5889a0;
outline: none;
}
/* Flip animation */
.flip {
transform: rotateY(180deg);
}
.front,
.back {
backface-visibility: hidden;
}
</style>
<link rel = "stylesheet" type = "text/css">
<script type="text/javascript" src="jquery-2.1.4.min.js"></script>
<div class="container">
<div class="calendar">
<div class="front">
<div class="current-date">
<h1>Monday 26th</h1>
<h1>April 2021</h1>
</div>
<div class="current-month">
<ul class="week-days">
<li>MON</li>
<li>TUE</li>
<li>WED</li>
<li>THU</li>
<li>FRI</li>
<li>SAT</li>
<li>SUN</li>
</ul>
<div class="weeks">
<div class="first">
<span class="last-month">28</span>
<span class="last-month">29</span>
<span class="last-month">30</span>
<span class="last-month">31</span>
<span>01</span>
<span>02</span>
<span>03</span>
</div>
<div class="second">
<span>04</span>
<span>05</span>
<span class="event">06</span>
<span>07</span>
<span>08</span>
<span>09</span>
<span>10</span>
</div>
<div class="third">
<span>11</span>
<span>12</span>
<span>13</span>
<span>14</span>
<span class="active">15</span>
<span>16</span>
<span>17</span>
</div>
<div class="fourth">
<span>18</span>
<span>19</span>
<span>20</span>
<span>21</span>
<span>22</span>
<span>23</span>
<span>24</span>
</div>
<div class="fifth">
<span>25</span>
<span>26</span>
<span>27</span>
<span>28</span>
<span>29</span>
<span>30</span>
<span>31</span>
</div>
</div>
</div>
</div>
<div class="back">
<input placeholder="What's the event?">
<div class="info">
<div class="date">
<p class="info-date">
Date: <span>Jan 15th, 2016</span>
</p>
<p class="info-time">
Time: <span>6:35 PM</span>
</p>
</div>
<div class="address">
<p>
Address: <span>129 W 81st St, New York, NY</span>
</p>
</div>
<div class="observations">
<p>
Observations: <span>Be there 15 minutes earlier</span>
</p>
</div>
</div>
<div class="actions">
<button class="save">
Save <i class="ion-checkmark"></i>
</button>
<button class="dismiss">
Dismiss <i class="ion-android-close"></i>
</button>
</div>
</div>
</div>
</div>

Just change the <script> tag as shown below. I added Google CDN for jQuery. Why?
For more about how to load script tags check here
var app = {
settings: {
container: $(".calendar"),
calendar: $(".front"),
days: $(".weeks span"),
form: $(".back"),
input: $(".back input"),
buttons: $(".back button")
},
init: function () {
instance = this;
settings = this.settings;
this.bindUIActions();
},
swap: function (currentSide, desiredSide) {
settings.container.toggleClass("flip");
currentSide.fadeOut(900);
currentSide.hide();
desiredSide.show();
},
bindUIActions: function () {
settings.days.on("click", function () {
instance.swap(settings.calendar, settings.form);
settings.input.focus();
});
settings.buttons.on("click", function () {
instance.swap(settings.form, settings.calendar);
});
}
};
app.init();
* {
box-sizing: border-box;
font-family: "Roboto", sans-serif;
list-style: none;
margin: 0;
outline: none;
padding: 0;
}
a {
text-decoration: none;
}
body,
html {
height: 100%;
}
body {
background: #dfebed;
font-family: "Roboto", sans-serif;
}
.container {
align-items: center;
display: flex;
height: 100%;
justify-content: center;
margin: 0 auto;
max-width: 600px;
width: 100%;
}
.calendar {
background: #2b4450;
border-radius: 4px;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
height: 501px;
perspective: 1000;
transition: 0.9s;
transform-style: preserve-3d;
width: 100%;
}
/* Front - Calendar */
.front {
transform: rotateY(0deg);
}
.current-date {
border-bottom: 1px solid rgba(73, 114, 133, 0.6);
display: flex;
justify-content: space-between;
padding: 30px 40px;
}
.current-date h1 {
color: #dfebed;
font-size: 1.4em;
font-weight: 300;
}
.week-days {
color: #dfebed;
display: flex;
justify-content: space-between;
font-weight: 600;
padding: 30px 40px;
}
.days {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.weeks {
color: #fff;
display: flex;
flex-direction: column;
padding: 0 40px;
}
.weeks div {
display: flex;
font-size: 1.2em;
font-weight: 300;
justify-content: space-between;
margin-bottom: 20px;
width: 100%;
}
.last-month {
opacity: 0.3;
}
.weeks span {
padding: 10px;
}
.weeks span.active {
background: #f78536;
border-radius: 50%;
}
.weeks span:not(.last-month):hover {
cursor: pointer;
font-weight: 600;
}
.event {
position: relative;
}
.event:after {
content: "•";
color: #f78536;
font-size: 1.4em;
position: absolute;
right: -4px;
top: -4px;
}
/* Back - Event form */
.back {
height: 100%;
transform: rotateY(180deg);
}
.back input {
background: none;
border: none;
border-bottom: 1px solid rgba(73, 114, 133, 0.6);
color: #dfebed;
font-size: 1.4em;
font-weight: 300;
padding: 30px 40px;
width: 100%;
}
.info {
color: #dfebed;
display: flex;
flex-direction: column;
font-weight: 600;
font-size: 1.2em;
padding: 30px 40px;
}
.info div:not(.observations) {
margin-bottom: 40px;
}
.info span {
font-weight: 300;
}
.info .date {
display: flex;
justify-content: space-between;
}
.info .date p {
width: 50%;
}
.info .address p {
width: 100%;
}
.actions {
bottom: 0;
border-top: 1px solid rgba(73, 114, 133, 0.6);
display: flex;
justify-content: space-between;
position: absolute;
width: 100%;
}
.actions button {
background: none;
border: 0;
color: #fff;
font-weight: 600;
letter-spacing: 3px;
margin: 0;
padding: 30px 0;
text-transform: uppercase;
width: 50%;
}
.actions button:first-of-type {
border-right: 1px solid rgba(73, 114, 133, 0.6);
}
.actions button:hover {
background: #497285;
cursor: pointer;
}
.actions button:active {
background: #5889a0;
outline: none;
}
/* Flip animation */
.flip {
transform: rotateY(180deg);
}
.front,
.back {
backface-visibility: hidden;
}
</style>
<div class="container">
<div class="calendar">
<div class="front">
<div class="current-date">
<h1>Monday 26th</h1>
<h1>April 2021</h1>
</div>
<div class="current-month">
<ul class="week-days">
<li>MON</li>
<li>TUE</li>
<li>WED</li>
<li>THU</li>
<li>FRI</li>
<li>SAT</li>
<li>SUN</li>
</ul>
<div class="weeks">
<div class="first">
<span class="last-month">28</span>
<span class="last-month">29</span>
<span class="last-month">30</span>
<span class="last-month">31</span>
<span>01</span>
<span>02</span>
<span>03</span>
</div>
<div class="second">
<span>04</span>
<span>05</span>
<span class="event">06</span>
<span>07</span>
<span>08</span>
<span>09</span>
<span>10</span>
</div>
<div class="third">
<span>11</span>
<span>12</span>
<span>13</span>
<span>14</span>
<span class="active">15</span>
<span>16</span>
<span>17</span>
</div>
<div class="fourth">
<span>18</span>
<span>19</span>
<span>20</span>
<span>21</span>
<span>22</span>
<span>23</span>
<span>24</span>
</div>
<div class="fifth">
<span>25</span>
<span>26</span>
<span>27</span>
<span>28</span>
<span>29</span>
<span>30</span>
<span>31</span>
</div>
</div>
</div>
</div>
<div class="back">
<input placeholder="What's the event?">
<div class="info">
<div class="date">
<p class="info-date">
Date: <span>Jan 15th, 2016</span>
</p>
<p class="info-time">
Time: <span>6:35 PM</span>
</p>
</div>
<div class="address">
<p>
Address: <span>129 W 81st St, New York, NY</span>
</p>
</div>
<div class="observations">
<p>
Observations: <span>Be there 15 minutes earlier</span>
</p>
</div>
</div>
<div class="actions">
<button class="save">
Save <i class="ion-checkmark"></i>
</button>
<button class="dismiss">
Dismiss <i class="ion-android-close"></i>
</button>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

I cant insert cell in my table using javascript

Hi i am creating this app and then i use javascript so that whatever i input in the boxes i could see it in my DETAILS HISTORY. and i did insert cells and stuff but when i run it i could see my table data getting inserted but only a few seconds then it will disappear i dont know why i hope you cn help me <3. here below is my codes
let enter = document.getElementById("btn");
enter.addEventListener("click", displayFunction);
let row = 1;
function displayFunction() {
let detail = document.getElementById("detail-input").value;
let amount = document.getElementById("amount-input").value;
if (!detail || !amount) {
alert("Please Fill in the Boxes");
return;
}
let table = document.getElementById("myTable");
let newRow = table.insertRow(row);
let cell1 = newRow.insertCell(0);
let cell2 = newRow.insertCell(1);
cell1.innerHTML = detail;
cell2.innerHTML = amount;
row++;
}
#import url("https://fonts.googleapis.com/css2?family=Poppins:wght#500&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins";
}
.container {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: rgba(255, 255, 255, 0.685);
}
.form-container {
min-width: 500px;
min-height: 600px;
background: linear-gradient(
55deg,
rgb(71, 126, 247),
rgba(53, 52, 52, 0.295)
);
padding: 20px 30px;
border: 5px solid rgb(37, 37, 49);
border-radius: 10px;
text-align: center;
color: rgb(58, 57, 57);
box-shadow: 2px 2px 20px #333;
position: relative;
}
.form-container h1 {
margin-bottom: 2rem;
}
.form-container h3 {
margin-bottom: 2rem;
position: relative;
}
.form-container h3::before {
content: "";
width: 4rem;
height: 2px;
background-color: rgb(41, 32, 32);
position: absolute;
top: 50%;
left: 20%;
}
.form-container h3::after {
content: "";
width: 4rem;
height: 2px;
background-color: rgb(41, 32, 32);
position: absolute;
top: 50%;
right: 20%;
}
form {
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}
form input {
width: 100%;
height: 100%;
padding: 10px;
background: none;
outline: none;
border: none;
border-bottom: 2px solid rgb(41, 32, 32);
}
.detail {
margin-top: 20px;
}
.amount {
margin-top: 50px;
}
#btn {
text-decoration: none;
color: #000;
border: 1px solid;
border-radius: 20px;
background: #fff;
padding: 10px 20px;
position: absolute;
bottom: 28%;
cursor: pointer;
transition: 500ms ease-out;
}
#btn:hover {
background: #000;
color: #fff;
}
.history {
margin-top: 80px;
display: flex;
justify-content: space-around;
align-items: center;
}
.col-2 {
border: 1px solid;
padding: 5px 10px;
background: #fff;
}
.label-1 {
color: green;
}
.label-2 {
color: red;
}
.label-3 {
color: rgb(24, 166, 223);
}
.details-container {
margin-left: 10px;
width: 500px;
height: 600px;
border: 5px solid #333;
border-radius: 10px;
text-align: center;
background: linear-gradient(
55deg,
rgb(71, 126, 247),
rgba(53, 52, 52, 0.295)
);
}
.details-container h1 {
margin-top: 20px;
}
#myTable {
border-collapse: collapse;
background: #fff;
border: 1px solid;
width: 100%;
}
#myTable,
td,
th {
border: 2px solid;
padding: 10px 20px;
}
td {
color: #000;
}
<!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" />
<title>Expenses Tracker App</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="form-container">
<h1>EXPENSES TRACKER APP</h1>
<h3>New Entry</h3>
<form id="form">
<div class="detail">
<div class="col-1">
<label>Details</label>
<input type="text" id="detail-input" />
</div>
</div>
<div class="amount">
<div class="col-1">
<label>Amount</label>
<input type="number" id="amount-input" />
</div>
</div>
<button id="btn">Enter</button>
</form>
<div class="history">
<div class="col-2 col-ie">
<p class="label-1">INFLOW</p>
<p id="inflow">$0.00</p>
</div>
<div class="col-2">
<p class="label-2">OUTFLOW</p>
<p id="outflow">$0.00</p>
</div>
<div class="col-2">
<p class="label-3">BALANCE</p>
<p id="balance">$0.00</p>
</div>
</div>
</div>
<div class="details-container">
<h1>DETAILS HISTORY</h1>
<table id="myTable">
<tr>
<th>Details</th>
<th>Amount</th>
</tr>
</table>
</div>
</div>
<script src="app.js"></script>
</body>
</html>

You are submitting the form - you can change the button to type="button" OR
Don't use a submit button click to perform code, instead use the submit event and preventDefault()
let enter = document.getElementById("form").addEventListener("submit", displayFunction);
function displayFunction(e) {
e.preventDefault(); <<<
let enter = document.getElementById("form").addEventListener("submit", displayFunction);
let row = 1;
function displayFunction(e) {
e.preventDefault();
let detail = document.getElementById("detail-input").value;
let amount = document.getElementById("amount-input").value;
if (!detail || !amount) {
alert("Please Fill in the Boxes");
return;
}
let table = document.getElementById("myTable");
let newRow = table.insertRow(row);
let cell1 = newRow.insertCell(0);
let cell2 = newRow.insertCell(1);
cell1.innerHTML = detail;
cell2.innerHTML = amount;
row++;
}
#import url("https://fonts.googleapis.com/css2?family=Poppins:wght#500&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins";
}
.container {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: rgba(255, 255, 255, 0.685);
}
.form-container {
min-width: 500px;
min-height: 600px;
background: linear-gradient( 55deg, rgb(71, 126, 247), rgba(53, 52, 52, 0.295));
padding: 20px 30px;
border: 5px solid rgb(37, 37, 49);
border-radius: 10px;
text-align: center;
color: rgb(58, 57, 57);
box-shadow: 2px 2px 20px #333;
position: relative;
}
.form-container h1 {
margin-bottom: 2rem;
}
.form-container h3 {
margin-bottom: 2rem;
position: relative;
}
.form-container h3::before {
content: "";
width: 4rem;
height: 2px;
background-color: rgb(41, 32, 32);
position: absolute;
top: 50%;
left: 20%;
}
.form-container h3::after {
content: "";
width: 4rem;
height: 2px;
background-color: rgb(41, 32, 32);
position: absolute;
top: 50%;
right: 20%;
}
form {
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}
form input {
width: 100%;
height: 100%;
padding: 10px;
background: none;
outline: none;
border: none;
border-bottom: 2px solid rgb(41, 32, 32);
}
.detail {
margin-top: 20px;
}
.amount {
margin-top: 50px;
}
#btn {
text-decoration: none;
color: #000;
border: 1px solid;
border-radius: 20px;
background: #fff;
padding: 10px 20px;
position: absolute;
bottom: 28%;
cursor: pointer;
transition: 500ms ease-out;
}
#btn:hover {
background: #000;
color: #fff;
}
.history {
margin-top: 80px;
display: flex;
justify-content: space-around;
align-items: center;
}
.col-2 {
border: 1px solid;
padding: 5px 10px;
background: #fff;
}
.label-1 {
color: green;
}
.label-2 {
color: red;
}
.label-3 {
color: rgb(24, 166, 223);
}
.details-container {
margin-left: 10px;
width: 500px;
height: 600px;
border: 5px solid #333;
border-radius: 10px;
text-align: center;
background: linear-gradient( 55deg, rgb(71, 126, 247), rgba(53, 52, 52, 0.295));
}
.details-container h1 {
margin-top: 20px;
}
#myTable {
border-collapse: collapse;
background: #fff;
border: 1px solid;
width: 100%;
}
#myTable,
td,
th {
border: 2px solid;
padding: 10px 20px;
}
td {
color: #000;
}
<div class="container">
<div class="form-container">
<h1>EXPENSES TRACKER APP</h1>
<h3>New Entry</h3>
<form id="form">
<div class="detail">
<div class="col-1">
<label>Details</label>
<input type="text" id="detail-input" />
</div>
</div>
<div class="amount">
<div class="col-1">
<label>Amount</label>
<input type="number" id="amount-input" />
</div>
</div>
<button id="btn">Enter</button>
</form>
<div class="history">
<div class="col-2 col-ie">
<p class="label-1">INFLOW</p>
<p id="inflow">$0.00</p>
</div>
<div class="col-2">
<p class="label-2">OUTFLOW</p>
<p id="outflow">$0.00</p>
</div>
<div class="col-2">
<p class="label-3">BALANCE</p>
<p id="balance">$0.00</p>
</div>
</div>
</div>
<div class="details-container">
<h1>DETAILS HISTORY</h1>
<table id="myTable">
<tr>
<th>Details</th>
<th>Amount</th>
</tr>
</table>
</div>
</div>

let enter = document.getElementById("btn");
enter.addEventListener("click", displayFunction);
let row = 1;
function displayFunction() {
let detail = document.getElementById("detail-input").value;
let amount = document.getElementById("amount-input").value;
if (!detail || !amount) {
alert("Please Fill in the Boxes");
return;
}
let table = document.getElementById("myTable");
console.log(table)
let newRow = table.insertRow(row);
let cell1 = newRow.insertCell(0);
console.log(newRow);
let cell2 = newRow.insertCell(1);
cell1.innerHTML = detail;
cell2.innerHTML = amount;
row++;
return;
}
#import url("https://fonts.googleapis.com/css2?family=Poppins:wght#500&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins";
}
.container {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: rgba(255, 255, 255, 0.685);
}
.form-container {
min-width: 500px;
min-height: 600px;
background: linear-gradient(
55deg,
rgb(71, 126, 247),
rgba(53, 52, 52, 0.295)
);
padding: 20px 30px;
border: 5px solid rgb(37, 37, 49);
border-radius: 10px;
text-align: center;
color: rgb(58, 57, 57);
box-shadow: 2px 2px 20px #333;
position: relative;
}
.form-container h1 {
margin-bottom: 2rem;
}
.form-container h3 {
margin-bottom: 2rem;
position: relative;
}
.form-container h3::before {
content: "";
width: 4rem;
height: 2px;
background-color: rgb(41, 32, 32);
position: absolute;
top: 50%;
left: 20%;
}
.form-container h3::after {
content: "";
width: 4rem;
height: 2px;
background-color: rgb(41, 32, 32);
position: absolute;
top: 50%;
right: 20%;
}
form {
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}
form input {
width: 100%;
height: 100%;
padding: 10px;
background: none;
outline: none;
border: none;
border-bottom: 2px solid rgb(41, 32, 32);
}
.detail {
margin-top: 20px;
}
.amount {
margin-top: 50px;
}
#btn {
text-decoration: none;
color: #000;
border: 1px solid;
border-radius: 20px;
background: #fff;
padding: 10px 20px;
position: absolute;
bottom: 28%;
cursor: pointer;
transition: 500ms ease-out;
}
#btn:hover {
background: #000;
color: #fff;
}
.history {
margin-top: 80px;
display: flex;
justify-content: space-around;
align-items: center;
}
.col-2 {
border: 1px solid;
padding: 5px 10px;
background: #fff;
}
.label-1 {
color: green;
}
.label-2 {
color: red;
}
.label-3 {
color: rgb(24, 166, 223);
}
.details-container {
margin-left: 10px;
width: 500px;
height: 600px;
border: 5px solid #333;
border-radius: 10px;
text-align: center;
background: linear-gradient(
55deg,
rgb(71, 126, 247),
rgba(53, 52, 52, 0.295)
);
}
.details-container h1 {
margin-top: 20px;
}
#myTable {
border-collapse: collapse;
background: #fff;
border: 1px solid;
width: 100%;
}
#myTable,
td,
th {
border: 2px solid;
padding: 10px 20px;
}
td {
color: #000;
}
<!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" />
<title>Expenses Tracker App</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="form-container">
<h1>EXPENSES TRACKER APP</h1>
<h3>New Entry</h3>
<div id="form">
<div class="detail">
<div class="col-1">
<label>Details</label>
<input type="text" id="detail-input" />
</div>
</div>
<div class="amount">
<div class="col-1">
<label>Amount</label>
<input type="number" id="amount-input" />
</div>
</div>
</div>
<button id="btn">Enter</button>
<div class="history">
<div class="col-2 col-ie">
<p class="label-1">INFLOW</p>
<p id="inflow">$0.00</p>
</div>
<div class="col-2">
<p class="label-2">OUTFLOW</p>
<p id="outflow">$0.00</p>
</div>
<div class="col-2">
<p class="label-3">BALANCE</p>
<p id="balance">$0.00</p>
</div>
</div>
</div>
<div class="details-container">
<h1>DETAILS HISTORY</h1>
<table id="myTable">
<tr>
<th>Details</th>
<th>Amount</th>
</tr>
</table>
</div>
</div>
</body>
</html>
thats correct its because you use form here is result after replacing with div.
[https://jsfiddle.net/vishalpatil550/5xmu081o/7/][1]

Multiple Event in single click javascript

Guys need some help im trying to figure out how can i execute multiple events on single click i am able to change the image on my gallery but i wanted to add some text label on each Img click i need to change each H3 and replace whenever i click the other image, i need to do a multiple event on single click
const current = document.querySelector('#current');
const imgs = document.querySelectorAll('.imgs img');
const main = document.querySelector('#main-info h3');
const info = document.querySelector('.info');
imgs.forEach(img => img.addEventListener('click', imgClick));
function imgClick(e) {
current.src = e.target.src;
}
body {
font-family: Arial, Helvetica, sans-serif;
font: 15px/1.5;
background-color: #f4f4f4;
margin: 0;
padding: 0;
}
.container {
width: 90%;
margin: auto;
overflow: hidden;
}
header {
display: flex;
justify-content: space-between;
padding-top: 5px;
background-color: #567890;
min-height: 130px;
border-bottom: 3px #e0480c solid;
padding: 0 20px 0 0;
}
header #branding {
float: left;
margin: 0;
}
header #branding img {
margin: 0;
padding: 0;
}
header ul {
margin: 0;
padding: 0;
}
header li {
display: inline;
float: left;
padding: 0 20px 0 20px;
margin-top: 50px;
}
header a {
text-decoration: none;
color: #ffffff;
text-transform: uppercase;
font-size: 16px;
}
header a:hover {
color: #b9b8b9;
opacity: 1;
}
header nav {
float: right;
padding-bottom: 50px;
}
.current a {
color: #e0480c;
font-weight: bold;
}
#showcase {
min-height: 400px;
background: linear-gradient(rgba(0, 0, 50, 0.5), rgba(0, 0, 50, 0.5)),
url(/img/enseymada.jpg) no-repeat 0 -400px;
text-align: center;
background-size: cover;
opacity: 0.9;
}
#showcase .main-info {
margin-top: 100px;
margin-bottom: 10px;
justify-content: center;
font-size: 50px;
font-weight: 600;
color: #fffcff;
}
#showcase p {
font-size: 20px;
font-weight: 200;
color: #ccc;
}
.topinfo {
text-align: center;
justify-content: center;
}
.info2 {
text-align: center;
justify-content: center;
}
footer {
width: 100%;
bottom: 0;
position: relative;
}
.foot {
background: #e24305;
color: #fff;
height: 10px;
margin: 0;
width: 100%;
text-align: center;
padding: 7px 10px;
justify-content: center;
align-items: center;
}
.main-img img,
.imgs img {
margin: auto;
width: 100%;
background: cover;
border-radius: 10%;
}
.imgs {
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 5px;
background: cover;
cursor: pointer;
}
.wrapper {
border: #444 solid 3px;
max-width: 800px;
margin: auto;
height: 100%;
padding: 5px;
align-items: center;
justify-content: center;
overflow: hidden;
}
.newsletter {
margin-bottom: 100px;
padding: 0;
width: 100%;
height: 80px;
align-items: center;
justify-content: center;
background-color: #567890;
}
.newsletter h1 {
float: left;
color: #ffffff;
}
.newsletter .btn {
display: inline;
margin: 20px 5px;
padding: 10px;
background-color: #444;
color: #fff;
border: none;
}
.newsletter #subscribe {
padding: 10px;
margin-left: 10px;
border: none;
}
<div class="wrapper">
<div class="main-img">
<h3 id="main-info">Classic Enseymada</h3>
<img src="img/image2.jpg" id="current">
</div>
<div class="imgs">
<img src="img/image2.jpg">
<div class="info">
<img src="img/image3.jpg">
<h3>Nuttela</h3>
</div>
<img src="img/image4.jpg">
<img src="img/image6.jpg">
<img src="img/image7.jpg">
<img src="img/image8.jpg">
</div>
</div>
<footer><div class="foot">Copyright &copy Abby Cook's 2020</div></footer>
<script src="./js/main.js"></script>
</body>
</html>

I am assuming that you want to pass more arguments to your imgClick function.
One way to do it is to use anonymous functions, something like this should do the trick :
imgs.forEach(img => img.addEventListener('click', function(e){
imgClick(e, 'param1', 'param2',);
}));
function imgClick(e, param1, param2,) {
current.src = e.target.src;
// your code
}
Add then your code in the function.

My form close button doesn't work with JavaScript

I've created an X button to close a form with Javascript but it's not working and I can't figure out why. Once I open it I can't close.
I'm just putting here the code for the button and the form, not the whole page behind it. Hope someone can help me.
html
<div class="open-btn">
<button id="show-modal"><strong>Open Form</strong></button>
</div>
<div class="modal modal--hidden">
<div class="modal_content">
<div class="close">
<i class="fas fa-times">X</i>
</div>
<h1>Ask away</h1>
<form id="submit">
<input type="text" placeholder="Name">
<input type="email" id="email" placeholder="Email">
<input type="text" placeholder="Subject">
<textarea placeholder="Message"></textarea>
<button>Submit</button>
</form>
</div>
</div>
css
#show-modal {
border: none;
border-bottom: 2px solid rgb(48, 51, 54);
cursor: pointer;
color: rgb(48, 51, 54);
padding: 5px;
font-family: "Lato", sans-serif;
letter-spacing: 0.1em;
font-size: 13px;
line-height: 1.4;
}
.open-btn {
padding-top: 30px;
}
.modal {
background-color: rgb(0, 0, 0, 0.8);
position: absolute;
top: 0;
height: 1000px;
width: 100%;
display: none;
justify-content: center;
align-items: center;
}
.modal_content {
background-color: #fff;
padding: 2rem 4rem;
width: 500px;
height: 450px;
border-radius: 4px;
}
input[type="text"],
input[type="email"],
textarea {
width: 100%;
padding: 0.5rem;
display: block;
margin: 15px auto;
border: none;
border-bottom: 1px solid #000000;
}
textarea {
height: 100px;
}
.modal_content h1 {
font-family: "Ibarra Real Nova", serif;
color: rgba(40, 44, 48, 1);
font-weight: bold;
text-align: center;
font-size: 35px;
}
.close {
display: flex;
justify-content: flex-end;
margin-right: -2rem;
margin-top: -1rem;
cursor: pointer;
}
.submit {
width: 100%;
padding: 0.5rem;
background-color: rgba(234, 203, 193, 0.4);
border: none;
color: #fff;
transition: all 0.3s ease;
}
.submit:hover {
background-color: rgba(143, 126, 121, 0.4);
}
.modal--hidden {
display: none;
}
JavaScript
document.getElementById("show-modal").addEventListener("click", function() {
document.querySelector(".modal").style.display = "flex";
});
document.querySelector(".fas fa-times").addEventListener("click", function() {
document.querySelector(".modal").style.dispay = "none";
});
https://codepen.io/joanaoli09/pen/JjYoZoa

First your click position and X were different. Though you was attaching event on i but was clicking on X. In these case place X as a text of i. Secondly it has to be document.querySelector(".fas.fa-times") instead of document.querySelector(".fas fa-times") and thirdly use classList.toggle instead of adding class to style attribute
document.getElementById("show-modal").addEventListener("click", function() {
togglElementeClass();
});
document.querySelector(".fas.fa-times").addEventListener("click", function() {
togglElementeClass();
});
function togglElementeClass() {
document.querySelector(".modal").classList.toggle('flex');
}
#show-modal {
border: none;
border-bottom: 2px solid rgb(48, 51, 54);
cursor: pointer;
color: rgb(48, 51, 54);
padding: 5px;
font-family: "Lato", sans-serif;
letter-spacing: 0.1em;
font-size: 13px;
line-height: 1.4;
}
.open-btn {
padding-top: 30px;
}
.modal {
background-color: rgb(0, 0, 0, 0.8);
position: absolute;
top: 0;
height: 1000px;
width: 100%;
display: none;
justify-content: center;
align-items: center;
}
.modal_content {
background-color: #fff;
padding: 2rem 4rem;
width: 500px;
height: 450px;
border-radius: 4px;
}
input[type="text"],
input[type="email"],
textarea {
width: 100%;
padding: 0.5rem;
display: block;
margin: 15px auto;
border: none;
border-bottom: 1px solid #000000;
}
textarea {
height: 100px;
}
.modal_content h1 {
font-family: "Ibarra Real Nova", serif;
color: rgba(40, 44, 48, 1);
font-weight: bold;
text-align: center;
font-size: 35px;
}
.close {
display: flex;
justify-content: flex-end;
margin-right: -2rem;
margin-top: -1rem;
cursor: pointer;
}
.submit {
width: 100%;
padding: 0.5rem;
background-color: rgba(234, 203, 193, 0.4);
border: none;
color: #fff;
transition: all 0.3s ease;
}
.submit:hover {
background-color: rgba(143, 126, 121, 0.4);
}
.modal--hidden {
display: none;
}
.flex {
display: flex;
}
.fas.fa-times {
width: 20px;
height: 20px;
border: 1px solid green;
}
<div class="open-btn">
<button id="show-modal"><strong>Open Form</strong></button>
</div>
<div class="modal modal--hidden">
<div class="modal_content">
<div class="close">
<i class="fas fa-times">X</i>
</div>
<h1>Ask away</h1>
<form id="submit">
<input type="text" placeholder="Name">
<input type="email" id="email" placeholder="Email">
<input type="text" placeholder="Subject">
<textarea placeholder="Message"></textarea>
<button>Submit</button>
</form>
</div>
</div>

u have two mistake about closing event. one of them is your class name u need to write fa-times another one u wrote dispay it is wrong
document.querySelector(".fa-times").addEventListener("click", function() {
console.log("casa")
document.querySelector(".modal").style.display = "none";
});

The problem is in your second event listener:
you are trying to get element by ".fa fa-times" which is not a valid selector for your cross element.
Just replace ".fa fa-times" with ".fa.fa-times or ".fa-times" and it should work perfectly.
document.querySelector(".fa-times").addEventListener("click", function() {
document.querySelector(".modal").style.display = "none";
});

document.getElementById("show-modal").addEventListener("click", function() {
document.querySelector(".modal").style.display = "flex";
});
function closeMe() {
document.querySelector(".modal").style.display = "none";
}
#show-modal {
border: none;
border-bottom: 2px solid rgb(48, 51, 54);
cursor: pointer;
color: rgb(48, 51, 54);
padding: 5px;
font-family: "Lato", sans-serif;
letter-spacing: 0.1em;
font-size: 13px;
line-height: 1.4;
}
.open-btn {
padding-top: 30px;
}
.modal {
background-color: rgb(0, 0, 0, 0.8);
position: absolute;
top: 0;
height: 1000px;
width: 100%;
display: none;
justify-content: center;
align-items: center;
}
.modal_content {
background-color: #fff;
padding: 2rem 4rem;
width: 500px;
height: 450px;
border-radius: 4px;
}
input[type="text"],
input[type="email"],
textarea {
width: 100%;
padding: 0.5rem;
display: block;
margin: 15px auto;
border: none;
border-bottom: 1px solid #000000;
}
textarea {
height: 100px;
}
.modal_content h1 {
font-family: "Ibarra Real Nova", serif;
color: rgba(40, 44, 48, 1);
font-weight: bold;
text-align: center;
font-size: 35px;
}
.close {
display: flex;
justify-content: flex-end;
margin-right: -2rem;
margin-top: -1rem;
cursor: pointer;
}
.submit {
width: 100%;
padding: 0.5rem;
background-color: rgba(234, 203, 193, 0.4);
border: none;
color: #fff;
transition: all 0.3s ease;
}
.submit:hover {
background-color: rgba(143, 126, 121, 0.4);
}
.modal--hidden {
display: none;
}
<div class="open-btn">
<button id="show-modal"><strong>Open Form</strong></button>
</div>
<div class="modal modal--hidden">
<div class="modal_content">
<div class="close">
<i class="fas fa-times" onclick="closeMe()">X</i>
</div>
<h1>Ask away</h1>
<form id="submit">
<input type="text" placeholder="Name">
<input type="email" id="email" placeholder="Email">
<input type="text" placeholder="Subject">
<textarea placeholder="Message"></textarea>
<button>Submit</button>
</form>
</div>
</div>

First of all getting elements by general classes like fas fa which third party libraries provide (in this case font-awesome) is not a good practice. Because it's possible to use the same classes for another element in page. I suggest using an id for this situation or a specific class. Another problem is that we usually use <button> for actions not <i>.<i> tag is not action ready so by clicking on it you actually click on its content(X) not the tag. Now the problem in ur code is that when you set display:flex in your JS the element gets the style and when you document.querySelector(".modal").style.dispay = "none"; you don't clear the previous style (display:flex) so both of them are applied. You should clear display:flex then apply display:none or make a class like d-flex which toggels by click.
In HTML
<div class="close">
<i id="close-btn" class="fas fa-times">X</i>
</div>
In CSS
.d-flex
{
display:flex !important;
}
In Js
document.getElementById("show-modal").addEventListener("click", function() {
togglElementeClass();
});
document.querySelector("#close-btn").addEventListener("click", function() {
togglElementeClass();
});
function togglElementeClass() {
document.querySelector(".modal").classList.toggle('d-flex');
}

Categories