If one element in an array is clicked then add a class to the same nth other array

2021-02-22 22:41 Eoin imported from Stackoverflow

I want an item to show when a link is clicked. I have made an array of all of the links.

I want to add the class "show" to an array of <div>s. Potentially if the solution makes more sense the <div>'s could be within the anchor, it doesn't matter they will overlay the screen.

HTML

<div class="grid-container">
    <a href="#"> <!-- lot's of <a>'s will make the array -->
        <div class="grid-item">
            <div class="grid-item--inner-container">
                <div class="grid-item--normal-content">
                        <div class="grid-item--heading">
                            <h2>Lending Creativity</h2>
                        </div>
                        <div class="grid-item--border">&nbsp;</div>
                </div><!-- end normal content -->
            </div><!-- Grid-item-inner -->
        </div><!-- Grid item -->
    </a>
~

Second part of the HTML.

<div class="popup-container hidden"><!-- many -->
  <div class="grid-item--popup-content" id="lending-creativity--popup">
    <button class="close-button"><i class="fa fa-times"></i><span class="close-button--text-hidden">Close</span></button>
  </div>
</div>
~

JavaScript

let griditems       = document.getElementsByClassName('grid-container')[0].getElementsByTagName('a');
let popupitems      = document.getElementsByClassName('popup-container');
let closebuttons    = document.getElementsByClassName('close-button');

document.addEventListener("DOMContentLoaded", function() {
    for (let i = 0; i < griditems.length; i++) {
        griditems[i].addEventListener("click", function () {
            popupitems[i].style.display = "flex";
        })
    }
    for (let i = 0; i < griditems.length; i++) {
        closebuttons[i].addEventListener("click", function () {
            closebuttons[i].style.display = "none";
        })
    }
})

I'm getting an error saying closebuttons is not defined. I guess I'm not 100% sure I'm doing this the right way either, is this the best way to solve this problem?

See also questions close to this topic

Firebase Cloud function in expo project

So I have a cloud function (this is not in the react native app directory yet):

const admin = require('firebase-admin');
const firebase_tools = require('firebase-tools');
const functions = require('firebase-functions');

admin.initializeApp();


exports.deleteUser = functions
  .runWith({
    timeoutSeconds: 540,
    memory: '2GB'
  })
  .https.onCall((data, context) => {

  const userId = context.auth.uid;
  var promises = [];

  // DELETE DATA
  var paths = ['users/' + userId, 'messages/' + userId, 'chat/' + userId];

  paths.forEach((path) => {
    promises.push(
      recursiveDelete(path).then(  () => {
          return 'success';
        }
      ).catch( (error) => {
        console.log('Error deleting user data: ', error);
      })
    );
  });

  // DELETE FILES
  const bucket = admin.storage().bucket();
  var image_paths = ["avatar/" + userId, "avatar2/" + userId, "avatar3/" + userId];
  image_paths.forEach((path) => {
    promises.push(
      bucket.file(path).delete().then(  () => {
            return 'success';
          }
        ).catch( (error) => {
          console.log('Error deleting user data: ', error);
        })
      );
    });

  // DELETE USER
  promises.push(
    admin.auth().deleteUser(userId)
    .then( () => {
      console.log('Successfully deleted user');
      return true;
    })
    .catch((error) => {
      console.log('Error deleting user:', error);
    })
  );

  return Promise.all(promises).then(() => {
    return true;
  }).catch(er => {
      console.error('...', er);
  });
});




function recursiveDelete(path, context) {
    return firebase_tools.firestore
    .delete(path, {
      project: process.env.GCLOUD_PROJECT,
      recursive: true,
      yes: true,
      token: functions.config().fb.token
    })
    .then(() => {

      return {
        path: path
      }
    }).catch( (error) => {
      console.log('error: ', error);
      return error;
    });
  }
  // [END recursive_delete_function]

This is used for my swift app. How Can I use this for my react native app built with Expo?

I have installed the following yarn add @react-native-firebase/functions

I have my firebase.js file set up in the root directory:

import * as firebase from "firebase";

// Your web app's Firebase configuration
var firebaseConfig = {
    apiKey: "test",
    authDomain: "test",
    databaseURL: "test",
    projectId: "test",
    storageBucket: "test",
    messagingSenderId: "test",
    appId: "test"
  };

// Initialize Firebase
firebase.initializeApp(firebaseConfig);

export default firebase;

I have a button:

<Text>Delete Account</Text>
<View>
    <Button
        title="Delete Account"
        color="#F9578E"
        accessibilityLabel="Delete Account"
    />
</View>

Which when clicked signs the user out and runs the above cloud function.

Cleaner, better way to pass function callback and state to a child component in React?

Right now I am passing a callback function and the current state to a child component from my Parent component. I just feel like the way I write it is ugly or at least could be prettier. Here is the Parent component where I am passing all that (parentCallback={[moreReviews, limit]} in the return):

const Reviews: FunctionComponent = () => {
    const [filter, setFilter] = useState([1, 2, 3, 4, 5]);
    const [order, setOrder] = useState('date_desc');
    const [reviews, setReviews] = useState([]);
    const [limit, setLimit] = useState(1);

    let variables = {
        offset: 0,
        limit: limit,
        filter: filter,
        order: order
    }

    const {data: dataReviews, loading: loadingReviews, error: errorReviews} = useQuery(GetReviews, {
        ssr: false,
        variables: variables,
        fetchPolicy: "no-cache"
    });
  
    useEffect(() => {
        console.log('action going on deps change');

        if (!loadingReviews && !errorReviews && dataReviews) {
            setReviews(!loadingReviews && !errorReviews && dataReviews ? dataReviews.reviews[0].reviews : []);
        }
    }, [dataReviews]);

    function moreReviews(limit: number) {
        setLimit(limit);
    }
        
    return reviews.length ? (
        <div>
            <div className={`${styles.netreviews_review_rate_and_stars}`}>
                <ReviewsSideInfo/>
                <ReviewsContainer reviews={reviews} parentCallback={[moreReviews, limit]} />
            </div>
        </div>
    ) : <div/>;
};
export default Reviews;

And then in my child component I'm accessing it like so :

<button onClick={() => parentCallback[0](parentCallback[1] + 1)}></button>

That is definitely ugly but its working fine.

Also, and probably more importantly, is a better, more efficient way to do that, from a technical point of view ? Thanks

Django load text file into html file using jquery

I want to implement this example code from w3schools.com using Django. The code loads a text file into a html file using the jquery load() function. The code looks like this

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").load("demo_test.txt");
  });
});
</script>
</head>
<body>

<div id="div1"><h2>Let jQuery AJAX Change This Text</h2></div>

<button>Get External Content</button>

</body>
</html>

My question is now, how do I store my text file such that the load function has access to it in my Django project?

How i can read the nested properties and pushing to the array using javascript?

I want to read the JSON properties. if type is array or object or jsonp then i have to read the nested properties and need push it one array which should also be nested. like:

{
  name:"test",
  type:"array"
   [name]: {
      name: "test1",
       type: "..."
   }
 }

JSON object to read:

{
  "properties": {
    "value": {
      "type": "array",
      "items": {
        "required": [
          "@odata.etag",
          "id",
          "createdDateTime",
          "lastModifiedDateTime",
          "changeKey",
          "originalStartTimeZone",
          "originalEndTimeZone",
          "iCalUId",
          "reminderMinutesBeforeStart",
          "isReminderOn",
          "hasAttachments",
          "subject",
          "bodyPreview",
          "importance",
          "sensitivity",
          "isAllDay",
          "isCancelled",
          "isOrganizer",
          "responseRequested",
          "showAs",
          "type",
          "webLink",
          "isOnlineMeeting",
          "onlineMeetingProvider",
          "allowNewTimeProposals",
          "isDraft",
          "hideAttendees"
        ],
        "properties": {
          "id": {
            "type": "string",
            "minLength": 1
          },
          "end": {
            "type": "object",
            "required": [
              "dateTime",
              "timeZone"
            ],
            "properties": {
              "dateTime": {
                "type": "string",
                "minLength": 1
              },
              "timeZone": {
                "type": "string",
                "minLength": 1
              }
            }
          },
          "body": {
            "type": "object",
            "required": [
              "contentType",
              "content"
            ],
            "properties": {
              "content": {
                "type": "string",
                "minLength": 1
              },
              "contentType": {
                "type": "string",
                "minLength": 1
              }
            }
          },
          "type": {
            "type": "string",
            "minLength": 1
          },
          "start": {
            "type": "object",
            "required": [
              "dateTime",
              "timeZone"
            ],
            "properties": {
              "dateTime": {
                "type": "string",
                "minLength": 1
              },
              "timeZone": {
                "type": "string",
                "minLength": 1
              }
            }
          },
          "showAs": {
            "type": "string",
            "minLength": 1
          },
          "iCalUId": {
            "type": "string",
            "minLength": 1
          },
          "isDraft": {
            "type": "boolean"
          },
          "subject": {
            "type": "string",
            "minLength": 1
          },
          "webLink": {
            "type": "string",
            "minLength": 1
          },
          "isAllDay": {
            "type": "boolean"
          },
          "location": {
            "type": "object",
            "required": [
              "displayName",
              "locationType",
              "uniqueIdType",
              "address",
              "coordinates"
            ],
            "properties": {
              "address": {
                "type": "object",
                "required": [],
                "properties": {}
              },
              "coordinates": {
                "type": "object",
                "required": [],
                "properties": {}
              },
              "displayName": {
                "type": "string"
              },
              "locationType": {
                "type": "string",
                "minLength": 1
              },
              "uniqueIdType": {
                "type": "string",
                "minLength": 1
              }
            }
          },
          "attendees": {
            "type": "array",
            "items": {
              "required": [
                "type"
              ],
              "properties": {
                "type": {
                  "type": "string",
                  "minLength": 1
                },
                "status": {
                  "type": "object",
                  "required": [
                    "response",
                    "time"
                  ],
                  "properties": {
                    "time": {
                      "type": "string",
                      "minLength": 1
                    },
                    "response": {
                      "type": "string",
                      "minLength": 1
                    }
                  }
                },
                "emailAddress": {
                  "type": "object",
                  "required": [
                    "name",
                    "address"
                  ],
                  "properties": {
                    "name": {
                      "type": "string",
                      "minLength": 1
                    },
                    "address": {
                      "type": "string",
                      "minLength": 1
                    }
                  }
                }
              }
            },
            "minItems": 1,
            "uniqueItems": true
          },
          "changeKey": {
            "type": "string",
            "minLength": 1
          },
          "locations": {
            "type": "array",
            "items": {
              "required": [],
              "properties": {}
            }
          },
          "organizer": {
            "type": "object",
            "required": [
              "emailAddress"
            ],
            "properties": {
              "emailAddress": {
                "type": "object",
                "required": [
                  "name",
                  "address"
                ],
                "properties": {
                  "name": {
                    "type": "string",
                    "minLength": 1
                  },
                  "address": {
                    "type": "string",
                    "minLength": 1
                  }
                }
              }
            }
          },
          "categories": {
            "type": "array",
            "items": {
              "required": [],
              "properties": {}
            }
          },
          "importance": {
            "type": "string",
            "minLength": 1
          },
          "recurrence": {},
          "@odata.etag": {
            "type": "string",
            "minLength": 1
          },
          "bodyPreview": {
            "type": "string",
            "minLength": 1
          },
          "isCancelled": {
            "type": "boolean"
          },
          "isOrganizer": {
            "type": "boolean"
          },
          "sensitivity": {
            "type": "string",
            "minLength": 1
          },
          "isReminderOn": {
            "type": "boolean"
          },
          "hideAttendees": {
            "type": "boolean"
          },
          "onlineMeeting": {},
          "transactionId": {},
          "hasAttachments": {
            "type": "boolean"
          },
          "responseStatus": {
            "type": "object",
            "required": [
              "response",
              "time"
            ],
            "properties": {
              "time": {
                "type": "string",
                "minLength": 1
              },
              "response": {
                "type": "string",
                "minLength": 1
              }
            }
          },
          "seriesMasterId": {},
          "createdDateTime": {
            "type": "string",
            "minLength": 1
          },
          "isOnlineMeeting": {
            "type": "boolean"
          },
          "onlineMeetingUrl": {},
          "responseRequested": {
            "type": "boolean"
          },
          "originalEndTimeZone": {
            "type": "string",
            "minLength": 1
          },
          "lastModifiedDateTime": {
            "type": "string",
            "minLength": 1
          },
          "allowNewTimeProposals": {
            "type": "boolean"
          },
          "onlineMeetingProvider": {
            "type": "string",
            "minLength": 1
          },
          "originalStartTimeZone": {
            "type": "string",
            "minLength": 1
          },
          "reminderMinutesBeforeStart": {
            "type": "number"
          }
        }
      },
      "minItems": 1,
      "uniqueItems": true
    },
    "@odata.context": {
      "type": "string",
      "minLength": 1
    },
    "@odata.nextLink": {
      "type": "string",
      "minLength": 1
    }
  }
}

How to remove numbers in an array if it exists in another another

Here is my code so far. (Using NumPy for arrays)

        avail_nums = np.array([1,2,3,4,5,6,7,8,9])                      # initial available numbers

        #print(avail_nums.shape[0])
        #print(sudoku[spaces[x,1],spaces[x,2]])                         # index of missing numbers in sudoku
        
        print('\n')
       
        #print(sudoku[spaces[x,1],:])                                   # rows of missing numbers
                     
        for i in range(sudoku[spaces[x,1],:].shape[0]):                 # Number of elements in the missing number row    
            
            for j in range(avail_nums.shape[0]):                        # Number of available numbers
                
                if(sudoku[spaces[x,1],i] == avail_nums[j]):
                    
                    avail_nums= np.delete(avail_nums,[j])
                    
        print(avail_nums)

A for loop cycles through all the elements in the 'sudoku row' and nested inside, another loop cycles through 'avail_nums'. Everytime there is a match (given by the if statement), that value is to be deleted from the avail_nums array until finally all the numbers in 'sudoku row' aren't in 'avail_nums'.

I'm greeted with this error: IndexError: index 8 is out of bounds for axis 0 with size 8 pointing to the line with the if statement. Because avail_nums is shrinking, after the first deletion this happens. How can i resolve this issue?

How to iterate through an array of JSON Data and represent them in the form of a folder structure

Below is an example JSON Data, How to represent them in a folder structure where upper nodes as folders and leaf nodes as files in ReactJS

[
    “Documents”: [
            “Document1.jpg”,
            “Document2.jpg”,
            “Document3.jpg”
],
“Desktop”: [
    “Screenshot1.jpg”,
    “videopal.mp4”
],
“Downloads”: [
    “Drivers”: [
            “Printerdriver.dmg”,
            “cameradriver.dmg”
],
“Applications”: [
    “Webstorm.dmg”,
    “Pycharm.dmg”,
    “FileZila.dmg”,
    “Mattermost.dmg”,
],
“chromedriver.dmg” 
] 
]

Related questions

If one element in an array is clicked then add a class to the same nth other array

See also questions close to this topic