I'm trying to get user input and display it back to the user but it keeps resetting after the user inputs something e.g. start with 1000 then input 10 cash and it comes up with 990 but after you do it again and put in 20 it doesn't save the 990 you input and instead starts over and outputs 980
You can see what I mean here
https://codepen.io/scottajames/pen/mddreXz
// Hides everything in the Content-2 Div-
document.getElementById("Content-2").hidden = true;
// Unhides everything in the content-2 div and hides everything in the content-1 div and saves the input of the monthly id
function FirstButton() {
var a = document.getElementById("Monthly").value;
document.getElementById("Monthly-Amount").innerHTML = a;
document.getElementById("Content-2").hidden = false;
document.getElementById("Content-1").hidden = true;
}
// adds the content-2 inputs together and takes away the price from the total
function SecondButton() {
var b = document.getElementById("Item").value;
var c = document.getElementById("Price").value;
document.getElementById("Item-Price").innerHTML = b + ' ' + c;
var d = document.getElementById("Monthly").value;
document.getElementById("Monthly-Amount").innerHTML = d - c;
}
body {
background: #34EBC6;
}
#Content {
margin: 0 auto;
position: relative;
top: 200px;
width: 500px;
}
input {
width: 350px;
height: 60px;
outline: none;
font-size: 24px;
padding-left: 30px;
display: inline-block;
border-radius: 5px;
border: none;
background: #0e8b72;
color: white;
}
::placeholder {
color: white;
}
button {
position: relative;
height: 60px;
width: 100px;
font-size: 25px;
border-radius: 5px;
border: none;
color: white;
background: #0e8b72;
}
#Content-1 h1 {
position: relative;
left: 100px;
color: white;
font-size: 25px;
font-family: sans-serif;
font-weight: 400;
}
#Content-2 h1 {
color: white;
font-size: 25px;
font-family: sans-serif;
font-weight: 400;
}
#Monthly-Amount {
position: relative;
top: -10px;
left: 150px;
font-size: 40px;
font-family: sans-serif;
color: white;
font-weight: 400;
}
#Item-Price {
position: relative;
top: 50px;
border-top: 1px solid black;
padding-top: 25px;
padding-left: 25px;
}
<div id="Content">
<div id="Content-1">
<h1>Monthly Budget </h1><input type="text" id="Monthly" placeholder="0.00" required>
<button id="Button-1" onclick="FirstButton()">Next</button>
</div>
<h1 id="Monthly-Amount"></h1>
<div id="Content-2">
<h1>Item: </h1><input type="text" id="Item" placeholder="Item" required>
<h1>Price: </h1><input type="text" id="Price" placeholder="Price" required>
<button id="Button-2" onclick="SecondButton()">Next</button>
<h1 id="Item-Price"></h1>
</div>
</div>
Just incase anyone comes across this later and is having the same issue all you have to do is add a += instead of just = as the output
from
document.getElementById("Item-Price").innerHTML = b +' '+ c;
to
document.getElementById("Item-Price").innerHTML += b +' '+ c;
and
var d = document.getElementById("Monthly").value;
document.getElementById("Monthly-Amount").innerHTML = d - c;
gets changed to just
document.getElementById("Monthly-Amount").innerHTML -= c;
Related
Hey i am trying some thing for my school project, i hope you can help me in it.
I want to copy the substring from url, like
Url = https://www.example.com/blah/blah&code=12432
substring = 12432
Also i want to print the substring in Copy Box .
Please Help Me with this issue. It is required for my project to copy some text from string.
(function() {
var copyButton = document.querySelector('.copy button');
var copyInput = document.querySelector('.copy input');
copyButton.addEventListener('click', function(e) {
e.preventDefault();
var text = copyInput.select();
document.execCommand('copy');
});
copyInput.addEventListener('click', function() {
this.select();
});
})();
html, body {
height: 100%;
}
body {
font-size: 16px;
background: #FFD1DD;
display: flex;
align-items: center;
justify-content: center;
}
* {
box-sizing: border-box;
}
.wrapper {
padding: 0 5px;
}
h1 {
text-align: center;
font-size: 40px;
margin-bottom: 1.2em;
text-decoration: underline;
text-transform: uppercase;
}
p {
font-family: 'VT323', monospace;
font-size: 20px;
}
.container {
display: flex;
background: #FFA3BB;
border-radius: 7px;
padding: 10px;
margin: 0 auto;
}
h3 {
font-size: 28px;
text-transform: uppercase;
text-align: center;
span {
display: inline-block;
position: relative;
}
}
.copy, .paste {
flex-grow: 1;
width: 50%;
}
.copy {
border-right: 2px solid;
padding-right: 10px;
h3 {
span {
background: #76ECFF;
}
}
input {
padding-right: 90px;
}
}
.paste {
padding-left: 10px;
h3 {
span {
background: #FAE916;
}
}
}
form {
position: relative;
width: 100%;
input {
display: block;
width: 100%;
border: 3px solid;
outline: 0;
background: #FFF;
font-size: 25px;
padding: 5px 4px;
margin-bottom: 20px;
}
button {
display: block;
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
border: 0;
outline: 0;
color: #FFF;
background: #000;
font-family: 'VT323', monospace;
font-size: 25px;
text-transform: uppercase;
padding: 0.08em 0.8em;
cursor: pointer;
}
}
<div class="wrapper">
<h1>Link Copy</h1>
<p>Select the link text by clicking within the input then copy yourself or just click the copy button. Paste into the paste side to see that it works!</p>
<div class="container">
<div class="copy">
<h3>Copy <span><i class="fa fa-hand-peace-o"></i></span></h3>
<form>
<input type="text" value="https://codepen.io/she_codes/pen/OgrJJe/">
<button type="button">Copy</button>
</form>
</div>
<div class="paste">
<h3>Paste <span><i class="fa fa-smile-o"></i></span></h3>
<form>
<input type="text">
</form>
</div>
</div><!-- end .container -->
</div><!-- end .wrapper -->
Use this it will work
const params = new Proxy(new URLSearchParams(window.location.search), {
get: (searchParams, prop) => searchParams.get(prop),
});
// Get the value of "some_key" in eg "https://example.com/?some_key=some_value"
let value = params.some_key; // "some_value"
try this, assuming nothing is ever after "code="
var url = window.location.href;
var index = url.indexOf("code=");
var substring = url.substring(index + 5);
copyInput.setAttribute('value', substring);
im in the process of taking two projects that i found on instagram. i am making a random color generator and on the side of the text it shows a clipboard button so i can or who ever can randomly generate a color and copy the hex code. i have went over the code and both projects and i am getting a "Uncaught TypeError: Cannot read property 'select' of null " in the console.
the project can be found at the following link https://codepen.io/nhmalbone0311/pen/KKmYQbQ.
let letters = "0123456789ABCDEF";
const body = document.querySelector("body");
const colorElement = document.querySelector("#color");
function getColor() {
let color = "#";
for (let i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * letters.length)];
}
body.style.backgroundColor = color;
colorElement.innerHTML = color;
}
function copyText() {
var copyText = document.getElementById("#color");
copyText.select();
document.execCommand("copy");
document.getElementById("notification").style.opacity = "1";
setTimeout(() => {
document.getElementById("notification").style.opacity = "0";
}, 1000);
}
console.log(copyText);
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inconsolata', monospace;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: #494e6b;
transition: 0.1s;
}
/* p field */
.colors {
float: left;
margin-bottom: 20px;
font-size: 26px;
padding: 10px 57px;
text-align: center;
color: #fff;
background: #000;
}
/* btns */
.btn {
cursor: pointer;
width: 50px;
height: 47px;
border: none;
margin: 0 5px 0;
font-size: 25px;
}
.g-color {
padding: 5px 13px;
border: 3px solid #111;
letter-spacing: 1px;
outline: none;
font-size: 25px;
transition: 100ms ease-in-out;
cursor: pointer;
}
.g-color:hover {
outline: none;
color: red;
}
.tooltip {
position: relative;
display: flex;
align-item: center;
justify-content: center;
width: 180px;
height: 50px;
font-size: 20px;
padding: 10px;
border-radius: 10px;
bottom: 7rem;
left: 14rem;
color: #fff;
background: #98878f;
opacity: 0;
transition: .5s;
}
.tooltip:after {
position: absolute;
content: "";
width: 25px;
height: 25px;
top: -8rem;
right: 50px;
background: #985e6d;
transform: rotate(45deg);
}
<div class="container">
<p id="color" class="colors">#</p>
<button onclick="copyText()" class="btn"><i class="far fa-copy"></i></button>
<div class="generate-color">
<button onclick="getColor()" class="g-color">Generate Color</button>
</div>
<!-- notification -->
<div class="tooltip" id="notifaction">
<p>Text Copied!</p>
</div>
</div>
im using code pen as i do this as a hobby for now in its just easier for me to show my work off and have people me if i need it.
im just now working on getting out of tutorial hell and founding projects on the web in intergrading them into my own style and changing things up.
remove the # from the "#color" in var copyText = document.getElementById("#color");
https://gyazo.com/aa49eb6d6849b3adabb8924aa9e40594
I have the elements in the diagram and I want to let the user choose in which element they are going to add the semi column to add text, but I dont know how to let them select a element and then add according to that selection.
var addDetail = document.getElementById('addDetail');
var clauseInput = document.getElementsByClassName('clause');
document.addEventListener('click', function(e) {
e = e || window.event;
var target = e.target || e.srcElement;
if(target == clauseInput[0] || target == clauseInput[1] ||
target == clauseInput[2] || target == clauseInput[3] ||
target == clauseInput[4] || target == addDetail) {
document.getElementById('addDetail').style.display='inline-block';
// createDetail();
console.log(target);
} else {
document.getElementById('addDetail').style.display='none';
}
}, false);
Update
Instead of searching through all clause elements every time when addDetail been clicked, there is e.relatedTarget that really suitable to your problem, detailed documentation, and the update snippet :
/*CREATE TOP AND BOTTOM CLAUSES*/
/*Top Clauses*/
const addClauseTop = document.querySelector('#addClauseTop');
var targetClauseElement;
var addDetail = document.getElementById('addDetail');
addDetail.addEventListener('focusin', function(e) {
createDetail(e.relatedTarget);
});
window.addEventListener('mouseup',function(e) {
if ( e.currentTarget != addDetail ) {
addDetail.style.display='none';
}
});
var firstTopClause = document.getElementsByClassName('clause')[0];
firstTopClause.addEventListener('click', function(e) {
addDetail.style.display='inline-block';
});
var firstBottomClause = document.getElementsByClassName('clauseDivReverse')[0];
firstBottomClause.addEventListener('click', function(e) {
addDetail.style.display='inline-block';
});
addClauseTop.addEventListener('click',function(e){
e.preventDefault();
//Get Divs-Overlay
const topDivs = document.querySelector('#topClauses');
const bottomDivs = document.querySelector('#bottomClauses');
// Create Elements
const clauseDiv = document.createElement('div');
const clauseText = document.createElement('input');
const clauseStroke = document.createElement('div');
// // //Give Style
clauseDiv.classList.add('clauseDiv');
clauseDiv.addEventListener('click', function(e) {
addDetail.style.display='inline-block';
});
clauseText.classList.add('clause');
clauseText.setAttribute("id", "clause");
clauseStroke.classList.add('strokeClause');
//
// // Append to document
clauseDiv.appendChild(clauseText);
clauseDiv.appendChild(clauseStroke);
topDivs.appendChild(clauseDiv);
document.body.appendChild(topDivs);
document.body.appendChild(bottomDivs);
})
/*BOTTOM Clauses*/
const addClauseBottom = document.querySelector('#addClauseBottom');
addClauseBottom.addEventListener('click',function(e){
e.preventDefault();
//Get Divs-Overlay
const topDivs = document.querySelector('#topClauses');
const bottomDivs = document.querySelector('#bottomClauses');
// Create Elements
const clauseDiv = document.createElement('div');
clauseDiv.addEventListener('click', function(e) {
targetClauseElement = e.currentTarget;
addDetail.style.display='inline-block';
});
const clauseText = document.createElement('input');
const clauseStroke = document.createElement('div');
// // //Give Style
clauseDiv.classList.add('clauseDivReverse');
clauseText.classList.add('clauseReverse');
clauseText.setAttribute("id", "clauseReverse");
clauseStroke.classList.add('strokeClauseReverse');
//
// // Append to document
clauseDiv.appendChild(clauseText);
clauseDiv.appendChild(clauseStroke);
bottomDivs.appendChild(clauseDiv);
document.body.appendChild(bottomDivs);
})
/***********/
//Create a addDetail
function createDetail(target){
var mainColumn = target.parentElement;
var strokeColumn = mainColumn.children[1];
// Create Elements
var levelOneDiv = document.createElement('div');
var levelOneText = document.createElement('input');
if ( mainColumn.classList.contains('clauseDiv') ) {
levelOneDiv.classList.add('levelOneClauseReverse');
levelOneText.classList.add('levelOneTextReverse');
//I thought you have not completed your style yet, like something levelOneClause class
} else {
levelOneDiv.classList.add('levelOneClauseReverse');
levelOneText.classList.add('levelOneTextReverse');
}
levelOneDiv.appendChild(levelOneText);
strokeColumn.appendChild(levelOneDiv);
}
#import url('https://fonts.googleapis.com/css?family=Vollkorn+SC');
body{
margin: 10%;
margin-right: 15%;
margin-left: 10%;
margin-top: 5%;
}
h1{
color: #3B3C3D;
font-family: 'Vollkorn SC', serif;
font-size: 2em;
text-align:center;
}
h2{
color: #3B3C3D;
font-family: 'Vollkorn SC', serif;
font-size: 1.5em;
text-align:center;
}
#bottomClauses{
clear: both;
float: right;
}
/*CONTROL-PANEL*/
#controlPanel{
float: inline-block;
margin-top: 5%;
margin-left: 20%;
margin-right: 20%;
margin-bottom: 15%;
padding-bottom: 2%;
border-radius: 10%;
border-bottom: 0.1vw solid #3B3C3D;
}
.addClause{
background-color: #2c3e50;
margin-top: 5%;
font-size: 0.75em;
padding: 0.5em;
border: 0;
color: #FFF;
}
.addClause:hover{
cursor: pointer;
background-color: #000;
}
.addDetail{
display: none;
background-color: #2c3e50;
margin-top: 5%;
font-size: 0.75em;
padding: 0.5em;
border: 0;
color: #FFF;
}
.addDetail:hover{
cursor: pointer;
background-color: #000;
}
/*FISHBONE*/
#fishBone{
position: relative;
float:right;
top: 19.75vw;
width: 100%;
height: 0.2vw;
background-color: #34495e;
}
#finalResult{
position: absolute;
/*float:right;*/
left: 83.5vw;
top: 44.25vw;
width: 7.5vw;
height: 7.5vw;
padding: 1vw;
text-align: center;
color: #FFF;
background-color: #7f8c8d;
border-radius: 50%;
border: 0.15vw solid #34495e;
}
/*NEW CLAUSE*/
.clauseDiv{
display: inline-block;
float:right;
width: 5vw;
margin-right: 12.5vw;
}
.clause{
float: inline-block;
position: relative;
top: -3.5vw;
right: 2vw;
text-align: center;
width: 5.8vw;
height: 1.5vw;
padding: 0.2vw;
color: #FFF;
background-color: #3498db;
border-radius: 0.15vw;
border: 0;
}
.strokeClause{
position: relative;
top: -5.75vw;
transform: rotate(-25deg);
background-color: #34495e;
width: 0.1vw;
height: 25vw;
margin-left: 7.5vw;
border: 0.05vw solid #34495e;
border-radius: 0.1vw;
float: inline-block;
z-index: -1;
}
/*NEW CLAUSE REVERSE*/
.clauseDivReverse{
float: inline-block;
float:right;
width: 5vw;
margin-right: 12.5vw;
}
.clauseReverse{
position: relative;
top: 15.5vw;
right: 2.5vw;
float: inline-block;
text-align: center;
width: 5.8vw;
height: 1.5vw;
padding: 0.2vw;
color: #FFF;
background-color: #3498db;
border-radius: 0.15vw;
border: 0;
}
.strokeClauseReverse{
position: relative;
top: -9.75vw;
transform: rotate(25deg);
background-color: #34495e;
width: 0.1vw;
height: 25vw;
margin-left: 7.5vw;
border: 0.05vw solid #34495e;
border-radius: 0.1vw;
float: inline-block;
z-index: -1;
}
/*NEW LEVEL ONE*/
.levelOneClauseReverse{
margin-bottom: 5vw;
}
.levelOneTextReverse{
border: 0;
position: relative;
font-size: 0.75vw;
width: 13vw;
top: 4.5vw;
right: 12.75vw;
border-bottom: 0.1vw solid #34495e;
transform: rotate(-25deg);
}
<body>
<h1>Diagram Editor</h1>
<div id='controlPanel'>
<h2>Control Panel</h2>
<input type='submit' name='addClause' value='Clause on TOP' class='addClause' id='addClauseTop'>
<input type='submit' name='addClause' value='Clause on BOTTOM' class='addClause' id='addClauseBottom'>
<input type='submit' name='addClause' value='Add Detail' class='addDetail' id='addDetail'>
</div>
<div id='fishBone'></div>
<input type='text' name='clause' id='finalResult'>
<div id='topClauses'>
<div class='clauseDiv'>
<input class='clause' id='clause'>
<div class='strokeClause'>
</div>
</div>
</div>
<div id='bottomClauses'>
<div class='clauseDivReverse' >
<input class='clauseReverse clause'>
<div class='strokeClauseReverse'>
<div class='levelOneClauseReverse'>
<input class='levelOneTextReverse'>
</div>
<div class='levelOneClauseReverse'>
<input class='levelOneTextReverse'>
</div>
<div class='levelOneClauseReverse'>
<input class='levelOneTextReverse'>
</div>
<div class='levelOneClauseReverse'>
<input class='levelOneTextReverse'>
</div>
</div>
</div>
</div>
<script src="app.js"></script>
</body>
What I need: I am developing a website using HTML, CSS, Javascript/JQuery. I have 6 divs. Based on conditions divs have to change their color,size, text and divs have to sort according to colors(red, orange and then green).
What I implemented: I have created three classes in CSS reddivs, orangedivs, and greendivs. Now the divs are changing their colors but they are not sorting according to colors. I tried to prepend them, then it's not according to expectations.
What I am struggling: I am unable to sort the divs according to colors. Any ideas are welcome! Below are supplements
createDiv_111(5100);
function createDiv_111(num) {
if (num >= 5000 && num <= 5300) {
var resize_to_red = document.getElementById('box0');
resize_to_red.classList.add("reddivs");
resize_to_red.innerHTML = "ERROR";
$("#divs_container").prepend(document.getElementById('yellow_reach_limit_box'));
} else if (num >= 20 && num <= 30) {
var resize_to_orange = document.getElementById('box0');
resize_to_orange.classList.add("orangedivs");
resize_to_orange.innerHTML = "changed to orange";
$("#divs_container").prepend(document.getElementById('yellow_reach_limit_box'));
} else if (num >= 30 && num <= 40) {
var resize_to_green = document.getElementById('box0');
resize_to_green.classList.add("greendivs");
resize_to_green.innerHTML = "changed to green";
}
}
.reddivs {
position: relative;
top: 15px;
width: 590px;
height: 155px;
background: #BE0A26;
padding: 10px;
border-radius: 15px;
font-family: Helvetica, Arial;
font-weight: bold;
float: left;
color: white;
text-align: center;
margin: 10px 25px 10px 23px;
}
.orangedivs {
position: relative;
top: 30px;
line-height: 26px;
width: 151px;
height: 109.5px;
background: #E86B0B;
padding: 10px;
border-radius: 15px;
font-family: Helvetica, Arial;
font-weight: bold;
color: white;
text-align: center;
float: left;
margin: 10px 26px 10px 23px;
}
.greendivs {
position: relative;
top: 35px;
width: 140px;
height: 70px;
background: #00A096;
padding: 10px;
border-radius: 15px;
font-family: Helvetica, Arial;
font-weight: bold;
color: white;
text-align: center;
float: left;
margin: 40px 30px 20px 24px;
}
.container_for_alldivs {
width: 660px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container_for_alldivs" id="divs_container">
<div id="box0" class="alldivs"></div>
<div id="box1" class="alldivs"></div>
<div id="box2" class="alldivs"></div>
<div id="box3" class="alldivs"></div>
<div id="box4" class="alldivs"></div>
<div id="box5" class="alldivs"></div>
</div>
I am posting code for box0 div, but condition for remaining divs are same except the id changes to box1 or box2,...,box5
flexbox is widely supported and you can also use it to reorder divs with css only:
Just add the following to your container:
display: flex;
flex-direction: column;
And add the order for the div, like this:
order: 3;
I also updated your script to loop through all boxes and take a random number from an array to test this.
Green divs are always first, then orange second and finally red third. Update the css to specify the ordering you require.
Example
//options array
var options = [25, 35, 5250];
$(".alldivs").each(function(i, box)
{
//get random number from array
var number = options[Math.floor(Math.random()*options.length)];
createDiv_111(number, box);
});
function createDiv_111(num, box)
{
if (num >= 5000 && num <= 5300)
{
var resize_to_red = box;
resize_to_red.classList.add("reddivs");
resize_to_red.innerHTML = "ERROR";
}
else if (num >= 20 && num <= 30)
{
var resize_to_orange = box;
resize_to_orange.classList.add("orangedivs");
resize_to_orange.innerHTML = "changed to orange";
}
else if (num >= 30 && num <= 40)
{
var resize_to_green = box;
resize_to_green.classList.add("greendivs");
resize_to_green.innerHTML = "changed to green";
}
}
.reddivs, .orangedivs,.greendivs {
/* No need to repeat these */
position: relative;
padding: 10px;
border-radius: 15px;
font-family: Helvetica, Arial;
font-weight: bold;
text-align: center;
float: left;
color: white;
}
.reddivs {
top: 15px;
width: 590px;
height: 155px;
background: #BE0A26;
margin: 10px 25px 10px 23px;
order: 3;
}
.orangedivs {
top: 30px;
line-height: 26px;
width: 151px;
height: 109.5px;
background: #E86B0B;
margin: 10px 26px 10px 23px;
order: 2;
}
.greendivs {
top: 35px;
width: 140px;
height: 70px;
background: #00A096;
margin: 40px 30px 20px 24px;
order: 1;
}
.container_for_alldivs {
display: flex;
flex-direction: row;
width: 660px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container_for_alldivs" id="divs_container">
<div id="box0" class="alldivs"></div>
<div id="box1" class="alldivs"></div>
<div id="box2" class="alldivs"></div>
<div id="box3" class="alldivs"></div>
<div id="box4" class="alldivs"></div>
<div id="box5" class="alldivs"></div>
</div>
p.s. I also tidied up your css to recycle any styles reused between colored divs.
If you really want to sort by css class names (which i find a bit of a hack) You can grab all elements and sort them by their className attribute.
Simple example:
$('#sort').on('click', function() {
var sortedElements = $('.greendivs, .orangedivs, .reddivs').sort(function(a, b) {
debugger
return a.className > b.className;
});
$('.container_for_alldivs').html(sortedElements);
});
.reddivs {
position: relative;
top: 15px;
width: 590px;
height: 155px;
background: #BE0A26;
padding: 10px;
border-radius: 15px;
font-family: Helvetica, Arial;
font-weight: bold;
float: left;
color: white;
text-align: center;
margin: 10px 25px 10px 23px;
}
.orangedivs {
position: relative;
top: 30px;
line-height: 26px;
width: 151px;
height: 109.5px;
background: #E86B0B;
padding: 10px;
border-radius: 15px;
font-family: Helvetica, Arial;
font-weight: bold;
color: white;
text-align: center;
float: left;
margin: 10px 26px 10px 23px;
}
.greendivs {
position: relative;
top: 35px;
width: 140px;
height: 70px;
background: #00A096;
padding: 10px;
border-radius: 15px;
font-family: Helvetica, Arial;
font-weight: bold;
color: white;
text-align: center;
float: left;
margin: 40px 30px 20px 24px;
}
.container_for_alldivs {
width: 660px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="sort">Sort</button>
<div class="container_for_alldivs" id="divs_container">
<div id="box0" class="alldivs">
</div>
<div id="box1" class="alldivs greendivs">
</div>
<div id="box2" class="alldivs orangedivs">
</div>
<div id="box3" class="alldivs reddivs">
</div>
<div id="box4" class="alldivs greendivs">
</div>
<div id="box5" class="alldivs reddivs">
</div>
</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