Blancer.com Tutorials and projects

Getting and Printing / Displaying / Echoing Exact GPS Coordinates Upon Web Page Refresh With HTML5 and PHP

I have tried about 100 different ways to get this to work and it will NEVER work no matter what I throw at it. When I try using the official WW3 HTML5 GeoLocation built in functions I am able to get the GPS Longitude and GPS Latitude numbers, but for some reason it ONLY works with a button.

This is resource I am using:
https://www.w3schools.com/html/html5_geolocation.asp

What am I trying to do ?
I am trying to get the exact GPS coordinates Longitude, Latitude and Altitude by using the built in HTML5 functions ONLY and make it report the GPS coordinates to a log file as well as print them to the web page upon every reload of the web page document. I don’t know how to make it work. JavaScript never attaches the information to a variable and none of the variables can be called upon later on down the script. Constants do NOT work. None of it works unless it’s attached to a button as shown in the HTML5 demonstration page.

Can anyone show me how to make this work ?

None of it works. Every resource I came across on Google does not work.

A string manipulation exercise that is failimg in the main test.

I tried to figure out if some character was missing or broken, but I can’t figure out.

function hasNoneLetters(phrase, blacklist) {
    let x = phrase.toLowerCase();
    let y = blacklist.toLowerCase();
    let z = '';
    for (let i = 0; i <= blacklist.length-1; i++) {
        z = blacklist[i];
        if (x.lastIndexOf(z)) {
            return false;
            }
    }
    return true;
  }

Something is wrong, the users don’t update in the list.
home page
store
the form
files and folders

I try to put “use client” in the very top of each file, but nothing changed
i using lastest version of next by now
the console its showing just ‘[]’

import Link from "next/link";
import TestComponent from "./components/test-component";
import styles from "./page.module.css";
import useUserStore from "../stores/user";

export default function Home() {
  const users = useUserStore((state) => state.users);

  return (
    <div className={styles.app}>
      <h1>Home</h1>
      <h2>Lista de Usuários</h2>
      <div>
        {users?.map((user) => (
          <p key={Math.random() + user.name}>
            {user.name} | {user.email}
          </p>
        ))}
      </div>
      <Link href="/userform">UserForm</Link>
    </div>
  );
}

"use client";

import { create } from "zustand";

export interface UserType {
  name: string;
  email: string;
}

interface State {
  users: UserType[];
  addUser: (user: UserType) => void;
}

const useUserStore = create<State>((set) => ({
  users: [],
  addUser: (user: UserType) => {
    set((state) => ({ users: [...state.users, user] }));
  },
}));

export default useUserStore;

"use client";
import Link from "next/link";
import React from "react";
import styles from "../page.module.css";
import useUserStore from "../../stores/user";

const UserForm = () => {
  const addUser = useUserStore((state) => state.addUser);
  const users = useUserStore((state) => state.users);

  const onSubmit = (e: any) => {
    e.preventDefault();
    const name = (e.target as any).name.value;
    const email = (e.target as any).email.value;

    addUser({
      name,
      email,
    });

    console.log(users);
  };

  return (
    <div className={styles.app}>
      <h1>UserForm</h1>
      <form onSubmit={onSubmit} className={styles.form}>
        <input name="name" placeholder="Name" />
        <input name="email" placeholder="Email" />
        <button type="submit">CreateUser</button>
      </form>
      <Link href="/">Home</Link>
    </div>
  );
};

export default UserForm;

kljshfjkdshfjkhsdkjfhsdkjfhjsdhfkhsdkjhfjkhsdjkfhsdhfkhdsfjhsdhfjkhsdkjfhsdjkhfkjsdhfhsdkhfksjdhfkjhsdjkfhsdhfksdhkfjhsdkjhfkjsdhfjkhsd

Vegas slideshow lag between image and text when leaving and returning to page

I am using the Vegas JavaScript library to create a slideshow on my website. The slideshow works fine when I stay on the same page, but when I leave the page and then return after some moments, the text of the slideshow sometimes does not match the image. I have tried using the preload option, but this does not seem to resolve the issue.

Does anyone know how to fix this lag between the image and text when leaving and returning to the page?

I’m using this code

$.vegas('slideshow', {
  delay: 5000,
  backgrounds: backgrounds,
  preload: true
});

This is the content of backgrounds
background content

When running a command firebase deploy I receive 2 errors:

  10:8  error  'onRequest' is assigned a value but never used  no-unused-vars

  11:7  error  'logger' is assigned a value but never used     no-unused-vars

Followed by:

functions predeploy error: Command terminated with non-zero exit code 1

I assume it’s related to my index.js file inside Functions folder but I’ve never changed it or used it before (also not sure why some parts are commented out).

/**
 * Import function triggers from their respective submodules:
 *
 * const {onCall} = require("firebase-functions/v2/https");
 * const {onDocumentWritten} = require("firebase-functions/v2/firestore");
 *
 * See a full list of supported triggers at https://firebase.google.com/docs/functions
 */

const {onRequest} = require("firebase-functions/v2/https");
const logger = require("firebase-functions/logger");

// Create and deploy your first functions
// https://firebase.google.com/docs/functions/get-started

// exports.helloWorld = onRequest((request, response) => {
//   logger.info("Hello logs!", {structuredData: true});
//   response.send("Hello from Firebase!");
// });

What should I do to fix this and be able to deploy the app?

I’ve been running my application with PM2 all this time, but with Docker it no longer seems necessary. However, I can’t figure out how to run the script so that it runs continuously. In PM2, you can specify the script path in the configuration file:

module.exports = {
    apps: [
        {
            script: './build/index.js',
            ...
        },
    ],
};

And it will keep it running. Is there a similar alternative in Docker, or are there any third-party tools I can use for this purpose? Initially, I was planning to continue using PM2 for this, but as mentioned in this thread, Docker seems to offer alternatives without it. Another option I’m considering is using nodemon, but I believe there might be better solutions

As a parent, I want to help my 10-year-old son learn programming. He is passionate about computer games and I believe learning a programming language will not only help him understand how games are made but also prepare him for the future of programming. I would like to learn the language alongside him.
Could you please recommend a programming language that is suitable for his age and aligns with his interests, but also thinking about the future usage? It is not necessary that the language has GUI, a code would be good to start with.

p.s. a long time ago (20+) I have started with Lisp, but the most of it I have forgotten.

Googling about programming for kids, but want to hear from professionals (educators and programmers).

I am coding a color picker. I am trying to figure out how to make it default to a CSS variable, and then have it change the CSS variable in question. The variable is called --bg and is for changing the background color.

I tried using value="var(--bg)" but that didn’t work. I then tried this JavaScript code generated by ChatGPT:

document.addEventListener('DOMContentLoaded', function() {
    const colorPicker = document.getElementById('bgcolor');
    colorPicker.value = getComputedStyle(document.documentElement).getPropertyValue('--bg').trim();

    colorPicker.addEventListener('input', function() {
        document.documentElement.style.setProperty('--bg', this.value);
    });
});

Still nothing.

I am trying to make a todo application using js, express and ejs but I am not able to get the desired output.

enter image description here
This is the code I wrote and this is the output.
enter image description here
When I click ‘+’ icon i want it to show the text I entered in the input but it does not do so. I tried logging it into the console but it does not generate any output. I am in the learning phase so any help would be greatly appreciated.

I am trying to fetch data from firebase firestore using Next.js’s getStaticProps. Without using getStaticProps, the data renders normally but when I use it I get the error

res.json() is not a function

This is how my code looks like

import React from 'react';
import { db } from '@/firebase';
import { collection, getDocs } from 'firebase/firestore';

     
export const getStaticProps = async () => {
    const res = await getDocs(collection(db, 'blogs'));
    const data = await res.json();

    return {
        props: {
            blogs: data
        }
    }
}

function index({blogs}) {
  return (
    <div>
        {blogs.map(blog => {
            <p>{blog.title}</p>
        })}
    </div>
  )
}

export default index

Where could I be going wrong?

I am trying to add go to line and find text functionalities on an editor that employs textarea and a numbering div.

I have tried the following code but it is not scrolling the editor to focus on the line or text entered by the user in the prompt;

Please help me on how to implement the go to line and find text functions on the editor.

const ta = document.querySelector('textarea')

function updateRowNumbering() {
  const num = ta.value.split("n").length;
  const numbers = ta.parentNode.querySelector(".numbers");
  numbers.innerHTML = Array(num).fill("<span></span>").join("");
}

ta.value = `One
Two
Three
Four
Five
Six
Seven
Eight
Nine
Ten
Eleven
Kumi na Mbili
`
updateRowNumbering()


//Trying to implement go to line and find text;
const numbers = ta.parentNode.querySelector('.numbers');
const gotoLinePrompt = document.querySelector('.goto-line-prompt');
const findPrompt = document.querySelector('.find-prompt');

// Hide the prompts by default.
gotoLinePrompt.style.display = 'none';
findPrompt.style.display = 'none';

// Add event listeners to the "Go to Line" and "Find" buttons.
document.querySelector('.goto-line-button').addEventListener('click', function() {
  gotoLinePrompt.style.display = 'block';
});

document.querySelector('.find-button').addEventListener('click', function() {
  findPrompt.style.display = 'block';
});

// Add event listeners to the "OK" buttons in the prompts.
gotoLinePrompt.querySelector('.ok-button').addEventListener('click', function() {
  const lineNumber = gotoLinePrompt.querySelector('input').value;
  if (lineNumber !== null) {
    const lineHeight = ta.scrollHeight / ta.clientHeight;
    ta.scrollTop = (lineNumber - 1) * lineHeight;
    numbers.scrollTop = ta.scrollTop;
  }

  gotoLinePrompt.style.display = 'none';
});

findPrompt.querySelector('.ok-button').addEventListener('click', function() {
  const searchTerm = findPrompt.querySelector('input').value;
  if (searchTerm !== null) {
    const text = ta.textContent;
    const index = text.indexOf(searchTerm);
    if (index !== -1) {
      const lineNumber = Math.floor(index / ta.value.split('n')[0].length) + 1;
      ta.scrollTop = (lineNumber - 1) * lineHeight;
      numbers.scrollTop = ta.scrollTop;
    }
  }

  findPrompt.style.display = 'none';
});

body, textarea {
  font-family: Consolas, "Courier New", Courier, monospace;
}

.editor {
  display: inline-grid;
  grid-template-columns: 3em auto;
  gap: 10px;
  line-height: 21px;
  background: rgb(40 42 58);
  border-radius: 2px;
  overflow-y: auto;
  max-height: 250px;
}

.editor>* {
  padding-top: 10px;
  padding-bottom: 10px;
}

.numbers {
  text-align: right;
  background: #333;
  padding-right: 5px;
}

.numbers span {
  counter-increment: linenumber;
}

.numbers span::before {
  content: counter(linenumber);
  display: block;
  color: #888;
}

textarea {
  line-height: 21px;
  border: 0;
  background: transparent;
  color: #fff;
  min-width: 500px;
  outline: none;
  resize: none;
  padding-right: 10px;
}

<div class="actions">
<div class="goto-line-prompt" style="display: none;">
  <h1>Go to Line</h1>
  <input type="number" placeholder="Enter the line number to go to:" />
  <button type="button" class="ok-button">OK</button>
</div>
<div class="find-prompt" style="display: none;">
  <h1>Find</h1>
  <input type="text" placeholder="Enter the text to find:" />
  <button type="button" class="ok-button">OK</button>
</div>
<button class="goto-line-button">Go to Line</button>
<button class="find-button">Find</button>
</div>
<div class="editor">
 <div class="numbers">
      <span></span>
   </div>
 <textarea wrap="off" onkeyup="updateRowNumbering()"></textarea>
</div>

On websites like LinkedIn, there is a location input field that automatically fills in locations as you type them. I was looking to implement something similar on my website.

I was wondering how I would go about this, obviously there is too many locations to write them all myself. Is there an API that could do this? I was looking at Google’s places API, would that get the job done?

I have been going through a Udemy JavaScript course and have had all suggestions pop up in the same way as the instructors video does as they walk through the lecture.

Now we are on classes, and the .includes method is not being suggested and I don’t understand why this is. I have scoured through many posts here from Stack Overflow as well as the sister sites. My built in JavaScript language extension is not disabled. I have ESLINT and JS es6 Snippets extensions installed. Suggests happen, and the .includes method will be suggested in another project I have open. In the prior lectures, in the practice files the method also gets suggested. It makes me think that this isn’t a workspace problem or a settings issue.

The GIF is a little cut off at the end but, when I first begin to see if .includes will be auto suggested for completion, it doesn’t appear. So I complete it.
I press enter, and re-run through that. It appears that once .includes method has been used, VSCode then now suggests it for autocomplete.

What do I need to do so that the .includes method is suggested prior to it already being used in the script?

It’s been really helpful for me to have these suggestions come up since I am still learning. I can easily look at the suggestions, see that I can use “x, y, z” and then use Moz JS docs to learn/read how to use it.

Regarding the other possible solutions found when searching this issue, I did follow suggestions. Reloading the workspace/window. Disabling extensions, renabling them. Completely turning off other extensions to rule out conflicts. Different suggestions for jsconfig.json. Below is my current jsconfig.json.

{
    "compilerOptions": {
        "target": "es6"
    },
    "exclude": ["node_modules"]
}

objName is an object that contains properties, some of which are arrays.
I’m trying to check that the properties and elements of the obj are not undefined, null or have empty string.

function fieldChecker(obj) {
  for (const key in obj) {
    if (obj.hasOwnProperty(key)) {
      const value = obj[key];

      // Check if the value is an array
      if (Array.isArray(value)) {
        const hasInvalidElement = value.some(function(element) {
          return element === undefined || element === null || element === '';
        });

        if (hasInvalidElement || key === undefined || key === null || key === '') {
          console.log('-', key, ' or its elements are missing or empty. Key Value: ', key, ' Array Value:   ', value);
        }
      } else {
        // For non-array values, perform the regular check
        if (key === undefined || key === null || key === '' || value === undefined || value === null || value === '') {
          console.log('-', key, ' is missing or empty. Key Value: ', key, ' Value: ', value);
        }
      }
    }
  }
}
fieldChecker(objName);

I have intentionally altered an array so I can see that the value is an empty sting but this code is not picking it up. I’m fairly new to JS so am not sure I completely understand how to target the elements for error handling.

I have a route that contains a query parameters with hyphen:

/?previous-page=building-details

In my Page:

import EnergyEfficiency from "@/ui/energy-check/energy-efficiency"

const Page = ({
  params,
  searchParams,
}: {
  params: { id: string }
  searchParams: { modernization: string; previousPage: string }
}) => {
  const { modernization, previousPage } = searchParams

  console.log(previousPage) // undefined

  return <EnergyEfficiency addressID={params.id} />
}

export default Page

I want to access that parameter from the page props, how can I do that?