Blancer.com Tutorials and projects
Freelance Projects, Design and Programming Tutorials
Category Added in a WPeMatico Campaign
I have this text field where allowing only characters
<input maxlength="30" class="form-control" type="text" onkeypress="return (event.charCode > 64 && event.charCode < 91) || (event.charCode > 96 && event.charCode < 123)" maxlength="30" formControlName="Name">
i want to allow special characters and space in the same onkeypress event.
I have example for test:
console.log("test");
const t = new Date().toLocaleString("en-US", {
timeZone: "+0000"
});
console.log(t);
in browser console – OK, but with nodejs – Error
test
/home/jdoodle.js:3
const t = new Date().toLocaleString("en-US", {
^
RangeError: Invalid time zone specified: +0000
at Date.toLocaleString (<anonymous>)
at Object.<anonymous> (/home/jdoodle.js:3:22)
at Module._compile (node:internal/modules/cjs/loader:1376:14)
at Module._extensions..js (node:internal/modules/cjs/loader:1435:10)
at Module.load (node:internal/modules/cjs/loader:1207:32)
at Module._load (node:internal/modules/cjs/loader:1023:12)
at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:135:12)
at node:internal/main/run_main_module:28:49
Node.js v21.2.0
example: https://www.jdoodle.com/ia/T3V
Can anyone explain to me why it doesn’t work and how to make it work?
I have linked an API (Unsplash) to Javascript and Html page, however the search input box and button are not working to fetch the images fromt the API. Secondly the show more button should only appear when a search input has been made. (I’m new to JS and Linking API dynamically )
I have tried to add the async function, response and await response as well the url for the Unsplash.
I expected the search input and button to search for images from Unsplash API when search button is clicked. As well as the the show more button to show once the first search has been made
The images are not showing when the text is inputed in the search input and the search button is clicked. The show more button is showing on the page before the search is made.
Below is my code:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Upcoming Events - Tallinn University HCI Hub</title>
</head>
<body>
<header>
<h1>Tallinn University HCI Hub</h1>
<p>Connecting the World of Human-Computer Interaction</p>
</header>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="upcoming-events.html">Upcoming Events</a></li>
<li><a href="featured-speakers.html">Featured Speakers</a></li>
<li><a href="meetup-rooms.html">Meetup Rooms</a></li>
<li><a href="networking-opportunities.html">Networking Opportunities</a></li>
<li><a href="mentoring-program.html">Mentoring Program</a></li>
<li><a href="hub-blog.html">Hub Blog</a></li>
</ul>
</nav>
<section class="speakers-container">
<h2>Featured Speakers</h2>
<form class="search" >
<input type="text" id="search-input" placeholder="Search for a presenter">
<button id="search-button">Search</button>
</form>
<div class="speaker-results">
<div class="speaker-result">
<img src="https://images.unsplash.com/photo-1560523159-4a9692d222ef" alt="Speaker 1 Image">
<a href="https://unsplash.com/photos/woman-holding-microphone-standing-on-stage-D0rMhzEwiEA" target="_blank">HCI Trends</a>
</div>
<div class="speaker-result">
<img src="https://images.unsplash.com/photo-1591115765373-5207764f72e7" alt="Speaker 2 Image">
<a href="https://unsplash.com/photos/people-sitting-on-chair-in-front-of-table-wMRIcT86SWU" target="_blank">User Testing</a>
</div>
<div class="speaker-result">
<img src="https://images.unsplash.com/photo-1560439514-e960a3ef5019" alt="Speaker 3 Image">
<a href="https://unsplash.com/photos/mens-black-blazer-DL-yyYDDNX4" target="_blank">Trust in Technology</a>
</div
</div>
<button id="show-more-button">Show more</button>
</section>
<footer>
<p>© 2023 Tallinn University HCI Hub</p>
</footer>
<script src="index.js"></script>
</body>
</html>
JS
const accessKey = "PwYO_lHIYAHEHFxcaI3HjKJrdgYwOUfrCPmN8x7EtDg"
const formEle = document.querySelector("form")
const inputEle = document.getElementById("search-input")
const speakerResults = document.querySelector(".speaker-results")
const showMore = document.getElementById("show-more-button")
let inputData = ""
let page = 1;
async function searchImages(){
inputData = inputEle.value;
const url = `https://api.unsplash.com/search/photos?page=${page}&query=${inputData}&client_id=${accessKey}`
const response = await fetch(url);
const data = await response.json();
const results = data.speakerResults
if (page === 1){
speakerResults.innerHTML = ""
}
results.map((result) =>{
const imageWrapper = document.createElement('div');
imageWrapper.classList.add("speaker-result");
const image =document.createElement('img');
img.src = result.urls.small
img.alt = result.alt_description
const imageLink = document.createElement('a');
imageLink.href = result.links.html
imageLink.target = "_blank"
imageLink.textContent = result.alt_deescription
imageWrapper.appendChild(image);
imageWrapper.appendChild(imageLink);
speakerResults.appendChild(imageWrapper);
});
page++
if(page > 1){
showMore.style.display = "block"
}
}
formEle.addEventListener("submit", (event) => {
event.preventDefault()
page = 1;
searchImages()
})
showMore.addEventListener("click", () => {
searchImages()
})
In my React project I am using noUislider as a custom range.I need to disable first handler so that I can only move second.
In documentation I found the function: “slider.noUiSlider.disable(1)”. When I use it I get this error “Uncaught TypeError: slider.noUiSlider.disable is not a function”. Slider is defined, but hasnt this function as a method
I am reading and conversing with chatGPT about what exactly setTimeout and setInterval do. As I understand it the main JavaScript execution thread sends the Web Timer API a callback function and an interval or set time, in ms, after which the callback function should be added to the task queue. After sending these two things to the the Web API the execution thread returns to the main call stack and continues executing the rest of the synchronous code. Now when the Web API receives the callback and the time, say its 1000ms, it starts a timer and at every 1000ms it sends the callback to the task queue. In the case of setTimeout when the Web API receives the callback and the time, say 5000ms, it starts a timer. After the this timer hits 5000ms the callback function gets added to the task queue. Now when these task queue functions are added to the call stack and get executed depends on how long the rest of the JavaScript code takes to all get executed so there is a potential for functions to have accumulated in the task queue before the call stack clears. This is what chatGPT calls “bunching up.” And claims that if enough time is elapsed between the clearing of the call stack and the beginning of the execution of functions in the task queue you can have rapid successions of executions of the callbacks that don’t adhere to the interval set in setInterval.
So I wrote a program to experiment:
function limitedRepeater() {
return setInterval(() => console.log("hi for now"), 1000);
}
const someId = limitedRepeater();
setTimeout(() => clearInterval(someId), 5000);
This is pretty simple to understand. console.log("hi for now") calls are added to the task queue every 1000ms for 5000ms after the setTimeout timer gets initialized. This is the output and the time elapsed as computed by the windows PowerShell command Measure-Command:
Output:
hi for now
hi for now
hi for now
hi for now
Measure-Command {node .asynchronous_js_frontendmasters.js}
Days : 0
Hours : 0
Minutes : 0
Seconds : 5
Milliseconds : 28
Ticks : 50285701
TotalDays : 5.82010428240741E-05
TotalHours : 0.00139682502777778
TotalMinutes : 0.0838095016666667
TotalSeconds : 5.0285701
TotalMilliseconds : 5028.5701
Now what happens if I include a thread blocking piece of code after the setInterval function call but before the setTimeout call like so:
function limitedRepeater() {
return setInterval(() => console.log("hi for now"), 1000);
}
const someId = limitedRepeater();
let sum = 0;
for (let i = 0; i < 90000000000; i++) {
sum += i;
}
setTimeout(() => clearInterval(someId), 5000);
This for loop should create a significant block to the main execution thread. And it does:
Output:
hi for now
hi for now
hi for now
hi for now
hi for now
Measure-Command {node .asynchronous_js_frontendmasters.js}
Days : 0
Hours : 0
Minutes : 1
Seconds : 7
Milliseconds : 231
Ticks : 672318270
TotalDays : 0.000778146145833333
TotalHours : 0.0186755075
TotalMinutes : 1.12053045
TotalSeconds : 67.231827
TotalMilliseconds : 67231.827
It adds more than a minute to the execution time! But only one more execution of console.log("hi for now"). chatGPT claims that the interval or timer passed to the Web API governs the time elapsed between additions of the callback to the task queue not necessarily time elapsed between executions by the call stack. But if this is the case shouldn’t many more executions of console.log("hi for now") have been added to the task queue before the for loop and call to setTimeout? What am I missing? Thank you!
I’m new to Javascript. Having an html, css and js file, I have 3 panels that I would like to resize (left, center, right). The left panel resizes correctly (by dragging the column border).
Now I would also like to resize the central column by dragging the right side edge of the central column (the one circled in red). This will automatically resize both the center column and the right column.
I think I’m doing something wrong here:
let prevX = e.x;
const leftPanel = leftPane.getBoundingClientRect();
let prevX2 = e.x;
const centerPanel = centerPane.getBoundingClientRect();
function mousemove(e) {
let newX = prevX - e.x;
leftPane.style.width = leftPanel.width - newX + "px";
let newX2 = prevX2 - e.x;
centerPane.style.width = centerPanel.width - newX2 + "px";
}
Complete code:
index.html
<div class="wrapper">
<div class="pane left">
This is the left pane.
</div>
<div class="pane center">
This is the center pane.
<div class="gutter"></div>
</div>
<div class="pane right">
This is the right pane.
<div class="gutter"></div>
</div>
</div>
style.css
*, *::before, *::after {
box-sizing: border-box;
}
body {
margin: 0;
}
.wrapper {
height: 100vh;
width: 100vw;
background: #333;
border: 6px solid #666;
display: flex;
}
.pane {
padding: 1em;
color: #fff;
min-width: 200px;
}
.left {
}
.center {
position: relative;
}
.right {
position: relative;
}
.gutter {
width: 10px;
height: 100%;
background: #666;
position: absolute;
top: 0;
left: 0;
cursor: col-resize;
}
panel.js
const leftPane = document.querySelector(".left");
const centerPane = document.querySelector(".center");
const centerPane = document.querySelector(".right");
const gutter = document.querySelector(".gutter");
function resizer(e) {
window.addEventListener('mousemove', mousemove);
window.addEventListener('mouseup', mouseup);
let prevX = e.x;
const leftPanel = leftPane.getBoundingClientRect();
function mousemove(e) {
let newX = prevX - e.x;
leftPane.style.width = leftPanel.width - newX + "px";
}
function mouseup() {
window.removeEventListener('mousemove', mousemove);
window.removeEventListener('mouseup', mouseup);
}
}
gutter.addEventListener('mousedown', resizer);
Can you help me please?
BITBOLA adalah merek hiburan online yang melayani pasar Asia Pasifik, terutama Indonesia, Malaysia dan Cina. Produk yang ditawarkan terutama pada berbagai permainan online seperti taruhan sepakbola online, kasino online, slot, keno dan lotere, biner, poker, dan permainan lainnya.
BITBOLA adalah merek hiburan online yang melayani pasar Asia Pasifik, terutama Indonesia, Malaysia dan Cina. Produk yang ditawarkan terutama pada berbagai permainan online seperti taruhan sepakbola online, kasino online, slot, keno dan lotere, biner, poker, dan permainan lainnya.
So I was making a site and adding a menu but when I tried to add the close menu button all the menu buttons stopped working
Here is the HTML
<div id="openMenuButton">
<span style= "font-size:30px;cursor:pointer"
onclick="openMenu()">☰ Menu
</span>
</div>
<div id="menu">
<div id="closebtn">
<span style= "font-size:36px;cursor:pointer"
onclick="closeMenu()">× Close
</span>
</div>
<div id="menu-items">
<a href="/" class="menu-item">Home</a>
<a href="games/" class="menu-item">Games</a>
<a href="/" class="menu-item">About</a>
<a href="/" class="menu-item">Contact Us</a>
</div>
<div id="menu-background-pattern"></div>
</div>
And now the CSS
body {
background-color: rgb(20, 20, 20);
margin: 0px;
}
#menu {
height:100%;
width: 0;
position: fixed;
background-color: rgb(20, 20, 20);
z-index: 3;
top: 0;
left: 0;
display: flex;
align-items: center;
overflow-x: hidden;
transition: cubic-bezier(0.6, 0, 0.4, 1);
transition-duration: 2s;
}
#openMenuButton {
right: 25px;
color: white;
z-index: 0;
}
#closebtn {
color: white;
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
#menu-items {
margin-left: clamp(4rem, 20vw, 48rem);
position: relative;
z-index: 4;
}
#menu-items:hover > .menu-item {
opacity: 0.3;
}
#menu-items:hover > .menu-item:hover {
opacity: 1;
}
.menu-item {
color: white;
font-size: clamp(3rem, 8vw, 8rem);
font-family: "Ibarra Real Nova", serif;
display: block;
text-decoration: none;
padding: clamp(0.25rem, 0.5vw, 1rem) 0rem;
transition: opacity 400ms ease;
}
#menu-background-pattern {
height: 100vh;
width: 100vw;
background-image: radial-gradient(
rgba(255, 255, 255, 0.1) 9%,
transparent 9%
);
background-position: 0% 0%;
background-size: 12vmin 12vmin;
position: absolute;
left: 0px;
top: 0px;
z-index: 5;
transition: opacity 800ms ease,
background-size 800ms ease;
}
#menu-items:hover ~ #menu-background-pattern {
background-size: 11vmin 11vmin;
opacity: 0.5;
}
last the JS
function openMenu() {
document.getElementById("menu").style.width = "100%";
}
function closeMenu() {
document.getElementById("menu").style.width = "0";
}
I tried to change some things in the CSS and HTML but it still didn’t work and made it more buggy and so I got rid of the changes. I realy need help
I’m trying out rxjs with JS classes in Angular and I’m getting the error depicted in the title when I’m trying to access the #interval property inside the error function.
export class HomeComponent implements OnInit, OnDestroy {
#firstObsSubscription: Subscription;
#interval?: number;
constructor() {
const customIntervalObservable = new Observable<number>((observer) => {
let count = 0;
this.#interval = setInterval(() => {
console.log('En setInterval', count);
observer.next(count++);
if (count > 3) {
observer.error(new Error('Count is greater than 3'));
observer.next(100);
observer.complete();
}
}, 1_000);
});
this.#firstObsSubscription = customIntervalObservable.subscribe({
next(data) {
console.log('En subscribe', data);
},
error(err) {
if (this.#interval) // <-- I'm getting the error here
clearInterval(this.#interval);
console.log('En error', err);
},
complete() {
console.log('En complete');
},
});
}
ngOnInit() {}
ngOnDestroy(): void {
console.log('Destroying HomeComponent...');
this.#firstObsSubscription.unsubscribe();
if (this.#interval) clearInterval(this.#interval);
}
}
I tried writing the function outside the object literal and then pass it into the object literal, but it is an awful solution:
let errorFn = (err: any) => {
if (this.#interval)
clearInterval(this.#interval);
console.log('En error', err);
};
this.#firstObsSubscription = customIntervalObservable.subscribe({
next(data) {
console.log('En subscribe', data);
},
error: errorFn // <- passing the function object here works! but it is awful
});
I tried also using the bind function but I get a different error from TS:
Could someone help me out here with a nicer solution to my problem? Or telling me how could I google my problem, since I don’t know how it’s my problem called?
Here is a stackblitz reproducing the error: https://stackblitz.com/edit/stackblitz-starters-ttb1zo?file=src%2Fapp%2Fhome%2Fhome.component.ts
I have motion capture .fbx files from a Qualisys system, exported from Theia. I’m not part of the capture process so I’m not 100% on the details there. Unfortunately, the format of the bones in the .fbx file don’t seem to line up with anything I need them for. I want to use them in Unity and Unreal Engine, which require retargeting. I also want to display them using THREE.js, and that brings me here.
I’ve converted the .fbx file to a .glb file and have the mesh displayed in THREE.js, but it wont animate. To play the animation I’m using:
loader.load(path, async function ( mdl ) {
if(mdl.animations.length > 0)
{
console.log(`Loading animations for ${data.name}: ${mdl.animations.length}`);
scene.mixer = new THREE.AnimationMixer( mdl );
scene.action = scene.mixer.clipAction(mdl.animations[0]);
scene.action.play();
}
}
The model is showing, and I see my console.log showing 2 animations. But then the console shows these errors (shown for every bone, I’ve just shown a few) :
THREE.PropertyBinding: No target node found for track: person_0pelvis.position. three.module.js:48585:12
THREE.PropertyBinding: No target node found for track: person_0pelvis.quaternion. three.module.js:48585:12
THREE.PropertyBinding: No target node found for track: person_0pelvis.scale. three.module.js:48585:12
THREE.PropertyBinding: No target node found for track: person_0abdomen.position. three.module.js:48585:12
THREE.PropertyBinding: No target node found for track: person_0abdomen.quaternion. three.module.js:48585:12
THREE.PropertyBinding: No target node found for track: person_0abdomen.scale. three.module.js:48585:12
THREE.PropertyBinding: No target node found for track: person_0thorax.position.
I can’t find much information about the error, though using this tool the animation does play just fine so I’m sure it’s something on my end.
Just in case anyone else has experience with mocap data from Theia, I feel like there must be a way to export the animation that works with things like Unity, Unreal, or Mixamo? It’s so hard to find any information about it. I’d love any tips or links! Thanks
I tried exporting the model with various settings from Blender. I also tried Google but found nothing.
I am having some trouble with the React useState.
I have a modal that I popup based on a form submit. Prior to the modal being loaded the application calls an api which returns some data that is then displayed within the modal in a table.
I have narrowed down the issue to what looks to be a problem with my code useState of the ingredients array this line:
const [editTableData, setEditTableData] = useState(updatedIngredients)
My plan is to use this state in my modal to make the ingredient list editable however I removed this from the code that that I could troubleshoot the issues I am facing with just initially setting the state and resetting the state.
My issue is around Resetting State and from what I have read I have tried a couple of approaches.
Resetting modal state with a key. I tried adding this line to the modal setting the key to a unique guid that is generated but this did not work:
<Modal key={uuidv4()} show={show} onHide={closeModal} size="xl">
onHide or close or Submit of the modal set the state (setEditTableData) to all null values
const initialState = { name: null, quantity: null, unit:null, ingredientId: null }
const closeModal = () => {
handleClose(true)
setEditTableData({
...initialState,
});
}
This works to reset the state to all null which fixes an issue I had earlier where the state would display the previous recipes ingredients. However whenever I reload the modal now after first load the editTableData state is returns as empty and does not get reset with the new updatedIngredients
Full Code:
import { Form, Modal, Button, Table } from "react-bootstrap"
import { parseIngredient, parseInstruction } from '@jlucaspains/sharp-recipe-parser';
import axios from "axios";
import { v4 as uuidv4 } from "uuid"
import { useState } from "react"
export default function AddRecipeModal( { show, handleClose, modalTitle, modalImage, modalIngredients, modalSteps }) {
// this parses out the name from the the modalIngredients and returns a new array called updatedIngredients
const updatedIngredients = modalIngredients.map((modalIngredient) => {
const parsedIngredient = parseIngredient(modalIngredient.raw, 'en')
return { // <--- return a new object...
...modalIngredient, // <--- that has all the properties from modalIngredient...
// v--- with these properties overwritten
ingredientId: uuidv4(),
name: parsedIngredient.ingredient,
unit: parsedIngredient.unit,
quantity: parsedIngredient.quantity
}
});
console.log(updatedIngredients)
const [editTableData, setEditTableData] = useState(updatedIngredients)
console.log(editTableData)
// this handle submit is for the add button on the modal to call the backend api to create the recipe
const handleSubmit = async (e : any) => {
try {
// this prevents an auto refresh from happening
// e.preventDefault()
const resp = await axios.post("http://localhost:8000/recipe/add",
{ title: modalTitle,
ingredients: updatedIngredients,
steps: modalSteps,
image: modalImage
})
handleClose(true)
console.log(resp.data)
} catch (error : any) {
console.log(error.response)
}
}
//trying to reset the state of EditTableData when the modal is hidden or closed
const initialState = { name: null, quantity: null, unit:null, ingredientId: null }
const closeModal = () => {
handleClose(true)
setEditTableData({
...initialState,
});
}
return (
<Modal key={uuidv4()} show={show} onHide={closeModal} size="xl">
<Form onSubmit={handleSubmit}>
<Modal.Header closeButton>
<Modal.Title>
{modalTitle}
</Modal.Title>
</Modal.Header>
<Modal.Body>
<Form.Group className="container">
<p><img src={modalImage} height="250px" /></p>
</Form.Group>
<Form.Group className="container">
<Form.Group className="container">
<Form.Label><strong>Recipe Ingrededients</strong></Form.Label>
<div className="app-container">
<Table striped bordered hover>
<thead>
<tr>
<th>Ingredient</th>
<th>Quantity</th>
<th>Unit</th>
</tr>
</thead>
<tbody>
{updatedIngredients.map(({ ingredientId, name, quantity, unit }) => (
<tr key={ingredientId}>
<td>{name}</td>
<td>{quantity}</td>
<td>{unit}</td>
</tr>
)
)}
</tbody>
</Table>
</div>
</Form.Group>
</Form.Group>
<Form.Group className="container">
<Form.Label><strong>Recipe Instructions</strong></Form.Label>
<div key={uuidv4()}>{modalSteps.map((modalStep) => {
// console.log(modalStep)
return(
<ul>{modalStep.raw}</ul>
)
})}</div>
</Form.Group>
<div className="d-flex justify-content-end" >
<Button variant="primary" type="submit">Add</Button>
</div>
</Modal.Body>
</Form>
</Modal>
)
}
Feel like I am just missing something small with this but it is driving me crazy.
I’m new to React and have been working on building a todo-list that has nested lists inside it which are modifiable independently.. The problem I’m having is that I can’t retrieve or get my data in localStorage.. I think it is storing because when I refresh my page, I can see my arrays in local storage but 1- they disappear and get replaced by any new inputs && 2- I can’t get my getLocalTodoList() to work as expected..
As mentioned, I’m very new to React and this is my first project so I wouldn’t be surprised if the error is something really simple..
Sorry in advance if I posted too much code
import React, { useState, useEffect } from "react";
// Import components
import Todo from "./todo";
//
// ===========================================================================
function Lists({
// text,
listOfTodos,
setTodosList,
todosList,
index
}) {
// useState
// input text for the list_todos
const [todosInputText, setTodosInputText] = useState("");
// todos items
const [todos, setTodos] = useState([]);
//===================================
// Use 2 hooks.. first one [status, setStatus] is to store all of our todos
const [status, setStatus] = useState("all");
// Second hook [filteredTodos, SetFilteredTodos] is to store the filtered items based on their status being "complete" or "uncomplete"
const [filteredTodos, setFilteredTodos] = useState([]);
// ====================================================================
// ====================================================================
// Hooks to use for the toggle()
// comment out [selected, setSelected] if you want to acctivate accordion
const [selected, setSelected] = useState(null);
// ====================================================================
// ====================================================================
// useEffect
// useEffect to run the function filterHandler() everytime we modify the status or make a todo entery
useEffect(() => {
filterHandler();
}, [todos, status]);
// ==================================================================
// Functions and events
// filterHandler() to filter out the "completed" and "uncompleted" items
const filterHandler = () => {
switch (status) {
case "completed":
setFilteredTodos(todos.filter((todo) => todo.completed === true));
break;
case "uncompleted":
setFilteredTodos(todos.filter((todo) => todo.completed === false));
break;
default:
setFilteredTodos(todos);
break;
}
};
// statusHandler() to set the status of items "complete" or "incomplete"
const statusHandler = (e) => {
setStatus(e.target.value);
};
//
const inputTextHandler = (e) => {
// console.log(e.target.value);
setTodosInputText(e.target.value);
};
//
const submitTodoHandler = (e) => {
e.preventDefault();
// prevent empty inputs from the user
if (todosInputText) {
setTodos([
...todos,
{ text: todosInputText, completed: false, id: Math.random() * 1000 },
]);
}
setTodosInputText("");
};
//
// deleteHandler() filters through the [todosList] array and only keeps the items with the id that dooesn't match the selected todo item
const deleteHandler = (e) => {
e.preventDefault();
// confirming with the user before deleting a listOfTodos
if (window.confirm("Are you sure you want to delete this list?")) {
setTodosList(todosList.filter((el) => el.id !== listOfTodos.id));
}
};
// Functions and events
// toggleExpand function to open and close each todo-list
//
const toggle = (index) => {
if (selected === index) {
return setSelected(null);
} else {
setSelected(index);
}
};
// Function to display input list when user starts typing
const displayListOnInput = function () {
if (todosInputText.length >= 0) {
return setSelected(index);
} else {
setSelected(null);
}
};
//
Here is my block for storing and retrieving from the local storage::
// =====================================================================
// useEffect
useEffect(() => {
saveLocalTodosList();
}, [todosList]);
// ==============================
// save todosList to local storage
const saveLocalTodosList = () => {
if (localStorage.getItem("todosListLocalStorage") === null) {
localStorage.setItem("todosListLocalStorage", JSON.stringify([]));
} else {
localStorage.setItem("todosListLocalStorage", JSON.stringify(todosList));
}
};
// getLocalTodosList from Local Storage
const getLocalTodosList = () => {
if (localStorage.getItem("todosListLocalStorage") === null) {
localStorage.setItem("todosListLocalStorage", JSON.stringify([]));
} else {
let todosListFromLocal = JSON.parse(
localStorage.getItem("todosListLocalStorage")
);
setTodosList(todosListFromLocal);
}
};
// //
// // run getLocalTodosList once when the app starts
useEffect(() => {
getLocalTodosList();
}, []);
// =====================================================================
Here is the rest of my code:::
// ==================================================================
return (
<div className="todo-container x">
<form>
<input
value={todosInputText}
// onChange={inputTextHandler}
onInput={(e) => {
inputTextHandler(e);
displayListOnInput();
}}
type="text"
className="todo-input"
/>
<button
onClick={submitTodoHandler}
className="todo-button"
type="submit"
>
<i className="fas fa-plus-square"></i>
</button>
{/* ========================================================= */}
<button
onClick={(e) => {
e.preventDefault();
toggle(index);
}}
className="open-collaps-button"
>
<i
className={selected === index ? "fa fa-sort-up" : "fa fa-sort-down"}
></i>
</button>
{/* <i className="fa fa-sort-down"></i> */}
{/* ========================================================== */}
<div className="select">
{/* call statusHandler() function on change */}
<select onChange={statusHandler} name="todos" className="filter-todo">
<option value="all">All</option>
<option value="completed">Completed</option>
<option value="uncompleted">Uncompleted</option>
</select>
</div>
<button onClick={deleteHandler}>
{" "}
<i className="fas fa-trash"></i>
</button>
</form>
{/* ============================================================ */}
<div>
{/* toggle class "hide" to hide and expand the todo-list-items */}
<ul className={selected === index ? "todo-list-items" : "hide"}>
{filteredTodos.map((todo) => (
<Todo
todo={todo}
todos={todos}
setTodos={setTodos}
text={todo.text}
key={todo.id}
>
{" "}
</Todo>
))}
</ul>
</div>
</div>
);
}
export default Lists;
I have downloaded & imported all jvectormap js libraries in at index.html. But no map is being displayed. However, there is no error related to the map. Did I import the js files in the correct way? This is my first reactjs project so I’m unfamiliar with reactjs.
index.html
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<meta content="Premium Multipurpose Admin & Dashboard Template" name="description" />
<meta content="Themesdesign" name="author" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
crossorigin="anonymous"
/>
<link href="assets/js/jvectormap/jquery-jvectormap.css" rel="stylesheet" type="text/css"/>
<link href="assets/css/bootstrap.min.css" id="bootstrap-style" rel="stylesheet" type="text/css" />
<link href="assets/css/icons.min.css" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="assets/images/favicon.ico">
<link href="assets/css/app.min.css" id="app-style" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="assets/libs/@fullcalendar/core/main.min.css" type="text/css">
<link rel="stylesheet" href="assets/libs/@fullcalendar/daygrid/main.min.css" type="text/css">
<link rel="stylesheet" href="assets/libs/@fullcalendar/bootstrap/main.min.css" type="text/css">
<link rel="stylesheet" href="assets/libs/@fullcalendar/timegrid/main.min.css" type="text/css">
<title>React App</title>
</head>
<body>
<div id="root"></div>
<script src="https://code.jquery.com/jquery-3.7.1.min.js" type="text/javascript"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" type="text/javascript"></script>
<script src="assets/js/jvectormap/jquery-jvectormap-2.0.5.min.js" type="text/javascript"></script>
<script src="assets/js/jvectormap/jquery-jvectormap-world-mill-en.js" type="text/javascript"></script>
<script src="assets/js/jvectormap/jquery-jvectormap.js" type="text/javascript"></script>
<script src="assets/js/jvectormap/map.js" type="text/javascript"></script>
</body>
</html>
Index.jsx
import React, { useEffect } from "react";
import ApexChart from "../apexcharttt";
import { Helmet, HelmetProvider } from "react-helmet-async";
import worldMapConfig from "../jvectormap";
import $ from 'jquery';
export default function Index() {
return (
<div className="col-xl-4">
<div className="card">
<div className="card-body">
<h4 className="header-title mb-4">Sales by State</h4>
<div id="world-map-markers" style={{ height: "230px" }}></div>
I created a ScoreBoard component which will render the score, when the trick is completed.
Here is the code, this is the score updating function.
export let game = {
deck: undefined,
players: [],
tricks: [],
contract: {},
};
let scores = null; // scores = {'0_1': 0, '2_3': 0} (structure of the object)
$: {
game.tricks;
scores = getRunningScores();
scores = scores
}
function getRunningScores() {
console.log("called");
let newScores = {};
if (game?.tricks?.length > 0) {
// Is the current trick complete?
let skipLast = !faeko.isTrickComplete();
game.tricks.forEach((_, i) => {
// Skip the last trick if incomplete
if (skipLast) {
if (i >= game.tricks.length - 1) return;
}
newScores = faeko.trickScore();
newScores = newScores;
console.log("scores made by each team ", newScores);
});
}
return newScores;
}
<div class:score-board={game?.tricks?.length > 0}>
{#if game.tricks && game.tricks.length > 0}
<ScoreBoard players={game?.players} scores={scores} />
{:else}
<div class="contract-div">
<p class="label">Score</p>
<div class="contract-container">
<span class="nick-name"></span>
<div class="contract">
<div class="value">
<span></span>
</div>
</div>
<div class="dblRdbl"></div>
</div>
</div>
{/if}
</div>
If the game.tricks got updated, it should call the getrunningScore() and update the scores. Even it is updating in console. But it is not calling the <ScoreBoard />
$: console.log(“Scores made in current trick “, scores);
I have android project that I’m trying to import some react native code to. But thing is I only want it to have the ‘index.android.bundle’ file. Now, when I start my metro bundler from the dev react native folder, it fetches the files fine, hermes loads and my code works. But when I try to assemble release apk, the local react native overrides the ‘index.android.bundle’ file and opening an empty ‘mock’ screen. I tried lot of stuff, but I suppose it’s an issue somewhere in my setup, since it supposed to work.
If issue wasn’t clear – I compile my project with ‘./gradlew assembleRelease’ command. If the ‘index.android.bundle’ file was changed somehow or is missing, it will re-build that file using the local metro config, which is quite empty, and not use the bundle I copied earlier to assets folder from another project(which is the right one I want to use).
Thx in advance.
I tried to assemble release version when the metro bundler runs in correct folder, tried to copy correct bundle into assets of the target project. Doesn’t matter what I do, any minor change to the bundle file will re-create it, override and open empty activity instead of my app.