I've written a fairly simple form to be sent to my Firebase database, but my database doesn't seem to be updating with the new data from my submit.html page. I'm quite new to Firebase, and I've referenced the documentation, but I'm sure I've overlooked something. For testing purposes, the web application at this stage is meant to simply send a first and last name to my database, listed under a collection named graduate.
I also want to assign it a unique documentID/Auto-ID. Per the Firebase documentation:
[...] the Firebase JavaScript clients provide a push() function that
generates a unique ID, or key, for each new child. By using unique
child keys, several clients can add children to the same location at
the same time without worrying about write conflicts.
This seems to be exactly what I'm looking for, and so I've included the push call with my function below.
I should also probably mentioned that I've written the following rule for my database:
{
/* Visit https://firebase.google.com/docs/database/security to learn more about security rules. */
"rules": {
".read": true,
".write": true
}
}
Anyway, here is my code:
My HTML:
<!DOCTYPE html>
<html>
<head>
<title>Student Tracking</title>
<script src="authentication.js"></script>
<link rel="stylesheet" href="animate.css">
<link href="https://fonts.googleapis.com/css?family=Cormorant|Roboto:100" rel="stylesheet">
<link href="style.css" rel="stylesheet" type="text/css" />
<script src="app.js"></script>
</head>
<body>
<div id="container">
<header>
<img src="logo.png" class="logo">
<h1 class="englogo">Department of English</h1>
<div class="nav">
<ul>
<li>Home</li>
<li>Submit</li>
<li>Query</li>
</ul>
</div>
<div id="contentform">
<form id="newUserForm">
<h3>Complete the following form to add your student information
to the database.
</h3>
<label for="Field1">First Name:</label><br>
<input id="userfName" name="Field1" type="text" value=""><br><br>
<label for="Field2">Last Name:</label><br>
<input id="userlName" name="Field2" type="text" value=""><br><br>
<label for="Field3"></label><br>
<input id="saveForm" name="saveForm" type="button" value="Submit Form">
</form>
</div>
</header>
</div>
</body>
</html>
My app.js:
var config = {
apiKey: "apiKey",
authDomain: "authDomain",
databaseURL: "url",
projectId: "proID",
storageBucket: "SB",
messagingSenderId: "sendID"
};
firebase.initializeApp(config);
var rootRef = firebase.database().ref().child('graduate');
$('#saveForm').click(function(){
rootRef.push().set({
firstName:$('#userfName').val(),
lastName:$('#userlName').val()
});
})
My CSS:
.logo {
display: inline-block;
margin: auto 0;
}
.google {
color: #0099CC;
background: transparent;
border: 1px solid #0099CC;
border-radius: 6px;
}
.nav {
position: relative;
float: right;
padding: 60px 20px 15px 10px;
text-align: right;
z-index: 1;
background: white;
margin: 0 auto;
}
.nav ul {
list-style: none;
margin: 0;
padding: 0;
}
.nav ul li {
display: inline-block;
list-style: none;
margin: 0;
padding: 0;
font-family: 'Roboto', sans-serif;
font-size: 1.3em;
}
.nav li a {
text-decoration: none;
color: black;
margin: 4px;
}
h1.englogo {
display: inline-block;
padding-left: 1%;
font-family: 'Cormorant', serif;
position: relative;
bottom: 15px;
}
header {
height: 100px;
width: 100%;
z-index: 10;
position: fixed;
border-bottom: solid thin;
background-color: white;
}
#content {
width: 100%;
text-align: center;
position: relative;
top: 200px;
height: 1500px;
font-family: 'Roboto', sans-serif;
}
#contentForm {
widows: 100%;
position: relative;
top: 150px;
height: 1500px;
}
form {
width: 100%;
position: relative;
top: 90px;
height: 1500px;
font-family: 'Roboto', sans-serif;
border: none;
}
I suspect your root reference might be off. Maybe try this:
var ref = firbase.database().ref(<ROOT_REF>)
var rootRef = ref.child('graduate')
You have changed the authorization in the database, by default it only allows writing when the user is logged in.
I was able to make my program work. Per this site, I needed to move my .js files outside of the head. I moved them right before the closing body tag.
<!DOCTYPE html>
<html>
<head>
<title>Department of English | Student Tracking</title>
<script src="https://www.gstatic.com/firebasejs/5.5.3/firebase.js"></script>
<link rel="stylesheet" href="animate.css">
<link href="https://fonts.googleapis.com/css?family=Cormorant|Roboto:100" rel="stylesheet">
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<header>
<img src="olemiss.png" class="logo">
<h1 class="englogo">Department of English</h1>
<div class="nav">
<ul>
<li>Home</li>
<li>Submit</li>
<li>Query</li>
</ul>
</div>
<form id="newUserForm">
<h3>Complete the following form to add your student information
to the database.
</h3>
<label for="Field1">First Name:</label><br>
<input id="userfName" name="Field1" type="text" value=""><br><br>
<label for="Field2">Last Name:</label><br>
<input id="userlName" name="Field2" type="text" value=""><br><br>
<fieldset>
<legend>Program</legend>
<ul>
<li>
<label for="title_1">
<input type="radio" id="undergraduate" name="title" value="Undergraduate" >
Undergraduate
</label>
</li>
<li>
<label for="title_2">
<input type="radio" id="graduate" name="title" value="Graduate">
Graduate
</label>
</li>
</ul>
</fieldset><br>
<label for="Field3">Graduate Year (XXXX):</label><br>
<input id="gradDate" name="Field3" type="text" value=""><br><br>
<input id="saveForm" name="saveForm" type="submit" value="Submit Form">
</form>
</header>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="app.js"></script>
<script src="authentication.js"></script>
</body>
</html>
Related
I work with Electron.
I have three files in my project.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="../css/styles.css">
<script src="../js/preload.js"></script>
<script src="../js/signup.js"></script>
</head>
<body>
<form action="" onsubmit="return validate()">
<label for="email"><b>Почта</b></label>
<input type="text" placeholder="Введите почту..." name="email" required>
<label for="psw"><b>Пароль</b></label>
<input type="password" placeholder="Введите пароль..." id="psw" required>
<label for="psw-repeat"><b>Подтверждение пароля</b></label>
<input type="password" placeholder="Повторите пароль..." id="psw-repeat" required>
<hr>
<p id = "terms">Создавая аккаунт, вы соглашаетесь с нашими условиями пользования и приватности.</p>
<button type="submit" class = registerbtn>Зарегистрироваться</button>
</form>
</body>
</html>
styles.css
#import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght#300&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Raleway&display=swap');
body {
font-family: 'Raleway', sans-serif;
}
.sign_up {
padding: 16px;
}
input[type=text],
input[type=password] {
width: 100%;
padding: 15px;
margin: 5px 0 22px 0;
display: inline-block;
border: none;
background: #f1f1f1;
font-family: 'Raleway', sans-serif;
}
hr
{
border: 1px solid #f1f1f1;
margin-bottom: 25px;
}
.registerbtn {
background-color: darkcyan;
color: white;
padding: 16px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
opacity: 0.9;
}
.registerbtn:hover {
opacity: 1;
}
a {
color: dodgerblue;
}
#warning {
color: crimson;
}
signup.js
function validate()
{
var password = document.getElementById(psw).value;
var password_repeat = document.getElementById(psw-repeat).value
if(password != password_repeat)
{
document.getElementById(psw).insertAdjacentHTML("afterend", "<p id = \"warning\">Пароли не совпадают!</p>")
}
}
The project itself is written in Russian. I want to use the file signup.js to check the identity of the fields "psw" and "psw-repeat", but when the program runs, nothing happens. As for the content of the fields, they are emptied when the button is clicked.
The onsubmit value should only have method call, not with "return".
So, I suggest you to use something like this:
onsubmit="validate()"
Documentation
Also, the submit button have issue with "class" css, it should look like this:
<button type="submit" class="register btn">Зарегистрироваться</button>
I currently practicing HTML/CSS/DOM(JS) and more focusing on DOM right now. For now, I try to clone the instagram for studying HTML/CSS/DOM. In the DOM part(js), when I try to use event(EventListener), I am curious that "If the other project or Website need so many EventListener,Do I have to declare name.addEventListener("event name", function()) every-time? Can I declare the EventListener at the body or wrapper(div-class) and using event.target, so I don't need to be declared EventListener several times?" I am sorry if I explain so weird and messy. I tried to explain my brain storming thought. I will share my code just in case
This is HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
Westagram!
</title>
<link rel="stylesheet" href="style/login.css" type="text/css">
<link rel="stylesheet" href="style/common.css" type="text/css">
<!-- <link rel="stylesheet" href="js/login.js"> -->
</head>
<body>
<!-- 아래 모든 div들을 포함하는 제일 상위 Container -->
<div class="wrapper">
<div class="logo">
<p class="westagram">Westagram</p>
</div>
<!-- 로그인 섹션 -->
<div class="login-container">
<div class="id">
<input type="text" id="text" placeholder="Phone number, username, or email" />
</div>
<div class="pw">
<input type="password" id="password" placeholder="Password">
</div>
<div class="bt">
<button class="login-btn">Log in
</button>
</div>
</div>
<!-- 비밀번호 찾는 섹션 -->
<div class="click">
<a class="find-password">Forgot Password</a>
</div>
</div>
<script src="js/login.js"></script>
</html>
This is CSS file
*{
padding: 0;
margin: 0;
text-decoration: none;
list-style: none;
box-sizing: border-box;
}
#font-face {
font-family: instagramFont;
src: url("../src/westagram.ttf") format("opentype");
}
.wrapper {
margin: 250px 250px 0px 250px;
padding: 30px;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
border: solid 1px #D3D3D3;
width: 500px;
height: 500px;
}
.wrapper .login-container {
width: 400px;
height: 500px;
}
.wrapper .login-container .id{
margin-top: 70px;
}
#text {
width: 100%;
height: 45px;
border: solid 1px #D3D3D3;
border-radius: 5px;
padding-left: 15px;
}
#password {
width: 100%;
height: 45px;
border: solid 1px #D3D3D3;
border-radius: 5px;
padding-left: 15px;
}
.wrapper .login-container .bt .login-btn{
width: 100%;
height: 45px;
border: solid 1px #D3D3D3;
border-radius: 5px;
/*background-color: #ff000;*/
background-color: #B2DFFC;
cursor: pointer;
/*padding-left: 15px;*/
}
.wrapper .login-container .pw {
margin-top: 10px;
margin-bottom: 10px;
}
.wrapper .login-container.bt {
}
.westagram {
font-size : 60%;
font-family: instagramFont;
font-size: 5rem;
}
This is JS code
let id = document.querySelector("#text");
let password = document.querySelector("#password");
let loginButton = document.querySelector(".login-btn")
function active() {
if(id.value.length > 0 && password.value.length > 0){
loginButton.style.backgroundColor='#0095F6';
} else {
loginButton.style.backgroundColor='#B2DFFC'
}
}
id.addEventListener("keyup", active)
password.addEventListener("keyup", active)
I really appreciate your help in advance!
Can you add one event listener? Yes. It is event delegation. You use the target and you do checks to see if it is the element. Multiple ways to check if the element is the same. You can use is(), you can check a class/id/attribute or you can see if the elements match a reference
document.body.addEventListener("input", function (evt) {
const target = evt.target;
if (target.closest('#inp1, #inp2')) {
console.log(target.value);
}
});
<input type="text" id="inp1" class="loginInput" />
<input type="text" id="inp2" class="loginInput" />
document.body.addEventListener("input", function (evt) {
const target = evt.target;
if (target.classList.contains("loginInput")) {
console.log(target.value);
}
});
<input type="text" id="inp1" class="loginInput" />
<input type="text" id="inp2" class="loginInput" />
var inp1 = document.querySelector("#inp1");
var inp2 = document.querySelector("#inp2");
document.body.addEventListener("input", function(evt) {
const target = evt.target;
if (target === inp1 || target === inp2) {
console.log(target.value);
}
});
<input type="text" id="inp1" class="loginInput" />
<input type="text" id="inp2" class="loginInput" />
In the inputs are in the same container, you might not even care what input it is. Just bind the event listener to the parent. Any action inside of it will be picked up.
document.querySelector('#login').addEventListener("input", function(evt) {
const target = evt.target;
console.log(target.value);
});
<form id="login">
<input type="text" id="inp1" class="loginInput" />
<input type="text" id="inp2" class="loginInput" />
</form>
You can write a function to prevent repeating exactly the same event listeners:
function eventHandler(event, func, target ){
return target.addEventListener(event, func);
}
eventHandler("keyup", active, id);
I am trying to build a form and do some validation using JS. On success I want to redirect it to some other page in the same directory. While running window.location.href over console it is working...but while submitting form, it is not working.
Can someone please help me in this.
My code is:
<html>
<head>
<style>
body {font-family: Arial, Helvetica, sans-serif;}
input[type=text], input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
button {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
}
button:hover {
opacity: 0.8;
}
.container {
padding: 16px;
width: 400px;
align-self: center;
}
span.psw {
padding-top: 16px;
}
</style>
<title>Login Page</title>
</head>
<body style="text-align: center;">
<h2 style="text-align: center;">The Mega Cart</h2>
<form name=loginForm onsubmit="login()" style="display: inline-block;">
<div class="container" style="text-align: center;">
<label for="uname"><b>Username</b></label>
<input type="text" placeholder="Enter Username" name="uname" required>
<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required>
<button type="submit">Login</button>
</div>
<span class="psw">New user Sign up here. Sign Up</span>
</div>
</form>
</body>
<script>
function login() {
let uname = document.forms["loginForm"]["uname"].value;
let pwd = document.forms["loginForm"]["psw"].value;
window.location.href="main.html";
return false;
}
</script>
</html>
I have already checked that this login function is called.
When you click on the form submit button it call the function login in javascript. In which you have write down the code to redirect the page.
You forgot to prevent the form to submit and that is why you are redirecting to the same page with filled-up values.
If you want to submit your form to specific URL then you should add the action attribute to the form like below.
<form name=loginForm action="URL on which you want to submit form" onsubmit="login()" style="display: inline-block;">
If you want to redirect from the login() function then you should pass the event as an argument from the form and then prevent form submission from the login() function. Please check the below code.
In your form: <form name=loginForm onsubmit="login(event)" style="display: inline-block;">
Change Login function:
function login(e) {
e.preventDefault();
let uname = document.forms["loginForm"]["uname"].value;
let pwd = document.forms["loginForm"]["psw"].value;
window.location.href="main.html";
}
NOTE! Don't forget to pass event in login function
Try this:
window.location.replace('main.html');
In onsubmit function, you can't redirect the page
First, In your form tag, add an action attribute
<form name=loginForm onsubmit="login()" action="main.html" style="display: inline-block;">
Second, Fixed your login function
function login() {
let uname = document.forms["loginForm"]["uname"].value;
let pwd = document.forms["loginForm"]["psw"].value;
return false;
}
Check the redirect URL that contains your data
Try This:
<html>
<head>
<style>
body {font-family: Arial, Helvetica, sans-serif;}
input[type=text], input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
button {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
}
button:hover {
opacity: 0.8;
}
.container {
padding: 16px;
width: 400px;
align-self: center;
}
span.psw {
padding-top: 16px;
}
</style>
<title>Login Page</title>
</head>
<body style="text-align: center;">
<h2 style="text-align: center;">The Mega Cart</h2>
<form name=loginForm onsubmit="login()" style="display: inline-block;">
<div class="container" style="text-align: center;">
<label for="uname"><b>Username</b></label>
<input type="text" placeholder="Enter Username" name="uname" required>
<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required>
<button type="button" onclick="login()">Login</button>
</div>
<span class="psw">New user Sign up here. Sign Up</span>
</div>
</form>
</body>
<script>
function login() {
let uname = document.forms["loginForm"]["uname"].value;
let pwd = document.forms["loginForm"]["psw"].value;
window.location.href = "https://minisoft.com.bd/";
return false;
}
</script>
</html>
I want to make the body appear when the website loads. I tried lots of things but didn't work. I would be grateful for help.
var celyLogin = $(".container");
$(document).ready(function(){
/*! Fades in page on load */
$(".container").css('display', 'none');
$(".container").fadeIn(5000);
});
I tried changing from class to id, didn't work. I asked this question once but I had another issue with not putting . before "container". I don't know where's the issue. Please help. Here are CSS and HTML:
h1 {
display: block;
color: aliceblue;
text-align: center;
}
body {
background-color: #0c0c0c;
font-family: 'Fira Code', monospace;
}
.container {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
color: white;
}
.submit {
display: block;
margin: auto;
background-color: black;
color: white;
}
<!DOCTYPE html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Welcome</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body class="container">
<div>
<div>
<h1>WELCOME USER</h1>
<div id="UandP">
<h3>
Username: <input class="username" type="text" name="username">
</h3>
<h3>
Password: <input class="password" type="password" name="password">
</h3>
</div>
<input type="button" class="submit" value="Log In" name="submit" onclick="validate()">
</div>
</div>
</body>
<script scr="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script scr="script.js"></script>
</html>
You have a typo in both of your JavaScript imports. You typed scr instead of src.
I am trying to get my document.on function to work when the user clicks on the p tag that has a class called card. So far the function is non responsive. What should I change so the function will respond when I click on the p tag that has a class called card. Here is my HTML and JQuery code.
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="description" content="Contacts">
<title>Contacts</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('button').click(function(){
var first = $('input.first').val();
var last = $('input.last').val();
var desc = $('textarea').val();
$('div.right').append("<p class='card'><h1>"+ first +' '+last+"</h1><h4>'Click for description!'</h4></p><p class='back'>"+desc+"</p>");
return false;
});
$(document).on('click', 'p.card', function(){ //this is the function I am trying to get to work.
alert("test");
});
});
</script>
</head>
<body>
<div class="wrapper">
<div class="left">
<form action="#">
<p >First name: <input type="text" name="fname" class="first"></p>
<p >Last name: <input type="text" name="lname" class="last"></p>
<p class="desc">Description:</p>
<p><textarea rows="4" cols="50"></textarea></p>
<button>Add User</button>
</form>
</div>
<div class="right">
</div>
</div>
</body>
Here is my css code
*{
/* outline: 2px dotted red;*/
border: 0 none;
padding: 0;
margin: 0;
}
div.wrapper{
width: 970px;
min-height: 100px;
margin-left: auto;
margin-right: auto;
}
div.left{
border: 2px solid black;
width: 500px;
display: inline-block;
}
div.right{
width: 200px;
display: inline-block;
height: 100px;
vertical-align: top;
padding-right: 100px;
text-align: center;
}
p{
margin-left: 80px;
margin-top: 20px;
font-size: 20px;
width: 400px;
}
p.email{
margin-left: 45px;
}
button{
margin: 30px;
height: 20px;
width: 100px;
margin-left: 75px;
text-align: center;
}
div.card{
margin-left: 100px;
margin-bottom: 20px;
border: 2px solid black;
width: 300px;
height: 100px;
text-align: center;
}
p.back{
display: none;
margin: 0px;
padding: 0px;
text-align: center;
}
textarea{
border: 2px solid black;
}
Somehow the p.class you were appending was broken, it was below the other elements and was not being identified as the sender by jQuery event.
The following works fine:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="description" content="Contacts">
<title>Contacts</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('button').click(function(){
var first = $('input.first').val();
var last = $('input.last').val();
var desc = $('textarea').val();
var p = $('<p class="card">');
p.append("<h1>"+ first +' '+last+"</h1><h4>'Click for description!'</h4><p class='back'>"+desc+"</p>");
$('div.right').append(p);
return false;
});
$(document).on('click', 'p.card', function(){ //this is the function I am trying to get to work.
alert("test");
});
});
</script>
</head>
<body>
<div class="wrapper">
<div class="left">
<form action="#">
<p >First name: <input type="text" name="fname" class="first"></p>
<p >Last name: <input type="text" name="lname" class="last"></p>
<p class="desc">Description:</p>
<p><textarea rows="4" cols="50"></textarea></p>
<button>Add User</button>
</form>
</div>
<div class="right">
</div>
</div>
</body>
your code were not right , the appending elements not formatted as your wish , thats why the click function not working, check the below snippt i have fixed your code, hope fully this will help you
$(document).ready(function(){
$('button').click(function(){
var first = $('input.first').val();
var last = $('input.last').val();
var desc = $('textarea').val();
$('div.right').append('<p class="card"></p>');
$('.card').html("<h1> first +' '+last</h1><h4>Click for description!'</h4><p class='back'>+desc+</p>"
);
});
$(document).on('click', 'p.card', function(){ //this is the function I am trying to get to work.
alert("test");
});
});
* {
/* outline: 2px dotted red;*/
border: 0 none;
padding: 0;
margin: 0;
}
div.wrapper {
width: 970px;
min-height: 100px;
margin-left: auto;
margin-right: auto;
}
div.left {
border: 2px solid black;
width: 500px;
display: inline-block;
}
div.right {
width: 200px;
display: inline-block;
height: 100px;
vertical-align: top;
padding-right: 100px;
text-align: center;
}
p {
margin-left: 80px;
margin-top: 20px;
font-size: 20px;
width: 400px;
}
p.email {
margin-left: 45px;
}
button {
margin: 30px;
height: 20px;
width: 100px;
margin-left: 75px;
text-align: center;
}
div.card {
margin-left: 100px;
margin-bottom: 20px;
border: 2px solid black;
width: 300px;
height: 100px;
text-align: center;
}
p.back {
display: none;
margin: 0px;
padding: 0px;
text-align: center;
}
textarea {
border: 2px solid black;
}
<div class="wrapper">
<div class="left">
<form action="#">
<p >First name:
<input type="text" name="fname" class="first">
</p>
<p >Last name:
<input type="text" name="lname" class="last">
</p>
<p class="desc">Description:</p>
<p>
<textarea rows="4" cols="50"></textarea>
</p>
<button>Add User</button>
</form>
</div>
<div class="right"> </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
looks like You're misusing the header tags.
I tried your DOM structure, and what's happening is that when Firefox/Chrome sees an invalid <h1> tag inside the <p>, it automatically closes the <p> tag. You can clearly see this in Developer Tools.
You should use <span> tags instead of header tags, check this it Works here
JS CODE:
$('div.right')
.append('<p class="card"><span>'+first+'<==>'+last+'</span>Click for Description!!!</p>');
Using developer tools inpsection, you'll see your added html is
<p class="card"></p><h1> </h1><h4>'Click for description!'</h4><p></p><p class="back"></p>`
No matter what I've tried, I can't get Firefox to create insert that html as you want it!! it's like it doesn't want to put h1/h4 inside a p so decides to close the p early!
change to
$('div.right').append("<div class='card'><h1>"+ first +' '+last+"</h1><h4>'Click for description!'</h4></div><p class='back'>"+desc+"</p>");
and it all goes good - indeed, it's odd, that you already have css for div.card, but not p.card!!
You could do it in Javascript and impliment jquery in the function:
var div = document.getElementById('someid');
function foo(e) {
//Jquery Here
}
div.addEventListener('click', foo);
This is what I use for a lot of my functions.
Wrap card with <div/> instead of <p/> and it should work. As you have other block elements inside <p/>. It's breaking your html.
$('div.right').append("<div class='card'><h1>"+ first +' '+last+"</h1><h4>'Click for description!'</h4><p class='back'>"+desc+"</p></div>");
And then change 'p.card' to 'div.card'.