javascript – Page 7180 – Blancer.com Tutorials and projects

In Web Cache API, how to invalid opened cache instances after removing the cache by caches.delete

After deleting a Cache from caches by caches.delete, all opened instances of the cache are still valid and usable.
Is there a way to invalid them immediately, or to inform the scripts (same origin, but probably not same page) holding the instances that this cache is already removed ?

Uncaught (in promise) TypeError: Cannot use ‘in’ operator to search for ‘token’

i have a nuxt application with which uses nuxt-auth everything works fine on local host but when deploy on live server i keep getting

Uncaught (in promise) TypeError: Cannot use 'in' operator to search for 'token' in

when i click the sign up button i get a token in my console

i cant seem to get the root of the problem everything works fine on my local machine

this is my login component:

    <script>
export default {
  middleware: "auth",
  auth: "guest",
  layout: "none",
  data() {
    return {
      email: "",
      password: ""
    };
  },
  methods: {
    async onLogin() {
      try {
        this.$auth.loginWith("local", {
          data: {
            email: this.email,
            password: this.password
          }
        });
        this.$router.push("/");
      } catch (err) {
        console.log(err);
      }
    }
  }
};
</script>


<script>
export default {
  middleware: "auth",
  auth: "guest",
  layout: "none",
  data() {
    return {
      name: "",
      email: "",
      password: ""
    };
  },
     methods: {
    async onSignup() {
      try {
        let data = {
          name: this.name,
          email: this.email,
          password: this.password
        };
        let response = await this.$axios.$post("api/auth/signup", data);
        console.log(response);
        if (response.success) {
          this.$auth.loginWith("local", {
            data: {
              email: this.email,
              password: this.password
            }
          });
          this.$router.push("/");
        }
      } catch (err) {
        console.log(err);
      }
    }
  }
};

in my nuxt.config.js i have :

    const URL =
'https://localhost:5000'

export default {
  mode: 'spa',
  // Global page headers: https://go.nuxtjs.dev/config-head
  head: {
    title: 'client',
    script: [{ src: 'https://js.stripe.com/v3' }],
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: '' },
      { name: 'format-detection', content: 'telephone=no' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
      { rel: 'stylesheet', href: '/css/font-awesome/css/all.css' },
      { rel: 'stylesheet', href: '/css/default.css' }
    ]
  },

  // Global CSS: https://go.nuxtjs.dev/config-css
  css: [],

  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins

  plugins: [{ src: '~/plugins/localStorage.js', mode: 'client' }],
  // Auto import components: https://go.nuxtjs.dev/config-components
  components: true,

  // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
  buildModules: ['nuxt-compress'],

  // Modules: https://go.nuxtjs.dev/config-modules
  modules: [
    // https://go.nuxtjs.dev/bootstrap
    'bootstrap-vue/nuxt',
    // https://go.nuxtjs.dev/axios
    '@nuxtjs/axios',
    // https://go.nuxtjs.dev/pwa
    '@nuxtjs/pwa',

    '@nuxtjs/auth'
  ],

  // Axios module configuration: https://go.nuxtjs.dev/config-axios
  axios: {
    proxy: true,
    baseURL: "https://localhost:5000",
    browserBaseURL: "https://localhost:5000",

  },
  proxy: {
    '/api': URL
  },

  // PWA module configuration: https://go.nuxtjs.dev/pwa
  pwa: {
    manifest: {
      lang: 'en'
    }
  },
  // Build Configuration: https://go.nuxtjs.dev/config-build

  build: {
    babel: {
      compact: true
    },
    performance: {
      hints: false,
      maxEntrypointSize: 512000,
      maxAssetSize: 512000
  }
  },
  

  auth: {
    strategies: {
      local: {
        token: {
          property: 'token',
          global: true,
          // required: true,
          // type: 'Bearer'
        },
        endpoints: {
          login: { url: '/api/auth/login', method: 'post',  propertyName: "token" },
         // logout: { url: '/api/auth/logout', method: 'post' },
          user: { url: '/api/auth/user', method: 'get' },
         
          logout: true
        },
        tokenRequired: true,
        tokenType: 'Token',
        tokenName: 'Authorization'
      }
    }
  }
}

here is an API that changes after some time I want previous data to be stored in an array and latest data too I dont how to figure this out?

I want data state to be an array which adds up the data when the data in the API changes
such that it stores previous data as well as new data so I can map them and display them

App.js

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

const App = () => {
  const [data, setData] = useState([]);
  const [entireData, setEntireDate] = useState([]);
  

  let arr = [];
  const fetchAPI = async () => {
    const API = await fetch("https://randomuser.me/api");
    const json = await API.json();
    let results = json.results;
    setData(results);
  };

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

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

  return (
    <>
      <div className="container">
        <p>
          {data.map((val, idx, arr) => {
            return val.login.username;
          })}
        </p>
        <img
          src={data.map((val, idx, arr) => {
            return val.picture.large;
          })}
          alt="getPicFromJson"
        />
      </div>
    </>
  );
};

export default App;

index.js

import { StrictMode } from "react";
import ReactDOM from "react-dom";

import App from "./App";

const rootElement = document.getElementById("root");
ReactDOM.render(
  <StrictMode>
    <App />
  </StrictMode>,
  rootElement
);

Express js fix user authentication collision

I am making an app from express js, it uses firebase admin for authentication and I am also using custom jwt for user recognition, and mongodb for database.

I dont know the right term but usually happens rarely for eg, User A is editing his account, but for some reason User B’s account gets edited.

I have made user authentication middleware.

import {
  Request,
  Response,
  NextFunction
} from "express";
import JSONRESPONSE from "../utils/JSONReponse";
import jwt from "jsonwebtoken"
import {
  User
} from "../models/User";

export async function AuthMiddleware(req: Request, res: Response, next: NextFunction) {
  const JSONResponse = new JSONRESPONSE(res);
  try {
    const session = req.cookies.session;
    if (!session) return JSONResponse.notAuthorized();
    const decoded = < any > jwt.decode(session);
    const uid = decoded.user_id
    if (!uid) return JSONResponse.notAuthorized();
    const user = await User.findOne({
      uid
    })
    if (!user) return JSONResponse.notAuthorized();
    req.app.locals.currentUser = user;
    req.app.locals.uid = uid;
    next()
  } catch (err) {
    console.log(err);
    JSONResponse.notAuthorized();
  }

}

Here is my main routes:

app.use("/api/auth", AuthRoutes)
app.use("/api/user", AuthMiddleware, UserRoutes)
app.use("/api/date", AuthMiddleware, DateRoutes)
app.use("/api/chat", AuthMiddleware, ChatRoutes)

How do I fix this issue, I am not sure what is causing this rare issue.

837P mirth – I am trying to transform patient info when subscriber is not the patient along with some claims when subscriber is the patient

I am trying to transform patient info when subscriber is not the patient along with some claims when subscriber is the patient. I came across another challenge when subscriber is not the patient or subscriber has dependent. So far I tried below code and few other variations. This code gives me all the subscribers for all claims and patient with qualifier QC. I do not need subscriber name TFirst6 when claim has dependent “QC_TFirst6”. Sample message attached. Any advice is greatly appreciated. I tried deleting subscriber when subscriber is not the patient
Processed sample file
[“TFirst1″,”TFirst2″,”TFirst3″,”TFirst4″,”TFirst5″,”TFirst6″,”QC_TFirst6″,”TFirst7″,”TFirst8″,”TFirst9″,”TFirst10″,”TFirst11″,”TFirst12″,”TFirst13″,”TFirst14″,”TFirst15”]

Expected results

[“TFirst1″,”TFirst2″,”TFirst3″,”TFirst4″,”TFirst5″,”QC_TFirst6″,”TFirst7″,”TFirst8″,”TFirst9″,”TFirst10″,”TFirst11″,”TFirst12″,”TFirst13″,”TFirst14″,”TFirst15”]

var PatientFirstName = new Array();
var counter = 0;

for(var i = 0; i < msg['SBR'].length(); i++) {

        
        
                for each(nm1 in getSegmentsAfter(msg, msg['SBR'][i], 'NM1', true)) {
                    //msgNM2 = (nm1['NM1.01']['NM1.01.1'].toString());

                            if (nm1['NM1.01']['NM1.01.1'].toString() == 'QC') {
                                PatientFirstName[counter] = (nm1['NM1.04']['NM1.04.1'].toString());
                                counter += 1;
                            channelMap.put("PatientFirstName",PatientFirstName);}
                                
                            else if (nm1['NM1.01']['NM1.01.1'].toString() == 'IL') {
                                
                                
                                PatientFirstName[counter] = (nm1['NM1.04']['NM1.04.1'].toString());
                                counter += 1;
                            channelMap.put("PatientFirstName",PatientFirstName);
                            logger.info("PatientFirstName is=: " + PatientFirstName); 
                }}}

How to sum all Object using index with an arrays

how can I search duplicate data using index key object here is my object :

 const obj = {
        product1: { name: 'paper', price: 4 },
        product2: { name: 'ball', price: 2 },
        product3: { name: 'ice-cream', price: 9 }
        product1: { name: 'paper', price: 2 }
    }

and I have an arrays

const arr = ["product1", "product2" ]

I want to get only product1 and product2 data then sum price together my output shold look like this 4+2+2 = 8

Here is what I try to do

const newArr = _.map(arr, (name:string) => {
    return obj[name]
})

then I sum 

    const sum = newArr.reduce((data, obj)=> data + obj.price, 0);

the problem is in _.map when I map data if I return like this it will get only 1 product1 I want to get all of product name in arr

Hide the content based on Children class

I need one help with the code, I have two HTML div blocks with the same class name and there is one extra h2 tag with different class present in one div block. I want to hide if h2 class name is not present in that div and show if the h2 class name is present. Please find the below mentioned code that I have created.

— First block Div —

<div class="course-content">
    <h2 class="accesshide"></h2>
    <ul class="topics">
        <li class="data-list">Content not to Display</li>
    </ul>
    <div class="row">
        <p>Content to Display</p>
    </div>
</div>

— Second block Div —

<div class="course-content">
    <ul class="topics">
        <li class="data-list">Content not to Display</li>
    </ul>
    <div class="single-section">
        <p>Content to Display</p>
    </div>
</div>

— jQuery Code —

$(document).ready(function () {
    if ($(".course-content").find(".accesshide")) {
        $(".course-content").find(".topics").show();
    } else if ($(".course-content").find(".single-section")) {
        $(".course-content").find(".topics").hide();
    } 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="course-content">
        <h2 class="accesshide"></h2>
        <ul class="topics">
            <li class="data-list">Content not to Display</li>
        </ul>
        <div class="row">
            <p>Content to Display</p>
        </div>
    </div>
    
    <div class="course-content">
        <ul class="topics">
            <li class="data-list">Content not to Display</li>
        </ul>
        <div class="single-section">
            <p>Content to Display</p>
        </div>
    </div>

How can primitive data types have access to prototype?

How primitive data types (strings, numbers etc.) have access to methods like .toString(). We can even access to their proto’s by typing variable.proto but they are not object.

Unexpected EOF and a function looping endlessly?

I am coding a site with replit.com and have come across a problem that I don’t understand, as I am very new to using JavaScript. I get an unexpected EOF error and another error saying “maximum call stack size exceeded”:

SyntaxError: Unexpected EOF
RangeError: Maximum call stack size exceeded.
onload@/:9:7
onload@/:9:7
onload@/:9:7
onload@/:9:7
onload@/:9:7
onload@/:9:7
onload@/:9:7
onload@/:9:7
onload@/:9:7
onload@/:9:7
onload@/:9:7
onload@/:9:7
onload@/:9:7
onload@/:9:7
onload@/:9:7
onload@/:9:7
onload@/:9:7
onload@/:9:7
onload@/:9:7
onload@/:9:7
onload@/:9:7
onload@/:9:7
onload@/:9:7
onload@/:9:7
onload@/:9:7
onload@/:9:7
onload@/:9:7
onload@/:9:7
onload@/:9:7
onload@/:9:7
onload@/:9:7
onload@/:9:7
onload@/:9:7
onload@/:9:7
onload@/:9:7
onload@/:9:7
onload@/:9:7
onload@/:9:7
onload@/:9:7
onload@/:9:7
onload@/:9:7
onload@/:9:7
onload@/:9:7
onload@/:9:7
onload@/:9:7
onload@/:9:7
onload@/:9:7
onload@/:9:7
onload@/:9:7
onload@/:9:7
onload@/:9:7
onload@/:9:7
onload@/:9:7
onload@/:9:7
onload@/:9:7
onload@/:9:7
onload@/:9:7
onload@/:9:7
onload@/:9:7
onload@/:9:7
onload@/:9:7
onload@/:9:7
onload@/:9:7
onload@/:9:7
onload@/:9:7
onload@/:9:7
onload@/:9:7
onload@/:9:7
onload@/:9:7
onload@/:9:7
onload@/:9:7
onload@/:9:7
onload@/:9:7
onload@/:9:7
onload@/:9:7
onload@/:9:7
onload@/:9:7
onload@/:9:7
onload@/:9:7
onload@/:9:7
onload@/:9:7
onload@/:9:7
onload@/:9:7
onload@/:9:7
onload@/:9:7
onload@/:9:7
onload@/:9:7
onload@/:9:7
onload@/:9:7
onload@/:9:7
onload@/:9:7
onload@/:9:7
onload@/:9:7
onload@/:9:7
onload@/:9:7
onload@/:9:7
onload@/:9:7
onload@/:9:7
onload@/:9:7
onload@/:9:7
    at /:9:7

This is the JavaScript that causes the problem, with the onload() function being the one that seems to loop when used with onload on a body element in HTML:

function onload() {
  mobile = 0;
  laptopPC = 0;
  console = 0;
}


function mobileScreenshotCategories() {
  if (mobile == 0) {
    document.getElementById("FalloutShelter").innerHTML = "Fallout Shelter";
    mobile = 1;
  } else if (mobile == 1) {
    document.getElementById("FalloutShelter").innerHTML = "";
    mobile = 0;
  };
}


function laptopPCScreenshotCategories() {
  if (laptopPC == 0) {
    document.getElementById("GenshinImpact").innerHTML = "Genshin Impact";
    laptopPC = 1;
  } else if (laptopPC == 1) {
    document.getElementById("GenshinImpact").innerHTML = "";
    laptopPC = 0;
  };
}


function consoleScreenshotCategories() {
  if (console == 0) {
    document.getElementById("Borderlands3").innerHTML = "Borderlands 3;
    console = 1;
  } else if (console == 1) {
    document.getElementById("Borderlands3").innerHTML = "";
    console = 0;
  };
}

The problem began after editing the consoleScreenshotCategories() function.

File download failed in ReactJS

I am trying to download file from src folder in my react app, but file download is failing

file import

import test from "../../test.json";

download

  const link = document.createElement("a");
  link.href = test;
  link.setAttribute("download", `test.json`);
  document.body.appendChild(link);
  link.click();
  link.parentNode.removeChild(link);

File download failed

My JavaScript won’t work before i resize my browser window, and almost all my CSS is working, except for a few lines (idk what’s the problem here)

I am trying to make the second page of my Website, but some of the CSS and JS seem to not work.
I have 4 files, and 4 folders (all located in 1 same folder). The first folder is view, which contains index.html (the main page of the website), and links.html (the file that isn’t working). Then there is the js folder which contains script.js. The third folder is css and inside of it is style.css. The final folder is asset which has image assets for my Website.

Here is the content of index.html :

<!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>Linkeld</title>
    <!-- CSS Links -->
    <link rel="stylesheet" href="../css/style.css">
    <!-- JS Links -->
    <script src="../js/script.js"></script>
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
</head>

<body>
    <div id="loader">
        <span>
            <i class="fas fa-spinner fa-spin"></i>
        </span>
    </div>
    <div id="topnav" class="transparent">
        <div class="wrapper main">
            <div class="wrapper left" id="navLogo">
                <img src="../asset/9984-confusion.png" alt="logo">
            </div>
            <div class="wrapper right" id="navLinks">
                <a href="#" class="active">Home</a>
                <a href="links.html">Links</a>
                <a href="account.html">Account</a>
                <a href="about.html">About</a>
            </div>
        </div>
    </div>
    <div id="head">
        <div class="wrapper">
            <img src="../asset/9984-confusion.png" alt="logo">
            <h1>Linkeld</h1>
            <h2>With over 1.000.000 links worldwide</h2>
            <div id="signup">
                <a href="" class="button">Sign-Up Now!</a>
            </div>
        </div>
    </div>
    <div id="main">
        <div id="aboutWebsite">
            <div class="wrapper">
                <div class="card">
                    <h1><i class="fas fa-share-alt"></i> Share</h1>
                    <p>Share links to people across the globe to discover, the limitation is only your imagination</p>
                    <div class="image" id="image1">
                        <img src="../asset/brooke-cagle-g1Kr4Ozfoac-unsplash-removebg-preview.png" alt="image1">
                    </div>
                </div>
                <div class="card">
                    <h1><i class="fas fa-search"></i> Discover</h1>
                    <p>Discover new websites from other people via links, you can visit all of the internet's website!
                    </p>
                    <div class="image" id="image2">
                        <img src="../asset/grzegorz-walczak-yoIIPcrWhjI-unsplash-removebg-preview.png" alt="image2">
                    </div>
                </div>
                <div class="card">
                    <h1><i class="fas fa-times-circle"></i> No Restrictions</h1>
                    <p>No restricted links or banned sites, share whatever you like</p>
                    <div class="image" id="image3">
                        <img src="../asset/cdd20-vR6bNYTVlpo-unsplash-removebg-preview.png" alt="image3">
                    </div>
                </div>
            </div>
        </div>
        <div id="whySignup">
            <div class="wrapper">
                <div class="section">
                    <h1><i class="fas fa-question-circle"></i> Why Sign-Up?</h1>
                    <p>Firstly, you'll be able to share links with others! Not just click them.</p>
                    <p>Secondly, you can like and save links to your account, so you can view at them later.</p>
                    <p>Thirdly, you'll be able to customize your Username! No more plain old nicknames.</p>
                </div>
                <div class="section">
                    <img src="../asset/sincerely-media-4dSXcNTyXaI-unsplash.jpg" alt="image4">
                </div>
            </div>
        </div>
        <div id="phishing">
            <div class="wrapper">
                <div class="section">
                    <h1><i class="fas fa-question-circle"></i> Would i fall to phishing?</h1>
                    <p>Well technically, yes, you will at some point fall into a phishing scam.</p>
                    <p>But, you can check the domain first, before clicking the link.</p>
                    <p>Check for any typos, or weird characters. A site that has a suspicious looking domain may be a
                        phishing website so be careful.</p>
                </div>
                <div class="section">
                    <img src="../asset/sincerely-media-4dSXcNTyXaI-unsplash.jpg" alt="image4">
                </div>
            </div>
        </div>
        <div id="nfsw">
            <div class="wrapper">
                <div class="section">
                    <h1><i class="fas fa-question-circle"></i> Can I post NFSW related stuff?</h1>
                    <p>There is no limitation to what website you want to share here.</p>
                    <p>So yes you absolutely can post NFSW related content here and not get banned.</p>
                </div>
                <div class="section">
                    <img src="../asset/sincerely-media-4dSXcNTyXaI-unsplash.jpg" alt="image4">
                </div>
            </div>
        </div>
        <div id="signupCall">
            <div class="wrapper">
                <div class="section">
                    <h1>What are you waiting for?</h1>
                </div>
                <div class="section">
                    <div>
                        <a class="button" href="">Sign-Up Now!</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="foot">
        <div class="wrapper">
            <div class="section">
                <h2>Other resources</h2>
                <a href="">Home</a>
                <a href="">Copyright</a>
                <a href="">Terms</a>
                <a href="">Policy</a>
                <a href="">Sources</a>
            </div>
            <div class="section">
                <h2>About us</h2>
                <a href="">Team</a>
                <a href="">About</a>
                <a href="">Site Stats</a>
            </div>
        </div>
    </div>
</body>

</html>

And here is links.html :

<!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>Linkeld</title>
    <!-- CSS Links -->
    <link rel="stylesheet" href="../css/style.css">
    <!-- JS Links -->
    <script src="../js/script.js"></script>
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
</head>

<body>
    <div id="loader">
        <span>
            <i class="fas fa-spinner fa-spin"></i>
        </span>
    </div>
    <div id="topnav" class="transparent">
        <div class="wrapper main">
            <div class="wrapper left" id="navLogo">
                <img src="../asset/9984-confusion.png" alt="logo">
            </div>
            <div class="wrapper right" id="navLinks">
                <a href="index.html" class="active">Home</a>
                <a href="#">Links</a>
                <a href="account.html">Account</a>
                <a href="about.html">About</a>
            </div>
        </div>
    </div>
    <div id="head">
        <div class="wrapper">
            <img src="../asset/9984-confusion.png" alt="logo">
            <h1>Links</h1>
            <h2 style="margin-bottom: 100px;">This is where you'll find links to Websites!</h2>
        </div>
    </div>
    <div id="main">
        <div id="linksList">
            <div class="wrapper">
                <div class="card">
                    <h3>By [user]</h3>
                    <a href="[user-input-link]">[user input]</a>
                    <div class="description">
                        <p>[user input]</p>
                    </div>
                </div>
                <div class="card">
                    <h3>By [user]</h3>
                    <a href="[user-input-link]">[user input]</a>
                    <div class="description">
                        <p>[user input]</p>
                    </div>
                </div>
                <div class="card">
                    <h3>By [user]</h3>
                    <a href="[user-input-link]">[user input]</a>
                    <div class="description">
                        <p>[user input]</p>
                    </div>
                </div>
                <div class="card">
                    <h3>By [user]</h3>
                    <a href="[user-input-link]">[user input]</a>
                    <div class="description">
                        <p>[user input]</p>
                    </div>
                </div>
                <div class="card">
                    <h3>By [user]</h3>
                    <a href="[user-input-link]">[user input]</a>
                    <div class="description">
                        <p>[user input]</p>
                    </div>
                </div>
                <div class="card">
                    <h3>By [user]</h3>
                    <a href="[user-input-link]">[user input]</a>
                    <div class="description">
                        <p>[user input]</p>
                    </div>
                </div>
                <div class="card">
                    <h3>By [user]</h3>
                    <a href="[user-input-link]">[user input]</a>
                    <div class="description">
                        <p>[user input]</p>
                    </div>
                </div>
                <div class="card">
                    <h3>By [user]</h3>
                    <a href="[user-input-link]">[user input]</a>
                    <div class="description">
                        <p>[user input]</p>
                    </div>
                </div>
                <div class="card">
                    <h3>By [user]</h3>
                    <a href="[user-input-link]">[user input]</a>
                    <div class="description">
                        <p>[user input]</p>
                    </div>
                </div>
                <div class="card">
                    <h3>By [user]</h3>
                    <a href="[user-input-link]">[user input]</a>
                    <div class="description">
                        <p>[user input]</p>
                    </div>
                </div>
                <div class="card">
                    <h3>By [user]</h3>
                    <a href="[user-input-link]">[user input]</a>
                    <div class="description">
                        <p>[user input]</p>
                    </div>
                </div>
                <div class="card">
                    <h3>By [user]</h3>
                    <a href="[user-input-link]">[user input]</a>
                    <div class="description">
                        <p>[user input]</p>
                    </div>
                </div>
                <div class="card">
                    <h3>By [user]</h3>
                    <a href="[user-input-link]">[user input]</a>
                    <div class="description">
                        <p>[user input]</p>
                    </div>
                </div>
                <div class="card">
                    <h3>By [user]</h3>
                    <a href="[user-input-link]">[user input]</a>
                    <div class="description">
                        <p>[user input]</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="foot">
        <div class="wrapper">
            <div class="section">
                <h2>Other resources</h2>
                <a href="">Home</a>
                <a href="">Copyright</a>
                <a href="">Terms</a>
                <a href="">Policy</a>
                <a href="">Sources</a>
            </div>
            <div class="section">
                <h2>About us</h2>
                <a href="">Team</a>
                <a href="">About</a>
                <a href="">Site Stats</a>
            </div>
        </div>
    </div>
</body>

</html>

Now for the CSS (style.css) :

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    font-family: 'Roboto', sans-serif;
}

:root {
    /* CSS HEX */
    --lime-green: #1ec90eff;
    --metallic-sunburst: #9b7e46ff;
    --mellow-apricot: #f4b266ff;
    --dark-liver-horses: #544343ff;
}

html {
    scroll-behavior: smooth;
}

a {
    color: var(--lime-green);
    text-decoration: none;
    transition: text-decoration 0.3s ease-in-out;
}

a:hover {
    text-decoration: underline;
}

a:visited {
    color: var(--lime-green);
}

#topnav {
    position: fixed;
    width: 100%;
    z-index: 99;
    background: white;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px,
        rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
    transition: all 0.2s ease-in-out;
}

#topnav.transparent {
    background: transparent;
    box-shadow: none;
}

#topnav .wrapper.main {
    display: flex;
    justify-content: stretch;
}

#topnav .wrapper {
    display: flex;
}

#topnav .wrapper#navLogo {
    width: 70%;
}

#topnav .wrapper#navLogo img {
    padding: 10px;
    width: 60px;
    margin-left: 40px;
}

#topnav .wrapper#navLinks {
    flex: 1;
    justify-content: space-evenly;
}

#topnav.transparent .wrapper#navLinks a {
    padding: 20px;
    text-decoration: none;
    color: white;
    text-align: center;
    transition: all 0.2s ease-in-out;
}

#topnav .wrapper#navLinks a {
    color: black;
    padding: 20px;
    text-decoration: none;
    text-align: center;
    transition: all 0.2s ease-in-out;
}

#head {
    background: url("../asset/sincerely-media-4dSXcNTyXaI-unsplash.jpg");
    margin-bottom: 30px;
}

#head .wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

#head .wrapper h1,
#head .wrapper h2 {
    color: white;
}

#head .wrapper img {
    width: 40px;
    margin: 100px 0 20px 0;
}

#head .wrapper h1 {
    font-size: 90px;
}

#head .wrapper h2 {
    font-size: 18px;
}

#head #signup {
    margin: 80px 0 100px 0;
}

#head #signup a {
    color: white;
    padding: 20px;
    background: var(--mellow-apricot);
    border-radius: 10px;
    transition: all 0.3s ease-in-out;
    display: block;
}

#head #signup a:hover {
    text-decoration: none;
    transform: scale(1.1);
}

#aboutWebsite .wrapper {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

#aboutWebsite .wrapper .card {
    width: 400px;
    margin: 20px;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px,
        rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
    padding: 80px 60px;
}

#aboutWebsite .wrapper .card h1 {
    font-size: 40px;
    margin-bottom: 20px;
    font-weight: 300;
}

#aboutWebsite .wrapper .card p {
    font-size: 18px;
}

#aboutWebsite .wrapper .card .image {
    display: flex;
    justify-content: center;
}

#aboutWebsite .wrapper .card .image img {
    width: 300px;
}

#aboutWebsite .wrapper .card .image#image1,
#aboutWebsite .wrapper .card .image#image2 {
    margin-top: 130px;
}

#foot {
    margin-top: 50px;
    background: rgb(235, 235, 235);
}

#foot .wrapper {
    display: flex;
}

#foot .wrapper .section {
    flex: 1;
    padding: 50px 30px;
}

#foot .wrapper .section a {
    display: block;
    color: black;
    margin-bottom: 30px;
    width: max-content;
}

#foot .wrapper .section h2 {
    margin-bottom: 30px;
}

#loader {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: white;
    z-index: 999;
}

#loader.loaded {
    display: none;
}

#loader span {
    font-size: 100px;
}

a.button {
    color: white;
    padding: 20px;
    background: var(--mellow-apricot);
    border-radius: 10px;
    transition: all 0.3s ease-in-out;
    display: block;
}

a.button:hover {
    text-decoration: none;
    transform: scale(1.1);
}

#whySignup {
    width: 65%;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px,
        rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
    margin: 50px auto;
    border-radius: 20px;
}

#whySignup .wrapper {
    display: flex;
    justify-content: start;
    transition: all 0.5s ease-in-out;
}

#whySignup .wrapper .section:first-child {
    padding: 50px 20px;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}

#whySignup .wrapper .section:first-child h1 {
    font-weight: 300;
    margin-bottom: 40px;
}

#whySignup .wrapper .section:first-child p {
    font-size: 18px;
    margin-bottom: 10px;
}

#whySignup .wrapper .section img {
    width: 450px;
    height: 500px;
}

#phishing {
    width: 65%;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px,
        rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
    margin: 50px auto;
    border-radius: 20px;
}

#phishing .wrapper {
    display: flex;
    justify-content: start;
    flex-direction: row-reverse;
    transition: all 0.5s ease-in-out;
}

#phishing .wrapper .section:first-child {
    padding: 50px 20px;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}

#phishing .wrapper .section:first-child h1 {
    font-weight: 300;
    margin-bottom: 40px;
}

#phishing .wrapper .section:first-child p {
    font-size: 18px;
    margin-bottom: 10px;
}

#phishing .wrapper .section img {
    width: 450px;
    height: 500px;
}

#nfsw {
    width: 65%;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px,
        rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
    margin: 50px auto;
    border-radius: 20px;
}

#nfsw .wrapper {
    display: flex;
    justify-content: start;
    transition: all 0.5s ease-in-out;
}

#nfsw .wrapper .section:first-child {
    padding: 50px 20px;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}

#nfsw .wrapper .section:first-child h1 {
    font-weight: 300;
    margin-bottom: 40px;
}

#nfsw .wrapper .section:first-child p {
    font-size: 18px;
    margin-bottom: 10px;
}

#nfsw .wrapper .section img {
    width: 450px;
    height: 500px;
}

#signupCall {
    width: 65%;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px,
        rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
    margin: 50px auto;
    border-radius: 20px;
}

#signupCall .wrapper {
    display: flex;
    flex-direction: column;
    transition: all 0.5s ease-in-out;
}

#signupCall .wrapper .section:first-child {
    padding: 50px 20px;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    background: transparent;
}

#signupCall .wrapper .section:first-child h1 {
    font-weight: 300;
    margin-bottom: 40px;
    font-size: 50px;
}

#signupCall .wrapper .section:first-child h2 {
    font-size: 20px;
    margin-bottom: 10px;
}

#signupCall .wrapper .section {
    background: url("../asset/sincerely-media-4dSXcNTyXaI-unsplash.jpg");
    background-position: -45%;
    padding: 50px 20px;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    height: 300px;
}

#linksList {
    padding: 50px;
}

#linksList .wrapper {
    display: flex;
}

#linksList .wrapper .cards {
    padding: 30px;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px,
        rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
    width: 120px;
    margin: 30px;
    background: cyan;
}

Here’s script.js :

window.addEventListener("load", () => {
    const loader = document.getElementById("loader");
    loader.classList.add("loaded");
})

window.addEventListener("scroll", () => {
    let scrollY = window.scrollY;
    let posY = 450;
    let topnav = document.getElementById("topnav");
    if (scrollY < posY) {
        topnav.classList.add("transparent");
    } else {
        topnav.classList.remove("transparent");
    }
});

Now the problem is that #linksList doesn’t seem to change even though I’ve written the CSS in style.css. What’s wrong about it? I can’t seem to find anything that could’ve conflicted with the CSS. I even gave the .card in #linksList a cyan background to test if it works, but to no result.

Then there’s the #topnav, the JS won’t add the class .transparent when the user scrolled to the #topnav in links.html until the browser’s screen was resized (I’m using Chrome). I have no actual clue about what is going on here. Maybe it’s just my browser acting weird or is it because I made some kind of mistake in the scripting?

(sorry for the long question)

OLX clone navbar

I am making an OLX clone in which I am facing a problem with regards to country dropdown and search bar. Both their placeholders are not in the same line.

Can anyone help me out in this?

        Here what I find is that country name placeholder and search bar placeholder are not aligned in the same line. Country name is placed upwards and search placeholder downwards. Is there a simple way by which I can overcome this problem?

Why does Sunday = 0 in JavaScript and not 6? [closed]

I grew up in Europe and have been used to the week starting on Monday, so this is kind of weird to me. Why does JavaScript make it start on Sunday? Is it because the creator was American? But even so, a big part of the world starts the week on Monday, and that’s when the work-week usually starts anyways, so wouldn’t it make more sense to make Monday = 0 and -1 to all the other days?

Typescript: Typing Function Return Type based on Parameters

I was wondering if there is way to type the return of a function based on the input given to it. Here is an example of what I am thinking:

function toEnum(...strings: string[]) {
  const enumObject = {};

  strings.forEach((str) => {
    enumObject[str.toUpperCase()] = str;
  });

  return enumObject;
}

const myEnum = toEnum('one', 'two', 'three')

Is there a way to type this function so that we know that myEnum looks like:

{
  ONE: 'one',
  TWO: 'two',
  THREE: 'three'
}

React component not rerendering even if updating state

Im currently using wavesurfer.js to play an audio file. I have created a useRef for the wavesurfer. On first load, I create an instance of WaveSurfer and assign it to the wavesurferRef. I am currently running this code as well

  const [timeRemaining, setTimeRemaining] = useState('')

  useEffect(() => {
    if (playing && wavesurfer.current) {
      wavesurfer.current.on('audioprocess', function () {
        if (wavesurfer.current?.isPlaying()) {
          const totalTime = wavesurfer.current.getDuration()
          const currentTime = wavesurfer.current.getCurrentTime()
          setTimeRemaining(`-${Math.round(totalTime - currentTime)}`)
        }
      })
    }
  }, [playing])

From my understanding of useState. The component should rerender everytime state changes so assume that since setTimeRemaining is called for every millisecond then the Component should rerender but when I check the logs. The useEffects that loads on component mount is not rerunning.

Why isnt my component rerendering?

Ideally, instead of useState, I should use useRef for the timeRemaining value but when I use useRef, the div that displays the value of timeRemaining doesnt show the new value of timeRemaining ref.

Here is a stackblitz example containing an example for both the usestate and useref approach

https://stackblitz.com/edit/react-ts-kcrfuy?file=index.tsx