Category: javascript

I am attempting to use the data from 1 endpoint to call another endpoint that is filtered by id. I am planning on fetching both calls using getServerSideProps and passing the data to another component.

The first call will return an array of categories which then I am attempting to loop and fetch articles that is filtered by id.

I am able to successfully get back the array of categories but when I am attempting to loop and fetch articles I am getting a value of undefined How can I achieve this?

Here is an example of my index.js

import ArticleList from "../../components/ArticleList";


const Index = ({ categories, articles }) => {


  return (
    <>
      <ArticleList categories={categories} articles={articles} />
    </>
  )
}

export async function getServerSideProps (context) {
   // console.log('index - getserversideprops() is called')
   try {
     let articles = []
    let response = await fetch('https://example.api/categories')
    const categories = await response.json()

    for (let i = 0; i < categories.results.length; i++) {
      response = await fetch (`https://example.api/articleid/` + categories.results[i].id)
      articles = await response.json()
    }

    console.log(articles,'33')


    if (!categories ) {
        return {
            notFound: true,
        }
    }

    return { 
      props: { 
        categories: categories,
        articles: artices
      }
    }
  } catch (error) {
      console.error('runtime error: ', error)
  }
}

export default Index

Here is an example of my console.log(categories.results) array:

[ {
"id": 2,
"name": "Online"
},
{
"id": 11,
"name": "Retail"
},
{
"id": 14,
"name": "E-Commerce"
}]

I am expecting articles to be 3 separate arrays of data. Is this something that is possible if I am passing the data to another component? If not what will be a better way of handling this?

I have a webpack.config.js file here. I’m trying to modify or overwrite the writeOutput method of the webpack-bundle-tracker app (saved as BundleTracker) so that when the webpack-stats-prod.json file is created it creates this (‘no path’):

{
  "status": "done",
  "assets": {
    "78d4aa4961e00276aa1fe5487f7fcae4.eot": {
      "name": "78d4aa4961e00276aa1fe5487f7fcae4.eot",
      "path": "no path"
    },

instead of this (absolute path):

{
  "status": "done",
  "assets": {
    "78d4aa4961e00276aa1fe5487f7fcae4.eot": {
      "name": "78d4aa4961e00276aa1fe5487f7fcae4.eot",
      "path": "/Users/name/static/webpack/bundles/prod/78d4aa4961e00276aa1fe5487f7fcae4.eot"
    },

I’m trying to do this by copying the webpack-bundle-tracker app into a new variable (NoPathBundleTracker) and then overwriting the writeOutput method.

So far I’m getting this error: TypeError: Class constructor BundleTrackerPlugin cannot be invoked without 'new' but I’m wondering if this is the best way to achieve my custom output.

const path = require('path');
const webpack = require('webpack');
const BundleTracker = require('webpack-bundle-tracker');

const config = require('./webpack.base.config.js');

var NoPathBundleTracker = function(options) {
  BundleTracker.call(this, options);
};

// Edit webpack-bundle-tracker to not show path
NoPathBundleTracker.prototype = Object.create(BundleTracker.prototype);
NoPathBundleTracker.prototype.writeOutput = function (compiler, contents) {
    
    var chunks = contents['chunks'];

    if (chunks) {
      for (var chunk in chunks ) {
        var chunkArray = chunks[chunk];
        var i;
    
        for (i = 0; i < chunkArray.length; ++i) {
          var chunkObject = chunkArray[i];

          for ( var chunkinfo in chunkObject ) {
            chunkObject['path'] = 'no path';
          }
        }
      }
    }

    BundleTracker.prototype.writeOutput.call(this, compiler, contents);
};

config.output.path = path.resolve('./bundles/prod');

config.plugins = config.plugins.concat([
  new NoPathBundleTracker({
    filename: './webpack-stats-prod.json'
  }),

  new webpack.DefinePlugin({
    'process.env': {
    'NODE_ENV': JSON.stringify('production')
  }}),

]);

module.exports = config;

if (hourNow > 18) greeting = "Good Evening. Whenever inspected for problems, it says “Uncaught Reference Error: hourNow is not defined”. The code is supposed to check your current time to make a custom greeting based on what hour you have checked the file.

When page loads, the background color of my navigation is transparent and when the page is scrolled background color of the navigation bar changes to the set color; its working fine on desktop view but when I minimize the window to mobile view, background color of the navigation bar remains transparent too BUT when I click the toggle button to open the navigation List items it still remains transparent, making it impossible to see the List Items.
Please how can I make the background color of navigation bar in mobile view to also be transparent on page load and when the toggle button is clicked, the background color of the nav bar changes?
Just as it is obtain in desktop view.

Here is my Javascript, CSS and HTML

 <script type="text/javascript">
        $(window).scroll(function () {
            if ($(window).scrollTop() >= 50) {
                $('.navbar').css('background', '#32657c');
                $('.nav-link').css('color', '#eeeeee');
                $('.navbar-brand').css('color', '#eeeeee');
                $('#newclients').css('color', '#eeeeee');
                $('#newclients').css('border-color', '#eeeeee');
                $('#newclients').css('background', '#32657c');
            } else {
                    $('.navbar').css('background', 'transparent');
                    $('.nav-link').css('color', '#011B33');
                    $('.navbar-brand').css('color', '#011B33');
                    $('#newclients').css('border-color', '#32657c');
                    $('#newclients').css('color', '#011B33');
                    $('#newclients').css('background', 'transparent');
            }
        });
    </script>

    <style type="text/css">
        .wrapper {
            background-repeat: no-repeat;
            height: 1000px;
            background-position: center;
            background-size: cover;
            overflow: hidden;
            position: relative;
        }
        .top {
            height: 100%;
            background-size: cover;
            background-color: rgb(245, 245, 245);
            width: 100%;
            z-index: 100;
        }

        .navbar-nav {
            margin-left: auto;
        }

        #navbarNav li a {
            color: #eeeeee;
            font-family: 'Be Vietnam', sans-serif;
            font-size: 11pt;
            font-weight: bolder;
        }

        .nav-item {
            float: right;
        }

        .navbar-nav .active {
            color: #eeeeee;
        }

        #navbarNav li a::after:hover {
            color: #eeeeee;
        }

        .navbar-brand:hover {
            color: #eeeeee;
        }

        @media(min-width:992px) {
            .col-md-6:not(:first-child) {
            }

            .col-md-6:not(:last-child) {
                border-right: 1px solid #200662;
                border-left: 1px;
            }

            .form-horizontal {
                line-height: 1.33;
                letter-spacing: -.5px;
                margin-bottom: 5px;
                margin-top: 0%;
            }
        }

        #btnstart {
            border-radius: 5px;
            background-color: #32657c;
            font-weight: 500;
            font-size: 12pt;
        }

            #btnstart:hover {
                color: #eeeeee;
                background-color: steelblue;
            }
        .img-circle {
            border-radius: 50%;
            float: left;
        }

        #imgone {
            width: 100%;
            height: auto;
        }

        @media screen and (min-width: 360px) and (max-width:640px) {
            #imgone {
                width: 100%;
                height: auto;
            }

            #boldhead {
                font-size: 17pt;
            }
        }

        @media screen and (max-width: 500px) {
            .column {
                width: 100%;
            }
        }

        #newclients {
            font-family: 'Be Vietnam', sans-serif;
        }

        @media screen and (min-width: 360px) and (max-width:640px) {
            #qr {
                display: none;
            }
        }
    </style>

<div class="wrapper">
            <div class="top">
                <nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="header" style="font-family: Nunito;">
                    <a class="navbar-brand" href="Default.aspx" style="font-family: 'Renogare Soft', sans-serif; font-weight: 500; font-size: 16pt;">
                        <i class="fas fa-bowling-ball" aria-hidden="true" style="margin: 0 7px; font-size: 20pt; color: #44a6e8;"></i>Cosmic</a>
                    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation" style="background-color: transparent; border-color: none; font-size: 10pt; border-width: 0px; color: #fff;">
                        <span class="navbar-toggler-icon" style="font-size: 10pt; color: #fff;"></span>
                    </button>
                    <div class="collapse navbar-collapse" id="navbarNav">
                        <ul class="navbar-nav">
                            <li class="nav-item active">
                                <a class="nav-link active" href="Default.aspx" style="font-weight: bolder;">
                                    <i class="fa fa-home" aria-hidden="true" style="margin: 0 7px; font-size: 11pt;"></i>home<span class="sr-only">(current)</span></a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="About.aspx" style="font-weight: bolder;">
                                    <i class="fas fa-address-card" aria-hidden="true" style="margin: 0 7px; font-size: 11pt;"></i>about Us
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="Contact.aspx" style="font-weight: bolder;">
                                    <i class="fas fa-address-book" aria-hidden="true" style="margin: 0 7px; font-size: 11pt;"></i>contact</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="LoginForm.aspx" style="font-weight: bolder;">
                                    <i class="fas fa-sign-in" aria-hidden="true" style="margin: 0 7px; font-size: 11pt;"></i>login
                                </a>
                            </li>
                            <li class="nav-item">
                                <asp:Button ID="newclients" runat="server" CssClass="btn" Font-Bold="true" Font-Size="10pt" Text="Create free account" />
                            </li>
                        </ul>
                    </div>
                </nav>
                <div>
                    <img id="dots" alt="dotted" src="images/curly.jpg" />
                    <div class="line" style="color: #fff;">
                    </div>
                    <div class="row" id="frontpage" style="width: 98%; margin: 0 auto; padding: 35px; top: 1%;">
                        <div class="col-sm-7" style="margin: 0 auto; padding: 5px;">
                            <br />
                            <div class="container" style="margin-top: 4%; padding: 0px; top: 8%;">
                                <label id="boldhead" style="font-family: Roboto; font-size: 7.0vmin; color: #002335; top: 6%; font-weight: 900;">Best Prices for your Kids</label>
                                <br />
                                <p id="secondhead" style="font-family: 'Roboto', sans-serif; font-weight: 500; font-size: 13pt; color: #05214d;">
                                    Start yourshopping for your kids anywhere and anytime!
                                </p>
                                <br />
                                <asp:Button ID="btnstart" runat="server" class="btn btn-lg btn-primary" PostBackUrl="~/SignUp.aspx" Text="Create an account" />
                                <br />
                                <br />
                            </div>
                        </div>
                        <div class="col-sm-4" id="qr" style="margin: 0 auto;">
                            <div class="container-fluid p-3 mb5 bg-transparent rounded">
                                <i class="fas fa-home" aria-expanded="true" style="margin: 0 auto; font-size: 290pt; color: #32657c; opacity: 0.9;"></i>
                            </div>
                        </div>
                    </div>
                </div>
                <br />
                <br />
            </div>
            <div class="back-cont" style="background-color: #eeeeee;">
                <div class="container-fluid" style="text-align: center; padding: 30px;">
                </div>
                <br />
            </div>
            <div class="contain" style="margin: 0 auto; padding: 10px;">

                <br />
            </div>
        </div>

trying to study CSS/javascript and build something like the below Facebook posts.

I’ve tried it with CSS grid and had problems where it overlapped all items when using inside for-loop (create multiple feeds like a Facebook website).

for (let i = 0; i < 5; i++) {
    var container = document.querySelector('.content');
    var profileImage = document.createElement("img");
    var username = document.createElement("p");
    container.append(profileImage, username);
}

I think the grid isn’t the correct tool for a dynamically loaded website?
is there any other CSS I can try? I don’t even know what to look for? or study. 🙁

FYI- Tried it without Grid. it didn’t look good, but all the posts displayed correctly from for-loop.

I’m trying to create a basic multi-stage web form in Javascript. I wanted to accomplish this kind of like the forms section of Full Stack Open, by creating a collection (an array) of questions, then displaying them as labels on my web page, filtered so that only the appropriate ones appeared at certain times. For example, when you first visit the page, it would say “The next few questions will assess your budget situation”, then after pressing start – it would transition to the first question, then pressing next, to the second, and so on.

I thought I accomplished this the correct way, by displaying the filtered collection (phase is initialized to 0 outside of the app):

 const questionPhase = () => {
      
        if (phase < 3){
            phase = phase + 1;
      
        }
            
        else if(phase == 3){
            phase = 0;
            addToBudget(attribute);              
        }
        console.log(phase);
         
}
 return (
    <div>
        <h3> Please answer some questions to start</h3>
        <ul>
            {questions.filter(question => question.phase === phase).map(question =>
                { < label > {question.script} 
                <input type="text"
                question = {question.attribute}
                value={question.attribute}
                onChange={handleInput}
                />
                </label>})}
        </ul>
        <button onClick={questionPhase}> {phase === 2 ? 'Next' : 'Submit'} </button>
    </div>
)

I’ve done some logging and determined that phase actually is changing every time I press the button at the bottom. But what doesn’t happen, is either the questions (and labels) displaying, or the lettering on the buttons changing.

I’m not sure what I’ve done wrong? I’m certain there’s some subtle aspect of the control flow I’ve missed but I don’t know what – I figured that, as explained in FSO, the app is continually being run through every time there’s a change by pressing a button or something, which should be the event created by the button press.

Thank you in advance for any help

appendix: here is the questionsList class (from which questions is imported) and the event handler:

        import React from 'react'
    
    const questions = [
    
        {
            phase: 1 ,
            script: 'What is your monthly income?',
            attribute: "income"
        },
        
        {
            phase: 2,
            script: 'what are you monthly expenses?',
            attribute: "expenses"
        }
    ]
    
    export default questions

const handleInput = (event) => {
    const value = event.target.value;
    console.log('valued!')
    setAttribute({
        ...attribute,
        [event.target.question]: value
    })

}

I’m working with this code snippet:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
// <![CDATA[
 $(document).ready(function() {
  // Parse your query parameters here, and assign them to a variable named `queryParams`
  var option = queryParams.type;
  $("#GCValue").val(option);
 });
 // ]]>
</script>

I don’t have a lot of latitude with how I can affect the page, this is in the <body> section of the page, since I don’t have access to the <head> tag.

I have this form:

<select id=GCValue>
  <option val="10">10</option>
  <option val="25">25</option>
  <option val="50">50</option>
  <option val="100">100</option>
  <option val="250">250</option>
</select>

and I would like to use the URL of the page to select one of these five options (currently default is 10). I think it’s supposed to be either https://www.mywebsite.com/gift-card/?type=2 or https://www.mywebsite.com/gift-card/?GCValue=2 but neither work. I’m pretty new to JS and JQuery, so I know I have to be doing something wrong. Any help appreciated.

Navbar doesn’t drop down and show the options on the mobile version. I am trying to figure out how to get it to work, but no luck.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>COS Gym</title>
<link href="cos-gym.css" rel="stylesheet" type= "text/css" />
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
<header >
<div class="container">
  <nav font-size="120%" margin-left="30%" margin-top="8%" class="navbar navbar-expand-lg navbar-light">
    <a href="#" text-decoration="none" padding="4%" class="navbar-brand">
      <div class="logo">
        <img src="images/logo_gym.png">
      </div>
    </a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#toggleMobileMenu" aria-controls="toggleMobileMenu" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="#toggleMobileMenu">
      <ul class="navbar-nav ms-auto mb-2 mb-lg-0 text-center justify-content-end">
        <li class="nav-item"><a class="nav-link active" aria-current="page" href="index.html">Home</a></li>
        <li class="nav-item"><a class="nav-link active" aria-current="page" href="about.html">About</a></li>
        <li class="nav-item"><a class="nav-link active" aria-current="page" href="schedule.html">Schedule</a></li>
        <li class="nav-item"><a class="nav-link active" aria-current="page" href="online.html">Online</a></li>
        <li class="nav-item"><a class="nav-link active" aria-current="page" href="shop.html">Shop</a></li>
        <li class="nav-item"><a class="nav-link active" aria-current="page" href="contact.html">Contact</a></li>
      </ul>
    </div>
 </nav>
</div> 
</header>
<main>
<div class="imghome">
  <img src="images/home.jpg">
  <div class="title-home"><h>COS GYM</h>
  <a href="login.html"><button class="btn-1">Log in</button></a>
  <a href="registration.html"><button class="btn-2">Sign up</button></a></div>
<div class="three-images">
<figure>
  <img src="images/main1.jpg">
<figcaption class="f1">Zumba Dance</figcaption>
</figure>
<figure>
<img src="images/main2.jpg">
<figcaption class="f2">Power Training</figcaption>
</figure>
<figure>
<img src="images/main3.jpg">
<figcaption class="f3">Yoga Fitness</figcaption>
</figure>
</div>
</main>
<footer>
  <div>
    <ul>
     <dt>Email Us</dt>
     <dt>[email protected]</dt>
    </ul>
  </div>
   <div>
     <h3>Welcome to ChrisOlySim Gym</h3>
     <h4>Contact Us 989-888-9999</h4>
   </div>
   <div>
    <ul>
     <dt>Follow Us</dt>
     <dt><i class="fab fa-facebook-f"></i>
      <i class="fab fa-instagram"></i>
      <i class="fab fa-twitter"></i>
    </dt>
    </ul>
    </div>
    </footer>
    <script src="https://kit.fontawesome.com/42ca52e1de.js" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
  </body>
</html>

Also ms-auto doesn’t seem to work either, and when I try to change the size of the text, it refuses to grow past a certain point. Can I get help please? I’ve tried switching the order of the scripts that run, I’ve tried running it with JQuery, I’ve tried everything. The only time I see the options is when I use the container-fluid class, but since I can’t hide the options when I do that on the mobile version, there’s no point. How do I get this to work?

When running the terminal commands ng server , I’m getting this :
An unhandled exception occurred: (0 , _schemaUtils.validate) is not a function

i am using visual studio code and trying to learn Angular
*note : my default browser is Microsoft edge not sure if that may effect

Is there a way for a pop-up to appear when all divs got ‘onmouseovered’?

function moveOver(obj)
            {
                obj.innerHTML = "POP!!!"
                obj.style.color = "#ff0000"
                obj.style.background = "transparent"
                if ()
                {
                    alert("There is no circles left!")
                }
            }

I basically have 12 circles that pop when you move your mouse over them, is there a way to make a pop-up that says “There is no circles left!” after I hover over the 12th circle?

Pretty new to expo so not sure what this error means am getting this when I run expo in production mode

After I try reloading the app it gets stuck at the new update downloading

Would be highly appreciated if anyone can help! Let me know if any more details needed.

I’m trying to run Quokka (enterprise) on a javascript file that has a JSX pragma comment

/** @jsxImportSource @emotion/react */

at the top of the file and I am getting the error:

SyntaxError: ./src/components/LoadingButton.js: importSource cannot be set when runtime is classic. 
> 1 | /** @jsxImportSource @emotion/react */ 
    | ^ 

Here are the docs for the CSS prop that includes the need for the import source comment: https://emotion.sh/docs/css-prop#jsx-pragma

It is worth noting that the app runs fine with this configuration below, however, Quokka’s output keeps showing the error. If I remove the JSX pragma comment and the CSS import, Quokka is able to run a file.

LoadingButtonl.js (example file that I am running Quokka on)

// Libraries
import PropTypes from 'prop-types';
import { css } from '@emotion/react';
import Button from '@mui/material/Button';
import CircularProgress from '@mui/material/CircularProgress';
import Fade from '@mui/material/Fade';

const loadingButtonStyles = css`
    align-items: center;
    display: flex;
    justify-content: center;
    position: relative;

    .button-progress {
        position: absolute;
    }
`;

const LoadingButton = ({ isButtonLoading, ...props }) => {
    return (
        <div css={loadingButtonStyles}>
            <Button {...props}>{props.children}</Button>
            {isButtonLoading && (
                // this acts as a delay for the spinner so it doesn't spin as soon as the user clicks the button
                <Fade in style={{ transitionDelay: '800ms' }} unmountOnExit>
                    <CircularProgress className="button-progress" />
                </Fade>
            )}
        </div>
    );
};

LoadingButton.propTypes = {
    children: PropTypes.any,
    isButtonLoading: PropTypes.bool
};

export default LoadingButton;

.babelrc

    "presets": [
        "@babel/preset-env",
        [
            "@babel/preset-react",
            {
                "runtime": "automatic"
            }
        ]
    ],
    "plugins": [
        [
            "i18next-extract",
            {
                "discardOldKeys": true,
                "outputPath": "public/locales/{{locale}}.json"
            }
        ],
        ["@babel/proposal-class-properties", { "loose": true }],
        ["@babel/proposal-private-methods", { "loose": true }],
        ["@babel/proposal-private-property-in-object", { "loose": true }],
        ["@babel/proposal-object-rest-spread", { "loose": true }]
    ]
}

package.json

    "name": "order-customizer-ui",
    "version": "0.1.0",
    "private": true,
    "default": "order-customizer-ui.js",
    "dependencies": {
        "@emotion/react": "^11.5.0",
        "@emotion/styled": "^11.3.0",
        "@mui/icons-material": "^5.0.4",
        "@mui/lab": "^5.0.0-alpha.51",
        "@mui/material": "^5.0.4",
        "@mui/styles": "^5.0.1",
        "@testing-library/jest-dom": "^5.11.4",
        "@testing-library/react": "^11.1.0",
        "@testing-library/user-event": "^12.1.10",
        "fs": "^0.0.1-security",
        "graphql-hooks": "^5.1.3",
        "i18next": "^20.2.4",
        "i18next-browser-languagedetector": "^6.1.1",
        "i18next-http-backend": "^1.2.4",
        "js-cookie": "^3.0.1",
        "jwt-decode": "^3.1.2",
        "lodash": "^4.17.21",
        "react": "^17.0.2",
        "react-color": "^2.19.3",
        "react-dnd": "^14.0.2",
        "react-dnd-html5-backend": "^14.0.0",
        "react-dom": "^17.0.2",
        "react-error-boundary": "^3.1.3",
        "react-i18next": "^11.8.15",
        "react-router-dom": "^5.2.0",
        "react-scripts": "4.0.3",
        "unzipper": "^0.10.11",
        "uuid": "^8.3.2",
        "web-vitals": "^1.0.1"
    },
    "devDependencies": {
        "@babel/cli": "^7.14.3",
        "@babel/core": "^7.14.3",
        "@babel/eslint-parser": "^7.14.3",
        "@babel/node": "^7.14.2",
        "@babel/preset-env": "^7.14.2",
        "@babel/preset-react": "^7.13.13",
        "@emotion/eslint-plugin": "^11.2.0",
        "@parcel/transformer-image": "^2.0.0-rc.0",
        "@storybook/addon-actions": "6.3.12",
        "@storybook/addon-essentials": "^6.3.12",
        "@storybook/addon-links": "6.3.12",
        "@storybook/addon-storysource": "6.3.12",
        "@storybook/node-logger": "6.3.12",
        "@storybook/preset-create-react-app": "3.1.7",
        "@storybook/react": "6.3.12",
        "babel-plugin-i18next-extract": "^0.8.3",
        "eslint": "^7.26.0",
        "eslint-config-prettier": "^8.3.0",
        "eslint-plugin-prettier": "^3.4.0",
        "eslint-plugin-react": "^7.23.2",
        "eslint-plugin-react-hooks": "^4.2.0",
        "husky": "^7.0.0",
        "jsdoc": "^3.6.7",
        "parcel": "^2.0.0-rc.0",
        "prettier": "^2.3.0",
        "storybook-addon-designs": "^6.2.0",
        "uuid": "^8.3.2"
    },
    "scripts": {
        "start": "react-scripts start",
        "build": "npm run build:translations && npm run build:parcel${PARCEL_ENV} && npm run build:storybook && scripts/postbuild.sh",
        "build:react": "react-scripts build",
        "test": "react-scripts test --testPathIgnorePatterns src/__tests__/integrationTestHelpers/*",
        "test:no-watch": "react-scripts test --watchAll=false --testPathIgnorePatterns src/__tests__/integrationTestHelpers/*",
        "doc": "jsdoc -c jsdoc.json",
        "eject": "react-scripts eject",
        "build:parcel-dev": "cp src/index.js src/order-customizer-ui.js && parcel build src/order-customizer-ui.js --no-optimize && rm src/order-customizer-ui.js",
        "build:parcel": "cp src/index.js src/order-customizer-ui.js && parcel build src/order-customizer-ui.js && rm src/order-customizer-ui.js",
        "build:translations": "npm run updateLanguageKeys && npm run updateLokalise && npm run downloadLokalise",
        "updateLanguageKeys": "rm -rf public/locales/en.json && npx babel -f .babelrc 'src/**/*.{js,jsx}'",
        "mockNonEnglishKeys": "node ./src/util/mockNonEnglishKeys.js",
        "updateLokalise": "node ./src/util/updateLokalise.js",
        "downloadLokalise": "node ./src/util/downloadLokalise.js",
        "storybook": "start-storybook -p 6006 -s public",
        "build:storybook": "build-storybook -s public --quiet",
        "prepare": "husky install"
    },
    "eslintConfig": {
        "extends": [
            "react-app",
            "react-app/jest"
        ],
        "overrides": [
            {
                "files": [
                    "**/*.stories.*"
                ],
                "rules": {
                    "import/no-anonymous-default-export": "off"
                }
            }
        ]
    },
    "browserslist": [
        "since 2017-06"
    ],
    "quokka": {
        "babel": true
    }
}

.eslintc

    "extends": ["prettier", "eslint:recommended", "plugin:react/recommended"],
    "plugins": ["@emotion", "react", "react-hooks"],
    "parser": "@babel/eslint-parser",
    "env": {
        "browser": true,
        "commonjs": true,
        "jest": true,
        "node": true,
        "es6": true
    },
    "parserOptions": {
        "ecmaVersion": 2018,
        "ecmaFeatures": {
            "jsx": true,
            "modules": true
        }
    },
    "rules": {
        "curly": "warn",
        "react/jsx-uses-react": "off",
        "react/react-in-jsx-scope": "off",
        "no-console": ["warn", { "allow": ["error"] }],
        "react/display-name": "off",
        "quotes": ["warn", "single", { "avoidEscape": true }],
        "no-mixed-spaces-and-tabs": ["error", "smart-tabs"],
        "react/no-unescaped-entities": 0,
        "react/no-render-return-value": "off",
        "no-unused-vars": "warn",
        "react/prop-types": "warn"
    }
}

I have a table with fixed x number of top rows and y number of left columns.

Like : https://jsfiddle.net/26m75fge/11/

CSS :

div {
  max-width: 40em;
  max-height: 20em;
  overflow: scroll;
  position: relative;
 
}

table {
  position: relative;
  border-collapse: collapse;
}

td,
th {
  padding: 0.25em;
  border: 0.25em solid white;
}

thead tr:nth-child(1) {
  position: -webkit-sticky; /* for Safari */
  position: sticky;
  top: 0.25em;
  background: #000;
  color: #FFF;
  z-index: 2;
}

thead tr:nth-child(2) {
  position: -webkit-sticky; /* for Safari */
  position: sticky;
  top: 2em;
  background: #000;
  color: #FFF;
  z-index: 2;
}

thead th:first-child {
  left: 0;
  z-index: 1;
}

tbody th {
  position: -webkit-sticky; /* for Safari */
  position: sticky;
  left: 0;
  background: #FFF;
  border-right: 1px solid #CCC;
}

HTML :

  <table>
    <thead>
      <tr>
        <th></th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
    ....
      </tr>
      <tr>
        <th></th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
 ....
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>head</th>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
       .....
      </tr>
    </tbody>
  </table>
</div>

However, when I scroll my other cells I can see the “Hidden” rows in the background/ border-spacing of the table. (See: cells in border spacing)

Is there a way using CSS/JS to hide these make the border so that these cells dont show up once they are scrolled?

cells in border spacing

How will the view code part based on Class-based view will look like if i have for example this 2 models
Class Student with two columns name and last_name
Class City name and street
The form will be in a html file, in this case it will have the 4 inputs,

I have a map of Africa which I loaded using D3 which features several columns including a column named ADMIN which features each country’s name. I’m trying to highlight the country on my map that is selected in my dropdown. For example if I select Algeria in my drop down, Algeria will highlight on my map. The map itself loads fine as well as the dropdown. I’m just having trouble coordinating the interaction between the dropdown function and the highlight function so that the selected country actually highlights.

//begin script when window loads
window.onload = setMap();

var attrArray = ["Algeria","Angola","Benin"];

  var expressed = attrArray[0];



//set up  map
function setMap(){
  //map frame dimensions
  var width = 1200,
      height = 1000;





  //create new svg container for the map
  var map = d3.select("body")
      .append("svg")
      .attr("class", "map")
      .attr("width", width)
      .attr("height", height);

  //create Albers equal area conic projection centered on France
  var projection = d3.geoOrthographic()
    .scale(600)
    .translate([width / 2, height / 2.7])
    .clipAngle(85)
    .precision(.1);



    var path = d3.geoPath()
      .projection(projection)



    var graticule = d3.geoGraticule()
             .step([5, 5]); //place graticule lines every 5 degrees of longitude and latitude

         //create graticule background
    var gratBackground = map.append("path")
             .datum(graticule.outline()) //bind graticule background
             .attr("class", "gratBackground") //assign class for styling
             .attr("d", path) //project graticule

    var gratLines = map.selectAll(".gratLines")
            .data(graticule.lines()) //bind graticule lines to each element to be created
            .enter() //create an element for each datum
            .append("path") //append each element to the svg as a path element
            .attr("class", "gratLines") //assign class for styling
            .attr("d", path); //project graticule lines


    //use queue to parallelize asynchronous data loading
    d3.queue()
      .defer(d3.csv, "data/AfricaCountries.csv") //load attributes from csv
      .defer(d3.json, "data/world.topojson") //load background spatial data
      .defer(d3.json, "data/Africa.topojson")
      .await(callback);

function callback(error, csvData, world, africa){
  //translate europe TopoJSON
        var basemapCountries = topojson.feature(world, world.objects.ne_10m_admin_0_countries),
              africaCountries= topojson.feature(africa, africa.objects.ne_10m_admin_0_countries).features;


         //select graticule elements that will be created
        //add Europe countries to map
        var countries = map.append("path")
          .datum(basemapCountries)
          .attr("class", "countries")
          .attr("d", path);

  //add Africa countries to map
            var regions = map.selectAll(".regions")
              .data(africaCountries)
              .enter()
              .append("path")
              .attr("class", function(d){
                return "regions " + d.properties.ADMIN;
              })
              .attr("d", path);

        createDropdown(csvData);





    };

    function createDropdown(csvData){
        //add select element
        var dropdown = d3.select("body")
            .append("select")
            .attr("class", "dropdown")
            .on("change", function(){
              highlight(d.properties);
            });


        //add initial option
        var titleOption = dropdown.append("option")
            .attr("class", "titleOption")
            .attr("disabled", "true")
            .text("Select Country");

        //add attribute name options
        var attrOptions = dropdown.selectAll("attrOptions")
            .data(attrArray)
            .enter()
            .append("option")
            .attr("value", function(d){ return d })
            .text(function(d){ return d });
    };

    //function to highlight enumeration units and bars
 function highlight(props){
     //change stroke
     var selected = d3.selectAll("." + props.ADMIN)
         .style("stroke", "blue")
         .style("stroke-width", "2");
 };


};