Develop Reference

Get date from date calculation in JavaScript

I'm trying to build a calculator that calculates various dates based on a user's input. The user selects the date of when a document was issued and then 2 things need to happen:
The expiry date is calculated by adding X number of days to the date issued and displayed to the user
The recommended application date is calculated based on the expiry date minus X number of days
The first one I got working (not in a very elegant way but it works for this part)
The second part (recommended application date), I can't get to work. I've done a lot of research and can't find a solution. (I'm a beginner)
I'm thinking maybe "onchange" is perhaps not the right event but I can't find information on another event that applies to this situation. Or is it an issue with how the functions are structured? Or something else completely? I have also tried moment.js and a few other libraries but what I have in the codepen below is what have gotten me the furthest thus far.
The codepen with everything is here: https://codepen.io/locheia1985/pen/XWBMGXZ
And here is the code:
function setSecondDate() {
var days = document.getElementById('select').value;
var date = new Date(document.getElementById('date1').value);
date.setDate(date.getDate() + parseInt(days));
document.getElementById('date2').valueAsDate = date;
}
function setThirdDate() {
var days3 = document.getElementById('select2').value;
var date2 = new Date(document.getElementById('date2').value);
date2.setDate(date2.getDate() - parseInt(days3));
document.getElementById('date3').valueAsDate = date3;
console.log(date2);
}
body
{
font-family:sans-serif;
background: #dde1e7;
min-height: 100vh;
}
.center,.content
{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
.click-me
{
display:block;
width:160px;
height:50px;
background: #dde1e7;
box-shadow: -3px -3px 7px #fffdfdcc,3px 3px 5px rgba(94, 104, 121, 0.342);
text-align:center;
font-size:22px;
line-height:50px;
cursor:pointer;
}
#click
{
display:none;
}
.click-me:hover
{
color: #0a5878;
}
.content
{
visibility:hidden;
width: 330px;
height: auto;
background: #dde1e7;
padding: 30px 35px 40px;
box-sizing: border-box;
border-radius: 5px;
}
#temp
{
position:absolute;
right:10px;
top:20px;
font-size:25px;
background: #dde1e7;
padding: 3px;
padding-left: 11px;
padding-right: 11px;
border-radius: 50%;
cursor:pointer;
}
#click:checked~.content
{
opacity:1;
visibility:visible;
}
.text
{
font-size: 30px;
color: #000000;
font-weight: 600;
text-align: center;
letter-spacing: 2px;
}
form
{
margin-top: 40px;
}
label
{
display: block;
margin-top: 30px;
font-size: 16px;
font-weight: 500;
}
input
{
display: block;
height: 43px;
width: 100%;
background-color: rgba(255,255,255,0.07);
border-radius: 3px;
border: none;
margin-top: 8px;
font-size: 14px;
font-weight: 300;
}
::placeholder
{
color: #4b4e4d;
padding-left: 10px;
}
button
{
width: 100%;
margin-top: 35px;
padding: 12px;
background: #dde1e7;
border: none;
font-size: 17px;
font-weight: 600;
margin-bottom: 32px;
}
<div class="center">
<input type="checkbox" id="click">
<label for="click" class="click-me">Passport</label>
<div class="content">
<label for="click" id="temp">x</label>
<form>
<select style="display: none" id="select">
<option value="150">150 days</option>
</select>
<select style="display: none" id="select2">
<option value="50">150 days</option>
</select>
<label for="date1">Date Issued:</label>
<input type="date" onchange="setSecondDate();" id="date1">
<label for="date2">Expiry Date:</label>
<input type="date" onchange="setThirdDate();" id="date2">
<label for="date3">Recommended Application Date:</label>
<input type="date" id="date3">
</form>
</div>
</div>
Any help would be appreciated

I think additional to the typo the onChange event only fires when a user interacts with the component - not when you programmatically set it. To get that setThirdDate there are some options but the clearest way is to just do the work you would have wanted done on the second event at the same time.
A refactor of this that fixes the typo and sets both dates is:
to change:
<input type="date" onchange="setSecondDate();" id="date1">
to
<input type="date" onchange="handleDateIssuedChanged();" id="date1">
and add (this also renames the setters to be clearer):
function handleDateIssuedChanged() {
setExpiryDate();
setRecommendedDate();
}
Full modified code:
<html>
<head>
<style>
body
{
font-family:sans-serif;
background: #dde1e7;
min-height: 100vh;
}
.center,.content
{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
.click-me
{
display:block;
width:160px;
height:50px;
background: #dde1e7;
box-shadow: -3px -3px 7px #fffdfdcc,3px 3px 5px rgba(94, 104, 121, 0.342);
text-align:center;
font-size:22px;
line-height:50px;
cursor:pointer;
}
#click
{
display:none;
}
.click-me:hover
{
color: #0a5878;
}
.content
{
visibility:hidden;
width: 330px;
height: auto;
background: #dde1e7;
padding: 30px 35px 40px;
box-sizing: border-box;
border-radius: 5px;
}
#temp
{
position:absolute;
right:10px;
top:20px;
font-size:25px;
background: #dde1e7;
padding: 3px;
padding-left: 11px;
padding-right: 11px;
border-radius: 50%;
cursor:pointer;
}
#click:checked~.content
{
opacity:1;
visibility:visible;
}
.text
{
font-size: 30px;
color: #000000;
font-weight: 600;
text-align: center;
letter-spacing: 2px;
}
form
{
margin-top: 40px;
}
label
{
display: block;
margin-top: 30px;
font-size: 16px;
font-weight: 500;
}
input
{
display: block;
height: 43px;
width: 100%;
background-color: rgba(255,255,255,0.07);
border-radius: 3px;
border: none;
margin-top: 8px;
font-size: 14px;
font-weight: 300;
}
::placeholder
{
color: #4b4e4d;
padding-left: 10px;
}
button
{
width: 100%;
margin-top: 35px;
padding: 12px;
background: #dde1e7;
border: none;
font-size: 17px;
font-weight: 600;
margin-bottom: 32px;
}
</style>
<script>
function setExpiryDate() {
var days = document.getElementById("select").value;
var date = new Date(document.getElementById("date1").value);
date.setDate(date.getDate() + parseInt(days));
document.getElementById("date2").valueAsDate = date;
}
function setRecommendedDate() {
var days3 = document.getElementById("select2").value;
var date2 = new Date(document.getElementById("date2").value);
date2.setDate(date2.getDate() - parseInt(days3));
document.getElementById("date3").valueAsDate = date2;
console.log(date2);
}
function handleDateIssuedChanged() {
setExpiryDate();
setRecommendedDate();
}
</script>
</head>
<body>
<div class="center">
<input type="checkbox" id="click">
<label for="click" class="click-me">Passport</label>
<div class="content">
<label for="click" id="temp">x</label>
<form>
<select style="display: none" id="select">
<option value="150">150 days</option>
</select>
<select style="display: none" id="select2">
<option value="50">150 days</option>
</select>
<label for="date1">Date Issued:</label>
Expiry Date:
Recommended Application Date:
(The other and likely not-what-you-want pattern is to trigger the second event https://stackoverflow.com/a/8789494/7632432 )

insert html and css into wordpress

how can i correctly implement html and css to wordpress site? inserting into html section caused this:
enter image description here
enter image description here
and i want it to look like this: check pic
enter image description here
i dont want other text to be in box shadow
* {
box-sizing: border-box;
}
div.cenovy_box {
width: 100%;
outline: 1px solid #f2f1f1 !important;
box-shadow: 0px 5px 10px #d3d3d3;
float: left;
}
div.fotkavboxe {
display: flex;
float: left;
width: 30%;
margin-left: 50px;
}
h1.nadpis_p {
border-bottom: 2px solid #20d796;
font-family: "poppins";
text-align: center;
padding-bottom: 10px;
}
div.tlacidlo {
clear: both;
width: 30%;
display: flex;
}
.k_predajcovi {
font-family: "poppins";
background-color: #000000;
color: #ffffff;
font-size: 20px;
cursor: pointer;
padding: 10px 20px;
border: solid #000000 2px;
opacity: 1;
transition: 0.3s;
}
.k_predajcovi:hover {
color: #000000;
background-color: #fff;
opacity: 1;
}
p.cena_v_boxe {
width: 30%;
font-size: 25px;
font-family: "poppins";
float: left;
}
img.fotka {
background-color: #000000;
border: 2px #555;
opacity: 1;
transition: 0.3s;
}
img.fotka:hover {
color: #fff;
opacity: 0.5;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
</style>
</head>
<body>
<div class="cenovy_box">
<div class="obsah">
<h1 class="nadpis_p">Brutálna vychytávka</h1>
</div>
<div class="fotkavboxe">
<a href="https://www.banggood.com/Xiaomi-Redmi-Note-10-Pro-Global-Version-6GB-128GB-108MP-Quad-Camera-6_67-inch-120Hz-AMOLED-Display-33W-Fast-Charge-Snapdragon-732G-Octa-Core-4G-Smartphone-p-1828679.html?cur_warehouse=HK&ID=62464446304721&rmmds=search"
target="_blank"><img class="fotka" src="https://imgaz.staticbg.com/thumb/large/oaupload/banggood/images/FE/BE/525e460f-581a-46ee-b737-1fe3d9492492.jpg.webp" alt="redmi note 10" style="width: 200px; height:200px;"></a>
</div>
<div class="cena">
<p class="cena_v_boxe">20€</p>
</div>
<div class="tlacidlo">
<button class="k_predajcovi" onclick="window.location.href = 'https://www.google.sk';">
K predajcovi
</button>
</div>
</div>
</body>
</html>
can you please help mw with inserting this code into articles? i want to adding it into articles just html (css will be in custom css settings) i am unable to code my own plugin, so this how i am making this

How to Upload an HTML File to WordPress
1) Navigate to your Admin Dashboard.
2) Click 'Pages' in the left sidebar.
3) Choose an existing page or create a new one.
4) Click 'Add Block.'
5) Add a 'File' block.
6) Choose your HTML file.

Staggering chatbot queries and replies in GUI

I am working on a chatbot at the moment and trying to connect a GUI I have been working with to the project.
It is running smooth but my output is a little messed up; in particular, the chat boxes should alternate between the user and the BOT, but they are stacking on top and not formatting correctly.
I want to fix this issue, but keep the screen dividing in half down the middle so that the bot outputs are on the right and the users on the left. I just need to get them to alternate back and forth.
I've tried anchoring the newest box with a margin-top, tried setting a counter variable to update the placement of each new box, etc., but am having trouble spacing them relative to each other.
Below is the code without the backend work. So, this won't run perfect but it should get the setup I have across...
Here is the CSS code:
body {
font-family: Cambria;
color: rgb(122, 4, 4);
background-color: rgb(136, 175, 175);
}
h1 {
color: black;
margin-bottom: 0;
margin-top: 0;
text-align: center;
font-size: 40px;
}
h2 {
color: black;
font-size: 20px;
margin-top: 3px;
text-align: center;
}
#user_chatbox {
margin-left: 0;
margin-right: auto;
width: 50%;
margin-top: 30%;
}
#bot_chatbox {
margin-left: 50%;
margin-right: auto;
width: 50%;
margin-top: 10%;
/* height: 80%; */
/* background-color: pink; */
/* border-radius: 10px; */
}
#userInput {
margin-left: auto;
margin-right: auto;
width: 95%;
margin-top: 150px;
}
#textInput {
width: 92%;
border: 3px solid Black;
border-bottom: 3px solid #660096;
font-family: Cambria;
font-size: 16px;
}
#buttonInput {
padding: 10px;
font-family: Cambria;
font-size: 72;
}
.userText {
color: rgb(0, 0, 0);
font-family: Georgia;
font-size: 16px;
text-align: left;
line-height: 20px;
}
.userText span {
display:block;
width:auto;
background-color: rgb(87, 201, 152);
padding: 10px;
border-radius: 10px;
/* counter-increment: var(--chatbox_spacing); */
}
.botText {
color: Black;
font-family: Consolas, monaco, monospace;
font-size: 16px;
text-align: left;
/* line-height: calc(29 + var(--chatbox_spacing))px; */
line-height: 20px;
}
.botText span {
display:block;
width:auto;
background-color: rgb(73,196,199);
padding: 10px;
border-radius: 10px;
/* counter-increment: var(--chatbox_spacing); */
}
... and here are the .html with .js code (within index.html) that is updating the blocks to be printed out with new information (input from the user and a reply from the bot):
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="/static/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<h1>Analysis Chatbot</h1>
<!-- The main chat environment for interacting with the bot. -->
<div>
<!-- The text of the bot. -->
<div id="bot_chatbox">
<p class="botText"><span>Welcome! How can I help you analyze your dataset?</span></p>
</div>
<div id="user_chatbox"></div>
<!-- The input text of the user interacting with the bot. -->
<div id="userInput">
<input id="textInput" type="text" name="msg" placeholder="Message">
<input id="buttonInput" type="submit" value="Send">
</div>
<script>
function getBotResponse() {
var rawText = $("#textInput").val();
var userHtml = '<p class="userText"><span>' + rawText + '</span></p>';
$("#textInput").val("");
$("#user_chatbox").append(userHtml);
document.getElementById('userInput').scrollIntoView({block: 'start', behavior: 'smooth'});
$.get("/get", { msg: rawText }).done(function(data) {
var botHtml = '<p class="botText"><span>' + data + '</span></p>';
$("#bot_chatbox").append(botHtml);
document.getElementById('userInput').scrollIntoView({block: 'start', behavior: 'smooth'});
});
}
$("#textInput").keypress(function(e) {
if(e.which == 13) {
getBotResponse();
}
});
$("#buttonInput").click(function() {
getBotResponse();
})
</script>
</div>
</body>
</html>
Nothing breaks, but I have attached some images below of the current output. Again, it isn't as much that the replies are basic right now, but rather that I want the displayed text blobs to be alternating from the bot (right side) to the user (left side) while keeping the screen split in the middle.
I want that image to be: the top blue on the right (Welcome...) then the first green on the left (can you find me sales in...) then next blue on right and so on so forth...

I put together a basic example of what you're trying to do using a 100% width wrapper that holds the message inside. The wrapper has display:flex; so that the <div>s inside don't expand. Check it out:
$(document).ready(function() {
$('#sendUser').click(function(){
if($('#userText').val()!=""){
$('#chatbox').append('<div class="message user"><div>'+$('#userText').val()+'</div></div>');
$('#userText').val('');
}
});
$('#sendBot').click(function(){
if($('#userText').val()!=""){
$('#chatbox').append('<div class="message bot"><div>'+$('#userText').val()+'</div></div>');
$('#userText').val('');
}
});
});
#chatbox{
width: 300px;
height: 400px;
border: 1px solid black;
margin: auto;
margin-top: 20px;
overflow-y: scroll;
}
#inputs{
display: grid;
padding: 10px 0;
width: 300px;
margin: auto;
grid-template-columns: auto 40px 40px;
grid-gap: 4px;
}
.button{
text-align: center;
border: 1px solid #a0a0a0;
cursor: pointer;
}
.button:hover{
background-color: grey;
color: white;
}
.message{
display: flex;
}
.message.user{
text-align: left;
}
.message > div{
margin: 10px 10px 0;
padding: 6px 8px;
border-radius: 15px;
color: white;
}
.message.bot > div{
margin-left: auto;
background-color: teal;
}
.message.user > div{
background-color: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="chatbox">
<div class="message bot">
<div>
hello
</div>
</div>
<div class="message user">
<div>
hello!
</div>
</div>
</div>
<div id="inputs">
<input type="text" id="userText">
<div class="button" id="sendBot">Bot</div>
<div class="button" id="sendUser">User</div>
</div>
Here's the CodePen if you wanted to mess with it.

Customize audio player duplicate - JS and CSS

Hi I am trying to have 20 customize audio players though I could only make the first one work. As soon as I copy and paste the new audio in html it does not start playing. I am not sure if the only way is by giving a unique id to each audio or if there is a way to avoid doing that by changing the javascript code.
thanks!!!
it is also online here http://musictext.yt/audio/audio.html
HTML
<!DOCTYPE html>
<html lang="es">
<head>
<title>Reproductor de Video</title>
<link rel="stylesheet" href="reproductor.css">
<script src="reproductor.js"></script>
</head>
<body>
<section id="reproductor">
<audio id="medio" width="400" height="400">
<source src="rout.mp3">
</audio>
<nav>
<div id="botones">
<button class="button" id="reproducir" >play</button>
</div>
<div id="barra">
<div id="progreso">
</div>
</div>
<div style="clear: both"></div>
</nav>
</section>
</body>
</html>
JS
function iniciar() {
maximo=80;
medio=document.getElementById('medio');
reproducir=document.getElementById('reproducir');
barra=document.getElementById('barra');
progreso=document.getElementById('progreso');
reproducir.addEventListener('click', presionar, false);
barra.addEventListener('click', mover, false);
}
function presionar(){
if(!medio.paused && !medio.ended) {
medio.pause();
reproducir.innerHTML='play';
window.clearInterval(bucle);
}else{
medio.play();
reproducir.innerHTML='pause';
bucle=setInterval(estado, 1000);
}
}
function estado(){
if(!medio.ended){
var total=parseInt(medio.currentTime*maximo/medio.duration);
progreso.style.width=total+'px';
}else{
progreso.style.width='0px';
reproducir.innerHTML='play';
window.clearInterval(bucle);
}
}
function mover(e){
if(!medio.paused && !medio.ended){
var ratonX=e.pageX-barra.offsetLeft;
var nuevoTiempo=ratonX*medio.duration/maximo;
medio.currentTime=nuevoTiempo;
progreso.style.width=ratonX+'px';
}
}
window.addEventListener('load', iniciar, false);
CSS
body{
text-align: center;
}
header, section, footer, aside, nav, article, figure, figcaption, hgroup{
display : block;
}
#reproductor{
width: 100px;
height: 100px;
margin: 60px auto;
padding: 5px;
background: blue;
border: 1px solid #666666;
}
nav{
margin: 1px 0px;
}
.button {
font-family: arial;
background-color: black;
border: none;
color: white;
padding: ;
text-align: center;
font-size: 12px;
margin: 4px 2px;
opacity: 0.6;
transition: 0.3s;
display: inline-block;
text-decoration: none;
cursor: pointer;
}
.button:hover {opacity: 1}
#botones{
background-color: black;
width: 100px;
height: 20px;
}
#barra{
position: relative;
width: 88px;
height: 66px;
padding: 4px;
border: 1px solid black;
background: white;
}
#progreso{
position: absolute;
width: 0px;
height: 60px;
background: black;
}

Why .hasClass function isnt working?

So My code do when i click on name(class ='frnd'), then in result open one window and it is drag-able but when i again click on (class =frnd) then their open again new windows, for example if i click on Simon there popup new windows and after one click it is drag-able and than once more i click on name(class ='frnd' (Simon)) its popup one more window again. Problem: I dont want that if the window is already open, it wont open again same window Simon.
For avoid this problem i was trying this code in js
if(!($("#windows").hasClass('.5647383'+id))){
$html = '<div class="mwindow "><div class="hwindow 5647383'+id+'">'+usr+'<span class="cls">x</span></div><div class="msgbody '+id+'"><div id="mstd"class= umsg'+id+'></div><div id="tarea"><form method="post"><textarea class="ctarea" name="'+id+'"></textarea></form></div></div></div>';
$('#windows').append($html);
}
I don't know why isnt working thiscondition if($("#windows").hasClass('.5647383'+id)).
$(document).ready(function(){
$('.frnd').click(function(){
var id = $(this).attr("id");
var usr=$(this).text();
var exst = document.getElementsByClassName('.5647383'+id);
if($("#windows").hasClass('.5647383'+id)){
$html = '<div class="mwindow "><div class="hwindow 5647383'+id+'">'+usr+'<span class="cls">x</span></div><div class="msgbody '+id+'"><div id="mstd"class= umsg'+id+'></div><div id="tarea"><form method="post"><textarea class="ctarea" name="'+id+'"></textarea></form></div></div></div>';
$('#windows').append($html);
}
});
$('#windows').on('click','.cls', function(){
$(this).parent().parent().hide();
});
$(function(){
$('.frnd').click(function(){
var id = $(this).attr("id");
$('#windows').on('click','.'+id,function(){
$(this).parent().draggable({
handle: ".hwindow",
containment:"body"
});
});
});
});
});
body {
margin: 0;
background-color: #999;
height: 700px;
}
.frnd {
text-align: center;
width: 50px;
height: 20px;
display: inline-block;
background-color: #9B59B6;
margin: 5px;
border: 4px solid #3498DB;
color: #F1C40F;
cursor: pointer;
float: right;
}
.mwindow {
position: fixed;
width: 220px;
height: 220px;
border: 5px solid #16a085;
background-color: #fff;
display: block;
margin: 5px;
border-radius: 10px;
}
.mwindow:hover {
z-index: 9999;
}
.hwindow {
width: 210px;
height: 25px;
background-color: #FF4500;
padding: 5px;
display: block;
margin: 0px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.cls {
display: inline-block;
float: right;
cursor: pointer;
font-size: 20px;
font-weight: bold;
}
.msgbody {
position: relative;
height: 185px;
background-color: #FF4500;
//z-index:9999;
}
.ctarea {
position: absolute;
width: 210px;
resize: none;
outline: none;
top: 133px;
font-size: 15px;
padding: 5px;
min-height: 40px;
opacity: 0.9;
border: none;
border-top: 2px solid #ff0000;
}
#mstd {
position: absolute;
width: 220px;
height: 133px;
background-color: #bb4500;
opacity: 1;
overflow-x: hidden;
}
<script src="//code.jquery.com/jquery-2.1.4.js"></script>
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<li id="7" class="frnd">Maxi</li>
<li id="8" class="frnd">John</li>
<li id="9" class="frnd">Henry</li>
<li id="10" class="frnd">Max</li>
<li id="11" class="frnd">Simon</li>
<div id="windows"></div>

Elements by their ID attribute are selected using the hashmark symbol, so
'.' + id should be '#' + id.
The dot symbol (.) selects elements by their class name.
http://codepen.io/anon/pen/qdaXgX
EDIT
You had a number of other problems, look at the reviewed code:
http://codepen.io/anon/pen/bdwaWx

The problem is hasClass() doesn’t use a period prefix for classes — that’s selector syntax. So:
var hwindow_div = $('.5647383'+id) will find your .hwindow div,
hwindow_div.hasClass('5647383'+id) checks whether it has the class.
A simple example.
PS. while it’s a separate problem, #marekful is correct about the #id syntax.