I have JS code where I am changing the style of an HTML element based on an AJAX response.
So my code looks like this.
$.ajax(settings).done(function(response) {
const button_submit = document.getElementById("submit")
button_submit.disabled = response[0];
button_submit.style.cursor = '\"' + response[1] + '\"';
button_submit.style.marginTop = '\"' + response[3] + '\"';
document.getElementById("email").style.visibility = '\"' + response[2] + '\"';
})
input[type=text],
select {
width: 100%;
padding: 12px 20px;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
font-size: 20px;
margin-bottom: 1.2 rem;
margin-bottom: -6%;
}
#submit {
width: 100%;
background: #f39d13;
background: linear-gradient(to bottom, #f39d13 0, #c64f01 100%);
color: white;
padding: 14px 20px;
margin-top: 4%;
border: none;
border-radius: 4px;
font-size: 20px;
cursor: pointer;
}
#customForm {
border-radius: 5px;
padding: 20px;
margin: auto;
width: 65%;
}
p {
font-size: 12px;
color: gray;
margin-top: 5%;
text-align: center;
}
#email {
visibility: hidden;
font-size: 16px;
color: red;
line-height: -6px;
line-height: 1.6;
text-align: left;
display: block;
}
</head>
<div id="customForm">
<form accept-charset="UTF-8" id="" action="#action" method="POST">
<input name="inf_form_xid" type="hidden" value="dd500cb6988ssd3e0151492cb3eff8cf594" />
<input name="inf_form_name" type="hidden" value="UYTS" />
<input name="if_version" type="hidden" value="1.70.0.4582435" />
<div class="if-field">
<label for="inf_field_Email"></label>
<input id="inf_field_Email" name="inf_field_Email" placeholder="Enter your email address " type="text" /></div>
<div>
<div> </div>
</div>
<label id="email">Please enter a valid email address.</label>
<div class="ifn-submit">
<button id="submit" type="submit">Send Now</button></div>
</form>
</div>
But the style is not changing even after all of the JS function is finished.
I wonder what is wrong with my code.
The response of the AJAX is an array that I am going to put on style properties using JS.
Sample response:
['false', 'pointer', 'hidden', '-3%']
The string 'false' is not the same as the boolean false. The disabled property should be a boolean.
You shouldn't add quotes around the other properties. Quotes are part of the syntax in textual styles, they're not part of the property value itself.
$.ajax(settings).done(function(response) {
const button_submit = document.getElementById("submit")
button_submit.disabled = response[0] === 'true';
button_submit.style.cursor = response[1]';
button_submit.style.marginTop = response[3];
document.getElementById("email").style.visibility = response[2];
})
input[type=text],
select {
width: 100%;
padding: 12px 20px;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
font-size: 20px;
margin-bottom: 1.2 rem;
margin-bottom: -6%;
}
#submit {
width: 100%;
background: #f39d13;
background: linear-gradient(to bottom, #f39d13 0, #c64f01 100%);
color: white;
padding: 14px 20px;
margin-top: 4%;
border: none;
border-radius: 4px;
font-size: 20px;
cursor: pointer;
}
#customForm {
border-radius: 5px;
padding: 20px;
margin: auto;
width: 65%;
}
p {
font-size: 12px;
color: gray;
margin-top: 5%;
text-align: center;
}
#email {
visibility: hidden;
font-size: 16px;
color: red;
line-height: -6px;
line-height: 1.6;
text-align: left;
display: block;
}
</head>
<div id="customForm">
<form accept-charset="UTF-8" id="" action="#action" method="POST">
<input name="inf_form_xid" type="hidden" value="dd500cb6988ssd3e0151492cb3eff8cf594" />
<input name="inf_form_name" type="hidden" value="UYTS" />
<input name="if_version" type="hidden" value="1.70.0.4582435" />
<div class="if-field">
<label for="inf_field_Email"></label>
<input id="inf_field_Email" name="inf_field_Email" placeholder="Enter your email address " type="text" /></div>
<div>
<div> </div>
</div>
<label id="email">Please enter a valid email address.</label>
<div class="ifn-submit">
<button id="submit" type="submit">Send Now</button></div>
</form>
</div>
Related
I use a pure CSS Accordion to present my content. The Accordion works with normal checkboxes. Now I want to implement, that by sending a simple link, a single checkbox entry will be checked and with the help of an anchor the browser should jump to that entry and show the specific content to the reader.
The whole thing should be done preferably without a scripting or programming language, but after a lot of research I think that at least JavaScript will be required (it must run on the client side, so no PHP or similar).
I have searched and tested a lot but unfortunately I have not found any suitable solution that would work.
```
<!DOCTYPE html>
<html>
<head>
<title>My example Website</title>
</head>
<body>
<style>
body {
font-size: 21px;
font-family: Tahoma, Geneva, sans-serif;
max-width: 550px;
margin: 0 auto;
background-color: black;
}
input {
display: none;
}
label {
display: block;
padding: 8px 22px;
margin: 0 0 1px 0;
cursor: pointer;
background: #181818;
border: 1px solid white;
border-radius: 5px;
color: #FFF;
position: relative;
}
label:hover {
background: white;
border: 1px solid white;
color:black;
}
label::after {
content: '+';
font-size: 22px;
font-weight: bold;
position: absolute;
right: 10px;
top: 2px;
}
input:checked + label::after {
content: '-';
right: 14px;
top: 3px;
}
.content {
background: #DBEECD;
background: -webkit-linear-gradient(bottom right, #DBEECD, #EBD1CD);
background: -moz-linear-gradient(bottom right, #DBEECD, #EBD1CD);
background: linear-gradient(to top left, #DBEECD, #EBD1CD);
padding: 10px 25px 10px 25px;
border: 1px solid #A7A7A7;
margin: 0 0 1px 0;
border-radius: 1px;
}
input + label + .content {
display: none;
}
input:checked + label + .content {
display: block;
}
</style>
<input type="checkbox" id="title1" name="contentbox" />
<label for="title1">Content 1</label>
<div class="content">
My Content 1
</div>
</div>
<input type="checkbox" id="title2" name="contentbox" />
<label for="title2">Content 2</label>
<div class="content">
My Content 2
</div>
</div>
<input type="checkbox" id="title3" name="contentbox" />
<label for="title3">Content 3</label>
<div class="content">
My Content 3
</div>
</body>
</html>
```
You're correct that JavaScript is required. I have provided a solution, but I haven't tested it, because it's not possible to test in the snippet. It should select the relevant checkbox when a hash tag is detected in the URL that corresponds with a checkbox ID.
So you would use some time https://www.website.com/#title1
// Check if URL of browwser window has hash tag
if (location.hash) {
// Get URL hash tag
const hash = window.location.hash;
// Select checkbox with ID of hashtag
const checkbox = document.querySelector(hash);
// Check if checkbox exists
if(checkbox) {
// Set selected checkbox as checked
checkbox.checked = true;
}
}
body {
font-size: 21px;
font-family: Tahoma, Geneva, sans-serif;
max-width: 550px;
margin: 0 auto;
background-color: black;
}
input {
display: none;
}
label {
display: block;
padding: 8px 22px;
margin: 0 0 1px 0;
cursor: pointer;
background: #181818;
border: 1px solid white;
border-radius: 5px;
color: #FFF;
position: relative;
}
label:hover {
background: white;
border: 1px solid white;
color:black;
}
label::after {
content: '+';
font-size: 22px;
font-weight: bold;
position: absolute;
right: 10px;
top: 2px;
}
input:checked + label::after {
content: '-';
right: 14px;
top: 3px;
}
.content {
background: #DBEECD;
background: -webkit-linear-gradient(bottom right, #DBEECD, #EBD1CD);
background: -moz-linear-gradient(bottom right, #DBEECD, #EBD1CD);
background: linear-gradient(to top left, #DBEECD, #EBD1CD);
padding: 10px 25px 10px 25px;
border: 1px solid #A7A7A7;
margin: 0 0 1px 0;
border-radius: 1px;
}
input + label + .content {
display: none;
}
input:checked + label + .content {
display: block;
}
<input type="checkbox" id="title1" name="contentbox" />
<label for="title1">Content 1</label>
<div class="content">
My Content 1
</div>
<input type="checkbox" id="title2" name="contentbox" />
<label for="title2">Content 2</label>
<div class="content">
My Content 2
</div>
<input type="checkbox" id="title3" name="contentbox" />
<label for="title3">Content 3</label>
<div class="content">
My Content 3
</div>
I have some JS code that will turn my code bold, italicized, or underlined with user input, so if the user checks bold the text will be bolded.
Here is the code:
$('input[name="textStyle"]').change(function(){
if ($(this).val() == 'bold'){
if ($(this).is(':checked')) $('input[name="styledText"]').css('font-weight', 'bold');
else $('input[name="styledText"]').css('font-weight', 'normal');
}
else if ($(this).val() == 'italic'){
if ($(this).is(':checked')) $('input[name="styledText"]').css('font-style', 'italic');
else $('input[name="styledText"]').css('font-style', 'normal');
}
else if ($(this).val() == 'underline'){
if ($(this).is(':checked')) $('input[name="styledText"]').css('text-decoration', 'underline');
else $('input[name="styledText"]').css('text-decoration', 'none');
}
});
body {
background-color: #5f5959;
color: #000000;
}
textarea[type=text], select {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
textarea[type=submit] {
width: 100%;
background-color: #f9f9f9;
color: 000000;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
textarea[type=submit]:hover {
background-color: #908989;
}
div {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
}
<form style="font-family: 'Poppins', sans-serif; color: #f9f9f9;">
Bold:<input name="textStyle" type="checkbox" value="bold"/>
<br>
Italic:<input name="textStyle" type="checkbox" value="italic"/>
<br>
Underline:<input name="textStyle" type="checkbox" value="underline"/>
</form>
<div style="margin-left: 240px; width: 1000px; height: 665px;">
<p><center style="font-family: 'Poppins', sans-serif; font-size: 13px;">When submit, your text will clear and your blog will be published!</center></p>
<textarea type="text" placeholder="Title" style="font-family: 'Poppins', sans-serif;"></textarea>
<form style="font-family: 'Poppins', sans-serif;">
<textarea name="styledText" type="text" style="font-family: 'Poppins', sans-serif; border-width: 2px; border-style: solid; outline: none; border: none; height: 445px;"></textarea>
<input style="height: 50px; width: 1000px; font-family: 'Poppins', sans-serif; border-radius: 7px;" value="Submit" type="submit">
</form>
</div>
It is giving me an error, and it is not bolding/italicized/underlined. I think this is because the JS code is checking for input, but the tag is textarea. Is there any way I can let it accept both? I want the large area that is blank to be bolded/italicized/underlined with user input. Thanks!
First instead of $('input[name="styledText"]') you should do $('textarea[name="styledText"]'). Secondly jquery .css also accepts an object, so create an object cssProps and add default properties. Then on toggling of the check box change the value of these keys. Once it is done then at the end use .css and pass the cssProps properties
let cssProps = {
'font-weight': '',
'font-style': '',
'text-decoration': ''
}
$('input[name="textStyle"]').change(function() {
const val = $(this).val()
if ($(this).is(':checked')) {
switch (val) {
case 'bold':
cssProps['font-weight'] = 'bold';
break;
case 'italic':
cssProps['font-style'] = 'italic';
break;
case 'underline':
cssProps['text-decoration'] = 'underline';
break;
}
} else {
switch (val) {
case 'bold':
cssProps['font-weight'] = '';
break;
case 'italic':
cssProps['font-style'] = '';
break;
case 'underline':
cssProps['text-decoration'] = '';
break;
}
}
$('textarea[name="styledText"]').css(cssProps)
});
body {
background-color: #5f5959;
color: #000000;
}
textarea[type=text],
select {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
textarea[type=submit] {
width: 100%;
background-color: #f9f9f9;
color: 000000;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
textarea[type=submit]:hover {
background-color: #908989;
}
div {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form style="font-family: 'Poppins', sans-serif; color: #f9f9f9;">
Bold:<input name="textStyle" type="checkbox" value="bold" />
<br> Italic:
<input name="textStyle" type="checkbox" value="italic" />
<br> Underline:
<input name="textStyle" type="checkbox" value="underline" />
</form>
<div style="margin-left: 240px; width: 1000px; height: 665px;">
<p>
<center style="font-family: 'Poppins', sans-serif; font-size: 13px;">When submit, your text will clear and your blog will be published!</center>
</p>
<textarea type="text" placeholder="Title" style="font-family: 'Poppins', sans-serif;"></textarea>
<form style="font-family: 'Poppins', sans-serif;">
<textarea name="styledText" type="text" style="font-family: 'Poppins', sans-serif; border-width: 2px; border-style: solid; outline: none; border: none; height: 445px;"></textarea>
<input style="height: 50px; width: 1000px; font-family: 'Poppins', sans-serif; border-radius: 7px;" value="Submit" type="submit">
</form>
</div>
$('[name="styledText"]') will access all tags with name="styledText"
Can you please check the below code? Hope it will work for you. We have used textarea element instead of input in javascript code becuase you used textarea as a field.
Please refer to this link: https://jsfiddle.net/yudizsolutions/o1msuL83/
Please refer below link. I have made one change in your HTML <textarea type="text" name="styledText" placeholder="Title" style="font-family: 'Poppins', sans-serif;"></textarea>. Also I have target name attribute like $('[name="styledText"]').
https://codepen.io/Umesh8965/pen/jOymyLo
Description:
I have 3 sections in my page that I want to do, each having a radio button to select an object.
Problem:
I am trying to figure out a problem where when I press the "online radio button" it will show up the section that I need. But when I press the "Face to Face" the online section keeps appearing.
Expected Result:
Each Radio button should work with each section and hide the other one.
HTML CODE:
$(document).ready(function() {
$("#Online").hide();
$("#Face").hide();
$("#Payment").hide();
});
$(document).on("change", "#choice1", function() {
var radioValue = $(this).val();
console.log(radioValue);
if (($(this).value = "Online")) showOnline();
else if (($(this).value = "Face To Face")) showFace();
});
function showOnline() {
$("#Online").show();
$("#Face").hide();
}
function showFace() {
$("#Face").show();
$("#Online").hide();
}
.dropbtn {
background-color: white;
color: black;
padding: 16px;
font-size: 50px;
border: 2px solid;
border-radius: 25px;
}
.dropdown {
position: relative;
display: inline-block;
margin-left: 40%;
margin-top: 8%;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 350px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
font-size: 30px;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: gray;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: gray;
}
.covid {
margin-left: 10%;
margin-top: 2%;
border: 2px solid;
width: 80%;
font-weight: bold;
}
.covid h2 {
text-align: center;
font-weight: bold;
}
.covid img {
position: absolute;
margin-left: 50%;
height: 200px;
}
.covid p {
font-size: 20px;
margin-left: 20%;
}
.textred {
font-size: 20px;
display: inline;
color: red;
}
.textgreen {
font-size: 20px;
display: inline;
color: green;
}
.status {
margin-left: 10%;
margin-top: 2%;
border: 2px solid;
width: 80%;
font-weight: bold;
}
.status h2 {
text-align: center;
font-weight: bold;
}
.china {
font-size: 20px;
margin-left: 20%;
display: inline;
}
.amazon {
font-size: 20px;
margin-left: 20%;
display: inline;
}
.reviews {
margin-left: 10%;
margin-top: 2%;
border: 2px solid;
width: 80%;
font-weight: bold;
}
.reviews h2 {
text-align: center;
font-weight: bold;
}
.bolded {
font-size: 20px;
display: inline;
}
.stars {
white-space: nowrap;
font-size: 20px;
magrin: 15%;
display: inline;
white-space: pre;
color: yellow;
}
.review {
font-size: 20px;
display: inline;
margin: 20%;
font-weight: normal;
}
.mainscreen {
background-color: white;
height: 1800px;
}
.avatar {
vertical-align: middle;
margin-left: 15%;
margin-top: 1%;
width: 50px;
height: 50px;
border-radius: 50%;
}
.choice1{
margin-left: 45%;
}
.choice3{
margin-left: 43%;
}
.choice4{
margin-left: 41%;
}
.button1{
margin-left: 48%;
}
.notreviews{
margin-top: -9%;
}
<div class="w3-panel w3-white w3-card-4 reviews">
<h2>How will you like your appointment to be?</h2>
<section id="choice1">
<form>
<input
type="radio"
name="choice"
class="choice1"
id="OL"
value="Online"
/>
Online
<input
type="radio"
name="choice"
class="choice2"
id="FTF"
value="Face To Face"
/>
Face To Face
</form>
<br />
<br />
<br />
<button onclick="submitAnswer()" class="button1">
Submit Answer
</button>
</section>
</div>
<!-- Online Section -->
<div class="w3-panel w3-white w3-card-4 reviews" id="Online">
<h2>Online Appointments</h2>
<section id="choice2">
<form>
<input
type="radio"
name="choice2"
class="choice3"
id="ZOOM"
value="Zoom"
/>
Zoom
<input
type="radio"
name="choice2"
class="choice2"
id="MEET"
value="Meet"
/>
Google Meet
</form>
<br />
<br />
<br />
<button onclick="submitOnlineAnswer()" class="button1">
Submit Answer
</button>
</section>
</div>
<!-- FTF Section -->
<div class="w3-panel w3-white w3-card-4 reviews" id="Face">
<h2>Face To Face Appointments</h2>
<section id="choice3">
<form>
<input type="radio" name="choice3" class="choice4" id="Amazon" value="Ama"/> Amazon Rainforst Location
<input type="radio" name="choice3" class="choice2" id="China" value="China" /> China Location
</form>
<br>
<br>
<br>
<button onclick="submitFTFAnswer()" class="button1" >Submit Answer</button>
</section>
</div>
<section id="section">
Jquery Code:
$(document).ready(function() {
$("#Online").hide();
$("#Face").hide();
$("#Payment").hide();
});
$(document).on("change", "#choice1", function() {
var radioValue = $(this).val();
console.log(radioValue);
if (($(this).value = "Online")) showOnline();
else if (($(this).value = "Face To Face")) showFace();
});
function showOnline() {
$("#Online").show();
$("#Face").hide();
}
function showFace() {
$("#Face").show();
$("#Online").hide();
}
What am I doing wrong and how can I fix this?
building a show your password with a caps lock warning on a form. But need to use appendTo so the HTML can be added to a pre-written shortcode.
Whenever the Html is added by appendTo the Javascript function can not find the added HTML.
code: https://codepen.io/edutize/pen/qBZXmOZ
<div class="memberium-form">
<form name="loginform" id="loginform" action="https://traderonthestreet.com/wp-login.php" method="post">
<input id="learndash-login-form" type="hidden" name="learndash-login-form" value="754942d3df">
<p class="login-username">
<label for="user_login"></label>
<input type="text" name="log" id="user_login" class="input" value="" size="20" placeholder="Email *">
</p>
<p class="login-password">
<label for="user_pass"></label>
<input type="password" name="pwd" id="user_pass" class="input" value="" size="20" placeholder="Password *">
</p>
<p class="login-submit">
<input type="submit" name="wp-submit" id="wp-submit" class="button button-primary" value="Login">
<input type="hidden" name="redirect_to" value="https://traderonthestreet.com/wp-admin/">
</p>
</form>
$(document).ready(function(){
$("<span></span>").appendTo(".login-password").attr("toggle", "#user_pass").addClass("fa fa-fw
fa-eye field-icon toggle-password");
$("<p>WARNING! Caps lock is ON.</p>").appendTo(".login-password").attr("id", "caps");
});
$(".toggle-password").click(function() {
$(this).toggleClass("fa-eye fa-eye-slash");
var input = $($(this).attr("toggle"));
if (input.attr("type") == "password") {
input.attr("type", "text");
} else {
input.attr("type", "password");
}
});
var input = document.getElementById("user_pass");
var text = document.getElementById("caps");
input.addEventListener("keyup", function(event) {
if (event.getModifierState("CapsLock")) {
text.style.display = "block";
} else {
text.style.display = "none"
}
});
You're generating elements inside document ready which usually is initiated later than when the JS is loaded. When the $(".toggle-password").click(function() event listener is attached to .toggle-password, #caps doesn't exists yet.
Either moving the event listener into the document ready after the #caps element is created or moving the #caps element creation outside the document ready will work.
// Jquery appendTo capslock message and eye icons html
$(document).ready(function(){
$("<span></span>").appendTo(".login-password").attr("toggle", "user_pass").addClass("fa fa-fw fa-eye field-icon toggle-password");
$("<p>WARNING! Caps lock is ON.</p>").appendTo(".login-password").attr("id", "caps");
// toggle between classes and change attribute type
$(".toggle-password").click(function() {
$(this).toggleClass("fa-eye fa-eye-slash");
var input = $($(this).attr("toggle"));
if (input.attr("type") == "password") {
input.attr("type", "text");
} else {
input.attr("type", "password");
}
});
// capslock function change style from display none to block
var input = document.getElementById("user_pass");
var text = document.getElementById("caps");
document.addEventListener("keyup", function(event) {
if (event.getModifierState("CapsLock")) {
text.style.display = "block";
} else {
text.style.display = "none"
}
});
});
.login-username input[type=text] {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
padding: 12px;
padding-left: 15px;
border: none;
border-radius: 4px;
resize: vertical;
font-family: 'Roboto', sans-serif;
font-size: 15px;
outline: none;
background-color: #f0f0f0;
margin-top: 10px;
margin-bottom: 10px;
transition: .1s;
}
.login-username input[type=text]:hover {
background-color: #e6e6e6;
transform: scale(1.01);
}
.login-password input[type=password] {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
padding: 12px;
padding-left: 15px;
border: none;
border-radius: 4px;
resize: vertical;
font-family: 'Roboto', sans-serif;
font-size: 15px;
outline: none;
background-color: #f0f0f0;
margin-top: 10px;
margin-bottom: 10px;
transition: .1s;
}
.login-password input[type=password]:hover {
background-color: #e6e6e6;
transform: scale(1.01);
}
.login-password input[type=text] {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
padding: 12px;
padding-left: 15px;
border: none;
border-radius: 4px;
resize: vertical;
font-family: 'Roboto', sans-serif;
font-size: 15px;
outline: none;
background-color: #f0f0f0;
margin-top: 10px;
margin-bottom: 10px;
transition: .1s;
}
.login-password input[type=text]:hover {
background-color: #e6e6e6;
transform: scale(1.01);
}
#caps {
display: none;
margin-left: auto;
margin-right: auto;
width: 50%;
color: red;
}
.field-icon {
margin-left: 72.5%;
margin-right: auto;
z-index: 2;
position: absolute;
margin-top: -40px;
color: #8A8A8A;
}
.login-submit input[type=submit] {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
padding-top: 20px;
padding-bottom: 20px;
background-color: #24af61;
border: #24af61;
border-radius: 5px !important;
border-width: 1.5px;
color: white;
cursor: pointer;
display: block;
border-radius: 5px;
font-family: 'Poppins', sans-serif;
font-size: 18px;
transition: 0.3s;
font-weight: bold;
margin: 30px auto;
}
.login-submit input[type=submit]:hover {
background-color: #ffffff;
-webkit-box-shadow: 0px 0px 12px 4px rgba(0,0,0,0.11);
-moz-box-shadow: 0px 0px 12px 4px rgba(0,0,0,0.11);
box-shadow: 0px 0px 12px 4px rgba(0,0,0,0.11);
transform: scale(1.05);
color: #24af61;
border-style: solid;
border: #24af61;
border-width: 1.5px;
border-radius: 15px;
}
#media screen and (max-width: 767px) {
.login-password input[type=password] , .login-username input[type=text] , .login-submit input[type=submit] {
width: 75%;
}
#media screen and (max-width: 767px) {
.field-icon {
margin-left: 82%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="memberium-form">
<form name="loginform" id="loginform" action="https://traderonthestreet.com/wp-login.php" method="post">
<input id="learndash-login-form" type="hidden" name="learndash-login-form" value="754942d3df">
<p class="login-username">
<label for="user_login"></label>
<input type="text" name="log" id="user_login" class="input" value="" size="20" placeholder="Email *">
</p>
<p class="login-password">
<label for="user_pass"></label>
<input type="password" name="pwd" id="user_pass" class="input" value="" size="20" placeholder="Password *">
<!-- html thats being added by jquery appendTo -->
<!-- <span toggle="#user_pass" class="fa fa-fw fa-eye field-icon toggle-password"></span>
<p id="caps">WARNING! Caps lock is ON.</p> -->
</p>
<p class="login-submit">
<input type="submit" name="wp-submit" id="wp-submit" class="button button-primary" value="Login">
<input type="hidden" name="redirect_to" value="https://traderonthestreet.com/wp-admin/">
</p>
</form>
</div>
I read that moment.js would do the trick, and have it included in my files but I don't know where to start. I need to get the value from an input field (#enterClockIn), convert it to HH:MM, and then once I have that value, I need to be able to add/subtract hours and minutes from it.
I currently have 1 function that is triggered by a click and would like to include this new code right into it so everything calculates at once. Here's is my codepen for this project:
https://codepen.io/lgrizo/pen/LLxbab
HTML CODE:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<link href="https://fonts.googleapis.com/css?family=Hind:300,400" rel="stylesheet">
<link rel="stylesheet" href="css/normalize.css" />
<link rel="stylesheet" href="css/main.css" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>40 Hour Workweek Calculator</title>
</head>
<body>
<header>
<h3>Workweek Calculator</h3>
</header>
<div class="wrapper">
<div>
<h4 class="sections totalHours">How many hours do you plan on working this week?</h4>
<input type="text" maxlength="2" class="userInput" id="hoursThisWeek" placeholder="ex: 40" />
</div>
<div>
<h4 class="sections fridayHours">On Friday morning, how many hours<br />(in whole numbers) do you currently have?</h4>
<input type="text" maxlength="2" class="userInput" id="fridayMorning" placeholder="ex: 33">
</div>
<div>
<h4 class="sections remDecimal">Enter remaining decimals:</h4>
<input type="text" maxlength="3" class="userInput" id="remainingDecimals" placeholder="ex: .57" />
</div>
<div>
<h4 class="sections clockFriday">Enter time you clocked in on Friday:</h4>
<input type="text" maxlength="8" class="userInput" id="enterClockIn" placeholder="ex: 07:22 AM" /><br />
</div>
<!-- <div class="buttons">
<button class="amButton">AM</button>
<button class="pmButton">PM</button>
</div> -->
<div>
<h4 class="sections lunch">Enter today's lunch break in minutes:</h4>
<input type="text" maxlength="3" class="userInput" id="enterLunch" placeholder="ex: 30"/>
</div>
<div class="sections calculate">
<button class="calcButton" onclick="calculateButton()">Calculate my hours</button>
</div>
<div class="resultsDiv">
<div>
<h4 class="sections currentHoursWorked results">Current hours worked:</h4>
<output type="text" class="defaultCalc resultsCalc" id="currentWorked">
</output>
</div>
<div>
<h4 class="sections remainHours results">Remaining hours to work:</h4>
<output type="text" class="defaultCalc resultsCalc" id="hoursLeftToWork">
</output>
</div>
<div>
<div>
<h4 class="sections remainHours results">Time to clock out on Friday:</h4>
<output type="text" class="defaultCalc clockOutTime resultsCalc" id="currentWorked">
</output>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.js"integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="crossorigin="anonymous"></script>
<script src="js/main.js"></script>
<script src="js/jquery.js"></script>
<script src="js/moment.js"></script>
</body>
</html>
CSS
/*Base style layouts*/
header, body {
font-family: 'Hind', sans-serif;
}
body {
background: #edf0f1;
font-family: 'Hind', sans-serif;
text-align: center;
}
header {
width: 100%;
height: 70px;
border-bottom-left-radius: 46px;
border-bottom-right-radius: 46px;
background-image: linear-gradient(120deg, #96deda 0%, #50c9c3 40%);
box-shadow: 0px 2px 4px rgba(44, 62, 80, 0.15);
color: #fff;
text-align: center;
}
header h3 {
margin: 0;
padding-top: 20px;
font-size: 1.4em;
font-weight: 300;
}
h4 {
font-weight: 300;
color: #000;
text-align: center;
}
.sections {
margin: 30px 0;
}
/*Gray areas that display javascript calculations*/
.defaultCalc {
display: inline-block;
line-height: 29px;
font-weight: 300;
font-family: 'Hind', sans-serif;
line-height: 14.5px;
vertical-align: middle;
-webkit-appearance: none;
}
/*Sections that require the user to input a number*/
.userInput::placeholder {
font-weight: 300;
font-style: italic;
color: rgba(149, 152, 154, 0.4);
text-align: center;
padding-top: 8px;
}
.userInput {
border: 1px solid #C3C8CB;
width: 133px;
height: 29px;
border-radius: 12px;
text-align: center;
color: #000;
font-weight: 300;
font-family: 'Hind', sans-serif;
line-height: 14.5px;
vertical-align: middle;
/*this removed the box shadow that was showing up on safari mobile*/
-webkit-appearance: none;
}
.sections {
margin: 30px 0;
}
/*Buttons*/
.amButton, .pmButton {
border: 1px solid #C3C8CB;
width: 45px;
height: 29px;
background-color: #fff;
color: #95989A;
border-radius: 12px;
font-family: 'Hind', sans-serif;
line-height: 29px;
font-weight: 300;
padding-right: 5px;
box-sizing: border-box;
}
.buttons {
margin: 25px 0;
text-align: center;
box-sizing: border-box;
}
.calcButton {
border: 1px;
width: 250px;
height: 36px;
background-color: #50c9c3;
color: #FFF;
border-radius: 12px;
font-weight: 100;
font-size: 1.2em;
text-align: center;
font-family: 'Hind', sans-serif;
line-height: 36px;
}
.clockOutAMButton, .clockOutPMButton {
border: 1px solid #C3C8CB;
width: 45px;
height: 29px;
background-color: #fff;
color: #95989A;
border-radius: 12px;
text-align: center;
display: inline-block;
line-height: 30px;
margin-top: 20px;
margin-bottom: 100px;
font-family: 'Hind', sans-serif;
font-weight: 300;
}
input:focus {
outline: 0;
}
output:focus {
outline: 0;
}
button:focus {
outline: 0;
}
.userInput:focus {
outline: none !important;
border:1px solid #50c9c3;
}
.calcButton:active {
font-size: 1.175em;
}
#currentWorked,
#hoursLeftToWork {
width: 180px;
height: 29px;
text-align: center;
line-height: 30px;
vertical-align: middle;
color: #60B6FF;
}
#media (min-width: 768px) {
header {
margin: 0 auto;
width: 80%;
}
.wrapper {
margin: 0 auto;
width: 575px;
}
.resultsDiv {
width: 650px;
}
.results {
display: inline-block;
width: 250px;
text-align: right;
padding-right: 50px;
}
.totalHours {
display: inline-block;
padding-right: 75px;
text-align: left;
width: 300px;
}
.fridayHours {
display: inline-block;
padding-right: 75px;
text-align: left;
width: 300px;
}
.remDecimal {
display: inline-block;
padding-right: 75px;
text-align: right;
width: 300px;
}
.clockFriday {
display: inline-block;
padding-right: 75px;
text-align: right;
width: 300px;
}
.buttons {
text-align: center;
padding-left: 380px;
margin-top: 0px;
}
.amButton, .pmButton {
text-align: center;
}
.lunch {
display: inline-block;
padding-right: 75px;
text-align: right;
width: 300px;
}
.lastButtons {
text-align: center;
padding-left: 380px;
}
.clockOutAMButton, .clockOutPMButton {
margin-top: 0px;
margin-bottom: 0px;
}
.sections, .clockOutTime, .defaultCalc {
vertical-align: middle;
}
.calcButton {
width: 520px;
}
}
JS
function calculateButton() {
// this gets the value for the "hours planned on working this week" field
var hoursThisWeek = parseInt(document.getElementById('hoursThisWeek').value);
// current hours on friday morning
var fridayMorning = parseInt(document.getElementById('fridayMorning').value);
// ramaining minutes in decimal form
var remainingDecimals = (document.getElementById('remainingDecimals').value);
//convert decimal minutes into time format minutes rounded to the nearest whole number
var roundedDecimal = Math.round(remainingDecimals * 60);
//result for current hours worked
var currentWorked = fridayMorning + " hours " + roundedDecimal + " minutes";
var remainingHours = (hoursThisWeek - fridayMorning) - 1;
var remainingMinutes = (60 - roundedDecimal);
var hoursLeftToWork = remainingHours + " hours " + remainingMinutes + " minutes";
//this is to display the current hours worked results
document.getElementById('currentWorked').innerHTML = currentWorked;
//this is to display the remaining hours left results
document.getElementById('hoursLeftToWork').innerHTML = hoursLeftToWork;
}
//Here is where I'm stuck! Do I start by getting the value from this input field?
var clockIn = $('#enterClockIn').val();
Why did you split the friday morning how many hour and decimals into different inputs? makes you write more code that way..
also you need to read the momentjs docs. they are extremely helpful. https://momentjs.com/docs/
Overall, what you had to do was tell moment the friday clock in time format (it would be hh:mm A) and then add the minutes to it
(eg moment("07:00 AM", "hh:mm A").add("90","minutes") will result in 08:30 AM)
Basically:
var clockOutTime = moment(clockedInFri, "hh:mm A").add(remaining + lunchBreak, "minutes");
clockOutTime = clockOutTime.format("hh:mm A");
Here is the full pen: https://codepen.io/nodirashidov/pen/WORMNZ