I want to get only the css part of tailwind.
Admin can write an article and use all Telwind classes in his article.
On the other hand, Tailwind classes are created during the build of the React project, so the admin may use a class that has not been created in Build time.
For this reason, it is necessary to load the Tailwind CDN only on the article page in order to display the full article as correctly.
When the CDN is loaded, there is an interference because in the main project, many items of the tailwind configuration have been edited.
Now I only need to get CSS from tailwind so that maybe there is an idea to solve the problem.
Do you have an idea to solve the problem?
Category: javascript
Category Added in a WPeMatico Campaign
@mui/x-date-pickers component styling
I’ve tried many attempts to style the @mui/x-date-pickers <DatePicker/> component to no avail.
I’ve tried the sx={{}} method, I’ve tried the style={{}} method, I’ve tried the makeStyles() method, I’ve tried .css with !important method, I’ve tried the renderInput={(params) => <TextField {...params} sx={{}} or style={{}} or size="small"/> method, I’ve tried the <ThemeProvider/> method too, but none of them work. I’m at a loss of what to do here.
I also tried asking ChatGPT and it couldn’t help me either. I’m starting to think the component is not able to be styled.
What I need to do is simply be able to change the height of the whole component. Here’s some example code:
import React from "react";
export default const Component = () => {
return (
<DatePicker
fullWidth
views={['year', 'month', 'day']}
openTo="month"
value={value}
onChange={(newValue) => setVaue(newValue)}
renderInput={(params) => {
<TextField
{...params}
size="small"
/>
}}
/>
)
}
import React from "react";
export default const Component = () => {
return (
<DatePicker
fullWidth
views={['year', 'month', 'day']}
openTo="month"
value={value}
onChange={(newValue) => setVaue(newValue)}
renderInput={(params) => {
<TextField
{...params}
sx={{ height: '50px' }}
/>
}}
/>
)
}
import React from "react";
import { DatePicker } from "@mui/x-date-pickers";
export default const Component = () => {
return (
<DatePicker
fullWidth
views={['year', 'month', 'day']}
openTo="month"
value={value}
onChange={(newValue) => setVaue(newValue)}
renderInput={(params) => {
<TextField
{...params}
style={{ height: '50px' }}
/>
}}
/>
)
}
Some clarification on how I can style the <DatePicker/> and not <DesktopDatePicker/> or other variations from @mui/x-date-pickers is welcome!
How to dynamically check if a string can be a specific format like a number, boolean, datetimeISO?
In javascript/typescript, if I have a string of something, is there a library for checking if the string is a valid number, boolean, or datetime in ISO format?
I was looking into zod library but im not sure if it supports these functions.
Does anyone know?
How to use zod schemas in d.ts files?
I am new to zod (in typescript projects), and currently I have a bunch of interfaces defined in .d.ts files, which then are used in many files throughout the project.
I can convert them to zod schemas, but then how can I globally export them like I do in .d.ts files? I rather not want to import the types in all the project files.
Problem with automatically-generated SVG display using Cytoscape.js
I’m trying to use Cytoscape.js to create a diagram of chemical reactions generated from student input, but I can’t seem to get the images of the molecules to display on each of the nodes.
The images I need are automatically generated with RDKit.js.
These images can be displayed outside of cytoscape just fine (when embedded in a plain HTML document, for example), but I can’t get the images to display properly on the cytoscape diagram nodes. Specifically, when I try to use the RDKit svg as the node’s background-image, it won’t display it.
Here’s a live example of what I’ve tried so far, modified from some other guides about using svg images with cytoscape. Here’s what it looks like:
And here’s the code for the node data:
[
{
"data": {
"id": "id0"
},
"position": {
"x": 44,
"y": 93
},
"style": {
"background-image": "data:image/svg+xml;utf-8,%3Csvg%20width=%2224%22%20height=%2224%22%20viewBox=%220%200%2024%2024%22%20version=%221.1%22%20xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath%20d=%22M12,11.5A2.5,2.5%200%200,1%209.5,9A2.5,2.5%200%200,1%2012,6.5A2.5,2.5%200%200,1%2014.5,9A2.5,2.5%200%200,1%2012,11.5M12,2A7,7%200%200,0%205,9C5,14.25%2012,22%2012,22C12,22%2019,14.25%2019,9A7,7%200%200,0%2012,2Z%22%20fill=%22yellow%22%3E%3C/path%3E%3C/svg%3E",
"background-fit": "cover cover",
"background-image-opacity": 1
}
},
{
"data": {
"id": "id1"
},
"position": {
"x": 77,
"y": 93
},
"style": {
"background-image": "benzene.svg",
"background-fit": "cover cover",
"background-image-opacity": 1
}
},
{
"data": {
"id": "id2"
},
"position": {
"x": 77,
"y": 150
},
"style": {
"background-image": "data:image/svg+xml;utf-8,data:image/svg+xml;utf-8,%3C%3Fxml version='1.0' encoding='iso-8859-1'%3F%3E%3Csvg version='1.1' baseProfile='full' xmlns='http://www.w3.org/2000/svg' xmlns:rdkit='http://www.rdkit.org/xml' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' width='250px' height='200px' viewBox='0 0 250 200'%3E%3C!-- END OF HEADER --%3E%3Crect style='opacity:1.0;fill:%23FFFFFF;stroke:none' width='250.0' height='200.0' x='0.0' y='0.0'%3E%3C/rect%3E%3Cpath class='bond-0 atom-0 atom-1' d='M 230.0,100.0 L 177.5,190.9' style='fill:none;fill-rule:evenodd;stroke:%23000000;stroke-width:2.0px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1' /%3E%3Cpath class='bond-0 atom-0 atom-1' d='M 211.8,100.0 L 168.4,175.2' style='fill:none;fill-rule:evenodd;stroke:%23000000;stroke-width:2.0px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1' /%3E%3Cpath class='bond-1 atom-1 atom-2' d='M 177.5,190.9 L 72.5,190.9' style='fill:none;fill-rule:evenodd;stroke:%23000000;stroke-width:2.0px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1' /%3E%3Cpath class='bond-2 atom-2 atom-3' d='M 72.5,190.9 L 20.0,100.0' style='fill:none;fill-rule:evenodd;stroke:%23000000;stroke-width:2.0px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1' /%3E%3Cpath class='bond-2 atom-2 atom-3' d='M 81.6,175.2 L 38.2,100.0' style='fill:none;fill-rule:evenodd;stroke:%23000000;stroke-width:2.0px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1' /%3E%3Cpath class='bond-3 atom-3 atom-4' d='M 20.0,100.0 L 72.5,9.1' style='fill:none;fill-rule:evenodd;stroke:%23000000;stroke-width:2.0px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1' /%3E%3Cpath class='bond-4 atom-4 atom-5' d='M 72.5,9.1 L 177.5,9.1' style='fill:none;fill-rule:evenodd;stroke:%23000000;stroke-width:2.0px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1' /%3E%3Cpath class='bond-4 atom-4 atom-5' d='M 81.6,24.8 L 168.4,24.8' style='fill:none;fill-rule:evenodd;stroke:%23000000;stroke-width:2.0px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1' /%3E%3Cpath class='bond-5 atom-5 atom-0' d='M 177.5,9.1 L 230.0,100.0' style='fill:none;fill-rule:evenodd;stroke:%23000000;stroke-width:2.0px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1' /%3E%3Cpath d='M 227.3,104.5 L 230.0,100.0 L 227.3,95.5' style='fill:none;stroke:%23000000;stroke-width:2.0px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;' /%3E%3Cpath d='M 180.1,186.4 L 177.5,190.9 L 172.2,190.9' style='fill:none;stroke:%23000000;stroke-width:2.0px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;' /%3E%3Cpath d='M 77.8,190.9 L 72.5,190.9 L 69.9,186.4' style='fill:none;stroke:%23000000;stroke-width:2.0px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;' /%3E%3Cpath d='M 22.7,104.5 L 20.0,100.0 L 22.7,95.5' style='fill:none;stroke:%23000000;stroke-width:2.0px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;' /%3E%3Cpath d='M 69.9,13.6 L 72.5,9.1 L 77.8,9.1' style='fill:none;stroke:%23000000;stroke-width:2.0px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;' /%3E%3Cpath d='M 172.2,9.1 L 177.5,9.1 L 180.1,13.6' style='fill:none;stroke:%23000000;stroke-width:2.0px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;' /%3E%3C/svg%3E",
"background-fit": "cover cover",
"background-image-opacity": 1
}
}
]
There are three nodes in this diagram; the first node (“id0”, top left) uses an example SVG from another tutorial, and it displays as expected.
The second node (“id1”, top right) displays a chemical structure generated by RDKit. This structure’s image was saved as a separate svg file. This works as expected, but I can’t use this method for my desired application.
Finally, for the third node (“id2”, bottom right), I’ve tried encoding and embedding the svg and using it directly, as in the first example. The second and third node should be identical! Instead there is no image on the third node at all.
I’ve tried trimming out the excess header information from the svg (leaving just the width, height, version, and xmlns). I’ve tried changing the width and height in the header to match the example svg. I’ve even tried running the svg through various optimizers, all to no avail. How can I fix this?
How show success message in Ajax call success function in jQuery
I’m trying to show case the success message, if I get the ajax call response status 200 but I am not able to get the alert even when I get the status code 200 . where I am doing wrong here. any please help me on it. and if possible please show me the answer in js fiddle .
<script src="https://code.jquery.com/jquery-3.6.4.js"
integrity="sha256-a9jBBRygX1Bh5lt8GZjXDzyOB+bWve9EiO7tROUtj/E=" crossorigin="anonymous"></script>
<script>
$("#check").click(function () {
$.ajax({
url: 'https://jsonplaceholder.typicode.com/todos/1',
method: 'GET',
dataType: 'json',
success: function (response) {
// alert('getting into success');
console.log(response);
if (response.status == 200) {
alert('getting into success');
}
},
error: function (err) {
alert(err);
}
})
})
</script><!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>
<button id="check" value="check">Check</button>
<script src="https://code.jquery.com/jquery-3.6.4.js"
integrity="sha256-a9jBBRygX1Bh5lt8GZjXDzyOB+bWve9EiO7tROUtj/E=" crossorigin="anonymous"></script>
<script>
$("#check").click(function () {
$.ajax({
url: 'https://jsonplaceholder.typicode.com/todos/1',
method: 'GET',
dataType: 'json',
success: function (response) {
// alert('getting into success');
console.log(response);
if (response.status == 200) {
alert('getting into success');
}
},
error: function (err) {
alert(err);
}
})
})
</script>
</body>
</html>How to dynamically check if abstract JSON objects match a specific interface in typescript?
In js/typescript, if I have an interface like this
interface B {
bar:string;
}
interface A {
foo:string;
bar:B;
}
and then I have a abstract JS object like this
const r = await fetch("https://mylink.com");
const d = await r.json();
Is there a way to do something like
const matches:boolean = Matches(d, A);
which then is a boolean telling me if it is an exact match or not?
Thanks
How to Fix Yelp API 400 Status – Authorization Error?
I am trying to access the Yelp API using Javascript fetch and running into a 400 error indicating an Authorization Error. No idea why this won’t work but when I plug the bearer token into postman for the same API endpoint I get a 200 and the expected data back.
Here is the JS code I’m using:
fetch('https://api.yelp.com/v3/businesses/search?term=delis&latitude=37.786882&longitude=-122.399972', {
headers: {
'Authorization': 'Bearer ' + APIKEY,
'Content-Type': 'application/json'
},
mode: 'no-cors',
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));
This is the exact code example pulled from the documentation with exception to adding no-cors which is necessary.
I’ve tried hard-coding the bearer token into the header and I’ve verified that several other API endpoints work fine in Postman with the bearer token but nothing will hit a 200 with my fetch request.
Spent hours last night scouring gh forums, SO, etc for solutions but coming up empty!
How to remove the last letter of a text file using file system module
I want to remove the last letter of a text file using file system node module but having problems while doing it.
Please tell me how can i do it
please help me by writing the code, I failed [closed]
Four cards with images will be displayed on the screen. Images must be initially blurred. Above each image there should be a button, when pressed, the image becomes visible and the text appears.
At the very top, a counter with an initial value of two will be displayed, and each time you press the button, the number will decrease by one value, which means you will have only two attempts to press the button and open the image.
After all attempts are over, the next press of the buttons should not open the image
For example:
1.The page should initially look like this and the counter will be 2:(FIRST.PAGE)
3.Once the counter goes to zero, you won’t be able to open the image:
please help me by writing the code, I failed.
Change react component from a browser extension
How can I change text in any react component from a custom browser extension? I know React Devtools browser extension can do it but I need to create my own simple separate browser extension.
I have tried editing html elements using javascript but that messes up the React app as it uses virtual doms. React seems to keep a record of all components internally.
Why is my class instanceof check failing?
To me it seems that the object is an instance of ChatRoom, what am I missing here?
Class:
export class ChatRoom {
public id?: number;
public name_of_chat_room: string;
public chat_creator_user_id: number;
public chat_room_is_active: 0 | 1;
public chat_room_is_shareable: 0 | 1;
public time_of_most_recent_message?: Date | string;
public created_at?: Date | string;
constructor(chatRoom: {
name_of_chat_room: string;
chat_creator_user_id: number;
chat_room_is_active: 0 | 1;
chat_room_is_shareable: 0 | 1;
time_of_most_recent_message?: Date | string;
}) {
Object.assign(this, chatRoom);
}
}
finalResult object that is failing:
{
name_of_chat_room: 'First Posted Chat Room',
chat_creator_user_id: 21,
chat_room_is_active: 1,
chat_room_is_shareable: 1
}
if statement that is not running:
if (finalResult instanceof ChatRoom){
console.log("hooray")
}else{
console.log("foooey")
}
Full code snippet
export class ChatRoom {
public id?: number;
public name_of_chat_room: string;
public chat_creator_user_id: number;
public chat_room_is_active: 0 | 1;
public chat_room_is_shareable: 0 | 1;
public time_of_most_recent_message?: Date | string;
public created_at?: Date | string;
constructor(chatRoom: {
name_of_chat_room: string;
chat_creator_user_id: number;
chat_room_is_active: 0 | 1;
chat_room_is_shareable: 0 | 1;
time_of_most_recent_message?: Date | string;
}) {
Object.assign(this, chatRoom);
}
}
let finalResult = {
name_of_chat_room: 'First Posted Chat Room',
chat_creator_user_id: 21,
chat_room_is_active: 1,
chat_room_is_shareable: 1
}
if (finalResult instanceof ChatRoom){
console.log("hooray")
}else{
console.log("foooey")
}
How to format numbers in a percent pie chart?
Using one of the official demos for a simple pie chart, how can I reformat all percent numbers? Say, I want to have all numbers rounded. I tried anything from putting numberFormat properties on pretty much everything to global root.numberFormatter.set("numberFormat", "#,###"); to no avail. Any hints?
<!-- Styles -->
<style>
#chartdiv {
width: 100%;
height: 500px;
}
</style>
<!-- Resources -->
<script src="https://cdn.amcharts.com/lib/5/index.js"></script>
<script src="https://cdn.amcharts.com/lib/5/percent.js"></script>
<script src="https://cdn.amcharts.com/lib/5/themes/Animated.js"></script>
<!-- Chart code -->
<script>
am5.ready(function() {
// Create root element
// https://www.amcharts.com/docs/v5/getting-started/#Root_element
var root = am5.Root.new("chartdiv");
// Set themes
// https://www.amcharts.com/docs/v5/concepts/themes/
root.setThemes([
am5themes_Animated.new(root)
]);
// Create chart
// https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/
var chart = root.container.children.push(am5percent.PieChart.new(root, {
layout: root.verticalLayout
}));
// Create series
// https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/#Series
var series = chart.series.push(am5percent.PieSeries.new(root, {
valueField: "value",
categoryField: "category"
}));
// Set data
// https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/#Setting_data
series.data.setAll([
{ value: 10, category: "One" },
{ value: 9, category: "Two" },
{ value: 6, category: "Three" },
{ value: 5, category: "Four" },
{ value: 4, category: "Five" },
{ value: 3, category: "Six" },
{ value: 1, category: "Seven" },
]);
// Play initial series animation
// https://www.amcharts.com/docs/v5/concepts/animations/#Animation_of_series
series.appear(1000, 100);
}); // end am5.ready()
</script>
<!-- HTML -->
<div id="chartdiv"></div>Beginner help: How do I make a copy of an object and move it to a random point on screen?
So I am working on a personal web app (using javascript, html, and CSS) that lets me start a timer and as that timer counts down, a tree grows (I know, it’s not original–I just didn’t like any of the current offerings in the app store).
I’ve hit a roadblock in building the following functionality:
- Once the timer reaches 00:00, I want to be able to click the “Add to my garden button” and have the tree that I’ve grown placed at a random point on screen (in my garden). Eventually, I’d like 20+ trees planted on screen.
- I’d then like to be able to start a new timer (by clicking the “Plant a new tree” button). But when I do that, I want the tree(s) that I’ve planted to stay where they are in my garden.
The current issue I’m running into is that the tree that I place at a random place on screen disappears when I click the “Plant a new tree” button.
Your help is both greatly needed and appreciated. Thank you a million in advance.
Below is a piece of my Timer.js file if it helps. Here is the repo in git if you want the see the whole thing.
// Get the elements
// [constants defined here]
// Initialize the timer values --------------------------------------------
// [let......]
// Define a function to start the timer------------------------------------
function startTimer() {
// [To cut down on space, the timer functionality exists here]
// This is the function for my "Add to garden" button.
function addToGarden() {
addToGarden.disabled = true;
count++;
countLabel.textContent = count;
treeConstant.style.left = `${randomX}px`;
treeConstant.style.top = `${randomY}px`;
}
// Attach the startTimer function to the button click event----------------
startButton.addEventListener('click', startTimer);
addButton.addEventListener('click', addToGarden);
How to search in nested array in javascript?
I have a nested array that I need to search in.
this is my array:
var j = {
"status": "OK",
"tasks": [{
"id": 67,
"title": "cardio",
"date": "2023-02-27"
}, {
"id": 67,
"title": "Safety",
"date": "2023-02-27"
}]
};
I need to search in that array based on the ‘date’.
I tried this and this throws an error:
for (let p of j) {
for (let i of p.tasks) {
if (i.date === '2023-02-27') return i;
}
}
the error:
Uncaught TypeError: j is not iterable"
what is the correct way to achieve this?