Blancer.com Tutorials and projects
Freelance Projects, Design and Programming Tutorials
Category Added in a WPeMatico Campaign
I have:
<template id="tmpl">
<li>
<a href="#">Link</a>
</li>
</template>
const tmpl = document.getElementById("tmpl");
const cloned = tmpl.content.cloneNode(true); // doesn't work
tmpl.content doesn’t work if the first element is a li element.
Problem:
I cannot clone the template child like ie:tmpl.content.cloneNode(true)
Expectation:
const cloned = tmpl.content.cloneNode(true)
returns
<li>
<a href="#">Link</a>
</li>
Why is this happening?
Cannot destructure property ‘client’ of ‘db.config.connection’ as it is undefined..can anyone show me where i got wrong..thanks…
config/database.ts
import path from 'path';
import { fileURLToPath } from 'url';
// Derive __filename and __dirname
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
import { DatabaseConfig } from '../src/types/strapi';
export default ({ env }: { env: (key: string, defaultValue?: any) => any }): DatabaseConfig => {
// Resolve the filename with environment variable or default value
const filename = path.join(
__dirname,
'..',
'..',
env('DATABASE_FILENAME', path.join('.tmp', 'data.db'))
);
// Debugging output
console.log('Resolved Filename Path:', filename);
console.log('DATABASE_CLIENT:', env('DATABASE_CLIENT', 'sqlite'));
// Database configuration
const config: DatabaseConfig = {
connection: {
client: env('DATABASE_CLIENT', 'sqlite'),
connection: {
filename: filename,
},
useNullAsDefault: true,
},
};
// Return the configuration object
return config;
};
src/types/strapi.d.ts
export interface DatabaseConfig {
connection: {
client: string;
connection: {
filename?: string;
host?: string;
port?: number;
database?: string;
user?: string;
password?: string;
};
useNullAsDefault?: boolean;
};
}
tscongfig.json
{
"extends": "@strapi/typescript-utils/tsconfigs/server",
"compilerOptions": {
"typeRoots": ["./node_modules/@types", "./src/types"],
"target": "ES2021",
"module": "node16",
"moduleResolution": "Node16",
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"rootDir": "./src",
"outDir": "./build",
"skipLibCheck": true,
"strict": false,
"allowJs": true,
"checkJs": false,
"resolveJsonModule": true ,
"types":["node"] // Allow importing JSON modules
},
"include": ["src/**/*.ts"], // Include all .ts files in src
"exclude": ["node_modules", "build", ".cache", ".tmp"]
}
.env file
DATABASE_CLIENT=sqlite
DATABASE_FILENAME=.tmp/data.db
package.json
{
"name": "strapi-backend",
"private": true,
"version": "0.1.0",
"description": "A Strapi application",
"scripts": {
"build": "tsc && strapi build",
"develop": "tsc && strapi develop",
"start": "strapi start"
},
"devDependencies": {
"@types/koa": "^2.15.0",
"@types/node": "^22.5.5",
"strapi-to-typescript": "^2.0.15",
"typescript": "^5.6.2"
},
"dependencies": {
"@strapi/plugin-cloud": "4.25.11",
"@strapi/plugin-i18n": "4.25.11",
"@strapi/plugin-users-permissions": "4.25.11",
"@strapi/strapi": "4.25.11",
"better-sqlite3": "8.6.0",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-router-dom": "^5.3.4",
"sqlite3": "^5.1.7",
"styled-components": "^5.3.11"
},
"author": {
"name": "A Strapi developer"
},
"strapi": {
"uuid": "1165bdd3-f9da-4cad-88bb-00136497d786"
},
"engines": {
"node": ">=18.0.0 <=20.x.x",
"npm": ">=6.0.0"
},
"license": "MIT"
}
i am developing a strapi application..can anyone show where i got wrong
TypeError: Cannot destructure property ‘client’ of ‘db.config.connection’ as it is undefined.
I’m working on a web project where I want to create a video player similar to YouTube Shorts. The idea is to have a series of videos that change automatically when the user scrolls past the current one. I’ve set up the basic HTML, CSS, and JavaScript, but I’m having trouble getting the videos to change correctly on scroll.
Here’s what I have so far:
console.log("Scroller");
// Get all video player elements
const videoPlayers = document.querySelectorAll('.video-player');
// Initialize a flag to indicate whether the user has interacted with the document
let userHasInteracted = false;
// Add an event listener to each video player to listen for user interaction
videoPlayers.forEach(videoPlayer => {
videoPlayer.addEventListener('click', () => {
// Set the flag to indicate that the user has interacted with the document
userHasInteracted = true;
// If the video is paused, play it
if (videoPlayer.paused) {
videoPlayer.play();
}
});
});
// Add an event listener to the container to detect scroll
const container = document.querySelector('.container');
container.addEventListener('scroll', () => {
videoPlayers.forEach((videoPlayer, index) => {
const videoOffset = videoPlayer.offsetTop;
const videoHeight = videoPlayer.offsetHeight;
const scrollPosition = container.scrollTop;
// Check if the video is in view
if (scrollPosition >= videoOffset && scrollPosition < videoOffset + videoHeight) {
// Play the video if the user has interacted
if (userHasInteracted && videoPlayer.paused) {
videoPlayer.play();
}
} else {
// Pause the video if it's out of view
videoPlayer.pause();
}
});
});/* Global Styles */
body, html {
margin: 0;
padding: 0;
overflow-x: hidden;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
height: 100vh;
/* width: 30vh; */
overflow-y: scroll;
scroll-snap-type: y mandatory; /* Enable snap scrolling */
}
.video-container {
width: 100%;
height: 100vh; /* Full viewport height */
scroll-snap-align: start; /* Snap to start of each video */
position: relative;
}
video {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Follow Button */
.follow-button {
position: absolute;
top: 10px;
right: 10px;
padding: 8px 12px;
background-color: #ff0000;
color: white;
border: none;
border-radius: 20px;
cursor: pointer;
font-size: 14px;
transition: background-color 0.3s ease;
}
.follow-button:hover {
background-color: #cc0000;
}
/* Actions Section: Buttons on the right side of the video */
.actions {
position: absolute;
right: 10px;
top: 20%;
display: flex;
flex-direction: column;
align-items: center;
}
.action-button {
margin: 10px 0;
color: white;
text-align: center;
cursor: pointer;
padding: 10px;
background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
border-radius: 50%;
width: 50px;
height: 50px;
opacity: 0.8; /* Transparency effect */
transition: opacity 0.3s ease;
}
.action-button:hover {
opacity: 1;
}
/* Ensure icons are centered within the buttons */
.action-button span {
display: block;
}
/* Responsive Media Queries */
@media (max-width: 768px) {
.actions {
right: 5px;
top: 15%;
}
}
@media (max-width: 480px) {
.video-container {
max-width: 100%;
}
.actions {
position: static;
flex-direction: row;
width: 100%;
justify-content: space-evenly;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Shorts Design</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<!-- Video Sections -->
<div class="video-container">
<video class="video-player" src="videos/video1.mp4" controls></video>
<button class="follow-button">Follow</button>
<div class="actions">
<div class="action-button like">
<span><i class="fa-regular fa-heart"></i></span>
<span>452</span>
</div>
<div class="action-button comment">
<span><i class="fa-regular fa-comment"></i></span>
<span>6</span>
</div>
<div class="action-button share">
<span><i class="fa-solid fa-share"></i></span>
<span>Share</span>
</div>
</div>
</div>
<div class="video-container">
<video class="video-player" src="videos/video2.mp4" controls></video>
<button class="follow-button">Follow</button>
<div class="actions">
<div class="action-button like">
<span><i class="fa-regular fa-heart"></i></span>
<span>452</span>
</div>
<div class="action-button comment">
<span><i class="fa-regular fa-comment"></i></span>
<span>6</span>
</div>
<div class="action-button share">
<span><i class="fa-solid fa-share"></i></span>
<span>Share</span>
</div>
</div>
</div>
<div class="video-container">
<video class="video-player" src="videos/video3.mp4" controls></video>
<button class="follow-button">Follow</button>
<div class="actions">
<div class="action-button like">
<span><i class="fa-regular fa-heart"></i></span>
<span>452</span>
</div>
<div class="action-button comment">
<span><i class="fa-regular fa-comment"></i></span>
<span>6</span>
</div>
<div class="action-button share">
<span><i class="fa-solid fa-share"></i></span>
<span>Share</span>
</div>
</div>
</div>
<!-- Add more video containers as needed -->
</div>
<script src="scripts.js"></script>
</body>
</html>Problem:
The video player currently covers the whole webpage, and I want it to look more like YouTube Shorts, where the video player is centered and doesn’t take up the entire screen. Additionally, the videos should change automatically when the user scrolls past the current one.
Question:
How can I adjust my code to achieve this effect? Any help or suggestions would be greatly appreciated!
My team is building an API with Node.js that processes large JSON files (up to 500MB). We tried parsing these files using JSON.parse, but the application runs out of memory, then crashes.
currently using the following code
const fs = require('fs');
fs.readFile('largeFile.json', 'utf8', (err, data) => {
if (err) throw err;
const jsonData = JSON.parse(data);
// Processing the JSON data here...
});
I have read about possible memory issues with large files in Node.js. How can I efficiently handle and process large JSON data without consuming too much memory? Are there any best practices or libraries that can help?
Hey guys I try to print a bootstrap modal which contains an iframe pointing to a local pdf file. The modal itself looks fine.
Problem is I want to print the modal with my own button (not the one in the pdf dialog, this works great).
<button onclick="window.print()">print page!<button />
If I do that, the pdf is cut off. This seems to happen only with pdf, not f.i. images.
When I change the Welcome message Type select input’s option it doesn’t throw any error when I change the choose the first option but as soon as i select the second option it throws error (if I chose “Text” option first it will work but throw error when I will choose “Audio” option same goes for vice versa like if chose Audio it would work but will throw error once I choose Text)
index.j
import React, { useEffect, useState } from "react";
import {
Button,
Card,
CardBody,
CardHeader,
Col,
Container,
Row,
} from "reactstrap";
import BreadCrumb from "../../Components/Common/BreadCrumb";
import { Link } from "react-router-dom";
import AddCampaignModal from "./AddCampaignModal";
import { useFormik } from "formik";
import * as Yup from "yup";
import CampaignRemoveModal from "./CampaignRemoveModal";
import {
getCampaigns,
createCampaign,
updateCampaign,
removeCampaign,
} from "../../slices/Campaigns/thunk";
import { useDispatch } from "react-redux";
import { useSelector } from "react-redux";
import { ToastContainer } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";
import { getGateway } from "../../slices/Gateway/thunk";
import Loader from "../../Components/Common/Loader";
const Campaigns = () => {
const [modal_list, setmodal_list] = useState(false);
const [modal_delete, setmodal_delete] = useState(false);
const [loading, setLoading] = useState(false);
const [isEditingCampaign, setIsEditingCampaign] = useState(false);
const [listCampaignId, setListCampaignId] = useState(null);
const [welcomeMessageAudio, setWelcomeMessageAudio] = useState("");
const [invalidMessageAudio, setInvalidMessageAudio] = useState(null);
const [timeOutMessageAudio, setTimeOutMessageAudio] = useState(null);
const [selectSingleWelcomeTextOrAudio, setSelectSingleWelcomeTextOrAudio] =
useState(null);
const [selectSingleInvalidTextOrAudio, setSelectSingleInvalidTextOrAudio] =
useState(null);
const [selectSingleTimeOutTextOrAudio, setSelectSingleTimeOutTextOrAudio] =
useState(null);
const [selectedSingleGateway, setSelectedSingleGateway] = useState(null);
const dispatch = useDispatch();
const { campaigns, alreadyRegisteredError } = useSelector(
(state) => state.Campaigns
);
const { gateways } = useSelector((state) => state.Gateways);
function tog_list() {
setmodal_list(!modal_list);
}
function tog_delete() {
setmodal_delete(!modal_delete);
}
useEffect(() => {
if (alreadyRegisteredError) {
setmodal_list(!modal_list);
}
}, [alreadyRegisteredError]);
useEffect(() => {
setLoading(true);
dispatch(getCampaigns()).finally(() => {
setLoading(false);
});
dispatch(getGateway());
}, [dispatch]);
const welcomeMessageTextOrAudioOptions = [
{ label: "Text", value: "Text" },
{ label: "Audio", value: "Audio" },
];
function handleSelectSingleWelcomeMessageTextOrAudio(welcomeMessageType) {
setSelectSingleWelcomeTextOrAudio(welcomeMessageType);
}
const invalidMessageTextOrAudioOptions = [
{ label: "Text", value: "Text" },
{ label: "Audio", value: "Audio" },
];
function handleSelectSingleInvalidMessageTextOrAudio(invalidMessageType) {
setSelectSingleInvalidTextOrAudio(invalidMessageType || null);
}
const timeOutMessageTextOrAudioOptions = [
{ label: "Text", value: "Text" },
{ label: "Audio", value: "Audio" },
];
function handleSelectSingleTimeOutMessageTextOrAudio(timeOutMessageType) {
setSelectSingleTimeOutTextOrAudio(timeOutMessageType);
}
const gatewayOptions = gateways?.map((gateway) => {
return {
id: gateway.id,
value: gateway.gatewayIpAddress,
label: gateway.gatewayIpAddress,
};
});
function handleSelectSingleGateway(gateway) {
setSelectedSingleGateway(gateway);
}
const validation = useFormik({
initialValues: {
campaignName: "",
gatewayId: "",
welcomeMessageText: "",
InvalidMessageText: "",
timeOutMessageText: "",
},
validationSchema: Yup.object({
campaignName: Yup.string().required("Please enter campaign name"),
gatewayId: Yup.string().required("Gateway is required"),
welcomeMessageText: Yup.string(),
invalidMessageText: Yup.string(),
timeOutMessageText: Yup.string(),
}),
onSubmit: (values, { resetForm }) => {
if (isEditingCampaign) {
dispatch(
updateCampaign({
...values,
campaignId: listCampaignId,
welcomeMessageAudio,
invalidMessageAudio,
timeOutMessageAudio,
gatewayId: selectedSingleGateway.id,
})
);
} else {
dispatch(
createCampaign({
...values,
welcomeMessageAudio,
invalidMessageAudio,
timeOutMessageAudio,
gatewayId: selectedSingleGateway.id,
})
);
}
// if (!isEditingCampaign) {
// resetForm();
// }
resetForm();
setSelectedSingleGateway(null);
setSelectSingleInvalidTextOrAudio(null);
setSelectSingleTimeOutTextOrAudio(null);
setSelectSingleWelcomeTextOrAudio(null);
setmodal_list(false);
},
});
console.log("VALIDATION VALUES ->", validation.values);
function formHandleSubmit(e) {
e.preventDefault();
validation.handleSubmit();
if (!validation.errors) {
setmodal_list(false);
}
return false;
}
function handleEditCampaign(campaignData) {
setIsEditingCampaign(true);
setmodal_list(!modal_list);
setListCampaignId(campaignData.id);
const selectedGateway = gatewayOptions?.find(
(gateway) => (gateway.id = campaignData.gatewayId)
);
if (campaignData.welcomeMessageText) {
const selectedOption = welcomeMessageTextOrAudioOptions.find(
(option) => option.value === "Text"
);
console.log("SELECTED WELCOME MESSAGE TYPE ->", selectedOption);
setSelectSingleWelcomeTextOrAudio(selectedOption);
} else {
validation.setFieldValue("welcomeMessageText", ""); // Ensure welcomeMessageText is cleared
}
if (campaignData.invalidMessageText) {
const selectedOption = invalidMessageTextOrAudioOptions.find(
(option) => option.value === "Text"
);
setSelectSingleInvalidTextOrAudio(selectedOption);
}
if (campaignData.timeOutMessageText) {
const selectedOption = timeOutMessageTextOrAudioOptions.find(
(option) => option.value === "Text"
);
setSelectSingleTimeOutTextOrAudio(selectedOption);
}
setSelectedSingleGateway(selectedGateway);
validation.setValues({
campaignName: campaignData.campaignName,
welcomeMessageText: campaignData.welcomeMessageText,
invalidMessageText: campaignData.invalidMessageText,
timeOutMessageText: campaignData.timeOutMessageText,
gatewayId: campaignData.gatewayId,
});
}
function tog_list() {
validation.resetForm();
setSelectedSingleGateway(null);
setSelectSingleInvalidTextOrAudio(null);
setSelectSingleTimeOutTextOrAudio(null);
setSelectSingleWelcomeTextOrAudio(null);
setmodal_list(!modal_list);
}
document.title = "Campaigns";
return (
<React.Fragment>
<div className="page-content">
<Container fluid>
<BreadCrumb title="Campaigns" pageTitle="Management" />
<Row>
<Col lg={12}>
<Card>
<CardHeader>
<h4 className="card-title mb-0">Create a Campaign</h4>
</CardHeader>
<CardBody>
<div className="listjs-table" id="userList">
<Row className="g-4 mb-3">
<Col className="col-sm-auto w-100 d-flex justify-content-between">
<Button
color="primary"
className="add-btn me-1"
onClick={tog_list}
id="create-btn"
>
<i className="ri-add-line align-bottom me-1"></i> Add
Campaign
</Button>
</Col>
</Row>
<div className="table-responsive table-card mt-3 mb-1">
<table
className="table align-middle table-nowrap"
id="userTable"
>
<thead className="table-light">
<tr>
<th>S.No</th>
<th>Campaign Name</th>
<th>Welcome Text</th>
<th>Invalid Text</th>
<th>TimeOut Text</th>
<th>Action</th>
</tr>
</thead>
<tbody className="list form-check-all">
{loading ? (
<tr>
<td
colSpan={7}
style={{
border: "none",
textAlign: "center",
verticalAlign: "middle",
}}
>
<Loader />
</td>
</tr>
) : (
<>
{campaigns?.map((campaign, idx) => (
<tr key={campaign.id}>
<td>{idx + 1}</td>
<td>{campaign.campaignName}</td>
<td>{campaign.welcomeMessageText}</td>
<td>{campaign.invalidMessageText}</td>
<td>{campaign.timeOutMessageText}</td>
<td>
<div className="d-flex gap-2">
<div className="edit">
<button
className="btn btn-sm btn-primary edit-item-btn"
data-bs-toggle="modal"
data-bs-target="#showModal"
onClick={() => {
handleEditCampaign(campaign);
}}
>
Edit
</button>
</div>
<div className="remove">
<button
className="btn btn-sm btn-danger edit-item-btn"
data-bs-toggle="modal"
data-bs-target="#showModal"
onClick={() => {
setListCampaignId(campaign.id);
tog_delete();
}}
>
Remove
</button>
</div>
</div>
</td>
</tr>
))}
</>
)}
</tbody>
</table>
</div>
<div className="d-flex justify-content-end">
<div className="pagination-wrap hstack gap-2">
<Link
className="page-item pagination-prev disabled"
to="#"
>
Previous
</Link>
<ul className="pagination listjs-pagination mb-0"></ul>
<Link className="page-item pagination-next" to="#">
Next
</Link>
</div>
</div>
</div>
</CardBody>
</Card>
</Col>
</Row>
</Container>
</div>
<ToastContainer />
<AddCampaignModal
validation={validation}
isEditingCampaign={isEditingCampaign}
modal_list={modal_list}
tog_list={tog_list}
formHandleSubmit={formHandleSubmit}
alreadyRegisteredError={alreadyRegisteredError}
welcomeMessageAudio={welcomeMessageAudio}
setWelcomeMessageAudio={setWelcomeMessageAudio}
invalidMessageAudio={invalidMessageAudio}
setInvalidMessageAudio={setInvalidMessageAudio}
timeOutMessageAudio={timeOutMessageAudio}
setTimeOutMessageAudio={setTimeOutMessageAudio}
welcomeMessageTextOrAudioOptions={welcomeMessageTextOrAudioOptions}
selectSingleWelcomeTextOrAudio={selectSingleWelcomeTextOrAudio}
handleSelectSingleWelcomeMessageTextOrAudio={
handleSelectSingleWelcomeMessageTextOrAudio
}
invalidMessageTextOrAudioOptions={invalidMessageTextOrAudioOptions}
selectSingleInvalidTextOrAudio={selectSingleInvalidTextOrAudio}
handleSelectSingleInvalidMessageTextOrAudio={
handleSelectSingleInvalidMessageTextOrAudio
}
selectSingleTimeOutTextOrAudio={selectSingleTimeOutTextOrAudio}
timeOutMessageTextOrAudioOptions={timeOutMessageTextOrAudioOptions}
handleSelectSingleTimeOutMessageTextOrAudio={
handleSelectSingleTimeOutMessageTextOrAudio
}
gatewayOptions={gatewayOptions}
handleSelectSingleGateway={handleSelectSingleGateway}
selectedSingleGateway={selectedSingleGateway}
/>
<CampaignRemoveModal
modal_delete={modal_delete}
setmodal_delete={setmodal_delete}
tog_delete={tog_delete}
handleDeleteCampaign={() => {
dispatch(removeCampaign(listCampaignId));
setmodal_delete(false);
}}
/>
</React.Fragment>
);
};
export default Campaigns;
AddCampaignModal.js
import {
Alert,
Input,
Label,
Form,
FormFeedback,
Modal,
ModalBody,
ModalHeader,
Row,
Col,
} from "reactstrap";
import "react-toastify/dist/ReactToastify.css";
import Select from "react-select";
function AddCampaignModal({
modal_list,
tog_list,
formHandleSubmit,
validation,
isEditingCampaign,
alreadyRegisteredError,
welcomeMessageAudio,
setWelcomeMessageAudio,
invalidMessageAudio,
setInvalidMessageAudio,
timeOutMessageAudio,
setTimeOutMessageAudio,
welcomeMessageTextOrAudioOptions,
selectSingleWelcomeTextOrAudio,
handleSelectSingleWelcomeMessageTextOrAudio,
invalidMessageTextOrAudioOptions,
selectSingleInvalidTextOrAudio,
handleSelectSingleInvalidMessageTextOrAudio,
selectSingleTimeOutTextOrAudio,
timeOutMessageTextOrAudioOptions,
handleSelectSingleTimeOutMessageTextOrAudio,
selectedSingleGateway,
handleSelectSingleGateway,
gatewayOptions,
}) {
return (
<Modal
isOpen={modal_list}
toggle={() => {
tog_list();
}}
centered
className="modal-lg"
>
<ModalHeader
className="bg-light p-3"
toggle={() => {
tog_list();
}}
>
{isEditingCampaign ? "Update Campaign" : "Add Campaign"}
</ModalHeader>
<Form className="tablelist-form" onSubmit={(e) => formHandleSubmit(e)}>
<ModalBody style={{ paddingTop: "0px" }}>
{alreadyRegisteredError && (
<Alert color="danger" style={{ marginBlock: "10px" }}>
{alreadyRegisteredError}
</Alert>
)}
<Row>
<Col md={6}>
<div className="mb-2">
<Label htmlFor="campaignName" className="form-label">
Campaign Name
</Label>
<Input
id="campaignName"
name="campaignName"
className="form-control"
placeholder="Enter Campaign Name"
type="text"
onChange={validation.handleChange}
onBlur={validation.handleBlur}
value={validation.values.campaignName || ""}
invalid={
validation.touched.campaignName &&
validation.errors.campaignName
? true
: false
}
/>
{validation.touched.campaignName &&
validation.errors.campaignName ? (
<FormFeedback type="invalid">
{validation.errors.campaignName}
</FormFeedback>
) : null}
</div>
</Col>
<Col md={6}>
<div className="mb-2">
<Label htmlFor="gatewayId" className="form-label">
Gateways
</Label>
<Select
id="gatewayId"
name="gatewayId"
value={selectedSingleGateway}
onChange={(gateway) => {
handleSelectSingleGateway(gateway);
validation.setFieldValue("gatewayId", gateway.id);
}}
gateway
options={gatewayOptions}
placeholder="Select Gateway"
styles={{
control: (provided, state) => ({
...provided,
borderColor: state.isFocused ? "#a8d9f3" : "#ced4da",
"&:hover": {
borderColor: "#ced4da",
},
}),
}}
/>
</div>
</Col>
<Col md={6}>
<div className="mb-2">
<Label
htmlFor="welcomeMessageTextOrAudioSelect"
className="form-label"
>
Welcome Message Type
</Label>
<Select
id="welcomeMessageTextOrAudioSelect"
name="welcomeMessageTextOrAudioSelect"
value={selectSingleWelcomeTextOrAudio || ""}
onChange={(messageOrAudio) => {
handleSelectSingleWelcomeMessageTextOrAudio(messageOrAudio);
}}
options={welcomeMessageTextOrAudioOptions}
placeholder="Select Welcome Message Type"
styles={{
control: (provided, state) => ({
...provided,
borderColor: state.isFocused ? "#a8d9f3" : "#ced4da",
"&:hover": {
borderColor: "#ced4da",
},
}),
}}
/>
</div>
</Col>
{selectSingleWelcomeTextOrAudio?.value === "Text" ? (
<Col md={6}>
<div className="mb-2">
<Label htmlFor="welcomeMessageText" className="form-label">
Welcome Message Text
</Label>
<Input
id="welcomeMessageText"
name="welcomeMessageText"
className="form-control"
placeholder="Enter Welcome Text"
type="text"
onChange={validation.handleChange}
onBlur={validation.handleBlur}
value={validation.values.welcomeMessageText || ""}
invalid={
validation.touched.welcomeMessageText &&
validation.errors.welcomeMessageText
? true
: false
}
/>
{validation.touched.welcomeMessageText &&
validation.errors.welcomeMessageText ? (
<FormFeedback type="invalid">
{validation.errors.welcomeMessageText}
</FormFeedback>
) : null}
</div>
</Col>
) : selectSingleWelcomeTextOrAudio?.value === "Audio" ? (
<Col lg={6}>
<div>
<Label htmlFor="formFile" className="form-label">
Welcome Message Audio
</Label>
<Input
id="welcomeMessageAudio"
name="welcomeMessageAudio"
className="form-control"
type="file"
onChange={(e) => setWelcomeMessageAudio(e.target.files[0])}
/>
</div>
</Col>
) : (
<Col lg={6}></Col>
)}
<Col md={6}>
<div className="mb-2">
<Label htmlFor="invalidMessageText" className="form-label">
Invalid Message Type
</Label>
<Select
id="invalidMessageTextOrAudioSelect"
name="invalidMessageTextOrAudioSelect"
value={selectSingleInvalidTextOrAudio}
onChange={(messageOrAudio) => {
handleSelectSingleInvalidMessageTextOrAudio(messageOrAudio);
}}
options={invalidMessageTextOrAudioOptions}
placeholder="Select Welcome Message Type"
styles={{
control: (provided, state) => ({
...provided,
borderColor: state.isFocused ? "#a8d9f3" : "#ced4da",
"&:hover": {
borderColor: "#ced4da",
},
}),
}}
/>
</div>
</Col>
{selectSingleInvalidTextOrAudio?.value === "Text" ? (
<Col md={6}>
<div className="mb-2">
<Label htmlFor="welcomeMessageText" className="form-label">
Invalid Message Text
</Label>
<Input
id="invalidMessageText"
name="invalidMessageText"
className="form-control"
placeholder="Enter Invalid Text"
type="text"
onChange={validation.handleChange}
onBlur={validation.handleBlur}
value={validation.values.invalidMessageText || ""}
invalid={
validation.touched.invalidMessageText &&
validation.errors.invalidMessageText
? true
: false
}
/>
{validation.touched.invalidMessageText &&
validation.errors.invalidMessageText ? (
<FormFeedback type="invalid">
{validation.errors.invalidMessageText}
</FormFeedback>
) : null}
</div>
</Col>
) : selectSingleInvalidTextOrAudio?.value === "Audio" ? (
<Col lg={6}>
<div>
<Label htmlFor="formFile" className="form-label">
Invalid Message Audio
</Label>
<Input
id="invalidMessageAudio"
name="invalidMessageAudio"
className="form-control"
type="file"
onChange={(e) => setInvalidMessageAudio(e.target.files[0])}
/>
</div>
</Col>
) : (
<Col lg={6}></Col>
)}
<Col md={6}>
<div className="mb-2">
<Label
htmlFor="timeOutMessageTextOrAudioSelect"
className="form-label"
>
TimeOut Message Type
</Label>
<Select
id="timeOutMessageTextOrAudioSelect"
name="timeOutMessageTextOrAudioSelect"
value={selectSingleTimeOutTextOrAudio}
onChange={(messageOrAudio) => {
handleSelectSingleTimeOutMessageTextOrAudio(messageOrAudio);
}}
options={timeOutMessageTextOrAudioOptions}
placeholder="Select Time Out Message Type"
styles={{
control: (provided, state) => ({
...provided,
borderColor: state.isFocused ? "#a8d9f3" : "#ced4da",
"&:hover": {
borderColor: "#ced4da",
},
}),
}}
/>
</div>
</Col>
{selectSingleTimeOutTextOrAudio?.value === "Text" ? (
<Col md={6}>
<div className="mb-2">
<Label htmlFor="timeOutMessageText" className="form-label">
TimeOut Message Text
</Label>
<Input
id="timeOutMessageText"
name="timeOutMessageText"
className="form-control"
placeholder="Enter TimeOut Text"
type="text"
onChange={validation.handleChange}
onBlur={validation.handleBlur}
value={validation.values.timeOutMessageText || ""}
invalid={
validation.touched.timeOutMessageText &&
validation.errors.timeOutMessageText
? true
: false
}
/>
</div>
</Col>
) : selectSingleTimeOutTextOrAudio?.value === "Audio" ? (
<Col lg={6}>
<div>
<Label htmlFor="formFile" className="form-label">
TimeOut Message Audio
</Label>
<Input
id="timeOutMessageAudio"
name="timeOutMessageAudio"
className="form-control"
type="file"
onChange={(e) => setTimeOutMessageAudio(e.target.files[0])}
/>
</div>
</Col>
) : (
<Col lg={6}></Col>
)}
</Row>
<div className="text-end">
<button type="submit" className="btn btn-primary">
{isEditingCampaign ? "Update Campaign" : "Save Campaign"}
</button>
</div>
</ModalBody>
</Form>
</Modal>
);
}
export default AddCampaignModal;
I want to add a search button that when I click it, it can show a search box that user can type something in that search box, and system will find if there is a word similar to my locationName. The function work in chrome, but safari can’t. Please help me solve the problem, thanks.
HTML:
<div id="search-container" class="custom-search">
<button id="search-icon" class="btn btn-link" aria-label="搜索">
<i class="bi bi-search"></i>
</button>
<div id="search-box" style="display: none;">
<div class="input-group">
<input type="text" id="search-input" class="form-control custom-input" placeholder="輸入店名...">
<button id="search-submit" class="btn btn-outline-secondary custom-button" type="button">Search</button>
</div>
</div>
</div>
CSS:
#search-container {
position: fixed;
top: 10px;
right: 10px;
z-index: 1000;
color:#171717;
}
#search-icon {
background: none;
border: none;
font-size: 24px;
color: #fff; /* 白色圖標 */
text-shadow: 1px 1px 3px rgba(0,0,0,0.5); /*添加陰影以增加可見度 */
}
#search-box {
position: absolute;
top: 100%;
right: 0;
padding: 10px;
border-radius: 5px;
width: 250px; /* 調整搜索框寬度 */
}
#search-input {
background-color: #333; /* 深色背景 */
color: #fff; /* 白色文字 */
border: 1px solid #555;
}
#search-input::placeholder {
color: #aaa; /* 淺灰色佔位符文字 */
}
#search-submit {
background-color: #555; /* 深灰色按鈕背景 */
color: #fff; /* 白色按鈕文字 */
border: 1px solid #777;
}
#search-submit:hover {
background-color: #666; /* 懸停時稍微亮一點 */
}
.custom-search .custom-input {
background-color: #333;
color: #fff;
border: 1px solid #555;
}
.custom-search .custom-input::placeholder {
color: #aaa;
}
.custom-search .custom-button {
background-color: #555;
color: #fff;
border: 1px solid #777;
}
.custom-search .custom-button:hover {
background-color: #666;
}
javascript:
// 搜尋店名按鈕
document.addEventListener('DOMContentLoaded', function() {
const searchContainer = document.getElementById('search-container');
const searchIcon = document.getElementById('search-icon');
const searchBox = document.getElementById('search-box');
const searchInput = document.getElementById('search-input');
const searchSubmit = document.getElementById('search-submit');
searchBox.style.display = 'none'; // 确保初始时隐藏
console.log('DOM加载完成，搜索元素:', {
searchContainer: !!searchContainer,
searchIcon: !!searchIcon,
searchBox: !!searchBox,
searchInput: !!searchInput,
searchSubmit: !!searchSubmit
});
if (!searchContainer || !searchIcon || !searchBox || !searchInput || !searchSubmit) {
console.error('无法找到搜索相关的DOM元素');
return;
}
// 修改搜索图标点击事件
searchIcon.addEventListener('click', function(event) {
event.stopPropagation(); // 阻止事件冒泡
console.log('搜索图标被点击');
searchBox.style.display = searchBox.style.display === 'none' ? 'block' : 'none';
console.log('搜索框显示状态:', searchBox.style.display);
});
// 修改搜索提交按钮点击事件
searchSubmit.addEventListener('click', function(event) {
event.preventDefault(); // 阻止默认行为
event.stopPropagation(); // 阻止事件冒泡
console.log('搜索提交按钮被点击');
performSearch();
});
searchInput.addEventListener('keydown', function(e) {
if (e.key === 'Enter') {
e.preventDefault(); // 阻止默认行为
console.log('在搜索输入框中按下Enter键');
performSearch();
}
});
// 添加点击文档其他地方关闭搜索框的功能
document.addEventListener('click', function(event) {
console.log('点击事件触发，目标元素:', event.target);
if (!searchContainer.contains(event.target)) {
console.log('点击了搜索容器外部，关闭搜索框');
searchBox.style.display = 'none';
}
});
function performSearch() {
console.log('执行搜索');
const searchTerm = searchInput.value.toLowerCase().trim();
console.log('搜索词:', searchTerm);
const foundIndex = markers.findIndex(function(marker) {
return marker.locationName.toLowerCase().includes(searchTerm);
});
if (foundIndex !== -1) {
console.log('找到匹配的位置:', markers[foundIndex].locationName);
openModal(foundIndex);
searchBox.style.display = 'none';
searchInput.value = '';
} else {
console.log('找不到匹配的位置');
alert('找不到符合的店名');
}
}
});
I tried add console.log in my searchIcon.addEventListener(‘click’, function(event) , but it doesn’t work in safari. Even though I click the bottom, it doesn’t show any information.
I need to transmit a message from website A to website B but there are conditions:
I tried using extensions and it’s very effective. But I forgot that it doesn’t work on mobile. I have thought of many ways but no results.
i want to display data from Supabase to my Website i want it that everytime you click the upload button it selects a random row from my Database and displays the infomation on the Website.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Team Page</title>
</head>
<script>
import { createClient } from "../utils/supabaseClient";
// Create a single supabase client for interacting with your database
const supabase = createClient('Your Supabase Website', 'Your Supabase Key')
const { data, error } = await supabase
.from('events')
.select()
</script>
<style>
.background{
background-color: #1b1b1b;
}
.id-text{
color: #3e3e3e;
font-family: 'Outfit', sans-serif;
margin-top: 30px;
margin-left: 30px;
}
.foto{
margin-left: 30px;
}
.label{
font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
color: white;
font-size: 40px;
font-weight: bolder;
vertical-align: top;
}
.beschreibung{
color: white;
font-family: 'Outfit', sans-serif;
word-wrap: break-word;
width: 400px;
}
.div-margin-top{
margin-top: 30px;
}
.div-margin-left{
margin-left: 30px;
}
.div-margin-bottom{
margin-bottom: 30px;
}
.float-left{
float: left;
}
.float-right{
float: right;
}
.float-center{
float: inline-start;
}
.myButton-green {
background-color:#44c767;
border-radius:23px;
border:1px solid #18ab29;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:20px;
padding:16px 31px;
text-decoration:none;
}
.myButton-green:hover {
background-color:#5cbf2a;
}
.myButton-green:active {
position:relative;
top:1px;
}
.myButton-red {
background-color:#ff0000;
border-radius:28px;
border:1px solid #ab1919;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:17px;
padding:16px 31px;
text-decoration:none;
}
.myButton-red:hover {
background-color:#c90000;
}
.myButton-red:active {
position:relative;
top:1px;
}
</style>
<body class="background">
<div class="id-text">
<a>id:0</a>
</div>
<div class="div-margin-top float-right">
<img class="foto" src="image url here">
</div>
<div class="div-margin-left">
<label class="label">Trödelmarkt Äppelallee</label>
</div>
<div class="beschreibung div-margin-left">
<a>Das ist eine Beschreibung zum Trödelmarkt TestTestTestTest TestTestTestTestTestTestTestTestTestTestTest TestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTest</a>
</div>
<div class="beschreibung div-margin-left div-margin-top float-left">
<a>Event Day: 21.08.2024 - 21.08.2024</a>
</div>
<div class="beschreibung div-margin-left div-margin-top float-center">
<a>Event Time: 08:00 Uhr - 16:00 Uhr</a>
</div>
<div class="beschreibung div-margin-left div-margin-top float-left">
<a>Event Location: Äppelallee Center</a>
</div>
<div class="beschreibung div-margin-left div-margin-top float-center">
<a>Event City: Wiesbaden</a>
</div>
<div class="beschreibung div-margin-left div-margin-top float-left">
<a>Event Kategorie: Verkauf</a>
</div>
<div class="beschreibung div-margin-left div-margin-top float-center">
<a>Event Priority: Hoch</a>
</div>
<div class="beschreibung div-margin-left div-margin-top float-left">
<a>Event Veranstalter: Wiesbaden Bürgerbüro</a>
</div>
<div class="beschreibung div-margin-left div-margin-top float-center">
<a>Event Url: https://www.wiesbaden.de/</a>
</div>
<div class="beschreibung div-margin-left div-margin-top float-center">
<a>Weitere Infos: Joa, sonst nichts</a>
</div>
<div class="beschreibung div-margin-left div-margin-top float-left">
<a>Event Status: in Progress</a>
</div>
<div class="div-margin-top float-left">
<button onclick="fetchData()" class="myButton-green">Upload</button>
</div>
<div class="div-margin-top float-right">
<button class="myButton-red">Delete</button>
</div>
</body>
</html>
I already read through the Docs from Supabase but doesn’t really help me and excuse my english, english isn’t my Home Language. And btw the Text in the Divs are just Temporary there it should be the things from the database.
Thx
I know how to debug JS code, that is present on the bage when you load it. Now I would like to apply changes to the page and I need to debug a big chunk of JS code that I paste into console.
I tried to add debugger and run the snipped. It didn’t work out. Also I can not find anything that is my code related in the debugger tab of DevTools.
Is it even possible and is it possible in an anonymous function particaly? I don’t want to add extra on click handlers or something like that.
I have been using Vs code for a MERN project while programming the backend code vs code shows this red line on the const tag with the error saying Unknown word (CssSyntaxError)stylelint(CssSyntaxError)
Here is the image p.s there are no errors while running he code with node
I’ve spent days and days on this trying various techniques I have red on here and other forums but just cant get my head a round it.
I’ve tried .map(), I’ve tried global variables, I’ve tried everything I can think of. steep learning curve
I have split one long function into several smaller functions to make the code more readable and just more functional, the below code is called by a main function I’m using for mapping, the purpose of the code below is to go and fetch data from a model (via views.py) and then pass it back to the main function, it will be a data containing names, cities, towns, countries, it worked fine before I split the long function but now wont pass variables.
Where I console.log ‘the objects the towns’ it looks ok in the console but once outside of that fetch Im lost, Ive tried to return the data from within the fetch function mappointobject (which I believe is an array of objects) but it wont, Ive tried to put a ‘await’ on final console.log but nothing, it seems no matter what I’ve tried fails after the closing fetch function brackets }), the main function just says to me ‘undefined’
Below is what I get at the console.log right before the fetch closing brackets
the objects the towns (8) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
let mappointsobject;
async function radiocontacttownslist() {
fetch(`/conlogger/getradiocontactsdata`, { //this fetch command via views.py gets the data in the radiocontacts list
method: 'POST',
credentials : 'same-origin',
headers: {//'Accept': 'application/json', //Django needs these headers
'X-CSRFToken': getCookie("csrftoken"),
'Content-type': 'application/json' , //Indicates that the request body format is JSON.
'X-Requested-With': 'XMLHttpRequest'
},
})
.then(response => response.json())
//get the promise and when data comes back, take the response and convert and return as JSON
.then(result => {
console.log(result);
mappointsobject = JSON.parse(result) //convert from JSON to javascript object - also see next line
console.log('the objects the towns',mappointsobject) // this is all the objects and all the data from the radio contacts table
}) //end of fetch brackets
console.log('townlisttestoutsideoffetch',mappointsobject)
return mappointsobject;
}
I’ve tried global variables, I’ve tried .map() (totally lost with this but gave it a crack), I’ve tried passing strings and numbers back and they passed back to the main function fine, It doesn’t like the array or there is a timing conflict. I have also tried using ‘await’ at various points in the main function and this function but cant seem to rationalize it.
Looking for guidance, I’m still learning and have a lot to learn, thankyou
Error I’m facing continuosly with ethers.js
CODE
const pair = new Contract(
pairAddress,
blockchain.pairAbi,
wallet
);
const totalSupply = await pair.totalSupply(); //LP * (Liquidity Provider)
if(totalSupply === 0n){
console.log(`Pair ${pairAddress} is empty, skipping...`);
continue;
}
ERROR
Error: could not decode result data (value="0x", info={ "method": "totalSupply", "signature": "totalSupply()" }, code=BAD_DATA, version=6.13.2)
at makeError (/mnt/d/Sniping Bot/sniperjavascript/node_modules/ethers/lib.commonjs/utils/errors.js:129:21)
at assert (/mnt/d/Sniping Bot/sniperjavascript/node_modules/ethers/lib.commonjs/utils/errors.js:149:15)
at Interface.decodeFunctionResult (/mnt/d/Sniping Bot/sniperjavascript/node_modules/ethers/lib.commonjs/abi/interface.js:780:31)
at staticCallResult (/mnt/d/Sniping Bot/sniperjavascript/node_modules/ethers/lib.commonjs/contract/contract.js:254:35)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async staticCall (/mnt/d/Sniping Bot/sniperjavascript/node_modules/ethers/lib.commonjs/contract/contract.js:219:24)
at async Proxy.totalSupply (/mnt/d/Sniping Bot/sniperjavascript/node_modules/ethers/lib.commonjs/contract/contract.js:259:20)
at async snipe (/mnt/d/Sniping Bot/sniperjavascript/bot_copy.js:61:29)
at async main (/mnt/d/Sniping Bot/sniperjavascript/bot_copy.js:172:9) {
code: 'BAD_DATA',
value: '0x',
info: { method: 'totalSupply', signature: 'totalSupply()' },
shortMessage: 'could not decode result data'
}
Node.js v22.5.1
make: *** [Makefile:4: bot] Error 1
I just want that this erro go away I don’t want to see it again and again.
I have very simple code to log some message on window focus and blur events. It works fine on edge, firefox and brave browser and is not working consistently in the chrome browser. Is there any workaround to overcome this? as i couldn’t see any one mentioning this issue on internet. Below is my code.
Few times, i noticed it works and when the same page is opened in the new tab, the events are not fired
<!DOCTYPE html>
<html>
<head>
<title>Window Focus/Blur Logger</title>
<script>
window.addEventListener('focus', function() {
console.log('Window gained focus');
});
window.addEventListener('blur', function() {
console.log('Window lost focus');
});
</script>
</head>
<body>
</body>
</html>
I’m trying to make a streaming service website as practice, but the problem is when I put images, titles and episode lists in a way like columns and rows. For the image on top over I, tried changing the margin or other things but it didn’t work.
I tried to change the margin, and perhaps put a container on it but it didn’t work, I want it to be like this:
existing streaming service
It ended up lining up. Likes this:
My Streaming Service
I want to line up at least four columns containing a poster, title and episode. At first, the row is ok but the second and further overlaps on top of the first. This is the code:
.column {
background-color: rgb(249, 215, 142);
float: left;
width: 200px;
padding: 20px;
height: 200px;
grid-template-columns: 1fr 1fr 1fr;
}
.row:after {
content: "";
display: grid;
clear: both;
}
<div class="row">
<div class="column">
<img src="/Users/sebastianpendragon/Desktop/Software Engineer Project/Image Source/Oshi No Ko Season 2.jpg"
style="width:200px;height:270px; margin-bottom:10px; margin-right: 15px; border:none;">
<p class="video-title">Oshi No Ko Season 2</p>
<p class="video-episode">Episode 1</p>
<p class="video-title">Sub</p>
</img>
</div>
<div class="column">
<img src="/Users/sebastianpendragon/Desktop/Software Engineer Project/Image Source/Failure Frame Season 1.jpg"
alt="Failure Frame Season 1" style="width:210px;height:270px; margin-bottom:10px; margin-right: 15px">
</img>
<p class="video-title">Failure Frame</p>
<p class="video-episode">Season 1 Episode 1</p>
<p class="video-title">Sub</p>
</div>
<div class="column">
<img src="/Users/sebastianpendragon/Desktop/Software Engineer Project/Image Source/Vanguard Divinez Season 2.jpg"
alt="Vanguard Divinez Season 2" style="width:210px;height:270px; margin-bottom:10px; margin-right: 15px">
</img>
<p class="video-title">Vanguard Divinez Season 2</p>
<p class="video-episode">Episode 1</p>
<p class="video-title">Sub</p>
</div>
<div class="column">
<img src="/Users/sebastianpendragon/Desktop/Software Engineer Project/Image Source/Alya Sometimes Hides Her Feelings in Russian Season 1.jpg"
alt="Alya Sometimes Hides Her Feelings in Russian Season 1" style="width:210px;height:270px; margin-bottom:10px; margin-right: 15px">
<p class="video-title">Alya Sometimes Hides Her Feelings in Russian Season 1</p>
<p class="video-episode">Episode 1</p>
<p class="video-title"> Dub|Sub</p>
</img>
</div>
<div class="column">
<img src="/Users/sebastianpendragon/Desktop/Software Engineer Project/Image Source/7th Time Loop The Villainess Enjoys a Carefree Life Married to Her Worst Enemy.jpg"
alt="7th Time Loop The Villainess Enjoys a Carefree Life Married to Her Worst Enemy Season 1" style="width:210px;height:270px; margin-bottom:10px; margin-right: 15px">
<p class="video-title">7th Time Loop The Villainess Enjoys a Carefree Life Married to Her Worst Enemy Season 1</p>
<p class="video-episode">Episode 1</p>
<p class="video-title">Sub</p>
</img>
</div>
<div class="column">
<img src="/Users/sebastianpendragon/Desktop/Software Engineer Project/Image Source/As A Reincarnated Aristocrat I'll Use My Appraisal Skill to Rise in The World.jpg"
alt="As A Reincarnated Aristocrat I'll Use My Appraisal Skill to Rise in The World Season 1" style="width:210px;height:270px; margin-bottom:10px; margin-right: 15px">
<p class="video-title">As A Reincarnated Aristocrat I'll Use My Appraisal Skill to Rise in The World Season 1</p>
<p class="video-episode">Episode 1</p>
<p class="video-title"> Dub|Sub</p>
</img>
</div>
<div class="column">
<img src="/Users/sebastianpendragon/Desktop/Software Engineer Project/Image Source/Chillin' in Another World with Level 2 Cheats.jpg"
alt="Chillin' in Another World with Level 2 Cheats Season 1" style="width:210px;height:270px; margin-bottom:10px; margin-right: 15px">
<p class="video-title">Chillin' in Another World with Level 2 Cheats Season 1</p>
<p class="video-episode">Episode 1</p>
<p class="video-title"> Dub|Sub</p>
</img>
</div>
<div class="column">
<img src="/Users/sebastianpendragon/Desktop/Software Engineer Project/Image Source/Fairy Tail 100 Years Quest.jpg"
alt="Fairy Tail 100 Years Quest Season 1" style="width:210px;height:270px; margin-bottom:10px; margin-right: 15px">
<p class="video-title">Fairy Tail 100 Years Quest Season 1</p>
<p class="video-episode">Episode 1</p>
<p class="video-title"> Dub|Sub</p>
</img>
</div>
<div class="column">
<img src="/Users/sebastianpendragon/Desktop/Software Engineer Project/Image Source/I Parry Everything.jpg"
alt="I Parry Everything Season 1" style="width:210px;height:270px; margin-bottom:10px; margin-right: 15px">
<p class="video-title">I Parry Everything Season 1</p>
<p class="video-episode">Episode 1</p>
<p class="video-title"> Dub|Sub</p>
</img>
</div>
</div>
Anyone know how to fix it.