Blancer.com Tutorials and projects
Freelance Projects, Design and Programming Tutorials
Category Added in a WPeMatico Campaign
I’ve followed the instruction on https://is.docs.wso2.com/en/latest/get-started/try-samples/qsg-spa-javascript/ but when i execute the command npm install && npm start nothing happen. access localhost:3000 return nothing.
NodeJS and Npm versions
nothing result
Can anyone help me? Thank alot.
I am trying to create a progress circle out of data points which are represented as {i}. I have used Javascript to pull the code but it’s not recognizing it in the inspect element and showing up in elements.
Here is the code that is pulling the data for data-dots and data-percent:
<div class="box">
<div class="circle" data-dots="80" data-percent="55"></div>
<div class="text">
<big>55%</big>
<small>Project Management</small>
</div>
</div>
Here is the Javascript that is pulling the code for the animation
const circles = document.querySelectorAll('.circle');
circles.forEach(elem=>{
var dots = elem.getAttribute("data-dots");
var marked = elem.getAttribute("data-percent");
var percent = Math.floor(dots*marked/100);
var points = "";
var rotate = 360 / dots;
for(let i = 0 ; i < dots ; i++) {
points += '<div class="points" style="--i:${i}; --rot:${rotate}deg"></div>';
}
elem.innerHTML = points;
const pointsMarked = elem.querySelectorAll('.points');
for(let i = 0; i<percent ; i++){
pointsMarked[i].classList.add('marked')
}
});
And here is the styling:
.circle {
width: 100%;
height: 120px;
display: flex;
justify-content: center;
align-items: center;
}
.circle .points{
width: 2px;
height: 10px;
background-color: var(--bg-color);
position: absolute;
border-radius: 3px;
transform: rotate(calc(var(--i)*var(--rot))) translateY(-60px);
}
.points.marked{
animation: glow 0.04s linear forwards;
animation-delay: calc(var(--i)*0.05s);
}
I’ve checked everything over and over but keep getting the same results and the circle is showing up as a small circle on the screen pulling this back from the animation. Not sure where it’s going wrong
element.style {
--i: ${i};
--rot: ${rotate}deg;
}
I’ve tried using the individual data points but obvious the formula will make that alot easier instead of writing out all 80 points especially for 4 different circles
I have to animate lines like those shared in the screenshot and I have tried the below code but it’s not working for me. I am getting an error in my ID. Would you help me out
window.addEventListener("DOMContentLoaded",()=>{
function createSVGLine(classN, lineW, lineH){
let svgns = 'http://www.w3.org/2000/svg';
let svgElement = document.createElementNS(svgns, 'svg');
svgElement.classList.add(classN);
let svgLine = document.createElementNS(svgns, 'line');
svgLine.setAttribute('x1', '0');
svgLine.setAttribute('y1', '0');
svgLine.setAttribute('x2', lineW);
svgLine.setAttribute('y2', lineH);
svgElement.appendChild(svgLine);
return svgElement;
};
let getLine = document.querySelector('.assessWrap > .eline');
document.querySelectorAll('.assessWrap').forEach((addSvg)=>{
addSvg.append(createSVGLine("hline", getLine.getBoundingClientRect().width, 0));
addSvg.append(createSVGLine("vline", 0, getLine.getBoundingClientRect().height));
});
});
window.addEventListener('scroll', function() {
let scrollTop = window.scrollY;
let svgWidth = document.querySelector('svg').getBoundingClientRect().width;
let line = document.getElementById('line');
let progress = (scrollTop / (document.body.scrollHeight - window.innerHeight)) * svgWidth;
if (progress <= svgWidth) {
//line.setAttribute('x2
line.setAttribute('x2', progress);
}
});
window.addEventListener('scroll', function() {
let scrollTop = window.scrollY;
let svgHeight = document.getElementById('svg').getBoundingClientRect().height;
let line = document.getElementById('line');
let progress = (scrollTop / (document.body.scrollHeight - window.innerHeight)) * svgHeight;
if (progress <= svgHeight) {
line.setAttribute('y2', progress);
}
}); body {
margin: 0;
font-family: Arial, sans-serif;
}
#content{height:1000px}<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div id="content"></div>
<div class="contentWrap container">
<section class="assessWrap">
<div class="eline">
<div class="row">
<div class="col-lg-4"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce at dui nec lacus interdum euismod in eget ligula. Donec leo dui, viverra quis purus vel, bibendum ultricies ligula. Cras a vulputate risus. Curabitur ac mi volutpat, consectetur nibh nec,</p></div>
<div class="col-lg-4"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce at dui nec lacus interdum euismod in eget ligula. Donec leo dui, viverra quis purus vel, bibendum ultricies ligula. Cras a vulputate risus. Curabitur ac mi volutpat, consectetur nibh nec,</p></div>
<div class="col-lg-4"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce at dui nec lacus interdum euismod in eget ligula. Donec leo dui, viverra quis purus vel, bibendum ultricies ligula. Cras a vulputate risus. Curabitur ac mi volutpat, consectetur nibh nec,</p></div>
</div>
</div>
</section>
<section class="assessWrap">
<div class="eline">
<div class="row">
<div class="col-lg-4"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce at dui nec lacus interdum euismod in eget ligula. Donec leo dui, viverra quis purus vel, bibendum ultricies ligula. Cras a vulputate risus. Curabitur ac mi volutpat, consectetur nibh nec,</p></div>
<div class="col-lg-4"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce at dui nec lacus interdum euismod in eget ligula. Donec leo dui, viverra quis purus vel, bibendum ultricies ligula. Cras a vulputate risus. Curabitur ac mi volutpat, consectetur nibh nec,</p></div>
<div class="col-lg-4"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce at dui nec lacus interdum euismod in eget ligula. Donec leo dui, viverra quis purus vel, bibendum ultricies ligula. Cras a vulputate risus. Curabitur ac mi volutpat, consectetur nibh nec,</p></div>
</div>
</div>
</section>
<section class="assessWrap">
<div class="eline">
<div class="row">
<div class="col-lg-4"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce at dui nec lacus interdum euismod in eget ligula. Donec leo dui, viverra quis purus vel, bibendum ultricies ligula. Cras a vulputate risus. Curabitur ac mi volutpat, consectetur nibh nec,</p></div>
<div class="col-lg-4"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce at dui nec lacus interdum euismod in eget ligula. Donec leo dui, viverra quis purus vel, bibendum ultricies ligula. Cras a vulputate risus. Curabitur ac mi volutpat, consectetur nibh nec,</p></div>
<div class="col-lg-4"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce at dui nec lacus interdum euismod in eget ligula. Donec leo dui, viverra quis purus vel, bibendum ultricies ligula. Cras a vulputate risus. Curabitur ac mi volutpat, consectetur nibh nec,</p></div>
</div>
</div>
</section>
</div>I’m new here, I got a trouble that my decryption code(C#) is not working can someone watch my code and tell me where should I fix please?
In Uipath studio I’m using Invoke Code activity.
Regards,
I want to decypted an encrypted text using two keys
I have to sort this array,
const array = [
[18, [18, 16], 16],
15,
[18, 19, 51],
[[18, 16], 15, [14, 13]],
[10, 9, 20],
99,
49,
[11, [22, 10], [[10, 9], 11, 9, [1, 2]], 100, 72],
[
[11],
[
[19, 14],
[77, 18],
],
],
];
sort this array such that,
all single elements inside this array are come first
after that one-dimentional arrays are come second
after that two-dimentional arrays are come third
after that three-dimentional arrays are come fourth
…..so on
all elements should be sorted inside all the arrays.
Result should be like this,
[
15,
49,
99,
[18, 19, 51],
[9, 10, 20],
[16, 18, [16, 18]],
[15, [16, 18], [13, 14]][(11, 72, 100, [10, 22], [9, 11, [9, 10], [1, 2]])][
([11],
[
[14, 19],
[18, 77],
])
],
]
Original Post Below:
I’ve reproduced a reduced problem:
https://codepen.io/MH-123/pen/ExJWQWq?editors=1100
Here’s the code pen, read below for the issue, it remains the same. I have two divs, but flex shrink isn’t working on them and I’m not sure why.
I have a main flex container, that contains 1 row of 2 columns. (Each column is a flex container as well but I don’t think that should matter?).
Anyways, when the user shrinks the screen horizontally, I want the left column to shrink faster than the right column (which should make the columns’ items smaller proportionally).
I’ve tried lots of things, adding flex-shrink to the columns, altering flex-basis, removing widths, etc. but nothing seems to work:
https://codepen.io/MH-123/pen/gOymoqM?editors=1100
/* BASE STYLES */
:root {
--clr-dark: #0f172a;
--clr-light: #f1f5f9;
--clr-accent: #e11d48;
}
*,*::before,*::after {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
line-height: 1.6;
word-spacing: 1.4px;
font-family: "Roboto", sans-serif;
color: var(--clr-dark);
background-color: var(--clr-light);
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container {
width: 50%;
height: 650px;
margin: 0 auto;
border: 10px solid var(--clr-dark);
}
.item {
background-color: #fb7185;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid red;
}
/* END OF BASE STYLES */
.container {
display: flex;
flex: row nowrap;
}
.colLeft, .colRight {
height: 100%;
border: 5px solid blue;
display: flex;
flex-flow: column nowrap;
justify-content: space-evenly;
align-items: center;
align-content: space-around;
}
.colLeft {
flex-grow: 1;
flex-shrink: 10;
}
.colRight {
flex-grow: 1;
flex-shrink 1;
}
.item-1 {
flex: 0 1 30%;
width: 95%;
display: flex;
}
.item-a {
height: 100%;
width: 50%;
}
.item-b {
height: 100%;
width: 50%;
}
.item-2 {
flex: 0 1 55%;
width: 95%;
}
.item-3 {
flex: 0 0 55%;
width: 95%;;
}
.item-4 {
flex: 0 0 30%;
width: 95%;
}<div class="container">
<div class="colLeft">
<div class="item item-1">
<div class="item item-a">1a</div>
<div class="item item-b">1b</div>
</div>
<div class="item item-2">2</div>
</div>
<div class="colRight">
<div class="item item-3">3</div>
<div class="item item-4">4</div>
</div>
</div>edit: Here’s my codepen where I remove all widths’ from children
https://codepen.io/MH-123/pen/abxJqZg?editors=0100
I have this code: https://codepen.io/MH-123/pen/wvZJPPZ?editors=0100
As the screen width gets smaller, I want the left 2 boxes, A and B to shrink its width but I’m not sure how to achieve that as I’m new to flexbox. flex-shrink 1 on them doesn’t work. I’m not sure if my initial set up is incorrect at all? Is there a way I can just adjust this quickly?
Thanks!
/* BASE STYLES */
:root {
--clr-dark: #0f172a;
--clr-light: #f1f5f9;
--clr-accent: #e11d48;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
line-height: 1.6;
word-spacing: 1.4px;
font-family: "Roboto", sans-serif;
color: var(--clr-dark);
background-color: var(--clr-light);
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container {
width: 50%;
height: 650px;
margin: 0 auto;
border: 10px solid var(--clr-dark);
}
.item {
background-color: #fb7185;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid red;
}
/* END OF BASE STYLES */
.container {
display: flex;
flex-flow: column wrap;
justify-content: space-evenly;
align-items: center;
align-content: space-around;
}
.item-1 {
height: 30%;
width: 50%;
display: flex;
}
.item-a {
height: 100%;
width: 50%;
}
.item-b {
height: 100%;
width: 50%;
}
.item-2 {
height: 55%;
width: 50%;
}
.item-3 {
height: 55%;
width: 45%;
}
.item-4 {
height: 30%;
width: 45%;
}
@media all and (max-width: 600px) {
.container {
flex-flow: column wrap;
padding: 5% 1% 2% 1%;
}
.item-1 {
height: 20%;
width: 100%;
flex-direction: column
}
.item-a, .item-b {
height: 50%;
width: 100%;
}
.item-2 {
height: 35%;
width: 100%;
}
.item-3 {
height: 30%;
width: 100%;
}
.item-4 {
height: 7.5%;
width: 100%;
}
}
@media all and (max-height: 650px) {
.container {
background-color: pink;
flex-flow: column nowrap;
padding: 5% 1% 2% 1%;
}
.item-1 {
height: 50%;
width: 100%;
flex-direction: column
}
.item-a, .item-b {
height: 80%;
width: 100%;
}
.item-2 {
height: 35%;
width: 100%;
}
.item-3 {
height: 30%;
width: 100%;
}
.item-4 {
height: 7.5%;
width: 100%;
}
}<div class="container">
<div class="item item-1">
<div class="item item-a">
a1
</div>
<div class="item item-b">a2</div>
</div>
<div class="item item-2">B</div>
<div class="item item-3">C</div>
<div class="item item-4">
D
</div>
</div>React Native TextInput write Comma Separated Number with Decimal Points with to state values i.e one for presentation and another for pure number value dynamically updated
i.e
SIMILAR TO THE LOGIC OF THIS PAGE
https://www.redcross.org/donate/donation.html/
enter image description here
import React, { useState, useEffect, useCallback, Text } from "react";
import { View, TextInput } from "react-native";
const App = () => {
const [amount, setAmount] = useState(null);
const [amountFormatted, setAmountFormatted] = useState(null);
/**
* FUNCTION TO CHANGE AMOUNT TO amountFormattted i.e value for text input will bue ###,###,###[DECIMAL_POINT]##
* i.e user input 50000000 textInput value 50,000,000.00 where amount == 500000.00 and amount formatted is 50,000,000.00
*/
const formatAmountFunc = (text) => {
//Function to Format TextIput value and save amount as pure number
setAmountFormatted(text);
};
/**
*
*/
return (
<View>
{/**
* THERE IS NO TEXT VIEW IN THIS APP ONLY TEXTINPUT i.e user input 500000.00 the TextInput
* Shows 50,000,000.00 i.e amountFormatted is 50,000,000.00 and Amount is 500000.00
*
* **/}
<TextInput
value={amountFormatted}
onChangeText={(text) => {
formatAmountFunc(text);
}}
/>
</View>
);
};
export default App;
I Tried Several Number formatting configurations and a few npm number formatters not sure why it is not working
I am trying to encrypt my password in the frontend (javascript)before I send it to the backend (fastapi, python)
Although many Google searches said crypto can be used, I saw that it works only in the nodejs environment and not in the browser environment
Is there anyway I can achieve encryption in my js frontend so that decryption can be done in the backend?
I see some articles on crypto-js which requires me to install it separately, but apparently we do not have permission to use cryptojs so that had to be ruled out.
Tried using crypto but that did not seem to work
I’m revamping my companies website which is built on bootstrap 3.3.4 and I added dropdown menus to two navbar items. On the desktop version of the site, the drop downs open and act appropriately, but when the site is scaled to mobile, the dropdown closes immediately after clicking. I’m not sure whether or not this issue stems from the css or if it’s javascript related. Happy to provide more information, I’m so lost that I don’t know what you may need to know to diagnose this.
I have a React component piano that was working fine until I messed with the creation of the piano from in the return statement to in a useEffect like I should. Now when I set any states (specifically I am doing it in a useEffect), and then print it out seconds later, it is at the default state. If I then make changes to the component and save, it hot refreshes, and then when I print out the state, one print is from the old line which prints empty still, and one is from the new line which prints the expected newly set state. By new and old line, I mean if I inspect the prints from devtools, one leads me to the old file and one to the new. I have Schrodinger’s component… I will dump the entire components code, however the important 3 lines are:
initialize test state on line 69, set_test to ‘hello’ on line 112, and print test on line 135 on keypress. Below is prints in devtools
(https://i.stack.imgur.com/Lxlb2.png)
Piano Component
import React, { useEffect, useRef, useState } from 'react'
import PianoKey from './PianoKey'
import { Howl } from 'howler'
import './Piano.css'
import { attribute_animation, default_ajax } from '../../utility/CommonFunctions'
import { FaXmark } from "react-icons/fa6";
import { MdOutlineSaveAlt } from "react-icons/md";
import { TbShare2 } from "react-icons/tb";
import { IoMdCheckmark } from "react-icons/io";
import { FaPlay, FaPause } from "react-icons/fa";
const Piano = ({ start=12, end=60, type='', set_product=null, visible=true, user_interact=true, song_prop=null }) => {
// Recording START
let [recording, set_recording] = useState([false, 0])
let [recorded_song, set_recorded_song] = useState([[], []])
let [save_prompt, set_save_prompt] = useState([false, false])
let recording_action = (action) => {
if (action === 'start') {
set_recording(prev_state => {
let rec_arr = [...prev_state]
rec_arr[0] = true
return rec_arr
})
console.log("recording")
} else if (action === 'end') {
console.log("stopped recording")
// if second recording
if (recording[1] === 1) {
if (type == 'register') {
set_product(recorded_song)
}
set_recorded_song([[], []])
} else {
if (type == 'login') {
set_product(recorded_song[0])
set_recorded_song([[], []])
} else if (type == 'register') {
set_recording([false, 1])
} else {
set_recording([false, 0])
set_save_prompt(prev_state => [true, false])
}
}
}
}
let clear_song = () => {
set_recorded_song([], [])
set_recording([false, 0])
}
// Recording END
// Create Piano START
let piano_keys_ref = useRef({})
let [pressed_keys, set_pressed_keys] = useState(Array(piano_keys_ref.current.length).fill(false))
let [playback_visual, set_playback_visual] = useState(Array(piano_keys_ref.current.length).fill(''))
let [key_to_key, set_key_to_key] = useState({})
let [piano, set_piano] = useState([])
let [test, set_test] = useState ()
useEffect(() => {
// create piano
// let notes = ['C', 'Db', 'D', 'Eb', 'E', 'F', 'Gb', 'G', 'Ab', 'A', 'Bb', 'B']
// let keyboard_keys = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0', '-', '=',
// 'q', 'w', 'e', 'r', 't', 'y', 'u', 'i', 'o', 'p', '[', ']',
// 'a', 's', 'd', 'f', 'g', 'h', 'j', 'k', 'l', ';', "'", 'enter',
// 'l_shft', 'z', 'x', 'c', 'v', 'b', 'n', 'm', ',', '.', '/', 'r_shft']
// for (let i = start; i < end; i++) {
// if (i-start >= keyboard_keys.length)
// break
// let note = notes[(i % 12)] + (1+Math.floor(i / 12)).toString()
// set_piano(prev_state => {
// const new_piano = [
// ...prev_state,
// <PianoKey
// note={note}
// color={notes[(i % 12)].length === 1 ? 'white' : 'black'}
// keyboard_key={keyboard_keys[i-start]}
// key={note}
// innerRef={ref => piano_keys_ref.current[i] = ref}
// recorded_song={recorded_song}
// set_recorded_song={set_recorded_song}
// recording={recording}
// pressed={pressed_keys[i]}
// user_interact={user_interact}
// playback_visual={playback_visual[i-start]}
// />
// ]
// // set_key_to_key(prev_state => ({
// // ...prev_state,
// // [keyboard_keys[i-start]]: i-start
// // }))
// return new_piano;
// });
//
set_test('hello')
return () => {
set_key_to_key({})
set_pressed_keys(Array(piano_keys_ref.current.length).fill(false))
set_piano([])
}
}, [])
// Create Piano END
// Keyboard Listener START
const play_piano_key = (event) => {
let pressed_key = event.key.toLowerCase();
if (pressed_key === 'shift') {
pressed_key = event.location === 1 ? 'l_shft': 'r_shft'
}
let key_state = event.type === 'keydown'
let key_ind = key_to_key[pressed_key]
console.log(test)
set_pressed_keys(prev_state => ({
...prev_state,
[key_ind]: key_state
}))
// set_piano(prev_state => {
// const keys = [...prev_state];
// console.log(keys, key_ind)
// keys[key_ind] = React.cloneElement(keys[key_ind], { pressed: key_state }); // Clone the specific PianoKey element and update the pressed prop
// return keys;
// });
}
useEffect(() => {
if (user_interact && visible) {
document.addEventListener('keydown', play_piano_key)
document.addEventListener('keyup', play_piano_key)
}
return () => {
document.removeEventListener('keydown', play_piano_key)
document.addEventListener('keyup', play_piano_key)
};
}, [visible])
// Keyboard Listener END
// Switch 1/2 piano layers START
let [piano_styling, set_piano_styling] = useState(null)
const [window_size, setwindow_size] = useState({
width: window.innerWidth,
height: window.innerHeight
});
useEffect(() => {
const handleResize = () => {
setwindow_size({
width: window.innerWidth,
height: window.innerHeight
});
};
// Listen for window resize events
window.addEventListener('resize', handleResize);
// Clean up the event listener
return () => {
window.removeEventListener('resize', handleResize);
};
}, []);
useEffect(() => {
if (window_size['width'] >= 1000) {
set_piano_styling(prev_state => ({
first_level: {
width: '50%',
bottom: '0',
left: '0'
},
second_level: {
width: '50%',
bottom: '0',
right: '0'
}
}))
} else {
set_piano_styling(null)
}
}, [window_size])
// Switch 1/2 piano layers END
let save_song = async () => {
set_save_prompt(async prev_state => {
let res = await default_ajax('post', 'songs/create-song', { 'song': recorded_song[0], 'name': 'TODO' })
if (res !== -1) {
console.log(res)
}
return [true, true]
})
}
// Playback START
let [playing, set_playing] = useState(null)
let [song, set_song] = useState(song_prop)
let [playback_index, set_playback_index] = useState(0)
let song_player = useRef(null)
function song_playback() {
let start_time = null;
let animation_frame_id = null;
function animate(timestamp) {
if (!start_time) {
start_time = timestamp;
}
for (let i = playback_index; i < song.length; i++) {
if (song[i]['start_timestamp'] <= timestamp) {
let pkey_index = key_to_key[song[i]['note']]
set_playback_visual(prev_state => {
let l =[...prev_state]
l[pkey_index] = 'expand_up'
})
} else if (song[i]['end_timestamp'] <= timestamp) {
let pkey_index = key_to_key[song[i]['note']]
set_playback_visual(prev_state => {
let l =[...prev_state]
l[pkey_index] = 'move_up'
})
set_playback_index(prev_state => prev_state + 1)
}
}
if (playing) {
animation_frame_id = requestAnimationFrame(animate);
}
}
function pause() {
set_playing(false)
cancelAnimationFrame(animation_frame_id);
}
function resume() {
set_playing(true)
requestAnimationFrame(animate);
}
function reset() {
start_time = null;
set_playback_index(0)
set_playing(false)
}
return { pause, resume, reset };
}
useEffect(() => {
set_song(song_prop)
// console.log(song_prop.song_notes)
}, [song_prop])
useEffect(() => {
if (playing === null) {
song_player.current = song_playback()
} else if (playing) {
console.log('Play')
song_player.current.resume()
} else {
console.log('stop')
song_player.current.pause()
}
}, [playing])
return (
<>
{save_prompt[0] &&
<div className='piano-saveprompt-screen' onClick={() => set_save_prompt([false, false])}>
<div className='piano-saveprompt' onClick={e => e.stopPropagation()} >
<button className='close-btn' onClick={() => set_save_prompt([false, false])}><FaXmark /></button>
{save_prompt[0] && !save_prompt[1] && <h2>Save or Share Your Recording</h2>}
{save_prompt[0] && !save_prompt[1] &&
<div>
<button className='piano-saveprompt-btn' onClick={() => save_song()} ><MdOutlineSaveAlt /> Save </button>
<button className='piano-saveprompt-btn'><TbShare2 /> Share</button>
</div>
}
{save_prompt[0] && save_prompt[1] &&
<div>
<div className='pianosave-checkmark' >Saved! <IoMdCheckmark /></div>
<button>Click here to go to thingy</button>
</div>
}
</div>
</div>
}
<div id='piano-wrapper'>
{user_interact &&
<div id='piano-btn-wrapper'>
<button className='piano-btn' onClick={() => recording[0] ? recording_action('end') : recording_action('start')} ><div className='red-dot'></div></button>
{recording[0] && <button className='piano-btn' id='clear-song-btn' onClick={() => clear_song()} ><FaXmark /></button>}
{(type === 'register' || type === 'login') && !recording && <p>{recording[1] === 0 ? 'Press Start To Begin Recording' : 'Confirm Password'}</p>}
</div>
}
{ type == 'playback' && song &&
<div id='pianoplayback-btn-wrapper'>
<button className='piano-btn' onClick={() => set_playing(prev_state => {return prev_state === null ? true : !prev_state})}>{playing ? <FaPause />: <FaPlay /> }</button>
<button className='piano-btn'>Go to start</button>
</div>
}
<div id='piano'>
<div id="first-level" style={piano_styling ? piano_styling['first_level']: undefined}>
{piano.length === end-start && piano.slice(0, Math.floor(piano.length/2))}
</div>
<div id="second-level" style={piano_styling ? piano_styling['second_level']: undefined}>
{piano.length === end-start && piano.slice(Math.floor(piano.length/2), piano.length)}
</div>
</div>
</div>
</>
)
}
export default Piano
I’ve tried messing with the setting of the states, but at the point of setting a simple test state to ‘hello’ and it not working, I’m at a loss. I have tried resetting the server
i need to Undelete My Task When Click Undo Button!
i tried to add timer to delete task div ,but when i press undo button timer stop working and div undeleted.
follow the link to my code………………………………………………………
js>>
BlackBox_ai_code_view
css>>
BlackBox_ai_code_view
everyting work but bot cant move person to random voice channel
or do new code for me pls i can give u all details
client.on('interactionCreate', async interaction => {
if (!interaction.isButton()) return;
if (interaction.customId === 'move_member') {
const userId = interaction.user.id;
const guild = interaction.guild;
const member = guild.members.cache.get(userId);
if (member.voice && member.voice.channel) {
try {
const randomChannel = await moveMemberToRandomChannel(member);
if (randomChannel) {
interaction.update({ content: `คุณได้ถูกย้ายไปยัง ${randomChannel.name}`, components: [] });
} else {
interaction.reply('ไม่สามารถย้ายไปยังห้องได้');
}
} catch (error) {
interaction.reply(error.message);
}
} else {
interaction.reply('คุณต้องเชื่อมต่อกับห้องเสียงเพื่อให้บอทย้ายคุณไปยังห้องสุ่มได้');
}
}
});
`Based off the code below, I will walk you through the steps of what happens when the page is initially loaded to the endpoint in which the user scrolls down the web page:
The page is loaded and the canvas image is displayed in the center of the screen. The image is big and takes up most of the viewport (Due to code: const canvasWidth = 800; const canvasHeight = 850;).
As the user scrolls, the image begins to shrink in size and also begins to slide to the top left of the screen as intended (due to code: xPercent: 25, // Move to the right).
Although this part of the code works fine, the issue begins as I continue to scroll down further, the image is then scrolled vertically upwards off screen. I want to have the image pinned to the top left side of the screen once it reaches its scale size of 0.2 as written in code: (scale: 0.2,. How can I allow this to happen? Here is the main part of the code that controls the animation sizing of the image:
Ive tried adjusting the xPercent and yPercent to see if it changes the behavior, and tried setting the ‘ end: “bottom top” to “bottom bottom”. Niether of these changes helped. I want the image to stay pinned at the top right of the screen as i continue to scroll down the page rather than being scrolled up vertically after scrolling into the second page.`
const canvasWidth = 800; // Example width
const canvasHeight = 850; // Example height
canvas.width = canvasWidth;
canvas.height = canvasHeight;
// This part resizes and moves image to far left corner of screen
function render() {
scaleAndPositionImage(images[imageSeq.frame], context);
}
function scaleAndPositionImage(img, ctx) {
var canvas = ctx.canvas;
// Define percentage scale based on canvas size
var scale = canvas.width / img.width;
// Calculate new width and height based on the scale factor
var newWidth = img.width * scale;
var newHeight = img.height * scale;
// Position the image at the top-right corner of the canvas
var newX = canvas.width - newWidth;
var newY = -45;
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(img, 0, 0, img.width, img.height, newX, newY, newWidth, newHeight);
}
// Animate image movement to the right corner of the screen
gsap.to("#page > canvas", {
xPercent: 25, // Move to the right
yPercent: -45, // Move to top
scale: 0.2, // Shrink the image to 50% of its original size
scrollTrigger: {
trigger: "#page > canvas",
start: "top top",
end: "bottom top",
scrub: true,
pin: true,
invalidateOnRefresh: true,
scroller: "#main",
},
});
I’m trying to create a scheduling appointment system, I’m trying to make the calendar occupy the half of my page, but even though I tried to increase it’s height and width, it doesn’t change anything.
Home.tsx
import { Calendar } from '@/components/ui/calendar'
import React from 'react'
export default function Home() {
return (
<div className='w-full px-8'>
<div className='flex gap-x-2'>
<div className='flex-1 h-[650px] w-full bg-blue-200'>
<Calendar className='h-full w-full' />
</div>
<div className='flex-1'>2</div>
</div>
</div>
)
}