Blancer.com Tutorials and projects
Freelance Projects, Design and Programming Tutorials
Category Added in a WPeMatico Campaign
I am looking to add multiple shipping method titles to some knockout JS ifnot statement in Magento2. I currently have the following code which works for the method title listed.
<!-- ko ifnot: method.method_title == 'UPS Prepaid Account' -->
The other titles are UPS and Truck Delivery
<!-- ko ifnot: method.method_title == 'UPS Prepaid Account','UPS','Truck Delivery' --> is not working.
I have a website for ordering a product, which involves a four-step process. I’ve been tasked with integrating a GTM (Google Tag Manager) code from an external agency, and I already have a snippet of the code for this purpose.
However, I want to limit the agency’s ability to freely inject JavaScript code, so I’m looking to restrict its functionality from my site’s code level. I know I can add a condition to only send events to GA4 (Google Analytics 4), but can I override the events?
To be more specific, I want to:
Hide all the custom dimensions I’m using.
Conceal or override the time clients spend on individual pages.
Prevent the addition of conversion events to a button on my site.
In essence, I’d like the agency to only see the number of clients on the site and their navigation between pages (a basic funnel devoid of additional data).
Is this achievable through the site’s code?
I am trying to implement lighbox2 to my website, however, it does not work as presented. On the official website, it shows the preview but I cannot get it to show it. It just says “Image 1” as a text and then when I click, the image is properly displayed. Should I enable anything? I followed the official tutorial.
My index.html
<!DOCTYPE html>
<html lang="sk" class="h-full">
<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">
<script src="https://cdn.tailwindcss.com"></script>
<link href="lightbox2-2.11.4/dist/css/lightbox.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<title>Maškrtníček</title>
</head>
<body class="flex flex-col h-full font-sans">
<div class="bg-orange-300 w-full p-3 text-center">
<span class="text-3xl">In publishing</span>
<ul class="space-x-x">
<li class="md:inline-block sm:block mx-3 text-xl"><a href="#">Informácie</a></li>
<li class="md:inline-block sm:block mx-3 text-xl"><a href="#">Fotky</a></li>
<li class="md:inline-block sm:block mx-3 text-xl"><a href="#">Jedálny lístok</a></li>
</ul>
</div>
<div class="text-2xl text-center w-full bg-orange-200 py-6" id="info">
<h2 class="text-2xl">Informácie</h2>
<p class="text-lg m-auto max-w-5xl px-8">In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content. Lorem ipsum may be used as a placeholder before final copy is available. It is also used to temporarily replace text in a process called greeking, which allows designers to conside. </p>
</div>
<div class="text-2xl text-center w-full bg-orange-200 py-6" id="fotky">
<h2 class="text-2xl">Fotky</h2>
<a href="pictures/proxy-image.png" data-lightbox="image-1" data-title="My caption">Image #1</a>
</div>
<div class="text-2xl text-center w-full bg-orange-200 py-6" id="jd">
<h2 class="text-2xl">Jedálny lístok</h2>
</div>
<script src="lightbox2-2.11.4/dist/js/lightbox.js"></script>
</body>
</html>`
Thank you.
When I use <img class="example-image" src="pictures/proxy-image.png" alt="Golden Gate Bridge with San Francisco in distance"> instead, loads something but the image is not clickable.
Lerna is overall quite a powerfull tool for managing monorepoes in JavaScript with a lot of nice features.
However one thing that I really struggle to find recently – is an ability to gain more controll on the changes lerna applies, specifically when running lerna version command.
lerna version generates CHANGELOG.md changes based on commits, bumps up packages versions and creates a new commit (or with certain flags updates the current commit).
I would like to find a way to prevent changes from being commited to customize my CHANGELOG.md based on what lerna has generated – Is there a way to do so?
I’m using [email protected]
I need to call onChange function and I need to pass parameters in funtion. So I do this
setTimeout(function () { document.getElementById(input.key)?.onchange({}) } , 200);
}
I obtain this error:
cn.onchange is not a function
Anyone can help me?
I have installed and imported jwtDecode properly but why is there any error here is the code:-
My jwtDecode doesn’t seem to work i don’t know the cause i have tried some sort of things i m new in react-native so please help and why is it not working
import { StyleSheet, Text, View } from 'react-native';
import { useContext, useLayoutEffect, useEffect, useState } from 'react';
import { useNavigation } from '@react-navigation/native';
import { Ionicons } from '@expo/vector-icons';
import { MaterialIcons } from '@expo/vector-icons';
import { UserType } from '../userContext';
import AsyncStorage from '@react-native-async-storage/async-storage';
import jwtDecode from 'jwt-decode';
import axios from 'axios';
import Users from '../Components/Users';
const Chat_feature = () => {
const navigation = useNavigation();
const { userId, setUserId } = useContext(UserType);
const [users, setUsers] = useState([]);
useLayoutEffect(() => {
navigation.setOptions({
headerTitle: '',
headerLeft: () => (
<Text style={{ fontSize: 16, fontWeight: 'bold', paddingLeft: 4 }}>FRIENDS</Text>
),
headerRight: () => (
<View style={{ flexDirection: 'row', alignItems: 'center', gap: 8, paddingRight: 4 }}>
<Ionicons name="chatbox-ellipses-outline" size={24} color="black" />
<MaterialIcons name="people-outline" size={24} color="black" />
</View>
),
});
}, []);
useEffect(() => {
console.log('reached first');
const fetchUsers = async () => {
const token = await AsyncStorage.getItem('authToken');
console.log('Token:', token);
console.log('reached second');
const decodedToken = jwtDecode(token);
console.log('reached third');
const userId = decodedToken.userId;
setUserId(userId);
console.log('reached here');
console.log('Fetching users...');
axios.get(`http://localhost:8000/users/${userId}`).then((response) => {
setUsers(response.data);
}).catch((error) => {
console.log('Error while retrieving users', error);
});
};
fetchUsers();
}, [setUserId]);
console.log('users=', users);
return (
<View>
<View>
{users.map((item, index) => (
<Users key={index} item={item} />
))}
</View>
<Text>Chat</Text>
</View>
);
};
export default Chat_feature;
const styles = StyleSheet.create({});
I tried importing jwtDecode in different ways like import * as jwtDecode, import {decode as jwtDecode} ….I expected my jwtDecode to run but it wasn’t running that is why “reached third was not printing”
I have a school assignment I need to finish this week. I have been trying to make it work for too long now, I hope someone here can help me.
This is the JS
let carts = document.querySelectorAll('.shop-item-button');
let products = [
{
name: "News Of The World",
tag: "https://platenzaak.nl/cdn/shop/products/0602547202727-3000px-001_1024x1024.jpg?v=1648045523",
price: 19.99,
inCart: 0
},
{
name: "My Beautiful Dark Twisted Fantasy",
tag: "0060252747446_600.jpg",
price: 49.99,
inCart: 0
},
{
name: "The Queen Is Dead",
tag: "TheSmiths_TheQueenisDead_1986.jpg",
price: 129.99,
inCart: 0
},
{
name: "to hell with it",
tag: "71VB7dPvb5L._UF894,1000_QL80_.jpg",
price: 39.99,
inCart: 0
},
{
name: "Golden Wind",
tag: "goldenwindJOJO_LP_Packshot_Vinyl_Wide-1024x1024.jpg",
price: 199.99,
inCart: 0
},
{
name: "Fryslan",
tag: "Joost-Fryslan.jpg",
price: 19.99,
inCart: 0
},
{
name: "Voulez Vous",
tag: "ABBA+Voulez-Vous+Album+Cover.jpg",
price: 9.99,
inCart: 0
},
{
name: "OK Computer",
tag: "n2xk6sww98nb1.jpg",
price: 15.99,
inCart: 0
}
];
for(let i=0; i< carts.length; i++) {
carts[i].addEventListener('click', () => {
cartNumbers(products[i]);
totalCost(products[i]);
});
}
function onLoadCartNumbers() {
let productNumbers = localStorage.getItem('cartNumbers');
if( productNumbers ) {
document.querySelector('.cart span').textContent = productNumbers;
}
}
function cartNumbers(product, action) {
let productNumbers = localStorage.getItem('cartNumbers');
productNumbers = parseInt(productNumbers);
let cartItems = localStorage.getItem('productsInCart');
cartItems = JSON.parse(cartItems);
if( action ) {
localStorage.setItem("cartNumbers", productNumbers - 1);
document.querySelector('.cart span').textContent = productNumbers - 1;
console.log("action running");
} else if( productNumbers ) {
localStorage.setItem("cartNumbers", productNumbers + 1);
document.querySelector('.cart span').textContent = productNumbers + 1;
} else {
localStorage.setItem("cartNumbers", 1);
document.querySelector('.cart span').textContent = 1;
}
setItems(product);
}
function setItems(product) {
let cartItems = localStorage.getItem('productsInCart');
cartItems = JSON.parse(cartItems);
if(cartItems != null) {
let currentProduct = product.tag;
if( cartItems[currentProduct] == undefined ) {
cartItems = {
...cartItems,
[currentProduct]: product
}
}
cartItems[currentProduct].inCart += 1;
} else {
product.inCart = 1;
cartItems = {
[product.tag]: product
};
}
localStorage.setItem('productsInCart', JSON.stringify(cartItems));
}
function totalCost( product, action ) {
let cart = localStorage.getItem("cart-total");
if( action) {
cart = parseInt(cart);
localStorage.setItem("cart-total", cart - product.price);
} else if(cart != null) {
cart = parseInt(cart);
localStorage.setItem("cart-total", cart + product.price);
} else {
localStorage.setItem("cart-total", product.price);
}
}
function displayCart() {
let cartItems = localStorage.getItem('productsInCart');
cartItems = JSON.parse(cartItems);
let cart = localStorage.getItem("cart-total");
cart = parseInt(cart);
let productContainer = document.querySelector('.products');
if( cartItems && productContainer ) {
productContainer.innerHTML = '';
Object.values(cartItems).map( (item, index) => {
productContainer.innerHTML +=
`<div class="product">
<img src="${item.tag}" /><br><br>
<span class="sm-hide">${item.name}</span>
</div>
<div class="price sm-hide">€ ${item.price},00</div>
<div class="quantity">
<span>${item.inCart}</span>
</div>
<div class="total">€ ${item.inCart * item.price},00</div>`;
});
productContainer.innerHTML += `
<div class="basketTotalContainer">
<h4 class="basketTotalTitle">Totaal</h4>
<h4 class="basketTotal">€ ${cart},00</h4>
</div>`
deleteButtons();
manageQuantity();
}
}
onLoadCartNumbers();
displayCart();
And I have 2 html pages
One for the products
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>UitJePlaat</title>
<script src="https://kit.fontawesome.com/3d96a1bf4e.js" crossorigin="anonymous"></script>
<link rel="icon" href="record-vinyl-solid.svg" type="image/x-icon">
<script src="main.js" async></script>
</head>
<body>
<nav class="navbar">
<ul>
<li><a href="Index.html"><i class="fa-solid fa-record-vinyl"> </i>UitJePlaat</a> </li>
<li><a href="Producten.html">Producten</a></li>
<li><a href="Artiesten.html">Artiesten</a></li>
<li><a href="Overons.html">Over ons</a> </li>
<li><a href="Contact.html">Contact</a> </li>
<li><a href="Winkelwagen.html"><i class="fa-solid fa-cart-shopping"></i><span>0</span></a></li>
</ul>
<h1 class="producten">Producten <br></h1>
<main>
<br>
<section class="sec">
<div class="products">
<div class="card">
<div class="img">
<img class = "shop-item-image" src="https://platenzaak.nl/cdn/shop/products/0602547202727-3000px-001_1024x1024.jpg?v=1648045523" alt="News Of The World By Queen"></div>
<audio controls id="wewillrockyou1" preload="auto"><source src="we.mp3"></audio>
<div class="desc">News Of The World</div>
<div class="title">Queen</div>
<div class="box">
<div class="price">€19,99</div>
<button class="shop-item-button">In Winkelmandje</button>
</div>
</div>
<div class="card">
<div class="img"><img class = "shop-item-image" src="0060252747446_600.jpg" alt="Runaway By Kanye West"></div>
<audio controls id="wewillrockyou2" preload="auto"><source src="runn.mp3"></audio>
<div class="desc">My Beautiful Dark Twisted Fantasy </div>
<div class="title">Kanye West</div>
<div class="box">
<div class="price">€49,99</div>
<button class="shop-item-button">In Winkelmandje</button>
</div>
</div>
<div class="card">
<div class="img"><img class = "shop-item-image" src="TheSmiths_TheQueenisDead_1986.jpg" alt="There Is A Light That Never Goes Out by The Smiths"></div>
<audio controls id="wewillrockyou3" preload="auto"><source src="There.mp3"></audio>
<div class="desc">The Queen Is Dead</div>
<div class="title">The Smiths</div>
<div class="box">
<div class="price">€129,99</div>
<button class="shop-item-button">In Winkelmandje</button>
</div>
</div>
<div class="card">
<div class="img"><img class = "shop-item-image" src="71VB7dPvb5L._UF894,1000_QL80_.jpg" alt="to hell with it by PinkPantheress"></div>
<audio controls id="wewillrockyou4" preload="auto"><source src="PinkPantheress.mp3"></audio>
<div class="desc">to hell with it</div>
<div class="title">PinkPantheress</div>
<div class="box">
<div class="price">€39,99</div>
<button class="shop-item-button">In Winkelmandje</button>
</div>
</div>
<div class="card">
<div class="img"><img class = "shop-item-image" src="JOJO_LP_Packshot_Vinyl_Wide-1024x1024.jpg" alt="JOJO's"></div>
<audio controls id="wewillrockyou5" preload="auto"><source src="JOJO.mp3"></audio>
<div class="desc">Golden Wind</div>
<div class="title">JOJO'S</div>
<div class="box">
<div class="price">€199,99</div>
<button class="shop-item-button">In Winkelmandje</button>
</div>
</div>
<div class="card">
<div class="img"><img class = "shop-item-image" src="Joost-Fryslan.jpg" alt="Joost-Fryslan"></div>
<audio controls id="wewillrockyou6" preload="auto"><source src="fryslan.mp3"></audio>
<div class="desc">Fryslan</div>
<div class="title">Joost</div>
<div class="box">
<div class="price">€19,99</div>
<button class="shop-item-button">In Winkelmandje</button>
</div>
</div>
<div class="card">
<div class="img"><img class = "shop-item-image" src="ABBA+Voulez-Vous+Album+Cover.jpg" alt="Voulez Vous by ABBA"></div>
<audio controls id="wewillrockyou7" preload="auto"><source src="ABBA.mp3"></audio>
<div class="desc">Voulez Vous</div>
<div class="title">ABBA</div>
<div class="box">
<div class="price">€9,99</div>
<button class="shop-item-button">In Winkelmandje</button>
</div>
</div>
<div class="card">
<div class="img"><img class = "shop-item-image" src="n2xk6sww98nb1.jpg" alt="OK Computer by Radiohead"></div>
<audio controls id="wewillrockyou8" preload="auto"><source src="Radiohead_-_No_Surprises.mp3"></audio>
<div class="desc">OK Computer</div>
<div class="title">Radiohead</div>
<div class="box">
<div class="price">€15,99</div>
<button class="shop-item-button">In Winkelmandje</button>
</div>
</div>
</div>
</section>
</main>
</body>
</html>
And one for the shopping cart
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>UitJePlaat</title>
<script src="https://kit.fontawesome.com/3d96a1bf4e.js" crossorigin="anonymous"></script>
<link rel="icon" href="record-vinyl-solid.svg" type="image/x-icon">
<script src="main.js" async></script>
</head>
<body>
<nav class="navbar">
<ul>
<li><a href="Index.html"><i class="fa-solid fa-record-vinyl"> </i>UitJePlaat</a> </li>
<li><a href="Producten.html">Producten</a></li>
<li><a href="Artiesten.html">Artiesten</a></li>
<li><a href="Overons.html">Over ons</a> </li>
<li><a href="Contact.html">Contact</a> </li>
<li><a href="Winkelwagen.html"><i class="fa-solid fa-cart-shopping"></i><span class="cart">0</span></a></li>
</ul>
</nav>
<section class="container content-section">
<div class="container">
<div class="container-products"><h1>Winkelwagen</h1>
<div class="product-header">
<h5 class="product-title">Produkt</h5>
<h5 class="price sm-hide">Prijs</h5>
<h5 class="quantity">Hoeveelheid</h5>
<h5 class="total">Totaal</h5>
</div>
<div class="products">
<a href="Betalen.html"><button style="position: relative; margin: auto; width: 200px; text-align: center;">Afrekenen</button></a>
</div>
</div>
</body>
</html>
I’m very sorry for the mess, and I know it’s a lot of code. It would mean the world to me if someone could take the time to help me.
I tried to combine this code https://www.youtube.com/watch?v=YeFzkC2awTM&t=2252s with the code my school provided, but it did not help.
What I need is to hide the offcanvas menu when clicked outside the inside the. There are three offcanvas elements and I made full width of the screen using CSS width; 100%. The’re closing normally when using the close X button. But I need to hide them when user click outside the container. Here is the sample HTML:
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvas1" aria-controls="offcanvas1">Offcanvas1</button>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvas2" aria-controls="offcanvas2">Offcanvas2</button>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvas3" aria-controls="offcanvas3">Offcanvas3</button>
<div class="offcanvas offcanvas-start show w-100 bg-transparent" tabindex="-1" id="offcanvas1" aria-labelledby="offcanvasLabel1">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasLabel">Offcanvas1</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<div class="container bg-white"> <!-- Clicking outside will close the offcanvas --> </div>
</div>
</div>
<div class="offcanvas offcanvas-start show w-100 bg-transparent" tabindex="-1" id="offcanvas2" aria-labelledby="offcanvasLabel2">
...
</div>
<div class="offcanvas offcanvas-start show w-100 bg-transparent" tabindex="-1" id="offcanvas3" aria-labelledby="offcanvasLabel3">
...
</div>
My javascript:
document.addEventListener(“DOMContentLoaded”, function () {
// Add event listener to close offcanvas on outside click
const offcanvasElements = document.querySelectorAll(".offcanvas");
if (offcanvasElements.length) {
window.addEventListener("click", (event) => {
offcanvasElements.forEach((offcanvas) => {
const container = offcanvas.querySelector(".container");
if (
!container.contains(event.target) &&
offcanvas.classList.contains("show")
) {
const offcanvasId = offcanvas.getAttribute("id");
if (offcanvasId) {
const bsOffcanvas = new bootstrap.Offcanvas("#" + offcanvasId);
bsOffcanvas.hide();
console.log("Offcanvas hiding: " + offcanvasId);
} else {
console.error("Offcanvas ID not found.");
}
}
});
});
}
});
Why the code isn’t working as expected??
How to resize/style the HTML content? for example, I want to make the HTML content small. currently, when I try to wrap parse(htmlContent) into a div and give it height and width it’s not making the HTML content small. How to fix it?
<div>
<h1>HTML Content</h1>
<div style={{ width: '50%' }}>
{parse(htmlContent)}
</div>
</div>
I am using html-react-parser https://github.com/remarkablemark/html-react-parser and what i am trying to do is display any website in my React app like we would use iFrame but alot of websites don’t support it so i am doing view page source anding the html content in parse function.
So can anyone help me resize it so that i can make it small
I can’t seem to figure this one out Just want to have each dot in this carousel with an ‘active’ class when you click the arrows to go through the images. Here’s my code. Any ideas? Basically just want when you cycle through each image, the dot to be become active via the css
HTML (from a Phoenix template)
<div class="wrapper">
<i id="left" class="fa-solid fa-angle-left"></i>
<div class="carousel flex flex-row">
<%= for id <- image_ids() do %>
<img src={thumb_url(id)} class="rounded-2xl" id="image" />
<% end %>
</div>
<i id="right" class="fa-solid fa-angle-right"></i>
</div>
<ul id="dots" class="list-inline dots"></ul>
</div>
JS
const GallerySlider: any = {
mounted() {
const carousel = document.querySelector<HTMLElement>(".carousel")!;
const firstImg = carousel.querySelector("img")!;
const arrowIcons = document.querySelectorAll<HTMLElement>(".wrapper i");
let isDragStart = false;
let isDragging = false;
let prevPageX: number;
let prevScrollLeft: number;
let positionDiff: number;
const showHideIcons = () => {
const scrollWidth = carousel.scrollWidth - carousel.clientWidth;
arrowIcons[0].style.display =
carousel.scrollLeft === 0 ? "none" : "block";
arrowIcons[1].style.display =
carousel.scrollLeft === scrollWidth ? "none" : "block";
};
arrowIcons.forEach((icon) =>
icon.addEventListener("click", () => {
const firstImgWidth = firstImg.clientWidth + 14;
carousel.scrollLeft +=
icon.id === "left" ? -firstImgWidth : firstImgWidth;
setTimeout(() => showHideIcons(), 60);
}),
);
const autoSlide = () => {
const position =
carousel.scrollLeft - (carousel.scrollWidth - carousel.clientWidth) >
-1;
if (position || carousel.scrollLeft <= 0) return;
positionDiff = Math.abs(positionDiff);
const firstImgWidth = firstImg.clientWidth + 14;
const valDifference = firstImgWidth - positionDiff;
const positionValue =
positionDiff > firstImgWidth / 4 ? valDifference : -positionDiff;
carousel.scrollLeft +=
carousel.scrollLeft > prevScrollLeft ? positionValue : -positionValue;
};
//Dragger
const dragStart = (e: MouseEvent | TouchEvent) => {
isDragStart = true;
prevPageX = "pageX" in e ? e.pageX : e.touches[0].pageX;
prevScrollLeft = carousel.scrollLeft;
};
const dragging = (e: MouseEvent | TouchEvent): void => {
if (!isDragStart) return;
e.preventDefault();
isDragging = true;
carousel.classList.add("dragging");
positionDiff =
"pageX" in e
? (e.pageX as number) - prevPageX
: e.touches[0].pageX - prevPageX;
carousel.scrollLeft = prevScrollLeft - positionDiff;
showHideIcons();
};
const dragStop = (): void => {
isDragStart = false;
carousel.classList.remove("dragging");
if (!isDragging) return;
isDragging = false;
autoSlide();
};
// Dots code here
const carouselItem = carousel.getElementsByTagName("div");
const dots = document.getElementById("dots");
const dotsChild = document
.getElementById("dots")!
.getElementsByTagName("li");
for (let i = 0; i < carousel.children.length; ++i) {
dots?.appendChild(document.createElement("li"));
const dot = dotsChild[i];
dot.classList.add("list-inline-item");
if (i === 0) dot.classList.add("active");
dot.setAttribute("id", i.toString());
dot.innerHTML = i.toString();
}
const dnum = "id";
for (let i = 0; i < carouselItem.length; ++i) {
carouselItem[i].classList.remove("active");
if (dnum === null) continue;
carouselItem[parseInt(dnum)].classList.add("active");
dotsChild[i].classList.remove("active");
dotsChild[parseInt(dnum)].classList.add("active");
}
carousel.addEventListener("mousedown", dragStart);
carousel.addEventListener("touchstart", dragStart);
document.addEventListener("mousemove", dragging);
carousel.addEventListener("touchmove", dragging);
document.addEventListener("mouseup", dragStop);
carousel.addEventListener("touchend", dragStop);
},
};
export default GallerySlider
CSS
.dots {
text-align: center;
padding: 10px;
}
.dots li {
cursor: pointer;
display: inline-block;
background: #fff;
color: #fff;
padding: 2px 6px;
line-height: 0.5;
border-radius: 50%;
text-indent: -9999px;
opacity: 0.5;
-webkit-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
transition: opacity 0.2s;
margin: 2px;
}
.dots li.active {
opacity: 1;
}
Currently for a week view I have titleFormat: 'YYYY MMMM' and if I navigate to a week from 2024-01-29 to 2024-02-04 in the toolbar title I see: 2024 january – 2024 february.
Instead I would like to see 2024 january – february if the year is exactly the same. Preferrably I would like to show 2024 jan. – feb. if month differ and 2024 january if month is the same. Is that a possibility on v5?
On v3 I used to do: [YYYY] MMMM
I have this code:
const menuOptions = ['New', 'TASKMANAGEMENT', 'HISTORY'];
const menuContents = [];
for (let i = 0; i < menuOptions.length; i++) {
const option = menuOptions[i];
const content = menuOptionsToContent[option];
console.log('option, content: ');
console.log(option, content);
menuContents.push(content);
}
where menuOptionsToContent is defined as in:
import intl from 'react-intl-universal';
const menuContentForNew = {
type: 'collapse',
name: intl.get('dashboard_button_new'),
key: 'new',
route: '/new',
icon: <Icon fontSize="medium">create</Icon>,
component: <New />,
noCollapse: true,
};
const menuContentForTaskMangement = {
type: 'collapse',
name: intl.get('dashboard_button_task_management'),
key: 'task-management',
route: '/task-management',
icon: <ViewKanbanIcon />,
component: <Kanban />,
noCollapse: true,
};
const menuContentForHistory = {
type: 'collapse',
name: intl.get('dashboard_button_history'),
key: 'history',
icon: <AssignmentIcon />,
collapse: [
{
name: intl.get('dashboard_button_history_received'),
key: 'received',
route: '/history/received',
component: <ReceivedHistory type={ISSUE_LIST_TYPE.TASK_LIST} />,
},
{
name: intl.get('dashboard_button_history_sent'),
key: 'sent',
route: '/history/sent',
component: <SentHistory type={ISSUE_LIST_TYPE.TASK_LIST} />,
},
],
};
export const menuOptionsToContent = {
'New': menuContentForNew,
'TASKMANAGEMENT': menuContentForTaskMangement,
'HISTORY': menuContentForHistory,
};
the problem is that when we run
const content = menuOptionsToContent[option];
console.log('option, content: ');
console.log(option, content);
the content is an object like below:
{
type: 'collapse',
name: ""
key: 'task-management',
route: '/task-management',
icon: <ViewKanbanIcon />,
component: <Kanban />,
noCollapse: true,
};
It has everything as defined, except that name is an empty string "", where it should have been an actual name string.
Why is the intl.get() value not loaded in the object?
I am making a list of questions and answers in js. I have created a class which creates a collapsible modal of question and answer. On click the answer div should change the style from display: “none” to display: “block”. Somehow the function that toggles the answer doesn’t apply the styles.
Below is my code:
class FAQItem {
constructor(question, answer) {
this.question = question;
this.answer = answer;
this.htmlElement = this.createComponent();
}
createComponent() {
// omited part of code regarding creating the component and rendering an svg icon
const questionElement = document.createElement("button");
questionElement.classList.add("question");
questionElement.addEventListener('click', () => this.toggleAnswer())
const answerElement = document.createElement("div");
answerElement.classList.add("answer");
answerElement.textContent = this.answer;
container.appendChild(answerElement);
return container;
}
toggleAnswer() {
const answer = this.htmlElement.querySelector(".answer");
const question = this.htmlElement.querySelector('.question');
question.classList.toggle('active');
answer.style.display = answer.style.display === "block" ? "none" : "block";
console.log(`Toggled answer for question: ${this.question}`);
}
}
I tried to many things, I have used chat gpt as well and I don’t see anything wrong in my code, unless there is some issue of my styling which I haven’t noticed.
My styling for the modal:
.collapsible__container {
cursor: pointer {
.question {
cursor: pointer;
display: flex;
flex-direction: row-reverse;
justify-content: space-between;
}
.answer {
display: none;
}
Certainly! Here are the details for the question:
Description:
I’m seeking detailed guidance on optimizing my Upwork freelance market profile to significantly improve impressions and clicks. Despite efforts to showcase my skills and experience, I’ve observed limited visibility and engagement.
Specifically, I’m interested in learning:
Your experienced advice and proven techniques will be highly valuable as I aim to enhance my profile’s performance and increase opportunities for client interaction.
I appreciate your expertise and look forward to implementing these insights for a more successful Upwork journey!
I want to prevent a component rerendering if the hook used by the component doesn’t affect it’s own state.
Let me explain with an example:
import { useState, useEffect, memo } from "react";
import "./styles.css";
let renderCount = 0;
function useNothing() {
const [nothing, setNothing] = useState(0);
useEffect(() => {
const interval = setInterval(() => {
setNothing((v) => v + 1);
}, 2000);
return () => {
clearInterval(interval);
};
}, []);
}
function App() {
useNothing();
console.log(++renderCount);
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<h2>Check the console</h2>
</div>
);
}
export default memo(App);
As you can see from the console output, the component rerenders every 2 seconds, even if the useNothing hook doesn’t affect the returned layout.
Sandbox here