Spotify Webplayback SDK Cross Origin Policy Error

I’m using Spotify Webplayback SDK to play songs via spotify on my web app. On my local machine it works perfectly. But when I deployed my app to AWS, it results with CORS error. It’s because it tries to access an iframe from a different origin. I don’t understand why it worked in my local machine though. Maybe it’s because the host is ‘localhost’. That’s one question. Another question is: is there any way to make Spotify Webplayback SDK work on a production host? Some parameters maybe.

Here is the CORS error on Chrome:

Error handling response: Error: Blocked a frame with origin “https://sdk.scdn.co” from accessing a cross-origin frame

Why the bootstrap float-right class did not working in my button?

The bootstrap float-right class did not working with my button

This is my html code snippet:

<div class="container-fluid">
      <button type="button" id="reset_button" class="btn btn-outline-secondary btn-lg float- 
       right" disabled="disabled">Reset</button>
      <button type="button" id="convert_button" class="btn btn-primary btn-lg float-right" 
       disabled="disabled">Submit</button>
</div>

I wnat to make button align right but when I add float-right class in button it’s doesn’t working. Can anyone please tell me what’s wrong with my code and how can I fix this…

ReferenceError for defined variables

I’m baffled. I imagine I’ve tread on some bit of JavaScript esoterica but I don’t know what it is.

The code is

processMessage(ws, json){
    let msg = JSON.parse(json);

    console.log(`Message(${msg.type}): ${msg.data}`);
    console.log("Available games: " + msg.data); // Normally isn't here, put it in to make sure I wasn't going crazy

    switch (msg.type){
        case "welcome":
            console.log("Welcome received. Requesting available games.");
            let msg = {
                "type":"game list",
                "data":null
            };

            ws.send(JSON.stringify(msg));
            break;
        case "restore":
            break;
        case "game list":
            console.log("Available games: " + msg.data);
            break;
        case "create console":
            break;
    }
}

It generates this output

Message(welcome): undefined                                                                 MainUI.js:94:21
Available games: undefined                                                                  MainUI.js:95:21
Welcome received. Requesting available games.                                               MainUI.js:98:29
Message(game list): The Office                                                              MainUI.js:94:21
Available games: The Office                                                                 MainUI.js:95:21
Uncaught ReferenceError: can't access lexical declaration 'msg' before initialization       MainUI.js:109:21
    processMessage http://localhost:8000/MainUI.js:109
    onmessage http://localhost:8000/MainUI.js:44
    loaded http://localhost:8000/MainUI.js:42
    onload http://localhost:8000/:1

I’m pretty sure that output has msg, or its properties, being accessed 1,2,3…4 times before the error occurs.

Aaaaaand, I just found the cause. Knew it was my fault but there’s the esoterica.

external paperscript file is not loading at all in my html file

I am trying to make a basic test program for paper.js, which I intend to use for a project.
I am using chrome to run the HTML and when I open the dev tools chrome seems to simply not load one of my scripts. My file structure is:

Test
|---mario.svg
|---html.html
|---scripts/
|   |---script.js
|   |---paper-core.js

And here is my code:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script src="./scripts/paper-core.js"></script>
    <script type="text/paperscript" src="./scripts/script.js" canvas="myCanvas"></script>
</head>
<body>

<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #d3d3d3;">
</canvas>
</body>
</html>
veiw.onFrame = function(event){
    project.importSVG('.../mario.svg');
};

In the chrome dev tools however, under sources, I would expect to see something that matches my file structure, and I do, except script.js is missing.
I think it must be something to do with the text/paperscript, but I really don’t know and definately don’t know how to fix it. I’ve looked at examples and can’t figure out what I am doing differently. The mario.svg doesn’t show up either but I think that’s just because its not referenced in the html. Can someone explain this please?

Updating a specific value in row with conditions nodejs google sheet

I’ve been trying to update an existing row with the same name, email, etc.. my problem is that I can’t figure out how to add a number in the second trial WPM for the same user.

to be more clear, the user submits a form and start the operation in the web app, when the first operation ends, the data is sent to google sheets and the user moves to the second operation. I want to send the data of the second operation to the user with the same name, email.

before
after

app.post("/competition" , async (req, res) => {
const {Name, Email, Number, Faculty, University, first_Trial_WPM , first_Trial_CPM} = req.body;
const auth = new google.auth.GoogleAuth({
    keyFile: "credentials.json",

    scopes: "https://www.googleapis.com/auth/spreadsheets",

    });

const client = await auth.getClient();

const googleSheets = google.sheets({version: "v4", auth: client});

const spreadsheetId = "###";

await googleSheets.spreadsheets.values.append({

    auth,
    spreadsheetId,
    range: "Sheet1!A:G",
    valueInputOption: "USER_ENTERED",

    resource : {
        values: [
            [Name, Email, Number, Faculty, University, first_Trial_WPM , first_Trial_CPM]
        ]
    }
})

res.render("competition2");
});

 app.post("/home" , async (req, res) => {

const {Name, Email, Number, Faculty, University, second_Trial_WPM , second_Trial_CPM} = req.body;

    const auth = new google.auth.GoogleAuth({
        keyFile: "credentials.json",

        scopes: "https://www.googleapis.com/auth/spreadsheets",

    });

    const client = await auth.getClient();

    const googleSheets = google.sheets({version: "v4", auth: client});

    const spreadsheetId = "###";

    await googleSheets.spreadsheets.values.update({

        auth,
        spreadsheetId,
        range: "Sheet1!A2:I1000",
        valueInputOption: "USER_ENTERED",

        resource : {
            values: [
                [Name, Email, Number, Faculty, University, second_Trial_WPM , second_Trial_CPM]
            ]
        }
    })

    res.render('home');
});

How to send continuous radio signals in micro:bit?

I’m trying to make a remote controlled car with a camera. I need to send radio signals constantly which depending on the message sent will do certain things. I should have to hold down the buttons on the controller to execute the code. When no button is held I need to reset the steering and the camera should go down (there is a button for it to go up). How can I send continuous radio signals to update? The micro:bit is a V2 model. We’re using DF-Driver and Kitronik Game Controller.

Here’s my current code:

Kitronik_Game_Controller.onButtonPress(Kitronik_Game_Controller.ControllerButtonPins.Fire1, Kitronik_Game_Controller.ControllerButtonEvents.Down, function () {
    radio.sendString("S")
})
Kitronik_Game_Controller.onButtonPress(Kitronik_Game_Controller.ControllerButtonPins.Fire2, Kitronik_Game_Controller.ControllerButtonEvents.Down, function () {
    radio.sendString("CU")
})
Kitronik_Game_Controller.onButtonPress(Kitronik_Game_Controller.ControllerButtonPins.Down, Kitronik_Game_Controller.ControllerButtonEvents.Down, function () {
    radio.sendString("B")
})
input.onButtonPressed(Button.A, function () {
    radio.sendString("CL")
})
Kitronik_Game_Controller.onButtonPress(Kitronik_Game_Controller.ControllerButtonPins.Up, Kitronik_Game_Controller.ControllerButtonEvents.Down, function () {
    radio.sendString("F")
})
radio.onReceivedString(function (receivedString) {
    if (receivedString == "CL" && domeServoHorizontalAngle > 0) {
        domeServoHorizontalAngle += -5
    }
    if (receivedString == "CR" && domeServoHorizontalAngle < 180) {
        domeServoHorizontalAngle += 5
    }
    if (receivedString == "S") {
        motor.motorStopAll()
    }
    if (receivedString == "CU" && domeServoVerticalAngle < 180) {
        domeServoVerticalAngle += 5
    } else {
        if (domeServoVerticalAngle > 0) {
            domeServoVerticalAngle += -5
        }
    }
    if (receivedString == "F") {
        motor.MotorRun(motor.Motors.M1, motor.Dir.CCW, 255)
    }
    if (receivedString == "B") {
        motor.MotorRun(motor.Motors.M1, motor.Dir.CW, 255)
    }
    if (receivedString == "L") {
        motor.servo(motor.Servos.S1, 135)
    } else {
        if (receivedString == "R") {
            motor.servo(motor.Servos.S1, 45)
        } else {
            motor.servo(motor.Servos.S1, 90)
        }
    }
    motor.servo(motor.Servos.S3, 180 - domeServoHorizontalAngle)
    motor.servo(motor.Servos.S2, 180 - domeServoVerticalAngle)
})
input.onButtonPressed(Button.B, function () {
    radio.sendString("CR")
})
Kitronik_Game_Controller.onButtonPress(Kitronik_Game_Controller.ControllerButtonPins.Right, Kitronik_Game_Controller.ControllerButtonEvents.Down, function () {
    radio.sendString("R")
})
Kitronik_Game_Controller.onButtonPress(Kitronik_Game_Controller.ControllerButtonPins.Left, Kitronik_Game_Controller.ControllerButtonEvents.Down, function () {
    radio.sendString("L")
})
let domeServoVerticalAngle = 0
let domeServoHorizontalAngle = 0
domeServoHorizontalAngle = 90
domeServoVerticalAngle = 90

Failed to load resource: the server responded with a status of 404 (Not Found) when editing form React Node MySQL

I am having trouble navigating to the right path after editing a form in React. The web page refreshes and logs me out of the site despite having no error when updating. The console has this error:

Failed to load resource: the server responded with a status of 404 (Not Found)

Here is my front end code:

import React, {useContext, useState, useEffect} from 'react'
import { UserContext, UserTypeContext } from '../Helper/Context';
import { Form, Button, Card } from 'react-bootstrap';
import Axios from 'axios';
import { useHistory } from 'react-router-dom';

function LecturerEditProject(){

    const history = useHistory();

    const {userId, setUserId} = useContext(UserContext);
    const {type, isUserType} = useContext(UserTypeContext);

    const [projectCode, setProjectCode] = useState("");
    const [projectTitle, setProjectTitle] = useState("");
    const [projectInformation, setProjectInformation] = useState("");
    const [collaboratorId, setCollaboratorId] = useState("");

const updateProject = () => {

        Axios.put(`http://localhost:3001/lecteditproject/${projectCode}`,{
                projectId: projectCode,
                projectTitle: projectTitle,
                projectInformation: projectInformation,
                collaboratorId: collaboratorId,
        }).then((response) => {
                if(response){
                    window.alert('Your project has been updated!');
                    history.push(`/lecturer/${userId}/yourproject`);
                }
                else{
                    window.alert('Update is unsuccessful!');
                }
            })
    }

return(
        <div className="d-flex justify-content-center">
            <Card style={{ width: '70%' }}>
            <Form onSubmit = {updateProject} className = "m-3 p-5">
            <h3>Edit Project</h3>
            <hr/>
            
            <Form.Group className="mb-3" controlId="projectTitle">
            <Form.Label>Project Title</Form.Label>
              <Form.Control type="text" placeholder="Enter your project title here"  
                  onChange = {(event) => {
                    setProjectTitle(event.target.value);
                  }}
                  defaultValue = {projectTitle}
                />
            </Form.Group>
            
            <Form.Group className="mb-3" controlId="projectInformation">
            <Form.Label>Project Information</Form.Label>
                <Form.Control as="textarea" rows={3} placeholder="Enter your project information here"  
                  onChange = {(event) => {
                    setProjectInformation(event.target.value);
                  }}
                    defaultValue = {projectInformation}
                />
            </Form.Group>

            <Form.Group className="mb-3" controlId="projectCollaborator">
                    <Form.Label>Collaborator</Form.Label>
                    <Form.Control type="text" placeholder="Enter your project collaborator ID here"  
                        onChange = {(event) => {
                            setCollaboratorId(event.target.value);
                        }}

                    />
            </Form.Group>
            


            <div className = "d-flex flex-end  justify-content-end align-items-end mt-3">
            <Button className = "d-flex flex-end justify-content-end align-items-end" variant="primary" type="submit">
                Update
            </Button>
          </div>

          </Form>
          </Card>
        </div>
)

My Node.js Axios put request is as below:

app.put("/lecteditproject/:projectid", (req,res) => {

    // upload.single('userImage')
        const projectId = req.body.projectId;
        const projectTitle = req.body.projectTitle;
        const projectInformation = req.body.projectInformation;
        const collaboratorId = req.body.collaboratorId;


        try{
            const updateProject = "UPDATE project SET project_title = ?, project_information = ?, representative_id = ? WHERE project_id = ?;"

            db.query(updateProject, [projectTitle, projectInformation, collaboratorId, projectId], (err, result) => {


                if(err){
                    console.log("Error: ", err);
                }
                else{
                    res.send(result);
                }
                
            })

        }
        catch(err){
            console.log(err);
        }

    
}
) 

Anyone can please, please help me with this problem? I have been stuck on this part for days. The update is successful but it logs me out. Thank you.

Serious crisis in rendering HTML along with its css in NodeJS

So once upon a time in practicing HTML,CSS and JS I built a pretty website. It was a fully functional one with multiple web pages and used express for backend. I lost its files and left web prog for a while. Now I cannot figure out how to do that again. I went to source from where I learned it but in vain. If I Go-Live the HTML page I created with CSS, It displays corrrectly i.e with the css. However if I use express, it just shows the Html. Yes Plain, old Htmlsss. Hatesss and textsss, No sstylingss.
Here is the javascript

const fs = require('fs')
const express = require('express');
const app = express();
const port = 80;
const home_html = fs.readFileSync('HTML.html')

app.get("/", (req, res) => {
    res.writeHead(200, { 'Content-Type': 'text/html' });
    res.end(home_html);
});

app.listen(port, () => {
    console.log(`The application started successfully on port ${port}`);
});

The website should look like when it is displayed along with css in snippet.
Seriously can’t figure out what is and where is it going wrong.

:root {
    --black-col: #15191f;
    --light-col: #e3ecf3;
}

* {
    margin: 0px;
    padding: 0px;
}

.cen {
    text-align: center;
}

.flex {
    display: flex;
}

.flex-row {
    flex-direction: row;
}

.flex-column {
    flex-direction: column;
}

.wrap {
    flex-wrap: wrap;
}

.al-cen {
    align-items: center;
}

.ju-cen {
    justify-content: center;
}

body {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 1.5vw;
    background-color: var(--light-col);
}

div {
    margin: 20px 15px;
}

.border-red {
    border: 3.5px solid #ffb700d3;
    border-radius: 12px;
    box-shadow: 7px 7px 3px 1px green;
    /* box-shadow: x y blur-radius spread-readius color; */
}

.border-green {
    border: 3.5px solid green;
    border-radius: 5px;
    box-shadow: 7px 7px 3px 1px blue;
    /* box-shadow: x y blur-radius spread-readius color; */
}

.border-blue {
    border: 3.5px solid blue;
    border-radius: 5px;
    box-shadow: 7px 7px 3px 1px red;
    /* box-shadow: x y blur-radius spread-readius color; */
}

.block {
    display: block;
}

.inline-block {
    display: inline-block;
}

.line-height {
    line-height: 8vh;
}

/* NAVIGATION BAR  */
.grinav {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

#timeclock {
    justify-content: end;
    margin: 0px 0px 0px 0px;
    color: var(--black-col);
}

#times {
    border: 2px solid var(--light-col);
    background-color: var(--light-col);
    margin: 0px 2vw 0px 0px;
    padding: 5px 20px 5px 20px;
    font-weight: bold;
    border-radius: 200px;
}

.glowbar {
    display: block;
    background-color: #ff7700;
    box-sizing: border-box;
    width: 0%;
    margin: 0px 0px 0px 0px;
    position: fixed;
    height: 4px;
    animation-name: fill2;
    animation-duration: 4s;
    animation-iteration-count: 1;
    animation-timing-function: ease-in-out;
}

@keyframes fill1 {
    from {
        width: 0%;
        background-color: gold;
    }

    to {
        width: 100%;
        background-color: #db9b00;
    }
}

@keyframes fill2 {
    0% {
        width: 0%;
        background-color: rgb(255, 217, 0);
    }

    90% {
        /* width: 70%; */
        background-color: #ff7700;
    }

    100% {
        width: 100%;
        background-color: #ff7700;
    }
}

nav, .grinav {
    position: sticky;
    top: 0px;
    left: 0px;
    width: 100%;
    box-sizing: border-box;
    margin: 0px 0px 0px 0px;
    padding: 5px 5px;
    background-color: var(--black-col);
    z-index: 2;

}

nav a {
    text-decoration: none;
    background-color: var(--black-col);
    color: var(--light-col);
    padding: 4px 10px;
    border: 2px;
    border-radius: 10px;
}

nav a:hover {
    color: #15191f;
    /* ff7700 */
    transition-property: background-color;
    /* transition-property: color; */

    transition-duration: 0.3s;
    transition-timing-function: ease-in-out;
    background-color: var(--light-col);
}


#li1 {
    margin-left: 4vw;
}

#a1 {
    margin: 0px 1.5vw;
}

#a2 {
    margin: 0px 1.5vw;
}

#a3 {
    margin: 0px 1.5vw;
}

#a4 {
    margin: 0px 1.5vw;
}

nav ul li {
    list-style: none;
}

#logo {
    width: 3vw;
    border: 2px;
    border-radius: 100px;
    margin: 5px 0px 0px 15px;
}

/* NAVIGATION BAR ENDS  */


/* MAIN HEADING  */
.heading {
    height: 90vh;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}

.ap {
    grid-column-start: 2;
    grid-column-end: 2;

    margin: 100px 0px 0px 100px;

}

/* If there is a horizontal scroll bar, you can disable it by the following code:{
box-sizing: border-box;
width: 100%; 
instead of width: 100vw;
This should solve the problem} */
.heading::before {
    box-sizing: border-box;
    content: "";
    height: 100vh;
    /* background-color: var(--black-col); */
    background: url(../static/Pb_O_W.png) no-repeat center center/cover;
    width: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: -1;
}

.AiO {
    font-family: 'Bahnschrift', 'Arial', 'Calibri', 'Times New Roman', Times, serif;
    font-size: 2.5vw;
    margin: 40px 0px;
    color: orange;
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 2;

    /* text-align: left; */
    top: 100px;
    margin: 277px 0px 0px 150px;
}

.breaker {
    display: none;
}

/* @media only screen and (max-width:2600px) {
    .heading::before {
        box-sizing: border-box;
        content: "";
        height: 100vh;
        background-color: var(--black-col);
        background: url(../static/Pb_O_W.png) no-repeat center center/cover;
        width: 100%;
        position: absolute;
        top: 0px;
        left: 0px;
        z-index: -1;
    }
} */

.smbot {
    text-align: center;
    display: inline;
    color: var(--light-col);
}

/* MAIN HEADING ENDS  */

/* LISTS SECTION  */
div ul {
    margin: 0px 25px;
}

ol li {
    margin: 0px 40px;
}

ol {
    border: 2px solid blue;
    border-radius: 5px;
    text-align: center;
    margin: 4px 0px;
    width: 100;
}

.text-cen {
    text-align: center;
}

ol li {
    margin-left: 40px;
}

/* LISTS SECTION ENDS */

/* FORMS STARTED */

input {
    display: block;
}

option {
    background-color: var(--black-col);
    color: var(--light-col);
    height: 50px;
    font-size: 1.1rem;
    border-radius: 5px;
}

select {
    width: 85px;
    background-color: var(--black-col);
    color: var(--light-col);
    height: 30px;
    border: 2px solid var(--black-col);
    border-radius: 6px;
}

.button {
    height: 25px;
    width: 25px;
    border-radius: 100px;
}

.checkbox {
    height: 25px;
    width: 25px;
}

/* FORMS ENDED */
h4, h5 {

    text-shadow: 2px 2px 2px var(--black-col);
    text-align: center;
}

.container {
    background-color: rgb(255, 255, 255);
}

.box {
    background-color: green;
    width: 250px;
    height: 250px;
    position: relative;
    animation-name: harry1;
    /* animation-name: harry2; */
    animation-duration: 4s;
    animation-iteration-count: 1;
    /* z-index: -1; */
    transition: all 1s ease-in-out;
}

.box:hover {
    transform: rotate(3600000000deg);
}



@keyframes harry1 {
    from {
        width: 200px;
    }

    to {
        width: 1400px;
    }
}

@keyframes harry2 {
    0% {
        top: 0px;
        left: 0px;
    }

    25% {
        top: 250px;
        left: 0px;
    }

    75% {
        top: 250px;
        left: 250px;
    }

    100% {
        top: 0px;
        left: 250px;
    }
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML</title>
    <link rel="stylesheet" href="HTML.css">
    <!-- <script src="../JS/index.js"></script> -->
</head>

<body class="">
    <div class="grinav">
        <nav class="flex row al-cen">
            <img id="logo" src="../static/Pb_O_Wsm.png" alt="Img not found">
            <ul class="flex row">
                <li id="li1"><a id="a1" href="../HTML/HTML.html" target="_blank">Html</a></li>
                <li id="li2"><a id="a2" href="../HTML/CSS.html" target="_blank">CSS</a></li>
                <li id="li3"><a id="a3" href="../HTML/Javasc.html" target="_blank">JavaScript</a></li>
            </ul>
        </nav>
        <li id="timeclock" class="flex row al-cen "><span id="times"></span></li>
    </div>
    <div class="glowbar">
    </div>
    <div class="heading flex flex-column ju-cen ">
        <h1 class="AiO ">All in ONE Website<br>


        </h1>
        <p class="ap">This <strong>Website</strong> aims to <br class="breaker">
            <i>include</i> all that<br class="breaker">
            has been <em>learnt</em> and<br class="breaker">
            keep a record of it <br class="breaker">
            for future usage.
        </p>

    </div>
    <hr>
    <div class="border-red firstpara">
        <p><b>
                <b>This Bold<b>
            </b>Lorem ipsum dolor sit amet consectetur, adipisicing elit. <br><strong>
                <br> Has been used here and here<br><br>
            </strong> modi molestias omnis voluptate alias unde voluptates provident hic voluptatibus ipsum deleniti
            itaque
            delectus et expedita quisquam, non soluta, harum consequuntur sapiente rem quaerat. Repellendus, impedit.
        </p>
    </div>
    <div class="border-green lists">
        <div class="orderdlist block border flex-row ">

            <ol id="ol1" class="inline-block" type="1">
                <h6 class="cen">OL type 1</h6>
                <li>Lorem ipsum dolor sit amet.</li>
                <li>Lorem ipsum dolor sit amet.</li>
                <li>Lorem ipsum dolor sit amet.</li>
            </ol>
            <ol id="olA" class="inline-block" type="A">
                <h6 class="cen">OL type A</h6>
                <li>Lorem ipsum dolor sit amet.</li>
                <li>Lorem ipsum dolor sit amet.</li>
                <li>Lorem ipsum dolor sit amet.</li>
            </ol>
            <ol id="ola" class="inline-block" type="a">
                <h6 class="cen">OL type a</h6>
                <li>Lorem ipsum dolor sit amet.</li>
                <li>Lorem ipsum dolor sit amet.</li>
                <li>Lorem ipsum dolor sit amet.</li>
            </ol>
            <ol id="olI" class="inline-block" type="I">
                <h6 class="cen">OL type I</h6>
                <li>Lorem ipsum dolor sit amet.</li>
                <li>Lorem ipsum dolor sit amet.</li>
                <li>Lorem ipsum dolor sit amet.</li>
            </ol>
            <ol id="oli" class="inline-block" type="i">
                <h6 class="cen">OL type i</h6>
                <li>Lorem ipsum dolor sit amet.</li>
                <li>Lorem ipsum dolor sit amet.</li>
                <li>Lorem ipsum dolor sit amet.</li>
            </ol>
        </div>
        <div class="unorderedlist">
            <ul type="square">
                <li>Lorem ipsum dolor sit amet.</li>
                <li>Lorem ipsum dolor sit amet.</li>
                <li>Lorem ipsum dolor sit amet.</li>
            </ul>
            <ul type="circle">
                <li>Lorem ipsum dolor sit amet.</li>
                <li>Lorem ipsum dolor sit amet.</li>
                <li>Lorem ipsum dolor sit amet.</li>
            </ul>
            <ul type="disc">
                <li>Lorem ipsum dolor sit amet.</li>
                <li>Lorem ipsum dolor sit amet.</li>
                <li>Lorem ipsum dolor sit amet.</li>
            </ul>
        </div>
    </div>
    <div class="border-blue table text-cen flex flex-column wrap">
        <h4>This is a Table</h4>
        <table>
            <thead>
                <tr>
                    <th>Heading-1</th>
                    <th>Heading-2</th>
                    <th>Heading-3</th>
                    <th>Heading-4</th>
                    <th>Heading-5</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Row-1-Colum-1</td>
                    <td>Row-1-Colum-2</td>
                    <td>Row-1-Colum-3</td>
                    <td>Row-1-Colum-4</td>
                    <td>Row-1-Colum-5</td>
                </tr>
                <tr>
                    <td>Row-2-Column-1</td>
                    <td>Row-2-Column-2</td>
                    <td>Row-2-Column-3</td>
                    <td>Row-2-Column-4</td>
                    <td>Row-2-Column-5</td>
                </tr>
                <tr>
                    <td>Row-3-Column-1</td>
                    <td>Row-3-Column-2</td>
                    <td>Row-3-Column-3</td>
                    <td>Row-3-Column-4</td>
                    <td>Row-3-Column-5</td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="border-red forms flex flex-column">
        <h1 class="cen">FORMS</h1>
        <h5 class="cen">Below are some types of input we can ask on forms.Include a NAME in input tags
        </h5>
        <p>We will make input tag a block element to make go to next line and make the code look clean.
            Before it was inline so elements crammmed over each other.We can add value="" to show that thing.<br>
            The diff between value and placeholder is that the placeholder gets removed whan an item is entered, wheras
            when we enter an item at place of value, it concencates in the value. Placeholder is Background, value is
            not.
            @gmail.com is value below in email. Remaining are Placeholder
        </p>
        <form action="#">
            Button <input class="button" type="button" placeholder="Placeholder">
            Checkbox<input type="checkbox" class="checkbox" placeholder="Placeholder">
            Color<input type="color" placeholder="Placeholder">
            Date<input type="date" placeholder="Placeholder">
            Datetime<input type="datetime" placeholder="Placeholder">
            Datetime-local<input type="datetime-local" placeholder="Placeholder">
            <p>Just Testing</p>
            Email<input type="email" value="@gmail.com" placeholder="Placeholder">
            File<input type="file" placeholder="Placeholder">
            Hidden<input type="hidden" placeholder="Placeholder">
            Image<input type="image" placeholder="Placeholder">
            Month<input type="month" placeholder="Placeholder">
            Number<input type="number" placeholder="Placeholder">
            Password<input type="password" placeholder="Placeholder">
            Radio<input type="radio" placeholder="Placeholder">
            Range<input type="range" placeholder="Placeholder">
            Reset<input type="reset" placeholder="Placeholder">
            Search<input type="search" placeholder="Placeholder">
            Submit<input type="submit" placeholder="Placeholder">
            Tel<input type="tel" placeholder="Placeholder">
            Text<input type="text" placeholder="Placeholder">
            Time<input type="time" placeholder="Placeholder">
            Url<input type="url" placeholder="Placeholder">
            Week<input type="week" placeholder="Placeholder">

            Select from a dropdown <select>
                <option value="Option-1-Val">Option-1</option>
                <option value="Option-2-Val">Option-2</option>
                <option value="Option-3-Val">Option-3</option>
                <option value="Option-4-Val">Option-4</option>
                <option value="Option-5-Val">Option-5</option>
            </select>

        </form>
    </div>
    <div class="entities border-green">
        <h4 class="cen">We use entities for displaying some character</h4>
        &lt;
        <!-- Less Than -->
        &gt;
        <!-- Greater Than -->
        &pound;
        <!-- pound -->
        &copy;
        <!-- copy -->
        &rAarr;
        <!-- Arrow -->
        &frac12;
        <!-- In form of fraction -->

    </div>
    <div class="border-blue semanticelements">
        <p>A dropdown button which shows whatever is written in summary and when clicked reveals what is written in
            detail tag.</p>
        <details>

            <summary>I have keys but no doors. I have space but no room. You can enter but you can't leave. What am i?
            </summary>
            A Keyboard.

        </details>
        <p>Now i will use a time tag</p>
        <p>We will be celebrating new year on <time datetime="2022-12-12">December 12</time> in my house.</p>

    </div>

</body>
<script>
    function updateTime() {
        timern = new Date()
        times.innerHTML = `${timern.getHours()}:${timern.getMinutes()}:${timern.getSeconds()}`;
        console.log(times.innerHTML)
    }
    setInterval(updateTime, 500);
</script>

</html>

MongoDB Find documents created in past 7 days and return 0 on days where no document was created

I’m trying to find documents from last 7 days in my Mongo Database.

I’m able to receive data in desired format where specific date and numOfTickets created on that given date are returned:

{
    "datesUsed": {
        "startDate": "2022-04-02T14:42:14.223Z",
        "endDate": "2022-04-09T14:42:14.223Z"
    },
    "data": [
        {
            "date": "02/04/2022",
            "numOfTickets": 1
        },
        {
            "date": "03/04/2022",
            "numOfTickets": 1
        },
        {
            "date": "04/04/2022",
            "numOfTickets": 2
        },
        {
            "date": "06/04/2022",
            "numOfTickets": 1
        },
        {
            "date": "07/04/2022",
            "numOfTickets": 1
        },
        {
            "date": "08/04/2022",
            "numOfTickets": 2
        },
        {
            "date": "09/04/2022",
            "numOfTickets": 1
        }
    ]
}

The problem is that Mongo only returns data on days where a document was created, but returns nothing on days where no document was created – in this case 05/04/2022.

What I’m trying to achieve is to also include another JSON object that would say something in these terms:

{
            "date": "05/04/2022",
            "numOfTickets": 0
}

This is what I have so far:

const companyId = req.query.companyId;
    let dates = [];
    const data = [];
    // Last 7 days
    const endDate = new Date();
    const startDate = new Date(Date.now() - 604800000);

    // Find tickets from past 7 days
    const allCompanyTickets = await ticketModel
      .find({
        company_id: companyId,
        createdAt: { $gte: new Date(startDate), $lte: new Date(endDate) },
      })
      .sort({ createdAt: 1 });

      console.log(allCompanyTickets)

    // Push them to an array
    allCompanyTickets.forEach((ticket) => {
      dates.push(ticket.createdAt.toLocaleDateString());
    });

    // Count occurences of days in the dates array
    function countOccurrences(arr) {
      return arr.reduce(function (a, b) {
        a[b] = a[b] + 1 || 1;
        return a;
      }, []);
    }

    // Make an object from the data above
    const datesOrdered = countOccurrences(dates);

    // Give the data above keys and push it to a new array
    for (let key in datesOrdered) {
      const tempObj = { date: key, numOfTickets: datesOrdered[key] };
      data.push(tempObj);
    }

    res.status(200).json({ datesUsed: { startDate, endDate }, data: data });

SVG stroke animation not working in Safari

My JS code goes over each path, and adds a stroke-dasharray and stroke-dashoffset according to path length:

const $paths = document.getElementsByTagName('path');
for (const path of $paths) {
    const totalLength = path.getTotalLength();
    path.style.strokeDashoffset = totalLength;
    path.style.strokeDasharray = totalLength;
};

Then, My CSS just animates the dashoffset to 0, while lowering the stroke opacity and raising the fill opacity:

.character path {
    fill-opacity: 0;
    stroke-opacity: 1;
    stroke-width: 2px;
    stroke: white;
    -webkit-animation: path 4s linear 1s both;
            animation: path 4s linear 1s both;
}

@keyframes path {
    70% {
        fill-opacity: 0;
    }

    80% {
        stroke-dashoffset: 0;
        stroke-opacity: 1;
        
    }

    100% {
        stroke-opacity: 0;
        stroke-dashoffset: 0;
        fill-opacity: 1;
    }
}

This works perfectly in Chrome – the animation shows the paths being drawn, but in Safari, the paths just show up without any animation.
I tried prefixing but it doesn’t work.

React native: default value for route/screen navigation params

in my react native app I set screen parameters as:

const { chat_id, headerTitle, headerImage, receiver_id, user, adrequest_id, ad_id, ad , name} = useRoute().params;

I want to set default values for this parameters, with props I can set default values like this, but this doesn’t seem to work with screen params.

const {  planId = 0 } = props;

how to delete a list item by using a button in javascript?

I’m making a simple task list that will take user input and append it to and unordered list whenever the add button is clicked. Once the item is added the text will be appended to a list element along with a delete button. I’m new to JavaScript so I don’t quite know how to make the delete button remove the list element that the user clicks on. Note: it’s a span element, not a button.

I think removeChild() might be good, but I can’t seem to implement it.


let addButton = document.getElementById("add-item");

addButton.addEventListener("click", function () {
    
    // Retrieves the 'list'
    let list = document.getElementById("items");
    let textNode = window.prompt("Enter item:");
    if (textNode != null) {
        let item = document.createElement("li");
        //Creates a textnode from the users input
        item.appendChild(document.createTextNode(textNode));
        //Adds the users textnode at the end of the list
        list.appendChild(item);
        // Creates a delete button 
        let deleteButton = document.createElement("span");
        deleteButton.innerHTML = "Delete"
        item.appendChild(deleteButton)
    }
});
ul {
    padding: 0px;
}

li {
    display: flex;
    background-color: #eee;
    margin: 5px;
    padding: 5px;
    align-items: center;
}

li > span {
    margin-left: auto;
    background-color: #aaa;
    padding: 5px;
    cursor: pointer;
}
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <link href="app_2.css" rel="stylesheet">
    <title>Items</title>
</head>

<body>
    <h1>Items</h1>

    <ul id="items">
        <!--
            This is the template for an item in the list:

            <li>The first item is free! <span>Delete</span></li>
        -->
    </ul>
    
    <button type="button" id="add-item">Add item</button>

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

</html>

Javascript map object, skips element and sets a timeout

This is my object

[0 … 200]
0: {id: 2291798516830927, url: '.....', address: 'new', symbol: '1t43', fav: false}
1: {id: 7337710716729779, url: '.....', address: 'new', symbol: 'gf23525', fav: false}
2: {id: 6962996031953837, url: '.....', address: 'old', symbol: '435234', fav: false}
3: {id: 8456218226475281, url: '.....', address: 'old', symbol: '2345', fav: false}
4: {id: 6759748921116029, url: '.....', address: 'new', symbol: '$B2345ROKE', fav: false}
...


address="new"
bookmarks.map(function (bookmark, index) {
    setTimeout(() => {
        if (bookmark.address == address) {
           console.log(bookmark.symbol)
        }
    }, 1000 * index)
})

What I want to do is skip all the “old” addresses in my object and continue with the mapping.
There should be a 2 second timeout if possible between each cycle.

if I use Timeout with value “1000 * index” after the first two objects I have to wait several minutes before the cycle resumes, it is not clear to me why.

if I use the timeout without with “1000” without “index” the timeout does not work, the object is printed entirely without timeout