Category: javascript

So I am using a navigation bar built in Bootstrap 5, where on-hover the submenu items open, this works great on main nav items, on sub-navigation it overlaps and breaks, meaning that under the “services” panel, everything cannot be accessed.

I have used Dropend on the sub-navigation so the dropdown should in theory drop onto the right and not down like it does currently, any ideas?

Navigation bar HTML with main menu and nested “services” menu/dropdown:

<ul id="menu-primary" class="navbar-nav me-auto mb-2 mb-md-0 navbar-nav"><li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children dropdown nav-item nav-item-235369"><a href="https://yorkshireaccountancy.streamer.click/about-us/" class="nav-link dropdown-toggle show" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-haspopup="true" aria-expanded="false">About Us</a>
<ul class="dropdown-menu depth_0 show">
    <li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-235370"><a href="https://yorkshireaccountancy.streamer.click/careers/" class="dropdown-item ">Careers</a></li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-235371"><a href="https://yorkshireaccountancy.streamer.click/referral-scheme/" class="dropdown-item ">Referral Scheme</a></li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-235372"><a href="https://yorkshireaccountancy.streamer.click/meet-the-team/" class="dropdown-item ">Meet The Team</a></li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-235373"><a href="https://yorkshireaccountancy.streamer.click/switch-accountants/" class="dropdown-item ">Switch Accountants</a></li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-235374"><a href="https://yorkshireaccountancy.streamer.click/testimonials/" class="dropdown-item ">Testimonials</a></li>
</ul>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children dropdown nav-item nav-item-235375"><a href="#" class="nav-link  dropdown-toggle" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-haspopup="true" aria-expanded="false">Services</a>
<ul class="dropdown-menu  depth_0">
    <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children dropdown nav-item nav-item-235376 dropend dropdown-menu-end"><a href="#" class="dropdown-item  dropdown-toggle" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-haspopup="true" aria-expanded="false">Services</a>
    <ul class="dropdown-menu sub-menu  depth_1">
        <li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-235377"><a href="https://yorkshireaccountancy.streamer.click/annual-accounts/" class="dropdown-item ">Annual Accounts</a></li>
        <li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-235378"><a href="https://yorkshireaccountancy.streamer.click/auto-enrolment/" class="dropdown-item ">Auto Enrolment</a></li>
        <li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-235379"><a href="https://yorkshireaccountancy.streamer.click/bookkeeping/" class="dropdown-item ">Bookkeeping</a></li>
        <li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-235380"><a href="https://yorkshireaccountancy.streamer.click/company-formation/" class="dropdown-item ">Company Formation</a></li>
        <li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-235381"><a href="https://yorkshireaccountancy.streamer.click/corporation-tax/" class="dropdown-item ">Corporation tax</a></li>
        <li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-235382"><a href="https://yorkshireaccountancy.streamer.click/management-accounts/" class="dropdown-item ">Management Accounts</a></li>
        <li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-235383"><a href="https://yorkshireaccountancy.streamer.click/payroll/" class="dropdown-item ">Payroll</a></li>
        <li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-235384"><a href="https://yorkshireaccountancy.streamer.click/self-assessment/" class="dropdown-item ">Self-Assessment</a></li>
        <li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-235385"><a href="https://yorkshireaccountancy.streamer.click/fee-protection-insurance/" class="dropdown-item ">Fee Protection Insurance</a></li>
        <li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-235386"><a href="https://yorkshireaccountancy.streamer.click/vat/" class="dropdown-item ">VAT</a></li>
    </ul>
</li>
    <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children dropdown nav-item nav-item-235387 dropend dropdown-menu-end"><a href="#" class="dropdown-item  dropdown-toggle" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-haspopup="true" aria-expanded="false">Specialisms</a>
    <ul class="dropdown-menu sub-menu  depth_1">
        <li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-235388"><a href="https://yorkshireaccountancy.streamer.click/ebay-accountants/" class="dropdown-item ">eBay Accounting</a></li>
        <li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-235389"><a href="https://yorkshireaccountancy.streamer.click/pub-accountants/" class="dropdown-item ">Pub Accountants</a></li>
        <li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-235390"><a href="https://yorkshireaccountancy.streamer.click/capital-allowances-tax-relief/" class="dropdown-item ">Capital Allowances Tax Relief</a></li>
        <li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-235391"><a href="https://yorkshireaccountancy.streamer.click/research-and-development-tax-relief/" class="dropdown-item ">Research and Development Tax Relief</a></li>
    </ul>
</li>
</ul>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children dropdown nav-item nav-item-235392"><a href="#" class="nav-link  dropdown-toggle" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-haspopup="true" aria-expanded="false">Partnerships</a>
<ul class="dropdown-menu  depth_0">
    <li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-235393"><a href="https://yorkshireaccountancy.streamer.click/pandle-accountant/" class="dropdown-item ">Pandle Accountant</a></li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-235394"><a href="https://yorkshireaccountancy.streamer.click/quickbooks-accountant/" class="dropdown-item ">QuickBooks Accountant</a></li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-235395"><a href="https://yorkshireaccountancy.streamer.click/receipt-bank/" class="dropdown-item ">Receipt Bank</a></li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-235396"><a href="https://yorkshireaccountancy.streamer.click/sage-accountant/" class="dropdown-item ">Sage Accountants</a></li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-235397"><a href="https://yorkshireaccountancy.streamer.click/satago/" class="dropdown-item ">Satago</a></li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-235398"><a href="https://yorkshireaccountancy.streamer.click/xero-accountant/" class="dropdown-item ">Xero Accountant</a></li>
</ul>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children dropdown nav-item nav-item-235399"><a href="#" class="nav-link  dropdown-toggle" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-haspopup="true" aria-expanded="false">Who We Help</a>
<ul class="dropdown-menu  depth_0">
    <li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-235400"><a href="https://yorkshireaccountancy.streamer.click/individuals-accountant/" class="dropdown-item ">Individuals</a></li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-235401"><a href="https://yorkshireaccountancy.streamer.click/landlords-accountant/" class="dropdown-item ">Landlords</a></li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-235402"><a href="https://yorkshireaccountancy.streamer.click/limited-company-accountants/" class="dropdown-item ">Limited Companies</a></li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-235403"><a href="https://yorkshireaccountancy.streamer.click/limited-liability-partnership-accountant/" class="dropdown-item ">Limited Liability Partnership</a></li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-235404"><a href="https://yorkshireaccountancy.streamer.click/sole-traders-accountants/" class="dropdown-item ">Sole Traders</a></li>
</ul>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children dropdown nav-item nav-item-235405"><a href="#" class="nav-link  dropdown-toggle" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-haspopup="true" aria-expanded="false">Support</a>
<ul class="dropdown-menu  depth_0">
    <li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-235407"><a href="https://yorkshireaccountancy.streamer.click/blog/" class="dropdown-item ">Blog</a></li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-235408"><a href="https://yorkshireaccountancy.streamer.click/free-downloads/" class="dropdown-item ">Free Downloads</a></li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-235409"><a href="https://yorkshireaccountancy.streamer.click/news/" class="dropdown-item ">News</a></li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-235410"><a href="https://yorkshireaccountancy.streamer.click/factsheets/" class="dropdown-item ">Factsheets</a></li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-235411"><a href="https://yorkshireaccountancy.streamer.click/resources/" class="dropdown-item ">Resources</a></li>
</ul>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-235917"><a href="https://yorkshireaccountancy.streamer.click/contact-us/" class="nav-link ">Contact Us</a></li>
</ul>

JavaScript code used to turn the bootstrap click to open subnavigation into on hover:

<script>
    document.addEventListener("DOMContentLoaded", function(){
// make it as accordion for smaller screens
if (window.innerWidth > 992) {

    document.querySelectorAll(".navbar .nav-item").forEach(function(everyitem){

        everyitem.addEventListener('mouseover', function(e){

            let el_link = this.querySelector('a[data-bs-toggle]');

            if(el_link != null){
                let nextEl = el_link.nextElementSibling;
                el_link.classList.add('show');
                nextEl.classList.add('show');
            }

        });
        everyitem.addEventListener('mouseleave', function(e){
            let el_link = this.querySelector('a[data-bs-toggle]');

            if(el_link != null){
                let nextEl = el_link.nextElementSibling;
                el_link.classList.remove('show');
                nextEl.classList.remove('show');
            }


        })
    });

}
// end if innerWidth
}); 
// DOMContentLoaded  end
    
</script>

Any ideas would be much appreciated!`

1. in this table i want to heid columens 10-20 but wen i use som code like (styl.display=blocke) it hide just th th title of columns without included celle. i nedd a slotion that to be able to heid the specific columns.
   thanks
   [tabl that insertet rows afther submit the form][1]

    <td class="td_class">

        <table class="_table" id="displayList" name="displayList" action="terminsuchen" cellspacing="">
           
              <thead>
                <tr>
                    <!-- <th>Nr.</th> -->
                    <th>1</th>
                    <th>2</th>
                    <th>3</th>
                    <th>4</th>
                    <th>5</th>
                    <th>6</th>
                    <th>7</th>
                    <th>8</th>
                    <th>9</th>
                    <th>10</th>
                     <th>11</th>
                    <th>12</th>
                    <th>13</th>
                    <th>14</th>
                    <th>15</th>
                    <th>16</th>
                    <th>17</th>
                    <th>18</th>
                    <th>19</th>
                    <th>20</th>

                </tr>
            </thead>
            <tr></tr>


        </table>
    </td>```


  [1]: https://i.stack.imgur.com/KK8KI.jpg

I want to get all the HTML of a webpage (that is located on the internet) with its URL and store it inside a variable for later processing using only JavaScript.

In what way can I do this? Which method or strategy??

I want to be able to write a review and display all written reviews (which is none at the moment since the page isn’t built yet). It’s my first time doing a project like this and I can’t get it to work.

App.js. I want const fetchReviews to GET and display all reviews that has been written and I want const postReview to simply post a new review to the page.

import React, {useState, useEffect} from "react";

import { NewReview } from "./NewReview.js";
import { AllReviews } from "./AllReviews";

const reviewsURL = "http://localhost:8080/reviews"

export const App = () => {
  const [existingReviews, setExistingReviews] = useState([])
  const [newReview, setNewReview] = useState('')

  const fetchReviews = () => {
    fetch(reviewsURL)
    .then(response => response.json())
    .then((json) => {
      setExistingReviews(reviews)
    }).catch(error => {
      console.log(error.message)
    })
  }

  useEffect(() => {
    fetchReviews();
  }, []);


  const postReview = (event) => {
    event.preventDefault();

    fetch(reviewsURL, {
      method: 'POST',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify({message: newReview})
    })
    .then (response => response.json())
    .then (() => {
      fetchReviews();
      setNewReview('')
    }).catch(error => {
      console.log(error.message)
    })
  }
  return (
    <>

<NewReview
      newReview={newReview}
      setNewReview={setNewReview}
      handlesubmit={postReview}
      />

{<AllReviews 
        allReviews={existingReviews} 
        />}
    </>
  )
}

Index.js will act as my server, I’m using localhost. I will not use mongo/mongoose.

I have tried many different things now for the past two weeks, read a bunch of questions and answers on Stack, I’ve tried import(), require(), update json package but I am so stuck. Which makes me wonder if the import and usage of AllReviews and NewReviews is even close to being correct?

Please help, I have spent so many hours on this.

import express from 'express'

import { NewReview } from '../frontend/src/NewReview.js';
import { AllReviews } from '../frontend/src/AllReviews.js';

const PORT = process.env.PORT || 8080;
const app = express();

app.get("/", (request, response) => {
    response.json({ message: "Hello from server!" });
  });

// GET all reviews
app.get("/reviews", (request, response) => {
  response.status(201).json(AllReviews)
});

  //POST a new review
  app.post('/reviews', async (request, response) => {
    try {
      response.status(201).json(NewReview)
    } 
      catch (err) {
      response.status(400).json({ message: 'Sorry, could not save review to the database', errors: err.errors
      })
    }
  })



app.listen(PORT, () => {
  console.log(`Server listening on http://localhost:${PORT}`);
});

I have to create a function that takes a string, removes all “special” characters (e.g. !, @, #, $, %, ^, &, , *, (, )) and
returns the new string. The only non-alphanumeric characters allowed are dashes -, underscores _ and spaces.

I’m new at this so I understand that this code may be ALL wrong.

module.exports = (str) => {
let allowedCharacters = [a-zA-Z0-9/s-_];
for (let i = 0; i < str.length; i++) {
    allowedCharacters += str[i]
}
return str[i];
};

I am making a news app from wordpress with graphql and apollo client v5.4.16 (the latest version gives an error with RN metro, I tried to solve it and it keeps showing me an error) …

well to the point. I have the app almost built, but I have a problem displaying more data as the user scrolls the screen.

this is my query:

query inicioQuery($first: Int!, $after: String){
        posts (first: $first, after: $after) {
            pageInfo {
                endCursor
                hasNextPage
            }
            edges {
                node {
                    id
                    title
                    slug
                    date
                    categories {
                      nodes {
                        name
                      }
                    }
                    tags {
                      edges {
                        node {
                          name
                        }
                      }
                    }
                    featuredImage {
                      node {
                        sourceUrl
                      }
                    } 
                }
            }
        }
    }

I am using the cursor method since when I try to use offset I get an error where it does not recognize the offset variable

and this is my flatlis and updatequery code:

function posts({navigation}) {
    const scheme = useColorScheme();
    const { data, error, loading, fetchMore, refetch, networkStatus } = useQuery(
        POSTS_INICIO_QUERY, 
        {
            variables:{first:20},
            notifyOnNetworkStatusChange: true
        }
    )
    
    if (error)
    return (
      <View style={styles.loading}>
        <Text style={styles.errorText}>Algo Salio Mal :(</Text>
      </View>
    )

    console.log(data);

    let posts = [];
    if(data && data.posts && data.posts.edges)
    posts = data.posts.edges;

    

    const onUpdate = (prev, { fetchMoreResult }) => {
        if (!fetchMoreResult) return prev;
        const { pageInfo } = fetchMoreResult.posts;
        const node = [
          ...prev.posts.edges.node,
          ...fetchMoreResult.posts.edges,
        ];
        return Object.assign({}, prev, {
          posts: {
            __typename: prev.posts.edges.__typename,
            edges: {
              __typename: prev.posts.__typename,
              pageInfo,
              node,
            },
          },
        });
    };
    

    const handleOnEndReached = () => {
      if (data.posts.pageInfo.hasNextPage)
        return fetchMore({
          variables: {
            after: data.posts.pageInfo.endCursor,
            first: 20,
          },
          updateQuery: onUpdate,
        });
    };

    if(loading && posts.length === 0){
        return (
            <View style={styles.loading}>
                <ActivityIndicator size="large" color="#17A0D1" />
            </View>
        )
    }

    const refreshing = networkStatus === NetworkStatus.refetch;

    return(
        <View style={styles.scroll}>
            <FlatList
                contentContainerStyle={styles.scroll}
                data={posts}
                renderItem={({item})=>{
                    if(!item.node){
                        return;
                    }
                    //Validate Image
                    let url;
                    if(item.node.featuredImage === null){
                        url = 'https://images5.alphacoders.com/115/thumb-1920-1150108.png'
                    }else{
                        url = item.node.featuredImage.node.sourceUrl;
                    }
                    
                    //Validate Tags
                    let tag = item.node.tags.edges
                    if  (!tag.length){
                        tag = 'no tag'
                    } else{
                        tag = item.node.tags.edges[0].node.name ;
                    }

                    return(
                        
                        <View style={styles.welcom}>
                            <Text style={{
                               fontSize:16,
                               fontWeight:'bold',
                               fontStyle:'italic',
                               color: scheme === 'dark' ? 'white' : 'gray' 
                            }}>
                                Te mantenemos informado hoy y siempre
                            </Text>
                        </View>,
                        <TouchableOpacity style={styles.infocontainer}>
                            <Image 
                                style={styles.postimg} 
                                source={{uri: url}} 
                                resizeMode = 'cover'
                            />
                            <View style={styles.textcontainer}>

                                <View style={styles.termscontainer}>
                                    <Text style={styles.category}>{item.node.categories.nodes[0].name}</Text>
                                    <Text style={{color: scheme === 'dark' ? 'white' : '#151515' }}>  |  </Text>
                                    <Text style={styles.tag}>{tag}</Text>
                                    <Text style={{color: scheme === 'dark' ? 'white' : '#151515' }}>  |  </Text>
                                    <Text style={styles.date}>{Moment(item.node.date).format('D MMM YYYY')}</Text>
                                </View>

                                <Text style={styles.title}>{item.node.title}</Text> 
                            </View>
                        </TouchableOpacity>
                    
                    )
                }}
                keyExtractor={(item)=> item.node.id }
                onEndReachedThreshold={0.5}
                onEndReached={handleOnEndReached}
                onRefresh={refetch}
                refreshing={refreshing}
                showsHorizontalScrollIndicator={false}
            />
        </View>
    )
}

and these are the warnings that appear to me:

Warnings

Although these warnings appear, the app does not show me more data …

I don’t have much experience in RN
I need help with this and thanks in advance

I have come across an issue with google maps.

I have an HTML form which displays a large amount of data for a user. The form is split into a concertina layout, with each concertina responsible for showing different aspects of the user’s data.

One of these concertinas holds the user’s address and a google map with several pins representing pertinent information.

If the form is loaded, and the concertina is closed, then google map <div> has no vertical height on which to calculate zoom settings and I end up with a map that is zoomed to the extents of the planet.
If the concertina is open when the form is loaded then zoom works fine (because the map <div> has height).

This is a well known feature/bug. One way to get around this is to load the google map when the user opens the concertina or if the concertina is open when the form is loaded.

What I need to achieve: I need to prevent multiple calls to google maps to ‘reload’ the map if the user opens and closes the concertina multiple times (without refreshing the form).

Here is a fiddle: https://jsfiddle.net/fdnuopzv/4/

As you can see the google map is loaded EVERY time the concertina opens. I need to detect that the map exists so that it shows the existing map rather than going and getting a fresh one.

I tried using:

if (!google.map) {
  map_init();
}

but this does not have the desired affect.

As a point of interest if you move the map_init() line from line 10 to line 65 you can see how a zero height breaks the google zoom.

function imockit() {
  return json({ name: "tony", country: "usa" });;
}

I tried with above code but the code only works for one mock, can we integrate any service with is compatible with java tomcat and tomcat interceptor?

I applied parent div with position relative and overflow hidden which is working fine in normal scenario on IE.

But when its clicked the element overflows parent element.

This issue happening only on IE not other browsers

overflow content sample

Any idea on this?

I have a page with multiple divs. Users can bookmark each div by clicking an icon. When the icon is clicked, I’m adding a .saved-item class to the div. I have a separate page where I’d like to show all bookmarked divs but I can’t figure out how to do it properly.

Function which adds class to the div:

$(bookmark).on('click', function(){
    $(this).parent().parent().addClass('saved-item');
});

In another file, I then try to load all saved items:

$("#content").load( "speaking-mistakes.html #wrapper .saved-item" );

Unfortunately, it’s not working as the addClass function is not permanent. I also tried adding the div to the localStorage, but it doesn’t save the entire div layout and its content (with buttons, text, style, etc.) and I don’t think that loading up localStorage with possibly hundreds of divs would be a good idea.

Is there any possibility to dynamically “move” or “export” a div from one HTML file to another HTML file?

Thank you for your help.

I am looking to incorporate the following id variables: e1, e2, etc. into a loop.

What is the right syntax to handle the ‘#e’+i and ‘#e’+i elements, to avoid writing multiple functions eg. : $(document).on('change', '#e1', function() { and var exp = 'e1';

PS: Currently, the below on change function is not triggered.

for (var i = 0; i < 10; i++) {      
        
$(document).ready(function() {          
              $(document).on('change', '#e'+i, function() {
                if ($("#e"+i).is(":checked")) {     var chk = $('#e'+i).val(); var exp = 'e'+i; }
                else {  chk = 0 ;   var exp = 'e'+i;    }
                $.ajax({
                        url: "modify.php",
                        method: "POST",
                        data: {check: chk, experience: exp },
                  });
              });       
            })
            ;
        }       

Just started building my own React site after many circles of tutorials. I have a simple dropdown select that navigates to a specific route/URL when selected. However I’d like the select to stay at the URL that the user navigated to ( so when the “Ants” page is selected, the dropdown goes to “Ants” or “Bees” etc). Here’s my code. I tried a bunch of different things as well as. using “useNavigate” from Router & a few other methods to no avail. Anyone have any ideas? Thank you and sorry if this is a dumb question.

Here’s my Dropdown component code

export default function DropDown() {
  function onChange(e) {
    const url = window.location.href = `/${e.target.value}`;
  };

  return (
    <div className="select-container">
      <p> <label htmlFor="pests">Choose a pest: </label></p>
      <div class="select-dropdown">
        <select onChange={onChange}>
          <option value="ants">Ants</option>
          <option value="wasps">Wasps</option>
          <option value="mice">Mice</option>
        </select>
      </div>
    </div>
  );
}

Here’s the code from my app.js (Router)

function App() {
  return (
    <div className="main">
      <Header />
      <NavbarBasic />
      {/* These are the main routes and subpages */}
      <Routes>
        <Route path='/' element={<Home />} />
        <Route path='/about' element={<About />} />
        <Route path='/pests-we-treat' element={<Pests />} />
        <Route path='/services' element={<Services />} />
        <Route path='/contact' element={<Contact />} />
        <Route path='/ants' element={<Ants />} />
        <Route path='/wasps' element={<Wasps />} />
        <Route path='/roaches' element={<Roaches />} />
        <Route path='/bedbugs' element={<Bedbugs />} />
        <Route path='/bees' element={<Bees />} />
        <Route path='/mice' element={<Mice />} />
        <Route path='/flies' element={<Flies />} />
      </Routes>
    </div>
  );
}


  return (
    <div className="select-container">
      <p> <label htmlFor="pests">Choose a pest: </label></p>
      <div class="select-dropdown">
        <select onChange={onChange}>
          <option value="ants">Ants</option>
          <option value="wasps">Wasps</option>
          <option value="mice">Mice</option>
        </select>
      </div>
    </div>
  );
}

and for posterity here’s my code with the actual Navbar

export default function NavbarBasic() {

  const Hamburger = () => {
    var x = document.getElementById("myTopnav");
    if (x.className === "topnav") {
      x.className += " responsive";
    } else {
      x.className = "topnav";
    }
  }


  return (
    <div className="topnav" id="myTopnav">
      <NavLink to="/">Home</NavLink>
      <NavLink to="/about">About</NavLink>
      <NavLink to="/contact">Contact</NavLink>
      <NavLink to="/pests-we-treat">Pests We Treat</NavLink>

      <div className="dropdown">
        <button className="dropbtn">Pests We Treat
        <CaretDownIcon className="caret" />
        </button>

        <div className="dropdown-content">
          <a href="/ants" to="/">Ants</a>
          <a href="/bedbugs" to="/">Bedbugs</a>
          <a href="/flies" to="/">Flies</a>
          <a href="/roaches" to="/">Roaches</a>
          <a href="/wasps" to="/">Wasps</a>
        </div>
      </div>
      <a href="#" className="icon" onClick={Hamburger}>&#9776;</a>
    </div >
  )
}

I’m trying to use web worker in my project. It works fine in the dev mode but failed after build.

Uncaught DOMException: 
Failed to execute 'importScripts' on 'WorkerGlobalScope': The script at 'http://localhost:4000/js/js/vendor.4a4f636a.js' failed to load.

The file structure is shown as follow

It seem that an extra “js/” is added in the link. The correct link for the script file should be http://localhost:4000/js/vendor.4a4f636a.js

To reproduce, I create a small repo.
It is strange that it works after removing the for loop in src/worker/load_data.js.

Have I done something wrong? Are there any configurations needed to make this work?

This is the task:

Create a web page showing the map of Scandinavia on the left and a blank element on the right. Here it is a good idea to use the map as a background image in an element.
Add round – elements (Hint: border-radius) with each of the four flags and place them over the country to which they belong (Hint: position).
Add an effect when you hover the mouse pointer over a flag.
For example, you can change the arrow to a hand, and you can do something with the elements that make it clear that you are holding them over.
Add a click event to each of the flags. When a flag is clicked, a text about the country should appear in the element on the right. The text must contain information about the country, and must at least contain area, population, currency and capital.

All I have left is to get the text about the the clicked country to appear on the right side of the map.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *,*::before,*::after{
            box-sizing: border-box;
        }
        .container{
            display: flex;
        }
        
        .container>div:first-child{
            position: relative;
            height: 500px;
            width:500px;
            padding:1rem;
            background-color: #eee;
            background-image:url(./Oppgave2/Skandinavia.png);
            background-position: center;
            background-size:contain;
            background-repeat:no-repeat;
        }
        .container>div:first-child .flag{
            width: 32px;
            height: 32px;
            position:absolute;
            border-radius: 50%;
            background-color: #fff;
            padding:0.1rem;
        }
        .container>div:first-child img{
            width: 28px;
            height: 28px;
            border-radius: 50%;
            
        }

        .container>div:first-child img:hover{
            cursor:pointer;
            transform:scale(1.2);
        }
        .norway{
            top: 300px;
            left: 126px;
        } 

        .finland{
            top:234px;
            left: 350px;
        }

        .sweden{
            top:282px;
            left: 203px;
        }

        .denmark{
            top:447px;
            left: 120px;
        }
    </style>
</head>

<body>
    <div class="container">
        <div>
            <div class="flag norway" >
                <img src="./Oppgave2/Norge.png" alt="Norway">
            </div>
            <div class="flag denmark">
                 <img src="./Oppgave2/Danmark.png" alt="Denmark">
            </div>
           
            <div class="flag sweden"> 
                <img src="./Oppgave2/Sverige.png"  alt="Sweden">
            </div>

           <div class="flag finland">
               <img src="./Oppgave2/Finland.png" alt="Finland">
           </div>
            
        </div>
        <div>

        </div>
    </div>
    <script>
    </script>
</body>

</html>

All I have left is to get the text about the country I want to click to appear on the right side of the map when I click the country. So if I want to click on Norway, it should appear a text containing information about Norway on the right side of the map. The same goes for Sweden, Denmark and Finland’s flags.

I’m facing issues with different time zone while uploading data in MongoDB with backend as a Nodejs. So the issue is, for example when I’m uploading some data from America with Date with local UTC format (Ex: 20-Dec-2021). so from other locations like from India when I’m filtering the data on the Date: 20-Dec-2021, I’m not getting any date. how do I manage the data globally to access the uploaded date?.

And I want to understand how MongoDB stores the date in which formate.