I’m relatively new (humbled) to JavaScript. I was curious to know if similar to a for loop of which has the incrementing feature as the third argument, does a forEach() have that same ability to pass an incrementing argument as well? If so, how would you go about doing it correctly?
Category: javascript
Category Added in a WPeMatico Campaign
Chrome div.clientHeight=0 when innerText or innerHTML = space character
I have run into a really strange problem…
When creating a DIV element, I add it to the DOM and set the innerText property to be a single space character. When I check the clientHeight property, it is 0. If I change it to something…say the letter ‘a’, the clientHeight property changes to 18.
Typed in the console.
aa = document.createElement("div")
<div></div>
aa.clientHeight
0
aa.innerText = ' ';
' '
aa.clientHeight
0
document.body.appendChild(aa);
<div> </div>
aa.clientHeight
0
aa.innerText = 'a';
'a'
aa.clientHeight
18
aa.innerText = ' ';
' '
aa.clientHeight
0
I tried the same thing in Firefox and it’s doing the exact same thing. Is this part of the standard or what? I’m thinking it may be since Firefox is doing the exactly same thing. I don’t have an Apple device so I can’t try it in Safari.
I could set the style.height to force it to 18…
Any suggestions or ideas?
How to decode script? I don’t know what encoding format this is? [closed]
I don’t know what encoding format this is?
I want to decode it
const e=[‘BgLJAYbOzxjLia’,’Bg90′,’EhqVy3nZjZ4jlG’,’igpdONK’,’DwLeyxrH’,’AdOZmdbWEdTWBW’,’r25ADKW’,’Cg5N’,…..]
Correctly use ajax to make a JSONP request – Error: Cross-Origin Read Blocking
Issue:
I’m trying to make a JSONP request using ajax, but I’m encountering the below error.
Cross-Origin Read Blocking (CORB) blocked cross-origin response https://nftrade.com/_next/data/_Mat1YwGAWWtzBCNmnbbI/assets/avalanche/0x2cca3a1a45c1b1036d7194cd15a981b8c2f9dee4/2493.json?chainName=avalanche&contractAddress=0x2cca3a1a45c1b1036d7194cd15a981b8c2f9dee4&tokenID=2493&callback=jQuery341041842279918868885_1645936498754&_=1645936498755 with MIME type application/json.
The below URL works when I access the it using a chrome browser:
URL:
This is the response headers that is returned from the browser:
Response Headers
- cache-control: private, no-cache, no-store, max-age=0,
must-revalidate - cf-cache-status: DYNAMIC
- cf-ray: 6e3ec0558e647150-YUL
- content-encoding: gzip
- content-type: application/json
- date: Sun, 27 Feb 2022 04:43:16 GMT
- etag: “10f2-zWjggrplfqo/Q28tqHsMexHhykU”
- expect-ct: max-age=604800,
report-uri=”https://report-uri.cloudflare.com/cdn-cgi/beacon/expect-ct” - server: cloudflare
- vary: Accept-Encoding
What I’ve tried and attempted:
The below is the code I’m currently using:
function getData() {
$.ajax({
url: `https://nftrade.com/_next/data/_Mat1YwGAWWtzBCNmnbbI/assets/avalanche/0x2cca3a1a45c1b1036d7194cd15a981b8c2f9dee4/2493.json?chainName=avalanche&contractAddress=0x2cca3a1a45c1b1036d7194cd15a981b8c2f9dee4&tokenID=2493`,
type: 'GET',
crossDomain: true,
dataType: "jsonp",
success: function (data) {
console.log(JSON.stringify(data));
},
error: function (data) {
console.log(JSON.stringify(data));
}
})
}
Where am I going wrong? Can someone please shed some light? Thanks in advance.
My mobile menu disappears before the link is clicked?
Rather new to this sorry in advance for the mess. I’m trying to put this menu section together before moving on to the next stages as this will be in the header of all pages.
it all started going suspiciously well then boom! all of a sudden my pc violently reminding me i should’ve stayed in school 🙁 anyway i made a function that removes the menu on a click but the function to close the menu is somehow called before the link click is registered. This results in a useless menu that i just spend a fair feww hours wrapping my head around.
heres the code – p.s. i said it was messy.
Will be forever grateful if solved!
Html:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="css/style.css" />
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Official EST Performance</title>
</head>
<body data-barba="wrapper">
<!-- header and sidebar -->
<header class="navbar" id="intro">
<a href="/index.html"
><img src="images/EST-Logo.png" alt="Logo" class="logo"
/></a>
<div class="side-bar">
<!-- <a href="/menu.html">
<img src="images/menu.png" class="menu" alt="Menu Icon" />
</a> -->
<div class="social-links">
<img src="images/facebook-6-64.png" />
<img src="images/instagram-64.png" />
<img src="images/phone-30-64.png" />
</div>
<div class="useful-links">
<img src="images/help-64.png" />
<img src="images/business-contact-64.png" />
</div>
</div>
</header>
<div class="circle"></div>
<div class="menu">
<ul>
<li><a href="index.html">About</a></li>
<li><a href="menu.html">Share</a></li>
<li><a href="">Activity</a></li>
<li><a href="">Settings</a></li>
<li><a href="">Contact</a></li>
</ul>
</div>
<div class="burger">
<div class="x"></div>
<div class="y"></div>
<div class="z"></div>
</div>
<div class="load-container">
<div class="loader"></div>
</div>
<div class="page-top" data-barba="container">
<section class="one">
<div class="sections">
<div class="content">
<small>15 years of...</small>
<h1>Stock to Track</h1>
<button type="button">Take a tour</button>
</div>
<div class="spacer">
<p>.</p>
</div>
</div>
<div class="scrolldown">
<a href="#two" class="scroll-down" address="true"></a>
</div>
</section>
<section class="two">
<div class="sections">
<div class="content">
<small>best in class</small>
<h1>ECU Remapping</h1>
<button type="button">Take a tour</button>
</div>
</div>
</section>
<section class="three">
<div class="sections">
<div class="content">
<small>high accuracy</small>
<h1>4-Wheel Dyno</h1>
<button type="button">Learn more</button>
</div>
</div>
</section>
<section class="four">
<div class="sections">
<div class="content">
<small>shop here for</small>
<h1>Genuine Parts</h1>
<button type="button">Take a tour</button>
</div>
</div>
</section>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/@barba/core"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.4/gsap.min.js"></script>
<script src="js/main.js" defer></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</html>
css:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
height: 100%;
}
body {
font-family: "good_timesregular", serif;
font-weight: 400;
font-size: 16px;
line-height: 30px;
background-color: #0c0f15;
overflow-x: hidden;
color: #ababab;
background: rgb(12, 12, 12);
height: 100%;
width: 100%;
}
@font-face {
font-family: "good_timesregular";
src: url("/css/good_times_rg.woff2") format("woff2"),
url("/css/good_times_rg.woff") format("woff");
font-weight: normal;
font-style: normal;
}
.loader {
position: fixed;
width: 100vw;
height: 200vh;
pointer-events: none;
background: linear-gradient(rgb(12, 12, 12), rgb(12, 12, 12));
background-size: cover;
background-repeat: repeat;
background-position: center;
z-index: 2;
visibility: hidden;
opacity: 0;
overflow: hidden;
}
.load-container {
scroll-snap-type: y mandatory;
overflow-y: scroll;
height: 100%;
width: 100%;
max-width: 100% !important;
overflow-x: hidden !important;
background-attachment: fixed;
}
.page-top {
scroll-snap-type: y mandatory;
overflow-y: scroll;
height: 100%;
width: 100%;
max-width: 100% !important;
overflow-x: hidden !important;
background-attachment: fixed;
transform: translateY(-100%);
}
.is-transitioning {
pointer-events: none;
cursor: progress;
}
/* ----------------section snapping----------------- */
section {
height: 95%;
display: flex;
position: relative;
scroll-snap-align: start;
}
.one {
background: linear-gradient(rgba(0, 0, 0, 0.055), rgba(0, 0, 0, 0.5)),
url(/images/Hero.jpg);
background-size: cover;
background-position: center;
background-blend-mode: screen;
}
.two {
background: linear-gradient(rgba(0, 0, 0, 0.726), rgba(0, 0, 0, 0.5)),
url(/images/Image-3-ECU-Tuning-Image.jpg);
background-size: cover;
background-position: center;
background-blend-mode: darken;
}
.three {
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
url(/images/Image-2-Tuning-Main-Top-Photo.jpg);
background-size: cover;
background-position: center;
background-blend-mode: multiply;
}
.four {
background: linear-gradient(rgba(0, 0, 0, 0.651), rgba(0, 0, 0, 0.5)),
url(/images/PerformaceParts.jpg);
background-size: cover;
background-position: center;
}
.sections {
width: 100%;
height: 100%;
position: relative;
overflow: none;
}
.logo {
width: 100px;
cursor: pointer;
margin: 0 0 0 60px;
z-index: 1;
}
.navbar {
width: 95%;
height: 10%;
margin: 0;
display: flex;
align-items: center;
justify-content: space-between;
position: fixed;
}
button {
color: #fbfcfd;
padding: 10px 25px;
background: transparent;
border-radius: 20px;
border: 1px solid #fff;
outline: none;
cursor: pointer;
margin-left: 30px;
}
header {
height: 0;
z-index: 2;
}
.content {
color: #fbfcfd;
position: absolute;
top: 50%;
left: 8%;
transform: translateY(-50%);
}
.scroll-down {
position: absolute;
bottom: 30px;
left: 50%;
margin-left: -16px;
display: block;
width: 32px;
height: 32px;
border: 2px solid rgba(122, 6, 6, 0.705);
background-size: 14px auto;
border-radius: 50%;
z-index: 1;
-webkit-animation: bounce 2s infinite 2s;
animation: bounce 2s infinite 2s;
-webkit-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
}
.scroll-down:before {
position: absolute;
top: calc(50% - 8px);
left: calc(50% - 6px);
transform: rotate(-45deg);
display: block;
width: 12px;
height: 12px;
content: "";
border: 2px solid white;
border-width: 0px 0 2px 2px;
}
@keyframes bounce {
0%,
100%,
20%,
50%,
80% {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
40% {
-webkit-transform: translateY(-10px);
-ms-transform: translateY(-10px);
transform: translateY(-10px);
}
60% {
-webkit-transform: translateY(-5px);
-ms-transform: translateY(-5px);
transform: translateY(-5px);
}
}
h1 {
position: relative;
color: #fbfcfd;
text-decoration: none;
font-size: clamp(40px, 10vw, 70px);
margin: 10px 0 10px 30px;
line-height: 60px;
text-shadow: 2px 4px 3px rgba(0, 0, 0, 0.3);
}
small {
font-size: clamp(10px, 3vw, 20px);
margin-left: 30px;
}
.side-bar {
width: 50px;
height: 100%;
background: linear-gradient(#a4373bb2, #0f0f0f31);
position: fixed;
top: 0;
padding-top: 2%;
left: 0;
}
.social-links img,
.useful-links img {
width: 25px;
margin: 5px auto;
cursor: pointer;
}
.social-links {
width: 50px;
text-align: center;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.useful-links {
width: 50px;
text-align: center;
position: absolute;
bottom: 30px;
}
h1:hover {
color: rgba(245, 245, 245, 0.568);
text-shadow: 0 0 px whitesmoke;
}
h1::before {
content: "";
position: absolute;
display: block;
width: 70%;
height: 4px;
bottom: 0;
left: 0;
background-color: #fbfcfd4f;
transform: scaleX(0);
transform-origin: top left;
transition: transform 0.3s ease;
}
h1:hover::before {
transform: scaleX(1);
}
/*
icon selection
----------------------- */
::-webkit-scrollbar {
width: 6px;
background-color: #090809;
}
::-webkit-scrollbar-thumb {
background-color: #a4373b;
background-image: -webkit-linear-gradient(
45deg,
rgba(10, 8, 8, 0.2) 25%,
transparent 25%,
transparent 50%,
rgba(10, 8, 8, 0.116) 50%,
rgba(10, 8, 8, 0.2) 75%,
transparent 75%,
transparent
);
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(107, 104, 104, 0.363);
background-color: #0908099c;
}
.heading-page {
text-transform: uppercase;
font-size: 43px;
font-weight: bolder;
letter-spacing: 3px;
color: white;
}
a {
color: inherit;
-webkit-transition: all 0.3s ease 0s;
-moz-transition: all 0.3s ease 0s;
-o-transition: all 0.3s ease 0s;
transition: all 0.3s ease 0s;
padding-bottom: 20px;
}
a:hover,
a:focus {
color: #ababab;
text-decoration: none;
outline: 0 none;
}
h2,
h3,
h4,
h5,
h6 {
color: #171718;
font-family: "Open Sans", sans-serif;
margin: 0;
line-height: 1.3;
}
/* =========start of circle-out menu ================ */
div.burger {
height: 30px;
width: 40px;
position: absolute;
top: 11px;
left: 21px;
cursor: pointer;
z-index: 4;
}
div.x,
div.y,
div.z {
position: absolute;
margin: auto;
top: 0px;
bottom: 0px;
background: #ddd;
border-radius: 2px;
-webkit-transition: all 200ms ease-out;
-moz-transition: all 200ms ease-out;
-ms-transition: all 200ms ease-out;
-o-transition: all 200ms ease-out;
transition: all 200ms ease-out;
}
div.x,
div.y,
div.z {
height: 3px;
width: 26px;
}
div.y {
top: 18px;
}
div.z {
top: 37px;
}
div.collapse {
top: 20px;
background: #b5171a;
-webkit-transition: all 70ms ease-out;
-moz-transition: all 70ms ease-out;
-ms-transition: all 70ms ease-out;
-o-transition: all 70ms ease-out;
transition: all 70ms ease-out;
}
div.rotate30 {
-ms-transform: rotate(30deg);
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
-webkit-transition: all 50ms ease-out;
-moz-transition: all 50ms ease-out;
-ms-transition: all 50ms ease-out;
-o-transition: all 50ms ease-out;
transition: all 50ms ease-out;
}
div.rotate150 {
-ms-transform: rotate(150deg);
-webkit-transform: rotate(150deg);
transform: rotate(150deg);
-webkit-transition: all 50ms ease-out;
-moz-transition: all 50ms ease-out;
-ms-transition: all 50ms ease-out;
-o-transition: all 50ms ease-out;
transition: all 50ms ease-out;
}
div.rotate45 {
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transition: all 100ms ease-out;
-moz-transition: all 100ms ease-out;
-ms-transition: all 100ms ease-out;
-o-transition: all 100ms ease-out;
transition: all 100ms ease-out;
}
div.rotate135 {
-ms-transform: rotate(135deg);
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
-webkit-transition: all 100ms ease-out;
-moz-transition: all 100ms ease-out;
-ms-transition: all 100ms ease-out;
-o-transition: all 100ms ease-out;
transition: all 100ms ease-out;
}
div.circle {
border-radius: 50%;
width: 0px;
height: 0px;
position: absolute;
top: 35px;
left: 36px;
background: #090909;
opacity: 1;
z-index: 1;
-webkit-transition: all 300ms cubic-bezier(0, 0.995, 0.99, 1);
-moz-transition: all 300ms cubic-bezier(0, 0.995, 0.99, 1);
-ms-transition: all 300ms cubic-bezier(0, 0.995, 0.99, 1);
-o-transition: all 300ms cubic-bezier(0, 0.995, 0.99, 1);
transition: all 300ms cubic-bezier(0, 0.995, 0.99, 1);
}
div.circle.expand {
width: 1200px;
height: 1200px;
top: -560px;
left: -565px;
-webkit-transition: all 400ms cubic-bezier(0, 0.995, 0.99, 1);
-moz-transition: all 400ms cubic-bezier(0, 0.995, 0.99, 1);
-ms-transition: all 400ms cubic-bezier(0, 0.995, 0.99, 1);
-o-transition: all 400ms cubic-bezier(0, 0.995, 0.99, 1);
transition: all 400ms cubic-bezier(0, 0.995, 0.99, 1);
}
div.menu {
height: 568px;
width: 320px;
position: absolute;
left: -500px;
z-index: 3;
}
div.menu.drop {
top: 0;
left: 0;
-webkit-transition: all 30ms cubic-bezier(0, 0.995, 0.99, 1);
-moz-transition: all 30ms cubic-bezier(0, 0.995, 0.99, 1);
-ms-transition: all 30ms cubic-bezier(0, 0.995, 0.99, 1);
-o-transition: all 30ms cubic-bezier(0, 0.995, 0.99, 1);
transition: all 30ms cubic-bezier(0, 0.995, 0.99, 1);
}
div.menu ul li {
list-style: none;
position: absolute;
top: 50px;
left: 0;
opacity: 0;
width: 320px;
text-align: center;
z-index: 8;
-webkit-transition: all 70ms cubic-bezier(0, 0.995, 0.99, 1);
-moz-transition: all 70ms cubic-bezier(0, 0.995, 0.99, 1);
-ms-transition: all 70ms cubic-bezier(0, 0.995, 0.99, 1);
-o-transition: all 70ms cubic-bezier(0, 0.995, 0.99, 1);
transition: all 70ms cubic-bezier(0, 0.995, 0.99, 1);
}
div.menu ul li a {
color: #f3f3f3;
text-transform: uppercase;
text-decoration: none;
letter-spacing: 3px;
z-index: 8;
padding: 10px;
}
div.menu li.animate {
font-size: 21px;
opacity: 1;
z-index: 8;
margin-top: 10px;
-webkit-transition: all 150ms cubic-bezier(0, 0.995, 0.99, 1);
-moz-transition: all 150ms cubic-bezier(0, 0.995, 0.99, 1);
-ms-transition: all 150ms cubic-bezier(0, 0.995, 0.99, 1);
-o-transition: all 150ms cubic-bezier(0, 0.995, 0.99, 1);
transition: all 150ms cubic-bezier(0, 0.995, 0.99, 1);
}
div.menu li.animate:nth-of-type(1) {
top: 120px;
transition-delay: 0s;
}
div.menu li.animate:nth-of-type(2) {
top: 190px;
transition-delay: 0.03s;
}
div.menu li.animate:nth-of-type(3) {
top: 260px;
transition-delay: 0.06s;
}
div.menu li.animate:nth-of-type(4) {
top: 330px;
transition-delay: 0.09s;
}
div.menu li.animate:nth-of-type(5) {
top: 400px;
transition-delay: 0.12s;
}
div.menu li.animate:nth-of-type(6) {
top: 470px;
transition-delay: 0.15s;
}
/*=========end of circle-out menu ================ */
li a:hover {
color: rgba(245, 245, 245, 0.568);
text-shadow: 0 0 px whitesmoke;
}
li a::before {
content: "";
position: absolute;
display: block;
width: 70%;
height: 4px;
bottom: 0;
left: 0;
background-color: #fbfcfd4f;
transform: scaleX(0);
transform-origin: top left;
transition: transform 0.3s ease;
}
li a:hover::before {
transform: scaleX(1);
}
js:
/*Loader =========================*/
function init(){
const loader = document.querySelector('.loader');
// reset position of the loading screen
gsap.set(loader, {
scaleX: 0,
rotation: 6,
xPercent: -5,
yPercent: -50,
transformOrigin: 'left center',
autoAlpha: 1
});
function loaderIn() {
// GSAP tween to stretch the loading screen across the whole screen
return gsap.fromTo(loader,
{
rotation: 16,
scaleX: 0,
xPercent: -5
},
{
duration: 0.8,
xPercent: 0,
scaleX: 1,
rotation: 0,
ease: 'Power4.inOut',
transformOrigin: 'left center'
});
}
function loaderAway() {
// GSAP tween to hide the loading screen
return gsap.to(loader, {
duration: 0.8,
scaleX: 0,
xPercent: 5,
rotation: -16,
transformOrigin: 'right center',
ease: 'Power4.inOut'
});
}
// do something before the transition starts
barba.hooks.before(() => {
document.querySelector('html').classList.add('is-transitioning');
barba.wrapper.classList.add('is-animating');
});
// do something after the transition finishes
barba.hooks.after(() => {
document.querySelector('html').classList.remove('is-transitioning');
barba.wrapper.classList.remove('is-animating');
});
// scroll to the top of the page
barba.hooks.enter(() => {
window.scrollTo(0, 0);
});
barba.init({
transitions: [{
async leave() {
await loaderIn();
},
enter() {
loaderAway();
}
}]
})
}
window.addEventListener('load', function(){
init();
});
/*End of loader*/
/*menu*/
if( 'ontouchstart' in window ){ var click = 'touchstart'; }
else { var click = 'click'; }
$('div.burger').on(click, function(){
if( !$(this).hasClass('open') ){ openMenu(); }
else { closeMenu(); }
});
$('div.menu ul li a').on(click, function(e){
e.preventDefault();
closeMenu();
});
function openMenu(){
$('div.circle').addClass('expand');
$('div.burger').addClass('open');
$('div.x, div.y, div.z').addClass('collapse');
$('.menu li').addClass('animate');
$('div.menu').addClass('drop');
setTimeout(function(){
$('div.y').hide();
$('div.x').addClass('rotate30');
$('div.z').addClass('rotate150');
}, 70);
setTimeout(function(){
$('div.x').addClass('rotate45');
$('div.z').addClass('rotate135');
}, 120);
}
function closeMenu(){
$('div.burger').removeClass('open');
$('div.x').removeClass('rotate45').addClass('rotate30');
$('div.z').removeClass('rotate135').addClass('rotate150');
$('div.circle').removeClass('expand');
$('.menu li').removeClass('animate');
$('div.menu').removeClass('drop');
setTimeout(function(){
$('div.x').removeClass('rotate30');
$('div.z').removeClass('rotate150');
}, 50);
setTimeout(function(){
$('div.y').show();
$('div.x, div.y, div.z').removeClass('collapse');
}, 70);
}
How to render multiple static files in express?
I am trying to use express to render a few different html files from my public folder. These are all static files. I also want to render a 404 page if a route is an invalid route is called. Here is my code.
const express = require("express")
const app = express()
app.use(express.static("public"))
app.get("/", (req, res) => {
res.render("index")
})
app.get("/about", (req, res) => {
res.render("about")
})
app.get("/contact-me", (req, res) => {
res.render("contact-me")
})
app.get("*", (req, res) => {
res.status(404).send("404 for all pages not defined in routes")
})
app.listen(8080)
The first route to render index.html works and the 404 status works, but all the other routes give me an error of “No default engine was specified and no extension provided.” I tried added an ejs view engine, but the code still doesn’t work. All html files are named properly and live in the “public” folder. Any help on this would be amazing! Thanks much!
Unable to style component using forwardRef
I am fairly new to react, so still getting my head around the component’s lifecycle.
But the problem code has left me scratching my head.
For instance, I do not understand why adding “setState(10);” causes style of the “Test” component to revert to it’s default value yet the <div ref={ref2}>Hi</div> maintains it’s style.
I am aware that “setState(10);” will cause a re-render but why is the style being reverted?
import React, { useEffect, useState, useRef } from "react";
export default function App() {
const [state, setState] = useState();
let ref1 = useRef();
let ref2 = useRef();
useEffect(() => {
console.log("useEffect called ", ref1.current);
ref1.current.style.backgroundColor = "red";
ref2.current.style.backgroundColor = "green";
setState(10);
// }, [ref.current]);
}, []);
const Test = React.forwardRef((props, ref1) => {
console.log("test called - rendering webpage", ref1.current);
return (
<div ref={ref1} {...props}>
HI from Test{" "}
</div>
);
});
return (
<div className="App">
<Test ref={ref1} />
<div ref={ref2}>Hi</div>
</div>
);
}
Console output
test called - rendering webpage undefined
useEffect called <div style="background-color: red;">HI </div>
test called - rendering webpage <div style="background-color: red;">HI </div>
How to make the default color theme in MUI transparent?
I wanted to set the background color of an element to be the primary main color but with transparency using Material-UI, tried to do it the following ways but both hasn’t worked , any suggestion i would highly appreciate it.
backgroundColor: `rgba(${theme.palette.primary.main}, 0.6)`,
&
background: `rgba(${theme.palette.primary.main}, 0.6)`,
2 eventlistener look the same but act differently [duplicate]
I’m trying to add an eventlistener where the background colour of an element would change if I were to hover over. The first leaveBlock function works fine, but the second doesn’t, even though it looks like exactly the same thing to me. I’m trying to get the first function to work so I can add a remove an eventlistener.
let backgroundBlock = (i) => {
blocks[i].style.background = 'yellow'
blocks[i].style.border = '0px solid black'
}
let leaveBlock = () => {
for (let i=0; i<blocks.length; i++) {
blocks[i].addEventListener('mouseleave', () => {
blocks[i].style.background = 'white'
blocks[i].style.border = '0px solid black'
})
}
}
vs
let leaveBlock = () => {
for (let i=0; i<blocks.length; i++) {
blocks[i].addEventListener('mouseleave', backgroundBlock(i))
}
}
CodeWorkOut X449: Encapsulated Class Design
https://codeworkout.cs.vt.edu/gym/exercises/449/practice
I need help Solving this question on this website. I tried using other materials but it didn’t work, but anyone who knows this please help, I left one of the codes to help with this.
Pass js variable in html template to google script
I have a .gs file which create a html page:
function doGet() {
return HtmlService.createHtmlOutputFromFile('index');
}
doGet();
console.log(myvariable);
and in that index.html file I’ll create a variable in tag, which I’d like to pass to my .gs file, for further putting it in google spreadsheet.
<script>
var myvariable = 10;
</script>
Is there any method that can carry out my need?
Thank you.
How can I set the hapi scope to a http request in my Ionic app?
I would like to know how to set the scope to a http request in my Ionic App. We are using Hapi Framework for the Backend built with Node.JS. I’m working with a team so I don’t have enough knowledge on the server side since I’m working on the Ionic App.
Also, I’m setting a Bearer Token to the request header which is working fine. Below is my code.
Ionic App Http Request:
let params = { eventId: this.event_id, bearerToken: '' };
let headers = new HttpHeaders();
headers.set('Content-Type', 'application/json');
headers.set('Authorization', `Bearer ${params.bearerToken}`);
headers.set('Scope', 'client');
console.log("Authorization bearer token: " + params.bearerToken);
//headers.append('scope', ['client']);
let options = { headers: headers, scope: 'client' };
return this.http
.get(this.baseUrl + `getEventShops?eventId=${params.eventId}`, options)
.pipe(map((response: any) => response)
, catchError(this.handleError));
Node.JS Route Fragment:
exports.getEventShops = {
method: 'get',
path: '/event/getEventShops',
async handler(request) {
const user = request.auth.credentials.userSession;
let data = await shopController.getEventShops(request.query, user);
return data;
},
config: {
auth: {
strategy: 'JwtAuth',
scope: ['client']
},
......
This is the error code I’m getting:
{
"statusCode": 403,
"error": "Forbidden",
"message": "Insufficient scope"
}
I know the error is because I’m setting the scope the wrong way.
How can I get a specialized log() to accept many arguments?
I have been using this logger in node:
// https://stackoverflow.com/questions/9781218/how-to-change-node-jss-console-font-color
function logC(text) {
console.log('x1b[36m%sx1b[0m', text);
}
However it does not work for multiple arguments. I want to be able to use it like:
logC(text1, text2)
Obviously, I could write out the arguments in the function signature but I was hoping there was a way to do it with the built in arguments.
javascript addEventListener / setInterval
I’m trying something new (for me anyway) – multiple slideshows on a single page. It’s for a contest where people may (or may not) submit multiple photo of something they’ve made. If they’ve submitted multiple photos, I want their entry “card” (bootstrap 4.5) to cycle through the photos.
The meat of the page is created using javascript from an xml file. That much is working. I can’t seem to get the photo change to work though.
if (pictures > 1) {
var slideId = newSlide.getAttribute("id");
newSlide.setAttribute("data-pictures", pictures);
newSlide.addEventListener('click',
function() { setInterval(changeSlide(this.id, this.dataset.pictures),
slideTimer) }
);
}
The idea was that I’d attach an event listener to the “slide” that holds the photos. I set up a count of the number of pictures in an extra attribute that records how many pictures this slide contains. Right now I’m using a “click” event because I can get some action from it but I’d really just like the process to run from the start…
In the enclosing code that loops through all the slides, I tried creating and triggering an event but that hasn’t worked:
var start = new Event('click');
...
document.dispatchEvent(start);
However if I do click on the event, I get it to run the changeSlide function (which actually changes the current picture in the slide). Right now it’s just a stub that reports the parameters passed to it and they are exactly what I expected – the id tag for the “card” image and the correct number of pictures. However it only does this when I click. It doesn’t keep calling it when the interval expires.
What am I missing?
Timer did not reach zero javascript react
I am trying to complete the FreeCodeCamp 25 + 5 clock project with React. When I website runs the project tests, it says that the timer is not reaching 00:00, even though when I click play, it clearly reaches 00:00.
I am wondering if I am having this issue because of some sort of drifting? How would I go about fixing that?
Thank you.
Codepen: https://codepen.io/Jamece/pen/jOazYvQ
I also tried a version where i use SetTimeout and implement this Stack overflow answer (setInterval timing slowly drifts away from staying accurate), but it still wouldn’t pass the test. See that codepen: https://codepen.io/Jamece/pen/mdqGomq
I also tried delaying the this.atZero function 1 second and that didn’t work
My Code:
const minTime = 1;
const maxTime = 60;
class Application extends React.Component {
constructor(props) {
super(props);
this.state = {
breakLength: .1,
sessionLength: .1,
started: false,
mode: "Session",
intervalId: "",
timeLeft: .1
};
this.breakIncrement = this.breakIncrement.bind(this);
this.breakDecrement = this.breakDecrement.bind(this);
this.sessionIncrement = this.sessionIncrement.bind(this);
this.sessionDecrement = this.sessionDecrement.bind(this);
this.sessionTimer = this.sessionTimer.bind(this);
this.breakTimer = this.breakTimer.bind(this);
this.pause = this.pause.bind(this);
this.timers = this.timers.bind(this);
this.initialDisplay = this.initialDisplay.bind(this);
this.switchMode = this.switchMode.bind(this);
this.begin = this.begin.bind(this);
this.reset = this.reset.bind(this);
this.atZero = this.atZero.bind(this);
}
initialDisplay() {
let initialDisplay =
this.state.sessionLength < 10
? "0" + this.state.sessionLength + ":" + "00"
: this.state.sessionLength + ":" + "00";
return initialDisplay;
}
begin() {
this.setState({ started: !this.state.started });
if (this.state.started) {
this.pause();
} else {
if (this.state.mode == "Session") {
this.sessionTimer();
} else {
this.breakTimer();
}
}
}
atZero(){
var audio = document.getElementById("beep");
clearInterval(this.state.intervalId);
this.switchMode();
audio.play();
}
switchMode() {
if (this.state.mode == "Session") {
this.setState({
mode: "Break",
timeLeft: this.state.breakLength
});
this.breakTimer();
} else if (this.state.mode == "Break") {
this.setState({
mode: "Session",
timeLeft: this.state.sessionLength
});
this.sessionTimer();
}
}
breakIncrement() {
if (!this.state.started) {
if (this.state.breakLength !== maxTime) {
this.setState((state) => ({
breakLength: state.breakLength + 1
}));
}
}
}
breakDecrement() {
if (!this.state.started) {
if (this.state.breakLength !== minTime) {
this.setState((state) => ({
breakLength: state.breakLength - 1
}));
}
}
}
sessionIncrement() {
if (!this.state.started) {
if (this.state.sessionLength !== maxTime) {
this.setState((state) => ({
sessionLength: state.sessionLength + 1
}));
}
}
}
sessionDecrement() {
if (!this.state.started) {
if (this.state.sessionLength !== minTime) {
this.setState((state) => ({
sessionLength: state.sessionLength - 1
}));
}
}
}
timers(length, display, paused) {
var start = Date.now();
const timer = () => {
const distance = (length) - (((Date.now() - start) / 1000) | 0);
var minutes = (distance / 60) | 0;
var seconds = distance % 60 | 0;
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.textContent = minutes + ":" + seconds;
this.setState({ timeLeft: distance / 60 });
const sleep = (milliseconds) => {
return new Promise(resolve => setTimeout(resolve, milliseconds))
};
if (distance < 0) {
this.atZero();
}
};
timer();
var intervalId = setInterval(timer,1000);
this.setState({
intervalId: intervalId
});
}
sessionTimer() {
var length = this.state.timeLeft * 60;
var display = document.getElementById("time-left");
this.timers(length, display);
this.setState({ started: true });
}
breakTimer() {
var length = this.state.timeLeft * 60;
var display = document.getElementById("time-left");
this.timers(length, display);
this.setState({ started: true });
}
pause() {
if (this.state.intervalId) {
clearInterval(this.state.intervalId);
}
this.setState({ started: !this.state.started });
}
reset() {
clearInterval(this.state.intervalId);
this.setState({
breakLength: 5,
sessionLength: 25,
started: false,
mode: "Session",
intervalId: "",
timeLeft: 25
});
let resetValue = this.initialDisplay();
let resetDisplay = document.getElementById("time-left");
resetDisplay.textContent = resetValue;
var audio = document.getElementById("beep");
audio.pause();
audio.currentTime = 0;
}
render() {
let pausePlayStyle = this.state.started
? "fa-solid fa-pause"
: "fa-solid fa-play";
return (
<div className="container-fluid px-0">
<div className="main d-flex justify-content-center align-items-center">
<div className="d-flex flex-column align-items-center">
<div className="heading">25 + 5 Clock</div>
<div className="d-flex">
<div className="d-flex flex-column break align-items-center">
<div id="break-label" className="mb-3 h3">
Break Length
</div>
<div className="d-flex flex-row">
<button
className="btn btn-top"
id="break-increment"
onClick={this.breakIncrement}
>
<i class="fa-solid fa-arrow-up"></i>
</button>
<div className="mx-3 h3" id="break-length">
{this.state.breakLength}
</div>
<button
className="btn btn-top"
id="break-decrement"
onClick={this.breakDecrement}
>
<i class="fa-solid fa-arrow-down"></i>
</button>
</div>
</div>
<div className="d-flex flex-column align-items-center session">
<div id="session-label" className="mb-3 h3">
Session Length
</div>
<div className="d-flex flex-row">
<button
className="btn btn-top"
id="session-increment"
onClick={this.sessionIncrement}
>
<i class="fa-solid fa-arrow-up"></i>
</button>
<div className="h3 mx-3" id="session-length">
{this.state.sessionLength}
</div>
<button
className="btn btn-top"
id="session-decrement"
onClick={this.sessionDecrement}
>
<i class="fa-solid fa-arrow-down"></i>
</button>
</div>
</div>
</div>
<div className="d-flex flex-column align-items-center timer-border">
<div className="h2 mb-3 session" id="timer-label">
{this.state.mode}
</div>
<div className="display-1 timer mb-4" id="time-left">
{this.initialDisplay()}
</div>
<div className="d-flex flex-row">
<button
className="btn btn-bottom"
id="start_stop"
onClick={this.begin}
>
<i className={pausePlayStyle}></i>
</button>
<button
className="btn btn-bottom"
id="reset"
onClick={this.reset}
>
<i className="fa-solid fa-rotate"></i>
</button>
</div>
</div>
</div>
</div>
<audio
id="beep"
preload ="auto"
src="https://docs.google.com/uc?export=download&id=12NsFWtJh3pBCqQ8gV62EZF3OevgAy8ff"
/>
</div>
);
}
}
ReactDOM.render(<Application />, document.getElementById("root"));