Online text editor template

I want to make an online coding text editor but I cannot find any template for its terminal (to make code have color, etc).
do you guys have any idea how can I download a template?
thanks

Is there a way to return cell data as a tooltip in Tabulator (v5.0.7)

I want to start by saying that I am by no means an expert in JavaScript, so apologies in advance if I am missing something obvious.

Example:
I’m trying to create a custom tooltip for column A. Using the data from another cell as the parameter for the output of column A’s tooltip.

{title: "title", tooltip: function(cell) {return anotherfunction(cell)}...

When passing ‘cell’ through as a parameter, it’s possible to view the information in the rest of the row console.log(cell._cell) but from what I’ve discovered, there’s no way of accessing the rest of the data.

This is a code pen of the issue that I’m having (i’ve commented out the console.log(cell._cell.value) in the example, as this will make the table fail to render. So, looking at the browsers console, it’s possible to see the data that is returned from console.log(cell._cell).

I’ve tried to use Tabulators cell.getData(), cell.getRow(), cell.getColumn() etc (and a load of others) but each results in an error.

Codepen
https://codepen.io/lukeorriss/pen/yLzMapg

If someone could please point me in the right direction for accessing the data in another row from a tooltip function, this would be great. Thank you all, in advance.

Search start and end string using regex

  1. function to iterate over an array passed as argument and output those values which either start with “den” or end with “ly”.

  2. function to extract HTML tags from the string passed as argument.(‘<h1> hello </h1>‘)

  3. function to retrieve time from the string passed as argument to the
    function. Example :
    getTime(Random time at 19:08 on the clock 123:456’)
    OP = “19:08”

React – map is not a function when I use with axios

I am trying to display the list of authors from my API, I’ve created simple component, and am using axios. My API looks like this:

{
    "links": [
        {
            "rel": "self",
            "href": "http://localhost:8080/booker/api/authors"
        }
    ],
    "content": [
        {
            "authorId": 4,
            "firstName": "Tonyslav",
            "lastName": "Shamal",
            "webPage": "www.tonisha.gov",
            "dateCreated": "2021-12-15T11:58:28.829+00:00",
            "numberOfBooks": 13,
            "links": [
                {
                    "rel": "books",
                    "href": "http://localhost:8080/booker/api/books/author/4"
                }
            ]
        },
        {
            "authorId": 6,
            "firstName": "Georgio",
            "lastName": "Martinez",
            "webPage": "www.got.gov",
            "dateCreated": "2021-12-15T11:58:28.829+00:00",
            "numberOfBooks": 16,
            "links": [
                {
                    "rel": "books",
                    "href": "http://localhost:8080/booker/api/books/author/6"
                }
            ]
        }
}

And my React components looks like this:

import { useEffect, useState } from 'react';
import axios from 'axios';

const Authors = () => {
    const [authors, setAuthors] = useState([]);
    useEffect(() => {

        axios.get('http://localhost:8080/booker/api/authors')
            .then(res => {
                setAuthors(res.data);
            })
            .catch(err => console.log(err));
    }, []);

    return (
        <div>
            {authors.map(author => (
                <div className="card" key={author.content.authorId}>
                    {author.content.firstName}
                </div>
            ))}
        </div>
    );
}

export default Authors;

This is my error from the console

TypeError: authors.map is not a function

Can anybody try to help me with this, i can not solve this error.

Error doesn’t show on client but does on server

My server code handles an error and sends it to client.
Logging it on server seems fine but err.response.data on catch clouse returns empty on client.

Backend code

const errorHandler = async (err, req, res, next) => {
   console.log({err}, err.message)
   return res.status(err.status || err.code || 500).json({message:'hey'})
}

module.exports = errorHandler

Frontend code


export function apiCall(method, path, data) {
   return new Promise((resolve, reject) => {
      return axios[method](path, data)
         .then(res => {
            console.log({res})
            return resolve(res.data)
         })
         .catch(err => {
            console.log(err.response)
            return reject(err?.response?.data)
         })
   })
}

error.response.data returns empty all tho console.log on 
export function apiCall(method, path, data) {
   return new Promise((resolve, reject) => {
      return axios[method](path, data)
         .then(res => {
            console.log({res})
            return resolve(res.data)
         })
         .catch(err => {
            console.log(err.response)
            return reject(err?.response?.data)
         })
   })
}

JavaScript Basic Output Confussion

I am a newcomer to the world of JS and have been following a tutorial. Below is my very simple code.

HTML

<body>
<p>People Entered</p>
<h1 id="count-el">0</h1>

<button id="inc" onclick="increment()">Increment</button>
<button id="rst" onclick="rst()">Reset</button>
<button id="getoff" onclick="getoff()">Get Off</button>
<button id="save" onclick="save()">Save</button>

<p id="save-el">Previous Saves : </p>

<script src="scripts.js"></script>

JS

function save() {
let text = document.getElementById("save-el").innerText
document.getElementById("save-el").innerText = text +" " + count

}

The above JS code provides the exact output I want. But if I change it as follows, it does not provide any output and remains blank.

function save() {
let text = document.getElementById("save-el").innerText
text = text +" " + count

}

I don’t understand why it happens and appreciate it if someone could explain what I am missing here. Thanks in advance.

How to change parameter and value selected

How to change parameter within the Observable method and receive value according to value obtained on click

 orderItem(item: string, value: string) {

   switch (value) {

    case 'status':

    this._sortService.listSort(this._sortService.filter, { sort: { 
     "colaborator.status": 1 } }).subscribe(res => {

      this.dataSource = res.data;
     
      }, err => {
      console.info('### ERRO sort', err);
       });

       break;

  
         default:

      }

     }

Exemple value: Status and name

                        <ng-container>
                            <th headerCell column="status" 
                                (click)="OrderItem($event, 'status')">
                                Status</th>
                            <td *cell="let element" (click)="open()">
                                {{element.colaborator.status)}}
                            </td>
                        </ng-container>
                        <ng-container>
                            <th *headerCell column="name"
                                (click)="orderItem($event, 'name')">Name</th>
                            <td>
                                {{ element.name }}
                            </td>
                        </ng-container>

I wish I didn’t have to duplicate the Subscribe method: this._sortService.listSort

HTML5: How to improve video quality when a user zooms in

I want to produce a one-page web platform which plays a single video. Users need to be able to ‘zoom’ in on that video without compromising the image quality on the screen. Performance is also a priority (we want the platform to run smoothly on most devices).

Intuition (borrowed from this old question: How can I zoom into video and switch streaming of videos in the same HTML5 player?):

Play the whole video at a standard quality. Crop the video into 1/4ths (see below image for example) and 1/8ths at higher qualities. If user zooms in then ‘switch’ the stream to the higher quality zoomed in video (1/4 or 1/8).

enter image description here

I believe this can be done using HTML5/CSS3 (as the old top answer in the linked question indicates).

My question: the idea stated above is involved and not very fluid (zoom restricted to premade partitions), is there a more efficient/better way to do this using available tools: HTML5, CSS and/or Javascript?

How to append table row inside another table when selecting dropdown list in JavaScript?

I have a table that I am creating on button click. When I get my table rows, there is a dropdown on which onchange event is called. So I want to display another row inside parent table when select any of the options from list.

Below is my script where I am creating table:

function searchdata(){
    var companyid = $("#searchQueryDD").val();
    var truckid = $("#searchtruckdd").val();
    var url = "api/gettablebycompanyandtruck";
    $.post(url, {
        companyid : companyid,
        truckid : truckid,
        limit : limit,
    }, function(data, status) {
            if (data.status == "OK") {
                if (data.statusCode == 1) {
                    console.log(data.response);
                    var list = data.response;
                    var row = "";
                    if(list.length > 0){
                        for(var i = 0; i < list.length; i++){
                            row = row + "<tr>" +
                                            "<td>"+list[i].company.companyname+"</td>" +
                                            "<td>"+list[i].driver.username+"</td>" +
                                            "<td>"+list[i].truck.name+"</td>" +
                                            "<td>"+list[i].tripnumber+"</td>" +
                                            "<td><select>" +
                                            "<option selected disabled>Choose subtrip</option><option value='1'>1</option>" +
                                            "<option value='2'>2</option><option value='3'>3</option></select></td>"+
                                            "<td>"+list[i].pickupdate+"</td>" +
                                            "<td>"+list[i].deliverydate+"</td>"+
                                            "<td>"+list[i].loadrate+"</td>" +
                                            "<td>"+list[i].dispatchfee+"</td>" +
                                            "<td>"+list[i].fuel+"</td>" +
                                            "<td>"+list[i].cardfee+"</td>" +
                                            "<td>"+list[i].onroadrepair+"</td>" +
                                            "<td>"+list[i].shoprepair+"</td>" +
                                            "<td>" +
                                                "<a data-toggle='modal' data-target='#mode_payment' onclick="getpayment('"+list[i].tripid+"');">"
                                                    +"<i class='fa fa-paypal' aria-hidden='true' style='color:#3585a5'></i>" +
                                                "</a>" +
                                                "<a onclick="getTrip('"+list[i].tripid+"');">"
                                                    +"<i class='fa fa-pencil-square-o ml-3' style='color: #3384a4;'></i>" +
                                                "</a>" +
                                                "<a href='invoice?id="+list[i].tripid+"'>"
                                                    +"<i class='fa fa-file-pdf-o ml-3' aria-hidden='true' style='color:red'></i>" +
                                                "</a>" +
                                            "</td>" +
                                        "</tr>";
                                    }
                             }
                            document.getElementById('searchresulttable').innerHTML = row;
                } else {
                    var error = data.responseMessage;
                    swal(error, "", "error");
                }
            } else {
                var error = data.responseMessage;
                swal(error, "", "error");
            }
        });
} 

Screenshot to display table row
Screenshot to display dropdown

Map/reduce script not executed correctly (suitescript 2.0)

I am a facing a weird problem where my code (specifically a record.save action) does not seem to be executed. The code is located in the ‘reduce’ phase of a suitescript 2.0 map/reduce script.

I have no clue what the cause for this might be. The logging does display ‘is this executed’ as stated in the example below but the lines below that not seem to be executed. The logging does not show ‘Order lines marked for order with ID:’.

//load the order
    var SOrecord = record.load({
        type: record.Type.SALES_ORDER,
        id: orderId,
        isDynamic: false
    });

     setLineValues(SOrecord, values, newShipmentId)

    log.debug('Is this executed?');
    
    //Save Order
    var recId = SOrecord.save({enableSourcing: false, ignoreMandatoryFields: true});
    
    log.debug('Order lines marked for order with ID: ', recId)
    
    return recId;

Can anyone help?

Thanks in advance!

Print getters when and object is printed in typescript

Is there an option in TypeScript/JavaScript to print an object who has private properties using their getters instead of printing the private properties names.

By example I have this class in TypeScript

class Vehicle {

  constructor(private _brand: string, private _year: number) {}

  get brand(): string {
    return this._brand;
  }

  get year(): number {
    return this._year;
  }

  set year(year: number) {
    this._year = year;
  }

  set brand(brand: string) {
    this._brand = brand;
  }
}

const vehicle: Vehicle = new Vehicle('Toyota', 10);

console.log(vehicle);

I got this

[LOG]: Vehicle: {
  "_brand": "Toyota",
  "_year": 10
} 

But I’m wondering if I can get something like this

[LOG]: Vehicle: {
  "brand": "Toyota",
  "year": 10
} 

Amount counter works only on first product

I have a problem with using javascript with SQL.
It looks like this that I have few items that appears on the screen, they appears from SQL database, and the code looks like shown. Bascially if I have more than one product that is shown on the website, only first one works as it should. Any solutions?

let displayAddCounter = document.querySelector("#add_count_cart");
let displayRemoveCounter = document.querySelector("#remove_count_cart");
let displayCounter = document.querySelector("#amount_count_cart");

var x = 0;

displayAddCounter.addEventListener("click", function(){
    if(x < 10){
    x++;
    displayCounter.innerHTML = x;
  } else {
    alert("If you want to buy more than 10, please contact our support! We will gladly help you :)")
  }
});

displayRemoveCounter.addEventListener("click", function(){
  if(x == 0){
    displayCounter.innerHTML = x;
  } else {
    x--;
    displayCounter.innerHTML = x;
  }
  
});

let buttonCartAdd = document.getElementById("btn_add_to_cart");
let itemName = document.querySelector(".product_name");

buttonCartAdd.addEventListener("click", function(){
    if(x == 0){
        alert("Please choose amount of items!");
    }
    else if(x > 0){
        alert("You added " + x + itemName.innerHTML + " to the cart!");
    }
  
});
 <?php
    $sql = "SELECT * FROM products";
    $result = $conn->query($sql);
    if ($result->num_rows > 0) {
    while($row = $result->fetch_assoc()) {
        ?>
        <div class="product_card col-lg-4 col-md-6 col-sm-12 mb-4 box-shadow">
          <div class="card-header">
            <h3 class="product_name my-0 font-weight-light"> <?php echo $row["productName"]?> </h3>
          </div>
          <div class="card-body">
            <h2 class="card-title pricing-card-title"> </h2>
            <img class="pic" src="productsImages<?php echo $row["productID"];?>.jpeg" height="150px" width="120px"></img>
            <br>
            <p>
            <?php echo $row["productPrice"];?> SEK
            </p>
            <div class="row amount_counter">
              <button id="remove_count_cart" type="button" class="col_amount btn btn-outline-secondary col-3 col"> - </button>
              <div id="amount_count_cart" class="btn col-6 col border-top border-bottom dark rounded h-75">
              0
              </div>
              <button id="add_count_cart" type="button" class="col_amount btn btn-outline-secondary col-3 col"> + </button>
              <button id="btn_add_to_cart" class="btn btn-lg btn-outline-success col-lg-8 col-md-12 col offset-lg-2"> Add <i type="button" class="fas fa-cart-plus"></i></button>
            </div>
          </div>
        </div>
      <?php
    }
    } else {
        echo "0 results";
    }
    $conn->close();
    ?>

How do I get a value from a listbox instead of a textbox, my code is as follows

I’m trying to make a program that shows the prime numbers of the numbers added to the listbox from the textbox and then written in the listbox, with a message box, can anyone help me, where am I wrong?

private void button2_Click(object sender, EventArgs e)

` int deneme = 0;
int sayilarim = Convert.ToInt32(textBox1.Text);

                for (int i = 2; i < sayilarim; i++)
                {
                    if (sayilarim % i == 0)
                        deneme++;
                }
                if (deneme != 0)
                {                       listBox1.Items.Add(textBox1.Text + " Asal Sayi değildir.");
                    MessageBox.Show("Bu Bir Asal Sayi Değildir.");
                }
                else
                {
                    listBox1.Items.Add(textBox1.Text + " sayidir.");
                    MessageBox.Show("Bu Bir Asal Sayi.");
                }
                textBox1.Clear();
            }                MessageBox.Show(listBox1.Items.Count.ToString() + " Adet asal sayı var.");`

How to remove added classes from an element in reactjs

I am making a drag n drop sort of game where you match the logos with their corresponding name.

If user matches the logo with the name correctly than the field which you could drop the logo gets additional classes.

Like this:

if (isCorrectMatching) {
      
      
      event.target.classList.add('dropped');
      draggableElement.classList.add('dragged');
      event.target.classList.add('dragged');
      event.target.setAttribute('draggable', 'false');
      draggableElement.setAttribute('draggable', 'false');
      event.target.innerHTML = `<i class="fab fa-${draggableElementBrand}" style="color: ${draggableElement.style.color};"></i>`;
}
  

If every match is found user can go to next level , my problem is that these additional classes are staying there , how do I remove them ?

I am mapping them out like this:

 <div className='containerItems'>
        {draggableItems.map((x,i) => {
          return (
            <div className='draggable-items'>
              <i
                onDragStart={(e) => dragStart(e)}
                className={`draggable fab fa-${x}`}
                id={x}
                draggable='true'
                ref={draggableOnes.current[i]}
              ></i>
            </div>
          );
        })}
      </div>

      {matchingPairs.map((x,i) => {
        return (
          <section className='matching-pairs'>
            <div className='matching-pair'>
              <span className='label'>{x}</span>
              <span
                className='droppable'
                // ref={droppableOnes.current[i]}
                onDragEnter={(e) => dragEnter(e)}
                onDragOver={(e) => dragOver(e)}
                onDragLeave={(e) => dragLeave(e)}
                onDrop={(e) => drop(e)}
                data-brand={x}
              ></span>
            </div>
          </section>
        );

I can not seem to solve this one, like how do I remove all the classes that I’ve added when there was a correct matching.

I would like to remove basically everything that I’ve added in my if (isCorrectMatching) .

I’ve tried to use refs but it did not work. What is the way to go for this?