Category: javascript

I’m working on this project which kind of similar to DocuSign. User will upload a pdf and drags and drops textboxes and will save it as templates. I need to store the x and y coordinates along with the label for that textbox. And when the user re-opens the template, he has to see the pdf along with the fields placed on the pre-set coordinates. This info is used in the backend to generate the output pdf using a python script.

I’m done with the python script part and planning to use this in django. I don’t know how to achieve the coordinates grabbing part. I researched a bit and found a couple of libraries “react-pdf” for pdf viewing and “react-dnd” for drag and drop. Can I achieve the requirement using these two libraries? If you have any other better suggestions, please let me know.

Thank you so much in advance.

The slideshow images in JS are blown up past the references of the screen. I am attempting to resize the said images in SCSS to fit all types of screens. Please bear with me as I am still learning as I go.

JavaScript

code for a slideshow in JS

SCSS

I am not sure what is the correct way to reference the code from above from JS in SCSS so here’s what I’ve tried:

.images>0>”https://images.unsplash.com/photo-1639254241780-09c10527eb37?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MDU4MjYxODR8&ixlib=rb-4.0.3&q=85″;

.images>1>”https://images.unsplash.com/photo-1491438590914-bc09fcaaf77a?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MDU4MjYzMTN8&ixlib=rb-4.0.3&q=85″;

.images>2>”https://images.unsplash.com/photo-1697490251825-0d6f7f3f7254?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MDU4MjYzOTl8&ixlib=rb-4.0.3&q=85″; {
background-size: cover;
}

I am making a simple login fucntion, with the own database to make testing. So in the login.php file have user details, when the user 1 making login it meet my requirement. After that, i wish to use user 2 make login.It show the “Uncaught TypeError: Cannot read properties of undefined (reading ‘username’)”

const loginForm = document.querySelector(“#login-form”);
const registerForm = document.querySelector(“#register-form”);

    function login(e){
        const formData = new FormData(loginForm);
        let body = {};
        formData.forEach((key, index) => {
            body[index] = key;
        });

        console.log(body);
        e.preventDefault();
        fetch('/apis/users/login.php', {
            method: "POST",
            body: JSON.stringify(body)
        }).then(r =>{
            return r.json()
        }).then(r => {
            console.log(r);
            if(r.status == 1){
                sessionStorage.setItem("user", JSON.stringify(r));
                alert("Login successful");
                location.href = "/views/welcome.html";
            } else {
                alert(r.msg);
            }
        })
    }

Please note that I am using React.

I am trying to add a tooltip to the “.preview” component which is basically a little box with a letter in it (the little boxes represents the days of the week, although this is not important).

The tooltip shows as expected but it gets shown behind the footer text.

Image of the problem

ClassCard.jsx

<div className={`card ${isCardOpen ? 'active' : ''}`} onClick={toggleCard}>
    <header className="card-header">
        <div className="image-container">
            <img src={card_image} alt="image" />
            <a className="card-number">{number}</a>
        </div>
    </header>
    { name ? <p className="card-name">{name}</p> : <p className="placeholder card-name">Undefined</p> }
    <div className="card-body">
        { teacher && (<p className="card-teacher">{teacher} { teacherOffice && `- (${teacherOffice})`}</p>)}
        { schedule && (<div className="schedule-container">
            <p className="card-schedule-title">Horaire:</p>
            <div className="card-schedule-preview">
                { Object.keys(schedule).map(day => (
                <div className={`preview ${isNull ? 'empty' : ''}`}>
                    <a>{button_text}</a>
                    {!isNull && <div className="tooltip preview-tooltip">
                        <span>Heure : {hover_text.time}</span>
                        <span>Local : {hover_text.local}</span>
                    </div>
                    }
                </div>
            </div>
        </div>) }
    </div>
    <div className="card-footer">
        <FontAwesomeIcon icon={faClock}></FontAwesomeIcon>
        <span className="card-footer-text">Prochain travail dû dans {workTime}</span>
    </div>
</div>

ClassCard.css

.card {
    position: relative;
    width: 300px;
    height: 167px;
    margin: 10px 10px 90px;
    background-color: white;
    border: 2px solid #f2f2f2;
    border-radius: 10px;
    transition: height 0.6s, width 0.6s, margin 0.6s;
}

.card-header {
    overflow: hidden;
    border-bottom: 2px solid #f2f2f2;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;

    & img {
        width: 100%;
        display: block;
        transition: transform 0.4s ease;
    }
}

.image-container {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.card-number {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 45px;
    font-family: 'Museo', sans-serif;
    font-weight: bold;
    text-shadow: 2px 7px 5px rgba(0,0,0,0.3), 0 -4px 10px rgba(255,255,255,0.3);
    transition: 0.4s;
}

.card-name {
    text-align: center;
    display: block;
    font-size: 20px;
    font-family: 'Museo', sans-serif;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 7px 7px 18px;
}

.card-body {
    position: relative;
    opacity: 0;
    transform: translateX(-10px);
    transition: transform 0.2s, opacity 0.2s;
}

.card-teacher {
    padding-left: 10px;
    margin: 0;
    font-size: 15px;
    font-family: 'Museo', sans-serif;
}

.card-schedule-title {
    margin: 0;
    font-size: 15px;
    font-family: 'Museo', sans-serif;
}

.schedule-container {
    display: flex;
    margin: 10px 10px 22px;
    align-items: center;
}

.card-schedule-preview {
    display: flex;
}

.card-footer {
    position: absolute;
    display: flex;
    justify-content: center;
    font-size: 15px;
    font-family: 'Museo', sans-serif;
    transition: transform 0.6s;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
}

.card-footer-text {
    margin: 0 0 0 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card:hover {
    height: 249px;
    width: 310px;
    margin: 5px 5px 10px;

    .card-number {
        font-size: 55px;
        text-shadow: 2px 7px 5px rgba(100,100,100,0.3), 0 -4px 10px rgba(255,255,255,0.3);
    }

    .card-header img {
        transform: scale(1.15);
    }

    .card-body {
        opacity: 1;
        transform: translateX(0);
        transition-delay: 0.2s;
        transition: transform 0.4s, opacity 1s;
    }

}

.preview {
    position: relative;
    width: 18px;
    height: 18px;
    margin-left: 7px;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 15px;
    border: 2px solid #f2f2f2;
    font-family: 'Museo', sans-serif;
    transition: 0.3s;
}

.preview-tooltip span {
    display: block;
}

.preview.empty {
    background-color: #f2f2f2;
}

.preview:hover > .preview-tooltip {
    display: block;
}

.preview:not(.empty):hover {
    background-color: #08a45c;
    color: white;
}

.tooltip {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    border: 2px solid #f2f2f2;
    border-radius: 10px;
    background-color: white;
    color: #5a616e;
    padding: 5px;
    width: auto;
    white-space: nowrap;
    box-shadow: 0 0 5px #f2f2f2;
    display: none;
    font-size: small;
    font-family: 'Museo', sans-serif;
}

This is due to the fact that the .cardfooter has it’s position set to “absolute”. Setting it’s position to “static” fixes my issue. However, now the component (the footer) cannot move when the card expends when I hover over it. I need it to be absolute so that I can “transform” it.

I will gladly take any idea! Thank you in advance!

I am making a chrome extension that adds a hyperlink (the innerText is “Capture Screenshot”) to a certain website, I have this part done, but next,

1. Take a screenshot of the page once the hyperlink is clicked
2. Crop the Screenshot to a predefined xy and it to a certain place and size, example:
3. Download the file to a place where I can do things with it using my extension’s code

I am not sure how to do these three things so I need help regarding these

‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎

I’m trying to come up with a proof-of-concept on how to use canvas to create different length items (in this case a bike stem).

My idea is to provide 2 svgs (fragments) of the bike stem, then use a canvas line to connect them. I like this concept, but it feels very clunky and I’m unsure if this is sustainable. Ideally, I’d be able to extend this line, which would then extend the canvas, thus adjusting my drawn line.

  document.addEventListener("DOMContentLoaded",() => {
    const drawFragment = (imgsrc, xcord, ycord) => {
      let img = newImage();
      img.onload = () => {
        ctx.drawImage(img, xcord, ycord);
      }
       img.src = imgsrc;
    };

    const drawConnector = (ctx, xstart, ystart, xend, yend,) => {
      ctx.beginPath();
      ctx.moveTo(xstart, ystart);
      ctx.lineTo(xend, yend);
      ctx.stroke();
    };

    const canvas = document.getElementById('canvas1');
    const ctx = canvas.getContext('2d');
    drawFragment('svgs/stem-fragment-01.svg, 0, 0);
    drawFragment('svgs/stem-fragment-02.svg, 400, 0);
    drawConnector(ctx, 209, 33, 400, 36);
    drawConnector = (ctx, 209, 169, 400, 159);
  });

Which basically creates this (redlines are the drawn canvas elements)

Like I said, this feels very clunky and I’m wondering if i’m missing some out of the box canvas solution? The thought of mapping out the points one by one, seems like it will be more trouble than it’s worth in the long run.

Here are the fragment svgs as well

Stem Fragment 1: https://pastebin.com/u0E4Nq6r

Stem Fragment 2: https://pastebin.com/71WTfS4y

Imagine I have a component FunkyBox to display content in some interesting way. I want to use it to wrap various other content on the page.

Would this be a reasonable implementation? Is there a better way?

class FunkyBox extends Component {
    bdElements() {
        return e.div(
            { className: 'funky-box' },
            this.kwargs.content,
        )
    }
}

----------
// this content will appear in a FunkyBox
class SomeFunkyContent extends Component {
    bdElements() {
        return e.div(
            { className: 'some-content' },
            e(FunkyBox, { content: e.div('lorem ipsum) },
        )
    }
}

This seems somewhat awkward — for example if the content passed to FunkyBox has a bdAttach, I’ll lose track of that.

I am currently trying to create a website using the Next.js framework. This is my first time attempting to create an application using this framework however I am encountering issues with using the next/Image element.

I’ve found that a lot of properties for the Image element are now deprecated and throw warnings.

I am curious what would be the best method to use the Image element in a responsive website. My general understanding so far is something like this

<div classname="relative w-[50vw] h-[50vh] >
    <Image 
       src="/images/photo.png 
       fill={true} 
       sizes={768px} 
       alt="An image} 
    />
</div>

Any code examples and explanations would be greatly apprciated.

I’m trying to use a loop to create a table row with 7 table cells. Each cell containing information from js objects and an input box next to these values. When I run the HTML file, I get empty cells not containing the tags.

HTML

<body>
    <div class="header">
        <h1>Inventory</h1>
    </div>
    <div class="grades">
        <table id="inventory">
            <div class="tableHeader">
                <tr>
                    <th>Item</th>
                    <th>PUG</th>
                    <th>Amount</th>
                    <th>PUB</th>
                    <th>Amount</th>
                    <th>NP</th>
                    <th>Amount</th>
                    <th>Notes</th>
               
            </div>
        </table>
    </div>

JS:

var products = [phoneOne, phoneTwo, phoneThree, phoneFour];

function populateItems(i){
    var inventory = document.getElementById("inventory");
    var insertRow = inventory.insertRow(1);
    var cell1 = insertRow.insertCell(0);
    var cell2 = insertRow.insertCell(1);
    var cell3 = insertRow.insertCell(2);
    var cell4 = insertRow.insertCell(3);
    var cell5 = insertRow.insertCell(4);
    var cell6 = insertRow.insertCell(5);
    var cell7 = insertRow.insertCell(6);
    var cell8 = insertRow.insertCell(7);
    var inputBox = document.createElement("input");

    cell1.textContent = products[i].modelName;
    cell2.textContent = products[i].pug;
    cell3.appendChild(inputBox);
    cell4.textContent = products[i].pub;
    cell5.appendChild(inputBox);
    cell6.textContent = products[i].pub;
    cell7.appendChild(inputBox);   
    cell8.appendChild(inputBox);
}
for (i=0; i<products.length; i++){
    populateItems(i);
}

RESULT

I’m attempting to code a to-do app in JavaScript, using HTML and CSS. My issue is that when I apply the text-decoration: line-through property to the list elements, it also affects the X icon (which is used to delete tasks). I believe the problem lies in the fact that the icon is a child of the li element, but I’m unsure of how to prevent this behavior.

Here is my HTML:

<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>To Do App</title>
    <link rel="stylesheet" href="style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
        integrity="sha384-..." crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;500&display=swap" rel="stylesheet">
</head>

<body>

    <div class="content">
        <h1 class="title">Things To-Do</h1>
        <div class="container">
            <input type="text" id="input" class="input" placeholder="Write the task you want to complete...">
            <button class="btn" onclick="addTask()">ADD</button>
        </div>
        <ul class="task-container" id="task-container">
            <!-- Tasks go here -->
        </ul>
        <script type="text/javascript" src="script.js"></script>
    </div>
</body>

</html>

My CSS:

* {
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
    box-sizing: border-box;
    background-color: rgb(248, 248, 248);
}

.content {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 70%;
    height: 80vh;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    background: white;
    transform: translate(-50%, -50%);
    border-radius: 15px;
    box-shadow: 10px 10px 15px #aaaaaa;
}

.title {
    width: 70%;
    font-family: 'Roboto', sans-serif;
    font-size: 45px;
    font-weight: 400;
    color: black;
    text-align: center;
    text-decoration: underline;
    background: white;
}

.container {
    display: flex;
    width: 80%;
    justify-content: space-between;
    background: white;
}


.input {
    min-width: 250px;
    width: 80%;
    height: 50px;
    padding: 2px 10px;
    font-size: 20px;
    background: white;
    border: 2px solid black;
    border-radius: 10px;
}

.btn {
    width: 15%;
    height: 50px;
    padding: 2px 10px;
    font-size: 13px;
    background: white;
    border: 2px solid black;
    border-radius: 10px;
}



.task-container {
    width: 80%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.task {
    padding: 0 5px 0 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 28px;
    background: rgb(248, 248, 248);
    border-radius: 5px;
    list-style: none;
}

.icon {
    font-size: 25px;
    color: red;
    text-decoration: none;
}

.checked {
    color: #555;
    text-decoration: line-through;
}

/* Missing some media queries to be added. */

And my JS:

// Constants
const input = document.getElementById("input");
const taskContainer = document.querySelector(".task-container");

// Function used to create new tastk
function addTask() {
    // If the user don't write anything, show an error
    if (input.value === '') {
        alert("You must write something!");
    } else {
        let li = document.createElement("li");          // Create a new list element
        li.innerHTML = input.value;                     // Copy the text on the input
        li.classList.add("task");                       // Give the task a class
        taskContainer.appendChild(li);                  // Append element to the task container
        let icon = document.createElement("i");         // Create a new icon
        icon.classList.add("icon", "fa-solid", "fa-x"); // Give the icon some classes
        li.appendChild(icon);                           // Append icon to the list 
    }
    input.value = ""; // Empty the input
}

//Event listener for list
taskContainer.addEventListener("click", function (e) {
    if (e.target.tagName === "LI") { 
        e.target.classList.toggle("checked");
    }
}, false);

// Event listener for icon
taskContainer.addEventListener("click", function (e) {
    if (e.target.tagName === "I") { 
        e.target.parentElement.remove();
    }
}, false);

I tried to append the element to the task-container, but it didn’t work as expected because I’m unsure how to select the correct list element for deletion.

The images in the /images folder are not swapping randomly with the ones located in the /swap-images folder. Both sets of images have the same name.

I am expecting the images to swap randomly in a loop on page load. This is the code.

 <script>
    window.addEventListener('load', function() {
        // Get all img elements
        var images = document.querySelectorAll('.image-grid img');

        // Loop through each img element
        images.forEach(function(image) {
            // Generate a random number between 1 and the total number of images in the 'swap-images' folder
            var randomImageNumber = Math.floor(Math.random() * 15) + 1;

            // Construct the new image source
            var newImageSource = 'swap-images/image' + randomImageNumber + '.jpg';

            // Set the new image source
            image.src = newImageSource;
        });
    });
</script>

I’m trying to fill the centre of a webpage with a D3 generated chart that resizes to fit the space, but I can’t stop it from stretching the text that I use for points and the axes labels. I see the SVG attribute vector-effect=”non-scaling-stroke” and that looks great for the lines on the chart, but the text keeps the aspect ratio of the whole chart so when the chart really wide, so is the text.

I’d like to avoid redrawing the whole chart every time the container changes size because it’d flicker and suck CPU, though I don’t expect anyone will be sitting there resizing it constantly. And I’d like the chart to really fill the space, not just maintain its aspect ratio. That makes the text look the right shape, but grows and shrinks along with the chart.

Examples:

how can i make below code to branchless with bitwise?

let array=[random numbers];
let result=[];
for(let i=0;i<len;i++){
   if(array[i]<500){
      result.push(array[i])
    }
}

Anybody can help? Thanks!

When I see the console of my browser, even if i am using windows, it returns Linux.

function detectOS() {
        const userAgent = navigator.userAgent.toLowerCase();

        if (userAgent.includes('win')) {
            return 'Windows';
        } else if (userAgent.includes('mac')) {
            return 'Mac';
        } else if (userAgent.includes('linux')) {
            return 'Linux';
        } else if (userAgent.includes('iphone') || userAgent.includes('ipad')) {
            return 'iOS';
        } else if (userAgent.includes('android')) {
            return 'Android';
        }
      
        return 'Unknown OS';
    }

Any problem with the code or my console?

I tried to use other browser and PC, but not working!!!

I am beginner to react js and I am working on a small feature to reset table data in one of our UI projects.

Current functionality:

• There is a save button which saves all the overrides(i.e., saves changes made to the original table data for this id in another table called overrides table) in the DB and
• a reset button to clear these saved overrides(i.e., deletes the overrides data from the overrides table for this id ).
• Once the user clicks on Reset button on the UI, the current code does an api call to the backend to clear all the overrides in the table data.
• And the users have to refresh the page to see the up-to date data.

Current code:

const handleClearData = () => {
    clearData({})
  }

The new requirement is to refresh the data after clearing the overrides in the table i.e., I have to call the refetchData call after doing a reset. something like below:

const handleClearData = () => {
    clearData({})
    refetchData()
  }

clearData uses a common function(code below) which is a Async call. And refetchData also uses a similar common function as below.

function fetchResponse (url, fetchOptions) {
  const fetchFailureResponse = error => {
    return Promise.reject(
      Error(`${error.message}`)
    );
  };


  return fetchMethod(url, fetchOptions)
    .then(parseSuccessResponse)
    .catch(fetchFailureResponse)
    .then(parseResponse => {
      // code to parse the error response
      return Promise.reject(error);
    });
}

when I hit the reset button, I can see that sometimes the refetchData call is made even before the clearData call, so even though my table overrides are deleted, the refreshed data(from the refetchData call) is stale and my table on the UI doesn’t reflect the new data.

I need to ensure that I have to call the refetchData once the clearData call is completed. I tried adding a timeout but 1/2 seconds timeout isn’t helpful and a timeout more than that is weird(i.e., it takes 5 seconds for the data to get refreshed after making the reset which is spoiling the user experience).

Can I please get some help on how to achieve this? Been stuck on this for quite sometime.