javascript – Page 8061 – Blancer.com Tutorials and projects

click event listener method is not working on a specific div

I am trying to add an event listener to my “degree section div” but it is not working nor am I getting any errors. I have tried multiple ways of traversing the DOM to reach the “degree-section” div but to no avail.

Any kind of help is welcome and appreciated

The HTML:

<body>

    <div class="loc-container">
        <div class="location">
            <h1 class="city-name">City</h1>
            <div class="weather-icon"><img src="icons/unknown.png" /></div>
       </div>
    </div>
   
    

    <div class="weather-info">

        <div class="degree-section">
            <h2 class="temp">0.0</h2>
            <span>K</span>
        </div>

        <div class="check">
            <label for="celcius">Convert</label>
            <input type="checkbox", name="celcius", id="celcius">
        </div>
    

        <div class="info-section">
            <div class="info-flex">
                <h3 class="feels-like">0K</h3>
                <h4>Feels Like</h4>
            </div>

            <div class="info-flex">
                <h3 class="humidity">0</h3>
                <h4>Humidity</h4>
            </div>

            <div class="info-flex">
                <h3 class="wind">0</h3>
                <h4>Wind</h4>
            </div>
        </div>  
    </div>
    

    <div class="top-center">
        <div class="form">
            <input type="text" name="city" id="city" required>
            <label for="city" class="label-name"><span class="search-name">Search City...</span></label>
            
        </div>
        <!-- <i class="fas fa-search search-btn"></i> -->
        <i class="material-icons search-btn" style="font-size: 35px;">search</i>
    </div>

    
    <script src="weather.js"></script>
</body>

Here is my javascript:

let city = document.querySelector('#city');
let searchbtn = document.querySelector('.search-btn');
let city_name = document.querySelector('.city-name');
let temp = document.querySelector('.temp');
let feels_like = document.querySelector('.feels-like');
let humidity = document.querySelector('.humidity');
let locationIcon = document.querySelector('.weather-icon');
let checkbox = document.getElementById('celcius');
let weather_sec = document.querySelector('.weather-info');
let degree_section = weather_sec.firstElementChild;
let degree_section_span = degree_section.getElementsByTagName('span')[0];


//let wind = document.querySelector('.wind');



async function getUrl(city){

    try{
        let theUrl = url + city + '&appid=' + apiKey;
        let response = await fetch(theUrl , {mode: 'cors'})
        let data = await response.json();
        //Get data from api and change html content based on the recieved data
        let temp_data = data.main.temp
        temp.textContent = temp_data;
        let feels_like_data = data.main.feels_like;
        feels_like.textContent = feels_like_data + "K";
        let humidity_data = data.main.humidity;
        humidity.textContent = humidity_data;
        let {icon} = data.weather[0];
        locationIcon.innerHTML = `<img src="icons/${icon}.png">`;

         //change K to C
         degree_section.addEventListener('click', ()=>{
             //logging a message just to check if it is working
            console.log("c")
        })
         
        

    }catch(err){
        let error = document.createElement('span')
        error.className = "error";
        error.textContent = "Location does not exist"
        let top_center_div = document.querySelector('.top-center')
        top_center_div.appendChild(error)
        city_name.textContent = "No city found"
    }  
}






searchbtn.addEventListener('click', (e)=>{
    let cityName = city.value;
    city_name.textContent = cityName
    console.log(cityName)
    getUrl(cityName)
})

Thank you in advance!

how do i check the textcontent inside a button. the if statement isnt recognising the text

Linkedin search result
so on the search page i want to only select the buttons with connect on them. the if statement doesnt seem to check if connect is the text content.

 var buttons = document.getElementsByClassName(
'artdeco-button artdeco-button--2 artdeco-button--secondary ember-view'


)

  for (var i = 0; i < buttons.length; i++) {
    console.log(buttons[i].textContent)
    if (buttons[i].textContent == 'Connect') {
      console.log(i)
    }
    
  }

result
Shouldnt the connect have an corresponding i?

Cannot create pdf of current electron browser. Have problem with method printToPDF

With the code snippets below, I am trying to create a pdf file showing the contents of the electron browser.

I am seeing first three console logs, but cannot see the one right after the printToPDF method.
Looks like it got stuck reaching printToPDF method and I have no error messages to share.
Any idea why cannot go further ?

Main.js:

"use strict";
const electron = require('electron')
const fs = require('fs')
const app = electron.app
const BrowserWindow = electron.BrowserWindow
const ipc = electron.ipcMain
const path = require('path')
const url = require('url')
const shell = electron.shell

ipc.on("print-to-pdf", function (event) {
console.log("reached to ipc");
const pdfPath = "C:\Temp\print.pdf";
console.log("pdfPath:" + pdfPath);
const win = BrowserWindow.fromWebContents(event.sender);
console.log("created const win");
win.webContents.printToPDF({printBackground: true, landscape: true},function (error, data) {
    console.log("reached to printToPDF method:");
    if (error) throw error;
    fs.writeFile(pdfPath, data, function (error) {
    if (error) {
        throw error;
    }
    shell.openExternal("file://" + pdfPath);
    event.sender.send("wrote-pdf", pdfPath);
    });
});
});

Object key based on array values

I have array: const arr = ['foo', 'bar', 'bax'];

I want to create an object based on array entries:

const obj = {
  foo: true,
  bar: true,
  bax: false,
  fax: true, // typescript should show error here because "fax" is not in "arr"
};

How to tell typescript that all keys of obj must be inside arr?

Converting an array of data to JSON using a property map

I am trying to convert a 2d array into a json object using a key map.
The key map looks like

var keys = ['id', 'title', 'customer.id', 'customer.name', 'customer.phone.home', 'customer.phone.mobile' ];

and the data is

var data = [
  [1, 'Task 1', 'C1', 'Customer 1', '999', '8888'],
  [2, 'Task 2', 'C2', 'Customer 2', '333', '5555']
];

Output JSON should be

    var output = [
   {
      "id":1,
      "title":"Task 1",
      "customer":{
         "id":"C1",
         "name":"Customer 1",
         "phone":{
            "home":"999",
            "mobile":"8888"
         }
      }
   },
   {
      "id":2,
      "title":"Task 2",
      "customer":{
         "id":"C2",
         "name":"Customer 2",
         "phone":{
            "home":"333",
            "mobile":"5555"
         }
      }
   }
];

I am trying to do it something like but I am not good here making smerecursion etc. Could anyone help please?

function arrToJSON(headers, data){
  var output = [];
  data.forEach(row, index){
    var cObj = {};
    headers.forEach(header, itemIndex){
      var headerParts = header.split('.');
      // NOt sure what to do here
    }
  }
}

function callback give an error while using inside onload event

I am trying to return value within onload function via callback but console give me Uncaught TypeError: callback is not a function

async function base64SquareCrop(imgbase64, size = 224, callback) {
const img = document.createElement("img");
await img.setAttribute("src", imgbase64);

let width = 1240;
let height = 698;
const min = Math.min(width, height);
const scale = size / min;
const scaledW = Math.ceil(width * scale);
const scaledH = Math.ceil(height * scale);
const dx = scaledW - size;
const dy = scaledH - size;
canvasImage.width = canvasImage.height = size;
const ctx_img = canvasImage.getContext("2d");
img.onload = function() { ctx_img.drawImage(
    img,
    ~~(dx / 2) * -1,
    ~~(dy / 2) * -1,
    scaledW,
    scaledH
);
var sss = canvasImage.toDataURL("image/png");
callback(sss);
}

Send IPC message from main process to renderer process Electron

Currently I have an Electron menu with a save button on it. When this save button is pressed I wish to send an event to the renderer process, for the renderer to handle the event.

Here is what I have attempted:

Menu Source

const menuTemplate = [
    {
        label: "File",
        submenu: [
            {
                label: "Save",
                accelerator: "Ctrl+S",
                click: () => {
                    BrowserWindow.getFocusedWindow().webContents.send("save");
                }
            },
        ]
    },
]

Renderer Source

ipc.on("save", () => {
    console.log("save");
})

When trying this I get no output whatsoever when pressing the save button, including no errors. I can confirm that the correct menu is being utilised by Electron and that the click() function is executing. I can also confirm that ipc.on is indeed defined in the renderer.

How can I get this working? Thanks in advance.

require from exported file in node script

Trying to require .ts file that uses the export syntax in .js node script and getting the following error:

export {
^^^^^^

SyntaxError: Unexpected token 'export'

How can I do it succesfully? I can’t use babel or change anything in package.json. Any ideas?

How can i toggle innerHTML inside a setInterval() function with JS

I am trying to alternate the innerHTML of a at set Intervals.

Dear friends,

I am new to coding. I have created a div with an image, and a < p > element (that includes a < span >.

I have assigned two classes to the div, and I want it to alternate between the 2 classes at set intervals.
In addittion, I am trying to toggle the text inside the span, by using innerHTML.

So far I have managed succesfully to toggle the class, but I can’t make the innerHTML to work.

I have the following code:


   if(categProducts[idx].discount && categProducts[idx].low){
                      
   
                       var Interval = setInterval(
                       function changeClass(){
                       document.getElementById('myDiv').classList.toggle("low");          
                       },3000
                       )
   
                       var Interval2= setInterval(function changeText(){ 
                       var x=document.getElementById('mySpan').innerHTML
                          if (x==="<br> Only Few Cakes&nbsp;Left!!"){
                           x.innerHTML="<br> Discount! Best Price!!"
                       }
                       else {
                           x="<br> Only Few Cakes&nbsp;Left!!"
                       }
                       console.log(x)
                   }, 3000)
    
                    
                   }

So far, the innerHTML of the only toggles once, and then it doesn’t change again.
I can’t make it work and I don’t understand why.

The rest of the code is the following:

 for (let idx in categProducts){
                   
                    if (categProducts[idx].category==="cakes") {
                
                const parentElement=document.getElementById("divCakes")
                const myDiv=document.createElement("div")               
                parentElement.appendChild(myDiv)
                myDiv.className="product"
                const myImg=document.createElement("img")
                myImg.src=categProducts[idx].imageURI
                myImg.alt=categProducts[idx].alt
                myDiv.appendChild(myImg)
                myDiv.id="myDiv"
                const myP=document.createElement("p")
                myP.innerHTML=categProducts[idx].name
                myDiv.appendChild(myP)
                mySpan=document.createElement("span")
                myP.appendChild(mySpan)
                mySpan.id="mySpan"

vue mounted with Leaflet KML layer plugin doesn’t load kml layers into map

I’m trying to load a simple KML layer into my leaflet map, I’m using the
Leaflet KML layer plugin with vue.js
for some reason, this doesn’t work and return invalid bounds from the L.KML.js script
just mention that if I’m running this code as a plain HTML file like in the example all works well, what can go wrong by using this plugin with vue.js?

code snippets for the vue mounted and the HTML example

  mounted() {
    this.setupMap();
  },
  methods: {
    setupMap() {
      const map = new L.Map("map", {
        center: new L.LatLng(58.4, 43.0),
        zoom: 11,
      });
      const osm = new L.TileLayer(
        "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      );

      map.addLayer(osm);

      // Load kml file
      fetch("@/assets/kml.kml")
        .then((res) => res.text())
        .then((kmltext) => {
          // Create new kml overlay
          const parser = new DOMParser();
          const kml = parser.parseFromString(kmltext, "text/xml");
          const track = new L.KML(kml);
          map.addLayer(track);

          // Adjust map to show the kml
          const bounds = track.getBounds();

          map.fitBounds(bounds);
        });
    }

<html>
    <head>
        <link rel="stylesheet" href="http://unpkg.com/[email protected]/dist/leaflet.css" />
        <script src="http://unpkg.com/[email protected]/dist/leaflet.js"></script>
        <script src="./L.KML.js"></script>
    </head>
    <body>
        <div style="width: 100vw; height: 100vh" id="map"></div>
        <script type="text/javascript">
            // Make basemap
            const map = new L.Map('map', { center: new L.LatLng(58.4, 43.0), zoom: 11 });
            const osm = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');

            map.addLayer(osm);

            // Load kml file
            fetch('assets/example1.kml')
                .then(res => res.text())
                .then(kmltext => {
                    // Create new kml overlay
                    const parser = new DOMParser();
                    const kml = parser.parseFromString(kmltext, 'text/xml');
                    const track = new L.KML(kml);
                    map.addLayer(track);

                    // Adjust map to show the kml
                    const bounds = track.getBounds();
                    map.fitBounds(bounds);
                });
        </script>
    </body>
</html>

how do i make a page automatically render an image when clicked

I am workin on an e commerce website . I want to create this feature but i am having a little difficulty . When a user clicks on an image , it redirects them to a page that contains more details about the selected item and a little carousel that enables the user see different angle of the cloth selected . I dont want tp hard code this for all features on the project . I would love to create a component that cam serve this purpose . I am using Next js for React , Thank you

here is my code
This is an example of a shirt component file . I
import Image from “next/image”;

import products from "../product/MenShoes/MenShoes";
import Items from "../app/Items";


function ShirtComp ({}) {

    return (

        <div className="grid grid-flow-row-dense md:grid-cols-2 lg:grid-cols-3">
            {
                products.map(({id, name, price, size, image }) => {
                    return <Items
                        key={id}
                        id={id}
                        name={name}
                        price={price}
                        size={size}
                        image={image}
                    />
        
                })
            }
        </div>
    )
}
export default ShirtComp

THIS IS THE ITEM FILE

import Image from "next/image";
import { useDispatch } from "react-redux";
import { addToBasket } from "../slices/basketSlice";

import { useRouter } from "next/router";

function Items({ id, name, price, size, image } ) {
 
    const router = useRouter();

 
 
    const dispatch = useDispatch();
 
 
 
    const addItemToBasket =()=>{
        const product = {
            id,
           image,
            name,
            size,
            price,
        };

        dispatch(addToBasket(product))
   }
    return (
        <div className="relative flex flex-col m-5 bg-white z-30 p-10">
            <img  onClick={() => router.push('/Description')} src={image} height={400} width={400} objectFit="contain" className="cursor-pointer"/>
            <p className="my-3 pr-5">{name}</p>
            <p className="mb-5">{size}</p>
            <p className="mb-5"> ${price}</p>
            <button onClick={addItemToBasket} className="mt-auto button">Add to cart</button>
            
        </div>
        
    )
 

}

export default Items

How di i please make on click of the image tag . the image clicked is automatically rendered in another page , I hope who ever reads this gets what i am talking about .

In JavaScript (specifically node.js) how can I generate a reusable list of dynamically generated and incremented variable names using a for loop?

I’m creating a custom Gutenberg block using node.js and REACT. Eventually this will be a Bootstrap slider that can have slides added dynamically. For each slide the user needs to upload a video or image. I am doing this using the built-in component that is part of @wordpress/block-editor.

I’ve added 3 <MediaUpload> components in the <InspectorControls> that will display in the right block controls column in WordPress.

The work by calling an “onChange” function that updates the backgroundImage attribute that is originally set in block.json.

<InspectorControls>
    <PanelRow>
        <fieldset class="media-upload">
        <strong>Select slide 1 video or image:</strong>
            <MediaUpload
                onSelect={onImageSelect}
                type={ [ 'image', 'video' ] }
                value={backgroundImage} 
                render={({ open }) => (
                    <button onClick={open}>
                        Upload Image!
                    </button>
                )}
            />
        </fieldset>
        <fieldset class="media-upload">
        <strong>Select slide 2 video or image:</strong>
            <MediaUpload
                onSelect={onImageSelect}
                type={ [ 'image', 'video' ] }
                value={backgroundImage}
                render={({ open }) => (
                    <button onClick={open}>
                        Upload Image!
                    </button>
                )}
            />
        </fieldset>
        <fieldset class="media-upload">
        <strong>Select slide 3 video or image:</strong>
            <MediaUpload
                onSelect={onImageSelect}
                type={ [ 'image', 'video' ] }
                value={backgroundImage}
                render={({ open }) => (
                    <button onClick={open}>
                        Upload Image!
                    </button>
                )}
            />
        </fieldset>
    </PanelRow>
</InspectorControls>

The function looks like this

const onImageSelect = ( imageObject ) => {
        setAttributes( { backgroundImage: imageObject.url } )
}

The problem is that in order for this to work I would have to create a separate function for every instance of the MediaUpload component, for example, onImageSelect1, onImageSelect2, onImageSelect3 and these would have to have the corresponding backgroundImage attribute incremented as well, e.g. backgroundImage1, backgroundImage2, backgroundImage3.

This is ok with a small case scenario like this, but I will add many more user controls for all kinds of aspects of the slider, so I need to know how I can do this in as few lines of code as possible.

I need to make the onImageSelect function dynamic. I’ve tried adding a “media-upload” class to each instance of the MediaUpload component and then use a for loop to loop through these and create incremented reusable variable names. I might be way of the mark here? I’m really struggling to write the loop; this is the result from my experimentation so far.

var thisClassName = 'media-upload';
    var items = document.getElementsByClassName(thisClassName);
    for (var i=0; i < items.length; i++) {
        items[i].setAttribute("id", "onImageSelect" +i);
        var hereItIs = items[i].id
        console.log(hereItIs)
    }

The output of the above was unexpected and I also can’t access any of the variable values inside the loop because they aren’t exposed to scope. I guess my main question is how can I generate a reusable list of dynamically generated and incremented variable names using a for loop?

My aim is to have

const onImageSelect1 = ( imageObject ) => {
        setAttributes( { backgroundImage1: imageObject.url } )
}

const onImageSelect2 = ( imageObject ) => {
        setAttributes( { backgroundImage2: imageObject.url } )
}

const onImageSelect3 = ( imageObject ) => {
        setAttributes( { backgroundImage3: imageObject.url } )
}

but, without writing it like this. I want a single function where onImageSelect and backgroundImage3 are being dynamically incremented based upon the number of MediaUpload components (or classes of its wrapper) the script finds on the page.

Removing and displaying Item dynamically from localstorage

I am new to React.js and working on a project finds deals for games, this is my wishlistdata component, my issue is that whenever I delete item from wishlist it gets removed from localstorage but the card doesnt disappear until the page is reloaded, also help me if my code is unclean. Thanks in advance.
Here is my code :

import Wishlist from "./Wishlist";
import "./Wishlist.css";
import "animate.css";
import axios from "axios";

const WishlistData = () => {
  const [gamedet, setGameDet] = useState([]);
  const [loaded, setLoaded] = useState(false);
  const [stores, setStores] = useState([]);
  const [price, setPrice] = useState([]);
  const [wishlist, setWishlist] = useState([]);

  useEffect(() => {
    setWishlist(localStorage.getItem("Wishlist") ? JSON.parse(localStorage.getItem("Wishlist")):[])
    },[setWishlist])

  const RemoveFromWishlist = (id) => {
     let newList = wishlist.filter((game) => game.gameID !== id);
    setWishlist(localStorage.setItem("Wishlist", JSON.stringify(newList)));
    localStorage.setItem("Wishlist", JSON.stringify(newList));
    console.log("id", wishlist);
    console.log("newlist", wishlist);
  };
  const DET_URL = `https://api.rawg.io/api/games`;
  useEffect(() => {
    let isCancelled = false;
    const RAWGdet = () => {
      wishlist && wishlist.map((game, index) => {
        return axios({
          url: `https://cors-anywhere.herokuapp.com/${DET_URL}/${game.gameID}?key=${process.env.REACT_APP_RAWG_KEY}`,
          headers: {
            "X-Requested-With": "XMLHttpRequest",
          },
          method: "GET",
        }).then((res) => {
          if (!isCancelled) {
            setGameDet((gamedet) => gamedet.concat(res.data));
          }
          setLoaded(true);
        });
      });
    };
    RAWGdet();
    return () => {
      isCancelled = true;
    };
  }, [DET_URL, wishlist]);

  console.log("wish", wishlist);
  useEffect(() => {
    let isCancelled = false;
    const CSPrice = () => {
      wishlist && wishlist.map((game, index) => {
        return axios({
          url: `https://cors-anywhere.herokuapp.com/${DET_URL}/${game.slug}/stores?key=${process.env.REACT_APP_RAWG_KEY}`,
          headers: {
            "X-Requested-With": "XMLHttpRequest",
          },
          method: "GET",
        }).then((res) => {
          if (!isCancelled) {
            setStores((stores) => stores.concat(res.data));
          }
          setLoaded(true);
        });
      });
    };
    CSPrice();
    return () => {
      isCancelled = true;
    };
  }, [DET_URL, wishlist]);

  let stm = [];

  stores
    .map((steam) => {
      return steam.results;
    })
    .filter((item) => {
      return item.map((id) => {
        return id.store_id === 1 ? stm.push(id.url) : <>{null}</>;
      });
    });
  // console.log("in", stm);
  let idmain = [];
  stm.map((steamid) => {
    return steamid.split("/").map((item) => {
      return idmain.push(item);
    });
  });

  useEffect(() => {
    return (
      <>
        { wishlist && wishlist.map((game, index) => {
          return (
            <div key={index}>
              {axios
                .get(
                  `https://www.cheapshark.com/api/1.0/deals?storeID=1,7,8,11,13,25&steamAppID=${game.steamID}`
                )
                .then((res) => {
                  setPrice((price) => price.concat(res.data));
                }, setLoaded(true))
                .catch((err) => {
                  console.log("ERR", err);
                })}
            </div>
          );
        })}
      </>
    );
  }, [wishlist]);
let tempArr1 = []
let temparr2= []

// console.log("gam2", tempArr2);

  if (loaded) {
    return (
      <div className="animate__animated animate__slideInDown">
        <div className="wishlist_header">
          <h3>Your Wishlist</h3>
        </div>
        {wishlist.length !== 0 ? (
          price.map((game1) => {
            let temp = {
              "steamAppID" : game1.steamAppID,
              "storeID" : game1.storeID,
              "normalPrice" : game1.normalPrice,
              "salePrice" : game1.salePrice
            };
            return tempArr1.push(temp) && tempArr2.push(temp.steamAppID);
          }) &&
          gamedet.map((game, index) => {
            // console.log("mad2", game.name);
            return (
              <div id="wishlist_ctn" key={index}>
                <Wishlist
                  key={index}
                  title={game.name}
                  steamRatingCount={game.id}
                  // steamRatingPercent={game[0].steamRatingPercent}
                  // savings={game[0].savings}
                  // normalPrice={}
                  // salePrice={salePrice}
                  steamAppID = {gamble2}
                  data={gamble}
                  image={game.background_image}
                  rem={() => RemoveFromWishlist(game.id)}
                />
              </div>
            );
          })
        ) : (
          <div className="wishlist_header">
            <h3>Add Games!!</h3>
          </div>
        )}
      </div>
    );
  } else {
    return (
      <div className="hmm">
        <div className="wishlist_header">
          <h3>Your Wishlist</h3>
        </div>
        <div className="wishlist_header">
          <h3>Loading Games</h3>
        </div>
        );
      </div>
    );
  }
};

export default WishlistData;

Firebase: Error (auth/missing-email) when the email definetly exists. Reactjs

Here is my code:

function loginWithEmailHandler() {
        signInWithEmailAndPassword(auth)
        .then((result) => {
            const user = result.user;
            console.log(user.email, user.displayName);
            navigate("/");
        })
        .catch((error) => {
            const errorCode = error.code;
            const errorMessage = error.message;
            setMode("INCORRECT");
            console.log(errorCode, errorMessage);
        });
    }

When I run this function in my LoginForm.js it gives the error stated in the title. I don’t know how I could check if it checking for the correct email or not so I am a bit stuck here.

Modal not showing up when linking to new page

I am trying to link a modal in a different page. But when I click the button to toggle modal, nothing comes up. I have two files: courses.php and addCourses.php. course.php is where the button to click the modal is from, and addCourses.php is the modal form that should appear but dosen’t

courses.php

 <div class="btn mb-2 mb-md-0">
      <a href='addCourses.php' class="btn btn-sm btn-gray-800 d-inline-flex align-items-center animate-up-2" data-bs-toggle="modal" data-bs-target="#modal-form"> Add Course </a>

      <!-- Modal -->
      <div class="modal fade" id="modal-form" tabindex="-1" role="dialog" aria-labelledby="modal-form" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
          <div class="modal-content rounded bg-white">
          </div>
        </div>
      </div>
    </div>

addCourses.php

  <div class="modal-body p-0">
    <div class="card bg-white p-4">
      <button type="button" class="btn-close ms-auto" data-bs-dismiss="modal" aria-label="Close"></button>
      <div class="card-header border-0 bg-white text-center pb-0">
        <h2 class="h4">Course Info</h2>
      </div>
      <div class="card-body">
        <!-- Form -->
        <form action="courses.php" method="post" class="mt-4">
          <div class="form-group mb-4">
            <label for="course_name">Course name:</label>
            <div class="input-group">
              <span class="input-group-text" id="basic-addon2"><span class="fas fa-hotel"></span></span>
              <input type="text" name="course_name" class="form-control" required>
            </div>
          </div>
          <div class="form-group mb-4">
            <label for="number">Course number:</label>
            <div class="input-group">
              <span class="input-group-text" id="basic-addon2"><span class="fas fa-door-open    "></span></span>
              <input type="text" name="number" class='form-control' required>
            </div>
          </div>
          <div class="form-group mb-4">
            <label for="number">Course desciption:</label>
            <div class="input-group">
              <span class="input-group-text" id="basic-addon2"><span class="fas fa-door-open    "></span></span>
              <input type="text" name="desc" class='form-control' required>
            </div>
          </div>

          <div class="form-group mb-4">
            <label for="number">Final grade:</label>
            <div class="input-group">
              <span class="input-group-text" id="basic-addon2"><span class="fas fa-door-open    "></span></span>
              <input type="text" name="grade" class='form-control' required>
            </div>
          </div>
          <div class="row mb-5 mb-lg-5">
            <div class="col-lg-4 col-md-6">
              <div class="form-group mb-4">
                <div class="mb-3">
                  <span class="fw-bold">Currently Enrolled</span>
                </div>
                <div class="form-check">
                  <input class="form-check-input" type="checkbox" name="checked">
                </div>
              </div>
            </div>
          </div>
          <div class="d-grid">
            <button type="submit" class="btn btn-primary" name="add_course" value="Create Property">Add course</button>
          </div>
        </form>
      </div>
    </div>
  </div>

both files have the same CSS and JS applied to them, so what am I doing wrong?