We Keep Coding

I keep getting Uncaught TypeError: Failed to execute 'observe' on 'IntersectionObserver': parameter 1 is not of type 'Element'

I'm trying to make my navbar sticky when it gets to a certain section of my website but my intersectionObserverApi isn't working. I think it has something to do with my useRefs being null when I try to select the section element I want to observe.I have tried selecting them using querySelector but didn't work either.
This is in React btw any help would be appreciated.
Here is my component:
import { React, useRef } from "react";
import "./About.css";
import Image from "../Images/7F1E6503-0880-4C1A-B2E8-070D0FAE543B.jpg";
const About = () => {
const aboutSectionRef = useRef("");
console.log(aboutSectionRef); // getting object with key value pair of current: ''
const el = aboutSectionRef.current;
console.log(el); // I'm getting null in the console.log
function stickyNavBar(entries, observer) {
console.log(entries);
}
document.addEventListener("DOMContentLoaded", function () {
const sectionObserver = new IntersectionObserver(stickyNavBar, {
root: null,
threshold: 0.1,
});
sectionObserver.observe(el);
});
// const aboutSectionRef = useRef(null);
// document.addEventListener(
// "DOMContentLoaded",
//
// );
return (
<section
ref={aboutSectionRef}
id="about-section"
className="about-section aboutsectionref"
>
<img className="headshot" src={Image} alt="pic of Osman" />
<h1>Nice to meet you</h1>
<p>
Over the past 2 years I have embarked on a journey that has undoubtedly
<span className="blue"> challenged</span> me like never before when I
decided to start
<span className="blue"> learning</span> how to code. I am a{" "}
<span className="blue"> self-taught</span> web developer with{" "}
<span className="blue"> passion</span> and{" "}
<span className="blue"> determination</span> for anything I set my mind
to.
</p>
<h2>Attributes I bring to the team</h2>
<div className="two-uls">
<ul>
<li>
<i className="fa-solid fa-circle-check fa-1x"></i> Open-Minded
</li>
<li>
<i className="fa-solid fa-circle-check fa-1x"></i> Team Player
</li>
<li>
<i className="fa-solid fa-circle-check fa-1x"></i> Drive to
self-improve
</li>
</ul>
<ul>
<li>
<i className="fa-solid fa-circle-check fa-1x"></i> Time Management
</li>
<li>
<i className="fa-solid fa-circle-check fa-1x"></i> Communication
</li>
<li>
<i className="fa-solid fa-circle-check fa-1x"></i> Attention to
detail
</li>
</ul>
</div>
</section>
);
};
export default About;

Getting highest score values from firebase database

In my website there are some films that i get from firebase. The scores of the movies are between 0 and 100. I already got all the movies in my website. I also want to display them in descending order.(for ex. top 5 rated movies) How can i achieve this? Thanks for your answers.
const app = initializeApp(firebaseConfig);
const db = getDatabase(app);
const auth = getAuth(app);
const firebaseRef= ref(getDatabase());
var body = document.getElementById('movies');
var body2 = document.getElementById('series');
function AddItemsToTable(name, score, img, id) {
var movies = `<div class="content"><img src="${img}" ><p>${name}</p> <p> <i class="fa fa-star checked" id="star${id}"></i> <a class="scoretxt">${score}%</a> </p> </div>`;
body.innerHTML+=movies;
}
function AddItemsToTable2(name, score, img, id) {
var series = `<div class="content"><img src="${img}" ><p>${name}</p> <p> <i class="fa fa-star checked" id="star2${id}"></i> <a class="scoretxt">${score}%</a> </p> </div>`;
body2.innerHTML += series;
}
//*******************************I got the movies************************************************
function AddAllItemsToTable(TheMovies){
var counter=0;
TheMovies.forEach(element => {
if (counter===6) {
return;
}
AddItemsToTable(element.movieName, element.movieScore, element.movieImage, element.movieId);
counter++;
});
}
//************************I got tv series*********************************************
function AddAllItemsToTable2(TheSeries){
var counter=0;
TheSeries.forEach(element => {
if (counter===6) {
return;
}
AddItemsToTable2(element.seriesName, element.seriesScore, element.seriesImage, element.seriesId);
counter++;
});
}
function AddAllItemsToTable3(TheMovies){
var counter=0;
TheMovies.forEach(element => {
if (counter===6) {
return;
}
AddItemsToTable3(element.movieName, element.movieScore, element.movieImage, element.movieId);
counter++;
});
}
function getAllDataOnce(){
const dbRef=ref(db);
get(child(dbRef,"Movies"))
.then((snapshot)=>{
var movies=[];
snapshot.forEach(childSnapshot => {
movies.push(childSnapshot.val())
});
AddAllItemsToTable(movies);
});
}
function getAllDataOnce2(){
const dbRef=ref(db);
get(child(dbRef,"Series"))
.then((snapshot)=>{
var series=[];
snapshot.forEach(childSnapshot => {
series.push(childSnapshot.val())
});
AddAllItemsToTable2(series);
});
}
window.onload = (event) => {
getAllDataOnce();
getAllDataOnce2();
};
<div class="grid-container">
<header class="header">
<div class="solheader">
<img src="img/sonlogo3.png" alt="logo">
<img src="img/logosmall.png" alt="logo" style="width:60px;height:48px;margin:5px;">
</div>
<div class="ortaheader">
<input type="text" placeholder="Movies or TV series.." class="searchbox"><i class="fa fa-search arama"></i> </input>
<ul>
<li class="categories">Categories <i class="fa fa-caret-down" style="font-size:16px;"> </i>
<ul class="dropdown">
<li>TV Series</li>
<li>Movies</li>
</ul>
</li>
</ul>
</div>
<div class="menu sagheader">
<ul>
<li>
<button class="ikon dropdown-toggle" type="button" data-toggle="dropdown"><i class="far fa-user"></i> </button>
<ul class="dropdown-menu">
<li class="accountname"><b><script>document.write(document.cookie.substring(5))</script></b></li>
<li class="login"><i class="fa fa-sign-in-alt" style="color:red;"></i> Login </li>
<li class="signup"><i class="fa fa-user-plus" style="color:red;"></i> Sign up </li>
<li class="logout"><a onclick="deletecookie()" style="cursor:pointer;"><i class="fas fa-door-open" style="color:red;"></i> Log out</a></li>
</ul>
</li>
</ul>
</div>
</header>
<div class="body" id="body">
<div class="baslik">Movies</div>
<div class="baslik2">See all</div>
<div id="movies">
</div>
<div class="baslik">Series</div>
<div class="baslik2">See all</div>
<div id="series">
</div>
<div class="baslik">Top Rated Movies</div>
<div class="baslik2">See all</div>
<div id="toprated">
</div>
</div>
<div class="footer">
<div class="">
<img src="img/sonlogo3.png" alt="logo">
<ul>
<li>Help</li>
<li>About</li>
<li>Contact</li>
<li>Terms and Policies</li>
</ul><br><br>
<ul>
<li>© 2021 Cinemeter</li>
<li class="destroy">|</li>
<li>All rights reserved.</li>
</ul>
</div>
</div>
</div>
Firebase Database
This is my website

While Firebase can order results, the results are always ascending. If you want to show them in descending order, you'll have to reverse them in your application code.
Something like this:
const query = query(child(dbRef,"Movies"), orderByChild("movieScore"));
get(query).then((snapshot)=>{
var movies=[];
snapshot.forEach(childSnapshot => {
movies.push(childSnapshot.val())
});
movies.reverse
});
If you want to get the top scores, you can use limitToLast in the query too:
const query = query(child(dbRef,"Movies"), orderByChild("movieScore"), limitToLast(5));
Also see the Firebase documentation on ordering and filtering data and limiting the number of results.
A few notes on your data structure:
Using sequential numeric keys for you nodes is an anti-pattern in Firebase, and it is typically better to use push keys. Also see Best Practices: Arrays in Firebase.
You're storing the score as a string, which is bound to lead to problems as strings are sorted lexicographically. I recommend converting your data to store the scores as numbers (so without " quotes around them).

Using background-image with ngStyle returns undefined

I try to add images (using API to load items) as background-image of element. But it keeps Cannot read property 'url' of undefined error. Though it actually renders url.
Here is the template side:
<div class="col s12 m4" *ngFor="let partner of partners">
<div class="card" *ngIf='partner'>
<div class="card-image " [ngStyle]="{'background-image': 'url(' + partner?.photo['url'] + ')'}">
<a class=" btn-floating halfway-fab waves-effect waves-light blue left ">
<i class="material-icons ">shopping_cart</i>
</a>
<a class="btn-floating halfway-fab red " [routerLink]='"/dashboard/partners/edit/"+partner["id"]'>
<i class="large material-icons ">mode_edit</i>
</a>
</div>
<div class="card-content ">
<h5 class="center font-weight-400 ">{{partner.name}}</h5>
<p class="center ">{{partner.category.name}}</p>
</div>
</div>
</div>
and controller:
export class PartnersListComponent implements OnInit {
partners: {}[] = [];
constructor(private _partnersService: PartnersService) {}
ngOnInit() {
this._partnersService.getPartners().subscribe(data => {
if (data.status == "200") {
this.partners = data.data;
}
});
}
}
Example data:
category:'',
created_at:"2017-12-27 12:57:50",
deleted_at:null,
first_entry:1,
id:1,
name:"Zara",
photo:{id: 5, url: "example.jpeg"},
updated_at:"2017-12-27 12:57:50",
username:"zara-001"

According to the error message, the photo field is not defined for at least one partner. You can protect against that situation with the elvis operator:
[ngStyle]="{'background-image': `url(${partner?.photo?.url})`}"
or
[style.background-image]="`url(${partner?.photo?.url})`"

Short HTML Code from Json will display the HTML code instead of the rendered version

I'm retrieving an array filled with user data. They should be displayed in a ul. One of the fields is the prefix for every user as an html code like this <span class="red-text">[Admin]</span>. But when I try to append the li element it renders the html code instead of the red version of the span.
My json code:
{
"users":[
{
"id":"1",
"usrname":"YannickFelix",
"email":"example#gmail.com",
"lvl":"4",
"prefix":"<span class=\"red-text\">[Admin]<\/span>"
}
]
}
And my javascript:
listElemTmplt = `
<li class="collection-item avatar">
<i class="material-icons circle {"{{color}}"}">person</i>
<span class="title">{"{{usrname}}"}</span>
<p>{"{{prefix}}"} {"{{usrname}}"} | {"{{email}}"}
</p>
<span class="secondary-content">
<a class="waves-effect waves-circle" href="users.php?action=edit&uID={"{{id}}"}">
<i class="material-icons grey-text text-darken-1">create</i>
</a>
<a class="waves-effect waves-circle waves-red modal-trigger" href="#modal{"{{id}}"}">
<i class="material-icons grey-text text-darken-1">delete</i>
</a>
</span>
<div id="modal{"{{id}}"}" class="modal">
<div class="modal-content black-text">
<h4>Löschen</h4>
<p>Möchtest Du den Benutzer "{"{{usrname}}"}" wirklich löschen?</p>
</div>
<div class="modal-footer">
Abbrechen
Löschen
</div>
</div>
</li>
`;
template = Handlebars.compile(listElemTmplt);
finishedString = [];
$.getJSON("**url**", function (data) {
console.log(data);
$("ul#users").html("");
data["users"].forEach(function (element, index, array) {
html = template({"{"}id: element["id"], usrname: element["usrname"], email: element["email"], prefix: element["prefix"]{"}"});
$("ul#users").append(html);
});
});
The example item in the List. [Admin] should be red and without the html code

Handlebars escapes the values you give to it when using {{prefix}}. When you want to use raw HTML you have to use {{{prefix}}} to tell it not to escape it.

Why is this template now showing up?

I have a problem with showing a template on my Meteor.js app. It's website_list. For some reason it doesn't show, maybe you can help me out?
I'm trying to show the website list from the websites MongoDB collection.
HTML Code:
<!-- master layout template -->
<template name="ApplicationLayout">
{{> yield "navbar"}}
{{> yield "main"}}
</template>
<!-- / master layout template -->
<!-- WELCOME -->
<template name="welcome">
<div class="container">
<div class="jumbotron">
<h1>Welcome to Site Ace, {{username}}!</h1>
Enter
</div>
</div>
</template>
<!-- / WELCOME-->
<!-- NAVBAR - you will be putting the login functions here -->
<template name="navbar">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="/">
Site Ace
</a>
</div>
<ul class="nav navbar-nav login">
<li>
{{> loginButtons}}
</li>
</ul>
</div>
</nav>
</template>
<template name="websites">
<div class="container">
{{> website_form}}
{{> website_list}}
</div>
</template>
<!-- / NAVBAR -->
<!-- WEBSITE FORM -->
<template name="website_form">
{{#if currentUser}}
<a class="btn btn-default js-toggle-website-form" href="#">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Add a Website
</a>
{{/if}}
<div id="website_form" class="hidden_div">
<form class="js-save-website-form">
<div class="form-group">
<label for="url">Site address</label>
<input type="text" class="form-control" id="url" placeholder="http://blablabla.org">
</div>
<div class="form-group">
<label for="title">Title</label>
<input type="text" class="form-control" id="title" placeholder="Mysite">
</div>
<div class="form-group">
<label for="description">Description</label>
<input type="text" class="form-control" id="description" placeholder="I found this site really useful for ...">
</div>
<button type="submit" class="btn btn-default js-">Submit</button>
</form>
</div>
</template>
<!-- / WEBSITE FORM -->
<!-- WEBSITE LIST -->
<template name="website_list">
<ol>
{{#each websites}}
{{>website_item}}
{{/each}}
</ol>
</template>
<!-- / WEBSITE LIST -->
<!-- WEBSITE ITEM -->
<template name="website_item">
<li>
{{title}}
<p>
{{description}}
</p>
<p>
<a href="/details/{{_id}}" class="btn btn-info">
Details
</a>
<a href="#" class="btn btn-success js-upvote">
<span class="glyphicon glyphicon-arrow-up" aria-hidden="true"></span>
</a>
<a href="#" class="btn btn-danger js-downvote">
<span class="glyphicon glyphicon-arrow-down" aria-hidden="true"></span>
</a>
</p>
<!-- you will be putting your up and down vote buttons in here! -->
</li>
</template>
<!-- / WEBSITE ITEM -->
JS Code:
// SECURITY
Websites = new Mongo.Collection("websites");
// set up security on Websites collection
Websites.allow({
// we need to be able to update websites for ratings.
update:function(userId, doc){
console.log("Testing security on website update");
if (Meteor.user()){// they are logged in
return true;
} else {// user not logged in - do not let them update (rate) the website
return false;
}
},
insert:function(userId, doc){
console.log("Testing security on website insert");
if (Meteor.user()){ // they are logged in
if (userId != doc.createdBy){ // the user is messing around
return false;
}
else{ // the user is logged in, the website has the correct user id
return true;
}
}
else{ // user not logged in
return false;
}
},
remove:function(userId, doc){
return true;
}
})
// / SECURITY
if (Meteor.isClient) {
/////
// ROUTERS
/////
// GLOBAL LAYOUT
Router.configure({
layoutTemplate: 'ApplicationLayout'
});
// ROUTES
Router.route('/', function() {
this.render('welcome', { // welcome is the template to render
to:"main" // main is the template to render welcome INTO
});
});
Router.route('/websites', function() {
this.render('navbar', {
to:"navbar"
});
this.render('websites', {
to:"main"
});
});
Router.route('/websites/:_id', function () {
this.render('navbar', {
to:"navbar"
});
this.render('image', {
to:"main",
data:function(){
return Websites.findOne({_id:this.params._id});
}
});
});
/////
// STARTUP (Creating Websites)
/////
if (Meteor.isServer) {
// start up function that creates entries in the Websites databases.
Meteor.startup(function () {
// code to run on server at startup
if (!Websites.findOne()){
console.log("No websites yet. Creating starter data.");
Websites.insert({
title:"Goldsmiths Computing Department",
url:"http://www.gold.ac.uk/computing/",
description:"This is where this course was developed.",
createdOn:new Date()
});
Websites.insert({
title:"University of London",
url:"http://www.londoninternational.ac.uk/courses/undergraduate/goldsmiths/bsc-creative-computing-bsc-diploma-work-entry-route",
description:"University of London International Programme.",
createdOn:new Date()
});
Websites.insert({
title:"Coursera",
url:"http://www.coursera.org",
description:"Universal access to the world’s best education.",
createdOn:new Date()
});
Websites.insert({
title:"Google",
url:"http://www.google.com",
description:"Popular search engine.",
createdOn:new Date()
});
}
});
}

You forgot to implement a helper function for your website_list template, which returns documents of your Websites collection.
For example:
Template.website_list.helpers({
websites: function() {
return Websites.find();
}
});
Here's a MeteorPad.