Sorry if this has been asked a million times already, i'm quite new with this so it's difficult for me to understand some of the responses. I am trying to have two analog clocks side by side, ticking away. I am not sure why this code isn't showing that.
I would like to make a simple website of multiple timezones shown on each clock, but for now they can all be the same time.
const secondHand = document.querySelector('.second-hand');
const minsHand = document.querySelector('.min-hand');
const hourHand = document.querySelector('.hour-hand');
function setDate() {
const now = new Date();
const seconds = now.getSeconds();
const secondsDegrees = ((seconds / 60) * 360) + 90;
secondHand.style.transform = `rotate(${secondsDegrees}deg)`;
const mins = now.getMinutes();
const minsDegrees = ((mins / 60) * 360) + ((seconds / 60) * 6) + 90;
minsHand.style.transform = `rotate(${minsDegrees}deg)`;
const hour = now.getHours();
const hourDegrees = ((hour / 12) * 360) + ((mins / 60) * 30) + 90;
hourHand.style.transform = `rotate(${hourDegrees}deg)`;
}
setInterval(setDate, 1000);
setDate();
html {
background: #018DED url(https://unsplash.it/1500/1000?image=881&blur=5);
background-size: cover;
font-family: 'helvetica neue';
text-align: center;
font-size: 10px;
}
body {
margin: 0;
font-size: 2rem;
display: flex;
flex: 1;
min-height: 100vh;
align-items: center;
}
.clock,
.clocktwo {
width: 30rem;
height: 30rem;
border: 20px solid white;
border-radius: 50%;
margin: 50px auto;
position: relative;
padding: 2rem;
box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.1), inset 0 0 0 3px #EFEFEF, inset 0 0 10px black, 0 0 10px rgba(0, 0, 0, 0.2);
}
.clock-face,
.clock-facetwo {
position: relative;
width: 100%;
height: 100%;
transform: translateY(-3px);
/* account for the height of the clock hands */
}
.hand,
.handtwo {
width: 50%;
height: 6px;
background: black;
position: absolute;
top: 50%;
/* transform-origin will allow us to rotate the clock hands along the x axis, so it */
transform-origin: 100%;
transform: rotate(90deg);
transition: all 0.5s;
transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
}
<div class="clock">
<div class="clock-face">
<div class="hand hour-hand"></div>
<div class="hand min-hand"></div>
<div class="hand second-hand"></div>
</div>
</div>
<div class="clocktwo">
<div class="clock-facetwo">
<div class="handtwo hour-hand"></div>
<div class="handtwo min-hand"></div>
<div class="handtwo second-hand"></div>
</div>
</div>
The problem is that you have multiple (two to be exact) of each (second, min, hour) clock 'hands'. But you use querySelector which will only select the first (from top to bottom of the HTML structure) element it finds.
What you need to do, is to select all of them using e.g. querySelectorAll and then loop over them.
const secondHand = document.querySelectorAll('.second-hand');
const minsHand = document.querySelectorAll('.min-hand');
const hourHand = document.querySelectorAll('.hour-hand');
function setDate() {
const now = new Date();
const seconds = now.getSeconds();
const secondsDegrees = ((seconds / 60) * 360) + 90;
secondHand.forEach(sec => sec.style.transform = `rotate(${secondsDegrees}deg)`);
const mins = now.getMinutes();
const minsDegrees = ((mins / 60) * 360) + ((seconds / 60) * 6) + 90;
minsHand.forEach(min => min.style.transform = `rotate(${minsDegrees}deg)`);
const hour = now.getHours();
const hourDegrees = ((hour / 12) * 360) + ((mins / 60) * 30) + 90;
hourHand.forEach(hour => hour.style.transform = `rotate(${hourDegrees}deg)`);
}
setInterval(setDate, 1000);
setDate();
html {
background: #018DED url(https://unsplash.it/1500/1000?image=881&blur=5);
background-size: cover;
font-family: 'helvetica neue';
text-align: center;
font-size: 10px;
}
body {
margin: 0;
font-size: 2rem;
display: flex;
flex: 1;
min-height: 100vh;
align-items: center;
}
.clock,
.clocktwo {
width: 30rem;
height: 30rem;
border: 20px solid white;
border-radius: 50%;
margin: 50px auto;
position: relative;
padding: 2rem;
box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.1), inset 0 0 0 3px #EFEFEF, inset 0 0 10px black, 0 0 10px rgba(0, 0, 0, 0.2);
}
.clock-face,
.clock-facetwo {
position: relative;
width: 100%;
height: 100%;
transform: translateY(-3px);
/* account for the height of the clock hands */
}
.hand,
.handtwo {
width: 50%;
height: 6px;
background: black;
position: absolute;
top: 50%;
/* transform-origin will allow us to rotate the clock hands along the x axis, so it */
transform-origin: 100%;
transform: rotate(90deg);
transition: all 0.5s;
transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
}
<div class="clock">
<div class="clock-face">
<div class="hand hour-hand"></div>
<div class="hand min-hand"></div>
<div class="hand second-hand"></div>
</div>
</div>
<div class="clocktwo">
<div class="clock-facetwo">
<div class="handtwo hour-hand"></div>
<div class="handtwo min-hand"></div>
<div class="handtwo second-hand"></div>
</div>
</div>
You need to use querySelectorAll to get reference to all elements.
Then you can set the transform values for each element like this:
const bothSecondHands = document.querySelectorAll('.second-hand');
bothSecondHands.forEach(secondHand => secondHand.style.transform = `rotate(${secondsDegrees}deg)`);
Related
I'm fairly new to coding and trying to recreate a simple animated JavaScript clock (from Javascript30 course) in a Rails app using Stimulus (as these are what I'm most familiar with).
I want to change the transform property of the .hand class at regular intervals to replicate a ticking clock in Stimulus where you'd use .style.transform in JavaScript. I can't understand how to change a property regularly using .classList
This is the working code:
<body>
<div class="clock">
<div class="clock-face">
<div class="hand hour-hand"></div>
<div class="hand min-hand"></div>
<div class="hand second-hand"></div>
</div>
</div>
<style>
.clock {
width: 30rem;
height: 30rem;
border: 20px solid white;
border-radius: 50%;
margin: 50px auto;
position: relative;
padding: 2rem;
box-shadow:
0 0 0 4px rgba(0,0,0,0.1),
inset 0 0 0 3px #EFEFEF,
inset 0 0 10px black,
0 0 10px rgba(0,0,0,0.2);
}
.clock-face {
position: relative;
width: 100%;
height: 100%;
transform: translateY(-3px); /* account for the height of the clock hands */
}
.hand {
width: 50%;
height: 6px;
background: black;
position: absolute;
top: 50%;
transform-origin: 100%;
**transform: rotate(90deg);**
transition: all 0.05s;
transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
}
</style>
<script>
const secondHand = document.querySelector('.second-hand');
const minsHand = document.querySelector('.min-hand');
const hourHand = document.querySelector('.hour-hand');
function setDate() {
const now = new Date();
const seconds = now.getSeconds();
const secondsDegrees = ((seconds / 60) * 360) + 90;
**secondHand.style.transform = `rotate(${secondsDegrees}deg)`;**
const mins = now.getMinutes();
const minsDegrees = ((mins / 60) * 360) + ((seconds/60)*6) + 90;
minsHand.style.transform = `rotate(${minsDegrees}deg)`;
const hour = now.getHours();
const hourDegrees = ((hour / 12) * 360) + ((mins/60)*30) + 90;
hourHand.style.transform = `rotate(${hourDegrees}deg)`;
}
setInterval(setDate, 1000);
setDate();
</script>
What I cannot figure out is how to recreate
minsHand.style.transform = `rotate(${minsDegrees}deg)`;
With the same CSS as above, this HTML with data controllers, targets and actions:
And this Stimulus controller:
import { Controller } from "stimulus"
export default class extends Controller {
// static targets = [ "output" ]
static values = { refreshInterval: Number }
static targets = [ "hour", "min", "sec" ]
connect() {
this.setDate();
if (this.hasRefreshIntervalValue) {
this.startRefreshing()
}
}
setSeconds(){
const now = new Date();
const seconds = now.getSeconds();
const secondsDegrees = ((seconds / 60) * 360 )+ 90;
**console.dir(this.secTarget)**
}
setDate() {
this.setSeconds();
}
startRefreshing() {
setInterval(() => {
this.setDate()
}, this.refreshIntervalValue)
}
}
I am currently trying to create a music app based on the following video: https://youtu.be/OafpiyPa63I?t=13127
I am at the linked timestamp, and I have written the code exactly as shown in the video, but for some reason, when I try to seek, the input is set back to 0 and therefore so is the song. My code for this part:
let currentStart = document.getElementById('currentStart');
let currentEnd = document.getElementById('currentEnd');
let seek = document.getElementById('seek');
let bar2 = document.getElementById('bar2');
let dot = document.getElementsByClassName('dot')[0];
music.addEventListener('timeupdate', () => {
let music_curr = music.currentTime;
let music_dur = music.duration;
let min1 = Math.floor(music_dur / 60);
let sec1 = Math.floor(music_dur % 60);
if (sec1 < 10) {
sec1 = `0${sec1}`;
};
currentEnd.innerText = `${min1}:${sec1}`;
let min2 = Math.floor(music_curr / 60);
let sec2 = Math.floor(music_curr % 60);
if (sec2 < 10) {
sec2 = `0${sec2}`;
};
currentStart.innerText = `${min2}:${sec2}`;
let progressBar = parseInt((music_curr / music_dur) * 100);
seek.value = progressBar;
let seekbar = seek.value;
bar2.style.width = `${seekbar}%`;
dot.style.left = `${seekbar}%`;
});
seek.addEventListener('change', () => {
music.currentTime = seek.value * music.duration / 100;
});
<div class="bar">
<input type="range" id="seek" min="0" max="100">
<div class="bar2" id="bar2"></div>
<div class="dot"></div>
</div>
header .master_play .bar {
position: relative;
width: 43%;
height: 2px;
background: rgb(105,105,170,.1);
margin: 0px 15px 0px 10px;
}
header .master_play .bar .bar2 {
position: absolute;
background: #36e2ec;
width: 0%;
height: 100%;
top: 0;
transition: 1s linear;
}
header .master_play .bar .dot {
position: absolute;
width: 5px;
height: 5px;
background: #36e2ec;
border-radius: 50%;
left: 0%;
top: -1.5px;
transition: 1s linear;
}
header .master_play .bar .dot::before {
content: '';
position: absolute;
width: 15px;
height: 15px;
border: 1px solid #36e2ec;
border-radius: 50%;
left: -6.5px;
top: -6.5px;
box-shadow: inset 0px 0px 3px #36e2ec;
}
header .master_play .bar input {
position: absolute;
width: 100%;
top: -7px;
left: 0;
cursor: pointer;
z-index: 999999999999;
opacity: .5;
}
I'm not sure if I am in the wrong, or if the tutorial is outdated.
I figured out it was the platform I was running the code on. Somewhere it had clashed, so I was able to move it to a new host and it worked.
Something is wrong in java script section of the code
The hour hand is not working properly. It is rotating after every 60 seconds.
Also, the minute hand is showing the wrong time. Please check the formula written in js. The formula I have used was also written by gfg. Please explain the necessary changes. Thank you.
const secHand=document.querySelector('.second-hand');
const minhand=document.querySelector('.minute-hand');
const hrhand=document.querySelector('.hour-hand');
function setDate(){
const d=new Date();
const hr=d.getHours();
const m=d.getMinutes();
const sethrdeg= 30*hr + m/2;
hrhand.style.transform=`rotate(${sethrdeg}deg)`;
const setmdeg=6*m;
minhand.style.transform=`rotate(${setmdeg}deg)`;
const s=d.getSeconds();
const setsdeg=6*s;
secHand.style.transform=`rotate(${setsdeg}deg)`;
}
setInterval(setDate,1000);
*{
background:url(https://images.unsplash.com/photo-1523821741446-edb2b68bb7a0?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8MXx8fGVufDB8fHx8&w=1000&q=80);
margin: 0;
padding: 0;
font-family: Georgia, 'Times New Roman', Times, serif;
background-size: cover;
}
body{
display: flex;
height: 100vh;
align-items: center;
}
.clock{
border : 3px solid black;
border-radius: 50%;
padding: 5px;
position: relative;
left:30rem;
width: 25rem;
height: 25rem;
justify-content: center;
box-shadow:
0 0 0 4px rgba(0,0,0,0.1),
inset 0 0 0 3px #EFEFEF,
inset 0 0 10px black,
0 0 10px rgba(0,0,0,0.2);
}
.clock-face{
position :relative;
transform: translateY(-3px);
}
.hand{
background: white;
width: 48%;
height: 1.5%;
position: absolute;
top :50%;
transform-origin: 100%;
transform: rotate(90deg);
transition: all 0.06s;
transition-timing-function: cubic-bezier(0.1, 1.09, 0.52, 1.26);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Clock</title>
<link rel="stylesheet" href="clock.css">
</head>
<body>
<div class="clock">
<div class="clock-face"></div>
<div class="hand hour-hand"></div>
<div class="hand minute-hand"></div>
<div class="hand second-hand"></div>
</div>
<script src="clock.js"></script>
</body>
</html>
The issue about the mispositionned hands was due to the 90 degres rotation needed to show 00:00:00. So in the calculation, you always have to add this 90 degres.
About the calculation itself:
The clock has 360 degres for 12 hours (360/12) and for 60 minutes/seconds (360/60).
To have the hours hand constantly moving beween the hour knotches instead of jumping to it: The hour knotch is (360 * hr) / 12 and the minutes elapsed in this hour is (360 * m) / (12 * 60).
The same concept applies for the minutes hand.
Lastly, the seconds hand was strangely jumping when passing from 59 to 0. That was due to the rotation going from 359 degres to zero instead of going to 360. So in fact the hand was animated backward (counter clockwize) very fast. To fix that, I simply added a line to remove the transition animation when at 0 second.
secHand.classList.toggle("hand-transition", s != 0);
Have a look at .toggle([class],[force]).
const secHand = document.querySelector(".second-hand");
const minhand = document.querySelector(".minute-hand");
const hrhand = document.querySelector(".hour-hand");
function setDate() {
const d = new Date();
const hr = d.getHours();
const m = d.getMinutes();
const s = d.getSeconds();
// Remove the transition at 0 sec.
secHand.classList.toggle("hand-transition", s != 0);
const sethrdeg = (360 * hr) / 12 + (360 * m) / (12 * 60) + 90; // 30 * hr + m / 2;
hrhand.style.transform = `rotate(${sethrdeg}deg)`;
const setmdeg = (360 * m) / 60 + (360 * s) / (60 * 60) + 90; // 6 * m;
minhand.style.transform = `rotate(${setmdeg}deg)`;
const setsdeg = (360 / 60) * s + 90; // 6 * s;
secHand.style.transform = `rotate(${setsdeg}deg)`;
}
setInterval(setDate, 1000);
* {
background: url(https://images.unsplash.com/photo-1523821741446-edb2b68bb7a0?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8MXx8fGVufDB8fHx8&w=1000&q=80);
margin: 0;
padding: 0;
font-family: Georgia, "Times New Roman", Times, serif;
background-size: cover;
}
body {
display: flex;
height: 100vh;
align-items: center;
}
.clock {
border: 3px solid black;
border-radius: 50%;
padding: 5px;
position: relative;
left: 30rem;
width: 25rem;
height: 25rem;
justify-content: center;
box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.1), inset 0 0 0 3px #efefef,
inset 0 0 10px black, 0 0 10px rgba(0, 0, 0, 0.2);
}
.clock-face {
position: relative;
transform: translateY(-3px);
}
.hand {
background: white;
width: 48%;
height: 1.5%;
position: absolute;
top: 50%;
transform-origin: 100%;
transform: rotate(90deg);
}
/* Specific class for the transition, so it can be removed */
.hand-transition {
transition: all 0.06s;
transition-timing-function: cubic-bezier(0.1, 1.09, 0.52, 1.26);
}
.minute-hand {
background: blue;
}
.hour-hand {
background: red;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Clock</title>
<link rel="stylesheet" href="clock.css">
</head>
<body>
<div class="clock">
<div class="clock-face"></div>
<div class="hand hour-hand"></div>
<div class="hand minute-hand"></div>
<div class="hand second-hand"></div>
</div>
<script src="clock.js"></script>
</body>
</html>
CodePen
I apologize in advance for my English but I am a Slovak and I also helped a bit with Google Translator :)
I hope to find help here for my problem ...
I have a loan calculator examples will be given below.
I try to make sure that when I have a calculator on the domain.xx/loan page, I need to achieve that when I choose the loan amount, loan maturity and when I click the button I want the page to redirect to domain.xx/request ... where the form will be ready
The problem is that I don't know how to send the information from the calculator to the second page so that it is attached to the form that will be filled in and it will be sent to the DB
I hope you understand my problem.
I use: Laravel and JS
$("document").ready(function() {
const rangeSliderAmount = document.querySelector('.lc-range-slider-amount');
const rangeSliderMonth = document.querySelector('.lc-range-slider-month');
const rangeValueBarAmount = document.querySelector('#lc-range-value-bar-amount');
const rangeValueBarMonth = document.querySelector('#lc-range-value-bar-month');
const rangeValueAmount = document.querySelector('#lc-range-value-amount');
const rangeValueMonth = document.querySelector('#lc-range-value-month');
const rangeAmount = document.getElementById("lc-amount");
const rangeMonth = document.getElementById("lc-month");
let isDown = false;
function dragHandler() {
isDown = !isDown;
if (!isDown) {
rangeValueAmount.style.setProperty('opacity', '0');
rangeValueMonth.style.setProperty('opacity', '0');
} else {
rangeValueAmount.style.setProperty('opacity', '0');
rangeValueMonth.style.setProperty('opacity', '0');
}
}
function dragOn(e) {
if (!isDown) return;
rangeValueHandler();
}
function rangeValueHandler() {
amountPercentage = `${((rangeSliderAmount.value - 500) * 100) / (6000 - 500)}%`;
monthPercentage = `${((rangeSliderMonth.value - 6) * 100) / (60 - 6)}%`;
rangeValueBarAmount.style.setProperty('width', amountPercentage);
rangeValueBarMonth.style.setProperty('width', monthPercentage);
rangeValueAmount.innerHTML = `${rangeSliderAmount.value}`;
rangeValueMonth.innerHTML = `${rangeSliderMonth.value}`;
rangeAmount.innerHTML = `${rangeSliderAmount.value}`;
rangeMonth.innerHTML = `${rangeSliderMonth.value}`;
vypocetSplatka();
}
rangeValueHandler();
rangeSliderAmount.addEventListener('mousedown', dragHandler);
rangeSliderAmount.addEventListener('mousemove', dragOn);
rangeSliderAmount.addEventListener('mouseup', dragHandler);
rangeSliderAmount.addEventListener('click', rangeValueHandler);
rangeSliderAmount.addEventListener('touchstart', dragHandler);
rangeSliderAmount.addEventListener('touchmove', dragOn);
rangeSliderAmount.addEventListener('touchend', dragHandler);
rangeSliderAmount.addEventListener('touchstart', rangeValueHandler);
rangeSliderMonth.addEventListener('mousedown', dragHandler);
rangeSliderMonth.addEventListener('mousemove', dragOn);
rangeSliderMonth.addEventListener('mouseup', dragHandler);
rangeSliderMonth.addEventListener('click', rangeValueHandler);
rangeSliderMonth.addEventListener('touchstart', dragHandler);
rangeSliderMonth.addEventListener('touchmove', dragOn);
rangeSliderMonth.addEventListener('touchend', dragHandler);
rangeSliderMonth.addEventListener('touchstart', rangeValueHandler);
function slideValue(inputElement) {
var sliderElement = inputElement.closest('.lc-ranger-box').find('.slider');
var val = parseInt(inputElement.val().replace(' ', '')) || 0;
var sliderMax = $(sliderElement).slider('option', 'max');
var sliderMin = $(sliderElement).slider('option', 'min');
if (val > sliderMax) {
val = sliderMax;
}
if (val < sliderMin) {
val = sliderMin;
}
$(sliderElement).slider('value', val);
val = formatNumber(val, 0, ',', ' ');
if (inputElement.val() !== val) {
inputElement.val(val);
}
}
$('.slider-value .value').change(function(){
slideValue($(this));
vypocetSplatka();
});
vypocetSplatka();
$('.insurance-box').on('change', 'input[name=poistenie]', function(){
vypocetSplatka();
});
function formatNumber(number, decimals, dec_point, thousands_sep) {
var str = number.toFixed(decimals ? decimals : 0).toString().split('.');
var parts = [];
for (var i = str[0].length; i > 0; i -= 3) {
parts.unshift(str[0].substring(Math.max(0, i - 3), i));
}
str[0] = parts.join(thousands_sep ? thousands_sep : ',');
return str.join(dec_point ? dec_point : '.');
}
function vypocetSplatka() {
var mesiace = parseInt($('[data-value="months"]').html());
var pozicka = parseInt($('[data-value="loan"]').html().replace(' ', ''));
var poplatok = (pozicka / 100) * 2;
$('.hascharge').show();
if(pozicka <= -1){
poplatok = 0;
$('.hascharge').hide();
}
var benefit = 2;
var perc, payment_mpr, payment_mpr_full, insurance, payment_month, payment_month_full, suma, suma_full, rateValue, rpmn;
$('[data-value="charge"]').text(poplatok);
$('[data-value="months-val"]').text(mesiace);
$('span[data-value="loan"]').text(price_format(pozicka));
if (pozicka <= 300) {
perc = 15.18;
} else if (pozicka <= 700) {
perc = 13.9;
} else if (pozicka <= 1499) {
perc = 11.4;
} else {
perc = 8.9;
}
if (pozicka <= 300 && mesiace<=60 && mesiace>=6) {
perc = 15.18;
} else if (pozicka <= 679 && mesiace<=60 && mesiace>=6) {
perc = 13.9;
} else if (pozicka <= 720 && mesiace<=60 && mesiace>=6) {
perc = 10.01;
} else if (pozicka <= 1499 && mesiace<=60 && mesiace>=6) {
perc = 11.4;
} else if (mesiace<=60 && mesiace>=6) {
perc = 8.9;
}
var diff = (Math.round((perc - benefit) * 100) / 100).toFixed(2);
diff = diff.replace('.', ',');
$('[data-value="interest"]').text(diff);
var pmt_ir_full = perc / 1200;
var pmt_ir = (perc - benefit) / 1200;
//pmt_ir = 13.9 / 1200;
var pmt_np = mesiace;
var pmt_pv = -pozicka;
if (pmt_np > 0 && pmt_pv < 0) {
payment_mpr = pmt(pmt_ir, pmt_np, pmt_pv);
payment_mpr_full = pmt(pmt_ir_full, pmt_np, pmt_pv);
$('.insurance-label').text('');
// poistenie
insurance = 0;
if ($('input[name=poistenie]:checked').val() === '1') {
insurance += 0.081 * pozicka / 100;
$('.insurance-label').text('vrátane poistenia');
}
if ($('input[name=poistenie]:checked').val() === '2') {
insurance += 0.148 * pozicka / 100;
$('.insurance-label').text('vrátane poistenia');
}
//payment_mpr += ' €';
payment_month = rd(payment_mpr + insurance);
payment_month_full = rd(payment_mpr_full + insurance);
payment_mpr = rd(payment_mpr);
suma = payment_month * mesiace + poplatok;
suma_full = payment_month_full * mesiace + poplatok;
$('#clientsave').html(price_format(suma_full - suma) + ' €');
} else {
payment_mpr = '';
}
$('[data-value="fee"]').html(price_format(payment_month));
$('[data-value="fee-val"]').text(price_format(payment_mpr));
rateValue = rate(pmt_np, payment_mpr, -pozicka + poplatok);
rpmn = (Math.pow(rateValue + 1, 12) - 1) * 100;
$('[data-value="rpmn-val"]').text(price_format(rpmn));
$('[data-value="sum"]').text(price_format(payment_mpr * mesiace + poplatok));
$('#vyskaF').val(pozicka);
$('#splatnostF').val(mesiace);
if ($('input[name=poistenie]:checked').val() === '0') { $('#poistenieF').val("bez poistenia"); };
if ($('input[name=poistenie]:checked').val() === '1') { $('#poistenieF').val("základné"); };
if ($('input[name=poistenie]:checked').val() === '2') { $('#poistenieF').val("rozšĂÂrenĂ©"); };
//bez benefitu repre priklad *NEW 16.11:2017 -- START
var diffWo = (Math.round((perc) * 100) / 100).toFixed(2);
diffWo = diffWo.replace('.', ',');
payment_mpr_full = rd(payment_mpr_full);
var rateValue_full, rpmn_full;
rateValue_full = rate(pmt_np, payment_mpr_full, -pozicka + poplatok);
rpmn_full = (Math.pow(rateValue_full + 1, 12) - 1) * 100;
$('[data-value="interest-wo"]').text(diffWo);
$('[data-value="fee-val-wo"]').text(price_format(payment_mpr_full));
$('[data-value="rpmn-val-wo"]').text(price_format(rpmn_full));
$('[data-value="sum-wo"]').text(price_format(payment_mpr_full * mesiace + poplatok));
// *NEW 16.11:2017 -- END
}
function rd(n) {
var r = Math.round(n * 100) / 100;
return r;
}
function price_format(number, decimals, decPoint, thousandsSep) {
decimals = decimals || 2;
number = parseFloat(number);
if (!decPoint || !thousandsSep) {
decPoint = ',';
thousandsSep = ' ';
}
var roundedNumber = Math.round(Math.abs(number) * ('1e' + decimals)) + '';
var numbersString = decimals ? roundedNumber.slice(0, decimals * -1) : roundedNumber;
var decimalsString = decimals ? roundedNumber.slice(decimals * -1) : '';
var formattedNumber = '';
while (numbersString.length > 3) {
formattedNumber += thousandsSep + numbersString.slice(-3);
numbersString = numbersString.slice(0, -3);
}
return (number < 0 ? '-' : '') + numbersString + formattedNumber + (decimalsString ? (decPoint + decimalsString) : '');
}
//function pmt(ir, np, pv, fv = 0, type = 0) { //defaul value nie je vsade podporovane!!! RBR
function pmt(ir, np, pv, fv, type) {
var fv = (typeof fv !== 'undefined') ? fv : 0;
var type = (typeof type !== 'undefined') ? type : 0;
/*
* ir - interest rate per month
* np - number of periods (months)
* pv - present value
* fv - future value
* type - when the payments are due:
* 0: end of the period, e.g. end of month (default)
* 1: beginning of period
*/
if (ir === 0) {
return -(pv + fv) / np;
}
var pvif = Math.pow(1 + ir, np);
var pmt = -ir * pv * (pvif + fv) / (pvif - 1);
if (type === 1) {
pmt /= (1 + ir);
}
return pmt;
}
function rate(paymentsPerYear, paymentAmount, presentValue, futureValue, dueEndOrBeginning, interest) {
//If interest, futureValue, dueEndorBeginning was not set, set now
if (interest == null) {
interest = 0.01;
}
if (futureValue == null) {
futureValue = 0;
}
if (dueEndOrBeginning == null) {
dueEndOrBeginning = 0;
}
var FINANCIAL_MAX_ITERATIONS = 128; //Bet accuracy with 128
var FINANCIAL_PRECISION = 0.0000001; //1.0e-8
var y, y0, y1, x0, x1 = 0,
f = 0,
i = 0;
var rate = interest;
if (Math.abs(rate) < FINANCIAL_PRECISION) {
y = presentValue * (1 + paymentsPerYear * rate) + paymentAmount * (1 + rate * dueEndOrBeginning) * paymentsPerYear + futureValue;
} else {
f = Math.exp(paymentsPerYear * Math.log(1 + rate));
y = presentValue * f + paymentAmount * (1 / rate + dueEndOrBeginning) * (f - 1) + futureValue;
}
y0 = presentValue + paymentAmount * paymentsPerYear + futureValue;
y1 = presentValue * f + paymentAmount * (1 / rate + dueEndOrBeginning) * (f - 1) + futureValue;
// find root by Newton secant method
i = x0 = 0.0;
x1 = rate;
while ((Math.abs(y0 - y1) > FINANCIAL_PRECISION) &&
(i < FINANCIAL_MAX_ITERATIONS)) {
rate = (y1 * x0 - y0 * x1) / (y1 - y0);
x0 = x1;
x1 = rate;
if (Math.abs(rate) < FINANCIAL_PRECISION) {
y = presentValue * (1 + paymentsPerYear * rate) + paymentAmount * (1 + rate * dueEndOrBeginning) * paymentsPerYear + futureValue;
} else {
f = Math.exp(paymentsPerYear * Math.log(1 + rate));
y = presentValue * f + paymentAmount * (1 / rate + dueEndOrBeginning) * (f - 1) + futureValue;
}
y0 = y1;
y1 = y;
++i;
}
return rate;
}
});
/*=================================================================*/
/* LOAN CALCULATOR
/*=================================================================*/
.lc-wrapper {
width: 100%;
margin: 0 auto;
padding: 5px 0;
overflow: hidden;
display: flex;
flex-direction: row;
border-radius: 10px;
background: #302f4e;
}
.lc-ranger-content {
width: 70%;
padding: 0 10px;
}
.lc-ranger-box {
width: 100%;
position: relative;
margin: 0;
padding: 0;
}
.lc-ranger-box:first-child {
margin-bottom: 5px;
border-bottom: 1px solid #28263e;
}
.lc-ranger-box-top {
width: 100%;
padding: 7px 25px;
display: flex;
justify-content: space-between;
align-items: center;
}
.lc-amount {
width: 90px;
height: 90px;
position: relative;
display: block;
padding-top: 20px;
line-height: 30px;
text-align: center;
font-size: 24px;
font-weight: 700;
color: #FF4C60;
font-style: normal;
line-height: normal;
border-radius: 50%;
box-sizing: border-box;
transform-origin: center center;
border: 5px solid #5E5C7F;
background: #F9F9FF;
}
.lc-amount::after {
display: block;
content: "EUR";
font-size: 16px;
letter-spacing: 0.07em;
margin-top: -2px;
}
.lc-month {
width: 90px;
height: 90px;
position: relative;
display: block;
padding-top: 20px;
line-height: 30px;
text-align: center;
font-size: 24px;
font-weight: 700;
color: #FF4C60;
font-style: normal;
line-height: normal;
border-radius: 50%;
box-sizing: border-box;
transform-origin: center center;
border: 5px solid #5E5C7F;
background: #F9F9FF;
}
.lc-month::after {
display: block;
content: "Mon.";
font-size: 16px;
letter-spacing: 0.07em;
margin-top: -2px;
}
.lc-ranger-box-sliding {
padding: 15px 0;
position: relative;
}
.lc-ranger-container {
position: relative;
padding: 15px 0;
}
.lc-ranger-box-bottom {
width: 100%;
padding: 7px 25px;
display: flex;
justify-content: space-between;
align-items: center;
}
.lc-pyment-content {
width: 30%;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
position: relative;
padding: 0;
border-left: 1px solid #28263e;
}
.lc-payment-head {
width: 100%;
padding: 5px;
text-align: center;
}
.lc-payment-show {
width: 100%;
}
.lc-payment {
width: 200px;
height: 200px;
margin: 0 auto;
padding-top: 60px;
line-height: 60px;
display: block;
font-size: 36px;
font-weight: 700;
text-align: center;
position: relative;
border-radius: 100%;
box-sizing: border-box;
border: 5px solid #5E5C7F;
background: #F9F9FF;
color: #FF4C60;
}
.lc-payment::after {
display: block;
content: "EUR/MON.";
font-size: 16px;
letter-spacing: 0.07em;
margin-top: -2px;
}
.lc-payment-btn {
width: 100%;
padding: 4px 0 8px 0;
text-align: center;
}
.lc-text {
color: #F9F9FF;
}
.representative-example {
width: 100%;
position: relative;
margin: 50px 0;
padding: 15px;
font-size: 13px;
color: #F9F9FF;
border-radius: 5px;
background: #302f4e !important;
}
.representative-example span.span-bold {
font-weight: 500;
color: #FF4C60;
}
.representative-example span {
font-weight: 400;
color: #FF4C60;
}
#lc-range-value-bar-amount {
width: 100%;
content: "0";
background-color: #FF4C60;
position: absolute;
z-index: 100;
height: 25px;
top: 0;
margin: 0;
border-radius: 5px;
}
#lc-range-value-bar-month {
width: 100%;
content: "0";
background-color: #FF4C60;
position: absolute;
z-index: 99;
height: 25px;
top: 0;
margin: 0;
border-radius: 5px;
}
input[type='range'] {
width: 100%;
cursor: pointer;
position: absolute;
top: 0;
margin: 0;
border-radius: 5px
}
input[type=range]:focus {
outline: none;
}
input[type='range'],
input[type='range']::-webkit-slider-runnable-track,
input[type='range']::-webkit-slider-thumb {
-webkit-appearance: none;
}
input[type='range']::-webkit-slider-runnable-track {
width: 100%;
height: 25px;
cursor: pointer;
animate: 0.2s;
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
background: #F9F9FF;
border-radius: 5px;
border: 0px solid #000101;
}
input[type='range']::-webkit-slider-thumb {
box-shadow: 0 2px 10px 0 rgba(0,0,0,0.08);
border: 14px solid #F9F9FF;
height: 53px;
width: 53px;
border-radius: 30px;
background: #FF4C60;
cursor: pointer;
-webkit-appearance: none;
margin-top: -13.5px;
position: relative;
z-index: 1000;
}
input[type='range']::-webkit-slider-thumb::before {
position: absolute;
content: '';
height: 10px; /* equal to height of runnable track */
width: 500px; /* make this bigger than the widest range input element */
left: -502px; /* this should be -2px - width */
top: 8px; /* don't change this */
background: #777;
}
input[type=range]::-moz-range-track {
width: 100%;
height: 12.8px;
cursor: pointer;
animate: 0.2s;
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
background: #353353;
border-radius: 25px;
border: 0px solid #000101;
}
input[type=range]::-moz-range-thumb {
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
border: 0px solid #000000;
height: 20px;
width: 39px;
border-radius: 7px;
background: #000000;
cursor: pointer;
}
input[type=range]::-ms-track {
width: 100%;
height: 12.8px;
cursor: pointer;
animate: 0.2s;
background: transparent;
border-color: transparent;
border-width: 39px 0;
color: transparent;
}
input[type=range]::-ms-fill-lower {
background: #000;
border: 0px solid #000101;
border-radius: 50px;
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
}
input[type=range]::-ms-fill-upper {
background: #000;
border: 0px solid #000101;
border-radius: 50px;
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
}
input[type=range]::-ms-thumb {
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
border: 0px solid #000000;
height: 20px;
width: 39px;
border-radius: 7px;
background: #000;
cursor: pointer;
}
/*
#range-value {
content:"0";
background: rgba(233, 239, 244, 0.1);;
position: absolute;
z-index: 10000;
height: 25px;
top: -65px;
margin: 0;
border-radius: 5px;
left: 50%;
transform0: translateX(-50%);
font-size: 20px;
padding: 12px;
color: #41576B;
box-shadow: 0 2px 10px 0 rgba(0,0,0,0.08);
text-align: center;
opacity: 0;
}*/
/*=================================================================*/
/* BUTTONS
/*=================================================================*/
.btn {
border-radius: 30px;
font-family: "Rubik", sans-serif;
font-size: 16px;
font-weight: 700;
overflow: hidden;
line-height: 1;
padding: 12px 32px;
position: relative;
}
.btn:focus {
box-shadow: none;
}
.btn:focus {
outline: 0;
}
#-webkit-keyframes button-push {
50% {
-webkit-transform: scale(0.8);
transform: scale(0.8);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
#keyframes hvr-push {
50% {
-webkit-transform: scale(0.8);
transform: scale(0.8);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
.btn-default {
color: #FFF;
background: #FF4C60;
display: inline-block;
vertical-align: middle;
position: relative;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.btn-default:hover {
color: #FFF;
-webkit-animation-name: button-push;
animation-name: button-push;
-webkit-animation-duration: 0.3s;
animation-duration: 0.3s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="loan bg-shadow">
<div class="container">
<form id="loanFormSubmit" method="get" action="{{ route('request.index') }}">
#csrf
<div class="container">
<div class="lc-wrapper shadow-main02s">
<div class="lc-ranger-content">
<div class="lc-ranger-box">
<div class="lc-ranger-box-top">
<span class="lc-ranger-text lc-text">Choose your loan amount</span>
<span id="lc-amount" class="lc-amount">6000</span>
</div>
<div class="lc-ranger-box-sliding">
<div class="lc-ranger-container slider-value">
<input id="lc-range-amount" type="range" class="slider lc-range-slider-amount" min="500" max="6000" step="100" value="1000">
<span id="lc-range-value-bar-amount"></span>
<span id="lc-range-value-amount" data-value="loan" class="value" style="display:none!important;">0</span>
</div>
</div>
<div class="lc-ranger-box-bottom">
<span class="lc-ranger-text lc-text">500€</span>
<span class="lc-ranger-text lc-text">6000€</span>
</div>
</div>
<div class="lc-ranger-box">
<div class="lc-ranger-box-top">
<span class="lc-ranger-text lc-text">Choose a maturity period</span>
<span id="lc-month" class="lc-month">60</span>
</div>
<div class="lc-ranger-box-sliding">
<div class="lc-ranger-container slider-value">
<input id="lc-range-month" type="range" class="slider lc-range-slider-month" min="6" max="60" step="1" value="24">
<span id="lc-range-value-bar-month"></span>
<span id="lc-range-value-month" data-value="months" class="value" style="display:none!important;">0</span>
</div>
</div>
<div class="lc-ranger-box-bottom">
<span class="lc-ranger-text lc-text">6 months</span>
<span class="lc-ranger-text lc-text">60 months</span>
</div>
</div>
</div>
<div class="lc-pyment-content">
<div class="lc-payment-head lc-text">
<h3>Your monthly payment</h3>
</div>
<div class="lc-payment-show">
<span id="lc-payment-show" class="lc-payment value " data-value="fee">
0,00
</span>
</div>
<div class="lc-payment-btn">
<button type="submit" class="btn btn-default" id="accept-loan">
I want a loan
</button>
</div>
</div>
</div>
</div>
</form>
</div>
</section>
My attempt
added in body onload="setData()"
added in loan calculator form in button onclick="submitForm()"
and added in JS
$(document).ready(function() {
$("#accept-loan").click(function(e) {
var loan = $("#lc-range-amount").val();
var month = $("#lc-range-month").val();
var pay = $("[data-value='fee']").html().replace(' ', '');
var url = $("#loanFormSubmit")[0].setAttribute('action', '/request'+"?loan="+loan+"&months="+month+"&pay="+pay);
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$.ajax({
url: url,
method: 'post',
type: 'post',
data: {
_token: '{{csrf_token()}}',
loan: $("#loan").html(),
month: $("#month").html(),
pay: $("#pay").text(),
},
contentType: false,
processData: false,
success: function( data ) {
console.log(data);
}
});
});
});
function submitForm(){
if(typeof(localStorage) != "undefined"){
localStorage.loan = $('[data-value="loan"]').html();
localStorage.months = $('[data-value="months"]').html();
localStorage.payment = $('[data-value="fee"]').html();
}
document.getElementById("loanFormSubmit").submit();
}
function setData(){
if(typeof(localStorage) != "undefined"){
document.getElementById("loan").innerHTML = localStorage.loan;
document.getElementById("month").innerHTML = localStorage.months;
document.getElementById("pay").innerHTML = localStorage.payment;
}
}
Everything seems to be working as I should not know whether it is right to send information like this or whether it can be done even better
Hi you can receive all the data submitted in the form by using request method.
request('title') //Title is the name of the field
I suggest you follow this link to solve your problem. It shows all steps one by one.
https://vegibit.com/how-to-set-up-form-submission-in-laravel/
i'm building a website portfolio with an interactive display at the top with some click events and hover. However i changed the 'body' class so i could fit it in with my website and then the javascript stopped working and i can't for the life of me figure it out?!
(sorry if i didnt show enough snippets..) I'm using scss but i used a transpiler to convert it into css when i switched it over to VSC..
the normal javscript like time and date work fine - it just seems to be the elements connected on the page / in the now 'display' div which i cant connect to anymore..
It works fine when the classes are with body - code:
html, body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
body {
background: #CCBBFF;
z-index: -10;
display: flex;
justify-content: center;
align-items: center;
}
.mainDisp {
width: 1000px;
height: 550px;
border: 1px solid black;
// overflow: hidden;
}
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
* {
position: absolute;
}
*:before,
*:after {
content: "";
position: absolute;
}
.lamp {
width: 120px;
height: 80px;
background: #494949;
-webkit-clip-path: polygon(50% 0%, 0 48%, 100% 48%);
clip-path: polygon(50% 0%, 0 48%, 100% 48%);
left: 45%;
top: 10%;
z-index: 4;
}
</head>
<body>
<div class="mainDisp">
<div class="lamp"></div>
<div class="innerLight hidden"></div>
<div class="string"></div>
....
but when i add a new class 'Display' and add the old body's classes the javascript just doesnt work anymore? Same Javascript for both..
code :
function openURL(url) {
window.open(url);
}
var book1 = document.querySelector('.book');
var super1 = document.querySelector('.super1');
var book2 = document.querySelector('.book.two');
var super2 = document.querySelector('.super2');
var book3 = document.querySelector('.book.three');
var super3 = document.querySelector('.super3');
var calculator = document.querySelector('.calculator');
var calc = document.querySelector('.calc');
var phone = document.querySelector('.phone');
var tipCalc = document.querySelector('.tipCalc');
var lightSwitch = document.querySelector('.switch');
var lamp = document.querySelector('.innerLight');
lightSwitch.addEventListener('click', function() {
lamp.classList.toggle('hidden');
})
book1.addEventListener('mouseover', function() {
super1.classList.remove('hidden')
});
book1.addEventListener('mouseout', function() {
super1.classList.add('hidden')
});
book2.addEventListener('mouseover', function() {
super2.classList.remove('hidden')
});
book2.addEventListener('mouseout', function() {
super2.classList.add('hidden')
});
book3.addEventListener('mouseover', function() {
super3.classList.remove('hidden')
});
book3.addEventListener('mouseout', function() {
super3.classList.add('hidden')
});
calculator.addEventListener('mouseover', function() {
calc.classList.remove('hidden')
});
calculator.addEventListener('mouseout', function() {
calc.classList.add('hidden')
});
phone.addEventListener('mouseover', function() {
tipCalc.classList.remove('hidden')
});
phone.addEventListener('mouseout', function() {
tipCalc.classList.add('hidden')
});
// CALENDAR DATE
const dayDisp = document.querySelector('#day');
const monthDisp = document.querySelector('#month');
var months = ['Jan','Feb','Mar','Apr','May','June','July','Aug','Sept','Oct','Nov','Dec'];
var now = new Date();
var date = now.getDate();
var month = months[now.getMonth()];
dayDisp.innerText = date;
monthDisp.innerText = month;
// MAIN CLOCK //
var hourHand = document.querySelector('.hour');
var minHand = document.querySelector('.min');
var secHand = document.querySelector('.sec');
function setDate() {
const now = new Date;
const secs = now.getSeconds();
const secondDegrees = ((secs / 60) * 360) + 90;
secHand.style.transform = `rotate(${secondDegrees}deg)`;
const mins = now.getMinutes();
const minsDegrees = ((mins / 60) * 360) + 90;
minHand.style.transform = `rotate(${minsDegrees}deg)`;
const hours = now.getHours();
const hourDegrees = ((hours / 12) * 360) + 90;
hourHand.style.transform = `rotate(${hourDegrees}deg)`;
}
setInterval(setDate, 1000);
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
body {
background: #fdf5e6;
}
html {
box-sizing: border-box;
}
-----------
.display {
width: 100%;
height: 100vh;
margin: 0;
padding: 0;
background: #CCBBFF;
position: relative;
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
z-index: -10;
* {
position: absolute;
box-sizing: inherit;
}
*:before, *:after {
position: absolute;
content: '';
box-sizing: inherit;
}
.mainDisp {
position: absolute;
width: 1000px;
height: 550px;
// border: 1px solid black;
z-index: -10;
box-sizing: inherit;
.lamp {
position: absolute;
width: 120px;
height: 80px;
background: #494949;
-webkit-clip-path: polygon(50% 0%, 0 48%, 100% 48%);
clip-path: polygon(50% 0%, 0 48%, 100% 48%);
left: 45%;
top: 10%;
z-index: 4;
}
.innerLight {
position: absolute;
z-index: 1;
width: 100%;
height: 900px;
-webkit-clip-path: polygon(50% 0%, 0 48%, 100% 48%);
clip-path: polygon(50% 0%, 0 48%, 100% 48%);
background: rgba(253,245,230, 0.4);
left: 1%;
top: 55px;
}
</head>
<body>
<div class="container">
<header>
<div class="intro">
<h1 class="name">NAME</h1>
</div>
<nav>
<li>About</li>
<li>Projects</li>
<li>Skills</li>
<li>Contact</li>
</nav>
</header>
<div class='display'>
<div class="mainDisp">
<div class="lamp"></div>
<div class="innerLight hidden"></div>
<div class="string"></div>
<div class="super1 hidden"></div>
<div class="super2 hidden"></div>
<div class="super3 hidden"></div>
<!-- <div class="window" onclick="openURL('https://codepen.io/Eejay/full/VQBvOm/')" target="_blank"> -->
<div class='windows'>
<div class="outside">
<div class="moon"></div>
</div>
<div class="inner"></div>
<div class="inner two"></div>
</div>
<div class="ledge"></div>
<div class="mainClock">
<div class="hour"></div>
<div class="min"></div>
<div class="sec"></div>
</div>
Any help appreciated! I know its probably something really simple but i can't put my finger on it....
Your Problem is that you set your z-index of .display to -10. Its not clickable anymore.
Setting it to 0 will fix your issue:
.display {
width: 100%;
height: 100vh;
margin: 0;
padding: 0;
background: #CCBBFF;
position: relative;
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
z-index: 0;
}
take a look at this forked codepen.