Blancer.com Tutorials and projects

Im doing the frontend and backend of an it shop, to save the images of every product i have a blob column in the product table (dont know if its the best option but dont know another one better), the boss tell me to do an external app to add the an image to every product directly to the db.

private void addImage() {
    String selected = tableView.getSelectionModel().getSelectedItem().getDescripcion();
    System.out.println("Intentando añadir imagen al artículo: " + selected);
    if (selected == null) {
        showAlert("Error", "Seleccione un artículo primero para añadir una imagen.");
        return;
    }

    try {
        PreparedStatement pstmt = connection.prepareStatement("SELECT Imagen FROM articulos WHERE Descripción = ?");
        pstmt.setString(1, selected);
        ResultSet rs = pstmt.executeQuery();
        if (rs.next() && rs.getString("Imagen") != null) {
            showAlert("Error", "El artículo ya tiene una imagen. Use el botón 'Actualizar' para cambiarla.");
            return;
        }

        FileChooser fileChooser = new FileChooser();
        fileChooser.getExtensionFilters().add(
            new FileChooser.ExtensionFilter("Images", "*.png", "*.jpg", "*.jpeg")
        );
        File file = fileChooser.showOpenDialog(null);

        if (file != null) {
            String base64Image = convertImageToBytes(file);
            if (base64Image != null) {
                pstmt = connection.prepareStatement("UPDATE articulos SET Imagen = ? WHERE Descripción = ?");
                pstmt.setString(1, base64Image);
                pstmt.setString(2, selected);
                pstmt.executeUpdate();
                System.out.println("Imagen añadida correctamente al artículo: " + selected);
                displayImage(selected);
            } else {
                showAlert("Error", "Error al convertir la imagen");
            }
        }
    } catch (SQLException e) {
        System.out.println("Error al añadir imagen: " + e.getMessage());
        showAlert("Error", "Error al añadir imagen: " + e.getMessage());
    }
}

private String convertImageToBytes(File imageFile){
    byte[] imageBytes = null;
    try(ByteArrayOutputStream baos = new ByteArrayOutputStream(); FileInputStream fis = new FileInputStream(imageFile)) {
        byte[] buffer = new byte[1024];
        int bytesRead;
        while ((bytesRead = fis.read(buffer)) != -1) {
            baos.write(buffer, 0, bytesRead);
        }
        imageBytes = baos.toByteArray();
        return Base64.getEncoder().encodeToString(imageBytes);
    } catch (IOException e) {
        e.printStackTrace();
        return null;
    }
}

In the app u just select a product from the db an select an img from your pc, here i dont have a problem the image saves succesfully and even shows itself if u click in the same product again, in the springboot controller i get the product with his image:

@GetMapping("/ofertas")
public ResponseEntity<List<ArticuloDTO>> getArticulosEnOferta() {
    List<Articulo> articulos = ArticuloService.obtenerArticulosEnOferta();

    List<ArticuloDTO> articulosDTO = articulos.stream().map(a -> new ArticuloDTO(
            a.getId_articulo(),
            a.getNombre(),
            a.getPrecio_medio(),
            a.isRebajado(),
            a.getPrecioRebajado(),
            a.getImagen() != null ? Base64.getEncoder().encodeToString(a.getImagen()) : null
    )).collect(Collectors.toList());

    return ResponseEntity.ok(articulosDTO);
}

but when i try to show that pic in angular i get an error, normally a loop where the page try to process the image all the time getting a lot of errors in the console log every second.i added some logs to see if i get the blob column from the db, and yes i get it so the problem should be when angular try to process the img.

cargarProductosEnOferta() {
    this.isLoading = true;
    this.error = null;

    this.productService.getProductosEnOferta().subscribe({
        next: (productos) => {
            console.log('Productos cargados:', productos.length);
            this.productosEnOferta = productos;

            productos.forEach((producto, index) => {
                console.log(`Producto ${index + 1}:`, {
                    id: producto.id_articulo,
                    nombre: producto.nombre,
                    descripcion: producto.descripcion,
                    precio_medio: producto.precio_medio,
                    rebajado: producto.rebajado,
                    precioRebajado: producto.precioRebajado,
                    imagen: producto.imagen ? {
                        tipo: typeof producto.imagen,
                        longitud: producto.imagen.length,
                        muestra: typeof producto.imagen === 'string' 
                            ? producto.imagen.substring(0, 50) + '...' 
                            : 'byte array'
                    } : 'sin imagen'
                });
            });

            if (productos.length > 0) {
                console.log('Estructura completa del primer producto:', JSON.stringify(productos[0], null, 2));
            }

            this.isLoading = false;
        },
        error: (error) => {
            console.error('Error loading products:', error);
            this.error = 'Error al cargar los productos';
            this.isLoading = false;
        }
    });
}

sanitizeBase64Image(imageData: string): SafeUrl {
    if (!imageData) {
        return this.sanitizer.bypassSecurityTrustUrl('assets/default-product.jpg');
    }

    try {
        return this.sanitizer.bypassSecurityTrustUrl(imageData);
    } catch (error) {
        console.error('Error processing image:', error);
        return this.sanitizer.bypassSecurityTrustUrl('assets/default-product.jpg');
    }
}

<div class="ofertas-gallery" *ngIf="!isLoading && !error" 
     [style.gridTemplateColumns]="'repeat(' + calcularColumnas(productosEnOferta.length) + ', 1fr)'">
    <div class="oferta-card" *ngFor="let producto of productosEnOferta">
        <div class="oferta-imagen">
            <img [src]="sanitizeBase64Image(producto.imagen)" 
                 [alt]="producto.nombre"
                 class="product-image">
            <div class="oferta-badge" *ngIf="producto.rebajado">
                -{{calcularPorcentajeDescuento(producto)}}%
            </div>
        </div>
        <div class="oferta-info">
            <h3>{{producto.nombre}}</h3>
            <div class="oferta-precios">
                <span class="precio-original">{{producto.precio_medio}}€</span>
                <span class="precio-oferta" *ngIf="producto.rebajado">
                    {{producto.precioRebajado}}€
                </span>
            </div>
            <button class="btn-agregar-carrito" (click)="agregarAlCarrito(producto)">
                <i class="fas fa-shopping-cart"></i>
                Añadir al carrito
            </button>
        </div>
    </div>
</div>

Probably im just blind and the error is obviously but i really dont see it xd.

Added some logs to see if i get correctly the img from the db this is an example of a product i get: Estructura completa del primer producto: {
“id_articulo”: 1, //id from the product
“nombre”: “ADAPTADOR USB WIFFI 1200 MBPS NAN0”, // name of the product
“precio_medio”: 12.86, //Price
“rebajado”: true, //In sale
“precioRebajado”: 10, //Sale price
“imagen”: “data:image/jpeg;base64,LzlqLzRBQVFTa1pKUmdBQkFRQUFBUUFCQUFELzJ3QkRBQU1DQWdJQ0FnTUNBZ0lEQXdNREJBWUVCQVFFQkFnR0JnVUdDUWdLQ2drSUNRa0tEQThNQ2dzT0N3a0pEUkVORGc4UUVCRVFDZ3dTRXhJUUV3OFFFQkQvMndCREFRTURBd1FEQkFnRUJBZ1FDd2tMRUJBUUVCQVFFQkFRRUJB……… //The img chain,and yes its longer than this if anyone ask it

I generated the SVG using Illustrator and am trying to add animation using the gasp lib. I want to move the circle along the path, but it’s not aligning properly. I’m not sure where I’m going wrong.

gsap.to("#c1", {
  motionPath: "#path1",
  duration: 20,
  ease: "none",
  repeat: -1
});

<svg viewBox="0 0 820 400" style="background-color: black;">
  <path stroke="green" id="path1" class="st1"
d="M113.44,47.01c10.18,2.21,29.71,8.81,40.9,22.37,21.44,25.99,4.39,57.68,20,83.87,8.48,14.22,28.92,30.73,85,32.75" />
  <circle id="c1" r="2" cx="-5" cy="-5" fill="red" />
</svg>

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/MotionPathPlugin.min.js"></script>

I’m trying a simple notification in PHP and JavaScript. The idea is when data the server is updated the client page is updated.

On the server I have the following test PHP script:

<?php
    header('Content-Type: text/event-stream');
    header('Cache-Control: no-cache');

    $data = rand(0, 1000);
    print $data;
    flush();

On the page I have the following JavaScript:

init();

function init() {
    var eventSource = new EventSource('includes/notify.php', {
        withCredentials: true,
    });
    eventSource.onopen = event => {
        console.log('eventSource open')
    }
    eventSource.onmessage = event => {
        console.log(`eventSource ${event.data}`);
    };
    eventSource.onerror = event => {
        console.log(event);
    }
}

I’m running it from a real server, so I shouldn’t have any issues there.

I’m getting repeated open and error messages, so something’s not working.

When I click on the URL which appears in the error object (https:// … /includes/notify.php) the PHP script works.

What is the missing step to get the notification working?

This is test code. When I click update button, it calls the updateItem function and then handleSubmit function, but when I click delete button, it calls only removeItem function. Both buttons are type="submit" button types.

import React, { useState } from "react";

function MyForm() {
  const [items, setItems] = useState([
    { id: 1, name: "item1" },
    { id: 2, name: "item2" },
    { id: 3, name: "item3" },
  ]);

  const removeItem = (id: number) => {
    setItems(items.filter((item) => item.id !== id));
  };

  const updateItem = (id: number) => {
    setItems(
      items.map((item) => {
        if (item.id === id) {
          return { ...item, name: "test" };
        } else {
          return item;
        }
      })
    );
  };

  const handleSubmit = (event: any) => {
    event.preventDefault();
    console.log("submit");
  };

  return (
    <form onSubmit={handleSubmit}>
      <ul>
        {items.map((item) => (
          <li key={item.id}>
            {item.name}
            <button type="submit" onClick={() => removeItem(item.id)}>
              Remove
            </button>
            <button type="submit" onClick={() => updateItem(item.id)}>
              Update
            </button>
          </li>
        ))}
      </ul>
    </form>
  );
}

export default MyForm;

I expect that delete button call onClick event and then submit event like update button.

Recently, we’ve integrated renovate bot into our github, and it definitely keeps on updating the dependencies at a good pace. One thing I noticed is that it updates the yarn.lock file directly and doesn’t update the package.json.

So, If I somehow delete the yarn.lock file and run yarn, it should all revert to the peer dependency version to whatever those lib versions have. I wonder if this is a good thing that renovate does, and is this a good practise?(react-hook-form 7.56 kind of broke the app when the package.json was untouched) Because you’d have to keep track of yarn.lock file from your renovate merges.

Can we configure renovate instead to check for updates in the package.json file instead of peer dependencies in the yarn.lock file?

This is my HTML code.

<div class="buttons-div">
<button class="modulo-button" id="btn" value="%">%</button>
<button class="division" id="btn" value="/">/</button>
<button class="seven" id="btn" value="7">7</button>
<button class="eight" id="btn" value="8">8</button>
<button class="nine" id="btn" value="9">9</button>
<button class="multiplication" id="btn" value="*">*</button>
<button class="four" id="btn" value="4">4</button>
<button class="five" id="btn" value="5">5</button>
<button class="six" id="btn" value="6">6</button>

</div>

Below is my JavaScript code, I have tried to get all the values for the buttons that have the id of btn, when i console.log it returns undefined. What might cause that? Because everything should be working fine and i have written the correct codes

This is my JavaScript code. I wanted to return a node list, but it returns undefined instead.

`const allButtons = document.querySelectorAll("#btn");
console.log(allButtons.value);

Html

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Myntra - Online Shopping</title>

<link rel="stylesheet" href="myntra.css">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

<header>

    <div class="logo-container">

        <a href="#">

            <img src="https://assets.myntassets.com/assets/images/2023/7/20/5a0a13ff-575e-4e64-bf71-24e2b7f3b7d61689833237623-MyntraWeb-Symbol.png" alt="Myntra Logo" class="logo">

        </a>

    </div>

</header>



<main>

    <div class="auth-container">

        <div class="auth-tabs">

            <button class="tab active" id="login-tab">Login</button>

            <button class="tab" id="signup-tab">Signup</button>

        </div>



        <div class="auth-content">

            <!-- Login Form -->

            <form id="login-form" class="auth-form active">

                <div class="form-group">

                    <input type="text" id="login-email" placeholder="Email or Mobile Number" required>

                    <span class="error-message" id="login-email-error"></span>

                </div>

                <div class="form-group">

                    <input type="password" id="login-password" placeholder="Password" required>

                    <span class="error-message" id="login-password-error"></span>

                </div>

                <div class="forgot-password">

                    <a href="#" id="forgot-password">Forgot Password?</a>

                </div>

                <button type="submit" class="auth-btn">Login</button>

                <div class="auth-divider">OR</div>

                <button type="button" class="auth-btn google-btn">

                    <i class="fab fa-google"></i> Continue with Google

                </button>

            </form>



            <!-- Signup Form -->

            <form id="signup-form" class="auth-form">

                <div class="form-group">

                    <input type="text" id="signup-name" placeholder="Full Name" required>

                    <span class="error-message" id="signup-name-error"></span>

                </div>

                <div class="form-group">

                    <input type="email" id="signup-email" placeholder="Email" required>

                    <span class="error-message" id="signup-email-error"></span>

                </div>

                <div class="form-group">

                    <input type="tel" id="signup-phone" placeholder="Mobile Number" required>

                    <span class="error-message" id="signup-phone-error"></span>

                </div>

                <div class="form-group">

                    <input type="password" id="signup-password" placeholder="Password" required>

                    <span class="error-message" id="signup-password-error"></span>

                </div>

                <div class="form-group">

                    <input type="date" id="signup-dob" placeholder="Date of Birth" required>

                    <span class="error-message" id="signup-dob-error"></span>

                </div>

                <div class="form-group">

                    <textarea id="signup-address" placeholder="Address" rows="3"></textarea>

                    <span class="error-message" id="signup-address-error"></span>

                </div>

                <button type="submit" class="auth-btn">Signup</button>

                <div class="terms">

                    By continuing, I agree to the <a href="#">Terms of Use</a> & <a href="#">Privacy Policy</a>

                </div>

            </form>



            <!-- Forgot Password Form -->

            <form id="forgot-password-form" class="auth-form">

                <h3>Forgot Password</h3>

                <div class="form-group">

                    <input type="text" id="forgot-email" placeholder="Email or Mobile Number" required>

                    <span class="error-message" id="forgot-email-error"></span>

                </div>

                <button type="submit" class="auth-btn">Reset Password</button>

                <div class="back-to-login">

                    <a href="#" id="back-to-login">Back to Login</a>

                </div>

            </form>

        </div>

    </div>

</main>



<footer>

    <div class="footer-content">

        <p>© 2024 www.myntra.com. All rights reserved.</p>

    </div>

</footer>



<script src="myntra.js"></script>

margin: 0;

padding: 0;

box-sizing: border-box;

font-family: 'Assistant', sans-serif;

}

.pink-bg {

background-color: #fff4f6;

}

body {

color: #3e4152;

}

header {

background-color: white;

box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.05);

padding: 15px 0;

position: sticky;

top: 0;

z-index: 100;

}

.logo-container {

display: flex;

justify-content: center;

}

.logo {

height: 45px;

}

main {

display: flex;

justify-content: center;

align-items: center;

min-height: calc(100vh - 120px);

padding: 20px;

}

.auth-container {

background-color: white;

border-radius: 4px;

box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

width: 100%;

max-width: 400px;

overflow: hidden;

}

.auth-tabs {

display: flex;

border-bottom: 1px solid #eaeaec;

}

.tab {

flex: 1;

padding: 15px;

text-align: center;

background: none;

border: none;

font-size: 16px;

font-weight: 600;

color: #535766;

cursor: pointer;

transition: all 0.3s ease;

}

.tab.active {

color: #ff3f6c;

border-bottom: 2px solid #ff3f6c;

}

.auth-content {

padding: 20px;

}

.auth-form {

display: none;

}

.auth-form.active {

display: block;

}

.form-group {

margin-bottom: 15px;

position: relative;

}

.form-group input,

.form-group textarea {

width: 100%;

padding: 12px;

border: 1px solid #d4d5d9;

border-radius: 2px;

font-size: 14px;

outline: none;

transition: border 0.3s ease;

}

.form-group input:focus,

.form-group textarea:focus {

border-color: #ff3f6c;

}

.form-group textarea {

resize: vertical;

}

.error-message {

color: #ff3f6c;

font-size: 12px;

margin-top: 5px;

display: none;

}

.auth-btn {

width: 100%;

padding: 12px;

background-color: #ff3f6c;

color: white;

border: none;

border-radius: 2px;

font-size: 16px;

font-weight: 600;

cursor: pointer;

margin-bottom: 15px;

transition: background-color 0.3s ease;

}

.auth-btn:hover {

background-color: #ff527b;

}

.google-btn {

background-color: white;

color: #3e4152;

border: 1px solid #d4d5d9;

display: flex;

align-items: center;

justify-content: center;

gap: 10px;

}

.google-btn:hover {

background-color: #f5f5f6;

}

.auth-divider {

text-align: center;

margin: 15px 0;

color: #94969f;

position: relative;

}

.auth-divider::before,

.auth-divider::after {

content: "";

position: absolute;

top: 50%;

width: 40%;

height: 1px;

background-color: #eaeaec;

}

.auth-divider::before {

left: 0;

}

.auth-divider::after {

right: 0;

}

.forgot-password {

text-align: right;

margin-bottom: 15px;

}

.forgot-password a {

color: #ff3f6c;

font-size: 14px;

text-decoration: none;

}

.terms {

font-size: 12px;

color: #94969f;

text-align: center;

margin-top: 15px;

}

.terms a {

color: #ff3f6c;

text-decoration: none;

}

.back-to-login {

text-align: center;

margin-top: 15px;

}

.back-to-login a {

color: #ff3f6c;

font-size: 14px;

text-decoration: none;

}

footer {

background-color: white;

padding: 20px;

text-align: center;

font-size: 14px;

color: #94969f;

}

@media (max-width: 480px) {

.auth-container {

    box-shadow: none;

    background-color: transparent;

}



.tab {

    padding: 12px;

    font-size: 14px;

}



// Tab switching

const loginTab = document.getElementById('login-tab');

const signupTab = document.getElementById('signup-tab');

const loginForm = document.getElementById('login-form');

const signupForm = document.getElementById('signup-form');

const forgotPasswordForm = document.getElementById('forgot-password-form');

const forgotPasswordLink = document.getElementById('forgot-password');

const backToLoginLink = document.getElementById('back-to-login');



loginTab.addEventListener('click', function() {

    loginTab.classList.add('active');

    signupTab.classList.remove('active');

    loginForm.classList.add('active');

    signupForm.classList.remove('active');

    forgotPasswordForm.classList.remove('active');

});



signupTab.addEventListener('click', function() {

    signupTab.classList.add('active');

    loginTab.classList.remove('active');

    signupForm.classList.add('active');

    loginForm.classList.remove('active');

    forgotPasswordForm.classList.remove('active');

});



forgotPasswordLink.addEventListener('click', function(e) {

    e.preventDefault();

    loginForm.classList.remove('active');

    signupForm.classList.remove('active');

    forgotPasswordForm.classList.add('active');

});



backToLoginLink.addEventListener('click', function(e) {

    e.preventDefault();

    forgotPasswordForm.classList.remove('active');

    loginForm.classList.add('active');

});



// Form validation

// Login form validation

const loginEmail = document.getElementById('login-email');

const loginPassword = document.getElementById('login-password');

const loginEmailError = document.getElementById('login-email-error');

const loginPasswordError = document.getElementById('login-password-error');



loginForm.addEventListener('submit', function(e) {

    e.preventDefault();

    let isValid = true;



    // Validate email/phone

    if (!loginEmail.value.trim()) {

        loginEmailError.textContent = 'Please enter your email or mobile number';

        loginEmailError.style.display = 'block';

        isValid = false;

    } else if (!validateEmailOrPhone(loginEmail.value.trim())) {

        loginEmailError.textContent = 'Please enter a valid email or 10-digit mobile number';

        loginEmailError.style.display = 'block';

        isValid = false;

    } else {

        loginEmailError.style.display = 'none';

    }



    // Validate password

    if (!loginPassword.value.trim()) {

        loginPasswordError.textContent = 'Please enter your password';

        loginPasswordError.style.display = 'block';

        isValid = false;

    } else if (loginPassword.value.trim().length < 6) {

        loginPasswordError.textContent = 'Password must be at least 6 characters';

        loginPasswordError.style.display = 'block';

        isValid = false;

    } else {

        loginPasswordError.style.display = 'none';

    }



    if (isValid) {

        alert('Login successful!');

    }

});



// Signup form validation

const signupName = document.getElementById('signup-name');

const signupEmail = document.getElementById('signup-email');

const signupPhone = document.getElementById('signup-phone');

const signupPassword = document.getElementById('signup-password');

const signupDob = document.getElementById('signup-dob');

const signupAddress = document.getElementById('signup-address');



const signupNameError = document.getElementById('signup-name-error');

const signupEmailError = document.getElementById('signup-email-error');

const signupPhoneError = document.getElementById('signup-phone-error');

const signupPasswordError = document.getElementById('signup-password-error');

const signupDobError = document.getElementById('signup-dob-error');

const signupAddressError = document.getElementById('signup-address-error');



signupForm.addEventListener('submit', function(e) {

    e.preventDefault();

    let isValid = true;



    // Validate name

    if (!signupName.value.trim()) {

        signupNameError.textContent = 'Please enter your full name';

        signupNameError.style.display = 'block';

        isValid = false;

    } else {

        signupNameError.style.display = 'none';

    }



    // Validate email

    if (!signupEmail.value.trim()) {

        signupEmailError.textContent = 'Please enter your email';

        signupEmailError.style.display = 'block';

        isValid = false;

    } else if (!validateEmail(signupEmail.value.trim())) {

        signupEmailError.textContent = 'Please enter a valid email address';

        signupEmailError.style.display = 'block';

        isValid = false;

    } else {

        signupEmailError.style.display = 'none';

    }



    // Validate phone

    if (!signupPhone.value.trim()) {

        signupPhoneError.textContent = 'Please enter your mobile number';

        signupPhoneError.style.display = 'block';

        isValid = false;

    } else if (!validatePhone(signupPhone.value.trim())) {

        signupPhoneError.textContent = 'Please enter a valid 10-digit mobile number';

        signupPhoneError.style.display = 'block';

        isValid = false;

    } else {

        signupPhoneError.style.display = 'none';

    }



    // Validate password

    if (!signupPassword.value.trim()) {

        signupPasswordError.textContent = 'Please enter a password';

        signupPasswordError.style.display = 'block';

        isValid = false;

    } else if (signupPassword.value.trim().length < 6) {

        signupPasswordError.textContent = 'Password must be at least 6 characters';

        signupPasswordError.style.display = 'block';

        isValid = false;

    } else {

        signupPasswordError.style.display = 'none';

    }



    // Validate DOB (18+ validation)

    if (!signupDob.value) {

        signupDobError.textContent = 'Please enter your date of birth';

        signupDobError.style.display = 'block';

        isValid = false;

    } else {

        const dob = new Date(signupDob.value);

        const today = new Date();

        let age = today.getFullYear() - dob.getFullYear();

        const monthDiff = today.getMonth() - dob.getMonth();

        

        if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < dob.getDate())) {

            age--;

        }

        

        if (age < 18) {

            signupDobError.textContent = 'You must be 18+ to sign up';

            signupDobError.style.display = 'block';

            isValid = false;

        } else {

            signupDobError.style.display = 'none';

        }

    }



    // Validate address (optional)

    if (signupAddress.value.trim() && signupAddress.value.trim().length < 10) {

        signupAddressError.textContent = 'Address must be at least 10 characters';

        signupAddressError.style.display = 'block';

        isValid = false;

    } else {

        signupAddressError.style.display = 'none';

    }



    if (isValid) {

        alert('Signup successful!');

    }

});



// Forgot password form validation

const forgotEmail = document.getElementById('forgot-email');

const forgotEmailError = document.getElementById('forgot-email-error');



forgotPasswordForm.addEventListener('submit', function(e) {

    e.preventDefault();

    let isValid = true;



    // Validate email/phone

    if (!forgotEmail.value.trim()) {

        forgotEmailError.textContent = 'Please enter your email or mobile number';

        forgotEmailError.style.display = 'block';

        isValid = false;

    } else if (!validateEmailOrPhone(forgotEmail.value.trim())) {

        forgotEmailError.textContent = 'Please enter a valid email or 10-digit mobile number';

        forgotEmailError.style.display = 'block';

        isValid = false;

    } else {

        forgotEmailError.style.display = 'none';

    }



    if (isValid) {

        alert('Password reset link sent to your email/mobile!');

    }

});



// Helper validation functions

function validateEmail(email) {

    const re = /^[^s@]+@[^s@]+.[^s@]+$/;

    return re.test(email);

}



function validatePhone(phone) {

    const re = /^[0-9]{10}$/;

    return re.test(phone);

}



function validateEmailOrPhone(input) {

    return validateEmail(input) || validatePhone(input);

}



// Real-time validation for better UX

loginEmail.addEventListener('input', function() {

    if (loginEmail.value.trim() && !validateEmailOrPhone(loginEmail.value.trim())) {

        loginEmailError.textContent = 'Please enter a valid email or 10-digit mobile number';

        loginEmailError.style.display = 'block';

    } else {

        loginEmailError.style.display = 'none';

    }

});



loginPassword.addEventListener('input', function() {

    if (loginPassword.value.trim() && loginPassword.value.trim().length < 6) {

        loginPasswordError.textContent = 'Password must be at least 6 characters';

        loginPasswordError.style.display = 'block';

    } else {

        loginPasswordError.style.display = 'none';

    }

});



signupEmail.addEventListener('input', function() {

    if (signupEmail.value.trim() && !validateEmail(signupEmail.value.trim())) {

        signupEmailError.textContent = 'Please enter a valid email address';

        signupEmailError.style.display = 'block';

    } else {

        signupEmailError.style.display = 'none';

    }

});



signupPhone.addEventListener('input', function() {

    if (signupPhone.value.trim() && !validatePhone(signupPhone.value.trim())) {

        signupPhoneError.textContent = 'Please enter a valid 10-digit mobile number';

        signupPhoneError.style.display = 'block';

    } else {

        signupPhoneError.style.display = 'none';

    }

});



signupPassword.addEventListener('input', function() {

    if (signupPassword.value.trim() && signupPassword.value.trim().length < 6) {

        signupPasswordError.textContent = 'Password must be at least 6 characters';

        signupPasswordError.style.display = 'block';

    } else {

        signupPasswordError.style.display = 'none';

    }

});

});

Nothing as the code is already working

How do I combine tool-calling and multimodal inputs in GenKit? I have tried the following:

ai.generate([
  { media: { url: "https://www.example.com/image1.jpg" } },
  { text: "Do something with that picture." },
  { tools: [myTool], },
])

ai.generate({
  tools: [myTool],
  prompts: [
    { media: { url: "https://www.example.com/image1.jpg" } },
    { text: "Do something with that picture." },
  ],
})

…but both throws red squiggly lines at me. What is the correct call signature?

Using react and firebase, it seems that even when the user is logged in, my cloud function still throws unauthenticated error. After checking context, it turns out to only have {"signal": {}}.

import admin from "firebase-admin";
import functions from "firebase-functions";

admin.initializeApp();
const db = admin.firestore();

export const createStudentAccount = functions.https.onCall(async (data, context) => {
  if (!context.auth) {
    // this always throws because context.auth is undefined
    throw new functions.https.HttpsError("unauthenticated", "You must be logged in. " 
      + JSON.stringify(context)); // just so I can see the value of context from the client side
  }
  // rest of the code
});

Calling the function:

import { getFunctions, httpsCallable } from 'firebase/functions';
import { app, auth, db } from './firebase.js';

const functions = getFunctions(app, "us-central1");

export async function registerStudent({ fname, lname, email, oen }) {
  console.log(auth);
  const fn = httpsCallable(functions, 'createStudentAccount');
  const result = await fn({ fname, lname, email, password: oen, isAdmin: false });
  return result.data;
}

I also tried await auth.currentUser.getIdToken(true) to force a fresh token, did not work.

How I know that auth is definitely passed to the function:

1. console.log(auth) right before calling the cloud function prints the entire auth object, including my UID and email.

2. In the Networks tab, I can see a header authorization: Bearer <token> under https://us-central1-myprojectid.cloudfunctions.net/createStudentAccount, which if I understand correcly means it is authorized.

I have no idea why context has only {"signal": {}} and no "auth" when the user is logged in.

I’m using AG Grid in a plain JavaScript project. I tried adding rowNumbers: true in the grid options, but it doesn’t show row numbers on each row.

Here’s my code:

const columnDefs = [
  { field: "athlete" },
  { field: "country" },
  { field: "sport" },
  { field: "year" },
  { field: "gold" },
  { field: "silver" },
  { field: "bronze" },
];

const gridOptions = {
  defaultColDef: {
    flex: 1,
    minWidth: 100,
  },
  rowNumbers: true, // This doesn't seem to work
  columnDefs: columnDefs,
  rowData: null,
};

document.addEventListener("DOMContentLoaded", () => {
  const gridDiv = document.querySelector("#myGrid");
  const gridApi = agGrid.createGrid(gridDiv, gridOptions);

  fetch("https://www.ag-grid.com/example-assets/olympic-winners.json")
    .then((response) => response.json())
    .then((data) => {
      gridApi.setGridOption("rowData", data);
    });
});


How can I correctly display row numbers in AG Grid? Is rowNumbers a valid option? Or is there another way to show row index (like STT)?

Here’s what I coded. I removed unnecessary parts.

login.html

<html>
  <head>
    <script src="/pgScripts/login.js"></script>
  </head>
  <body>
    <h1>Login</h1>
    <form id="user1" class="container">
      <div>
        <p>User 1</p>
        <div class="item">
          <label for="username1">Username:</label>
          <input type="text" name="username1" id="username1" />
        </div>
        <div class="item">
          <label for="pass1">Password:</label>
          <input type="password" name="pass1" id="pass1" />
        </div>
        <div class="item">
          <input type="submit" />
        </div>
      </div>
    </form>
    <form id="user2" class="hide">
      <div>
        <p>User 2</p>
        <div>
          <label for="username2">Username:</label>
          <input type="text" name="username2" id="username2" />
        </div>
        <div>
          <label for="pass2">Password:</label>
          <input type="password" name="pass2" id="pass2" />
        </div>
        <div>
          <input type="submit" />
        </div>
      </div>
    </form>
  </body>
</html>

login.js

let form1 = document.querySelector('#user1');
let form2 = document.querySelector('#user2');
export { user1D, user2D };

let user1D;

let user2D;

form1.addEventListener('submit', (e) => {
  e.preventDefault();
  let data = new FormData(e.target);
  user1D = Object.fromEntries(data);
  console.log(user1D);
  form1.classList.toggle('hide');
  form2.classList.toggle('hide');
});

form2.addEventListener('submit', (e) => {
  e.preventDefault();
  let data = new FormData(e.target);
  user2D = Object.fromEntries(data);

  window.location.href = '/pages/board.html';
});

board.js

import { user1D, user2D } from "./login.js";
console.log(user1D);

board.html

<html>
  <head>
    <script type="module" src="/pgScripts/board.js"></script>
  </head>
  <body></body>
</html>

login.css

.hide{
  display:none;
}

The problem is after the two forms log the results smoothly and it jumps to the next page. The first form suddenly can’t read the “null” object. It printed previously. This is not only happening on another page and unrequested.

The goal here was to success fully transfer data to another javascript file.

My best solution was to have an integer counter that would remove the add event listener so it couldn’t happen twice. However, that didn’t work.

I’m relatively new to javascript, so apologies in advance. I’m modularizing a jsPsych experiment by moving large objects into separate files. When I move my all_breaks object into break_schemas.js and try to access it from main.js, I get:
ReferenceError: all_breaks is not defined

Even though break_schemas.js comes before main.js in the HTML, the error still appears. All scripts are plain <script src="..."> tags, no async or defer. How can I ensure global variables like all_breaks are accessible across files? I’ve distilled it into, I think, a very simple version below for replication. I’d looked through a few similar examples [12] but ultimately couldn’t get any of these to work for me.

File Structure

/js
  ├── break_schemas.js
  └── main.js
index.html

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Break ID Test</title>
</head>
<body>
  <script src="js/break_schemas.js"></script>
  <script src="js/main.js"></script>
</body>
</html>

js/break_schemas.js

// This defines a simple mapping of break IDs to arrays
const all_breaks = {
  'TEST-001': [50, 122, 204],
  'TEST-002': [38, 120, 228]
};

js/main.js

const break_id = 'TEST-001';

// This line throws: ReferenceError: all_breaks is not defined
const breaks = all_breaks[break_id] || [];

console.log("Breaks:", breaks);

I’ve recently completed learning Python and now want to continue my web development journey. I’m unsure whether I should move on to frontend development (like HTML, CSS, JavaScript) or directly dive into backend frameworks such as Django or Flask.

Considering I want to eventually become a full-stack developer, which path is more logical or beneficial to take next after Python

My problem is the div element will not show even when using the show method and clicking on it.

console.log("Profile JS loaded");
document.addEventListener('DOMContentLoaded', function () {
    // Find all user profile bubbles
    var userBubbles = document.querySelectorAll('.bubble');

    userBubbles.forEach(function (bubble) {
        bubble.addEventListener('mouseenter', function () {
            var userId = bubble.getAttribute('data-userid');
            var calendarEl = document.getElementById('mini-calendar-' + userId);

            // Fetch user events
            fetch(`/events/${userId}`)
                .then(response => response.json())
                .then(events => {
                    // Initialize FullCalendar
                    var calendar = new FullCalendar.Calendar(calendarEl, {
                        initialView: 'dayGridMonth',
                        events: events,
                        headerToolbar: false, // Hide header
                        height: 'auto', // Adjust height
                        contentHeight: 'auto', // Adjust content height
                        editable: false, // Disable editing
                        selectable: false // Disable selection
                    });
                    calendar.render();
                })
                .catch(error => console.error('Error fetching events:', error));

            // Show the mini calendar popup
            calendarEl.classList.add('show');
        });

        bubble.addEventListener('mouseleave', function () {
            var userId = bubble.getAttribute('data-userid');
            var calendarEl = document.getElementById('mini-calendar-' + userId);

            // Hide the mini calendar popup
            calendarEl.classList.remove('show');
        });

        var profilejson = $("#profile-safe").text();

        console.log('PROFILESAFE: ' + profilejson);

        const profiles = JSON.parse($("#profile-safe").text());
        console.log(profiles);
        const heartbeatInterval2 = 1000;
        async function updateStatus() {
            for (let i = 0; i < profiles.length; i++) {
                const userId = profiles[i].user.id;

                try {
                    const response = await $.ajax({
                        url: '/status/' + userId,
                        method: 'GET',
                    });
                    if (response == true) {
                        document.getElementById('user-dot-' + userId).style.backgroundColor = 'rgb(72, 255, 0)';
                    } else {
                        document.getElementById('user-dot-' + userId).style.backgroundColor = 'rgb(255, 0, 0)';
                    }
                } catch (error) {
                    console.error(error);
                }
            }
            console.log('status updated');
        }

        // setInterval(updateStatus, 10000);

        
    });

    // Initialize department calendars
    var calendarEls = document.querySelectorAll('.department-calendar');
    calendarEls.forEach(function (calendarEl) {
        var calendar = new FullCalendar.Calendar(calendarEl, {
            initialView: 'dayGridMonth',
            selectable: true,
            selectHelper: true,
            editable: true,
            select: function (info) {
                alert('Selected ' + info.startStr + ' to ' + info.endStr);
            }
        });
        calendar.render();
    });

    
    $(document).on("click", "#uploadDocsBtn", function () {
        $("#uploadDocs").toggle();
    });

    $(document).on("click", "#tasksBtn", function () {
        $("#tasksWall").toggle();
    });

    $(document).on("click", "#timecardBtn", function () {
        $(".timecard-dropdown-content").toggle();
    });

    $(document).on("click", "#enterTimeBtn", function () {
        $("#timecardWall").toggle();
    });

    $(document).on("click", "#previousTimecardsBtn", function () {
        $("#prevTimecardsWall").toggle();
    });

    $(document).on("click", "#uploadButton", function () {
        $("#uploadDocsForm").toggle();
    });

    $(document).on("click", "#allDocsButton", function () {
        $("#allDocs").toggle();
    });

    $(document).on("click", ".keyDocsBtn", function () {
        if ($(".keyDocs").css("display") != "none") {
            $(".keyDocs").hide();
        } else {
            $(".keyDocs").css("display", "grid");
        }
    });
    $(document).on("click", ".deptEmailBtn", function () {
        $(".deptEmail").toggle();

    });

    $(document).on("click", ".deptTasksBtn", function () {
        $(".deptTasks").toggle();
    });
    $(document).on("click", ".trainingVidBtn", function () {
        $(this).find(".trainingVid").show();

    });
    $(document).on("click", ".introVidBtn", function () {
        $(".introVid").toggle();

    });

    $(".info-box-close").click(function (event) {
        console.log("Clicked element:", $(this));
        console.log("Parent element:", $(this).parent());
        event.preventDefault();
        event.stopPropagation();
        // const videos = document.querySelectorAll('video');
        // if (videos.length) {
        //   videos.forEach(video => {
        //     video.pause();         // Stop the video
        //     video.src = "";        // Clear the source
        //     video.load();          // Unload any buffered data
        //     video.remove();        // Remove from DOM
        //   });
        // }
        $(this).parent().hide();
    });
    $(document).on("click", ".uploadTrainingVideoIcon", function () {
        var deptId = $(this).attr('value');
        console.log(deptId);
        $('#uploadTrainingVideoForm' + deptId).show();
    });

    $(document).on("click", ".trainingVidCog", function () {
        var $settingsDropdown = $(this).next('.settings-dropdown');
        if ($settingsDropdown.length) {
            $settingsDropdown.toggle();
        } else {
            console.error('Settings dropdown not found!');
        }
    });

    $(document).on("change", "#trainingVidUsersSelect", function (event) {
        event.preventDefault();
        var selectedUsers = [];
        $('#trainingVidUsersSelect option:selected').each(function () {
            selectedUsers.push($(this).val());
        });
        console.log('Selected users:', selectedUsers);
        $.ajax({
            url: '/video-settings/' + $(this).attr('data-vid-id') + '/',
            type: 'POST',
            headers: {
                'X-CSRFToken': $("input[name=csrfmiddlewaretoken]").val(),
            },
            data: JSON.stringify({ selected_users: selectedUsers }),
            success: function (data) {
                console.log(data);
            }
        });
    });

    $("#trainingVideoVisibleCheckbox").change(function () {
        $.ajax({
            url: '/video-settings/' + $(this).attr('data-vid-id') + '/',
            type: 'POST',
            headers: {
                'X-CSRFToken': $("input[name=csrfmiddlewaretoken]").val(),
            },
            data: { visible: $(this).is(':checked') },
            success: function (data) {
                console.log(data);
            }
        });
    });

    $("#searchAnnouncements").on("keyup", function (event) {
        event.preventDefault();
        var searchQuery = $(this).val();
        $.ajax({
            url: '/search_announcements/',
            type: 'GET',
            data: { search_query: searchQuery },
            success: function (data) {
                console.log(data);
                $("#announcementsResults").html("");
                $.each(data.results, function (index, value) {
                    $("#announcementsResults").append(
                        '<div class="announcementResult">' +
                            '<form id="editAnnouncementForm" method="post" data-id="' + value.id + '">' +
                            '<input type="hidden" name="csrfmiddlewaretoken" value="' + $("input[name=csrfmiddlewaretoken]").val() + '">' +
                            '<p><strong>Title:</strong> <input type="text" name="title" value="' + value.title + '"></p>' +
                            '<p><strong>User:</strong> <input type="text" name="user" value="' + value.user + '"></p>' +
                            '<p><strong>Content:</strong> <textarea name="content">' + value.content + '</textarea></p>' +
                            '<p><strong>Date:</strong> <input type="text" name="date" value="' + value.date + '"></p>' +
                            '<button type="submit">Save Edit</button>' +
                            '</form>' +
                        '</div>'
                    );
                });
            }
        });

        $("#editAnnouncementForm").on("submit", "form", function (event) {
            event.preventDefault();
            var form = $(this);
            $.ajax({
                url: /edit_announcement/ + form.attr('data-id') + '/',
                type: form.attr('method'),
                data: form.serialize(),
                success: function (data) {
                    form.append('<p style="color: green;">Announcement edited successfully!</p>');
                },
                error: function (data) {
                    form.append('<p style="color: red;">Error editing announcement. Make sure all fields are in correct format.</p>');
                }
            });
        });
    });

    var megaphoneIcon = $('#manage .fa-megaphone');
    megaphoneIcon.on("click", function () {
        $('#announcementsManage').show();
        
    });
    $('#manageBtn').on("click", function (event) {
        console.log("Manage button clicked");
        event.preventDefault();
        
        $('#manage').show();
    });
});

<div id="manage">
    <i class="fas fa-megaphone"></i>
    <div id="announcementsManage">
        <h2>Manage announcements</h2>
        <input type="text" id="searchAnnouncements" placeholder="Search announcements...">
        <div id="announcementsResults">

        </div>

    </div>
</div>

          <li>
            <i id="manageBtn" style="cursor: pointer" class="fas fa-user-tie"></i>
          </li>

I have tried to use event.preventDefault() in the function on click and expected the #manage element to show. It did not.

Problem:
Clicking on the icon with id #manageBtn logs the message “Manage button clicked” in the console (so the click handler is triggered), but the #manage div does not become visible. I’ve tried using .show() as well as manually checking display: none in the dev tools, but nothing changes.

What I’ve tried:
Confirmed that the event handler is firing (via console log).

Used both event.preventDefault() and event.stopPropagation() to rule out interference.

Checked for CSS rules that might override visibility.

Verified that the HTML elements are present in the DOM.

Ensured that there are no duplicate IDs.

Tried using .css(‘display’, ‘block’) instead of .show() with no success.

Notes:
The #manage element does exist in the DOM at page load.

jQuery is loaded and working correctly (other elements using .toggle() and .show() do work).

No JavaScript errors in the console.

I’m also using FullCalendar and some other dynamic JS UI features, but nothing that should conflict here (as far as I can tell).

I’m working on a complex web application with various dynamic elements controlled via jQuery. I’m trying to display a with the ID #manage when a user clicks an icon with ID #manageBtn. The click event is correctly firing (confirmed via a console.log()), but the targeted does not become visible on the page. Here’s a breakdown of the issue with code, context, and everything I’ve tried.

✅ Expected Behavior:
When a user clicks on the icon , the #manage div should appear.

❌ Actual Behavior:
The event triggers and logs to the console, but the #manage element remains hidden and does not appear in the UI. I’ve inspected the DOM live using dev tools and confirmed that its visibility/display properties do not change.

I’m a brand-newbie to firebase and cloud computing environments in general. I don’t know a lot of the jargon yet. I’m trying to write my first index.html file using firebase and the syntax from an online tutorial. I’m getting the following error:

Uncaught SyntaxError: Unexpected token ‘export’ (at VM146 firebase-app.js:2761:1)

I’ve tried everything (literally everything) the Copilot has suggested and my code is a mess now. It looks like this:

<body>
      <p>Getting started with Firebase</p>
      <h1 id="bigOne"></h1>
      // <script src="https://www.gstatic.com/firebasejs/11.6.1/firebase-app.js"></script>
      <script src="https://www.gstatic.com/firebasejs/11.6.1/firebase-app.js" type="module">

      // Import the functions you need from the SDKs you need
      import { initializeApp } from "firebase/app";
      const app = initializeApp(firebaseConfig);
      import { getAnalytics } from "https://www.gstatic.com/firebasejs/11.6.1/firebase-analytics.js";
      // TODO: Add SDKs for Firebase products that you want to use
      // https://firebase.google.com/docs/web/setup#available-libraries
      const firebase = require("firebase/app");

      // Your web app's Firebase configuration
      // For Firebase JS SDK v7.20.0 and later, measurementId is optional
      const firebaseConfig = {
            apiKey: "AIzaSyBADV4O4Oyc2xaHcLHwZficznzpoU13Gm0",
            authDomain: "my-first-project-1de2f.firebaseapp.com",
            projectId: "my-first-project-1de2f",
            storageBucket: "my-first-project-1de2f.firebasestorage.app",
            messagingSenderId: "741734388415",
            appId: "1:741734388415:web:6e4075ceaad15606816c0a",
            measurementId: "G-H0X2KKG0XP"
      };

      // Initialize Firebase
      const app = initializeApp(firebaseConfig);
      const analytics = getAnalytics(app);

      // getting the text value from the database
      var bigOne = document.getElementById('bigOne');
      console.log(bigOne);
      var dbRef = firebase.database().ref().child('Text');
      console.log(dbRef);
      dbRef.on('value', snap => bigOne.innerText = snap.val());

      // Get a list of cities from your database
      async function getCities(db) {
           const citiesCol = collection(db, 'cities');
           const citySnapshot = await getDocs(citiesCol);
           const cityList = citySnapshot.docs.map(doc => doc.data());
      return cityList;
      }

</script>    
</body>

Can anyone help point me in the right direction? Thank you for any suggestions!! I’m out of ideas and where else to look.

I tried (not in order)

1. installing firebase via npm
2. using commonJS syntax
3. checked that my package.json file had “type”: “module” (it did)

I don’t know if I’m using firebase in a browser (I think so) or in a module-based setup. I’m pretty sure my code is now a mishmash of syntax for both. Neither seems to work.