I’m using bootstrap-slider 10.6.2.
My step is 5000 and I can’t reach the max value because the max value isn’t multiples of 5000.
There is any way to reach the max value when the step isn’t multiples of 5000?
Category: javascript
Category Added in a WPeMatico Campaign
Passing index with file using dropzone
I am using dropzone in vue js and would like to pass the index with the file to add the file to the corresponding array.
<div v-for="(lang, key) in $v.model.langs.$each.$iter" :key="key">
<Dropzone id="bar" ref="bar" @vdropzone-complete="vfileAdded" :options="options" :destroyDropzone="true" :useCustomSlot="true">
</Dropzone>
</div>
here is my method
vfileAdded(file) {
console.log(file)
},
In this case I get file to my method but if I using @vdropzone-complete="vfileAdded(file,key)"
and method
vfileAdded(file, key) {
console.log(file)
},
this I receives key parameter but file is undefined.
How can I pass file with key to my method vfileAdded
Opacity in CSS makes cards on my page overlap the navbar
I am building a website for a crypto coin meme, the problem is that my navbar doesn’t overlap some of the links and cards I created that have ‘opacity’ argument in CSS. I want to make my navbar overlap everything when I scroll down.
Example photo https://imgur.com/a/Ipd1lOT
HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@200&family=Roboto&family=Roboto+Slab&display=swap" rel="stylesheet">
<link rel="stylesheet" href="CSS/navbar.css">
<link rel="stylesheet" href="CSS/buttons.css">
<link rel="stylesheet" href="CSS/details.css">
<link rel="stylesheet" href="CSS/container.css">
<link rel="stylesheet" href="CSS/container2.css">
<link rel="stylesheet" href="CSS/container3.css">
<link rel="stylesheet" href="CSS/footer.css">
<link rel="icon" type="image/gif/png" href="assets/shitcoin_logo.png">
<title>Shitcoin - Worst crypto currency</title>
</head>
<body>
<header>
<div class="Nav-Container">
<a href=""><img class="logo" src="assets/shitcoin_logo.png" alt=""></a>
<nav class="navbar">
<ul>
<li class="navbar-links"><a href="">Home</a></li>
<li class="navbar-links"><a href="">About us</a></li>
<li class="navbar-links"><a href="">Stake</a></li>
<li class="coinprice"><img src="assets/shitcoin_logo.png" alt=""><p>: $0.00213</p></li>
<li><a href="#" class="walltet">Connect Wallet</a></li>
</ul>
</nav>
</div>
</header>
<div class="container1">
<div class="aboutcointext">
<h1>Welcome to the <span>THUNDER</span> project homepage</h1>
<h2>Worst cypto coin available on the market!</h2>
<a href="" class="buycoin">Buy Thunder (THD)</a>
</div>
<div class="aboutcoinlinks">
<a href="" class="fb">Facebook</a>
<a href="" class="insta">Instagram</a>
<a href="" class="twitter">Twitter</a>
</div>
</div>
<div class="details">Why you should <span>NOT</span> invest in us?</div>
<div class="container2">
<div class="reason1">
<img src="assets/man_on_toilet.png" alt="">
<h3>Reason 1:</h3>
<p>We have very little to no experience in the crypto world</p>
</div>
<div class="reason2">
<img src="assets/just_toilet.png" alt="">
<h3>Reason 2:</h3>
<p>This coin is made as a joke and should not be taken seriously</p>
</div>
<div class="reason3">
<img src="assets/money-pngrepo-com.png" alt="">
<h3>Reason 3:</h3>
<p>Your capital is at risk and we are not responsible for your money</p>
</div>
</div>
<div class="mining_details">You can mine <span>Shitcoin</span> but we don't guarantee you'll make money</div>
<div class="container3">
<div class="">
<p>Compact tool made by us to help you mine easier:</p>
<a href="" class="minerbutton">Download THD miner</a>
</div>
</div>
<footer>
<div class="footer-container">
<h2>Contact Us</h2>
<ul>
<li><a href="">Support</a></li>
<li><a href="">Email</a></li>
<li><a href="">About Us</a></li>
</ul>
</div>
<div class="footer-container">
<h2>FAQ</h2>
<ul>
<li><a href="">How to buy?</a></li>
<li><a href="">How to sell?</a></li>
<li><a href="">How to mine THD?</a></li>
<li><a href="">More...</a></li>
</ul>
</div>
</footer>
</body>
</html>
CSS code for navbar:
body{
margin: 0;
padding: 0;
font-family: 'Roboto', sans-serif;
background: linear-gradient(0deg, rgba(47,48,48,1) 0%, rgba(73,80,87,1) 100%);
/* background-color: #495057; */
color: white;
}
header{
position: sticky;
top: 0;
background-color: #ADB5BD;
}
header::after{
content: '';
display: table;
clear:both;
}
.Nav-Container{
width: 80%;
margin: 0 auto;
}
.logo{
width: 5rem;
float: left;
}
.navbar{
float: right;
/* text-align: center; */
}
.navbar ul{
list-style: none;
margin:0;
padding:0;
}
.navbar li{
display: inline-block;
margin-left: 70px;
padding-top: 31px;
position: relative;
}
.navbar a{
color: #495057;
text-decoration: none;
text-transform: uppercase;
}
.navbar a:hover{
color: white;
}
.navbar-links::before{
content:'';
display: block;
height: 5px;
background-color: white;
position: absolute;
top: 0;
width: 0%;
transition: all ease 250ms;
}
.navbar-links:hover::before{
width: 100%;
}
.navbar img{
float:left;
width: 2rem;
position: relative;
bottom: 7px;
}
.navbar p{
display: inline;
}
.wallet{
display: inline;
padding: 5px 5px;
border: 1px solid #495057;
border-radius: 7px;
}
CSS code for social media links:
.aboutcoinlinks{
display:flex;
flex-direction: row;
flex-wrap: wrap;
}
.aboutcoinlinks a{
align-self: flex-start;
margin-left:10px;
padding: 20px 15px;
text-decoration: none;
color: white;
text-align: center;
background-color: black;
opacity:70%;
transition: all ease 250ms;
}
.aboutcoinlinks a:hover{
opacity: 100%;
}
.aboutcoinlinks .fb{
padding: 20px 15px;
background-color: #4267B2;
border: 1px solid #4267B2;
border-radius: 10px;
}
.aboutcoinlinks .insta{
padding: 20px 15px;
background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
border: 1px solid linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);;
border-radius: 10px;
}
.aboutcoinlinks .twitter{
padding: 20px 15px;
background-color: #1DA1F2;
border: 1px solid #1DA1F2;
border-radius: 10px;
}
How are Jest mocks structured for different npm package imports/exports?
Using Jest testing in a React Native Expo project
I’m trying to mock some node modules in my project, but many of them have different import export methods.
1 Some are destructured:
import { myFunc } from 'my-module'
2 Some are default:
import myModule from 'my-module'
3 Some are the everything import:
import * as myModule from 'my-module'
4 In other cases, I need to mock a nested function like:
myModule.dosomething()
How do I mock each of these? I cannot for the life of me find a guide that explains it.
Assign the same text in all the same ID or Class
On my pages it repeats short content like image licenses, or other things. The convenience would also be to be able to edit them all at the same time by typing just one. I know it’s against SEO, but I don’t really care about search engine penalties.
I can’t get this javascript to work. And yet I think I wrote it right.
<script type='text/javascript'>
//<![CDATA[
var x = document.getElementById("license").document.querySelectorAll("#license");
var i;
var text = "Hello world";
for (i = 0; i < x.length; i++){
x[i].innerHTML = text;
}
//]]>
</script>Concept involved in using nested Knex
In my programming in Node.JS I made some code that worked, but I want to understand the concept of how it works.
In the code in question I use knex to retrieve information from a MySQL database. I import the knex module for that:
const config = {...}
const knex = require('knex')(config)
So far nothing new, only this time I needed to do a nested query and it was the first time. In this case, I consulted the sales data and then the sale items. I did it as follows:
const getSales = async () => {
await knex("tbl_vendas")
.select(knex.raw("tbl_vendas.id_vendas, tbl_vendedores.nome AS vendedor, " +
"tbl_clientes.nome_razaosocial AS cliente, tbl_vendas.data, tbl_vendas.hora, " +
"tbl_vendas.cupom, tbl_vendas.total"))
.leftOuterJoin("tbl_vendedores", "tbl_vendedores.id_vendedores", "tbl_vendas.id_vendedores")
.leftOuterJoin("tbl_clientes", "tbl_clientes.id_clientes", "tbl_vendas.id_clientes")
.then(sales => {
const rows = sales.map(sale => {
return knex("tbl_vendas_itens")
.select("tbl_vendas_itens.id_vendas_itens AS id_item", "tbl_produtos.descricao",
"tbl_vendas_itens.qtde", "tbl_vendas_itens.vl_unitario", "tbl_vendas_itens.desconto",
"tbl_vendas_itens.vl_total")
.leftOuterJoin("tbl_produtos", "tbl_vendas_itens.id_produtos", "tbl_produtos.id_produtos")
.where("tbl_vendas_itens.id_vendas", "=", sale.id_vendas)
.then(sales_items => {
const newRow = { ...sale, itens: [...sales_items] }
return newRow
})
})
return Promise.all(rows)
})
.then(console.log);
}
Writing this code was pretty intuitive and it worked, but then I was amazed that I used the knex constant twice, one inside the other, and it didn’t hurt.
I ran a console.log(typeof(knex)) to find out what it was and it returned that it is a function.
Could someone explain the theory behind the use of knex inside the other and help me understand why it is okay to do this?
Discord.JS data.some is not a function when checking message.content against array
I’m trying to check message.content against a JSON and an API link that is fetched and stored to the const data for a automod bot.
The JSON and API link both contain arrays with 600+ items stored.
The idea is to check against a locally stored JSON, and then an API to prevent links being posted.
The code works fine for 90% of the time, but while testing and sending multiple links in a short space of time, i get this error:
TypeError: data.some is not a function
This is the code:
client.on('messageCreate', async (message) => {
try {
const guild = client.guilds.cache.get(message.guildId);
const member = guild.members.cache.get(message.author.id);
const modLogs = client.channels.cache.get(modLogsChannelID);
const response = await fetch(
definedAPI,
);
const data = await response.json();
if (badLinksJSON.some(letter => message.content.includes(letter))) {
console.log(`${member.user.tag} used a bad link and has been muted.`)
member.roles.add(mutedRoleID).catch(err => console.error);
message.channel.send(`${message.author.toString()} You have been muted for: **Bad Link Usage**`).catch(console.error).then(message.delete()).catch(err => console.error);
} else if (data.some(word => message.content.includes(word))) {
console.log(`${member.user.tag} used a bad link and has been muted.`)
member.roles.add(mutedRoleID).catch(err => console.error);
message.channel.send(`${message.author.toString()} You have been muted for: **Bad Link Usage**`).catch(console.error).then(message.delete()).catch(err => console.error);
}
} catch (error) {
message.channel.send('Oops, there was an error fetching the API');
console.log(error);
}
}
Note: > Multiple variables are defined in the code file above, I have not included them in the code snippet
The try and catch were added to prevent the bot from crashing if this error occured. I am aware it could be done other ways.
Any help is appreciated, TIA.
Getting Accordion Elements to automatically close When Others Are Opened
I am working on an accordion; however, I have two intertwined but different tasks to accomplish the first is how to get the “buttons” to automatically close when another element is opened. I’m not using an existing framework (i.e. bootstrap) as the environment I’m developing in can’t use external resources for displaying content. The other issue I’m trying to solve is how to add rows of information into accordioned spaces, I’m looking for a more effective method that using a table; however, if the table element seems to be the best method that would be acceptable. I have included the HTML, CSS and JavaScript I’ve been using to develop this element and would appreciate any assistance that could be provided.
document.querySelectorAll('.accordion__button').forEach(button => {
button.addEventListener('click', () => {
const accordionContent = button.nextElementSibling;
button.classList.toggle('accordion__button--active');
if (button.classList.contains('accordion__button--active')) {
accordionContent.style.maxHeight = accordionContent.scrollHeight + '100%';
} else {
accordionContent.style.maxHeight = 0;
}
});
});@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
.search-title {
box-sizing: border-box !important;
display: block !important;
margin: 0 0 30px 0;
padding: 0;
font-family: 'Montserrat', sans-serif !important;
font-weight: 800 !important;
font-size: 2.6em !important;
color: #18467F !important;
}
.subsection-title {
box-sizing: border-box !important;
display: block !important;
margin: 0 0 5px 0;
padding: 0;
font-family: 'Montserrat', sans-serif !important;
font-size: 2.3em;
font-weight: 600;
color: #C6B66D !important;
}
.update-article {
padding-left: 25px;
padding-right: 25px;
}
.search-sub-title {
box-sizing: border-box;
display: block;
margin: 0 0 15px 0;
font-family: 'Montserrat', sans-serif;
font-weight: 400;
font-size: 2em;
color: #C6B66D;
}
.search-text {
font-size: 1.35rem !important;
font-family: 'Montserrat', sans-serif !important;
font-weight: 300;
line-height: 1.75 !important;
}
.search-heading {
box-sizing: border-box;
display: block;
margin: 0 0 15px 0;
font-family: 'Montserrat', sans-serif;
font-weight: 600;
font-size: 1.3em;
color: #18467F;
}
.presidential-search-link a {
color: #18467F;
text-decoration-color: #C6B66D !important;
}
.accordion {
border: none !important;
}
.accordion__button {
box-sizing: border-box !important;
display: block !important;
width: 100%;
padding: 25px;
border: none;
outline: none;
cursor: pointer;
background: #18467F;
font-family: "Roboto Condensed", sans-serif !important;
font-size: 20px !important;
font-weight: 800;
color: #FFF;
text-align: left;
transition: background 0.2s ease all;
}
.accordion__button::after {
content: '25be';
float: right;
transform: sclae(1.5);
color: #C6B66D;
}
.accordion__button--active {
background: #2771CC;
}
.accordion__button--active::after {
content: '25b4';
}
.accordion__content {
box-sizing: border-box !important;
overflow: hidden !important;
max-height: 0;
transition: max-height 0.2s ease all;
padding: 0 15px;
margin-bottom: 15px;
font-family: sans-serif;
font-size: 18px;
line-height: 1.5;
background: #D0D5D9;
}
.hc-collection-list {
box-sizing: border-box !important;
display: grid !important;
grid-column-gap: 16px !important;
grid-row-gap: 16px !important;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)) !important;
}
.hc-day-events {
box-sizing: border-box !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
}
.hc-collection-item-1,
.hc-collection-item-2,
.hc-collection-item-3,
.hc-collection-item-4,
.hc-collection-item-5,
.hc-collection-item-6,
{
box-sizing: border-box !important;
display: flex !important;
width: 100% !important;
min-height: 350px !important;
flex-direction: row !important;
justify-content: space-between !important;
flex-wrap: wrap !important;
align-items: center !important;
align-content: center !important;
}
.event-date {
box-sizing: border-box !important;
margin-top: 10px !important;
margin-bottom: 10px !important;
font-family: sans-serif !important;
font-size: 52px !important;
text-transform: uppercase !important;
color: #888b8d !important;
text-align: left !important;
}
.hc-event-details {
box-sizing: border-box !important;
display: flex !important;
flex-direction: column !important;
flex-wrap: wrap !important;
justify-content: space-between !important;
padding-left: 30px !important;
padding-right: 30px !important;
padding-bottom: 30px !important;
}
.hc-event-details-no-link {
box-sizing: border-box !important;
margin-top: -220px !important;
display: flex !important;
flex-direction: column !important;
flex-wrap: wrap !important;
justify-content: space-between !important;
padding-left: 30px !important;
padding-right: 30px !important;
padding-bottom: 30px !important;
}
.event-name {
box-sizing: border-box !important;
background: #18467F;
padding: 10px 10px;
line-height: 1 !important;
margin-top: 20px !important;
margin-bottom: 10px !important;
color: #FFF !important;
text-transform: uppercase !important;
font-family: sans-serif !important;
font-size: 24px !important;
font-weight: 600;
text-decoration: none !important;
}
.event-location {
box-sizing: border-box !important;
margin-top: 5px !important;
margin-left: -15px;
color: #18467F !important;
font-family: sans-serif !important;
font-size: 18px !important;
text-transform: none !important;
}
.event-location.subset {
box-sizing: border-box !important;
margin-top: 5px !important;
margin-left: -15px;
color: #18467F !important;
font-family: sans-serif !important;
font-size: 18px !important;
text-transform: none !important
}
.event-location li {
box-sizing: border-box !important;
margin-bottom: 20px !important;
color: #18467F;
font-family: sans-serif !important;
line-height: 1.15 !important;
font-weight: 600;
}
.event-location.subset li {
box-sizing: border-box !important;
margin-bottom: 20px !important;
color: #18467F;
font-family: sans-serif !important;
line-height: 1.15 !important;
font-weight: 100 !important;
list-style: none;
}
span.item-details {
box-sizing: border-box !important;
margin-top: 15px;
font-weight: 100 !important;
text-decoration: underline;
font-family: sans-serif !important;
font-size: 18px !important;
text-transform: none !important;
}
span.address {
font-weight: 100 !important;
}
.event-location a {
box-sizing: border-box !important;
color: #18467F;
text-decoration: none !important;
line-height: 1.15 !important;
transition: all 0.6s ease;
}
.event-location a:hover {
color: #888B8D;
text-decoration: underline !important;
}
.event-location.subset li::before {
content: "";
width: 8px;
height: 8px;
display: inline-block;
float: left;
transform: skew(-10deg);
transform-origin: left bottom;
background-color: #888B8D;
margin: 5px 10px 0px -20px;
}
.hc-collection-item-1 {
box-sizing: border-box !important;
background-position: 50% 50% !important;
background-size: cover !important;
}
.visit__campus__title {
box-sizing: border-box !important;
display: block !important;
width: 100% !important;
font-family: 'Montserrat', sans-serif !important;
font-weight: 600 !important;
font-size: 32px !important;
letter-spacing: 0.01em !important;
color: #18467F !important;
line-height: 1.1 !important;
text-transform: uppercase !important;
margin-bottom: 30px !important;
}
.visit__campus__text {
box-sizing: border-box !important;
display: block !important;
color: #262626 !important;
font-family: 'Montserrat', sans-serif !important;
font-size: 18px !important;
font-weight: 400 !important;
line-height: 1.95 !important;
margin-bottom: 15px !important;
}
.count__up {
box-sizing: border-box !important;
width: 100% !important;
height: auto !important;
margin: 30px auto 30px auto !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
padding: 60px 20px !important;
background-image: url(https://bluetigerportal.lincolnu.edu/image/image_gallery?uuid=9d96d0d7-1d1b-4d7d-96da-37abb1485ebb&groupId=6616610&t=1599054711875) !important;
background-position: 50% 50% !important;
background-size: auto !important;
overflow: auto !important;
}
.statistics__container {
box-sizing: border-box !important;
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)) !important;
grid-row-gap: 30px !important;
grid-column-gap: 15px !important;
}
.statistics__details {
box-sizing: border-box !important;
display: flex !important;
flex-direction: row !important;
flex-wrap: wrap !important;
justify-content: space-between !important;
}
.stat1,
.stat2,
.stat3 {
box-sizing: border-box !important;
display: flex !important;
width: 100% !important;
flex-direction: row !important;
justify-content: space-between !important;
flex-wrap: wrap !important;
align-items: center !important;
align-content: center !important;
}
.text__1 {
box-sizing: border-box !important;
position: relative !important;
left: -15px !important;
}
.text__2 {
box-sizing: border-box !important;
position: relative !important;
left: -38px !important;
}
.text__3 {
box-sizing: border-box !important;
position: relative !important;
left: -65px !important;
}
.counter {
box-sizing: border-box !important;
display: block !important;
float: left !important;
width: auto !important;
margin: 0 auto !important;
color: #F5C431 !important;
font-size: 4.5rem !important;
font-family: 'Montserrat', sans-serif !important;
}
.info {
box-sizing: border-box !important;
display: block !important;
width: auto !important;
margin: auto 15px auto auto !important;
color: #FFF !important;
text-transform: uppercase !important;
font-size: 1.5rem !important;
font-family: 'Montserrat', sans-serif !important;
line-height: 1.5 !important;
text-align: left !important;
}
.tour__information__wrapper {
box-sizing: border-box !important;
margin-bottom: 30px !important;
width: 100% !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
}
.information {
box-sizing: border-box !important;
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(50vh, 1fr)) !important;
grid-row-gap: 15px !important;
grid-column-gap: 15px !important;
}
.left-column .image {
box-sizing: border-box !important;
display: inline-block !important;
width: 100% !important;
min-width: 350px !important;
height: auto !important;
min-height: 350px !important;
}
.right-column .video {
box-sizing: border-box !important;
display: inline-block !important;
width: 100% !important;
}
.video {
width: 100% !important;
height: 100% !important;
min-height: 350px !important;
}
.tour__url {
box-sizing: border-box !important;
display: inline-block !important;
width: 100% !important;
padding-top: 15px !important;
padding-left: 15px !important;
padding-bottom: 15px !important;
color: #18467F !important;
font-family: 'Montserrat', sans-serif !important;
font-size: 1.6rem !important;
font-weight: 600 !important;
letter-spacing: 0.06em !important;
text-transform: uppercase !important;
text-decoration: none !important;
cursor: pointer !important;
background: rgba(136, 139, 141, 0.6) !important;
}<div class="accordion">
<h3 class="search-title">Academic Calendar</h3>
<button type="button" class="accordion__button">List</button>
<div class="accordion__content">
<div class="list__container">
<div class="list__item">
<div class="list__item__content">
<section class="update-article">
<div class="table_container">
<div class="table_heading">
<h2 class="admissions__steps">Columned List of Values</h2>
</div>
<div class="row">
<div class="column left"></div>
<div class="column right"></div>
</div>
</div>
</section>
<section class="update-article">
<div class="table_container">
<div class="table_heading">
<h2 class="admissions__steps">Columned List of Values</h2>
</div>
<div class="row">
<div class="column left"></div>
<div class="column right"></div>
</div>
</div>
</section>
</div>
</div>
</div>
</div>
<button type="button" class="accordion__button">Spring</button>
<div class="accordion__content">
<div class="list__container">
<div class="list__item">
<div class="list__item__content">
<p class="admissions__steps">Some Additional Information, same as above></p>
</div>
</div>
<div class="list__item">
<div class="list__item__content">
<p class="admissions__steps">More of the same as above</p>
</div>
</div>
</div>
</div>
<button type="button" class="accordion__button">Summer</button>
<div class="accordion__content">
<div class="list__container">
<div class="list__item">
<div class="list__item__content">
<p class="admissions__steps">Different set of data but again same as above</p>
</div>
</div>
<div class="list__item">
<div class="list__item__content">
<p class="admissions__steps">More of this type of information continued from above</p>
</div>
</div>
</div>
</div>
</div>How to send Javascript file object to AWS Lambda function
I’m wondering how to send Javascript File object to AWS Lambda. I have a File object which collected from <input type="file"> and formed as File() object. I’m sending the File() object through an HTTP request to AWS Lambda but ended up getting undefined on the Lambda function.
Front End(Javascript)
let uploadFile = new File(
[file],
Date.now() + " - " + file.name,
{type: file.type}
)
const body = {
payload: {
file: uploadFile,
comment: "Uploading File."
}
}
fetch(url, {
method: "POST",
headers: {
"Authorization": token,
"Content-Type": "application/json"
},
body: body
}).catch((err) => {
reject(err.json());
});
Back End (AWS Lambda, Typescript)
const handler = async (event: APIGatewayProxyEventV2): Promise<any> => {
console.log("Whole Event Body:", event.body);
console.log("Event Body Payload:", event.body.payload);
...
}
I’m just getting undefined from the event. I wonder am I doing it correctly? Is it possible to pass the File() object to AWS Lambda?
addEventListener from bindEvents method in OOP doesn’t work
I currently work on a school project with JS and I need to etablish a modal and a lightbox in the same page.
I work with classes and when I initialize my Lightbox and Modal classes, only one of them works.
That is, the methods called when initializing my classes work but the bindEvents method containing my addEventListener doesn’t work.
Here are more details :
My Controller class
class Controller {
init = () => {
...
Modal.init()
Lightbox.init()
}
}
My Modal class
class Modal {
init = () => {
// ...
this.bindEvents()
}
bindEvents = () => {
const openBtn = document.querySelector('.modal-btn')
// ...
openBtn.addEventListener('click', this.open)
// ...
}
open = () => {
// Open modal function
}
}
export default new Modal()
My Lightbox class
class Lightbox {
init = () => {
// ...
this.bindEvents()
}
bindEvents = () => {
const openBtn = document.querySelector('.lightbox-btn')
// ...
openBtn.addEventListener('click', this.open)
// ...
}
open = () => {
// Open lightbox function
}
}
export default new Lightbox()
The only class whose events work is the last to be called, so Lightbox in this example.
I also want to clarify that I work with native JavaScript and that each of my two classes work, the problem remains with the events of the first class called which do not work.
Thanks for taking a look, I think I’ve tried almost everything!
Unable to edit data on the same view page laravel
I want to update the business hour on the same page. There are other answer that I review in the stackoverflow but I still cannot manage. Help really appreciated.
Model
namespace AppModels;
use IlluminateDatabaseEloquentFactoriesHasFactory;
use IlluminateDatabaseEloquentModel;
class Hour extends Model
{
public $table = 'biz_hour';
protected $primaryKey = 'day_id';
protected $fillable = [
'day_id', 'day_name', 'start_time', 'end_time', 'day_off'
];
public $timestamps = false;
}
Controller
public function update(Request $request, Hour $biz_hour)
{
$request->validate([
'start_time' => 'required',
]);
$start_time = AppModelsHour::find($biz_hour);
['start_time' => $request->start_time];
foreach($biz_hour as $biz_hour){
$start_time->save();
}
return redirect('start_time');
//$biz_hour->update($request->all());
//return redirect()->route('biz_hour.index');
}
Biz_hour.blade.php
<div class="table-responsive">
<table class="table">
<thead class="text-uppercase">
<tr>
<th scope="col">Day</th>
<th scope="col">Start Time</th>
<th scope="col">End Time</th>
<th scope="col">is Day off?</th>
</tr>
</thead>
@foreach($biz_hour as $biz_hour)
<form action="{{ route('biz_hour.update',$biz_hour->day_id) }}" method="POST">
@csrf
@method('PUT')
<tbody>
<tr>
<th scope="row"><br>{{$biz_hour->day_name}}</th>
<td><div class="form-group">
<input class="form-control" type="time" value={{ Carbon::parse($biz_hour->start_time)->format('h:i') }} name="start_time"></div>
</td>
<td><div class="form-group">
<input class="form-control" type="time" value={{$biz_hour->end_time}} name="end_time"></div>
</td>
<td><br><label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label></td>
</tr>
@endforeach
</tbody>
</table>
</div>
</div>
<div class="main-content-inner">
<div class="col-lg-6 mt-5">
<button type="submit" class="btn btn-primary mb-3" name="upload">Save</button>
</div>
</div>
</form>
After clicking save button, the page only refresh but the data is not sent to the database. Thanks in advance.
Activating CSS through a HTML button press
I was wondering if you can activate some CSS through an HTML button press or scrolling to a certain point. It’s preferred if it’s through JS.
Replace selector with array item
I would like to archive that I have an Array, with 3-4 Items and then I want to itterate throw all of them and change the selector in the function with the items of the array.
let items = ['Name','Person,'New']
then my function
$('.btn').on("click", function(){do smth});
and then the foreach .btn should be like name or person, and I want maybe to add late more Items to the array. How should I do it?
why TODO list is not working properly in reactjs
import React from 'react'
const Todo = () => {
const[newitem,setNewitem]=React.useState("");
const [list,setList]=React.useState([]);
function addItem(todovalue)
{
if(todovalue!=="")
{
const newItem={
id:1 + Math.random(),
value:todovalue,
isDone:false
}
const list=[...list];
list.push(newItem);
setNewitem({list,newItem:""});
}
}
function deleteItem(id)
{
const list=[...list];
const updatedlist=list.filter(item=>item.id!==id);
setNewitem({updatedlist});
}
function update(input)
{
setNewitem({newItem:input});
}
return (
<div className="container">
<h1>Add an item...</h1>
<input type="text" placeholder="add item" required value={newitem} onChange={e=>update(e.target.value)}/>
<button clasName="add-btn" onClick={()=>addItem(newitem)} disabled={newitem.length}>Add Todo</button>
<div className="list">
<ul>
{
list.map(item=>{
return(
<li key={item.id}>
<input type="checkbox" checked={item.isDone} onChange={()=>{}}/>
{item.value}
<button className="btn" onClick={()=>{deleteItem(item.id)}}>Delete</button>
</li>
)
})
}
</ul>
</div>
</div>
)
}
export default Todo
when we going to write some text in text field it get only [object Object] and when we click on Add Todo button its throws error “Cannot access ‘list’ before initialization” how to resolve that one
How to get a different return type according to the object accessing key?
Let me simply put it like,
interface PlanValue {
planName: string;
startDate: string;
}
type DeviceKey = 'pc' | 'mobile' | 'laptop';
type PlanType = Record<DeviceKey, PlanValue>
interface Subscription {
valid: boolean;
plan: PlanType;
}
Let’s say that a new device key called Kiosk is added to DeviceKey type.
But the return type of this key should be boolean.
For example
const subsc1: Subscription = new Subscription();
const subsc2: Subscription = new Subscription();
console.log(subsc1.plan.pc) // type should be PlanValue
console.log(subsc2.plan.Kiosk) // type should be boolean
I can’t change the Subscription.plan type to PlanType | boolean because it will break other codes that are referring to this type.
How can I get a different return type according to the accessing key during the runtime?