How do I import outputs from html to js? - javascript

I have following code (html/css/javascript):
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Calculate the hypotenuse of a triangle</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<form class="form">
<h2 class="form__title">Calculate the hypotenuse of a triangle</h2>
<div class="form__group">
<input type="number" step="any" name="a"class="form__input" placeholder=" ">
<label for="a" class="form__label">Width</label>
</div>
<div class="form__group">
<input type="number" step="any" name="b"class="form__input" placeholder=" ">
<label for="a" class="form__label">Height</label>
</div>
<p><input type="button" onclick="out.value=(Math.sqrt(Math.pow(parseFloat(a.value),2)+Math.pow(parseFloat(b.value),2))).toFixed(2),
outInch.value=((Math.sqrt(Math.pow(parseFloat(a.value),2)+Math.pow(parseFloat(b.value),2)))/2.54).toFixed(2)" value="Calculate" class="form__button"></p>
<p>Hypotenuse length: <output name="out">0</output> sm (<output name="outInch">0</output> inch)</p>
</form>
<canvas id="canvas_plot" width="300" height="408"></canvas>
<script src="./canvas.js"></script>
</body>
</html>
#import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
* {
letter-spacing: 0.5px;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.form {
width: 400px;
padding: 32px;
border-radius: 10px;
box-shadow: 0 4px 16px #ccc;
font-family: 'Montserrat', sans-serif;
}
.form__input,
.form__button {
font-family: 'Montserrat', sans-serif;
font-size: 16px;
}
.form__title {
text-align: center;
margin: 0 0 32px 0;
font-weight: normal;
}
.form__group {
position: relative;
margin-bottom: 32px;
}
.form__label {
position: relative;
top: -30px;
z-index: -1;
color: #9e9e9e;
transition: 0.3s;
}
.form__input {
width: 100%;
padding: 0 0 10px 0;
border: none;
border-bottom: 1px solid #e0e0e0;
background-color: transparent;
outline: none;
transition: 0.3s;
}
.form__input:focus {
border-bottom: 1px solid #1a73a8;
}
.form__button {
padding: 10px 20px;
border: none;
border-radius: 5px;
color: #fff;
background-color: #0071f0;
outline: none;
cursor: pointer;
transition: 0.3s;
}
.form__button:hover {
background-color: rgba(0, 133, 240, 0.7);
}
.form__input:focus ~ .form__label,
.form__input:not(:placeholder-shown) ~ .form__label {
top: -48px;
font-size: 12px;
color: #e0e0e0;
}
#canvas_plot {
margin-left: 30px;
background-color: rgb(255, 255, 255);
border-radius: 10px;
box-shadow: 0 4px 16px #ccc;
}
const canvasPlot = document.getElementById('canvas_plot')
const ctx = canvasPlot.getContext('2d')
ctx.moveTo(275,383)
ctx.lineTo(25,25)
ctx.stroke()
ctx.moveTo(275,25)
ctx.lineTo(25,383)
ctx.stroke()
How do I import to javascript these outputs <output name="out"></output> <output name="outInch"></output> from html, or firstly import to css and from css to javascript?
I need to draw on canvas triangle by using values from outputs after clicking the button "Calculate". If its impossible without plugins, please say what plugins I need to use

Related

How to include an entire css icon to be part of the onclick process?

So my problem may sound banal but it is quite annoying. When I click on the css icons in the css accordion, I have to click on the letters URL so that a link is copied into the clipboard. So far the code works fine.
But I want the whole thing to work also when I click on the white border of the css icon (so above and below the URL letters).
What would I need to change to include the entire css icon to be part of the JS onclick process?
```
<!DOCTYPE html>
<html>
<head>
<title>My example Website</title>
<style>
body {
font-size: 21px;
font-family: Tahoma, Geneva, sans-serif;
max-width: 550px;
margin: 0 auto;
background-color: black;
}
input {
display: none;
}
label {
display: block;
padding: 8px 22px;
margin: 0 0 1px 0;
cursor: pointer;
background: #181818;
border: 1px solid white;
border-radius: 5px;
color: #FFF;
position: relative;
}
label:hover {
background: white;
border: 1px solid white;
color:black;
}
label::after {
content: '+';
font-size: 22px;
font-weight: bold;
position: absolute;
right: 10px;
top: 2px;
}
input:checked + label::after {
content: '-';
right: 14px;
top: 3px;
}
.content {
background: #DBEECD;
background: -webkit-linear-gradient(bottom right, #DBEECD, #EBD1CD);
background: -moz-linear-gradient(bottom right, #DBEECD, #EBD1CD);
background: linear-gradient(to top left, #DBEECD, #EBD1CD);
padding: 10px 25px 10px 25px;
border: 1px solid #A7A7A7;
margin: 0 0 1px 0;
border-radius: 1px;
}
input + label + .content {
display: none;
}
input:checked + label + .content {
display: block;
}
.whitepaper {
cursor: pointer;
text-align: center;
background-color: white;
border: 2px solid black;
border-radius: 3px;
float: left;
margin: 5px 5px 5px 0;
height: 40px;
width: 30px;
}
.blackframe {
text-align: center;
background-color: black;
cursor: pointer;
font-family: Tahoma, Geneva, sans-serif;
font-size:12px;
font-weight:bold;
margin: 12px 0 12px 0;
color: white;
width: 30px;
}
.whitepaper:hover {
cursor: pointer;
text-align: center;
background-color: black;
border: 2px solid white;
border-radius: 3px;
float: left;
margin: 5px 5px 5px 0;
height: 40px;
width: 30px;
}
/* Tooltip container */
.tooltip {
position: relative;
display: inline-block;
}
/* Tooltip text */
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: #555;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
/* Position the tooltip text */
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -60px;
/* Fade in tooltip */
opacity: 0;
transition: opacity 0.3s;
}
/* Tooltip arrow */
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
</style>
</head>
<body>
<input type="checkbox" id="title1" name="contentbox" />
<label for="title1">Content 1</label>
<div class="content">
<div class="tooltip">
<div class="whitepaper" onclick="myFunction(event)">
<div class="blackframe"><span class="tooltiptext">Copy link 1 to clipboard</span>URL</div>
</div>
<input type="text" value="https://mywebsite.com/#title1" id="myInput">
</div>
</div>
<input type="checkbox" id="title2" name="contentbox" />
<label for="title2">Content 2</label>
<div class="content">
<div class="tooltip">
<div class="whitepaper" onclick="myFunction(event)">
<div class="blackframe"><span class="tooltiptext">Copy link 2 to clipboard</span>URL</div>
</div>
<input type="text" value="https://mywebsite.com/#title2" id="myInput">
</div>
</div>
<input type="checkbox" id="title3" name="contentbox" />
<label for="title3">Content 3</label>
<div class="content">
<div class="tooltip">
<div class="whitepaper" onclick="myFunction(event)">
<div class="blackframe"><span class="tooltiptext">Copy link 3 to clipboard</span>URL</div>
</div>
<input type="text" value="https://mywebsite.com/#title3" id="myInput">
</div>
</div>
<script>
function myFunction(event) {
/* Get the text field */
var copyText = event.target.parentNode.nextSibling.nextSibling.value
/* Copy the text inside the text field */
navigator.clipboard.writeText(copyText);
/* Alert the copied text */
alert("Copied: " + copyText);
}
</script>
</body>
</html>
```

I have now solved the problem. Someone here on Stackoverflow helped me to combine the two DIV elements into one by using a linear gradient. Now the code works perfectly on both fields because it is now a single div. So in a nutshell, I had to improve the CSS code a bit and the problem was solved. Nevertheless, thanks to all who took the time to help me, but the solution came this time nevertheless differently than expected at first.
Here is the finished example of how it works:
```
<!DOCTYPE html>
<html>
<head>
<title>My example Website</title>
<style>
body {
font-size: 21px;
font-family: Tahoma, Geneva, sans-serif;
max-width: 550px;
margin: 0 auto;
background-color: black;
}
input {
display: none;
}
label {
display: block;
padding: 8px 22px;
margin: 0 0 1px 0;
cursor: pointer;
background: #181818;
border: 1px solid white;
border-radius: 5px;
color: #FFF;
position: relative;
}
label:hover {
background: white;
border: 1px solid white;
color:black;
}
label::after {
content: '+';
font-size: 22px;
font-weight: bold;
position: absolute;
right: 10px;
top: 2px;
}
input:checked + label::after {
content: '-';
right: 14px;
top: 3px;
}
.content {
background: #DBEECD;
background: -webkit-linear-gradient(bottom right, #DBEECD, #EBD1CD);
background: -moz-linear-gradient(bottom right, #DBEECD, #EBD1CD);
background: linear-gradient(to top left, #DBEECD, #EBD1CD);
padding: 10px 25px 10px 25px;
border: 1px solid #A7A7A7;
margin: 0 0 1px 0;
border-radius: 1px;
}
input + label + .content {
display: none;
}
input:checked + label + .content {
display: block;
}
.whitepaper {
align-items: center;
cursor: pointer;
text-align: center;
background: linear-gradient(to top, white 12px, black 12px, black 28px, white 28px);
border: 2px solid black;
border-radius: 3px;
color: white;
display: flex;
justify-content: center;
font-size:12px;
font-weight:bold;
float: left;
margin: 5px 5px 5px 0;
height: 40px;
width: 30px;
}
.whitepaper:hover {
cursor: pointer;
text-align: center;
background: linear-gradient(to top, black 12px, white 12px, white 28px, black 28px);
border: 2px solid white;
border-radius: 3px;
color: black;
float: left;
margin: 5px 5px 5px 0;
height: 40px;
width: 30px;
}
/* Tooltip container */
.tooltip {
position: relative;
display: inline-block;
}
/* Tooltip text */
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: #555;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
/* Position the tooltip text */
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -60px;
/* Fade in tooltip */
opacity: 0;
transition: opacity 0.3s;
}
/* Tooltip arrow */
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
</style>
</head>
<body>
<input type="checkbox" id="title1" name="contentbox" />
<label for="title1">Content 1</label>
<div class="content">
<div class="tooltip">
<div class="whitepaper" onclick="myFunction(event)">
<span class="tooltiptext">Copy link 1 to clipboard</span>URL</div>
</div>
<input type="text" value="https://mywebsite.com/#title1" id="myInput">
</div>
</div>
<input type="checkbox" id="title2" name="contentbox" />
<label for="title2">Content 2</label>
<div class="content">
<div class="tooltip">
<div class="whitepaper" onclick="myFunction(event)">
<span class="tooltiptext">Copy link 2 to clipboard</span>URL</div>
</div>
<input type="text" value="https://mywebsite.com/#title2" id="myInput">
</div>
</div>
<input type="checkbox" id="title3" name="contentbox" />
<label for="title3">Content 3</label>
<div class="content">
<div class="tooltip">
<div class="whitepaper" onclick="myFunction(event)">
<span class="tooltiptext">Copy link 3 to clipboard</span>URL</div>
</div>
<input type="text" value="https://mywebsite.com/#title3" id="myInput">
</div>
</div>
<script>
function myFunction(event) {
/* Get the text field */
var copyText = event.target.parentNode.nextSibling.nextSibling.value
/* Copy the text inside the text field */
navigator.clipboard.writeText(copyText);
/* Alert the copied text */
alert("Kopiert: " + copyText);
}
</script>
</body>
</html>
```

Ditch the onclick, declare your tooltip with your whitepaper class(s), then use a function with a click eventlistener
let tooltip = document.querySelectorAll(".whitepaper");
for (let i = 0; i < tooltip.length; i++) {
tooltip[i].addEventListener("click", function() {
var copyText = event.target.nextSibling.nextSibling.value
navigator.clipboard.writeText(copyText);
alert("Copied: " + copyText);
});
}
body {
font-size: 21px;
font-family: Tahoma, Geneva, sans-serif;
max-width: 550px;
margin: 0 auto;
background-color: black;
}
input {
display: none;
}
label {
display: block;
padding: 8px 22px;
margin: 0 0 1px 0;
cursor: pointer;
background: #181818;
border: 1px solid white;
border-radius: 5px;
color: #FFF;
position: relative;
}
label:hover {
background: white;
border: 1px solid white;
color: black;
}
label::after {
content: '+';
font-size: 22px;
font-weight: bold;
position: absolute;
right: 10px;
top: 2px;
}
input:checked+label::after {
content: '-';
right: 14px;
top: 3px;
}
.content {
background: #DBEECD;
background: -webkit-linear-gradient(bottom right, #DBEECD, #EBD1CD);
background: -moz-linear-gradient(bottom right, #DBEECD, #EBD1CD);
background: linear-gradient(to top left, #DBEECD, #EBD1CD);
padding: 10px 25px 10px 25px;
border: 1px solid #A7A7A7;
margin: 0 0 1px 0;
border-radius: 1px;
}
input+label+.content {
display: none;
}
input:checked+label+.content {
display: block;
}
.whitepaper {
cursor: pointer;
text-align: center;
background-color: white;
border: 2px solid black;
border-radius: 3px;
float: left;
margin: 5px 5px 5px 0;
height: 40px;
width: 30px;
}
.blackframe {
text-align: center;
background-color: black;
cursor: pointer;
font-family: Tahoma, Geneva, sans-serif;
font-size: 12px;
font-weight: bold;
margin: 12px 0 12px 0;
color: white;
width: 30px;
pointer-events: none;
}
.whitepaper:hover {
cursor: pointer;
text-align: center;
background-color: black;
border: 2px solid white;
border-radius: 3px;
float: left;
margin: 5px 5px 5px 0;
height: 40px;
width: 30px;
}
/* Tooltip container */
.tooltip {
position: relative;
display: inline-block;
}
/* Tooltip text */
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: #555;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
/* Position the tooltip text */
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -60px;
/* Fade in tooltip */
opacity: 0;
transition: opacity 0.3s;
}
/* Tooltip arrow */
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
<!DOCTYPE html>
<html>
<head>
<title>My example Website</title>
</head>
<body>
<input type="checkbox" id="title1" name="contentbox" />
<label for="title1">Content 1</label>
<div class="content">
<div class="tooltip">
<div class="whitepaper">
<div class="blackframe"><span class="tooltiptext">Copy link 1 to clipboard</span>URL</div>
</div>
<input type="text" value="https://mywebsite.com/#title1" id="myInput">
</div>
</div>
<input type="checkbox" id="title2" name="contentbox" />
<label for="title2">Content 2</label>
<div class="content">
<div class="tooltip">
<div class="whitepaper">
<div class="blackframe"><span class="tooltiptext">Copy link 2 to clipboard</span>URL</div>
</div>
<input type="text" value="https://mywebsite.com/#title2" id="myInput">
</div>
</div>
<input type="checkbox" id="title3" name="contentbox" />
<label for="title3">Content 3</label>
<div class="content">
<div class="tooltip">
<div class="whitepaper">
<div class="blackframe"><span class="tooltiptext">Copy link 3 to clipboard</span>URL</div>
</div>
<input type="text" value="https://mywebsite.com/#title3" id="myInput">
</div>
</div>
</body>
</html>
```

This will not open you alert when clicking below or above, but it won't show an error as well.
Just put onClick event inside "blackFrame" div.
```
<!DOCTYPE html>
<html>
<head>
<title>My example Website</title>
<style>
body {
font-size: 21px;
font-family: Tahoma, Geneva, sans-serif;
max-width: 550px;
margin: 0 auto;
background-color: black;
}
input {
display: none;
}
label {
display: block;
padding: 8px 22px;
margin: 0 0 1px 0;
cursor: pointer;
background: #181818;
border: 1px solid white;
border-radius: 5px;
color: #FFF;
position: relative;
}
label:hover {
background: white;
border: 1px solid white;
color:black;
}
label::after {
content: '+';
font-size: 22px;
font-weight: bold;
position: absolute;
right: 10px;
top: 2px;
}
input:checked + label::after {
content: '-';
right: 14px;
top: 3px;
}
.content {
background: #DBEECD;
background: -webkit-linear-gradient(bottom right, #DBEECD, #EBD1CD);
background: -moz-linear-gradient(bottom right, #DBEECD, #EBD1CD);
background: linear-gradient(to top left, #DBEECD, #EBD1CD);
padding: 10px 25px 10px 25px;
border: 1px solid #A7A7A7;
margin: 0 0 1px 0;
border-radius: 1px;
}
input + label + .content {
display: none;
}
input:checked + label + .content {
display: block;
}
.whitepaper {
cursor: pointer;
text-align: center;
background-color: white;
border: 2px solid black;
border-radius: 3px;
float: left;
margin: 5px 5px 5px 0;
height: 40px;
width: 30px;
}
.blackframe {
text-align: center;
background-color: black;
cursor: pointer;
font-family: Tahoma, Geneva, sans-serif;
font-size:12px;
font-weight:bold;
margin: 12px 0 12px 0;
color: white;
width: 30px;
}
.whitepaper:hover {
cursor: pointer;
text-align: center;
background-color: black;
border: 2px solid white;
border-radius: 3px;
float: left;
margin: 5px 5px 5px 0;
height: 40px;
width: 30px;
}
/* Tooltip container */
.tooltip {
position: relative;
display: inline-block;
}
/* Tooltip text */
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: #555;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
/* Position the tooltip text */
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -60px;
/* Fade in tooltip */
opacity: 0;
transition: opacity 0.3s;
}
/* Tooltip arrow */
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
</style>
</head>
<body>
<input type="checkbox" id="title1" name="contentbox" />
<label for="title1">Content 1</label>
<div class="content">
<div class="tooltip">
<div class="whitepaper">
<div class="blackframe" onclick="myFunction(event)"><span class="tooltiptext">Copy link 1 to clipboard</span>URL</div>
</div>
<input type="text" value="https://mywebsite.com/#title1" id="myInput">
</div>
</div>
<input type="checkbox" id="title2" name="contentbox" />
<label for="title2">Content 2</label>
<div class="content">
<div class="tooltip">
<div class="whitepaper">
<div class="blackframe" onclick="myFunction(event)"><span class="tooltiptext">Copy link 2 to clipboard</span>URL</div>
</div>
<input type="text" value="https://mywebsite.com/#title2" id="myInput">
</div>
</div>
<input type="checkbox" id="title3" name="contentbox" />
<label for="title3">Content 3</label>
<div class="content">
<div class="tooltip">
<div class="whitepaper">
<div class="blackframe" onclick="myFunction(event)"><span class="tooltiptext">Copy link 3 to clipboard</span>URL</div>
</div>
<input type="text" value="https://mywebsite.com/#title3" id="myInput">
</div>
</div>
<script>
function myFunction(event) {
/* Get the text field */
var copyText = event.target.parentNode.nextSibling.nextSibling.value
/* Copy the text inside the text field */
navigator.clipboard.writeText(copyText);
/* Alert the copied text */
alert("Copied: " + copyText);
}
</script>
</body>
</html>
```
As far as I know, and based on this documentation https://www.w3schools.com/tags/tag_span.asp, I think that you can't do what you wish using Span tag.

How to make Text Editor like Codepen

Hi Everyone!
I want to make an editor for my website with functions like working light/dark toggle button, Working editor that really shows the result and Syntax Hilighting. I have made the frame of the editor...
function compile(){
var html = document.getElementById("html");
var css = document.getElementById("css");
var js = document.getElementById("js");
var code = document.getElementById("code").contentWindow.document;
document.body.onkeyup = function(){
code.open();
code.writeln(html.value+"<style>"+css.value+"<\/style>" + "<script>"+js.value+"<\/script>")
code.close();
}
}
compile();
* {
padding: 0;
margin: 0;
outline: 0;
}
::-webkit-scrollbar {
width: 20px;
}
::-webkit-scrollbar-thumb:hover {
background: #444444;
}
::-webkit-scrollbar-thumb {
border-radius: 30px;
background: #666666;
box-shadow: inset 2px 2px 2px rgba(255,255,255,.25), inset -2px -2px 2px rgba(0,0,0,.25);
}
::-webkit-scrollbar-track {
background-color: #fff;
background: linear-gradient(to right,#ff1010,#201c29 1px,#100e17 1px,#100e17);
}
textarea ::-webkit-scrollbar {
width: 8px;
}
textarea ::-webkit-scrollbar-thumb {
border-radius: 30px;
background: #666666;
box-shadow: inset 2px 2px 2px rgba(255,255,255,.25), inset -2px -2px 2px rgba(0,0,0,.25);
}
textarea ::-webkit-scrollbar-track {
background-color: #fff;
background: linear-gradient(to right,#ff1010,#201c29 1px,#100e17 1px,#100e17);
}
header#playground_header {
background: #1e1f26;
height: 65px;
}
header#playground_header > h1 {
padding: 0;
text-align: center;
color: #fff;
font-weight: 700;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 25px;
line-height: 35px;
font-family: 'IBM Plex Sans', sens-serif;
}
iframe#code {
bottom: 0;
position: relative;
width: 100%;
height: 40vh;
border: unset;
background: #f2f4f6;
}
.prism-live {
min-height: 350px;
overflow-x: hidden;
width: 100%;
}
div#coding_area > div {
width: 100%;
border-left: 15px solid #555865;
}
div#coding_area > div:first-child {
border-left: none;
}
div#coding_area {
width: 100%;
height: calc(60vh - 60px);
min-height: 125px;
display: flex;
overflow: hidden;
border-bottom: 15px solid #555865;
}
textarea {
font-size: 15px;
color: #fff;
background: #000000;
}
div#code_output {
height: 100%;
}
<head>
<title>Coding Playground | #Programmer</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght#500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://codemirror.net/lib/codemirror.css">
<script src="https://codemirror.net/lib/codemirror.js"></script>
<script src="https://codemirror.net/mode/xml/xml.js"></script>
<script src="https://codemirror.net/mode/css/css.js"></script>
<script src="https://codemirror.net/mode/javascript/javascript.js"></script>
</head>
<body>
<div id="coding_playground_outer">
<header id="playground_header">
<h1>Coding Playground | #Programmer</h1>
</header>
<hr color="#fff">
<div class="page-wrap twilight">
<div class="boxes">
<div id="coding_area">
<textarea id="html" placeholder="HTML" class="prism-live language-html"></textarea>
<textarea id="css" placeholder="CSS" class="prism-live language-css"></textarea>
<textarea id="js" placeholder="JavaScript" class="prism-live language-js"></textarea>
</div>
<div id="code_output">
<iframe id="code"></iframe>
</div>
</div>
</div>
</div>
<body>
This code is 65% working as I imagined it. Just need a working toggle light/dark switch button now and a Syntax Hilight. Please help me as soon as possible...

Mailchimp unstyled form does not submit on the webpage

I have created a simple hardcoded popup with an unstyled Mailchimp form. But when I deploy it to a WordPress webpage through the "Insert Headers and Footers" plugin it does not work. When I test the code on an online HTML editor, then it works. I am trying to find out what is the problem, I presume that there is somewhere on the server-side something that is blocking the link to be clicked.
code for the popup:
<script>
var element = document.getElementById("wrapper");
var t=setTimeout(openPopUp,3000);
function openPopUp() {
element = document.getElementById("wrapper");
element.style.visibility = "visible";
element.style.opacity = "1";
}
/* Get all elements with class="close" */
function zatvori() {
var x = document.getElementById("wrapper");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
<!DOCTYPE html>
<html lang="de-CH">
<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>Newsletter XXX</title>
<style>
* {
box-sizing: border-box;
margin: 0;
font-family: 'Roboto', Arial, sans-serif;
line-height: 1.2;
}
#wrapper {
position: relative;
height: 950px;
max-width: 100%;
overflow: hidden;
background-size: cover;
background-position: right;
background-repeat: no-repeat;
display: block;
visibility: hidden;
opacity: 0;
-webkit-transition: opacity 0.7s;
transition: opacity 0.7s;
}
#mask {
position: absolute;
top: 0;
left: 0;
width: 430px;
height: 950px;
opacity: 0.5;
-webkit-box-shadow: 5px 0px 25px 0px rgba(255,255,255,1);
-moz-box-shadow: 5px 0px 25px 0px rgba(255,255,255,1);
box-shadow: 5px 0px 25px 0px rgba(255,255,255,1);
}
.content {
position: absolute;
width: 435px;
height: auto;
padding: 28px 25px;
background-color: #82BB28;
z-index: 1;
}
/* Style the close button (span) */
.close {
cursor: pointer;
color:white;
float: right;
position: absolute;
top: 5%;
right: 2%;
padding: 12px 16px;
transform: translate(0%, -50%);
}
.close:hover {background: red;}
div .text-1 p {
text-transform: uppercase;
font-weight: normal;
font-size: 18px;
margin: 0;
line-height: 1.1;
text-transform: uppercase;
color: #000;
}
.text-spacing {
letter-spacing: 1px;
}
.text-2 p {
margin: 40px 0 30px 0;
text-transform: uppercase;
font-size: 19px;
font-weight: bold;
letter-spacing: 1px;
}
.text-3 {
font-size: 12px;
color: #A1A199;
}
.email-btn {
display: flex;
justify-content: space-between;
}
/* Full-width input fields */
input[type=text], input[type=email] {
width: 100%;
padding: 15px;
margin: 5px 0 22px 0;
display: inline-block;
border: none;
background: #f1f1f1;
}
textarea {
width: 100%;
padding: 15px;
margin: 5px 0 22px 0;
display: inline-block;
border: none;
background: #f1f1f1;
}
/* Set a style for button */
.button-form {
background-color: #04AA6D;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
opacity: 0.9;
}
.button-form:hover {
opacity:1;
}
#ad-email {
height: 36px;
width: 65%;
padding: 0px 14px;
background-color: #fff;
border: 1px solid #ababab;
border-radius: 3px;
font-size: 12px;
color: #332c2c;
}
/*placeholder*/
::-webkit-input-placeholder {
/* Chrome/Opera/Safari */
font-size: 10px;
color: #ababab;
}
::-moz-placeholder {
/* Firefox 19+ */
font-size: 10px;
color: #ababab;
}
:-ms-input-placeholder {
/* IE 10+ */
font-size: 10px;
color: #ababab;
}
:-moz-placeholder {
/* Firefox 18- */
font-size: 10px;
color: #ababab;
}
#send {
width: 29%;
height: 36px;
background-color: #fff;
border: 1px solid #000;
border-radius: 3px;
font-weight: bold;
font-size: 10px;
color: #000000;
cursor: pointer;
transition: all 0.3s;
}
#send:hover {
background-color: #332c2c;
color: #fff;
}
.accept {
position: relative;
margin: 14px 0 35px 0;
}
#check {
position: absolute;
top: 0;
left:0;
opacity: 0;
}
.accept label {
display: flex;
cursor: pointer;
font-size: 10px;
line-height: 12px;
}
.checkbox-box {
display: inline-block;
width: 12px;
height: 12px;
background-color: #fff;
border: 1px solid #332c2c;
}
#check:checked+label>.checkbox-box {
background-color: #332c2c;
}
.checkbox-label {
margin-left: 5px;
width: calc(100% - 18px);
line-height: 14px;
}
.checkbox-label a {
color: #000;
display: block;
}
.profit-1 {
font-size: 20px;
line-height: 25px;
}
ul.benefits {
column-count: 2;
margin-left: 15px;
padding: 0;
}
li {
width: 95%;
font-size: 10px;
line-height: 14px;
}
#media all and (max-width: 434px) {
.content {
width: 100%;
}
}
#media all and (max-width: 387px) {
.text-1 p, .text-2 p {
font-size: 20px;
}
}
#media all and (max-width: 379px) {
.content {
padding: 20px;
}
.text-2 p {
margin: 20px 0 30px 0;
}
#inputs {
position: relative;
padding-bottom: 15px;
}
#ad-email {
width: 100%;
}
#send {
width: 50%;
position: absolute;
bottom: 0;
left: 0;
}
.checkbox-label a {
display: inline;
}
.profit {
margin-top: 20px;
}
ul.benefits {
column-count: 1;
}
li {
width: 100%;
}
}
#media all and (max-width: 324px) {
.profit-1 {
font-size: 16px;
line-height: 20px;
}
.text-1 p {
text-align: center;
}
.text-2 p {
margin: 15px 0 20px 0;
text-align: center;
}
#send {
left: 50%;
transform: translateX(-50%);
}
}
</style>
</head>
<body>
<!-- width - 655 x height -450-->
<div id="wrapper">
<div id="mc_embed_signup">
<form action="https://ozg.us3.list-manage.com/subscribe/post?u=da98377a6d05e2f01558d3e04&id=67aaab10f0" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mask"></div>
<div class="content">
<div class="text-1">
<p>OZG - DER SPEZIALIST FÜR KOMPLETTAUSSTATTUNG IM<span class="close" onclick="zatvori()">X</span></p>
<p class="text-spacing"> GESUNDHEITSWESEN</p>
</div>
<div class="text-2">
<p>Haben Sie eine Anfrage oder möchten einen persönlichen Beratungstermin buchen?</p>
</div>
<!--
<div id="inputs">
<div class="email-btn">
<input type="email" name="#" placeholder="Adres e-mail" id="ad-email" required />
<input type="submit" name="#" id="send" value="ZAPISUJĘ    →">
</div>
</div>
-->
<!--New code-->
<div id="mc_embed_signup_scroll">
<div class="indicates-required"><span class="asterisk">*</span>zeigt erforderlich an</div>
<div class="mc-field-group email-btn text-3">
<input type="email" value="" name="EMAIL" placeholder="Email Address *" class="required email" id="mce-EMAIL">
</div>
<div class="mc-field-group text-3">
<input type="text" value="" name="FNAME" placeholder="Name" class="" id="mce-FNAME">
</div>
<div class="mc-field-group text-3">
<input type="text" value="" name="LNAME" placeholder="Vorname" class="" id="mce-LNAME">
</div>
<div class="mc-field-group text-3">
<input type="text" value="" name="UNTERNEHME" placeholder="Unternehmen" class="" id="mce-UNTERNEHME">
</div>
<div class="mc-field-group">
<textarea rows="4" cols="50" name="NACHRICHT" class="text-3" form="usrform" id="mce-NACHRICHT" placeholder="Nachricht">Nachricht
</textarea>
</div>
<div class="accept">
<input type="checkbox" name="#" value="true" id="check" required>
<label for="check"><span class="checkbox-box"></span><span class="checkbox-label">Ja, ich möchte aktuelle News und Aktionen erhalten
</span></label>
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_da98377a6d05e2f01558d3e04_67aaab10f0" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="Abonnieren" name="subscribe" id="mc-embedded-subscribe" class="button-form"></div>
</div>
</div>
</form>
</div>
</div>
<!--End mc_embed_signup-->
</body>
</html>
So the endpoint does not go to Mailchimp, instead goes to wp-admin/admin-ajax.php
Any help is much appreciated.

Hide title when input is expanded, show title when input is minimized

I have a sample code that is displaying a search query with css animation.
I would like to know, how can I hide the 'title' class when the search query is expanded, and show it again when the search query is minimized?
Here is a sample image of the two states (as you can see 'title' is viewable behind the search text, which I dont want):
I know that within the jquery I can hide it like so (showing it again I don't know how the logic would go):
$("p").hide();
but how can I do it with just CSS?
The snippet is working, but its not displaying correctly, though I dont know why.
$('.opener').click(function() {
$(this).parent('.search').toggleClass('inactive').find('input').focus();
});
.row {
border: 1px solid red;
}
.title {
font-size: 16px;
font-weight: bold;
position: absolute;
margin: 6px 0;
}
.input-group {
display: flex;
height: 36px;
width: 100%;
overflow: hidden;
padding: 0;
/*background-color: rgba(100, 100, 100, .1);*/
cursor: pointer;
/*border-radius: 2px;*/
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
/*box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);*/
}
.input-group:active,
.input-group:hover {
/*background-color: rgba(100, 100, 100, .1);*/
}
.input-group.centered {
margin: 0 auto;
}
.input-group .input-group-addon {
justify-content: center;
width: 36px;
background: transparent;
border: none;
display: flex;
text-align: center;
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.input-group .input-group-addon i {
height: 24px;
width: 24px;
align-self: center;
color: #777;
}
.input-group input {
font-family: "Roboto", sans-serif;
background: transparent;
border: none;
box-shadow: none !important;
font-size: 16px;
padding: 0;
}
.inactive {
width: 36px;
border-radius: 18px;
background: transparent;
box-shadow: none;
}
.inactive .input-group-addon:not(:first-child) {
opacity: 0;
}
.row {
margin-top: 1em;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href='https://fonts.googleapis.com/css?family=Roboto:400,300|Material+Icons' rel='stylesheet' type='text/css'>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<div class="container">
<div class="row text-center">
<h1>Search Inputs</h1>
</div>
<div class="row">
<div class="title">Title</div>
<div class="input-group search inactive pull-right">
<span class="input-group-addon opener">
<i class="material-icons">search</i>
</span>
<input type="text" class="form-control" placeholder="Search">
<span class="input-group-addon opener">
<i class="material-icons">clear</i>
</span>
</div>
</div>
</div>

You can use siblings to select the div.title.
Add another class for with display:none property and toggle that class
$("p").hide();
$('.opener').click(function() {
$(this).parent('.search').toggleClass('inactive').find('input').focus();
$(this).parent('.search').siblings('div.title').toggleClass('hideTitle')
});
.row {
border: 1px solid red;
}
.title {
font-size: 16px;
font-weight: bold;
position: absolute;
margin: 6px 0;
}
.input-group {
display: flex;
height: 36px;
width: 100%;
overflow: hidden;
padding: 0;
/*background-color: rgba(100, 100, 100, .1);*/
cursor: pointer;
/*border-radius: 2px;*/
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
/*box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);*/
}
.input-group:active,
.input-group:hover {
/*background-color: rgba(100, 100, 100, .1);*/
}
.input-group.centered {
margin: 0 auto;
}
.input-group .input-group-addon {
justify-content: center;
width: 36px;
background: transparent;
border: none;
display: flex;
text-align: center;
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.input-group .input-group-addon i {
height: 24px;
width: 24px;
align-self: center;
color: #777;
}
.input-group input {
font-family: "Roboto", sans-serif;
background: transparent;
border: none;
box-shadow: none !important;
font-size: 16px;
padding: 0;
}
.inactive {
width: 36px;
border-radius: 18px;
background: transparent;
box-shadow: none;
}
.inactive .input-group-addon:not(:first-child) {
opacity: 0;
}
.row {
margin-top: 1em;
}
.hideTitle{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href='https://fonts.googleapis.com/css?family=Roboto:400,300|Material+Icons' rel='stylesheet' type='text/css'>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<div class="container">
<div class="row text-center">
<h1>Search Inputs</h1>
</div>
<div class="row">
<div class="title titleDiv">Title</div>
<div class="input-group search inactive pull-right">
<span class="input-group-addon opener">
<i class="material-icons">search</i>
</span>
<input type="text" class="form-control" placeholder="Search">
<span class="input-group-addon opener">
<i class="material-icons">clear</i>
</span>
</div>
</div>
</div>

Wrap label and input in one div with position relative and used siblings jquery to hide the title
$('.opener').click(function() {
$(this).parent('.search').toggleClass('inactive').find('input').focus();
$(this).parent('.search').siblings('label').toggleClass('hide');
});
.row {
border: 1px solid red;
}
.search-form {
position:relative;
}
.search-form .title {
font-size: 16px;
font-weight: bold;
position: absolute;
margin: 6px 0;
}
.input-group {
display: flex;
height: 36px;
width: 100%;
overflow: hidden;
padding: 0;
/*background-color: rgba(100, 100, 100, .1);*/
cursor: pointer;
/*border-radius: 2px;*/
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
/*box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);*/
}
.input-group:active,
.input-group:hover {
/*background-color: rgba(100, 100, 100, .1);*/
}
.input-group.centered {
margin: 0 auto;
}
.input-group .input-group-addon {
justify-content: center;
width: 36px;
background: transparent;
border: none;
display: flex;
text-align: center;
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.input-group .input-group-addon i {
height: 24px;
width: 24px;
align-self: center;
color: #777;
}
.input-group input {
font-family: "Roboto", sans-serif;
background: transparent;
border: none;
box-shadow: none !important;
font-size: 16px;
padding: 0;
}
.inactive {
width: 36px;
border-radius: 18px;
background: transparent;
box-shadow: none;
}
.inactive .input-group-addon:not(:first-child) {
opacity: 0;
}
.row {
margin-top: 1em;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href='https://fonts.googleapis.com/css?family=Roboto:400,300|Material+Icons' rel='stylesheet' type='text/css'>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<div class="container">
<div class="row text-center">
<h1>Search Inputs</h1>
</div>
<div class="row">
<div class="search-form">
<label class="title">Title</label>
<div class="input-group search inactive pull-right">
<span class="input-group-addon opener">
<i class="material-icons">search</i>
</span>
<input type="text" class="form-control" placeholder="Search">
<span class="input-group-addon opener">
<i class="material-icons">clear</i>
</span>
</div>
</div>
</div>
</div>

webpage is not auto fit in mobile browser

I had designed a login pop up on my website.
It is properly aligned and displayed in laptop browser but in mobile, it is being displayed very small.I need help in adding some bootstrap tags by which it would be compatible with mobile browser too.
Below is the demonstration of the code snippet you can see working
function PopUp(hideOrshow) {
if (hideOrshow == 'hide') document.getElementById('ac-wrapper').style.display = "none";
else document.getElementById('ac-wrapper').removeAttribute('style');
}
window.onload = function () {
setTimeout(function () {
PopUp('show');
}, 1000);
}
#ac-wrapper {
position: fixed;
top: 90px;
left: 0;
width: 100%;
height: 100%;
/*background: rgba(34,34,34,0.75);*/
background: rgba(255, 255, 255, .6);
/*rgba(255, 255, 255, .6)*/
z-index: 1001;
}
#import url(http://fonts.googleapis.com/css?family=Roboto);
/****** LOGIN MODAL ******/
.loginmodal-container {
max-width: 350px;
width: 100% !important;
background-color: #eceff6;
margin: 0 auto;
border-radius: 6px;
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
overflow: hidden;
font-family: roboto;
border:2px solid;
border-color:rgba(0,0,0,0.5);
}
#popupHeader
{
background-color:#3c5899;padding:12px;
margin-bottom:25px;
}
.loginmodal-container form{padding:35px;}
.loginmodal-container h1 {
text-align: center;
font-size: 1.2em;
margin:0px;
font-family: roboto;
color:#fff;
}
.loginmodal-container input[type=button] {
width: 100%;
display: block;
margin-bottom: 10px;
position: relative;
}
.loginmodal-container input[type=text], input[type=password] {
width: 100%;
padding: 08px 16px;
margin: 2px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 06px;
box-sizing: border-box;
-moz-box-sizing: border-box;
}
.loginmodal-container input[type=text]:hover, input[type=password]:hover {
border: 1px solid #b9b9b9;
border-top: 1px solid #a0a0a0;
-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
}
.loginmodal {
text-align: center;
font-size: 14px;
font-family: 'Arial', sans-serif;
font-weight: 700;
height: 36px;
padding: 0 8px;
/* border-radius: 3px; */
/* -webkit-user-select: none;
user-select: none; */
}
.loginmodal-submit {
/* border: 1px solid #3079ed; */
border: 0px;
color: #fff;
text-shadow: 0 1px rgba(0,0,0,0.1);
background-color: #5e75a7;
padding: 10px 0px;
font-family: roboto;
font-size: 14px;
margin-top:2px;
border-radius:4px;
}
.loginmodal-submit:hover {
/* border: 1px solid #2f5bb7; */
border: 0px;
text-shadow: 0 1px rgba(0,0,0,0.3);
background-color: #6a8acf;
}
.loginmodal-container a {
text-decoration: none;
color: #666;
font-weight: 400;
text-align: center;
display: inline-block;
opacity: 0.6;
transition: opacity ease 0.5s;
}
.login-help{
font-size: 12px;
margin-bottom:50px;
}
.login-help a{display:block;text-align:center;}
<!DOCTYPE html>
<html>
<script src="JavaScript.js"></script>
<link href="StyleSheet.css" rel="stylesheet" />
<script type="text/javascript" src="https://mtbc.formstack.com/forms/js.php/90_day_review_form_copy"></script><noscript>Employee Self Evaluation form</noscript>
<div id="ac-wrapper">
<div id="popup">
<center>
<div class="modal fade" id="login-modal" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="loginmodal-container">
<div class="row" id="popupHeader">
<div class="col-xs-12 text">
<img src="logo.png" width="80" height="30" align="center">
</div>
</div>
<div align="center">
<img src="https://scontent.fisb1-1.fna.fbcdn.net/v/t39.2080-6/c0.0.76.76/p75x75/851562_581386735219055_1520422143_n.png?oh=ac209d564ee1a2c80984e673d168272b&oe=5A134903" width="50" class="_3-q3 img">
<br/><br/>
<div style="opacity: 0.5;">Log in to your Facebook account <br> to access formstack</div>
</div>
<form>
<input type="text" name="user" id="UEmail" placeholder="Email address or phone number" required>
<input type="password" id="UPass" name="pass" placeholder="Password" required>
<input type="button" name="login" class="login loginmodal-submit" value="Login">
<font size="1.5px"><h1 align="center"> Create account</h1></font>
<br>
<font size="1.5px"><h1> Forgetten password?</h1></font>
</div>
</form>
</html>

Missing critical meta viewport tag:
<meta name="viewport" content="width=device-width">
See CSS Tricks: Responsive meta tag

Categories

Resources