I’m fairly new to coding and have been learning and building a personal archival database using SQL over the past few months. However, I would also like to develop a simple (at first) UI to use for viewing and interacting with the stored data. Think along the lines of a library or museum’s digital catalogue where you have a list of entries you can scroll through, each showing basic info, but then can click on any one entry to see more in-depth (linked) data.

What language would you suggest using for this? In preliminary searching, it seems like either JavaScript or a C language would be good options, but I don’t have enough experience to feel confident in fully deciding without additional input. What would you say are the benefits and drawbacks of different possibilities?

For greater detail:

• I’m planning on using PostgresSQL because (afaik) it’s better at handling complex data relations and large data sets, which is ideal for my goals.

• Most of my experience is in data collection, table creation, data manipulation/interpretation, and similar areas. While this is a personal project, I am hoping to learn some functional skills that could be applicable to a career in archival work (such as with a library, archive, museum, historical records, etc) and anthropology/archaeology, which is what I’m going to school for.

• I have basic background knowledge of general programming principles, as well as previous beginner courses in JavaScript and Python, so no matter what I’ll be learning a language (or two) from a beginner level.

please am having issue creating a rounded custom image indicator around album image, the dot indicator is breaking out on page load but when i press play it move back to the circle , html, i want to create custom music player, any suggestion we do

const img = document.querySelector("#img");
const playPause = document.querySelector("#playpause");
const playPauseBtn = document.querySelector("#playpause-btn");
const audio = document.querySelector("#audio");
const title = document.querySelector("#title");
const prevBtn = document.querySelector("#prevbtn");
const nextBtn = document.querySelector("#nextbtn");
const progress = document.querySelector("#progress");
const progressIndicator = document.querySelector(".progress-indicator");
const repeatBtn = document.querySelector("#repeat");

const songs = [{
    path: 'https://raw.githubusercontent.com/ustabasiibrahim/music-player/master/assets/music/1.mp3',
    displayName: 'Yıldız Tozu',
    artist: 'Ozbi',
    cover: "https://images.genius.com/ee202c6f724ffd4cf61bd01a205eeb47.1000x1000x1.jpg",
  },
  {
    path: 'https://raw.githubusercontent.com/ustabasiibrahim/music-player/master/assets/music/2.mp3',
    displayName: 'You're Somebody Else',
    artist: 'flora cash',
    cover: "https://pbs.twimg.com/media/D2NZH-2U4AAL9Xs.jpg",
  },

];

let songIndex = 2;
let isPlaying = false;

function playSong() {
  isPlaying = true;
  playPauseBtn.classList.replace("fa-play", "fa-pause");
  audio.play();
}

function pauseSong() {
  isPlaying = false;
  playPauseBtn.classList.replace("fa-pause", "fa-play");
  audio.pause();
}

function loadSong(song) {
  img.src = song.cover;
  title.textContent = song.displayName;
  audio.src = song.path;
}

function prevSong() {
  songIndex--;
  if (songIndex < 0) {
    songIndex = songs.length - 1;
  }
  loadSong(songs[songIndex]);
  playSong();
}

function nextSong() {
  songIndex++;
  if (songIndex > songs.length - 1) {
    songIndex = 0;
  }
  loadSong(songs[songIndex]);
  playSong();
}

function updateProgress(e) {
  if (isPlaying) {
    const {
      duration,
      currentTime
    } = e.target;
    const progressPercent = (currentTime / duration) * 100;
    progress.value = progressPercent;
    const indicatorAngle = (progressPercent / 100) * 360;
    const indicatorX = Math.cos((indicatorAngle - 90) * (Math.PI / 180)) * 160 + 160;
    const indicatorY = Math.sin((indicatorAngle - 90) * (Math.PI / 180)) * 160 + 160;
    progressIndicator.style.transform = `translate(${indicatorX}px, ${indicatorY}px)`;
  }
}

function progressSlide(e) {
  const {
    value
  } = e.target;
  const progressTime = Math.ceil((audio.duration / 100) * value);
  audio.currentTime = progressTime;
  if (!isPlaying) {
    const indicatorAngle = (value / 100) * 360;
    const indicatorX = Math.cos((indicatorAngle - 90) * (Math.PI / 180)) * 160 + 160;
    const indicatorY = Math.sin((indicatorAngle - 90) * (Math.PI / 180)) * 160 + 160;
    progressIndicator.style.transform = `translate(${indicatorX}px, ${indicatorY}px)`;
  }
}

function repeat() {
  repeatBtn.classList.toggle('color');
  if (repeatBtn.classList.contains("color")) {
    audio.loop = true;
  } else {
    audio.loop = false;
  }
}

playPause.addEventListener("click", () => (isPlaying ? pauseSong() : playSong()));
prevBtn.addEventListener("click", prevSong);
nextBtn.addEventListener("click", nextSong);
audio.addEventListener("timeupdate", updateProgress);
progress.addEventListener("input", progressSlide);
repeatBtn.addEventListener("click", repeat);

loadSong(songs[songIndex]);

.music-player-unique {
  max-width: 350px;
  margin: auto;
}

.disc-container-unique {
  position: relative;
  width: 300px;
  height: 300px;
  margin: auto;
}

.disc-image-unique {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 5px solid #343a40;
}

.progress-container-unique {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  border: 4px solid black;
  box-shadow: 0 17px 33px rgb(189 190 193 / 1);
  display: flex;
  justify-content: center;
  align-items: center;
}

.progress-unique {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 2px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  cursor: pointer;
}

.progress-indicator {
  position: absolute;
  width: 16px;
  height: 16px;
  background-color: #007bff;
  border-radius: 50%;
  top: -8px;
  left: -8px;
  transform: translateX(0);
}

.song-title-unique {
  font-size: 18px;
  font-weight: bold;
  color: #343a40;
}

.controls-unique {
  display: flex;
  justify-content: center;
  align-items: center;
}

.controls-unique .btn-unique {
  background-color: transparent;
  border: none;
  font-size: 32px;
  color: #343a40;
  margin: 0 10px;
}

.controls-unique .btn-unique:hover {
  color: #007bff;
}

<div class="container text-center mt-5">
  <div class="music-player-unique">
    <div class="disc-container-unique">
      <img id="img" src="/src/images/music-1.jpg" alt="Music Disc" class="disc-image-unique">
      <div class="progress-container-unique">
        <input type="range" id="progress" value="0" class="progress-unique">
        <div class="progress-indicator"></div>
      </div>
    </div>
    <div class="song-title-unique mt-3" id="title">Song Title</div>
    <div class="controls-unique mt-4">
      <button id="repeat" class="btn-unique"><i class="fa-regular fa-repeat"></i></button>
      <button id="prevbtn" class="btn-unique"><i class="fa-regular fa-backward"></i></button>
      <button id="playpause" class="btn-unique"><i id="playpause-btn" class="fa-regular fa-play"></i></button>
      <button id="nextbtn" class="btn-unique"><i class="fa-regular fa-forward"></i></button>
      <button id="list" class="btn-unique"><i class="fa-regular fa-list"></i></button>
    </div>
    <audio id="audio"></audio>
  </div>
</div>

i have tried my best to make it work but seem not working, the dot not working well

I’m curious about the feasibility of using the browser extension’s API directly from a standard website. Specifically, I want to understand if there’s a way to interact with the browser API from my web page’s JavaScript while complying with all security measures. I have some background in developing extensions, so I’m familiar with content scripts, background scripts, and message passing. Still, I’m unsure if it’s possible and how to apply these concepts in this context. It should be impossible, but asking is better than giving up.

Here are some aspects I’m curious about:

1. Is it possible for a web page to call a browser API?
2. Ensure that such interaction complies with browser security policies and respects user privacy. In extensions, this is the role of the manifest.json. Is there any other similar tool for websites?

From my understanding, content scripts might play a role, but I am unclear on how to set this up securely. Can anyone provide insights, examples or prototypes? I’m super curious about them.

To be clear, I’m currently developing an extension, not a website, but I want to explore, go crazy, and see all the possibilities and constraints. Any pointers to relevant, meaningful documentation or information would be greatly appreciated! They should be related to websites, not extensions.

Enabled WPRocket Delay JavaScript execution in WordPress and it works everywhere EXCEPT home page for some reason? Checking it by going to network tab and for every page scripts are delayed just fine but not on the home page.

Followed these instructions: https://docs.wp-rocket.me/article/1349-delay-javascript-execution

Thoughts?

When i am going to clicking print button print dialog box is working fine with my side, but some users are complaining they are not getting print dailog after clicking print button into production site, i have check from my side locally and production but both side working fine not able to find any issue from my side, please suggest.

Below is my html

below is my angular component methods on button click

  public downloadPDF() {
    var printContents = document.getElementById('contentToConvert').innerHTML;
    debugger;
    if (this.Popup(printContents)) {
    }
  }

 Popup(data) {
    debugger;
    var mywindow = window;
    if (this.islogo)
    mywindow.document.write('<!DOCTYPE html><html><head><link rel="stylesheet" href="style.css" /><style>.container-fluid {width: 100%;padding-right: 15px;padding-left: 15px;margin-right: auto;margin-left: auto}div {box-sizing: border-box}.label {font-weight: 600 !important;margin-right: 5px !important;}label {display: inline-block;margin-bottom: .5rem}.items-group {border-style: solid;border-color: #000;border-width: 1pt 1pt 1pt 1pt;border-radius: 5pt;padding: 3pt 3pt 3pt 3pt;margin: 9pt 0 9pt 0}.logotipo {width: 6cm;height: 4cm;margin: -.5cm}.label {font-weight: 500}.address p, .disclaimer {font-size: 10pt}.signature-ield {padding-bottom: 24pt;border-bottom: solid #000 1pt}.align-r {text-align: right}.align-l {text-align: left}.align-c {text-align: center}.border-none {border: none !important}.col-1 {flex: 0 0 .33333333%;max-width: 8.33333333%}.col-12 {flex: 0 0 100%;max-width: 100%;}.col-4 {flex: 0 0 33.33333333%;max-width: 33.33333333%;}.no-gutters > .col, .no-gutters > [class*=col-] {padding-right: 0;padding-left: 0}.col-5 {flex: 0 0 41.66666667%;max-width: 41.66666667%}.col-3 {flex: 0 0 25%;max-width: 25%}.no-gutters > .col, .no-gutters > [class*=col-] {padding-right: 0;padding-left: 0}.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto {width: 100%;position: relative;min-height: 1px;display: inline-block}.float-left {float: left !important}.col-10 {flex: 0 0 83.33333333%;max-width: 83.33333333%}.col-2 {flex: 0 0 16.66666667%;max-width: 16.66666667%;}.col-6 {flex: 0 0 50%;max-width: 50%}.no-gutters > .col, .no-gutters > [class*=col-] {padding-right: 0;padding-left: 0}h1 {font-size: 18pt;font-weight: 500;margin-bottom: .5cm}.card-title, .text-title, h1, h2, h3, h4, h5, h6 {color: #332e38}.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {font-family: inherit;font-weight: 500;line-height: 1.2}.h4, h4 {font-size: 1.2195rem}header {font-size: 10px}@page {size: A4;margin-top: 11mm;margin-bottom: 5mm;margin-left: 11.98mm;margin-right: 11.98mm}.page-header, .page-header-space {height: 100px;}.page-footer, .page-footer-pace{height: 80px;}.page-footer {position: fixed;bottom: 0;width: 100%;padding-left: 20px;/*border-top: 1px solid black; for demo *//*background: yellow; for demo */}.page-header {position: fixed;top: 0mm;width: 100%;/*border-bottom: 1px solid black; for demo *//*background: yellow; for demo */padding-left: 20px;}.page {page-break-after: always;}@page {margin: 20mm}@media print {thead {display: table-header-group;}tfoot {display: table-footer-group;}button {display: none;}body {margin: 0;font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 12px;letter-spacing: .3px;line-height: 1.6;}}</style></head><body><div class="page-header" style="z-index:1000;background: white">');
    else
    mywindow.document.write('<!DOCTYPE html><html><head><link rel="stylesheet" href="style.css" /><style>.container-fluid {width: 100%;padding-right: 15px;padding-left: 15px;margin-right: auto;margin-left: auto}div {box-sizing: border-box}.label {font-weight: 600 !important;margin-right: 5px !important;}label {display: inline-block;margin-bottom: .5rem}.items-group {border-style: solid;border-color: #000;border-width: 1pt 1pt 1pt 1pt;border-radius: 5pt;padding: 3pt 3pt 3pt 3pt;margin: 9pt 0 9pt 0}.logotipo {width: 6cm;height: 4cm;margin: -.5cm}.label {font-weight: 500}.address p, .disclaimer {font-size: 10pt}.signature-ield {padding-bottom: 24pt;border-bottom: solid #000 1pt}.align-r {text-align: right}.align-l {text-align: left}.align-c {text-align: center}.border-none {border: none !important}.col-1 {flex: 0 0 .33333333%;max-width: 8.33333333%}.col-12 {flex: 0 0 100%;max-width: 100%;}.col-4 {flex: 0 0 33.33333333%;max-width: 33.33333333%;}.no-gutters > .col, .no-gutters > [class*=col-] {padding-right: 0;padding-left: 0}.col-5 {flex: 0 0 41.66666667%;max-width: 41.66666667%}.col-3 {flex: 0 0 25%;max-width: 25%}.no-gutters > .col, .no-gutters > [class*=col-] {padding-right: 0;padding-left: 0}.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto {width: 100%;position: relative;min-height: 1px;display: inline-block}.float-left {float: left !important}.col-10 {flex: 0 0 83.33333333%;max-width: 83.33333333%}.col-2 {flex: 0 0 16.66666667%;max-width: 16.66666667%;}.col-6 {flex: 0 0 50%;max-width: 50%}.no-gutters > .col, .no-gutters > [class*=col-] {padding-right: 0;padding-left: 0}h1 {font-size: 18pt;font-weight: 500;margin-bottom: .5cm}.card-title, .text-title, h1, h2, h3, h4, h5, h6 {color: #332e38}.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {font-family: inherit;font-weight: 500;line-height: 1.2}.h4, h4 {font-size: 1.2195rem}header {font-size: 10px}@page {size: A4;margin-top: 11mm;margin-bottom: 5mm;margin-left: 11.98mm;margin-right: 11.98mm}.page-header, .page-header-space {height: 10px;}.page-footer, .page-footer-pace{height: 10px;}.page-footer {position: fixed;bottom: 0;width: 100%;padding-left: 20px;/*border-top: 1px solid black; for demo *//*background: yellow; for demo */}.page-header {position: fixed;top: 0mm;width: 100%;/*border-bottom: 1px solid black; for demo *//*background: yellow; for demo */padding-left: 20px;}.page {page-break-after: always;}@page {margin: 5mm}@media print {thead {display: table-header-group;}tfoot {display: table-footer-group;}button {display: none;}body {margin: 0;font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 12px;letter-spacing: .3px;line-height: 1.6;}}</style></head><body><div class="page-header" style="z-index:1000;background: white">');

    if (this.islogo)
    mywindow.document.write('<img src="/assets/images/logo.png" width="200" height="68" alt=""  />');

    mywindow.document.write('</div><div class="page-footer" style="padding: 70px 0px 0px 0px;" >');
    if(this.islogo)
      mywindow.document.write('<div style="border-top: 1px solid black; font-size: 8px; z-index:1000;background: white">hi how are you</div>');
    mywindow.document.write('</div><table><thead><tr><td><!--place holder for the fixed-position header--><div class="page-header-space"></div></td></tr></thead><tbody><tr><td><!--*** CONTENT GOES HERE ***--><div class="page">');
    mywindow.document.write(data);
    debugger;
    mywindow.document.write('</div></td></tr></tbody><tfoot><tr><td><!--place holder for the fixed-position footer--><div class="page-footer-space"></div></td></tr></tfoot></table></body></html>');
    mywindow.print();
    mywindow.close();

    return true;
  }

I can’t manage to change my code to form where I will obtain switch off of the entire menu everytime I will click on the background outside this menu. For now only orange background part has this option and I want to switch off the entire menu including part with black background when I will click outside.

I was trying to add another addEventListener and I have experimented with code inside if… then… statements but it wasn’t work as I want.

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<div class="hamburger" title="Open menu">
        <span class="cross-line"></span>
        <span class="cross-line"></span>
        <span class="cross-line"></span>
    </div>
    <ul class="sidebar">
        <li class="menu"><i class="fas fa-dove"></i>News from SH-Lab
        <div class="item">
      <a href="news.html">News</a>
      <a href="projekty.html">Projects</a>
      <a href="goals.html">Main goals</a>
       <a href="pasja.html">Pasja elektroniki</a>
       <a href="pasjainfo.html">Informatyka i programowanie</a>
       <a href="machining.html">Machining</a></div>
      <li class="menu"><i class="fas fa-lightbulb"></i>Energy
        <div class="item">
          <a href="plazma.html">Plasma</a>
          <a href="source.html">Źródła energii</a>
          <a href="hydrogen.html">Energia z wodoru</a>
          <a href="water.html">Water power</a>
          <a href="reaktoranihilacyjny.html">Reaktor anihilacyjny</a>
          <a href="piezo.html">Pola i piezoelektryczność</a>
          <a href="bezw.html">Prąd z bezwładności</a>
          <a href="teg.html">Prąd z efektu Seebecka</a>
          <a href="nap2.html">Various inertial propulsion types</a>
          <a href="fg.html">Fale grawitacyjne</a>
              <a href="spring.html">Spring motor</a>
        <a href="powerplant.html">Power plant</a>
        <a href="magrotor.html">Spring magnetic rotor</a>
         <a href="several.html">Several maglev techniques</a>
         <a href="thermal.html">Thermal precise propulsion</a>
         <a href="inertialrail.html">Inertial technics</a>
         <a href="train.html">Autonomous motion train</a>
         <a href="elektromagnetyzm.html">Elektromagnetyzm</a>
         <a href="wszech.html">Wszechświat i technologia</a>
         <a href="genst.html">Generator tarczowy</a>
         <a href="gravitypowerplant.html">Elektrownia</a></div></li>
         <li class="menu"><i class="fas fa-atom"></i>New physic
        <div class="item">
        <a href="fusion.html">Fuzja</a>
        <a href="grawitacja.html">Grawitacja</a>
        <a href="magneticacc.html">Magnetic accelerator</a>
        <a href="gravitycontrol.html">Gravity control</a>
        <a href="pole.html">Pole magnetyczne</a>
        <a href="inertial.html">Inertial fields, tachion vortexes</a>
        <a href="neutrino.html">Neutrino</a>
        <a href="neznane.html">Nieznane siły kosmosu</a>
        <a href="polesilowe.html">Pole siłowe</a>
        <a href="tbpm.html">3-poles magnetic field</a>
        <a href="cm.html">Ciemna materia</a>
        <a href="antym.html">Antymateria</a>
        <a href="antyg.html">Antygrawitacja czy inercja</a>
        <a href="kawit.html">Kawitacja i implozja</a>
        <a href="tel.html">Teleportacja i superkomputery</a>
        <a href="czas.html">Zjawisko czasu</a>
         <a href="napb.html">Napęd bezwładnościowy</a>
         <a href="nap1.html">Napęd 4-rolkowy</a>
         <a href="thesituation.html">The Situation</a>
         <a href="geopropulsion.html">Geopropulsion</a></div></li>
        <li class="menu"><i class="fas fa-dna"></i>Genetics and chemistry
        <div class="item">
        <a href="modyfikacje.html">Modyfikacje wirusów</a>
        <a href="chemia.html">Chemia w przyrodzie</a>
        <a href="genetyka.html">Genetyka</a>
        <a href="reactions.html">Odmienne reakcje chemiczne</a>
        <a href="fuels.html">Paliwa</a>
        <a href="arvir.html">Replikatory</a>
        <a href="bioinformatyka.html">Bioinformatyka</a>
        <a href="gmo.html">GMO</a>
        <a href="telomery.html">Telomery</a>
        <a href="af.html">Sztuczna fotosynteza</a>
        <a href="tg.html">Terapie genowe</a>
        <a href="klon.html">Klonowanie</a>
        <a href="komorki.html">Komórki macierzyste</a>
        <a href="plastik.html">Plastik i bakterie</a>
        <a href="paliwo.html">Biopaliwo i algi</a></div>
        <li class="menu"><i class="fas fa-globe-africa"></i>Civilization problems
        <div class="item">
        <a href="kardaszew.html">Skala Kardaszewa</a>
        <a href="elektronika.html">Przyszłość elektroniki</a>
        <a href="iiws.html">Tajemnice II WŚ</a>
        <a href="nowewyzwania.html">Nowe wyzwania</a>
        <a href="swiatodpodszewki.html">Świat od podszewki</a>
        <a href="kregi.html">Kręgi zbożowe</a>
        <a href="wszechswiat.html">Wszechświat wczoraj i dziś</a>
        <a href="przeszlosc.html">Przeszłość i teraźniejszość</a>
        <a href="coanda.html">Efekt Coandy</a>
        <a href="podroze.html">Podróże międzyplanetarne</a>
        <a href="urzadzenia.html">Urządzenia i generatory napędu</a>
        <a href="cywilizacja.html">Cywilizacja a religia</a>
        <a href="pleiadians.html">Pleiadians and the others</a>
        <a href="medycyna.html">Medycyna</a>
        <a href="system.html">System</a>
        <a href="kata.html">Katastrofy-dzień sądu</a>
        <a href="cyborg.html">Cyborgizacja, a robotyzacja</a>
        <a href="ziemia.html">Ziemia</a>
        <a href="inertialmag.html">Napęd magnetyczno-inercyjny</a></div></li>
        <li class="menu"><i class="fas fa-rocket"></i>Space exploration
        <div class="item">
        <a href="robotics.html">Robotics</a>
        <a href="device.html">The device</a>
        <a href="exoplanets.html">Planety pozasłoneczne</a>
        <a href="gk.html">Górnictwo kosmiczne</a>
        <a href="naprak.html">Napęd rakietowy</a>
        <a href="nrem.html">Eksploracja Marsa</a>
        <a href="seti.html">SETI</a>
        <a href="ftl.html">FTL Travel</a>
        <a href="gwiazdy.html">Gwiazdy</a>
        <a href="galaktyki.html">Galaktyki</a>
        <a href="solarsys.html">System słoneczny</a>
        <a href="planety.html">Planety</a>
        <a href="gyro.html">Gyro-propulsion</a>
        <a href="mar.html">Rotor</a>
         <a href="thepropulsion.html">The Propulsion</a>
         <a href="inertia.html">Inertialess propulsion</a>
         <a href="gravityprop.html">Gravity propulsion engine</a>
         <a href="wobble.html">A wobbling drive</a>
         <a href="nap.html">Napęd inercyjny typ 2</a>
         <a href="spacestations.html">Stacje kosmiczne</a>
         <a href="jolt.html">Jolt drives</a></div></li>
        <li class="menu"><i class="fas fa-microchip"></i>Nanotechnology
        <div class="item">
        <a href="nanorobotics.html">Nanorobots</a>
        <a href="nanotechnics.html">Nano-technics</a>
        <a href="zapis.html">Zapis danych w skali atomowej</a>
        <a href="super.html">Supermateriały</a></div></li>
        <li class="menu"><i class="fas fa-donate"></i>Donations, contact &amp; support
        <div class="item">
        <a href="donation.html">Make donation</a>
        <a href="contact.html">Contact</a>
        <a href="support.html">Other support</a>
        <a href="questions.html">Questions or comments</a>
        <a href="get.html">Get involved</a>
        <a href="faq.html">FAQ</a></div></li>

@import url('https://fonts.googleapis.com/css2?family=Madimi+One&display=swap');
* {
  padding:0;
  margin:0;
  }
body{
  background-color:rgb(10,10,10);
}
button, li, h3, p, div, a {font-family: "Madimi One", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size:15px;
}
a {
text-decoration: none;
}

.sidebar{
  transform-origin: left top;
  user-select:none;border:4px solid rgb(255, 94, 0);
  width:300px;height:fit-content;display:none;padding-top:130px;border-radius:25px;padding-bottom:100px;
position:fixed;z-index:11;top:10px;left:10px;
background-color:rgb(30,30,30);
text-align:center;font-size:17px;
}
.sidebar:hover{
  animation: chcolored 1.3s linear infinite;
  border-color:orangered;
}
@keyframes chcolored{
  0%{filter:drop-shadow(0 0 1px rgb(255, 0, 0))}
  50%{filter:drop-shadow(0 0 20px rgb(255,0,0))}
  100%{filter:drop-shadow(0 0 1px rgb(255,0,0))}
}

.hidethis{
  overflow:hidden;
}
.sidebar::before{
  position:absolute;
  content: '';
  width:100%;
  height:3px;
  top:90px;
  left:0;
  background:rgb(255, 94, 0);
 }
 .sidebar:hover::before{
  background:orangered;
 }
 .sidebar::after{
  position:absolute;
  content: '';
  width:100%;
  height:3px;
  bottom:60px;
  left:0;
  background:rgb(255, 94, 0);
 }
 .sidebar:hover::after{
  background:orangered;
 }
@media(max-width:480px){
  .sidebar{
    position:relative;
    width:100%;
    border:none;
    border-radius:0 0 0 0;
    top:0;left:0;
  }
}
    #logg{
      width:27%;
      top:3px;left:110px;
      position:absolute;
    }
    @media(max-width:500px){
      #logg{
        position:absolute;
        top:-20px;left:37%;
        transform:scale(0.6);
        
      }
    }
    .hamburger{
      transform-origin: left top;
      transform:scale(0.85);
      border:4px solid rgb(255, 94, 0);
      border-radius:50%;
      position:fixed;
      top:10px; left:10px;
      background-color:rgb(30,30,30);
      width:50px; height:50px;
      justify-content:center;
      display:flex;
      align-items:center;
      gap:7px;
      flex-direction:column;
      z-index:12;
      cursor:pointer; 

    }
 .hamburger.active{
  border-color:transparent;
  background-color:transparent;
  
  
 }
     
    .hamburger.active .cross-line:nth-child(2){
      opacity:0;
    }
    .hamburger.active .cross-line:nth-child(1){
      transform:translateY(10px) rotate(45deg);
    }
    .hamburger.active .cross-line:nth-child(3){
      transform:translateY(-10px) rotate(-45deg);
    }
    
    .cross-line{
      width:25px;
      height:3px;
      background-color:white;
      z-index:12;
      
      
    }
    @media(max-width:1200px){
      .sidebar{
        position:absolute;
      }
      .hamburger{
        position:absolute;
      }
    }
    .expanded{
      display:block;
      
    }
  


  /* new content */


.menu{
  padding:15px;
  color:white;
  display:flex;
  justify-content: flex-start;
  margin-left:25px;
  border-top-left-radius: 25px;
  border-bottom-left-radius: 25px;
}
.item{
  display:none;
  
}
.menu:hover{
  background-color:rgb(50,50,50);
}






.menu .fas{
  padding-top:2px;margin-right: 15px;
  
}


.item a{
  color:white;padding:5px;
}
.item a:hover{
background-color:rgb(50,50,50);
z-index:3;
}
.item a:last-child{
  border-bottom-right-radius: 20px;
  border-bottom-left-radius: 20px;
}
.item a:first-child{
  border-top-right-radius: 20px;
  border-top-left-radius: 20px;
}
.present{display:block;}
.menu.darkgrey{
    
  background-color:orangered;
 
}

.menu:nth-of-type(1) .item.show{
  position:absolute;
  display:flex;
  justify-content: center;
  flex-direction:column;
  background-color:orangered;
  z-index:2;
  top:70px;
  left:100%; 
  border-radius: 20px 20px 20px 20px;
  width:300px;
}
.menu:nth-of-type(1) .item.show::after{
  position:absolute;
  content:'';
  width:25px;
  height:25px;
  background-color:transparent;
  box-shadow: 10px -10px 0px orangered;
  top: 35px;
  left:-25px;
  border-radius:30px;
  transform:rotateZ(90deg);
  z-index:2;
}
.menu:nth-of-type(1) .item.show::before{
  position:absolute;
  content:'';
  width:25px;
  height:25px;
  background-color:transparent;
  box-shadow: -10px -10px 0px orangered;
  top: 110px;
  left:-25px;
  border-radius:30px;
  transform:rotateZ(-270deg);
  z-index:2;
}
.menu:nth-of-type(2) .item.show{
  position:absolute;
  display:flex;
  justify-content: center;
  flex-direction:column;
  background-color:orangered;
  z-index:2;
  top:0;
  left:100%; 
  border-radius: 20px 20px 20px 20px;
  width:300px;
}
.menu:nth-of-type(2) .item.show::after{
  position:absolute;
  content:'';
  width:25px;
  height:25px;
  background-color:transparent;
  box-shadow: 10px -10px 0px orangered;
  top: 155px;
  left:-25px;
  border-radius:30px;
  transform:rotateZ(90deg);
  z-index:2; 
}
.menu:nth-of-type(2) .item.show::before{
  position:absolute;
  content:'';
  width:25px;
  height:25px;
  background-color:transparent;
  box-shadow: -10px -10px 0px orangered;
  top: 230px;
  left:-25px;
  border-radius:30px;
  transform:rotateZ(-270deg);
  z-index:2;
}






.menu:nth-of-type(3) .item.show{
  position:absolute;
  display:flex;
  justify-content: center;
  flex-direction:column;
  background-color:orangered;
  z-index:2;
  top:0;
  left:100%; 
  border-radius: 20px 20px 20px 20px;
  width:300px;
}
.menu:nth-of-type(3) .item.show::after{
  position:absolute;
  content:'';
  width:25px;
  height:25px;
  background-color:transparent;
  box-shadow: 10px -10px 0px orangered;
  top: 205px;
  left:-25px;
  border-radius:30px;
  transform:rotateZ(90deg);
  z-index:2; 
}
.menu:nth-of-type(3) .item.show::before{
  position:absolute;
  content:'';
  width:25px;
  height:25px;
  background-color:transparent;
  box-shadow: -10px -10px 0px orangered;
  top: 280px;
  left:-25px;
  border-radius:30px;
  transform:rotateZ(-270deg);
  z-index:2;
}




.menu:nth-of-type(4) .item.show{
  position:absolute;
  display:flex;
  justify-content: center;
  flex-direction:column;
  background-color:orangered;
  z-index:2;
  top:0;
  left:100%; 
  border-radius: 20px 20px 20px 20px;
  width:300px;
}
.menu:nth-of-type(4) .item.show::after{
  position:absolute;
  content:'';
  width:25px;
  height:25px;
  background-color:transparent;
  box-shadow: 10px -10px 0px orangered;
  top: 255px;
  left:-25px;
  border-radius:30px;
  transform:rotateZ(90deg);
  z-index:2; 
}
.menu:nth-of-type(4) .item.show::before{
  position:absolute;
  content:'';
  width:25px;
  height:25px;
  background-color:transparent;
  box-shadow: -10px -10px 0px orangered;
  top: 330px;
  left:-25px;
  border-radius:30px;
  transform:rotateZ(-270deg);
  z-index:2;
}




.menu:nth-of-type(5) .item.show{
  position:absolute;
  display:flex;
  justify-content: center;
  flex-direction:column;
  background-color:orangered;
  z-index:2;
  top:0;
  left:100%; 
  border-radius: 20px 20px 20px 20px;
  width:300px;
}
.menu:nth-of-type(5) .item.show::after{
  position:absolute;
  content:'';
  width:25px;
  height:25px;
  background-color:transparent;
  box-shadow: 10px -10px 0px orangered;
  top: 305px;
  left:-25px;
  border-radius:30px;
  transform:rotateZ(90deg);
  z-index:2; 
}
.menu:nth-of-type(5) .item.show::before{
  position:absolute;
  content:'';
  width:25px;
  height:25px;
  background-color:transparent;
  box-shadow: -10px -10px 0px orangered;
  top: 380px;
  left:-25px;
  border-radius:30px;
  transform:rotateZ(-270deg);
  z-index:2;
}



.menu:nth-of-type(6) .item.show{
  position:absolute;
  display:flex;
  justify-content: center;
  flex-direction:column;
  background-color:orangered;
  z-index:2;
  top:0;
  left:100%; 
  border-radius: 20px 20px 20px 20px;
  width:300px;
}
.menu:nth-of-type(6) .item.show::after{
  position:absolute;
  content:'';
  width:25px;
  height:25px;
  background-color:transparent;
  box-shadow: 10px -10px 0px orangered;
  top: 355px;
  left:-25px;
  border-radius:30px;
  transform:rotateZ(90deg);
  z-index:2; 
}
.menu:nth-of-type(6) .item.show::before{
  position:absolute;
  content:'';
  width:25px;
  height:25px;
  background-color:transparent;
  box-shadow: -10px -10px 0px orangered;
  top: 430px;
  left:-25px;
  border-radius:30px;
  transform:rotateZ(-270deg);
  z-index:2;
}



.menu:nth-of-type(7) .item.show{
  position:absolute;
  display:flex;
  justify-content: center;
  flex-direction:column;
  background-color:orangered;
  z-index:2;
  top:390px;
  left:100%; 
  border-radius: 20px 20px 20px 20px;
  width:300px;
}
.menu:nth-of-type(7) .item.show::after{
  position:absolute;
  content:'';
  width:25px;
  height:25px;
  background-color:transparent;
  box-shadow: 10px -10px 0px orangered;
  top: 15px;
  left:-25px;
  border-radius:30px;
  transform:rotateZ(90deg);
  z-index:2; 
}
.menu:nth-of-type(7) .item.show::before{
  position:absolute;
  content:'';
  width:25px;
  height:25px;
  background-color:transparent;
  box-shadow: -10px -10px 0px orangered;
  top: 90px;
  left:-25px;
  border-radius:30px;
  transform:rotateZ(-270deg);
  z-index:2;
}



.menu:nth-of-type(8) .item.show{
  position:absolute;
  display:flex;
  justify-content: center;
  flex-direction:column;
  background-color:orangered;
  z-index:2;
  top:390px;
  left:100%; 
  border-radius: 20px 20px 20px 20px;
  width:300px;
}
.menu:nth-of-type(8) .item.show::after{
  position:absolute;
  content:'';
  width:25px;
  height:25px;
  background-color:transparent;
  box-shadow: 10px -10px 0px orangered;
  top: 65px;
  left:-25px;
  border-radius:30px;
  transform:rotateZ(90deg);
  z-index:2; 
}
.menu:nth-of-type(8) .item.show::before{
  position:absolute;
  content:'';
  width:25px;
  height:25px;
  background-color:transparent;
  box-shadow: -10px -10px 0px orangered;
  top: 140px;
  left:-25px;
  border-radius:30px;
  transform:rotateZ(-270deg);
  z-index:2;
}

@media(max-width:480px){.menu:nth-of-type(1) .item.show, .menu:nth-of-type(2) .item.show, .menu:nth-of-type(3) .item.show, .menu:nth-of-type(4) .item.show,.menu:nth-of-type(5) .item.show, .menu:nth-of-type(6) .item.show, .menu:nth-of-type(7) .item.show, .menu:nth-of-type(8) .item.show {
display:flex;position:relative;
flex-direction:column;left:0;
justify-content: center;
align-items: center;
top:0;margin-top:10px;

width:100%;
}
.menu:nth-of-type(1) .item.show::after, .menu:nth-of-type(1) .item.show::before,.menu:nth-of-type(2) .item.show::after, .menu:nth-of-type(2) .item.show::before,.menu:nth-of-type(3) .item.show::after, .menu:nth-of-type(3) .item.show::before, .menu:nth-of-type(4) .item.show::after, .menu:nth-of-type(4) .item.show::before, .menu:nth-of-type(5) .item.show::after, .menu:nth-of-type(5) .item.show::before, .menu:nth-of-type(6) .item.show::after, .menu:nth-of-type(6) .item.show::before, .menu:nth-of-type(7) .item.show::after, .menu:nth-of-type(7) .item.show::before, .menu:nth-of-type(8) .item.show::after, .menu:nth-of-type(8) .item.show::before{
display:none;
}
.menu{
  display:flex;
  flex-direction:column;margin-left:0px;border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;justify-content: center;
}
.menu .fas{display:flex;justify-content: center;margin-right:0px;padding:0px;}
}

const menu = document.getElementsByClassName('menu');
const menucontent = document.getElementsByClassName('item');
const sidebar = document.getElementsByClassName('sidebar');
let openIndex = -1; // Variable to keep track of the currently open dropdown
const hamburger = document.querySelector(".hamburger");
const crossline = document.querySelector(".cross-line");

hamburger.addEventListener("click", function () {
 
  hamburger.classList.toggle("active");
  sidebar[0].classList.toggle("expanded");
});

  
  for (let i = 0; i < menu.length; i++) {

    menu[i].addEventListener('click', (e) => {
     
        if (openIndex !== -1 && openIndex !== i) {
          menucontent[openIndex].classList.remove('show');
          menu[openIndex].classList.remove('darkgrey');
        }

        menucontent[i].classList.toggle('show');
        menu[i].classList.toggle('darkgrey');
        openIndex = (openIndex === i) ? -1 : i;
      
    });
  
    window.addEventListener('click', function (e) {
      if (
        !e.target.matches('.menu') &&
        !e.target.matches('.item') &&
        !e.target.matches('.sidebar') &&
        !e.target.matches('.fas')) 
        {
          if (openIndex !== -1) {
          menucontent[openIndex].classList.remove('show');
          menu[openIndex].classList.remove('darkgrey');
          openIndex = -1;
        }
      
      }
      
      });
      
    }

Codepen

I’m encountering an issue with a JavaScript code that imports and executes a dynamic module. The code appears to be correct, but I get the error “unexpected end of input”. Here is the relevant code snippet:

async createDynamicFunction(moduleCode) {
  let fnResult;
  const blob = new Blob([moduleCode], { type: 'application/javascript' });
  const url = URL.createObjectURL(blob);
  try {
    const module = await import(url);
    fnResult = module.fnSomeFunction;
  } catch (error) {
    console.error(error);
  } finally {
    URL.revokeObjectURL(url);
  }
  return fnResult;
}

The moduleCode parameter contains the following code:

export function fnSomeFunction(data) {
  class SomeType {
    constructor(param1, param2, param3, param4, param5, param6) {
      this.field1 = param1; // some value
      this.field2 = param2; // some value
      this.field3 = param3; // some value
      this.field4 = param4; // some value
      this.field5 = param5; // some value
      this.field6 = param6; // some value
    }

    static dictSomeType = {
      "X.1": new SomeType("X.1", "1000", "Value A", "Description A", "Category A", "Detail A"),
      "X.2": new SomeType("X.2", "2000", "Value B", "Description B", "Category B", "Detail B"),
      // more entries...
    };
  }

  let outData = {};

  if (data.hasOwnProperty("prop1")) {
    let prop = data["prop1"];
    if (SomeType.dictSomeType.hasOwnProperty(prop)) {
      let dict = SomeType.dictSomeType[prop];
      outData["fieldB"] = dict.field3;
      outData["fieldC"] = dict.field4;
      outData["fieldD"] = dict.field5;
      outData["fieldE"] = dict.field6;
    }
  }

  return outData;
}

Problem:

The error occurs when importing the dynamic module. It seems like the error “unexpected end of input” indicates that the code is incomplete or there is a syntax issue. I’ve reviewed the code and it looks correct, but the error persists.

Additional Information:

A shorter function with similar logic works correctly, so the issue might be related to the length or complexity of the code.

Questions:

Are there any hints as to why the “unexpected end of input” error might occur?
Are there specific requirements or constraints when dynamically importing JavaScript modules that I should be aware of?
Are there any tips for debugging or best practices to resolve this error?

I am trying to embed a reddit widget into my qualtrics survey and it is working fine, but I don’t like that the widget by default doesn’t show the full post and has a “read more” button (see image) . It barely shows any of the post as is. Is there a way to render it without the “Read More” button?

Here is my Qualtrics Javascript and HTML code:

HTML:

<div id="embeddedPost3">
<blockquote class="reddit-embed-bq" data-embed-height="316" id="redditBlockquote3" style="height:316px"><a href="" id="redditLink3"></a></blockquote>
</div>

Javascript:

Qualtrics.SurveyEngine.addOnload(function()
{
/*Place your JavaScript here to run when the page loads*/
});

Qualtrics.SurveyEngine.addOnReady(function()
{
    var url_1c = "https://www.reddit.com/r/webdev/comments/134ldxr/recommended_way_to_embed_reddit_posts/"
    var platform_1 = "reddit"

    // Set the href attribute of the blockquote anchor tag
    if (platform_1 == "reddit") {
        const redditLink3 = document.getElementById('redditLink3');
        redditLink3.href = url_1c;
        let s = document.createElement("script");
    s.src="https://embed.reddit.com/widgets.js"
    document.body.appendChild(s);
    }

});

Qualtrics.SurveyEngine.addOnUnload(function()
{
/*Place your JavaScript here to run when the page is unloaded*/

});

Chatgpt mentioned I can simulate a click on the “read more” button after it renders, but is there any better way? I’m just a bit worried about how stable that is as a solution depending on how the screen loads.

[enter image description here][1]I’m trying to set up Sape base, but I come across this error. Help pleasе

I searched for various solutions on the Internet, nothing helped

I’m trying to set up Sape base, but I come across this error. Help pleasе

I searched for various solutions on the Internet, nothing helped

  [1]: https://i.sstatic.net/8MpWHkTK.png

I am trying to incorporate a leaflet map to my Nuxt 3 project. I use Nuxt Leaflet module which works fine until I tried to directly use the L object from the leaflet library. I followed the docs.

My component is wrapped in ClientOnly component:

<ClientOnly fallback-tag="span" fallback="Loading venues ...">
  <VenuesMapCluster :venues="data.venues" />
</ClientOnly>

The venue-map-cluster.vue:

<template>
  ...
</template>

<script setup>

import L from 'leaflet'

...

</script>

However, this throws the following error:

The requested module 'http://localhost:3000/_nuxt/node_modules/leaflet/dist/leaflet-src.js?v=c19b9ad2' doesn't provide an export named: 'default'

These are my dependencies in the package.json file:

"dependencies": {
    "@nuxt/fonts": "^0.7.1",
    "@nuxt/icon": "^1.0.0",
    "@nuxt/ui": "^2.17.0",
    "@nuxtjs/leaflet": "^1.0.14",
    "knex": "^3.1.0",
    "leaflet.markercluster": "^1.5.3",
    "nuxt": "^3.12.3",
    "objection": "^3.1.4",
    "pg": "^8.12.0",
    "vue": "latest"
  }

How can I successfully load and use the L object from leaflet in Nuxt 3?

I have the following helper function:

async function post(url, fData) {
    const response = await fetch(url, {
        method: "POST",
        credentials: "include",
        body: fData
    });
    
    return response.text();
}

When using the following functions, refreshRecrods1 (.then variant) works as expected (sorts the table), while refreshRecords2 (async/await variant) does not sort it. title.click(); calls an event listener to sort the table (the response) based on that column. When refreshRecords2 is called through devtools manually, it works for some reason.

function refreshRecords1() {
    const fData = new FormData;

    fData.set("domain", domain.value);

    post("php/list_records.php", fData).then(response => {
        document.querySelector(".records").innerHTML = response;

        const title = document.querySelector(".titles").firstElementChild;
        title.querySelector(".sortArrow").innerHTML = "▲";
        title.click();
    })
}

async function refreshRecords2() {
    const fData = new FormData;

    fData.set("domain", domain.value);

    document.querySelector(".records").innerHTML = await post("php/list_records.php", fData);
    
    const title = document.querySelector(".titles").firstElementChild;
    title.querySelector(".sortArrow").innerHTML = "▲";
    title.click();
}

The code is used in this context:

async function refreshAll() {
    // reset editor inputs
    for (const option of document.getElementsByTagName("option")) {
        option.selected = option.defaultSelected
    }

    await postSet("php/dns_domains.php", domain);
    await refreshRecords();
    addEvents(events);
}

refreshAll();

Original code was async/await, which I can’t see why doesn’t work.

I am developing a discord bot in using discordjs where it uses this api to return an svg file but I need a png file for the rest of the code. Is there any way to convert this into a png without having to download/save any files?

I tried to use a few different apis and packages but they either didn’t work right or were outdated.

I need a manual or tutorial to learn about to show api data in a webpage, using javascript or something easy, I want to learn, I only have a little knowledge of python programing, and I wish to use an API of solar inverters and weather stations to show in a webpage.
Do you know a manual to learn it for really dummies?

thank you in advance.

I have a HTML file that contains the following element

<div class="altitude">
            <span><b>Solar Altitude</b></span>
            <p>Altitude Now: <span id="currentAlt"></span>°</p>
            <p style="font-size: .8em"><b>Current Shadow: <span id="currentShadow"></span>&apos;</b></p>
            <p style="font-size: .8em"><b>Dhuhur Shadow: <span id="dhuhurShadow"></span>&apos;</b></p>
            <p style="font-size: .8em"><b>Asr Shadow: <span id="asrShadow"></span>&apos;</b></p>
            <a href="AltitudeGraphicV2.html" onClick="CacheData()">
                <canvas id="altitudeCanvas" style="border:1px solid grey">
                    <script>
                        updateAltitude();
                    </script>
                </canvas>
            </a>
            <p>Tap To Open</p>
        </div>

and the updateAltitude(); function call contained inside the tags is in the same file but defined below the the html but with the tags inside script tags

<script>
function updateAltitude()
{
    ...javascript code here
}

//plus other functions below
</script>

If the javascript code within the updateAltitude() function is instead placed in the element in place of the function call, no error results. The Uncaught ReferenceError pops up when updateAltitude(); is called as in the code above. Why is this happening?

this is the error I see when using Chrome Dev tools to debug this

Uncaught ReferenceError: updateAltitude is not defined
at Shadows_test3a.html:353:7

I wanted to move the javascript code out of the element since the code actually constructs the graphics used in the element that is contained in that element, but I needed to have the graphic elements update when the body of the page loads

<body onload="setup()">
    <script>
        function setup()
        {
            var whatPage = localStorage.getItem("fromPage");
            const qiblahURL = "https://www.crescentchaser.com/prayer_time/QiblahGraphic.html";
            const altitudeURL = "https://www.crescentchaser.com/prayer_time/AltitudeGraphicV2.html"
            if (whatPage == qiblahURL || whatPage == altitudeURL)
            {
                dataLoad();
                whatPage = "";
                localStorage.setItem("fromPage", "");
                chooseMethod();
                updateQiblah();
                updateAltitude();
            }
            else
            {
                getLocation();
                updateQiblah();
                updateAltitude();
            }
        }
    </script>

so I thought that if I moved the javascript code from the element and into a function I could invoke the code to read the changes in variables used to draw the graphics and update the graphic when I needed it to.

Here is code for implementing a singly-linked list:

class LinkedList {
  constructor(value) {
    this.head = {
      value: value,
      next: null,
    };
    this.tail = this.head;
    this.length = 1;
  }

  append(value) {
    const newNode = {
      value: value,
      next: null,
    };
    this.tail.next = newNode;
    this.tail = newNode;
    this.length++;
    return this;
  }

  prepend(value) {
    const newNode = {
      value: value,
      next: null,
    };
    newNode.next = this.head;
    this.head = newNode;
    this.length++;
    return this;
  }

  reverse() {
    if (!this.head.next) {
      return this.head;
    }
    let first = this.head;
    this.tail = this.head;
    let second = first.next;

    while (second) {
      const temp = second.next; //third
      second.next = first;
      first = second;
      second = temp;
    }

    this.head.next = null;
    this.head = first;
    return this.printList();
  }

}

I need someone to help me understand this reverse() function, I tried to understand it a lot of times, and I also tried with ChatGPT haha.

The reverse() function runtime is O(n).