Category: javascript

This is my Javascript code –

var slideshows = document.querySelectorAll('[data-component="slideshow"]');
slideshows.forEach(initSlideShow);
function initSlideShow(slideshow) {
    var slides = document.querySelectorAll(`#${slideshow.id} [role="list"] .slide`);
    var index = 0, time = 10000;
    slides[index].classList.add('active');
    setInterval( () => {
        slides[index].classList.remove('active');
        index++;
        if (index === slides.length) index = 0;
        slides[index].classList.add('active');
    }, time);
}

This is my markup –

<?php foreach( $hero_images as $image_id ): ?>
    <div class="slide" style="background-image: linear-gradient(rgba(0,0,0, 0.5), rgba(0,0,0, 0.5)), url('<?php echo wp_get_attachment_image_url( $image_id, 'full' );  ?>')">
        <div class="text">
            <h1>Example</h1>
            </div>
        </div>
    </div>
<?php endforeach; ?>

I have an array of images from Word Press and have them in the background of the parent div.

This is the CSS –

[data-component="slideshow"] .slide {
  display: none;
}

[data-component="slideshow"] .slide.active {
  display: block;
}

It just toggles the CSS display rule

The code works and the divs transition between display none and display block, but I want the transition to be smoother. I want to add a fade in.

I thought something like this would do it –

.slide {
  opacity: 0;
  transition: 1s;
}

.active {
  opacity: 1 !important;
  transition: 1s;
}

But it does not have any affect.

Is it possible to add a delay to the transition of display:none to display:block?

<KeyboardAvoidingView behavior={"position"} style={{width: "100%", position: "absolute", bottom: 0}} >
    <View style={styles.container} >
            <TextInput />
    </View>
</KeyboardAvoidingView>

In this code snippet, if I add some text on TextInput and tap in the middle, the caret does not move.

If I remove KeryboardAvoidingView the caret moves and text is selected correctly.

I’m running a nodejs application in a container, but after a certain time the application breaks with the following error:

node:events:496
      throw er; // Unhandled 'error' event
      ^

error: terminating connection due to administrator command
    at Parser.parseErrorMessage (/home/servidor/nodetest/node_modules/pg-protocol                                                                                                                                                             /dist/parser.js:287:98)
    at Parser.handlePacket (/home/servidor/nodetest/node_modules/pg-protocol/dist                                                                                                                                                             /parser.js:126:29)
    at Parser.parse (/home/servidor/nodetest/node_modules/pg-protocol/dist/parser                                                                                                                                                             .js:39:38)
    at Socket.<anonymous> (/home/servidor/nodetest/node_modules/pg-protocol/dist/                                                                                                                                                             index.js:11:42)
    at Socket.emit (node:events:518:28)
    at addChunk (node:internal/streams/readable:559:12)
    at readableAddChunkPushByteMode (node:internal/streams/readable:510:3)
    at Readable.push (node:internal/streams/readable:390:5)
    at TCP.onStreamRead (node:internal/stream_base_commons:190:23)
Emitted 'error' event on Client instance at:
    at Client._handleErrorEvent (/home/servidor/nodetest/node_modules/pg/lib/clie                                                                                                                                                             nt.js:341:10)
    at Client._handleErrorMessage (/home/servidor/nodetest/node_modules/pg/lib/cl                                                                                                                                                             ient.js:352:12)
    at Connection.emit (node:events:518:28)
    at /home/servidor/nodetest/node_modules/pg/lib/connection.js:117:12
    at Parser.parse (/home/servidor/nodetest/node_modules/pg-protocol/dist/parser                                                                                                                                                             .js:40:17)
    at Socket.<anonymous> (/home/servidor/nodetest/node_modules/pg-protocol/dist/                                                                                                                                                             index.js:11:42)
    [... lines matching original stack trace ...]
    at Readable.push (node:internal/streams/readable:390:5) {
  length: 116,
  severity: 'FATAL',
  code: '57P01',
  detail: undefined,
  hint: undefined,
  position: undefined,
  internalPosition: undefined,
  internalQuery: undefined,
  where: undefined,
  schema: undefined,
  table: undefined,
  column: undefined,
  dataType: undefined,
  constraint: undefined,
  file: 'postgres.c',
  line: '3109',
  routine: 'ProcessInterrupts'
}

Node.js v20.11.1
[nodemon] app crashed - waiting for file changes before starting...

I thought it could be something with the connection to the bank, but my application only connects to the bank after entering the update route, like in this example:

`app.put(‘/update’, async(req, res) => {
try {
let body = req.body

    const client = await connect();
    
    // Checking if the import exists
    let queryResult = await client.query(`SELECT pallet_no FROM public.import_result_all WHERE pallet_no = '${body.pallet_no}' LIMIT 1`);
    if (queryResult?.rows?.length <= 0) {
        return res.status(400).json({message: "This import does not exist"});
    }


} catch (err) {
    console.log(err)
    return res.status(500).json({error: true, message: "An internal error occurred"})
} finally {
    await disconnect();
}

})
`

it executes the connection function, executes the query and then at “finally” it disconnects from the db

I’m trying to count the number of mouse clicks for participants playing a video game that I’ve embedded into the survey platform Qualtrics (i.e., with an iframe). I’ve adapted the code from (https://math.bu.edu/people/jackwalt/qualtrics-mousetracking/) that spits out the x/y mouse coordinates every 10 ms. However, I cannot get the code to also count the number of mouse clicks that occur within the iframe window. It’s pretty easy to get it to count the clicks outside the iframe though. When I run this code it will give me a count of “0” in the data output (i.e., a column in a csv file) but now it also won’t give me the x/y coordinates like it originally did. The counting is supposed to occur with the addclick function.I’m assuming I put things in the wrong order/place.

Qualtrics.SurveyEngine.addOnload(function()
{
    /*Place your JavaScript here to run when the page loads*/
Qualtrics.SurveyEngine.addOnPageSubmit(function(type)
{
    if(type == "next")
    {
        Qualtrics.SurveyEngine.setEmbeddedData("xPos", delayedXPos.join());
        Qualtrics.SurveyEngine.setEmbeddedData("yPos", delayedYPos.join());
        Qualtrics.SurveyEngine.setEmbeddedData("time", delayedTime.join());
        Qualtrics.SurveyEngine.setEmbeddedData("click", numberOfClicks); // Store the number of clicks;
            }
});

});
document.onmousemove = getMousePosition;

//set document to record mouse position


//initialize arrays
var delayedXPos = new Array();
var delayedYPos = new Array();
var delayedTime = new Array();

var iframe = document.getElementById('myFrame');

var xPos = new Array();
var yPos = new Array();


//initialize time variables
var initTime = new Date().getTime();
var timer_is_on=0;
var t;

//time interval for data collection in ms
var dt=10;
let numberOfClicks = 0;

//flag signaling whether getMousePosition has been called
mp_called = 0;

//function that determines action when mouse moves
function getMousePosition(mp)
{
 var divPos = getPosition(document.getElementById("Questions"));
 xPos.push(mp.pageX - divPos[0]);
 yPos.push(mp.pageY - divPos[1]);
 mp_called = 1;
 return true;
}


function addclick() 
{
iframe.addEventListener('load', function() {
// Access the content of the iframe
var iframeContent = iframe.contentDocument || iframe.contentWindow.document;
numberOfClicks++;
document.getElementById('clicks').innerHTML = numberOfClicks;
});
}


iframeContent.addEventListener("click", addclick);

function timedCount()
{
 if(mp_called){
   delayedXPos.push(xPos[xPos.length-1]);
   delayedYPos.push(yPos[yPos.length-1]);
   var timeInSec = (new Date().getTime()-initTime) / 1000.;
   delayedTime.push(timeInSec);
  }
  t=setTimeout("timedCount()",dt);
}

function doTimer()
{
 if (!timer_is_on)
 {
  initTime = new Date().getTime();
  timer_is_on=1;
  timedCount();
 }
}

function getPosition(obj){

var topValue= 0,leftValue= 0;

while(obj)
{
 leftValue+= obj.offsetLeft;
 topValue+= obj.offsetTop;
 obj= obj.offsetParent;
}

return [leftValue, topValue];
}

//start collecting data after page loads
document.onload = doTimer();


Qualtrics.SurveyEngine.addOnReady(function()
{
    /*Place your JavaScript here to run when the page is fully displayed*/

});

Qualtrics.SurveyEngine.addOnUnload(function()
{
    /*Place your JavaScript here to run when the page is unloaded*/
    
    });

Also here is the HTML code for the embedded game:

<iframe id="myFrame" src="https://minmaxia.com/c2/" width="1024" height="800" style="border:1px solid black;" title="clickpocalypse 2"></iframe>

I’m not sure where I’ve gone wrong, any help would be much appreciated!!

While in DEV env, everything works as it should, but when I get the PROD version up, my setTimeout and setInterval functions stop working.

<script>
// NUXT 3 asks you to use useState instead of ref to avoid memory leak.
const counter = useState("counter", () => 0)) 

const incrementCounter = () => {
  counter.value++
  setTimeout(() => incrementCounter(), 1500)
}

incrementCounter()
</script>

<template>
<div>
  <span>COUNTER: {{ counter }}</span>
</div>
</template>

The counter value will go up after 1500ms and continue to go up, as long as it’s in DEV but in PROD the value will always be 1.

I am very new at this, maybe I don’t know exactly how to ask this, but hope someone can help me.

I am using a short if statement inside a get function for a project but it is not returning what I expected. Here is my code:

async function getPrice(stock) {
  const response = await fetch(`https://stock-price-checker-proxy.freecodecamp.rocks/v1/stock/${stock}/quote`, {
    method: 'GET',
    credentials: 'same-origin'
  });
  const { symbol, latestPrice } = await response.json();
  return { symbol, latestPrice };
}

module.exports = function (app) { 
  
  app.route('/api/stock-prices') 
     .get(async function (req, res) {
    // get all parameters necessary for response
    const { stock, like } = req.query;
    const { symbol, latestPrice } = await getPrice(stock);

    // if cant find stock
    if(!symbol) {
      ////// console.log(like);
      res.json({ stockData: {
        error: "invalid symbol",
        likes: like ? 1 : 0
      }});
      ////// console.log(like);
      return;
    }
  });
};

Like comes from a checkbox input.

The short if-statement is always returning 1, whether “like” is true or false (checkbox is checked or not).

Both console.logs display “false”, but the res.json still displays “likes: 1”

I have changed uncountable things and not yet found the reason for this, I don’t know if it might be somewhere else, but the rest of the code is a boilerplate, not made by me, so it is supposedly correct.

I’m trying to edit a js that filters data contained in a table. I’ve found the code below some years ago on the net and it still works perfectly. It’s extremely light and more than enough for my needs.

Now I’ve added a script that makes the value entered into the text field is stored in local.storage and is showed on page reload but….. the filter is not active.

I’m not good at all with js and jquery so is there anyone that can help me edit the js.table.filter script so that if a value is entered into the filter input text is stored and on page reload the filter is active so that on screen I see only the filtered results?

Thanks for any help you can give me.

This is the js.table.filter

(function(document) {
    'use strict';
 
    var TableFilter = (function(Arr) {
 
        var _input;
 
        function _onInputEvent(e) {
        _input = e.target;
        var tables = document.getElementsByClassName(_input.getAttribute('data-table'));
        Arr.forEach.call(tables, function(table) {
        Arr.forEach.call(table.tBodies, function(tbody) {
        Arr.forEach.call(tbody.rows, _filter);
        });
        });
        }
 
        function _filter(row) {
        var text = row.textContent.toLowerCase(), val = _input.value.toLowerCase();
        row.style.display = text.indexOf(val) === -1 ? 'none' : 'table-row';
        }
 
        return {
        init: function() {
        var inputs = document.getElementsByClassName('light-table-filter');
        Arr.forEach.call(inputs, function(input) {
        input.oninput = _onInputEvent;
        });
        }
        };
    })(Array.prototype);
 
    document.addEventListener('readystatechange', function() {
        if (document.readyState === 'complete') {
        TableFilter.init();
        }
    });
 
})(document);

And this is the script that stores the value and shows it into the input box on page reload

document.addEventListener("DOMContentLoaded", function() {
    document.getElementById("filter").onkeyup = store;
    document.getElementById("filter").onload = getValue();
});


//store value after changes
function store(){
    var text = document.getElementById("filter").value;
    localStorage.setItem("filter",text);
}
//local storage to keep values after refresh
function getValue(){
    var storedText = localStorage.getItem("filter");
//    alert(storedText);
    if(storedText != null){
        document.getElementById("filter").value = storedText; 
    }
    else
        document.getElementById("filter").value = null;
}

I’m not good with js so I haven’t been able to try anything

In Microsoft Word, you can set a “Header from Top” value to configure the gap between the top of the page and the beginning of the header (0 resulting in no gap):

The popular python-docx library provides the means to accomplish this, as per this answer here.

Is there a way to achieve this in docx.js?

no matter what I try the browser refuses to send the cookie with additional requests after successful login.

I use fetch(url, { credentials: "include"}), I set the cors headers in the response like:

Access-Control-Allow-Credentials:
true
Access-Control-Allow-Headers:
Content-Type, Authorization, Set-Cookie, Cookie, Origin, X-Dev-Token, Bearer, Accept
Access-Control-Allow-Methods:
GET, POST, PUT, DELETE, PATCH, OPTIONS
Access-Control-Allow-Origin:
https://mydomain.de

Set-Cookie:
token=eyJhbG34SAmOgmnfmvjBP6OfhwVyftgHnc; Secure; SameSite=None, HttpOnly; Max-Age=432000

So this is a https site, both front- and backend are controlled by me, they just have different domains.

So what I am doing wrong here?

Thanks for any help!

i am trying to handle pagination on my firestore, at first it was working when i have StartAfter, but i was having like 5 document in my collection, after deleting to 1 document,

i keep getting BAD Request so i change it to StartAt still yet, is not working

  async myForumQuestions(id: string, page = 1, pageSize =10): Promise<object> {
    const skip = (page - 1) * pageSize;
    const refDocs = admin.firestore().collection("forum").orderBy("timeStamp").where("createdby", "==", id);

    const totalDocs = await refDocs.get().then((querySnapshot) => querySnapshot.size);
    const totalPages = Math.ceil(totalDocs / pageSize);

    // Fetch the data with pagination
    const myQuestionData: ForumInterface[] = await refDocs
        .startAt(skip) // when it was startAfter and document is more than 5 it works but now document is 1 not working anymore
        .limit(pageSize)
        .get()
        .then((querySnapshot) =>
          querySnapshot.docs.map((doc) => doc.data() as ForumInterface)
        );


    const quoteIds = myQuestionData
        .filter((question) => question.quoteId !== undefined)
        .map((question) => question.quoteId);

    // Fetch all quoteData in one go
    const quoteData = await admin.firestore().collection("forum")
        .where(admin.firestore.FieldPath.documentId(), "in", quoteIds)
        .get()
        .then((querySnapshot) => {
          const data: { [id: string]: ForumInterface } = {};
          querySnapshot.forEach((doc) => {
            data[doc.id] = doc.data() as ForumInterface;
          });
          return data;
        });

    // Assign quoteData to questions
    myQuestionData.forEach((question) => {
      if (question.quoteId !== undefined) {
        question.quoteData = quoteData[question.quoteId] || undefined;
      }
    });
    return {
      data: myQuestionData,
      pagination: {
        page: page,
        total_pages: totalPages,
      },
    };
  }

I am by no means experienced in this. I found some code for a bootstrap modal that I added to my website. The modal functions well but the problem is that I am not sure how to get it to be in the “closed” state when the webpage loads.

Whenever the page opens, the modal is already open. It can close when I hit the button, but its initial state is open. I want the modal to only open when clicked.Any ideas how to fix this?

I need to save a pdf file in postgresql database, pgadmin 4 using php. After that, I need to create an interface for the user where they can upload and download the file with the option to delete it too (in this case the language I’m using is HTML), and the saved file has the date and name defined, as This way, when the user re-enters the page where he was saved, the file appears and not a random one.

At this point I tried several things, but whenever I go to the page where I saved the file, it shows all the other files from other pages at the same time, and I don’t want them to appear, just the one that was saved specifically.

Could someone show me an example of php code to solve this problem? If I haven’t explained it correctly, we can contact eachother for more details.

Thank you for your attention.

Working on a personal website, trying to make the style of the side bar change widths when the sidebar button clicked. I don’t know why it isn’t. I don’t want much help other than that as I am trying to teach myself. Tips would be greatly appreciated but I don’t really want any major complicated changes that I won’t understand because I am only a few weeks in.

const sidebarBut = document.querySelector('.sideBarBut');
sidebarBut.addEventListener('click', animate);

function animate(){
    document.querySelector('.sidebar').style.width = "400px";
}

/*--------|--------*/
.sideBarBut {
    transform: scale(0.065);
    background-color: black;
    position: fixed;
    bottom: 742.5px;
    left: -235px;
    cursor: pointer;
}

.sideBarBut:hover {
    filter: brightness(80%);
}

.sidebarTitle {
    color: white;
    position: fixed;
    top: -50px; /*7px*/
    left: 95px;
    font-size: 28px;
    font-family: sans-serif;
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 2px;
}

.sidebar {
    z-index: 1000;
    height: 100%;
    width: 0;
    position: fixed;
    top: 0;
    left: 0;
    background-color: black;
    border-right: 0px solid transparent;
}

.animate {
    animation-play-state: paused;
    animation-name: sidebarOpen;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

@keyframes sidebarOpen {
    0% {
        width: 0;
    }
    100% {
        width: 250px;
        border-right: 2px solid white;
    }
}

@keyframes sidebarClosed {
    0% {
        width: 250px;
    }
    100% {
        width: 0;
        border-right: 0px solid transparent;
    }
}

.projectLinks {
    width: 200px;
    position: fixed;
    top: 40px;
    left: -1000px; /*20px*/
    color: white;
    list-style: none;
    padding-left: 0;
}

.projects {
    text-decoration: none;
    color: inherit;
    font-size: 20px;
    font-family: sans-serif;
    line-height: 30px;
}

.projects:hover {
    color: rgb(200, 200, 200);
}

   <section>
            <div class="sidebar animate">
                <button type="button" class="sideBarBut"><img src="img/sidebar.png"></button>
                <span class="sidebarTitle">Projects</span>
                <ul class="projectLinks">
                    <li><a class="projects" href="projects/Tic Tac Toe Project copy/index.html">Tic Tac Toe Project</a></li>
                    <li><a class="projects" href="projects/color changer proj/index.html">Color Changer Project</a></li>
                </ul>
            </div>
        </section>
        <script src="sidebar.js"></script>

When i try to build in real device React native RocketChat ios app with xcode its showing me ‘Command CodeSign failed with a nonzero exit code’ how i solve this?s

I’m trying to regenerate apple certificate and its still showing

am endeavoring to highlight a word upon clicking that does not adhere to the exception of the silent ‘e’ rule. Despite multiple attempts with various regex patterns, I consistently encounter the same outcome.

import { View, Text, SafeAreaView, ImageBackground,StatusBar,Image,Dimensions, TouchableOpacity,ScrollView, FlatList } from 'react-native'
import React,{useState,useContext} from 'react'
import style from '../theme/style'
import themeContext from '../theme/themeContex';
import { Colors } from '../theme/color';
import Icon from 'react-native-vector-icons/Ionicons'
import { AppBar,HStack, IconButton  } from '@react-native-material/core';
// import { Avatar } from 'react-native-paper';
import Height from './Height';
import {Avatar} from 'react-native-elements';
import { useNavigation } from '@react-navigation/native';
import { color } from 'react-native-elements/dist/helpers';
import BackButton from './Componants/BackButton';
import Header from './Componants/Header';


const width =Dimensions.get('screen').width
const height = Dimensions.get('screen').height
// Regex pattern to determine if a word follows the silent "e" rule
// Regex pattern to determine if a word follows the silent "e" rule
const regex = /(?:[^aeiouy]|y$|a(?!i)|e(?!a)|(ia)|(ei)|(ie)|(eu)|(ui))$/;

const exceptions = [
  "love", "move", "come", "rule", "give", "above", "done", "bone", "some",
  "gate", "whole", "horse", "house", "mouse", "once",
];
// const regex = /[^aeiou]e(?=[a-z])/;



export default function RuleExceptions() {

  const theme = useContext(themeContext);
  const navigation = useNavigation();
  const [darkMode, setDarkMode] = useState(false)


  const [clickedWords, setClickedWords] = useState([]);

  const handleClick = (word) => {
    // Check if the word is an exception based on the regex pattern and exception list
    const isException = !regex.test(word) && exceptions.includes(word); // Correct condition
  
    // Update the clickedWords state with the clicked word and its exception status
    if (clickedWords.find(w => w.word === word)) {
      // Remove the word from the list if it's already clicked
      setClickedWords(clickedWords.filter(w => w.word !== word));
    } else {
      // Add the word to the list with its exception status
      setClickedWords([...clickedWords, { word, isException }]);
    }
  };

  const words = [
    'Have', 'Like', 'Love', 'Side', 'Done', 'Mute', 'Come', 'Rule',
    'Gate', 'Above', 'Bake', 'Bike', 'Pole', 'Flute', 'Here', 'Some'
  ];

  console.log("Regex pattern:", regex);
  console.log("Exceptions:", exceptions);
  console.log("Current clickedWords:", clickedWords);

    return (
    <SafeAreaView style={{flex:1, paddingTop:25}}>
             
      

      <ImageBackground source={require('../../assets/image/read.png')}
      style={{flex:1}}>
        <StatusBar backgroundColor={"#C2EEFF"} translucent={true}/>
          <Header />
         
            <View style={{ paddingHorizontal:20,}}>
              <Text style={{fontFamily:'BADABB', fontSize:21, color:'#E51F5C', textAlign:'center', width:'100%', letterSpacing:1, lineHeight:21,}}>Silent E – Rule Exceptions!</Text>
              {/* <Text style={{fontFamily:'BADABB', fontSize:21, color:'#E51F5C', textAlign:'center', width:'100%', letterSpacing:1, lineHeight:21, marginBottom:15,}}>Aa and Ee Vowel Sounds</Text> */}
              <Text style={{fontFamily:'Cheesecake', fontSize:18, color:'#000', textAlign:'center', width:'100%', letterSpacing:1, marginTop:10, lineHeight:20,}}>Highlight the words where Silent E does NOT follow the rule! </Text>
            </View>
            <View style={{paddingHorizontal:20, marginTop:20,}}>
              <View style={{flexDirection:'row', flexWrap:'wrap', width:'100%', borderWidth:2, borderColor:'#0E73BB'}}>
                    {words.map((word, index) => (
                    <View key={index} style={{ width: '25%', borderWidth: 2, borderColor: '#0E73BB', borderBottomWidth: 2 }}>
                      <TouchableOpacity onPress={() => handleClick(word)}>
                        <Text style={{
                          paddingVertical: 5,
                          fontWeight: '600',
                          fontFamily: 'Cheesecake',
                          fontSize: 18,
                          textAlign: 'center',
                          backgroundColor: clickedWords.find(w => w.word === word)?.isException ? 'green' : 'transparent',
                          color: '#1C3014',
                        }}>{word}</Text>
                      </TouchableOpacity>
                    </View>
                  ))}
              </View>
            </View>
            <View style={{marginTop:20,}}>
              <Text style={{fontFamily:'BADABB', fontSize:18, color:'#E51F5C', textAlign:'center', width:'100%', letterSpacing:1, lineHeight:21,}}>REMEMBER: Not all words will follow this rule. </Text>
              <Text style={{fontFamily:'BADABB', fontSize:18, color:'#E51F5C', textAlign:'center', width:'100%', letterSpacing:1, lineHeight:21,}}>When you get to a silent E word, try to sound it out using BOTH vowel sounds to see what would make sense </Text>
            </View>
          
        <BackButton style={{width:'100%',}}/>
       </ImageBackground>
            
    </SafeAreaView>
  )
}

below is the outcome of the above code

Current clickedWords: [{"isException": false, "word": "Have"}, {"isException": false, "word": "Done"}, {"isException": false, "word": "Gate"}, {"isException": false, "word": "Pole"}, {"isException": false, "word": "Flute"}, {"isException": false, "word": "Above"}, {"isException": false, "word": "Mute"}, {"isException": false, "word": "Like"}, {"isException": false, "word": "Love"}, {"isException": false, "word": "Come"}, {"isException": false, "word": "Bake"}, {"isException": false, "word": "Here"}, {"isException": false, "word": "Some"}, {"isException": false, "word": "Bike"}, {"isException": false, "word": "Rule"}, {"isException": false, "word": "Side"}]

I want the above code to highlight the word which is not following the rule