Category: javascript

I have a select menu with dynamic options. Something like this:

<select>
  {options}
</select>

On page load I fetch the user’s current country and render this:

<select>
  <option value="italy">Italy</option>
</select>

When the select-element is focused, I fetch all available countries:

(I’m not fetching it together with current country to reduce page loading time)

<select>
  <option value="england">England</option>
  <option value="france">France</option>
  <option value="denmark">Denmark</option>
  <option value="spain">Spain</option>
  <option value="germany">Germany</option>
  <option value="italy">Italy</option>
</select>

Problem

If the dropdown menu is open while the options get swapped out, the highlight will stay on the same position (selectedIndex doesn’t update according to the new value="italy" position)

How to reproduce

1. Go to this Codesandbox
2. Click on the select menu
3. Observe

Desired result

I want the highlight to move to the ‘Italy’ option after option swap.

Attempts

I tried modifying the selectedIndex:

useEffect(() => {
  if (optionsAreLoaded) {
    selectRef.current.selectedIndex = 6
  }
}, [options]);

But that didn’t do anything to the highlight

I also saw this similar question. In it, the OP answered themselves saying they had to reset the select value whenever the option list changed. So I tried this:

useEffect(() => {
  setSelectedOption({ id: undefined, value: "", label: "" });
}, [options]);

But again, no effect to the highlight.

Question

Can I update the highlight position while the menu is open?

Do I maybe need to build my own select menu from scratch or use a library (React-select/Mantine/etc.)?

Im trying to make a code that calculates the value of an angle in a right angle triangle provided its sin, cos or tan. For example, in a calculator, if you have the value of sin(x) and you want to find the angle you input sin^-1(x) and get said angle. How can I make this code in JavaScript?

I tried using this code but it didnt work and I dont know if it helps me in my project:

radianToDegree = r => r * 180 * Math.PI ** -1
console.log(radianToDegree(Math.asin(0.5)).toFixed(3) * 1)

So here’s my python function that’s on the backend running on localhost:5000:

@app.route('/doctor/delete/<doctor_id>', methods=['DELETE', 'OPTIONS'])
def delete_doctor(doctor_id):
    if request.method == 'OPTIONS':
        response = app.make_default_options_response()
        response.headers.add("Access-Control-Allow-Origin", "http://localhost:5500")
        response.headers.add("Access-Control-Allow-Methods", "DELETE, OPTIONS")
        response.headers.add("Access-Control-Allow-Headers", "Content-Type, Authorization")
        return response, 204 

    @admin_required
    def perform_delete():
        try:
            doctors = read_doctors()
            doctor_list = doctors['doctors']

            doctor = next((doc for doc in doctor_list if doc['id'] == doctor_id), None)
            if not doctor:
                response = jsonify({"message": "Doctor not found"})
                response.headers.add("Access-Control-Allow-Origin", "http://localhost:5500")
                return response, 404
            
            doctor_list.remove(doctor)
            write_doctors(doctors)

            response = jsonify({"message": "Doctor deleted successfully"})
            response.headers.add("Access-Control-Allow-Origin", "http://localhost:5500")
            return response, 200
        except Exception as e:
            response = jsonify({"message": f"Error deleting doctor: {str(e)}"})
            response.headers.add("Access-Control-Allow-Origin", "http://localhost:5500")
            return response, 500

    return perform_delete()

I have this js code running on localhost:5500, and it’s supposed to be the front end:

async function deleteDoctor(doctorId) {
    if (!confirm('Are you sure you want to delete this doctor?')) {
        return;
    }

    try {
        const response = await fetch(`${API_BASE_URL}/doctor/delete/${doctorId}`, {
            method: "DELETE",
            headers: {
                "Content-Type": "application/json",
                "Authorization": `Bearer ${localStorage.getItem('adminToken') || 'authToken123'}`
            }
        });

        if (!response.ok) {
            const errorData = await response.json();
            throw new Error(errorData.message || 'Failed to delete doctor');
        }

        const data = await response.json();
        alert(data.message);
        loadDoctors(); // Refresh the doctor list after successful deletion
    } catch (error) {
        console.error("Error deleting doctor:", error);
        alert(error.message || 'Failed to delete doctor');
    }
}

In the browser I get these errors in the dev options:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://127.0.0.1:5000/doctor/delete/DOC0003. (Reason: Did not find method in CORS header ‘Access-Control-Allow-Methods’).

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://127.0.0.1:5000/doctor/delete/DOC0003. (Reason: CORS request did not succeed). Status code: (null).
Error deleting doctor: TypeError: NetworkError when attempting to fetch resource. doctormgmt.html:161:17

I have added all the necessary imports:

from flask import Flask, request, jsonify, send_from_directory
from flask_cors import CORS
CORS(app, resources={
    r"/*": {
        "origins": ["http://localhost:5500", "http://127.0.0.1:5500"],
        "methods": ["GET", "POST", "PUT", "DELETE", "OPTIONS"],  # Explicitly include DELETE here
        "allow_headers": ["Content-Type", "Authorization"],
        "supports_credentials": True
    }
})

I don’t know what to do. Can anyone help me?

Why Shuffling an array like this way is a bad idea?

Array.sort((a,b) => {if (Math.random() > 0.5) return -1; else return 1;})

I’m a newbie programmer and not that experienced, but I practised C++ and Python as far as I could, and yet I think I am still at the beginner level. I guess I need real-world project experience to advance more, which is impossible to do on my own. Here, I was thinking of working as an assistant to an experienced programmer who is still working in the market so that I could enter the market through him. I am not asking for money but experience. What is your thought about this matter?

I would like to hear your advice on it as my senior programmer.

Using Chrome, I try to access the clipboard via: Clipboard.writeText. I am on a https page, when I do:

const clipboardPermission = await navigator.permissions.query({name: "clipboard-write"});

The clipboardPermission.state will be granted.

Yet when I do afterwards:

await navigator.clipboard.writeText('some string');

I get the error:

"Failed to execute 'writeText' on 'Clipboard': Document is not focused."

How am I / the user supposed to focus the document? (In order to interact with clipboard, the user has to interact with the DOM, so I am confused where the issue stems from.)

I’m trying to download a file with my extension, it works alright with all browsers except safari. In safari instead of downloading the file, it just opens it in new tab with uri as url. How to download the file in safari with js code?

axios
  .get(`http://localhost:3000/api/download`, {
    params: { url },
    responseType: "blob",
  })
  .then((response) => {
    const disposition = response.headers["content-disposition"];
    let filename = "test.mp3";
    if (disposition && disposition.indexOf("attachment") !== -1) {
      const matches = /filename="([^"]*)"/.exec(disposition);
      if (matches != null && matches[1]) {
        filename = matches[1];
      }
    }
    const blob = response.data;

    const reader = new FileReader();
    reader.onloadend = () => {
      const link = document.createElement("a");
      link.href = reader.result; 
      link.download = filename;

      document.body.appendChild(link);

      link.click();
      document.body.removeChild(link);
    };
    reader.readAsDataURL(blob);
  })
  .catch((error) => {
    console.error("Download failed:", error);
  })
  .finally(() => {
    spinner.classList.add("hidden");
    downloadBtn.classList.remove("hidden");
  });

when we select the master view it’s not display once the menu item closed.

        <MenuItem
          onClick={(event) => this.handleMasterView(event, masterView)}
          component="a"
          href="/cgi-bin/admin2.cgi?clear_session_dealer_eid=1"
          selected={!currentDealer.name}
        >
          <Typography>Master View</Typography>
        </MenuItem>

i am trying to put the bot online but im getting this error.please help me

Hello.So i am trying to make a discord bot following an tutorial on youtube,but it was posted lake 4 years ago and i am trying to do it same as that video but with the latest version.i was expecting to put the bot online,but i am getting that error

We are using asterisk say data service for readback of date. We have integrated asterisk with bpmn-js, and use context to execute commands for say date in case of readback.
Following is the code which is used to readback datetime:

function sayDateTime(context, value, format, escapeDigits = "*") {
  return context.sayDateTime(value, escapeDigits, format);
}

where:

value is the seconds elapsed after epoch time (UTC).
format is the format of readback (day, month, year).
And we are using following method to get milliseconds to pass to the function:
Here the formatted date is of following format: “YYYY-MM-DD” (example: 2024-03-11)

const [year, month, day] = formattedDate.split('-').map(Number);
const date = new Date(formattedDate);
let dateFormat = "";
if (dateReadbackPattern.includes("MM")) {
    dateFormat += "B"; // Month
}
if (dateReadbackPattern.includes("DD")) {
    dateFormat += "d"; // Day
}
if (dateReadbackPattern.includes("YYYY") || dateReadbackPattern.includes("YY")) {
    dateFormat += "Y"; // Year
}
//Adjust for the timezone offset (to get the correct timestamp)
const adjustedDate = new Date(date.getTime() - (date.getTimezoneOffset() * 60 * 1000));
console.log(date.getTimezoneOffset());
    
// Get the timestamp in milliseconds (which is in the local time zone)
const localTimeInMillis = adjustedDate.getTime();
    
// Convert it to seconds (if you need it in seconds for sayDateTime)
const localTimeInSeconds = Math.floor(localTimeInMillis / 1000);
                        
    
return AgiService.sayDateTime(agiContext, localTimeInSeconds, dateFormat, escapeDigits);

But the readback is happening one day earlier than the actual date. So, do we need to pass timezone as extra parameter, if yes, then how does asterisk uses that timezone for readback?

Can someone please explain how does asterisk evaluates time by considering the timezone which we provide (does it subtract or adds)?
Example: If we send milliseconds according to UTC as a parameter, then does asterisk apply extra addition or subtraction according to timezone?
Any help would be greatly appreciated!!

I have a Spring Boot project where I am using HTML templates with Thymeleaf. The templates have dependencies, and I want to manage these dependencies using npm. My goal is to have an npm build command that copies all the relevant files from the source folder to the resources/static and resources/templates folders.

Project setup:

• Using Gradle for the Java build
• The build should be fully automated

Specific libraries I am using:

• jQuery
• Bootstrap (including Bootstrap CSS from node_modules)

Currently I am downloading the dependencies manually, but I feel like this is not the best solution.

I would appreciate some tips or maybe even a link to a GitHub project with a similar setup.

I am an absolute newby to JavaScript and I am trying to change the value of column ZEILE_STATUS to ‘T0’ if a new entry is made in the grid and the value of this column to ‘T’ for all the following rows which do not have an entry. This is what I have tried(the above code is for another functionality which does not count for my problem now)

function customIgAction(config) {
    var $ = apex.jQuery,
        toolbarData = $.apex.interactiveGrid.copyDefaultToolbar(),
        toolbarGroup = toolbarData.toolbarFind("actions3"); // This is the group with the actions menu

    // Add a copy-down button after the actions menu
    toolbarGroup.controls.push({
        type: "BUTTON",
        action: "selection-copy-down",
        icon: "icon-ig-copy-down",
        label: "Nach unten kopieren",  
        iconBeforeLabel: true,
        iconOnly: false
    });

    // Customize Save Button
    var saveButton = toolbarData.toolbarFind("save");
    if (saveButton) {
        saveButton.icon = "icon-ig-save";  
        saveButton.iconBeforeLabel = true;
        saveButton.iconOnly = false; 
    }

    // Customize Edit Button
    var editButton = toolbarData.toolbarFind("edit");
    if (editButton) {
        editButton.icon = "icon-ig-edit";  
        editButton.iconBeforeLabel = true;
        editButton.iconOnly = false;  
    }

    config.toolbarData = toolbarData;

    // Customize actions
    config.initActions = function(actions) {
        actions.hide("show-aggregate-dialog");
        actions.hide("show-filter-dialog");
        actions.lookup("save").shortcut = "Ctrl+Alt+S";
        actions.update("save");

        // Add "pause-ein" action
        actions.add({
            name: "pause-ein",
            label: "Pause eintragen",
            shortcut: "Ctrl+Alt+P",
            action: function(event, focusElement) {
                let view = apex.region("ZEITERF").widget().interactiveGrid("getCurrentView");
                if (view.supports.edit) {
                    let model = view.model;
                    let record = view.getContextRecord(focusElement)[0];

                    // Set values for the current record
                    model.setValue(record, "ZEILE_STATUS", "P");
                    model.setValue(record, "AB_KZL", "");
                    model.setValue(record, "KUN", "");
                    model.setValue(record, "TA_ID", "");
                    model.setValue(record, "PA_ID", "");
                    model.setValue(record, "TA_PROTT", "");
                    
                    apex.message.showPageSuccess("pause successfully entered!");
                }
            }
        });

        // Add "pause-raus" action
        actions.add({
            name: "pause-raus",
            label: "Pause rausnehmen",
            action: function(event, focusElement) {
                alert("make pause back to T!");
            }
        });

        // Add "pause-deaktiviert" action
        actions.add({
            name: "pause-deaktiviert",
            label: "Abwesend",
            action: function(event, focusElement) {
                alert("not possible");
            }
        });

        // Add logic for new row entry
        let view = apex.region("ZEITERF").widget().interactiveGrid("getCurrentView");
        let model = view.model;

        model.subscribe("modelCreate", function(event, record) {
            // Set the new record's ZEILE_STATUS to 'T0'
            model.setValue(record, "ZEILE_STATUS", "T0");

            // Get all rows and update subsequent rows to 'T'
            let records = model.getRecords();
            let foundNewEntry = false;
            records.forEach(function(row) {
                if (model.getValue(row, "ZEILE_STATUS") === "T0") {
                    foundNewEntry = true;
                } else if (foundNewEntry) {
                    model.setValue(row, "ZEILE_STATUS", "T");
                }
            });
        });
    };

    return config;
}

I have just added the code for Add logic for new row entry ‘Add logic for new row entry’ the other code is from another developer who made the first steps. But now I need to reach out for getting the values changed. And I already do not have more ideas. Anybody can help me?

Thanks Irina

I have checked all the static IDs and there is no mistake but I am getting all the time the error:

   TypeError: apex.region(...).widget() is null

But before I have added my part of code it worked.

I have a html page, to which I would like to insert a .html template which is stored in a separate file. I have done it like this:

index.html:

<html>
<body>
  <script src="js/jquery-3.7.1.min.js"></script>
  <script src="js/cookie_consent.js" type="application/javascript"></script>

  <div id="cookie-banner-container"></div>
</body>
</html>

cookie_consent.js

$(document).ready(function() {
  
    // Load the external header HTML into the page
    fetch('/html_templates/template.html')
        .then(response => response.text())
        .then(html => {
            // set contents of template to specific div
            $('#cookie-banner-container').html(html);
        })
        .catch(error => console.error('Error loading template:', error)); 
    console.log("DOMContentLoaded banner");
});

template.html

<div id="mytemplate" > 
   any text
</div>

It all works fine, just when I fetch the template from the server of course I am doing a HTTP Reqest in ordet to get the file hosted on the server. Along with the response, my server is adding some cookies using the SET-COOKIE header:

I have tried to change the code to omit the headers by requesting the template like this:

   fetch('/html_templates/template.html', { credentials: 'omit' })

But the header is still there.

Is there any way I can “take” this html template and insert it into my index.html page to avoid the browser to set the cookies?

Additional information: I am using simple javascript with jquery (I am free to pick any other pure front end libs), I have no access to angular nor react. Also I am planning to load this template for around 100 files similiar to index.html, thats why I want to keep template in a separate file.

I have a ticket booking website. When a ticket is ready to be served, a modal should open, and a sound should play along with the ticket information. I want the sound to play without requiring user interaction to provide a better user experience.

The website has two pages: one is the login page and the other is the ticket serving list. When a user enters the website step by step, first logging in and then navigating to the ticket serving page, the user interaction condition is fulfilled, and the audio plays with sound. However, there is one caveat: when I’m on the ticket serving page and refresh, the user interaction memory is reset, so the user has to click somewhere again. I want to play the audio with sound without requiring user interaction to improve the website experience.

According to the Chrome autoplay documentation, it is mentioned that top frames can delegate autoplay permissions to their iframes to allow autoplay with sound.

Does anyone have an idea of how to implement this?

I tried iframe delegation but did not get success till now.

function toggleMenu() {
    const navLinks = document.getElementById("navLinks");
    const hamburger = document.getElementById("hamburger");

    navLinks.classList.toggle("show");

    if (navLinks.classList.contains("show")) {
        hamburger.innerHTML = "✕"; 
        hamburger.classList.add("active");
    } else {
        hamburger.innerHTML = "☰"; 
        hamburger.classList.remove("active");
    }
}
document.querySelectorAll(".dropdown > a").forEach((dropdownToggle) => {
    dropdownToggle.addEventListener("click", (e) => {
        if (window.innerWidth <= 768) {
            e.preventDefault(); 
            const dropdownMenu = dropdownToggle.nextElementSibling;
            if (dropdownMenu && dropdownMenu.classList.contains("dropdown-menu")) {
                dropdownMenu.style.display =
                    dropdownMenu.style.display === "block" ? "none" : "block";
            }
        }
    });
});

let slideIndex = 0;
showSlides(slideIndex);

function nextSlide() {
    showSlides(slideIndex += 1);
}

function prevSlide() {
    showSlides(slideIndex -= 1);
}

function currentSlide(n) {
    showSlides(slideIndex = n - 1);
}

function showSlides(n) {
    let slides = document.getElementsByClassName("slide");
    if (n >= slides.length) { slideIndex = 0; }
    if (n < 0) { slideIndex = slides.length - 1; }

    for (let i = 0; i < slides.length; i++) {
        slides[i].style.display = "none";
    }

    slides[slideIndex].style.display = "block";
}


setInterval(() => {
    nextSlide();
}, 5000); 


let currentIndex = 0;
        const testimonials = document.querySelectorAll('.testimonial');
        const totalTestimonials = testimonials.length;

        function showNextTestimonial() {
            testimonials[currentIndex].classList.remove('active');
            currentIndex = (currentIndex + 1) % totalTestimonials;
            testimonials[currentIndex].classList.add('active');
        }

        setInterval(showNextTestimonial, 5000); 

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    overflow-x: hidden;
}
.header {
    position: relative;
    background-size: cover;
    background-position: center;
    height: 18vh; 
    color: white;
    text-align: center;
  
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    position: relative;
    z-index: 10;
}

.logo img {
    max-width: 120px; 
    height: auto; 
}

.nav-links {
    list-style: none;
    display: flex;
    gap: 1.5rem;
}

.nav-links a {
    color: white;
    text-decoration: none;
    font-size: 1rem;
    position: relative;
}

.nav-links li:hover > a {
    color: #008080;
}

.dropdown {
    position: relative;
}

.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: rgba(0, 0, 0, 0.9);
    padding: 0.5rem;
    list-style: none;
    border-radius: 5px;
    min-width: 150px;
    z-index: 20;
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}


.dropdown-menu li {
    padding: 0.5rem;
}

.dropdown-menu li a {
    color: white;
    text-decoration: none;
    display: block;
    padding: 0.5rem;
}

.dropdown-menu li a:hover {
    background-color: #333;
    border-radius: 4px;
}

.dropdown:hover .dropdown-menu {
    display: block;
    opacity: 1; 
    transform: translateY(0); 
}

.hamburger {
    display: none;
    font-size: 2rem;
    cursor: pointer;
    color: white;
    transition: transform 0.3s ease;
}

.hamburger.active {
    transform: rotate(90deg); 
    color: #ffff; 
}

@media (max-width: 768px) {
    .header{
        margin-bottom: 15px;
    }
    
    .nav-links {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 70px;
        right: 2rem;
        background-color: rgba(0, 0, 0, 0.9);
        padding: 1rem;
        border-radius: 8px;
        opacity: 0;
        transform: translateY(-20px);
        transition: opacity 0.3s ease, transform 0.3s ease;
    }
    .hamburger {
        display: block;
    }

    .nav-links.show {
        display: flex;
        opacity: 1;
        transform: translateY(0);
    }

    .dropdown-menu {
        position: static;
        background-color: transparent;
        padding: 0;
        min-width: 100%;
        opacity: 1; 
        transform: none; 
        transition: none; 
    }

    .dropdown:hover .dropdown-menu {
        display: none;
    }
    .dropdown > a {
        cursor: pointer; 
    }

    .dropdown-menu li a {
        padding: 0.5rem 1rem;
    }

}

.slider-container {
    position: relative;
    width: 100%;
    height: 100vh;
    margin-top: 0;
    overflow: hidden;
}

.work-slides {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.slide {
    min-width: 100%;
    height: 100vh; 
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background-size: cover;
    background-position: center;
    position: relative;
}

.slide-content {
    background-color: rgba(0, 0, 0, 0.5);
    padding: 20px;
    border-radius: 10px;
    text-align: center;
}

.see-more {
    position: absolute;
    bottom: 100px; 
    left: 50%;
    transform: translateX(-50%); 
    font-size: 2rem; 
    color: white;
    text-decoration: none;
    background-color: rgba(0, 0, 0, 0.7);
    padding: 10px 20px;
    border-radius: 5px;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.see-more:hover {
    background-color: rgba(0, 0, 0, 0.9);
    color: #008080; 
}

.prev, .next {
    position: absolute;
    top: 50%;
    width: auto;
    padding: 16px;
    margin-top: -22px;
    color: white;
    font-weight: bold;
    font-size: 24px;
    cursor: pointer;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
}

.prev {
    left: 10px;
}

.next {
    right: 10px;
}
.quote {
    position: absolute;
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    text-align: center;
    font-family: "Georgia", serif; 
    color: #fff;
    font-size: 2.5rem; 
    font-weight: bold;
    max-width: 80%; 
    line-height: 1.4; 
    padding: 20px;
    background-color: rgba(0, 0, 0, 0.5); 
    border-radius: 10px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3); 
}

@media (max-width: 768px) {
    .quote {
        font-size: 1.8rem; 
        padding: 15px;
    }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>P&PLLC</title>
    <link rel="stylesheet" href="P&PLLC.css">
    <link rel="icon" href="assets/NewP&PLogo.png">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
    <header class="header">
        <nav class="navbar">
            <div class="logo">
                <img src="assets/NewP&PLogo.png" alt="P&P LLC Consulting Logo" />
            </div>
            <ul class="nav-links" id="navLinks">
                <li class="dropdown">
                    <a href="P&PLLC.html">Home</a>
                </li>
                <li class="dropdown">
                    <a href="AboutUs.html">About Us</a>
                    <ul class="dropdown-menu">
                        <li><a href="OurTeam.html">Our Team</a></li>
                        <li><a href="Mission.html">Our Mission</a></li>
                    </ul>
                </li>
                <li class="dropdown">
                    <a href="Services.html">Services</a>
                </li>
                <li class="dropdown">
                    <a href="#projects">Projects</a>
                    <ul class="dropdown-menu">
                        <li><a href="#residential">Project Management</a></li>
                        <li><a href="#commercial">UX Design</a></li>
                        <li><a href="#commercial">Landscape</a></li>
                        <li><a href="#commercial">Engineering</a></li>
                    </ul>
                </li>
                <li><a href="ContactUs.html">Contact Us</a></li>
            </ul>
            <div class="hamburger" id="hamburger" onclick="toggleMenu()">☰</div>
        </nav>
    </header>
    <section class="slider-container">
        <div class="work-slides">
            <div class="slide" style="background-image: url(assets/Project management .jpg);">
                <div class="slide-content">
                    <h2>PROJECT MANAGEMENT</h2>
                    <p>LOCATION: St.Paul Minnesota</p>
                    <a href="#seeMore1" class="see-more">See More</a> 
                </div>
                <div class="quote">
                    <p>"Empowering Solutions, Inspiring Growth, where vision meets value"</p>
                </div>
            </div>

        
               
                <div class="slide" style="background-image: url(assets/ux Design.jpg);">
                    <div class="slide-content">
                        <h2>UX DESIGN</h2>
                        <p>LOCATION: St.Paul Minnesota</p>
                        <a href="#seeMore2" class="see-more">See More</a> 
                    </div>
                    <div class="quote">
                        <p>"Empowering Solutions, Inspiring Growth, where vision meets value"</p>
                    </div>
                </div>
        
                
                <div class="slide" style="background-image: url(assets/Landscaping now plowing removal .jpg);">
                    <div class="slide-content">
                        <h2>LANDSCAPING</h2>
                        <p>LOCATION: St.Paul Minnesota</p>
                        <a href="#seeMore3" class="see-more">See More</a> 
                    </div>
                    <div class="quote">
                        <p>"Empowering Solutions, Inspiring Growth, where vision meets value"</p>
                    </div>
                </div>
        
            
                <div class="slide" style="background-image: url(assets/Engineering.jpg);">
                    <div class="slide-content">
                        <h2>ENGINEERING</h2>
                        <p>LOCATION: St.Paul Minnesota</p>
                        <a href="#seeMore4" class="see-more">See More</a> 
                    </div>
                    <div class="quote">
                        <p>"Empowering Solutions, Inspiring Growth, where vision meets value"</p>
                    </div>
                </div>
            </div>
        
            <div class="prev" onclick="prevSlide()">&#10094;</div>
            <div class="next" onclick="nextSlide()">&#10095;</div>
        </section>
    

Good Morning everyone,

I hope you’re all well.

I could use some help with a website I’m building for a start-up company. I’ve encountered a few technical issues with the web pages:

1. Page Loading Issue:

When visiting any page on the website, not all elements (such as images or text) load properly on the first attempt. However, refreshing the page causes everything to load correctly. I would like the website to load all elements properly on the first visit without requiring a refresh.

2. Home Page Slider Alignment:

On the homepage, I want to move the slider up so that it aligns with the header. Additionally, I want to ensure the slider remains properly aligned with the header on smaller screens too.

3. Hamburger Menu Issues on Responsive Screens:

   • The hamburger menu doesn’t open on the first click; it only works after refreshing the page. I’d like this fixed so it opens smoothly on the first attempt.

   • When the hamburger menu does open, clicking on a page link (e.g., Home, About Us, or Services) doesn’t always navigate to the correct page. Specifically:

   • The About Us link doesn’t work directly; instead, it displays the dropdown menu (Our Team and Our Mission), and while these dropdown links work, the main About Us page link does not navigate properly.