So basically i need so that the data writen in the “book now” FORM to appear in the agenda on the left side of the main form in the correct table row that matches the time put in “Book now” form
just ignore the clock and all things all I want is that the data transfers correctly into the angenda
Sorry for bad and unorganised coding , I’m a beginner
```
body{
display: flex;
}
.cont {
background-color: white;
width: 390px;
height: 600px;
border: 7px solid #50BE87;
overflow-y: scroll;
}
.cont::-webkit-scrollbar {
display: none;
}
.cont {
-ms-overflow-style: none;
scrollbar-width: none;
}
table {
align-items: center;
font-size: 25px;
font-family: Arial, Helvetica, sans-serif;
}
th, td {
border-bottom: 1px solid #ddd;
}
#ore{
width: 50px;
}
#introdu1{
width: 300px;
}
th {
height: 100px;
}
#ceas{
font-family: Arial, Helvetica, sans-serif;
color: #000;
font-size: 20px;
align-items: left;
}
.cerc{
width:600px;
height: 600px;
border: 7px solid #50BE87;
}
#booknow{
display: inline;
margin-top: 10px;
margin-left: 10px;
background-color:#50BE87 ;
width: 180px;
height: 60px;
border: none;
color: white;
padding: 10px;
font-family: Arial ;
font-size: 25px;
}
.center {
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
.popup-overlay {
position:fixed;
top:0px;
left:0px;
width:100%;
height:100vh;
z-index:1;
background:#4BB4E6;
display:none;
}
.popup {
position:absolute;
top:-150%;
left:50%;
transform:translate(-50%,-50%) scale(1.15);
width:570px;
height:380px;
background:white;
z-index:2;
opacity:0;
box-shadow:5px 5px 3px rgba(0,0,0,0.2);
transition:transform 300ms ease-in-out,opacity 300ms ease-in-out;
}
body.showLoginForm .popup {
top:50%;
opacity:1;
transform:translate(-50%,-50%) scale(1);
}
body.showLoginForm .popup-overlay {
display:block;
}
body.showLoginForm .popup {
top:50%;
opacity:1;
transform:translate(-50%,-50%) scale(1);
}
.popup .form .header {
font-size:20px;
color:#222;
margin:5px 0px;
}
.popup .form .element {
padding:8px 10px;
}
.popup .form .element label {
margin-left: 20px;
width: 95%;
font-size:20px;
color:#222;
margin-bottom:5px;
}
.element input {
display:block;
width:90%;
padding:9px 9px;
border-radius:5px;
background:#999999;
border-top-style: hidden;
border-right-style: hidden;
border-left-style: hidden;
border-bottom-style: hidden;
}
.popup .form .element button {
margin-left: 25%;
margin-top:15px;
width:50%;
padding:10px 0px;
text-transform:uppercase;
border:none;
font-size:15px;
border-radius:3px;
cursor:pointer;
background:#333333;
color:white;
}
.element {
display: flex;
}
#email {
margin-left: 20px;
width: 90%;
}
#meet{
width: 90%;
margin-left: 20px;
}
#num{
display:block;
}
#nuum{
display: block;
}
#start {
border-radius: 5px;
text-align: center;
font-size: 20;
color: white;
width: 210px;
height: 110px;
background-color: #333333;
}
#start label {
border-radius: 5px;
padding: 8px 8px;
}
#appt{
border-top-style: hidden;
border-right-style: hidden;
border-left-style: hidden;
border-bottom-style: hidden;
height: 30px;
font-size: 25px;
border-radius: 5px;
padding: 8px;
margin-top: 25px;
background:#999999 ;
color: white;
}
#appt1{
border-top-style: hidden;
border-right-style: hidden;
border-left-style: hidden;
border-bottom-style: hidden;
height: 30px;
font-size: 25px;
border-radius: 5px;
padding: 8px;
margin-top: 25px;
background:#999999 ;
color: white;
}
#start label{
color: white;
margin-top: 10px;
font-size: 20px;
padding: 5px;
}
.time{
display: flex;
margin-left: 40px;
margin-right: 40px;
margin-top: 40px;
justify-content: space-between;
}#email{
width: 80%;
font-size:20px;
padding: 5px;
outline: none;
border-left:none;
}
#meet{
width: 80%;
font-size:20px;
padding: 5px;
outline: none;
border-left:none;
}
#report{
display: block;
margin-top: 350px;
margin-left: 430px;
background-color:black;
width: 160px;
height: 50px;
border: none;
color: white;
padding: 10px;
font-family: Arial ;
font-size: 20px;
}
#bu15{
margin-top: 10px;
margin-left: 385px;
background-color:#4BB4E6;
width: 100px;
height: 50px;
border: none;
color: white;
padding: 10px;
font-family: Arial ;
font-size: 20px;
}
#bu30{
display:blok;
background-color:#4BB4E6;
width: 100px;
height: 50px;
border: none;
color: white;
padding: 10px;
font-family: Arial ;
font-size: 20px;
}
#bu45{
margin-top: 10px;
margin-left: 385px;
display: inline;
background-color:#4BB4E6;
width: 100px;
height: 50px;
border: none;
color: white;
padding: 10px;
font-family: Arial ;
font-size: 20px;
}
#bu60{
display: inline;
background-color:#4BB4E6;
width: 100px;
height: 50px;
border: none;
color: white;
padding: 10px;
font-family: Arial ;
font-size: 20px;
}
#bug{
font-size:28px;
}
#chen{
margin-left: 180px;
display:inline-flex;
font-family: Arial;
font-size: 25px;
}
body {
font-family:"Arial";
}
.center1 {
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
.popup-overlay1 {
position:fixed;
top:0px;
left:0px;
width:100%;
height:100vh;
z-index:1;
background:#4BB4E6;
display:none;
}
.popup1 {
align-content: center;
position:absolute;
top:-150%;
left:50%;
transform:translate(-50%,-50%) scale(1.15);
width:570px;
height:380px;
background:white;
z-index:2;
opacity:0;
transition:transform 300ms ease-in-out,opacity 300ms ease-in-out;
}
body.showLoginForm1 .popup-overlay1 {
display:block;
}
body.showLoginForm1 .popup1 {
top:50%;
opacity:1;
transform:translate(-50%,-50%) scale(1);
}
.popup1 .form1 .header1 {
text-align:center;
font-size:25px;
font-weight:600;
color:#222;
margin:20px 0px;
}
.popup1 .form1 .element1 {
padding:8px 20px;
}
.popup1 .form1 .element1 label {
text-align:center;
align-items: center;
display:block;
font-size:18px;
color:#222;
margin-bottom:3px;
}
.popup1 .form1 .element1 input {
margin-left: 100px;
align-content: center;
width:60%;
padding:8px 10px;
box-sizing:border-box;
outline:none;
border: none;
background:#999999;
border-radius:3px;
}
.popup1 .form1 .element1 button {
margin-top:5px;
width:150px;
padding:10px 0px;
text-transform:uppercase;
outline:none;
border:none;
font-size:20px;
font-weight:600;
margin-left: 180px;
cursor:pointer;
background:#999999;
color:#f5f5f5;
}
.dot2 {
position: absolute;
top: 129px;
left: 678px;
height: 305px;
width: 305px;
background-color: black;
border-radius: 50%;
display: inline-block;
}
#dot {
position: absolute;
top: 142px;
left: 692px;
height: 270px;
width: 270px;
background-color: #32C832;
border-radius: 50%;
display: inline-block;
border: 3px solid black;
}
.base-timer {
position:absolute;
width: 300px;
left: 680px;
top: 130px;
height: 300px;
}
.base-timer__svg {
transform: scaleX(-1);
}
.base-timer__circle {
fill: none;
stroke: none;
}
.base-timer__path-elapsed {
stroke-width: 7px;
stroke: white;
}
.base-timer__path-remaining {
stroke-width: 7px;
stroke-linecap: round;
transform: rotate(90deg);
transform-origin: center;
transition: 1s linear all;
fill-rule: nonzero;
stroke: currentColor;
}
.base-timer__path-remaining.green {
color: rgb(65, 184, 131);
}
.base-timer__path-remaining.orange {
color: orange;
}
.base-timer__path-remaining.red {
color: red;
}
.base-timer__label {
position: absolute;
width: 300px;
height: 300px;
top: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 48px;
}<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="table.css">
<title>Document</title>
</head>
<body>
<div id="ceas"></div>
<div class="cont" id="container">
</div>
<div class="cerc">
<button id="booknow" onclick="openLoginForm()">Book Now</button>
<h2 id="chen">{k<span style="color: #FF7900;">IT</span>chen} Pepper</h2>
<div class="but5"></div>
<span class="dot2"></span>
<div id="app"></div>
<span id="dot"></span>
<button id="report" onclick="openLoginForm1()"><i id="bug" class="fas fa-bug">Report</i></button>
<button id="bu15" onclick="timer15()">15 min</button>
<button id="bu30" onclick="timer30()">30 min</button>
<button id="bu45" onclick="timer45()">45 min</button>
<button id="bu60" onclick="timer60()">60 min</button>
</div>
<div class="popup-overlay"></div>
<div class="popup">
<div class="form">
<div class="element">
<div>
<label for="meet">Meeting subject.</label>
<input type="text" id="meet">
</div>
<div class="container">
<i class="fa fa-envelope icon"> </i>
<label for="email">Email</label>
<input type="email" id="email">
</div>
</div>
<div class="element" >
<i class="fas fa-user-plus"></i>
<label id="nuum" for="num" >Number of member</label>
<input type="number" id="num" min="1" max="5">
</div>
<div class="time">
<div id="start">
<label for="appt">Start time:</label><br>
<input type="time" id="appt" name="appt" value="08:00">
</div>
<div id="start">
<label for="appt">Ended time:</label>
<input type="time" id="appt1" name="appt" value="20:00">
</div>
</div>
<div class="element">
<button onclick="closeLoginForm()">Book</button>
</div>
</div>
</div>
<div class="popup-overlay1"></div>
<div class="popup1">
<div class="form1">
<div class="header1">
Report an issue<i class="fas fa-user-plus"></i>
</div>
<div class="element1">
<label for= "email">Your email</label>
<input type="email" id="email2">
</div>
<div class="element1">
<label for="text">Description</label>
<input type="text" id="description">
</div>
<div class="element1">
<label for="text">Issue type</label>
<input type="text" id="issue">
</div>
<div class="element1">
<button onclick="closeLoginForm1()">Send</button>
</div>
</div>
</div>
<script>
var date, array = [];
date = new Date();
date.setHours(80, 00, 00);
while (date.getMinutes() % 15 !== 0) {
date.setMinutes ( date.getMinutes() + 1 );
}
for (var i = 3; i < 13 * 4; i++) {
const content ="<div>"
array.push(date.getHours() + ':' + date.getMinutes());
date.setMinutes ( date.getMinutes() + 15);"</div>"
}
var myTable = "<table><tr>";
var perrow = 1;
var id = 1;
array.forEach((value, i) => {
myTable += `<td id="ore">${value}</td>`;
myTable += `<td id="introdu${id++}" > </td>`;
var next = i + 1;
if (next % perrow == 0 && next != array.length) {
myTable += `</tr"><tr>`;
}
});
myTable += "</tr ></table>";
document.getElementById("container").innerHTML = myTable;
let clock= ()=>{
let date= new Date();
let hrs = date.getHours();
let mins = date.getMinutes();
let secs = date.getSeconds();
let period = "AM";
if (hrs ==0){
hrs = 12;
}
else if(hrs >= 24){
hrs = hrs - 12;
perod = "PM";
}
hrs = hrs < 10 ? "0" + hrs : hrs;
mins = mins < 10 ? "0" + mins : mins;
secs = secs <10 ? "0" + secs : secs;
let time = `${hrs}:${mins}:${secs}:${period}`;
document.getElementById("ceas").innerHTML = time;
setTimeout(clock, 1000);
};
clock();
function openLoginForm(){
document.body.classList.add("showLoginForm");
}
function closeLoginForm(){
document.body.classList.remove("showLoginForm");
//so this is the transfer data i have
document.getElementById("introdu1").innerHTML=
document.getElementById('meet').value+"Subiectul conferintei "+
document.getElementById('email').value+"email "+
document.getElementById('num').value+" membri "+
document.getElementById('appt').value+" - "+
document.getElementById('appt1').value+" ora";
}
function openLoginForm1(){
document.body.classList.add("showLoginForm1");
}
function closeLoginForm1(){
document.body.classList.remove("showLoginForm1");
}
const FULL_DASH_ARRAY = 283;
const WARNING_THRESHOLD = 10;
const ALERT_THRESHOLD = 5;
const COLOR_CODES = {
info: {
color: "green"
},
warning: {
color: "orange",
threshold: WARNING_THRESHOLD
},
alert: {
color: "red",
threshold: ALERT_THRESHOLD
}
};
var TIME_LIMIT = 0;
let timePassed = 0;
let timeLeft = TIME_LIMIT;
let timerInterval15 = null;
let timerInterval30 = null;
let timerInterval45 = null;
let timerInterval60 = null;
let remainingPathColor = COLOR_CODES.info.color;
document.getElementById("app").innerHTML = `
<div class="base-timer">
<circle class="floor-timer" cx="50" cy="50" r="45"></circle>
<svg class="base-timer__svg" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<g class="base-timer__circle">
<circle class="base-timer__path-elapsed" cx="50" cy="50" r="45"></circle>
<path
id="base-timer-path-remaining"
stroke-dasharray="283"
class="base-timer__path-remaining ${remainingPathColor}"
d="
M 50, 50
m -45, 0
a 45,45 0 1,0 90,0
a 45,45 0 1,0 -90,0
"
></path>
</g>
</svg>
<span id="base-timer-label" class="base-timer__label">${formatTime(
timeLeft
)}</span>
</div>
`;
function clearIntervals(){
clearInterval(timerInterval15);
clearInterval(timerInterval30);
clearInterval(timerInterval45);
clearInterval(timerInterval60);
}
function onTimesUp() {
clearIntervals();
}
function formatTime(time) {
const minutes = Math.floor(time / 60);
let seconds = time % 60;
if (seconds < 10) {
seconds = `0${seconds}`;
}
return `${minutes}:${seconds}`;
}
function setRemainingPathColor(timeLeft) {
const { alert, warning, info } = COLOR_CODES;
if (timeLeft <= alert.threshold) {
document
.getElementById("base-timer-path-remaining")
.classList.remove(warning.color);
document
.getElementById("base-timer-path-remaining")
.classList.add(alert.color);
} else if (timeLeft <= warning.threshold) {
document
.getElementById("base-timer-path-remaining")
.classList.remove(info.color);
document
.getElementById("base-timer-path-remaining")
.classList.add(warning.color);
}
}
function calculateTimeFraction() {
const rawTimeFraction = timeLeft / TIME_LIMIT;
return rawTimeFraction - (1 / TIME_LIMIT) * (1 - rawTimeFraction);
}
function setCircleDasharray() {
const circleDasharray = `${(
calculateTimeFraction() * FULL_DASH_ARRAY
).toFixed(0)} 283`;
document
.getElementById("base-timer-path-remaining")
.setAttribute("stroke-dasharray", circleDasharray);
}
function timer15(){
TIME_LIMIT = 901;
timePassed = 0;
timeLeft = TIME_LIMIT;
clearIntervals();
remainingPathColor = COLOR_CODES.info.color;
timerInterval15 = setInterval(() => {
var x = document.getElementById("dot")
red = 'rgb(200,0,0)';
x.style.backgroundColor = red
timePassed = timePassed += 0;
timePassed = timePassed += 1;
timeLeft = TIME_LIMIT - timePassed;
document.getElementById("base-timer-label").innerHTML = formatTime(
timeLeft
);
setCircleDasharray();
setRemainingPathColor(timeLeft);
if (timeLeft === 0) {
onTimesUp();
}
}, 1000);
}
function timer30(){
TIME_LIMIT = 1801;
timePassed = 0;
timeLeft = TIME_LIMIT;
clearIntervals();
remainingPathColor = COLOR_CODES.info.color;
timerInterval30 = setInterval(() => {
var x = document.getElementById("dot")
red = 'rgb(200,0,0)';
x.style.backgroundColor = red
timePassed = timePassed += 0;
timePassed = timePassed += 1;
timeLeft = TIME_LIMIT - timePassed;
document.getElementById("base-timer-label").innerHTML = formatTime(
timeLeft
);
setCircleDasharray();
setRemainingPathColor(timeLeft);
if (timeLeft === 0) {
onTimesUp();
}
}, 1000);
}
function timer45(){
TIME_LIMIT = 2701;
timePassed = 0;
timeLeft = TIME_LIMIT;
clearIntervals();
remainingPathColor = COLOR_CODES.info.color;
timerInterval45 = setInterval(() => {
var x = document.getElementById("dot")
red = 'rgb(200,0,0)';
x.style.backgroundColor = red
timePassed = timePassed += 1;
timeLeft = TIME_LIMIT - timePassed;
document.getElementById("base-timer-label").innerHTML = formatTime(
timeLeft
);
setCircleDasharray();
setRemainingPathColor(timeLeft);
if (timeLeft === 0) {
onTimesUp();
}
}, 1000);
}
function timer60(){
TIME_LIMIT = 3601;
timePassed = 0;
timeLeft = TIME_LIMIT;
clearIntervals();
remainingPathColor = COLOR_CODES.info.color;
timerInterval60 = setInterval(() => {
var x = document.getElementById("dot")
red = 'rgb(200,0,0)';
x.style.backgroundColor = red
timePassed = timePassed += 1;
timeLeft = TIME_LIMIT - timePassed;
document.getElementById("base-timer-label").innerHTML = formatTime(
timeLeft
);
setCircleDasharray();
setRemainingPathColor(timeLeft);
if (timeLeft === 0) {
onTimesUp();
}
}, 1000);
}
</script>
</body>
</html>