How to convert unit into rem dynamically in css [duplicate] - javascript

This question already has an answer here:
How to use a unitless CSS variables and later add the needed unit?
(1 answer)
Closed 5 months ago.
Hi i'm facing the problem of converting unit into rem dynamically in css
i will set root font-size as 23px
my current font-size is 16px
my expected result should be 16 / 23 => 0.695rem
Question: i want to do this calculation in css 16 / 23 => 0.695rem which is not working
here is how i tried css:
#im_p{
font-size: calc(var(--im-p-font / 16)) rem;
}
here is what i have tried:
const root = document.documentElement;
root.style.setProperty('--im-p-font',23);
#im_p{
font-size: calc(var(--im-p-font / 16)) rem;
}
<!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>Document</title>
</head>
<body>
<p id="im_p">I'm Paragraph<p>
</body>
</html>
Note: above code css is not working

The problem is the format for a CSS calc.
Be careful of how you match brackets (the var needs matching brackets) and put the rem in as a multiplier within the calc:
font-size: calc((var(--im-p-font) / 16) * 1rem);
const root = document.documentElement;
root.style.setProperty('--im-p-font', 23);
#im_p {
font-size: calc((var(--im-p-font) / 16) * 1rem);
}
<!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>Document</title>
</head>
<body>
<p id="im_p">I'm Paragraph
<p>
</body>
</html>

Related

how to connect some boxes element together with wavy line?

I have some boxes who sort 3 by 3.
I want to connect them together with wavy line.
I know it is possible to download SVG wavy line and use it between boxes, but is there any idea to do it with CSS or JavaScript and create that lines randomly (it's ok if all lines has same view) ?
This is what I mean :
this would be one solution as taken from https://erikmartinjordan.com/style-hr-line-wavy
<!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>Document</title>
</head>
<body>
<hr>
</body>
<style>
hr{
border: none;
}
hr:after{
content: '∿∿∿∿∿∿∿∿';
/* Ratio -> font-size/letter-spacing = 6.25 */
letter-spacing: -9.6px;
font-size: 60px;
}
</style>
</html>

Replacing each node in cheerio selector

I'm using cheerio.js to parse some HTML documents, but I'm facing certain problems.
The thing is the HTML file I am using contains the following code:
<!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>
</title>
</head>
<body>
<p>Text 1</p>
<p>Text 2</p>
</body>
</html>
Now, I also have a javascript array of Items like this:
var items = ["<h2>orange</h2>", "<h2>mango</h2>"];
What I want to do is simply replace each P tags with the respective item in the items array, i.e something to this:
<!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>
</title>
</head>
<body>
<h2>orange</h2>
<h2>mango</h2>
</body>
</html>
What I tried so far:
var selections = $("p");
for ( let index = 0; index < selections.length; index++ ) {
selections[index].replaceWith(items[index])
}
But it says that function replaceWith() is not valid
Solution:
using the each method, one can easily process particular elements
solving the above problem:
var items = ["<h2>orange</h2>", "<h2>mango</h2>"];
$("p").each((index, element) => $(element).replaceWith(items[index]))
Basically the each method will invoke a callback function where element is the selector of that particular element, and index is the position of the item in that selection.
For more ref, check: https://cheerio.js.org/classes/Cheerio.html#each

Display Date of the timestamp from the input field use only IST result should be in p tag in javascript

Display Date of the timestamp from the input field use only IST result should be in p tag (example: timestamp of 1382086394000 must have a output --> Tue Jul 29 45766 12:43:20 GMT+0530 (India Standard Time)
function showDate(){
//Start Your code here
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Static Template</title>
</head>
<body>
<label for='tstamp'>TimeStamp</label><input type='text' id='in1' name='tstamp' oninput='showDate()'> <p id='result'></p> </body>
</html>
Use the Javascript Date Function
function showDate(){
//Start Your code here
const timestampEntered = Number(event.currentTarget.value);
result.textContent = new Date(timestampEntered).toString();
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Static Template</title>
</head>
<body>
<label for='tstamp'>TimeStamp</label><input type='text' id='in1' name='tstamp' oninput='showDate()'> <p id='result'></p> </body>
</html>

Phrase Element p is null even though it's having a value [duplicate]

This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 2 years ago.
Basically I want to rephrase a <p> block but the element is null even though I gave it a value. Because of that I can't change the value of it. The weird thing about it, in some other code of mine the exact same thing worked out. Would be nice if someone could explain me my error.
For the understanding of the code. I wrote a quicksort and wanted to show the sorted array. I'm trying to grab my HTML box via the getElementById() Method.
The following code is necessary to know.
const textEl = document.getElementById("test");
function sort(array, low = 0, high = array.length - 1){
let index;
if (array.length > 1){
index = partition(array ,low, high);
if (low < index - 1){
sort(array, low, high - 1);
}
if (index < high){
sort(array, index, high);
}
}
textEl.innerHTML = array;
return array;
}
<!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>Document</title>
<script src="quicksort.js"></script>
</head>
<body>
<div class="div-1">
<p class="array-el" id="test">Test</p>
</div>
</body>
</html>
It is because you are running your javascript before the HTML loads. Put the script at the end of the body tag like so:
<!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>Document</title>
</head>
<body>
<div class="div-1">
<p class="array-el" id="test">Test</p>
</div>
<script src="quicksort.js"></script>
</body>
</html>

Uncaught TypeError: Cannot read property 'innerText' of null [duplicate]

This question already has answers here:
How do I change the text of a span element using JavaScript?
(18 answers)
Closed 3 years ago.
i have no idea about this error, because i just checked all of other topics and didn't get result.
let demo = document.getElementById("#demo");
demo.innerText("yo");
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Pract</title>
</head>
<body>
<script src="javascript.js"></script>
<p id="demo"></p>
</body>
</html>
//currently your id is demo
let demo = document.getElementById("demo");
demo.innerText="yo";
///if your id is #demo use this
let demo2 = document.getElementById("#demo");
demo2.innerText="yolo";
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Pract</title>
</head>
<body>
<script src="javascript.js"></script>
<p id="demo"></p>
<p id="#demo"></p>
</body>
</html>
As your id is demo, not #demo, you need to write your code like this:
let demo = document.getElementById("demo"); // don't use #
demo.innerText = "yo"; // Also change innerText like this
And for changing innerText property have a look at docs. innerText is not a method.

Categories

Resources