Category: javascript

Category Added in a WPeMatico Campaign

Apple Maps MapKit JS showing blank grid

When I copy the code from the MapKit JS website, it displays a blank grid with no map. Here’s the code I copied from the Embed heading.

<!DOCTYPE html>
        <html>
        <head>
        <meta charset="utf-8">
        
        <script src="https://cdn.apple-mapkit.com/mk/5.x.x/mapkit.js"></script>
        
        <style>
        #map {
            width: 100%;
            height: 600px;
        }
        </style>
        
        </head>
        
        <body>
        <div id="map"></div>
        
        <script>
        mapkit.init({
            authorizationCallback: function(done) {
                var xhr = new XMLHttpRequest();
                xhr.open("GET", "/services/jwt");
                xhr.addEventListener("load", function() {
                    done(this.responseText);
                });
                xhr.send();
            }
        });
        
        var Cupertino = new mapkit.CoordinateRegion(
            new mapkit.Coordinate(37.3316850890998, -122.030067374026),
            new mapkit.CoordinateSpan(0.167647972, 0.354985255)
        );
        var map = new mapkit.Map("map");
        map.region = Cupertino;
        </script>
        </body>
        </html>

I tried searching for solutions, but I’m still a beginner so it was quite confusing.

Problems adding a background image to a Div in React

I’m having trouble adding a background image to a div. In regular JavaScript, it works and allows me to define an object with a specific size and color. However, the same approach isn’t working in React. I’ve tried different methods, including adding the color in both the CSS file and the JSX file, but nothing seems to work.

I’ve tried the following methods, but they only work when I add text between the elements. I need them to work without text. Why is this happening?

import DiskImg from "../img/favicon.png";

<div 
      className="muplayer-songcover" 
      style={{ 
        backgroundImage: `url(${DiskImg})`, 
        backgroundSize: 'cover', 
        backgroundPosition: 'center',
      }}
    >
    </div>

.muplayer-songcover {
  background-image: url(../img/favicon.png);
  background-size: cover;
  width: 20rem;
  height: 20rem;
}

How to Integrate Login With Facebook in Chrome Extension

In a web app, we can easily integrate Facebook login using React wrappers, which makes the process straightforward. However, this approach doesn’t work the same way for browser extensions since extensions don’t have a traditional URL (like localhost or a live URL). Therefore, we need to set up everything manually. Could you please provide a script for that?

Horizontal scroll overflow ellipsis in navigation tabs at start and end

Problem

I have navigation tabs which are horizontaly scrollable and my task now is to add function that if you scroll this “menu” left or right and the title in nav tab overflows it should add “…” dots to that title. Basically when you scroll to right and you stop scrolling in the middle of the word it should replace this remaining part with dots (same thing when you scroll left )

At first this menu was implemented without these dots and arrows but customers were arguing that they did not know that there were another tabs they could click (on mobile phones)

Figma preview

preview of figma implementation with visible right and left arrow with text overflow dots
preview of what should I implement if Figma

So far all my attempts failed and I’m trying to understand it from scratch but from what I see I do not know if it’s even possible ?

My jsfiddle link

<div class="with-elipsis">Test paragraph with <code>ellipsis</code>. It needs quite a lot of text in order to properly test <code>text-overflow</code>.</div>

<div class="with-elipsis-scroll">Test paragraph with <code>string</code>. It needs quite a lot of text in order to properly test <code>text-overflow</code>.</div>

.with-elipsis {
  width: 500px;
  text-overflow: ellipsis;
  border: 1px solid #000000;
  white-space: nowrap;
  overflow: auto;
}

.with-elipsis-scroll {
  border: 1px solid #000000;
  white-space: nowrap;
  overflow: auto;
  height: 40px;
  display: flex;
  overflow-x: scroll;
  width: 200px;
  text-overflow: ellipsis;
}

In this code sample:

  1. context is rendered right but when I scroll the content it scrolls with “dots”
  2. does not work

React: Dynamically Importing JSON Files Within the Public/ Folder W/O Hosting on a Server?

the problem I’m facing at the moment is very unique to me and I hope it may not be to you. Essentially, I am working on a React project built with CRA and it won’t/can’t be hosted on a server. The goal of the app is to read JSON files and conduct further processing of those files in the UI. However, since the app will be in a serverless/network-less environment, I’ll need to read and interpret these files in runtime.

These files will be subject to user configuration – meaning they will have access to the JSON files, have the ability to modify them, add or remove JSON files, and then expect to see the resulting output in the React app (index.html at that point). Since these files (and the amount of these files) are subject to change, I can not statically import them. Furthermore, since this app will be in a serverless environment, I can’t use the Fetch API either.

I’ve placed these files within the public/ folder outside the src/ folder – since these JSON files can be expected to change at any frequency for user-configuration needs, they can’t be part of the build process. Therefore, they can’t be inside the src folder.

So far, I’ve been able to access files with the dynamic import() function, with the following code in development-mode only:

myJson= await import(`/public/my-jsons/${fileName}`)

However, the following doesn’t work in a production build:

myJson= await import(`/my-jsons/${fileName}`)

In fact, I can’t even run an npm run build command because I get this error:

Module not found: Error: Can't resolve '/my-jsons'

I’m beginning to wonder if this is even possible. I believe it should be, but it’s just something that I am failing to understand regarding .tsconfig or webpack rules. I’ve asked ChatGPT for insight on my problem and this is what it has said:

JSON Files in public: Placing JSON files in public is fine for serving static assets and accessing them via HTTP requests.

Dynamic Imports: For dynamic imports, JSON files need to be in the src directory so that Webpack processes them as modules.

I’m not sure why webpack can’t just treat JSON files the same way it’d treat other static files? Especially if JSON is sometimes read/parsed in runtime (i.e. JSON.parse()).

Is this use-case actually impossible given the constraints? Am I misunderstanding anything regarding tsconfig.json or CRA? If it is possible, what steps can I take for this to fully work? Thanks in advance for your help and for your time 🙂 .

My project’s folder structure is like so:

my-project:
└───public
|     └───my-jsons
|         └───sample1.json
|         └───sample2.json
└───src
    └───components
etc.

When built, this is what it looks like:

build:
└───my-jsons
    └───sample1.json
    └───sample2.json
└───index.html
etc.

If it helps, these are the contents within my tsconfig.json file:

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "baseUrl": "./",
  },
  "include": ["src", "public"]
}

Why is geolocation.getCurrentPosition() returning immediately? [duplicate]

As far as I know it’s not an async function, and yet I have a case where I call the function and the control flow goes directly to the return statement of my function:

function getGeoLocation(): GeolocationPosition | null
{

  const position_options: PositionOptions = {};
  position_options.enableHighAccuracy = true;
  
  
  let gps_position = null;


  if (navigator.geolocation)
    { // GET THE GPS COORDS
      navigator.geolocation.getCurrentPosition(function(pos: GeolocationPosition)
      {// SUCCESS
        console.log('success, got geolocation');
        gps_position = pos;
      }, 
      function(pos_error: GeolocationPositionError) 
      {// FAILURE
        console.log('failed to get geolocation');

        gps_position = null;

      }, position_options); 
      
    }
    
    
    
    
    return gps_position;


    
}

I expected the function to get to the return statement after the getCurrentPosition function returns but instead what’s happening is it’s calling it and then immediately jumping to the return statement, which invariably returns null because that’s what I set it as at the start. It doesn’t appear to be an async function from the looks of it:

https://developer.mozilla.org/en-US/docs/Web/API/Geolocation/getCurrentPosition

Mat-select not updating value of second options list value

In my angular app I have a scenario where I have list of countries and if I select a country it will make an API call and fetched the respective states list. Then if I select state it should display in mat-select. I have implemented the functionality but state selection is not happening.

here is the example – https://stackblitz.com/edit/dynamic-nested-menus-zwl5y3?file=app%2Fapp.component.ts,app%2Fapp.component.html,app%2Fapp.component.scss

Can someone help me.

403 Forbidden Error- Authorizing w/ Spotify API

I am currently trying to use the Spotify API with a React.js web application I want to make. However, I keep getting error 403 (forbidden) when I run the app. Any help is very greatly appreciated! Been stuck on this for a bit now.

I tried several different methods of making these endpoints, calling them, etc. I really just cannot seem to work around this. I’m not sure what I am missing

Here is the current code:

router.get('/login', function(req, res) {

  var state = generateRandomString(16);
  res.cookie(stateKey, state);
  var scope = 'user-read-private user-read-email';

  res.redirect('https://accounts.spotify.com/authorize?' +
    querystring.stringify({
      response_type: 'code',
      client_id: client_id,
      scope: scope,
      redirect_uri: redirect_uri,
      state: state
    }));;
});

router.get('/callback', function(req, res){
  var code = req.query.code || null;
  var state = req.query.state || null;
  var storedState = req.cookies ? req.cookies[stateKey] : null;

  if (state === null || state !== storedState) {
    res.redirect('/#' +
      querystring.stringify({
        error: 'state_mismatch'
      }));
  } else {
    res.clearCookie(stateKey);
    var authOptions = {
      url: 'https://accounts.spotify.com/api/token',
      form: {
        code: code,
        redirect_uri: redirect_uri,
        grant_type: 'authorization_code'
      },
      headers: {
        'content-type': 'application/x-www-form-urlencoded',
        Authorization: 'Basic ' + (new Buffer.from(client_id + ':' + client_secret).toString('base64'))
      },
      json: true
    };

    request.post(authOptions, function(error, response, body) {
      if (!error && response.statusCode === 200) {

        var access_token = body.access_token,
            refresh_token = body.refresh_token;

        var options = {
          url: 'https://api.spotify.com/v1/me',
          headers: { 'Authorization': 'Bearer ' + access_token },
          json: true
        };

        // use the access token to access the Spotify Web API
        request.get(options, function(error, response, body) {
          console.log(body);
        });

        // we can also pass the token to the browser to make requests from there
        res.redirect('/#' +
          querystring.stringify({
            access_token: access_token,
            refresh_token: refresh_token
          }));
      } else {
        res.redirect('/#' +
          querystring.stringify({
            error: 'invalid_token'
          }));
      }
    });
  }
});

JS calculator not correctly updating inner html

I have a “calculator” that gives an estimated payout from a data table. It works pretty good, except the total gets wonky when I choose a marital status or a parent status PLUS a children selection. The html won’t update correctly, and the child fee does not add correctly.
But, the child selection works perfectly fine when a marital or parent status is not selected, and vice versa. What am I missing? Here’s the git repo too: https://github.com/strozilla/va-calculator

const compensationRates = {
  10: {
    single: 171.23
  },
  20: {
    single: 338.49
  },
  30: {
    single: 524.31,
    withSpouse: 586.31,
    withSpousewithoneParent: 636.31,
    withSpousewithTwoParents: 686.31,
    withOneParent: 574.31,
    withTwoParents: 624.331,
    withOneChild: 565.31,
    withSpousewithOneChild: 632.21,
    withSpousewithoneParentwithOneChild: 682.31,
    withSpousewithTwoParentswithOneChild: 732.31,
    withOneParentwithOneChild: 615.31,
    withTwoParentswithOneChild: 665.31,
    additionalChildUnder18: 31.0,
    additionalChildOver18: 100.0,
    aidAndAttendance: 57.0
  },
  40: {
    single: 755.28,
    withSpouse: 838.28,
    withSpousewithOneParent: 904.28,
    withSpousewithTwoParents: 970.28,
    withOneParent: 821.28,
    withTwoParents: 887.28,
    withOneChild: 810.28,
    withSpousewithOneChild: 899.28,
    withSpousewithoneParentwithOneChild: 965.28,
    withSpousewithTwoParentswithOneChild: 1031.28,
    withOneParentwithOneChild: 876.28,
    withTwoParentswithOneChild: 942.28,
    additionalChildUnder18: 41.0,
    additionalChildOver18: 133.0,
    aidAndAttendance: 76.0
  },
  50: {
    single: 1075.16,
    withSpouse: 1179.16,
    withSpousewithOneParent: 1262.16,
    withSpousewithTwoParents: 1345.16,
    withOneParent: 1158.16,
    withTwoParents: 1144.16,
    withOneChild: 1241.16,
    withSpousewithOneChild: 1255.16,
    withSpousewithoneParentwithOneChild: 1338.16,
    withSpousewithTwoParentswithOneChild: 1421.16,
    withOneParentwithOneChild: 1227.16,
    withTwoParentswithOneChild: 1310.16,
    additionalChildUnder18: 51.0,
    additionalChildOver18: 167.0,
    aidAndAttendance: 95.0
  },
  60: {
    single: 1361.88,
    withSpouse: 1486.88,
    withSpousewithOneParent: 1586.88,
    withSpousewithTwoParents: 1686.88,
    withOneParent: 1461.88,
    withTwoParents: 1561.88,
    withOneChild: 1444.88,
    withSpousewithOneChild: 1577.88,
    withSpousewithoneParentwithOneChild: 1677.88,
    withSpousewithTwoParentswithOneChild: 1777.88,
    withOneParentwithOneChild: 1544.88,
    withTwoParentswithOneChild: 1644.88,
    additionalChildUnder18: 62.0,
    additionalChildOver18: 200.0,
    aidAndAttendance: 114.0
  },
  70: {
    single: 1716.28,
    withSpouse: 1861.28,
    withSpousewithOneParent: 1978.28,
    withSpousewithTwoParents: 2095.28,
    withOneParent: 1833.28,
    withTwoParents: 1950.28,
    withOneChild: 1813.28,
    withSpousewithOneChild: 1968.28,
    withSpousewithoneParentwithOneChild: 2085.28,
    withSpousewithTwoParentswithOneChild: 2202.28,
    withOneParentwithOneChild: 1930.28,
    withTwoParentswithOneChild: 2047.28,
    additionalChildUnder18: 72.0,
    additionalChildOver18: 234.0,
    aidAndAttendance: 134.0
  },
  80: {
    single: 1995.01,
    withSpouse: 2161.01,
    withSpousewithOneParent: 2294.01,
    withSpousewithTwoParents: 2427.01,
    withOneParent: 2128.01,
    withTwoParents: 2261.01,
    withOneChild: 2106.01,
    withSpousewithOneChild: 2283.01,
    withSpousewithoneParentwithOneChild: 2416.01,
    withSpousewithTwoParentswithOneChild: 2549.01,
    withOneParentwithOneChild: 2239.01,
    withTwoParentswithOneChild: 2372.01,
    additionalChildUnder18: 82.0,
    additionalChildOver18: 267.0,
    aidAndAttendance: 153.0
  },
  90: {
    single: 2241.91,
    withSpouse: 2428.91,
    withSpousewithOneParent: 2578.91,
    withSpousewithTwoParents: 2728.91,
    withOneParent: 2391.91,
    withTwoParents: 2541.91,
    withOneChild: 2366.91,
    withSpousewithOneChild: 2565.91,
    withSpousewithoneParentwithOneChild: 2715.91,
    withSpousewithTwoParentswithOneChild: 2865.91,
    withOneParentwithOneChild: 2516.91,
    withTwoParentswithOneChild: 2666.91,
    additionalChildUnder18: 93.0,
    additionalChildOver18: 301.0,
    aidAndAttendance: 172.0
  },
  100: {
    single: 3737.85,
    withSpouse: 3946.25,
    withSpousewithOneParent: 4113.51,
    withSpousewithTwoParents: 4280.77,
    withOneParent: 3905.11,
    withTwoParents: 4072.37,
    withOneChild: 3877.22,
    withSpousewithOneChild: 4098.87,
    withSpousewithoneParentwithOneChild: 4266.13,
    withSpousewithTwoParentswithOneChild: 4433.39,
    withOneParentwithOneChild: 4044.48,
    withTwoParentswithOneChild: 4211.74,
    additionalChildUnder18: 1033.55,
    additionalChildOver18: 334.49,
    aidAndAttendance: 191.14
  }
}

let limb = []
let disabilities = []
let bilateralDisabilities = []
let selectedOptions = []
let totalCompensation = 0
let combinedPercentage = 0
let selectedBodyPart = null
let resultSpan = document.getElementById('result')

function calculateCompensation() {
  document.querySelectorAll('.body-part').forEach(function(bodyPart) {
    bodyPart.addEventListener('click', function() {
      selectedBodyPart = bodyPart.textContent // Update the selected body part
    })
  })

  document.querySelectorAll('.percentage').forEach(function(button) {
    button.addEventListener('click', function() {
      var value = parseInt(button.value)
      var selectionText = `${value}%`

      if (selectedBodyPart) {
        selectionText = `${selectedBodyPart} ${value}%`
        limb.push(selectedBodyPart)
        selectedBodyPart = null
      }

      disabilities.push(value)
      addSelectionBox(selectionText)

      if (disabilities.length > 1 && limb.length > 1) {
        disabilities.forEach(function(disability) {
          bilateralDisabilities.push(disability)
        })
      }

      button.classList.remove('selected')
      updateTotalCompensation()
    })
  })

  document.querySelectorAll('.optional').forEach(function(element) {
    element.addEventListener('change', function() {
      updateTotalCompensation()
    })
  })
  compensation.innerHTML = '$' + totalCompensation.toFixed(2)
  resultSpan.innerHTML = combinedPercentage + '%'

  updateTotalCompensation()
}

function addSelectionBox(text) {
  var selectionsDisplay = document.getElementById('selectionsDisplay')
  var box = document.createElement('div')
  box.className = 'selection-box'
  box.innerHTML = `${text} <span class="remove-box">X</span>`
  selectionsDisplay.appendChild(box)

  box.querySelector('.remove-box').addEventListener('click', function() {
    removeSelection(text, box)
  })
}

function removeSelection(text, box) {
  var index

  if (text.endsWith('%')) {
    var value = parseInt(text)
    index = disabilities.indexOf(value)
    if (index !== -1) disabilities.splice(index, 1)
  } else {
    index = limb.indexOf(text)
    if (index !== -1) limb.splice(index, 1)
  }

  box.remove()
  updateTotalCompensation()
}

function updateTotalCompensation() {
  var selectionsDisplay = document.getElementById('selectionsDisplay')
  if (selectionsDisplay.childNodes.length === 0) {
    combinedPercentage = 0
    totalCompensation = 0
    document.getElementById('result').innerHTML = '0%'
    document.getElementById('compensation').innerHTML = '$0.00'
    return
  }

  combinedPercentage =
    disabilities.reduce(function(acc, cur) {
      return acc * (1 - cur / 100)
    }, 1) * 100
  combinedPercentage = 100 - combinedPercentage
  combinedPercentage = Math.round(combinedPercentage / 10) * 10
  console.log(combinedPercentage)

  selectedOptions = []
  document.querySelectorAll('.optional:checked').forEach(function(optional) {
    selectedOptions.push(optional.id)
  })
  console.log(selectedOptions)

  if (bilateralDisabilities.length > 1) {
    var bilateralCombined =
      bilateralDisabilities.reduce(function(acc, cur) {
        return acc * (1 - cur / 100)
      }, 1) * 100
    bilateralCombined = 100 - bilateralCombined
    bilateralCombined = Math.round(bilateralCombined - 10)

    combinedPercentage =
      Math.round((combinedPercentage + bilateralCombined) / 20) * 10
  }
  document.getElementById('result').innerHTML = combinedPercentage + '%'

  var compensation = document.getElementById('compensation')

  document.getElementById('result').innerHTML = combinedPercentage + '%'

  console.log(totalCompensation)

  // Default to single rate
  var totalCompensation = compensationRates[combinedPercentage]['single']

  // Watch dropdowns for changes
  var childrenUnder18 = parseInt(
    document.getElementById('childrenUnder18').value
  )
  var childrenOver18 = parseInt(document.getElementById('childrenOver18').value)

  // Update selectedOptions array
  if (childrenUnder18 > 0) {
    if (!selectedOptions.includes('withOneChild')) {
      selectedOptions.push('withOneChild')
      totalCompensation =
        compensationRates[combinedPercentage][selectedOptions.join('')]

      console.log(totalCompensation + ' with one child')
    }

    if (childrenUnder18 > 1) {
      var addChildUnder18 = childrenUnder18 - 1
      console.log(addChildUnder18)
      if (addChildUnder18 > 0) {
        totalCompensation +=
          addChildUnder18 *
          compensationRates[combinedPercentage]['additionalChildUnder18']
      }
    } else {
      totalCompensation =
        compensationRates[combinedPercentage][selectedOptions.join('')]
    }
  } else {
    selectedOptions = selectedOptions.filter(
      (option) => option !== 'withOneChild'
    )
  }

  if (childrenOver18 > 0) {
    if (!selectedOptions.includes('withOneChild')) {
      selectedOptions.push('withOneChild')
    }

    if (childrenOver18 > 1) {
      var addChildOver18 = childrenOver18 - 1
      if (addChildOver18 > 0) {
        totalCompensation +=
          addChildOver18 *
          compensationRates[combinedPercentage]['additionalChildOver18']
      }
    } else {
      totalCompensation = compensationRates[combinedPercentage]['withOneChild']
    }
  } else {
    selectedOptions = selectedOptions.filter(
      (option) => option !== 'withOneChild'
    )
  }

  const selectedOptionKey = selectedOptions.join('')
  if (compensationRates[combinedPercentage][selectedOptionKey]) {
    totalCompensation = compensationRates[combinedPercentage][selectedOptionKey]
  }
  console.log(totalCompensation)
  // Update total compensation display
  compensation = document.getElementById('compensation')
  compensation.innerHTML = '$' + totalCompensation.toFixed(2)
  document.getElementById('result').innerHTML = combinedPercentage + '%'

  document
    .getElementById('childrenUnder18')
    .addEventListener('change', updateTotalCompensation)
  document
    .getElementById('childrenOver18')
    .addEventListener('change', updateTotalCompensation)

  // Adjust based on selected options
  if (compensationRates[combinedPercentage][selectedOptions.join('')]) {
    totalCompensation =
      compensationRates[combinedPercentage][selectedOptions.join('')]
  }

  console.log(totalCompensation)

  compensation.innerHTML = '$' + totalCompensation.toFixed(2)

  resultSpan.innerHTML = combinedPercentage + '%'
}

function clearTotals() {
  document
    .querySelectorAll('input[type="checkbox"]')
    .forEach(function(checkbox) {
      checkbox.checked = false
      let label = checkbox.closest('label')
      if (label) {
        label.classList.remove('checked')
      }
    })
  document.getElementById('childrenUnder18').value = '0'
  document.getElementById('childrenOver18').value = '0'
  limb = []
  disabilities = []
  bilateralDisabilities = []
  selectedOptions = []
  totalCompensation = 0
  combinedPercentage = 0

  var selectionsDisplay = document.getElementById('selectionsDisplay')
  selectionsDisplay.innerHTML = ''

  compensation = document.getElementById('compensation')
  compensation.innerHTML = '$' + 0.0
  document.getElementById('result').innerHTML = 0 + '%'

  updateTotalCompensation()
}

document.addEventListener('DOMContentLoaded', (event) => {
  function handleCheckboxChange(event) {
    const group = event.target.closest('div')
    const checkboxes = group.querySelectorAll('.optional')

    checkboxes.forEach((checkbox) => {
      if (checkbox !== event.target) {
        checkbox.checked = false
        const otherLabel = checkbox.closest('label')
        otherLabel.classList.remove('checked')
      }
    })

    let label = event.target.closest('label')
    if (event.target.checked) {
      label.classList.add('checked')
    } else {
      label.classList.remove('checked')
    }

    updateTotalCompensation()
    console.log(totalCompensation)
  }

  document.querySelectorAll('.optional').forEach((checkbox) => {
    checkbox.addEventListener('change', handleCheckboxChange)
  })
})



calculateCompensation()
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

.calculator {
  max-width: 1150px;
  margin: 50px;
  padding: 20px 40px;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.body-part-sec {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
  gap: 1em;
  margin: 2em 0;
}

.top-left,
.top-right,
.bottom-left,
.bottom-right {
  width: fit-content;
  margin: auto;
}

.body-part-sec button {
  width: 150px;
  height: 50px;
}

.body-part-container {
  margin-bottom: 2em;
}

.selections {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 1em;
}

.optional {
  position: absolute;
  display: none;
}

.body-part-container button {
  background-color: #ccc;
  font-weight: bold;
  font-size: 1.5em;
  padding: 1em 2em;
  margin: 0.5em;
}

.body-part-container button:hover,
.selections button:hover,
.marital-status label:hover,
.dependent-parents label:hover {
  background-color: #2d5b87;
  color: #fff;
  cursor: pointer;
}

.selections button,
.marital-status label,
.dependent-parents label {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #ccc;
  font-weight: bold;
  font-size: 1em;
  padding: .5em 2em;
  margin: 0.5em;
}

.checked {
  background-color: #2d5b87;
  color: #fff;
}

.options-sec,
.dependent-children-container,
.percent-dollar {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2em;
  margin: 2em 0;
}

.dependent-children {
  display: flex;
  flex-direction: column;
  gap: 1em;
}

.dependent-children select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23131313%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: right 0.7rem top 50%;
  background-size: 0.65rem auto;
}

.dependent-dropdown {
  position: relative;
  font-size: 1.5em;
  padding: .25em .5em;
}

.estimated-total {
  position: sticky;
  bottom: 0;
  color: #fff;
  background-color: #2d5b87;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .5em;
  margin: 2em 0;
  padding: 1em 2em;
}

.totals {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: .5em;
}

.percent-dollar div {
  font-size: 1.5em;
}

.percent-dollar span {
  font-size: 2.5em;
}

.clear-btn {
  padding: .5em 1em;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1.25em;
  margin-left: 2em;
}

.selections-display {
  margin-top: 20px;
}

.selection-box {
  display: inline-block;
  padding: 10px;
  margin: 5px;
  background-color: #2d5b87;
  color: #fff;
  border-radius: 4px;
  position: relative;
  width: auto;
}

.selection-box .remove-box {
  cursor: pointer;
  color: #f1f1f1;
  padding: 5px;
  font-size: .75em;
}
<div class="calculator">
  <h2>Veteran Disability Calculator</h2>
  <div class="instructions"><span>Enter your disabilities using the buttons below.</span>
    <span>If your disability is on an extremity push that proper leg or arm button then push the percentage</span>
  </div>
  <div class="body-part-sec">
    <div class="top-left">
      <button class="body-part arm" type="button" data-body-limb="arm">Left Arm</button>
    </div>
    <div class="top-right">
      <button class="body-part arm" type="button" data-body-limb="arm">Right Arm</button>
    </div>
    <div class="bottom-left">
      <button class="body-part leg" type="button" data-body-limb="leg">Left Leg</button>
    </div>
    <div class="bottom-right">
      <button class="body-part leg" type="button" data-body-limb="leg">Right Leg</button>
    </div>
  </div>
  <div>
    <div class="selections">
      <button class="percentage" value="10">10%</button>
      <button class="percentage" value="20">20%</button>
      <button class="percentage" value="30">30%</button>
      <button class="percentage" value="40">40%</button>
      <button class="percentage" value="50">50%</button>
      <button class="percentage" value="60">60%</button>
      <button class="percentage" value="70">70%</button>
      <button class="percentage" value="80">80%</button>
      <button class="percentage" value="90">90%</button>
      <button class="percentage" value="100">100%</button>
    </div>
  </div>
  <div id="selectionsDisplay" class="selections-display"></div>
  <div class="options-sec">
    <div class="marital-status">
      <div>What is Your Marital Status?</div>
      <label class="checked"><input class="optional" type="checkbox" id="single">Single</label>
      <label><input class="optional" type="checkbox" id="withSpouse">Married</label>
    </div>
    <div class="dependent-parents">
      <div>Do You Have Any Dependent Parents?</div>
      <label class="checked"><input class="optional" type="checkbox" id="">None</label>
      <label><input class="optional" type="checkbox" id="withOneParent">One Parent</label>
      <label><input class="optional" type="checkbox" id="withTwoParents">Two Parents</label>
    </div>
  </div>
  <div class="dependent-children-container">
    <div class="dependent-children">
      <label for="childrenUnder18">Dependent Children Under 18: </label>
      <select class="dependent-dropdown" id="childrenUnder18">
        <option id="0" value="0">0</option>
        <option id="1" value="1">1</option>
        <option id="2" value="2">2</option>
        <option id="3" value="3">3</option>
        <option id="4" value="4">4</option>
        <option id="5" value="5">5</option>
        <option id="6" value="6">6</option>
        <option id="7" value="7">7</option>
        <option id="8" value="8">8</option>
        <option id="9" value="9">9</option>
        <option id="10" value="10">10</option>
      </select>
    </div>
    <div class="dependent-children">
      <label for="childrenOver18">Dependent Children Over 18:</label>
      <select class="dependent-dropdown" id="childrenOver18">
        <option id="11" value="0">0</option>
        <option id="12" value="1">1</option>
        <option id="13" value="2">2</option>
        <option id="14" value="3">3</option>
        <option id="15" value="4">4</option>
        <option id="16" value="5">5</option>
        <option id="17" value="6">6</option>
        <option id="18" value="7">7</option>
        <option id="19" value="8">8</option>
        <option id="20" value="9">9</option>
        <option id="21" value="10">10</option>
      </select>
    </div>
  </div>
  <div class="estimated-total">
    <div class="percent-dollar">
      <div class="totals">Combined Disability: <span id="result">0%</span></div>
      <div class="totals">Estimated Monthly Compensation: <span id="compensation">$0.00</span></div>
    </div>
    <button id="clearSelections" class="clear-btn" onclick="clearTotals()">Clear Selections</button>
  </div>
</div>

Getting Error: 11000 in user registration form

so i was just making a normal user registration form using react + express js + mongodb , and i am running into an issue where if i try to register the user for the first time it works properly but if i try to add another user it gives me error 11000The structure for the frontend code is something like this :there are three component files: Signup form, Basic Info, Part1Signup Form.js

// Signup form .js
import React, { useState } from 'react';
import axios from 'axios';
import BasicInfo from './Signup/BasicInfo';

const SignupForm = () => {
  const sendRequest = async (values) => {
    try {
      const response = await axios.post('http://localhost:5000/', values);
      console.log(response.data);

    } catch (error) {
      console.error(error);
    }
  };

  return (
    <div>
      <BasicInfo onComplete={sendRequest}  />
    </div>
  );
};

export default SignupForm;

Basic Info.js
import React, { useState } from 'react';
import Part1 from './Part1';

const BasicInfo = ({onComplete}) => {
    const [formData, setFormData] = useState({
        username: '',
        email: '',
        password: '',
    })

    const handleUserInput = (e) => {
        setFormData({...formData, [e.target.name]: e.target.value})
    }
    // when will this onComplete function be triggered?
    /* 
        on the click of the submit button i will check if the whole form is complete or not if yes then the oncomplete function will be triggered
        next task is to get the data in basicinfostructure
          
        error 11000 is occuring, for data redundancy, i need to clear the data 
      */
    
    const checkSubmit = (e) => {
        e.preventDefault();
        // Check if all fields are filled
        if (formData.username && formData.email && formData.password) {
          onComplete(formData);
          
        } else {
          alert('Please complete all fields');
        }
      };
    
    return (
    <div name='basicInfo'>   

        <Part1 formData={formData} handleUserInput={handleUserInput} />
        <button type='submit' onClick={checkSubmit}>Submit</button>
    </div>
  )
}
export default BasicInfo;

// Part1

import React from 'react';

const Part1 = ({ formData, handleUserInput }) => {
  return (
    <form>
      <label>Username</label>
      <input
        type='text'
        name='username'
        value={formData.username}
        onChange={handleUserInput}
      />
      <br />
      <label>Email Address</label>
      <input
        type='email'
        name='email'
        value={formData.email}
        onChange={handleUserInput}
      />
      <br />
      <label>Password</label>
      <input
        type='password'
        name='password'
        value={formData.password}
        onChange={handleUserInput}
      />
      <br />
    </form>
  );
};

export default Part1;

Please ignore the comments in my code that was just me writing my own thoughts there XD, also this is supposed to be a multi step signup form but i have only made part1 for now which is not working
also here is the backend server code

const express = require('express');
const cors = require('cors');

const app = express();
 
app.use(express.json());
app.use(cors());

const User = require('./model/user');

require('./db/connection');

app.post('/', async(req, res) => {
  let user = new User(req.body);
  let result = await user.save();
  res.send(result);
})

app.listen(5000, ()=>{console.log('Server started at port 5000')});

           throw new error_1.MongoServerError(res.writeErrors[0]);
                  ^

MongoServerError: E11000 duplicate key error collection: new-test.users index: basicInfo.username_1 dup key: { basicInfo.username: null }       
    at InsertOneOperation.execute (C:UsersakshaOneDriveDesktopPractise FolderNew folderNew Authhhnode_modulesmongodbliboperationsinsert.js:51:19)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async executeOperation (C:UsersakshaOneDriveDesktopPractise FolderNew folderNew Authhhnode_modulesmongodbliboperationsexecute_operation.js:136:16)
    at async Collection.insertOne (C:UsersakshaOneDriveDesktopPractise FolderNew folderNew Authhhnode_modulesmongodblibcollection.js:155:16) {
  errorResponse: {
    index: 0,
    code: 11000,
    errmsg: 'E11000 duplicate key error collection: new-test.users index: basicInfo.username_1 dup key: { basicInfo.username: null }',
    keyPattern: { 'basicInfo.username': 1 },
    keyValue: { 'basicInfo.username': null }
  },
  index: 0,
  code: 11000,
  keyPattern: { 'basicInfo.username': 1 },
  keyValue: { 'basicInfo.username': null },
  [Symbol(errorLabels)]: Set(0) {}
}

I tried logging and stuff but it didn’t really help so this is my last resort even chat gpt couldn’t help , help me guys plsss

JavaScript Matching Emails [closed]

I am new to JavaScript and need to verify that the emails match in two input boxes. It only needs to verify that they match, not that they are correctly formatted emails. What I have now does alert when they don’t match, but also alerts the same thing when they do match. Can anyone help?

function verifyEmail() {
    let email1 =  document.getElementById("email")
    let email2 = document.getElementById("emailConf")

    if (email1 == email2) {
        return true;
    }
    else {
        alert("Emails do not match.");
    }

}



<form action="mailto: [email protected]" method:="post" enctype="text/plain">
        <label>First Name:</label>
        <input type="text" name="firstName" placeholder="First Name"><br>
        <label>Last Name:</label>
        <input type="text" name="lastName" placeholder="Last Name"><br>
        <label>Email:</label>
        <input type="email" id="email" name="email" placeholder="Email"><br>
        <label>Confirm Email:</label>
        <input type="email" id="emailConf" name="emailConf" placeholder="Confirm Email"> <br>
        <label>Message:</label><br>
        <textarea name="yourMessage" cols="30" rows="10" placeholder="Type your message here.">        </textarea><br>
   <br> <button onclick="verifyEmail()";>Submit</button>
</form>

I tried numerous solutions but none were successful.

Google Maps search bar not working in React Native with GooglePlacesAutocomplete

I am working on a React Native project where I have integrated a Google Map with a cursor, and everything works fine. I added a GooglePlacesAutocomplete component to provide a search bar for the user to search for locations. However, the search bar does not work. When I type something into it, nothing appears.

Additionally, I created a function handleLocationSelectto link the GooglePlacesAutocomplete with the map cursor so that when the user searches for something, the cursor automatically moves to the location’s latitude and longitude. I would like to know if this function is implemented correctly.

const Location= () => {
  const [selectedLocation, setSelectedLocation] = useState('');
  const [markerCoordinates, setMarkerCoordinates] = useState({ latitude: 24.4539, longitude: 54.3773 });
  const API_KEY = '893d1465300549d88490773eddb7f9f2';
  const GOOGLE_PLACES_API_KEY = 'AIzaSyAnmKvj5E4qVZJTGtVJtMU4B2P3op8Ce0o';

  const handleMapPress = async (event) => {
    const { latitude, longitude } = event.nativeEvent.coordinate;
    setMarkerCoordinates({ latitude, longitude });

    try {
      const response = await axios.get(
        `https://api.opencagedata.com/geocode/v1/json?q=${latitude}+${longitude}&key=${API_KEY}`
      );
      const components = response.data.results[0].components;
      const location =
        components.town ||
        components.city ||
        components.village ||
        components.hamlet ||
        components.locality ||
        components.country;

      if (location) {
        setSelectedLocation(location);
      } else {
        setSelectedLocation('Unknown location');
      }
    } catch (error) {
      console.error('Error fetching location data: ', error);
    }
  };

  const handleLocationSelect = (data, details = null) => {
    const { lat, lng } = details.geometry.location;
    setMarkerCoordinates({ latitude: lat, longitude: lng });
    setSelectedLocation(details.name);
  };

  return (
    <View style={styles.container}>
      <StatusBar
        backgroundColor="transparent"
        barStyle="dark-content"
        translucent={true}
      />

      <SafeAreaView style={styles.form}>
        <View style={styles.head}>
          <BackArrow />
          <Text style={styles.title}>Location</Text>
        </View>
        <View style={{ width: '90%' }}>
          <GooglePlacesAutocomplete
            placeholder='Search'
            fetchDetails={true}
            onPress={handleLocationSelect}
            query={{
              key: GOOGLE_PLACES_API_KEY,
              language: 'en',
            }}
            styles={{
              container: { width: '100%', zIndex: 1 },
              textInput: {
                height: 51,
                borderRadius: 15,
                color: Colors.SmokeBlue,
                fontSize: 13,
                fontFamily: FONTS.PoppinsRegular,
                marginTop: '10%',
                paddingHorizontal: 15,
              },
            }}
          />
        </View>
        <MapView
          style={{ width: '100%', height: '100%' }}
          initialRegion={{
            latitude: 24.4539,
            longitude: 54.3773,
            latitudeDelta: 0.0922,
            longitudeDelta: 0.0421,
          }}
          onPress={handleMapPress}
        >
          {markerCoordinates && (
            <Marker
              coordinate={markerCoordinates}
              title={selectedLocation}
            />
          )}
        </MapView>

        {selectedLocation && (
          <View style={styles.selectedLocationContainer}>
            <Text style={styles.selectedLocationText}>Selected Location: {selectedLocation}</Text>
          </View>
        )}
      </SafeAreaView>
    </View>
  );
};

export default Location;

Cannot destructure value from a DOM element when using ES6 rest

Given the below JSBIN why A is undefined?

https://jsbin.com/bisomevivu/edit?html,js,console,output

HTML:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <input data-custom="CUST" data-standard="STD" id="input">
  <button id="button">Test</test>
</body>
</html>

JS:

const [button, input] = ["button", "input"].map(id=> document.getElementById(id));

button.addEventListener("click", ()=>{
  
  const {dataset: {custom}, ...props} = input;
  const {value: A} = props;
  const {dataset: {standard}, value: B} = input;
  
  
  console.info(`A: '${A}' - B: '${B}'`);
  
});

The regular destructuring works, the rest one doesn’t

How can I create a custom avatar and generate artwork based on it? [closed]

I need some light on how to create a tool that allows a person to customize an avatar and then generate a set of different artwork based on it. There’s an online tool that allows you to do it:

HTML form with a field to input a name

You can input your name there and when you click the button you can start to customize the avatar:

avatar customization

In the end, some images are generated based on the avatar:

generated images based on the avatar

How can I start building something like that? Any references to read?

472. Concatenated Words – leetcode Failing 1 test case out of 43

I was trying to solve a coding question from leetcode

Given an array of strings words (without duplicates), return all the concatenated words in the given list of words.

A concatenated word is defined as a string that is comprised entirely of at least two shorter words (not necessarily distinct) in the given array.

Example 1:

Input: words = ["cat","cats","catsdogcats","dog","dogcatsdog","hippopotamuses","rat","ratcatdogcat"]
Output: ["catsdogcats","dogcatsdog","ratcatdogcat"]

Example 2:

Input: words = ["cat","dog","catdog"]
Output: ["catdog"]

This is my code

var findAllConcatenatedWordsInADict = function (words) {
    let set = new Set(words)
    let res = []
    let cache = {}

    for (let word of words) {
        if (dfs(word)) res.push(word)
    }

    return res

    function dfs(word) {
        // if (!word) return true
        if (cache[word] !== undefined) return cache[word]
        for (let i = 1; i < word.length; i++) {
            let prefix = word.substring(0, i)
            let suffix = word.substring(i)
            if (set.has(prefix)) {
                if ( set.has(suffix) || dfs(suffix)) {
                    cache[word] = true
                    return true
                }
            }
        }
        cache[word] = false
        return false
    }
};

but its failing for the following testcase –

["abnormals","brick","embezzling","allows","brief","embruted","keyboard","citator","damascenes","periwigged","atonable","antirape","cringing","sunbursts","reinforcers","pylons","vociferates","purview","liposome","reformates","regiments","lickerishnesses","gunners","damascened","gunnery","leasebacks","superboard","pooka","vociferated","censers","listlessnesses","shipwrecking","syncopating","chinkapins","wowsers","zonetimes","haphtaroth","pitiers","scorpions","spookiness","inhabitancy","crunchable","prefabricating","fondled","symbolisms","kumyses","venge","fondler","gabbroid","imblaze","fondles","pinniped","amities","gabbroic","acrylonitriles","vibrant","prefabrication","gangsters","glaucomas","nonmonetary","unconfessed","sagaciousnesses","dicty","zarzuela","twelve","coldcocks","formalising","inflicting","tarnations","allots","lustrings","sonographers","auctioneer","conferments","absurds","suspiration","algological","oversupply","droopier","dolmans","legitimisms","rubaiyat","salines","adjustors","flyless","underpublicized","plugola","usuriously","overmilked","scurrying","disintoxicating","knuckleballers","antiauthoritarianisms","disintoxication","lavishing","technicalities","statisticians","superconductive","derogatively","enclosed","reemploys","strafer","timpanum","cineastes","gangues","retirers","stigmas","strafes","vouchsafes","painterlinesses","bazaar","shinnying","skiver","skives","demisemiquavers","venal","vouchsafed","fortepianos","gypsying","ringbark","tarragons","bluntly","venae","wites","infliction","stimulative","extract","skived","youngberries","encloser","hyperconcentration","bestrode","exasperating","encloses","poltergeist","wited","morceau","vends","emits","mutualizes","hormonal","letterspace","bullpen","propagator","besmooth","withy","castaways","mutualized","vasodilatations","retroversion","vimina","assimilators","hesitaters","assimilatory","dicta","hydrometallurgist","fetology","withe","villosities","ogrisms","fingerprinted","exhumation","flagitiously","strafed","purgings","motorizing","noncompetitor","proselyting","rightisms","wimpishness","stigmal","sabulose","nonadditivities","unknowabilities","cryptorchism","borrowings","tideways","fractions","detachers","biped","emirs","noseguard","droopily","cavettos","luminesce","procrastinated","retirees","penicil","discounting","outdragging","symbolised","paginate","biblicism","reevaluating","biblicist","propagated","therapeutic","impermanences","jeopardised","laminose","microampere","closing","totemisms","venom","symbolises","cobbling","auditoria","cosignatory","jeopardises","combustibles","whosoever","perfunctoriness","kamseen","jabots","implicatively","shadower","anorexias","reevaluation","unconstitutionalities","countermand","immunotherapies","procrastinates","thyroglobulin","mayapple","johnny","apagoge","osmeteria","propagates","astringencies","lymphosarcomas","coshered","jellyfish","hormones","laminous","depositary","disreputabilities","papovavirus","gypsyism","robes","routinizations","oncogeneses","gypsyish","legitimists","trainability","unrooting","trovers","demilitarizations","sargassum","dicot","prostatisms","shadowed","drooping","exasperation","witty","atresias","healthfulnesses","malposed","robed","taximeters","aerily","truckle","defibrillate","disrobe","desirability","slipware","upstair","relentlessly","hyalin","outtrumping","hydrocracking","unravel","quadrangles","proselytize","rattlesnakes","perverted","roble","heartbroken","proselytise","brills","vibrate","configurational","proselytism","stucco","bowfin","spitting","perverter","strangenesses","epiphenomenalism","talkinesses","profiled","preconsonantal","vibrato","upstage","multidisciplinary","codeveloper","outbidden","mattock","tweenies","profiles","rarebit","codeveloped","venin","brisk","leveeing","profiler","paddleboats","hormonic","colonisation","substantialities","oncogenesis","condemnatory","sclereids","ancon","banalities","fractious","sixtyish","ampuls","blunted","brits","britt","groundlessnesses","somewhats","trekking","rightists","contuses","tonometers","employables","sanctify","coalesces","togaed","pasquinaded","blunter","oxalis","dildoe","spiritualized","ampule","robin","dicks","skewers","chillums","contused","pasquinades","scutellated","oxalic","dicky","cornhuskings","ungraciously","wangled","refreshment","salinas","sargassos","toothbrushings","superheats","microfungus","selsyns","norias","vasodilator","atrioventricular","affectionless","defenselessly","eradiating","coalesced","leadless","spiritualizes","wangler","allegers","satyr","wangles","dildos","sleigh","transportabilities","penalises","downsides","cormorants","motels","pervasion","numerally","overnutritions","pummel","rupture","arnattos","penalised","afflict","prison","pores","twiners","tinhorn","multifariousness","photograms","neutral","redivisions","tonality","combings","eliciting","rewrite","macroevolutionary","subjectively","scarcities","trilogies","storksbill","expendable","finalizations","numerological","insistences","pigeonhole","reactant","tirelessness","shmaltzier","noncolors","hubbly","phenacite","deluge","grizzlers","covenants","countercheck","multilayered","coexecutors","fervent","chainwheel","derailleurs","borrowed","odeons","cladist","deliciously","borrower","combines","pored","combiner","photograph","geophysicists","quintuplicating","combined","illimitability","liberal","senates","amyotonias","diazinon","belonging","inoculating","incredulity","restriven","geomancy","saxes","rookeries","weighted","bulkinesses","blackguarded","restrives","transmogrifying","indocility","singletrees","indicational","porks","protohumans","crackers","antifemale","antihunter","davies","asymmetries","strange","weighter","boondock","microwatts","ungenerosity","fellmonger","hypothecation","immunoprecipitate","sparging","amberinas","legislature","crutched","stimulatory","portrayers","prisms","outvoicing","stimulators","boshvarks","hypothecating","inoculation","methinks","bummed","pigpens","confinement","sneezing","ruralisms","ricochet","tallyhos","travoises","porgy","noncollectors","headlessness","engender","neptunium","superminicomputers","halenesses","humdrums","fancifying","morbidly","benzidin","formfitting","roadhouse","presumptuousnesses","crutches","auntliest","motormouths","sultriest","wiriest","farrow","vermilion","hopeless","nonrealistic","bummer","spinosity","strands","motets","porny","cholates","porns","infield","grenadines","porno","birse","microtones","nonpayments","pollinate","birrs","nephrosis","gherkin","rosiest","extremest","soutache","besiegers","birth","bromids","loving","thresholds","thunderstricken","ossicle","dishevel","estival","volleyball","nauseas","advertencies","clupeoid","tonetics","concelebrations","blackboards","bromide","syncretistic","gastreas","hubbub","hygienes","outfeast","meltdown","allopolyploids","renationalization","balaclavas","centerfolds","neutralnesses","amadous","psittacoses","brownshirts","misfaith","porky","ozonise","redear","travestied","fimbria","creditworthinesses","dialling","enamelwares","phoronids","manchineels","reticulocytes","milliohms","allopolyploidy","postisolation","granddaughter","verge","nebenkern","noncertified","peptic","peptid","millstones","intermixed","prohibit","redefy","chisels","superstores","restlessly","crisscrosses","microtonal","semiarid","inspissating","estrous","manner","prizefightings","bevatrons","bronchoscopy","artier","preprocess","profiteroles","travesties","fresheners","clitics","crisscrossed","cokehead","verbs","inoculative","goofball","nephroses","hosannaing","crassly","outroared","oxygens","dickcissel","lapins","presynaptically","stoloniferous","italics","samechs","belittle","microstate","ravigote","rickey","retwist","hygienic","interlarded","intermixes","senator","ruralists","subteen","clumsily","soapberries","overdesign","mercurate","bronchoscope","bioactivities","ricked","puttying","analgesias","lactobacilli","prises","sleeted","smattered","brisks","disenthral","hymenopterous","misinform","miscommunication","redeem","department","hippiest","cosmical","cosmogonic","prised","allude","hypersexualities","sneezier","subtotalling","uncontested","besmirching","inanition","ecdysones","salivas","inspissation","muzzling","teraph","semilethals","picayunes","enterers","midair","shrivels","treading","encamped","revisable","exocytosis","bigamy","smatterer","caresser","caresses","twitchers","bighorns","apparatus","angas","bromine","reechoing","prereleases","analgesics","mannan","mannas","teenagers","incandescence","caressed","yarely","violaters","liberty","carjacker","poussie","lexica","candidacies","zibeline","meeting","pontes","bronchospastic","controllabilities","fennecs","cutinising","protonic","exocytotic","aerobe","norite","iambic","bistros","humming","sizings","comparisons","terais","wildfowl","reflectorizing","seasoning","postpositionally","quinsies","dateline","canvased","multimode","butterscotch","tidinesses","shrivers","trackball","habilitation","deluxe","limousine","splendiferousnesses","trommel","dashiest","positiveness","overblouses","feoffments","grottoes","davits","signeted","emerging","humidors","aquaria","squaring","binoculars","keycards","queenliness","tzarinas","artily","practicum","airmobile","habilitating","manned","subtest","bison","uncongenialities","johannes","withal","hominizing","instroke","frostbitten","pontil","unrighteousnesses","plenitudes","mischance","subtend","eglateres","infractions","immunoregulatory","irrefutability","housewarmings","adjuvant","neutron","postpartum","beauteous","accountable","exaggerates","watertightnesses","correctors","volatilised","ribonucleotides","recrudesce","taboulis","hubcap","exaggerated","proximity","reliabilities","rigorousness","accountably","narghiles","guyed","complaining","mournfulnesses","outguiding","miticide","resolvable","clumsier","demandingly","volatilises","intangiblenesses","reentrants","yarest","doorpost","bisks","weensier","deifical","pozzolanas","agatized","volatile","withed","linums","counterintelligence","afterbirths","ferredoxin","quinela","agatizes","dihedrals","immobilizations","redeny","prostate","withes","cordelling","neophiliacs","wither","hymenopterons","insectivores","tray","coverings","wamble","hammered","peristomial","lipoprotein","charismatics","infant","reiteratively","puisnes","hammerer","hypnotherapy","trad","trap","tarzan","tram","incurably","fugitivenesses","glaciology","hypotenuse","unsilent","reassuring","incurable","ringmaster","mailability","infamy","adenyl","bicameralism","ridglings","bises","impulsiveness","typewrote","gazebos","epigeneses","mentation","ozonide","preconcerts","wambly","summarising","coattests","inanities","benevolences","pegmatite","mediastinum","utilisers","varlets","waterlogged","artist","satisfactions","unswathed","tocology","initiations","infall","paleness","profanities","buskined","damped","lacrimal","performabilities","sloughy","inkstone","consenting","replenishment","sidecar","touraco","acclaimer","sloughs","rebreed","offhanded","starnose","henceforth","bistres","carboyed","henbit","skidway","hessians","yapping","dabblings","bromism","bistred","unswathes","wonderland","grandiose","insanitations","priestlier","conducers","grandioso","facility","defeated","prissy","trey","spastics","assumptions","trek","damnatory","yikes","stegosauruses","pickabacks","redisplays","companioning","peripherally","tret","rolfers","ordaining","comanage","damper","supervirtuosos","encapsulates","petiolules","porch","acclaimed","dampen","tree","blackguardly","tref","flooding","overpersuading","shoptalks","infantilization","fecklessly","vinicultures","annalists","epigenesis","killdeers","marcato","defeater","neurulations","gametophores","guardrooms","infare","kookie","circumstantialities","ruralises","extinguishments","diazines","subtext","dippable","aglimmer","electrically","delved","mucoidal","squarish","illimitablenesses","visaing","ruralised","embowelled","dimethylhydrazines","encapsulated","hiccupped","electrometer","capacitive","fennels","misbalanced","delver","superromantic","delves","biacetyl","meshuga","mezzotints","landslide","misbalances","lifelines","reelected","skinflints","unfulfillable","bromins","homosex","pozzolanic","furrows","jugful","amosite","trashier","flubbers","demobbing","nightscope","pangram","stooged","buttermilks","monsteras","conjurers","dioptric","teiids","trio","trip","wergilds","anent","trim","disbowel","stooges","oxalate","morosities","vermian","dispassionately","dominicker","fossicked","bicolours","holard","levelling","trig","fustiest","population","fossicker","tressures","trapdoor","dupable","ultraclean","adepts","cuittling","furrowy","ultradistances","casuistic","intoxicate","remigrations","handbreadths","photogravure","fingerholds","damply","straggles","populating","kneeled","redeye","straggler","transistorization","skyline","caliper","casuist","reprehend","deforms","relevances","disparity","kneeler","archetypal","princeliest","tribadic","cysticercoid","hydroponically","insulations","pinkeyes","desultory","outprices","calipee","parsimonious","noctules","retakers","astricted","kipped","astigmatism","uppityness","straggled","outpriced","praenomen","millefiori","shunpiking","gudgeon","entelechy","pronouncements","folkmoots","patchoulies","nitrifiers","underwear","chamaephyte","bromize","pouchiest","temporizers","bookstores","monomania","parleyer","swaggers","telneted","nacres","scholar","pancratiums","preeminence","cerites","timpanums","whatshisname","inbounding","nacred","pitifullest","bookings","iambus","prioritizing","vitalisms","solemnnesses","acrotisms","lightered","parchments","wattlebirds","sawed","constrictors","cutesie","gearwheel","jujitsu","symbolized","symbolizer","trow","symbolizes","parleyed","ruralities","sawer","trot","nudenesses","anele","ghoulies","smelted","susurrations","twerps","troy","humannesses","overcures","trod","sketchiness","supercargo","trop","yearlies","incandescents","merchanted","postage","witticism","unchangeability","overcured","arboretums","kentledge","crispened","waistbands","firehall","prearrange","brucine","unchurching","stonecrops","nontreatment","nonreciprocals","saprogenic","waterbird","opprobrium","brucins","attempered","saluters","twiniest","universalisms","underwent","reexporting","peponiums","cocaptains","procrastinations","wadies","madwort","trashing","scintillate","univocal","eupnea","forestalling","paganizing","subaquatic","paresthetic","epileptogenic","pushups","rollicking","pepsin","nonathlete","spittoon","precincts","tallying","guildship","reclassify","unsicker","enlacement","homeopathic","tracksuit","brunette","kneading","impetuses","parenchymata","yarded","within","obsessives","supercivilization","cavalcade","acronic","convertaplanes","biomathematics","rhizobia","maladapted","sauciest","taffetized","prelimit","bowler","adjustive","anear","firefangs","substanceless","riderless","voling","scholia","bowleg","phlebotomists","beveler","bowled","kippen","pipeless","ravishments","arkose","kipper","statoblast","redfin","spinelessly","heehaw","unirradiated","clarinetists","postals","trug","sericulturist","whimpering","homogeneously","beveled","abscessing","canvases","frotteurs","canvaser","carboxyl","methoxychlor","true","isocracy","clarioned","fetologies","laughter","aphrodisiac","proverbed","yippee","dangerous","chickarees","loiterers","effectually","universalists","graptolite","philistine","tombaks","archetypes","acajou","vitalists","lamentedly","yipped","windowsills","ecophysiologies","iceboats","cogenerations","trashily","tribades","noninfective","uninteresting","renowns","skimped","sidearm","yearling","caliphs","gripers","turnhalls","deuteranomalous","abulias","online","bipyramids","misrenders","durian","diallist","twinged","neurosensory","uninsulated","horseraces","fashioner","footboys","kyat","gradational","mistreated","phreatophytic","interperceptual","pulpwood","inveiglers","pentagon","biofouling","stingrays","sympetalous","fashioned","glossolalist","soroches","antimoderns","birks","fibrefills","popsy","savvy","baptismally","kyak","benzanthracenes","kyar","pregnable","splattered","tricotines","tsarisms","twinges","disastrous","pickaroons","unfreedoms","coltishly","entoderms","waylayers","speechlessness","bowmen","oospore","birls","poppy","togged","cypruses","figurativeness","knocked","slewing","mutualists","pooches","interventionism","arbute","newsboys","sukiyaki","interventionist","birle","probands","subseizures","wonderfully","yippie","coappears","poppa","wading","ambitioned","admonition","intellectualization","hedgerows","coercively","scintillant","unambitious","astigmatics","confusional","tubbiest","equabilities","lagoon","ascensions","extolment","fagotings","fetologist","gutlessnesses","pooched","velocimeter","exocytoses","fastback","conforms","standardises","branchless","descriptions","terbic","rebills","terbia","standardised","graveyard","phyllite","adjusting","pudgier","chestnuts","treelike","acromia","veepee","viscously","abstractable","descendible","dilutions","constructor","probangs","reinvests","tombacs","hypostatize","microphotographs","effectivenesses","tenderometer","ambivert","prospectors","tetracyclines","ghoulish","descriers","kinkajou","knocker","microphotography","subcategory","acquests","fecundations","saintly","crasser","bontebok","bounders","paregoric","eyeballing","watchcry","tsar","jukebox","enterotoxins","pinelands","retables","forwarding","irrationalities","rodeo","syncopators","evert","foodlessness","overpowers","backpacker","naturism","tomback","treatabilities","naturist","every","bowman","glaive","staminate","backpacked","introfies","branchlets","taxpayer","radiosensitivities","sourwoods","germinations","emigre","introfied","cichlidae","exogenous","quintessential","jayvees","successionally","stichomythia","totalitarianisms","inconvertibility","during","stichomythic","telecast","ancone","mutualisms","scallop","sidebar","spirometric","rambouillet","lathery","maplike","translatability","nonprogressives","sharpness","leptospires","droughtinesses","metallophones","mirlitons","glaire","lathwork","peduncles","airdate","birch","lathers","capstone","exemplifications","peduncled","glairs","durion","breezinesses","daylighted","syllabicate","misentry","glairy","janizaries","wordiest","phosphorylations","biodynamic","equivocating","venire","wauchting","birds","diets","disinfesting","sheepherding","bonifaces","uncertainly","colistins","comeliness","rapscallions","inarticulately","buoying","event","forefeeling","evens","unmanneredly","dioptral","coupon","headstones","lintol","calicoes","jargonistic","metabolizes","downstream","quantongs","toggle","equivocation","metabolized","butterflyers","transistorising","bonnocks","shuttlecocking","alchemists","thymectomizing","manacling","pudgily","nonplus","storytellers","ruralites","progestin","artificer","diene","fondest","abridgement","vitalises","accelerandos","nonparasitic","artifices","interorgan","allure","nonpartisanships","regrafts","tighteners","amontillado","contacting","explosively","denotations","leptospiral","onrushes","surfperches","uncorrupt","arresting","hymnody","mainmast","oarlike","workstation","disheartened","caraganas","orceins","vitalised","speedings","deashing","lectureship","heretically","lungworms","coffeehouses","postbag","evadible","frequent","sequacities","tenderization","pneumonia","dartboard","pneumonic","switchers","exploiters","slowworm","constructed","bonsai","bloodbath","currently","ambassador","aspheric","chincherinchees","maraschinos","phreatophytes","dioptres","justifiability","nongravitational","archeologists","fernless","mantelshelf","redbug","redbud","gypsydom","stoniness","infirmaries","tsks","kymographies","morphogenesis","pickthank","roadbed","dottles","arcuate","enduro","fonding","lensman","envied","disharmonious","wizes","abridgements","cystoliths","habitualness","capablenesses","wizen","cultural","gigantesque","germinally","pentazocine","coprophilous","artful","heptagon","backlighting","endure","placement","disremembered","hairpins","overclassifies","cultured","slanderously","essence","flagellants","hyperinflations","transnatural","interlinearly","mesenteries","uncertainty","robbed","chivvy","multidrug","lordlier","overclassified","concessionaires","coinventor","unsheathed","envies","envier","dithering","cochairing","barbarity","holdup","jezails","beanbag","cyanohydrins","unsheathes","gamesman","vetch","libretto","unkindness","organogenesis","kyte","exobiology","libretti","solitudinarians","yokemate","salivators","collarets","jazzmen","robber","cleanhanded","aerospace","superscriptions","outsinning","couple","piggish","infrahumans","jazzman","paratactical","quatercentenary","oilcloth","skywriters","embonpoints","zombiisms","contraventions","reddishness","godroon","inhaling","jewfish","inditer","unscrupulousness","vivify","cystoscopic","angakok","interservice","reversions","formularizations","indites","barbarism","foozle","middling","cultures","donnybrooks","blinkards","pastoralists","indited","carnallites","differentiable","misdescribe","pentathletes","toreutic","sanctuaries","bistort","happiness","rostra","patchier","polyhistoric","finniest","bafflements","courageousness","plexiform","transportable","orthopsychiatry","potlatched","dogmatisms","passover","boyhoods","vacillators","chiasmic","sincipital","rhetorically","venins","potlatches","reoxidations","tumescences","cebid","lefter","quirkinesses","venine","buncoed","hussar","reconstitution","cabs","helmeted","enticingly","hypostyle","caca","buncoes","bursitis","connects","saunters","nonplay","slingshots","tapeworm","scorepads","potsy","unzipped","reconstituting","violoncellists","dustpans","nonchalant","breechclout","cystoscopes","sparkplugging","sacerdotally","hydroponics","pseudocholinesterases","resoaked","sleeves","updived","other","cads","corpuscular","weiners","sleeved","selectionists","venial","cadi","oblations","constipations","updives","reptilium","silkolines","nonsteroids","allosterically","phaseal","protagonist","mofette","shackles","spectrums","shackler","verdicts","detaching","proofer","inhabiting","pseudomonades","postcolleges","posteriorly","pigging","tsarists","unawarenesses","doomsdayer","binnacle","cade","proofed","xanthene","threadworm","sociopath","piggins","fertilities","motortrucks","prevaricators","selfhood","uraninites","ergodicity","alleging","pastoralisms","apoenzyme","impairers","scissor","spiffed","paraffining","rabidnesses","resounded","sisals","cage","infeoffs","passacaglias","burglary","commissions","khazens","punctuating","morphogeneses","dodderers","counterchanged","complement","courseware","soothingnesses","besoothes","clerkdoms","lawyerlike","waylaying","couped","bitsy","applicable","lintel","outdistance","shackled","sainted","transmissivity","caff","besoothed","tunesmith","factorage","cafe","sprattle","stoutnesses","linter","coupes","infract","smaragdine","ladyship","legrooms","incomprehensiblenesses","overmelting","pyrexic","pyrexia","bassinet","inflicters","overjoyed","bitty","potty","leones","simplex","spittles","endoderms","cudbears","apishness","tridimensional","jujutsus","backfitting","potto","simpler","witing","simples","underletting","weakness","sonographies","overingenious","caid","kerogen","bitts","dogmatists","remonstrators","switchable","isogenies","plagioclases","counterchanges","unicameral","redcap","organogeneses","bravoing","defacement","burglars","beetroot","cutwater","gamesmen","robbin","telestics","prescreenings","alkahestic","negligences","compilation","tenailles","garboard","punctuation","infight","cutins","cagy","uredospores","emblemed","allowably","farted","prosecution","privet","quenelles","cofounding","flummery","phyllotaxies","allowable","circumscissile","narrowcasting","hightails","naught","cake","broil","reedmen","nominalisms","lightning","broke","intravenouses","temporizing","quicksets","stuffs","enterochromaffin","cain","andantes","coexist","upthrusts","verandas","workless","duchess","antileprosy","choices","jawbonings","doorplate","choicer","microwaves","calx","slathering","splendrous","algebra","kokanees","calo","photoproducts","microwaved","galoshes","zincifying","flamming","aeons","protopod","came","introverts","masterfulness","oculist","overplayed","chives","regionals","allosauruses","describer","caky","zappiest","galoshed","hoddins","matting","geologists","holder","brome","nonmoney","describes","holden","call","linsey","calm","nationalizers","trapballs","calk","watchdog","calf","wappenschawings","unrelievedly","undeviatingly","mattins","blockbusting","psittacotic","biostatisticians","reportedly","mythicize","cant","exchequer","cans","bootlace","mother","reedman","coinvented","quaggiest","depredate","lungans","intransigently","transfect","cams","consecrate","camp","goggling","cane","foregathering","foveolets","archosaur","cuties","xanthein","irresistiblenesses","verandah","casuistry","attrite","caps","wildcatting","mesophyllous","beatifically","nankeens","syncytia","crying","relighted","proestrus","fractionations","breechcloth","assailing","sensing","polychromatophilic","ruminatively","hypochondriacal","polychromatophilia","outwearing","fructose","newborn","palynological","capo","phagocytotic","presignify","caph","aquatic","clostridial","aliterate","cape","smaragdite","casa","reattempting","russeting","usage","lomeins","votarists","cheapness","negotiable","chansonniers","cart","monitored","tapetal","deforce","cast","crosswind","deporting","haddest","vestibule","empalers","broad","cask","educt","squirmers","autochthonous","ricins","cash","case","rivalling","andromeda","dolmades","carb","dolefuller","rostrally","educe","noncomputer","anorthosites","reveled","ricing","peroxisome","ascarids","polydispersity","smelter","nonintercourses","carr","effigy","cars","beylic","carp","carn","carl","diazepams","patchily","refolding","cark","reveler","beylik","annunciation","progressional","card","care","annunciating","loitering","bailiffships","corelating","intravenously","enjoiners","preconceiving","redbaits","hypotensives","editorializers","grapline","reoperated","procephalic","decomposes","persnicketinesses","transfers","decomposer","desalinating","nonhomologous","burthen","caul","collisionally","brock","insubordinate","graplins","rearmaments","cate","lithographs","helpings","impartation","decomposed","plessor","cotransduce","heterologous","usurpation","intoxicant","lithography","reinspired","nonabrasive","nalorphines","isomorphs","facemask","infestation","wretchedest","cats","nontitle","misregistering","reoperates","decrials","tautonym","repolls","jubilance","masturbations","jinglers","neonatologists","vests","photometers","cavy","endued","fustians","smitten","jarsful","saluting","caws","chiasmal","chrysalids","northwards","emailing","morbific","microbrew","shrewdly","inwrap","mealiest","chiasmas","described","kneeling","rawhide","rogue","cave","shoebill","dracaena","rewires","churlishnesses","desalination","shatter","cocultivation","postdive","rewired","unraveled","varisized","bacteriostat","elbowing","immunofluorescences","gogglier","endozoic","crosswise","degaussing","endues","vesta","gangrel","anatomising","bumkin","bulliest","indefectible","reptilian","anorthositic","patching","increate","photodetectors","stuffy","cays","absorptions","consonants","strakes","matrices","prosecuting","coplanarity","indefectibly","bipinnate","credulousness","barbarize","paleographical","prepotently","radiotelemetry","orthogonalities","flagitiousnesses","fruitfuller","coniine","increase","cocultivating","disproving","squinnying","fervencies","treasurable","backwraps","dibbukim","epi"]

Any Help/hint would be appreciated