We Keep Coding

Get substring from url and copy to clip board?

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);

Radio button does not hide/show section

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?

Whats the issue in reset button of JS counter?

This is the script, it work fine as you can see but this reset functionality have some issue, it turns the value to 0 but when again increase the value it starts from the last stored value, whats the issue?
This is the CSS of the counter application this we help you to run this file.
Ans this is the html file is pretty much good but just in issue with script
var counter = 0;
$("#box").text(counter);
function reset() {
counter = 0;
$("#box").text(counter);
}
function inc() {
counter = counter + 1;
$("#box").text(counter);
}
function dec() {
counter = counter - 1;
$("#box").text(counter);
}
* {
margin: 0;
padding: 0;
font-family: sans-serif;
}
body {
height: 100vh;
}
.main {
background: #efefef;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
padding: 30px;
}
.main h1 {
margin-bottom: 50px;
}
#box {
height: 50px;
line-height: 50px;
background: #efefef;
text-align: center;
margin-top: 40px;
box-shadow: 1px 1px 5px #000;
font-size: 30px;
}
.btn {
display: flex;
}
.inc,
.dec {
margin: 10px;
padding: 10px;
background: #fcfbfc;
margin-top: 30px;
text-transform: uppercase;
cursor: pointer;
}
.reset {
background: orange;
padding: 5px;
margin-top: 10px;
cursor: pointer;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="counter.css" type="text/css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<title>Counter</title>
</head>
<body>
<div class="main">
<h1 style="font-family: sans-serif;">Counter App</h1>
<div id="box">
</div>
<div class="btn">
<div class="inc" id="inc" onclick="inc();">
Increase
</div>
<div class="dec" id="dec" onclick="dec();">
Decrease
</div>
</div>
<div class="reset" onclick="reset();">
RESET
</div>
</div>
</body>
</html>

Added reset counter variable to 0 in reset() function.
var counter = 0;
$("#box").text(counter);
function reset() {
counter = 0;
$("#box").text(0);
}
function inc() {
counter = counter + 1;
$("#box").text(counter);
}
function dec() {
counter = counter - 1;
$("#box").text(counter);
}
* {
margin: 0;
padding: 0;
font-family: sans-serif;
}
body {
height: 100vh;
}
.main {
background: #efefef;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
padding: 30px;
}
.main h1 {
margin-bottom: 50px;
}
#box {
/* width: 50px; */
height: 50px;
line-height: 50px;
background: #efefef;
text-align: center;
margin-top: 40px;
box-shadow: 1px 1px 5px #000;
font-size: 30px;
}
.btn {
display: flex;
}
.inc,
.dec {
margin: 10px;
padding: 10px;
background: #fcfbfc;
margin-top: 30px;
text-transform: uppercase;
cursor: pointer;
}
.reset {
background: orange;
padding: 5px;
margin-top: 10px;
cursor: pointer;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="counter.css" type="text/css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<title>Counter</title>
</head>
<body>
<div class="main">
<h1 style="font-family: sans-serif;">Counter App</h1>
<div id="box">
</div>
<div class="btn">
<div class="inc" id="inc" onclick="inc();">
Increase
</div>
<div class="dec" id="dec" onclick="dec();">
Decrease
</div>
</div>
<div class="reset" onclick="reset();">
RESET
</div>
</div>
</body>
</html>

Now i have write a new script for it. Check it out all!
var a = 0;
var displayValue = document.getElementById('box');
var updateValue = function() {
displayValue.innerHTML = a;
};
var add = function(valueToAdd) {
a += valueToAdd;
updateValue();
};
var sub = function(valueToAdd) {
a -= valueToAdd;
updateValue();
};
var reset = function() {
a = 0;
updateValue();
};
* {
margin: 0;
padding: 0;
font-family: sans-serif;
}
body {
height: 100vh;
}
.main {
background: #efefef;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
padding: 30px;
}
.main h1 {
margin-bottom: 50px;
}
#box {
height: 50px;
line-height: 50px;
background: #efefef;
text-align: center;
margin-top: 40px;
box-shadow: 1px 1px 5px #000;
font-size: 30px;
}
.btn {
display: flex;
}
.inc,
.dec {
margin: 10px;
padding: 10px;
background: #fcfbfc;
margin-top: 30px;
text-transform: uppercase;
cursor: pointer;
}
.reset {
background: orange;
padding: 5px;
margin-top: 10px;
cursor: pointer;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="counter.css" type="text/css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<title>Counter</title>
</head>
<body>
<div class="main">
<h1 style="font-family: sans-serif;">Counter App</h1>
<div id="box">
</div>
<div class="btn">
<div class="inc" id="inc" onclick="add(1);">
Increment
</div>
<div class="dec" id="dec" onclick="sub(1);">
Decrement
</div>
</div>
<div class="reset" onclick="reset();">
RESET
</div>
</div>
</body>
</html>

Make text color of colorpicker value

I need your help. I have button. With the press on it I can make text. With click on this text I can edit this text. And I have colorpicker. I need, when I choose color the text which I created also will change color(it will change on this value of colorpicker) I don't know how to do this. Help me please
function addText() {
var type = $(".select-txt").val();
var align = $(".form-align").val();
var float = "text-align:";
var id = Date.now();
var editBlock = "$('.edit-block')";
var display = ",'block'";
var colorValue = $(".color").val();
var color = "color:";
var closeTag = ";";
var onclick = "onclick="+editBlock+".css('display'"+display+");";
var ordinary = "<div class='text-"+align+"' id="+id+" "+onclick+" contenteditable style="+float+align+closeTag+
">text</div>";
var h = "<"+type+" class='text-"+align+"' id="+id+" "+onclick+" contenteditable style="+float+align+">text</"+type+">";
if(type == "ordinary") {
$(".preview").append(ordinary);
}
else if(type.startsWith("h")) {
$(".preview").append(h);
}
$(".color").minicolors({
defaultValue: "#000"
});
$(".color").on("change", function() {
var colorValue = $(".color").val();
ordinary.append(color+colorValue);
});
}
function showTextWindow() {
var modal = $(".modal-txt-container");
if (modal.css('display', "none")) {
modal.css('display', "grid");
}
else {
modal.css('display', "none");
}
}
function showTextWindow() {
var modal = document.querySelector(".modal-txt-container");
if (modal.currentStyle) {
var displayStyle = modal.currentStyle.display;
} else if (window.getComputedStyle) {
var displayStyle = window.getComputedStyle(modal, null).getPropertyValue("display");
}
if (displayStyle == "none") {
modal.style.display = "grid";
}
else {
modal.style.display = "none";
}
}
function showElement() {
var modal = document.querySelector(".choose-option");
var add = document.querySelector('.add');
if (modal.currentStyle) {
var displayStyle = modal.currentStyle.display;
} else if (window.getComputedStyle) {
var displayStyle = window.getComputedStyle(modal, null).getPropertyValue("display");
}
if (displayStyle == "none") {
modal.style.display = "grid";
}
else {
modal.style.display = "none";
add.style.display = "block";
}
}
* {
outline: none;
padding: 0;
margin: 0;
}
.choose-option {
background-color: #352a2c;
position: fixed;
color: white;
font-family: 'Scada', sans-serif;
padding: 15px;
width: 14%;
}
.insert-txt-block {
padding-bottom: 3%;
font-size: 1.3em;
}
.btn-txt::before {
content: '\f031';
font-family: "fontAwesome";
margin-right: 3%;
}
.btn-txt {
font-size: 1.2em;
list-style: none;
transition: 0.1s;
padding: 5px;
}
.btn-txt:hover {
background-color: #727272;
}
.modal-insert-txt {
background-color: #352a2c;
color: white;
font-family: 'Scada', sans-serif;
padding: 20px;
padding-right: 25px;
width: 130%;
border-radius: 4px;
}
.modal-txt-container {
display: grid;
justify-content: center;
right: 0;
left: 0;
position: fixed;
top: 15%;
display: none;
}
.container {
position: fixed;
}
select {
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
appearance: none;
outline: 0;
box-shadow: none;
border: 0 !important;
background-image: none;
width: 85%;
height: 100%;
margin: 0;
padding: 0 0 0 .5em;
cursor: pointer;
color: black;
background: white;
border-radius: 1px 0px 0px 1px;
}
.form-group::after {
content: '\25BC';
position: absolute;
padding: 0 0.5em;
background: rgb(59, 61, 52);
pointer-events: none;
line-height: 1.7em;
-webkit-transition: .25s all ease;
-o-transition: .25s all ease;
transition: .25s all ease;
color: white;
}
.form-group {
position: relative;
display: block;
height: 1.7em;
margin: 1% 0% 5% 0;
border: 1px solid #272822;
}
.btn-insert-txt {
border: none;
color: white;
background: #ff5959;
padding: 5px;
font-size: 1.01em;
border-radius: 2px;
cursor: pointer;
}
.btn-insert-txt:hover {
background: #e54040;
}
.modal-insert-txt span {
font-size: 1.1em;
}
.modal-insert-txt h2 {
padding-bottom: 2%;
}
.modal-insert-txt hr {
margin-bottom: 3%;
}
.flex-close-title {
display: flex;
justify-content: space-around;
}
.type-insert li {
cursor: pointer;
}
.close {
font-size: 1.7em;
margin-top: -1%;
cursor: pointer;
}
.close::after {
content: '\f057';
font-family: "fontAwesome";
color: #ff5959;
}
.add {
font-size: 2em;
cursor: pointer;
display: none;
position: fixed;
left: 1%;
top: 2%;
}
.add::after {
content: '\f055';
font-family: "fontAwesome";
color: #ff5959;
}
#textarea-edit {
width: 80%;
height: 100px;
resize: none;
border: 2px solid #3B3D45;
background: #3B3D45;
color: white;
padding: 4%;
font-size: 1.05em;
border-radius: 4px;
display: flex;
justify-content: center;
position: relative;
top: 1%;
}
.edit-block {
background: #272822;
width: 20%;
height: 100vh;
float: right;
color: white;
font-family: 'Scada', sans-serif;
padding: 20px;
display: none;
position: fixed;
top: 0;
right: 0;
}
.edit-block span {
font-size: 1.3em;
}
.minicolors-theme-default .minicolors-input {
height: 29px !important;
padding-left: 30px !important;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Site Bilder</title>
<link rel="stylesheet" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Scada:400,700&subset=cyrillic" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/jquery.minicolors/2.1.2/jquery.minicolors.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/jquery.minicolors/2.1.2/jquery.minicolors.css">
</head>
<body>
<span class="add" onclick="showElement()"></span>
<div class="choose-option">
<div class="flex-close-title">
<div class="insert-txt-block">Insert elements</div>
<span class="close" onclick="showElement()"></span>
</div>
<ul class="type-insert">
<li class="btn-txt" onclick="showTextWindow()">Text</li>
</ul>
</div>
<div class="modal-txt-container">
<div class="modal-insert-txt">
<h2>Insert text</h2>
<hr>
<span>Тип Текста</span>
<div class="form-group">
<select class="select-txt">
<option value="ordinary" selected>Plain text</option>
<option value="h1">h1</option>
<option value="h2">h2</option>
<option value="h3">h3</option>
<option value="h4">h4</option>
<option value="h5">h5</option>
<option value="h6">h6</option>
</select>
</div>
<span>Text alignment</span>
<div class="form-group">
<select class="form-align">
<option value="left">left</option>
<option value="center">Center</option>
<option value="right">right</option>
</select>
</div>
<div class="modal-footer">
<button type="button" class="btn-insert-txt" onclick="addText()">Insert text</button>
</div>
</div>
</div>
<div class="preview">
</div>
<div class="edit-block">
<div class="wrap">
<span class="title-textarea">
Цвет
</span>
<input type="text" id="hue" class="color" data-control="hue">
</div>
</div>
<script src="js/app.js"></script>
</body>
</html>

The solution I decided on is simple enough, I add a class to know which piece of text I'm currently editing, and then set the color CSS attribute to the colour picker's selection for that selected class.
So your onclick is now:
var onclick = 'onclick="editTextColour(this)"';
I made a new function to handle the basics, (this) as the param for onclick is treated as the element that calls it:
function editTextColour(elem) {
$('.editing').removeClass('editing');
$(elem).addClass('editing');
$('.edit-block').show();
}
And then your change event for the color picker is just this:
$(".color").on("change", function() {
var colorValue = $(".color").val();
$('.preview .editing').css('color', colorValue);
});
JSFiddle

How do I get the value of a users input and then convert it to HH:MM format in javascript or jquery using moment.js?

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