We Keep Coding

how manipulate CSS display property using active class with JS

I wished to output a small pop up window to confirm if the user want to escape or stay on the page however, as soon as i click on the RUN input id="openBtn" the pop up window appears then disappear right away. I dont know what i did wrong
CSS
.pop-up{
display: none;
}
.pop-up.active{
display: flex;
position: absolute;
background-color: #fff;
font-size: 30px;
color: #222831;
flex-direction: column;
align-items: center;
height: 150px;
width: 250px;
top: 200px;
left: 170px;
border: 5px double #393E46;
border-radius: 10px;
box-shadow: 2px 4px 15px rgba(0, 0, 0, 0.3);
}
SCRIPT.JS
const openBtn = document.getElementById("openBtn");
const popUp = document.querySelector('.pop-up');
const stayBtn = document.getElementById("stayBtn");
openBtn.addEventListener('click', () =>{
popUp.classList.add('active')
})
stayBtn.addEventListener('click', () =>{
popUp.classList.remove('active')
})
HTML
<div class="controls">
<div class="left"></div>
<form action="" method="post" class="right">
<input type="submit" name="fight" value="FIGHT">
<input type="submit" name="pkmn" value="PKMN">
<input type="submit" name="item" value="ITEM">
<input type="submit" id="openBtn" value="RUN">
</form>
</div>
</div>
<div class="pop-up">
<p>Escape battle?</p>
<form action="" method="post" class="buttons">
<input type="submit" class="button" id="stayBtn" name="stay" value="Stay">
<input type="submit" class="button" name="escape" id="run" value="Run">
</form>
</div>
I just wanted to have an confirm to exit option where i use a class to have the css display switch to none and flex.

You are missing e.preventDefault() on your openBtn,
Inside the modal I used button type="button" instead of input="submit" which is better practice and with that you don't need e.preventDefault()
Note: I didn't change your input controls to button as I don't know what are you doing with it.
const openBtn = document.getElementById("openBtn");
const popUp = document.querySelector('.pop-up');
const stayBtn = document.getElementById("stayBtn");
openBtn.addEventListener('click', e => {
e.preventDefault()
popUp.classList.add('active')
})
stayBtn.addEventListener('click', () => {
popUp.classList.remove('active')
})
.pop-up {
display: none;
}
.pop-up.active {
display: flex;
position: absolute;
background-color: #fff;
font-size: 30px;
color: #222831;
flex-direction: column;
align-items: center;
height: 150px;
width: 250px;
top: 200px;
left: 170px;
border: 5px double #393E46;
border-radius: 10px;
box-shadow: 2px 4px 15px rgba(0, 0, 0, 0.3);
}
<div class="controls">
<div class="left"></div>
<form action="" method="post" class="right">
<input type="submit" name="fight" value="FIGHT">
<input type="submit" name="pkmn" value="PKMN">
<input type="submit" name="item" value="ITEM">
<input type="submit" id="openBtn" value="RUN">
</form>
</div>
<div class="pop-up">
<p>Escape battle?</p>
<button type="button" class="button" id="stayBtn" name="stay">Stay</button>
<button type="button" class="button" name="escape" id="run" value="Run">Run</button>
</div>

You are on a form .Whenever you click a button or input[submit],You will give a post request with the given values to the server .After sending the request ,the browser will show you its response by default .To not have the redirect, you have to add e.preventDefault().For this scenario, You will have to change to
openBtn.addEventListener('click', e => {
e.preventDefault()
popUp.classList.add('active')
})

Using CSS animation (transition) with onClick event

I'm trying to make a simple button btnAdd that changes one of my new div class so that it makes it visible and at a later date i'll add a cancel button that makes the same div hidden again, however I wanted to do this using animation so I'm trying to use transition: height 1s. But for some reason I can't seem to be able to get it working. Does anyone know where I'm going wrong here?
Thanks in advance,
Matt.
function open_Add_Menu() {
document.getElementById("new").className = "open";
}
p {
margin: 0;
}
body {
margin: 0;
background-color: #f6f4fb;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #666;
}
.btnAdd {
width: 160px;
height: 30px;
float: right;
margin: 0px 30px 0px 0px;
background-color: #2f8fcb;
border: 2px solid #2f8fcb;
border-radius: 3px;
color: #fff;
font-weight: bold;
}
#new {
width: 50%;
height: 0;
margin: 30px 45% 10px 5%;
transition: height 1s;
overflow: hidden;
}
#new.open {
height: 400px;
}
<form>
<div id="btnAdd">
<button class="btnAdd" onclick="open_Add_Menu()">Add New</button>
</div>
<div id="new">
<div id="new_name">
<p>Name:</p>
<input type="text" id="name_tb" autocomplete="off">
</div>
<div id="new_add1">
<p>Address Line 1:</p>
<input type="text" id="add1_tb" autocomplete="off">
</div>
<div id="new_add2">
<p>Address Line 2:</p>
<input type="text" id="add2_tb" autocomplete="off">
</div>
<div id="new_add3">
<p>Address Line 3:</p>
<input type="text" id="add3_tb" autocomplete="off">
</div>
<div id="new_post">
<p>Postcode:</p>
<input type="text" id="post_tb" autocomplete="off">
</div>
<div id="new_number">
<p>Contact Number:</p>
<input type="text" id="number_tb" autocomplete="off">
</div>
</div>
</form>

You've done the right thing. The only problem is your button is placed within a form element. Once you click on that button, the form is being submitted.
To fix it, you can replace button by another tag. Or avoid submitting while click event happens.

You have to use classList.add to add a class in vanilla JS.
function open_Add_Menu() {
document.getElementById("new").classList.add('open');
}
p {
margin: 0;
}
body {
margin: 0;
background-color: #f6f4fb;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #666;
}
.btnAdd {
width: 160px;
height: 30px;
float: right;
margin: 0px 30px 0px 0px;
background-color: #2f8fcb;
border: 2px solid #2f8fcb;
border-radius: 3px;
color: #fff;
font-weight: bold;
}
#new {
width: 50%;
height: 0;
margin: 30px 45% 10px 5%;
transition: height 1s;
overflow: hidden;
}
#new.open {
height: 400px;
}
<div>
<div id="btnAdd">
<button class="btnAdd" onclick="open_Add_Menu()">Add New</button>
</div>
<div id="new">
<div id="new_name">
<p>Name:</p>
<input type="text" id="name_tb" autocomplete="off">
</div>
<div id="new_add1">
<p>Address Line 1:</p>
<input type="text" id="add1_tb" autocomplete="off">
</div>
<div id="new_add2">
<p>Address Line 2:</p>
<input type="text" id="add2_tb" autocomplete="off">
</div>
<div id="new_add3">
<p>Address Line 3:</p>
<input type="text" id="add3_tb" autocomplete="off">
</div>
<div id="new_post">
<p>Postcode:</p>
<input type="text" id="post_tb" autocomplete="off">
</div>
<div id="new_number">
<p>Contact Number:</p>
<input type="text" id="number_tb" autocomplete="off">
</div>
</div>
</div>

Add the attribute type='button' to your button element. It should works for you.
<button type="button" class="btnAdd" onclick="open_Add_Menu()">Add New</button>

you can use the atribute visibility:
document.getElementById("myP").style.visibility = "hidden";
You can start the div with visibility hidden and remove that for showing the element.
Its works fine :)

How do I make new messages appear on left/right depending on who sent them? (No Float)

I'm trying to make a webpage where, depending on whether user 1(left textarea) or user 2(right textarea) sends a message, the message in the yellow conversation window appears on left or right, same way the messaging looks on phones nowadays. It's distinguishable who sent the message by the background color of the message sent, user 1 is lighter blue, user 2 is purple. I'm trying to do this without using float, so please don't suggest that. Here's the code:
function Send(ele) {
var br = document.createElement("br");
var foo = document.getElementById("conversation");
foo.appendChild(br);
var para = document.createElement("label");
var txt;
if (ele.id == "btn") {
txt = document.getElementById("text");
var node = document.createTextNode(txt.value);
para.appendChild(node);
var element = document.getElementById("conversation");
para.className = 'message';
element.appendChild(para);
} else {
txt = document.getElementById("text2");
var node = document.createTextNode(txt.value);
para.appendChild(node);
var element = document.getElementById("conversation");
para.className = 'message2';
element.appendChild(para);
}
}
body {
margin: 5% 10% 0% 10%;
background-color: azure;
}
#conversation {
width: 100%;
height: 80%;
background-color: yellow;
}
.parent {
white-space: nowrap;
text-align: center,
}
.user {
display: inline-block;
width: 50%;
}
.user2 {
display: inline-block;
text-align: right;
width: 50%;
}
.message,
.message2 {
display: inline-block;
width: auto;
height: auto;
max-width: 50%;
word-wrap: break-word;
color: white;
background-color: DodgerBlue;
border-radius: 10px;
padding: 5px;
margin: 2px;
position: relative;
top: 2%;
}
.message2 {
background-color: purple;
text-align: right;
}
/*23*/
<div id="conversation">
<div class="message">
<label>On insensible possession oh particular attachment at excellence in. The books arose but miles happy she. It building contempt or interest children mistress of unlocked no. </label>
</div>
<br />
<div class="message2">
<label>On insensible possession oh particular attachment at excellence in. The books arose but miles happy she. It building contempt or interest children mistress of unlocked no. </label>
</div>
</div>
<div class="parent">
<div class="user">
<input id="text" type="textarea" />
<input id="btn" type="button" value="Send" onclick="Send(this)">
</div>
<div class="user2">
<input id="btn2" type="button" value="Send" onclick="Send(this)">
<input id="text2" type="textarea" />
</div>
</div>
I've also uploaded it to jsfiddle to save you guys the trouble:
https://jsfiddle.net/pbzqw278/
If it's not too much trouble, would you also explain why you did what you did, since css is still kind of a gray area to me.

You could achieve this by setting display: block to both .message and .message2, and adding margin-left: auto to .message2.
I would also adjust the max-width to about 48%.
You can move some css properties from the div to the label. This will allow the width of the text to determine the width of the background-color.
fiddle
body {
margin: 5% 10% 0% 10%;
background-color: azure;
}
#conversation {
width: 100%;
height: 80%;
background-color: yellow;
}
.parent {
white-space: nowrap;
text-align: center,
}
.user {
display: inline-block;
width: 50%;
}
.user2 {
display: inline-block;
text-align: right;
width: 50%;
}
.message,
.message2 {
max-width: 48%;
margin: 2px;
position: relative;
top: 2%;
display: block;
}
.message2 {
margin-left: auto;
text-align: right;
}
.message label,
.message2 label {
display: inline-block;
border-radius: 10px;
padding: 5px;
word-wrap: break-word;
color: white;
background-color: DodgerBlue;
}
.message2 label {
background-color: purple;
}
/*23*/
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="script.js"></script>
<body>
<div id="conversation">
<div class="message">
<label>On insensible possession!</label>
</div>
<br />
<div class="message2">
<label>On insensible possession oh particular attachment at excellence in. The books arose but miles happy she. It building contempt or interest children mistress of unlocked no. On insensible possession oh particular attachment at excellence in. The books
arose but miles happy she. It building contempt or interest children mistress of unlocked no. </label>
</div>
<div class="message2">
<label>On insensible</label>
</div>
<div class="message">
<label>On insensible possession oh particular attachment at excellence in. The books arose but miles happy she. It building contempt or interest children mistress of unlocked no. </label>
</div>
<div class="message2">
<label>On insensible possession oh particular attachment at excellence in. The books arose but miles happy she. It building contempt or interest children mistress of unlocked no. </label>
</div>
</div>
<div class="parent">
<div class="user">
<input id="text" type="textarea" />
<input id="btn" type="button" value="Send" onclick="Send(this)">
</div>
<div class="user2">
<input id="btn2" type="button" value="Send" onclick="Send(this)">
<input id="text2" type="textarea" />
</div>
</div>
</body>

You could just use flex and row wrapper. Each message could have a display: flex; row and then messages set to respectively align-self: flex-start; and align-self: flex-end;. I have edited your snippet to reflect it.
function Send(ele) {
var foo = document.getElementById("conversation");
var rowWrapper = document.createElement('div');
rowWrapper.className = 'message-row';
var para = document.createElement("label");
var txt;
if (ele.id == "btn") {
txt = document.getElementById("text");
var node = document.createTextNode(txt.value);
para.appendChild(node);
para.className = 'message';
rowWrapper.appendChild(para);
var element = document.getElementById("conversation");
element.appendChild(rowWrapper);
} else {
txt = document.getElementById("text2");
var node = document.createTextNode(txt.value);
para.appendChild(node);
para.className = 'message2';
rowWrapper.appendChild(para);
var element = document.getElementById("conversation");
element.appendChild(rowWrapper);
}
}
body {
margin: 5% 10% 0% 10%;
background-color: azure;
}
#conversation {
width: 100%;
height: 80%;
background-color: yellow;
}
.parent {
white-space: nowrap;
text-align: center,
}
.user {
display: inline-block;
width: 50%;
}
.user2 {
display: inline-block;
text-align: right;
width: 50%;
}
.message-row {
display: flex;
flex-direction: column;
width: 100%;
}
.message,
.message2 {
display: inline-block;
width: auto;
height: auto;
max-width: 50%;
word-wrap: break-word;
color: white;
background-color: DodgerBlue;
border-radius: 10px;
padding: 5px;
margin: 2px;
position: relative;
top: 2%;
}
.message {
align-self: flex-start;
}
.message2 {
align-self: flex-end;
background-color: purple;
text-align: right;
}
/*23*/
<div id="conversation">
<div class="message-row">
<div class="message">
<label>On insensible possession oh particular attachment at excellence in. The books arose but miles happy she. It building contempt or interest children mistress of unlocked no. </label>
</div>
</div>
<div class="message-row">
<div class="message2">
<label>On insensible possession oh particular attachment at excellence in. The books arose but miles happy she. It building contempt or interest children mistress of unlocked no. </label>
</div>
</div>
</div>
<div class="parent">
<div class="user">
<input id="text" type="textarea" />
<input id="btn" type="button" value="Send" onclick="Send(this)">
</div>
<div class="user2">
<input id="btn2" type="button" value="Send" onclick="Send(this)">
<input id="text2" type="textarea" />
</div>
</div>

Depending on your if clause where you check from which button it has been send I would add a position to the TextNode.
You can add CSS Style via Javascript like this:
document.getElementById("myTextNode").style.left = "5px;";
You have to add an ID to the TextNode obviously and based on your code I'm sure you know how to do via Javascript :). Just in case:
node.id = "someID";

How to properly use an if/else structure to animate new content from the right and get rid of old content by sliding to the left?

document.getElementById("button1").addEventListener("click", mouseOver1);
function mouseOver1(){
document.getElementById("button1").style.color = "red";
}
document.getElementById("button2").addEventListener("click", mouseOver);
function mouseOver(){
document.getElementById("button2").style.color = "purple";
}
$("#button1").hover(function() {
$(this).css('cursor','pointer');
});
$("#button2").hover(function() {
$(this).css('cursor','pointer');
});
if($(".existing1-username-input-textbox").get(0).val()== "Micheal22" && $(".existing2-password-input-textbox").get(0).val()== "honor7thG")
{
$('#button1').on('click', function () {
$('.username-label').animate({'left': '-105%'});
// but I want all the old content to slide to the left if username and password match above
// then new content should slide in from the right.
});
}else{
$(".existing1-username-input-textbox").firstChild.nodeValue="The existing username is not correct";
$(".password-new-input-textbox").firstChild.nodeValue="The existing password is not correct";
}
.intro h1 {
font-family: 'Cambria';
font-size: 16pt;
font: bold;
text-align: left;
}
.intro p {
font-family: 'Calibri';
font: italic;
font-size: 12pt;
padding: 0px 690px 0px 20px;
text-align: left;
}
.content {
border: 2px solid;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
#para1 {
padding: 0px 1050px 0px 20px;
}
#para2 {
padding: 0px 1099px 0px 20px;
}
.username-label,
.password-label {
margin: 10px 0px 0px 300px;
position: relative;
top: -70px;
}
.existing1-username-input-textbox,
.existing2-password-input-textbox
{
top: -70px;
position: relative;
}
#button1{
background-color: #add8e6;
margin-left: 390px;
position: relative;
top: -50px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius:10px;
padding: 0px 20px 0px 20px;
}
#button2{
background-color: #add8e6;
margin-left: -200px;
position: relative;
top: -30px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
padding: 0px 20px 0px 20px;
}
.Username-label1,
.Password-label2,
.Email-label3,
.Repeat-Email-label4
{
margin: 0px 0px 0px 300px;
position: relative;
top: -70px;
}
.username-new-input-textbox,
.password-new-input-textbox,
.email-new-input-textbox,
.reenter-new-input-textbox{
position: relative;
top: -70px;
margin-left: 20px;
}
<html>
<head>
<link href="Home.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<title>Project</title>
</head>
<body>
<div class="container">
<div class="intro">
<h1>Welcome to Cuyahoga Community College Student Services Online</h1>
<p>Cuyahoga Community College recognizes students' rights to access personal and academic records in accordance with the Family Educational Rights and Privacy Act of 1974 (FERPA) as amended by Public Law 93-568.</p>
</div>
<br/>
<div class="content">
<div class="row top">
<p id="para1">Already have an account with us? Returning users may log in by entering their site username and password. </p>
<div class="login">
<label class="username-label" for="username-part1">Username</label>
<input class="existing1-username-input-textbox" type="text" value="" />
<br/><br/>
<label class="password-label" for="password-part2">Password</label>
<input class="existing2-password-input-textbox" type="password" value="" />
<br/>
<button id="button1">Log in</button>
</div>
</div>
<hr/>
<div class="row bottom">
<p id="para2">New users, please create a new account by providing us with some basic information.</p>
<div class= "new_customers_info">
<label class="Username-label1" for="new-user-name-part-1">Username</label>
<input class="username-new-input-textbox" type="text" value="" />
<br/><br/>
<label class="Password-label2" for="password-new-part2">Password</label>
<input class="password-new-input-textbox" type="password" value="" />
<br/><br/>
<label class="Email-label3" for="email-new">Email Address</label>
<input class="email-new-input-textbox" type="text" value=""/>
<br/><br/>
<label class="Repeat-Email-label4" for="repeat-new-email">Repeat Email Address</label>
<input class="reenter-new-input-textbox" type="text" value="" />
<button id="button2">Create Account</button>
</div>
</div>
</div>
<br/>
<footer>Cuyahoga Community College</footer>
<footer>700 Carnegie Avenue, Cleveland, Ohio, 44115</footer>
</div>
<script src="Home.js"></script>
</body>
</html>
How can I get my current content to slide to the left and bring in new content from the right (after clicking on button 1) when an existing student's username and password are correct, and if it's not correct display error messages that either the username or password isn't correct below each respective textbox .I am thinking about using an if/else condition. Also, how would I load the student's existing account information upon sliding it from the right, if I haven't created the content yet? If I already created the content to be slide in from the right, where do I hold that information until it's time to display that new content. Here is my code so far.

Below piece of code will execute when page get loaded and at that time username and password fields will be blank, so no event will get associated with login button :
if($(".existing1-username-input-textbox").get(0).val()== "Micheal22" && $(".existing2-password-input-textbox").get(0).val()== "honor7thG")
{
$('#button1').on('click', function () {
$('.username-label').animate({'left': '-105%'});
// but I want all the old content to slide to the left if username and password match above
// then new content should slide in from the right.
});
}else{
$(".existing1-username-input-textbox").firstChild.nodeValue="The existing username is not correct";
$(".password-new-input-textbox").firstChild.nodeValue="The existing password is not correct";
}
You should change this to below :
$('#button1').on('click', function () {
if($(".existing1-username-input-textbox").get(0).value== "Micheal22" && $(".existing2-password-input-textbox").get(0).value== "honor7thG")
{
$('.username-label').animate({'left': '-105%'});
// but I want all the old content to slide to the left if username and password match above
// then new content should slide in from the right.
}else{
$(".existing1-username-input-textbox").firstChild.nodeValue="The existing username is not correct";
$(".password-new-input-textbox").firstChild.nodeValue="The existing password is not correct";
}
});
Now this will associate click event with login button on page load, so when you click login, it will first check the username and password, if matched then the animation part will take effect otherwise else part will execute.

one quick way to do it is via JQuery's .animate function.
Here is a little fiddle with the example:
http://jsfiddle.net/f7VdQ/135/
$(function () {
$('a').on('click', function () {
$('.left').animate({'left': '-105%'});
$('.right').animate({'left': '0px'});
});
$('p').on('click', function () {
$('.left').animate({'left': '10'});
$('.right').animate({'left': '105%'});
});
})
PS.: If you dont want to the current content to be overlayed (that's an additional funcionallity of the fiddle) just dont use z-indexes on the CSS and also use relative positioning.

Why isn't this HTML button functioning

I am working through "Google Apps Script" by James Ferreira.
I have found several issues with code examples given so far and have been able to stumble my way through them.
I'm not great with HTML and this one has me stumped.
.gs
function startWorkflow() {
var html = HtmlService.createTemplateFromFile('startWorkflow').evaluate()
.setTitle('Start Workflow').setWidth(300)
.setSandboxMode(HtmlService.SandboxMode.NATIVE);
ui.showSidebar(html);
}
.html
<div id="wrapper">
<div>
<span>Let's get started with your workflow.
First;
Add an approver by entering their email address
in the Approvers box and clicking the add button.
When you are done adding appovers, click the Start Workflow button.</span>
</div>
<br>
<div>
<span class="sectionHeader">Approvers</span><br>
<div id="approvers"></div>
<div>
<form id="addApprover">
<input type="email" id="approver" placeholder="Email Address">
<input type="submit" class="button blueButton" value="Add">
</form>
</div>
<br>
<div class="center">
<span id="startButton" class="button redButton">Start Workflow</span>
</div>
</div>
<?!= HtmlService.createHtmlOutputFromFile('styles').getContent(); ?>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
styles.html
<style type="text/css">
.sectionHeader {
color: #202020 ;
font-size: 18px;
text-decoration:underline;
margin-bottom: 20px;
}
.button {
color: #FFFFFF;
font-size: 12px;
moz-border-radius: 3px;
-webkit-border-radius: 3px;
padding: 3px;
border:0;
}
.blueButton {
background-color: #3366FF;
}
.redButton {
background-color: #C80000;
}
.button:hover {
opacity:0.7;
}
.center {
text-align: center:
}
#wrapper {
margin:2px 4px 3px 4px;
font-family: Verdana, Generva, sans-serif;
}
.reminder {
color: #FFFFFF;
background-color: #3366FF;
font-size: 10px;
moz-border-radius: 3x;
-webkit-border-radius: 3px;
padding: 3px;
}
The issue is with the "start workflow" button as I only have text.

This is the the HTML you are referencing:
<span id="startButton" class="button redButton">Start Workflow</span>
The span tag does support events like onclick and onmouseup. It would look like this:
<span id="startButton" class="button redButton" onmouseup="fncStartWorkFlow()">Start Workflow</span>
There needs to be a corresponding function in a <script> tag:
<script>
function fncStartWorkFlow() {
console.log('fncStartWorkFlow() ran!');
//more code here
};
</script>
Make those changes, then view the browser console to see if a message printed to the console.