javascript – Page 6926 – Blancer.com Tutorials and projects

Getting the 0 and 1 bit information of a file uploaded using JavaScript

I am trying to extract the bit 0 an 1 equivalent of a file uploaded by a user using JavaScript. For example if a user uploaded an image can I get the equivalent of that file down to a single bit? And can I later change those bits back to the original file?

php $_POST ist empty or not defined after send value from javascript ajax

I send a value with js/ajax to the same page
the console.log show the correct value but $_POST is empty or not defined after load page
this is my code what did i miss?

<script>
var xmlHttpObject = false;
if (typeof XMLHttpRequest != 'undefined') {
    xmlHttpObject = new XMLHttpRequest();
}
if (!xmlHttpObject) {
    try { xmlHttpObject = new ActiveXObject("Msxml2.XMLHTTP"); }
    catch(e) {
        try { xmlHttpObject = new ActiveXObject("Microsoft.XMLHTTP");}
        catch(e) { xmlHttpObject = null; }
    }
}

function load_data(){
    if (xmlHttpObject.readyState == 4){
        var GetXON = xmlHttpObject.GetXIN;
        document.getElementById(GetXON).innerHTML = xmlHttpObject.responseText;
    }
}
function get_data(N){
  var N   = N;
  var DATA ='data='+N;
  console.log(DATA);
  xmlHttpObject.open('post','',true);
  xmlHttpObject.GetXIN = 'book';
  xmlHttpObject.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  xmlHttpObject.onreadystatechange = load_data;
}
</script>

<button onclick="get_data('1')">Send Value</button> 

<div id="book">
<?php echo $_POST['data']; ?>
</div>

How to specify order for useEffect() in React?

I have a doubt about React. I have two functions in

useEffect(() => {
    funct1()
    funct2()
  }

I need funct1() to run before funt2() but func1() is taking longer and I am getting a bad request initially and failing my test cases.

Please help me figure out a solution.

How do I resolve a promise when fetching a file using JS called from HTML?

My application is using ReactJS (Material library), AWS Amplify, AWS S3 and GraphQL. I’m trying to populate a table with Projects. Each Project row contains the name, an image and some other details. Project has a GraphQL schema s.t. it has an image variable. The image variable stores the unique key for finding the image associated with the project.

I’m able to populate each row using a mapping for project (i.e. project.name, project.var1, project.var2, …). However, I need to get a signed url for the image to display in the table and I’m having some issues with assigning the fetched url. I’m a begginer at Javascript, so I probably misunderstand what I’m actually doing.

When I run the code below, I don’t get any errors and it seems like fetchImage is being called for any of the projects that have image values. Upon inspecting the table the background image values are canceled out and say “Invalid property value” with the following value:

background image: url([Object Promise])

JavaScript code:

async function fetchImage(e) {
   const signedUrl = await Storage.get(e, {
   level: ""
   });
   console.log('env img: ', e);
   console.log('signed Url:', signedUrl);

   return signedUrl;
}

Return HTML:

<TableBody>
  {projects.map((project) => {
    return (
      <Fragment key={project.id}>
        <TableRow
          hover
          key={project.id}
        >
          <TableCell>
            <Box
              sx={{
                alignItems: 'center',
                display: 'flex'
              }}
            >                     
              {project.image
                ? (                            
                  <Box
                    sx={{
                      alignItems: 'center',
                      backgroundColor: 'background.default',
                      backgroundImage: `url(${fetchImage(project.image)})`,
                      backgroundPosition: 'center',
                      backgroundSize: 'cover',
                      borderRadius: 1,
                      display: 'flex',
                      height: 80,
                      justifyContent: 'center',
                      overflow: 'hidden',
                      width: 80
                    }}
                  />
                )
                : ( ...
                )}
            </Box>
          </TableCell>
        </TableRow>
      </Fragment>
    );
  })}
</TableBody>

Three.js is not rendering the scene into my div

im trying to code a wavy plane with Three.js in React. But for some reason the browser does not render the canvas nor the parent div (App). I tried a more simpler Three.js code, just with a cube and it works fine. So the import and the ref-rendering is right. Im a little stuck with it, i hope somebody can tell me what i did wrong in the code.

import { useEffect, useRef } from "react";
import "./App.css";
import * as THREE from "three";

function App() {
  var mountRef = useRef(null);

  useEffect(() => {
    var vertexHeight = 15000,
      planeDefinition = 100,
      planeSize = 1245000,
      background = "#002135",
      meshColor = "#005e97";

    var camera = new THREE.PerspectiveCamera(
      55,
      window.innerWidth / window.innerHeight,
      1,
      400000
    );
    camera.position.z = 10000;
    camera.position.y = 10000;

    var scene = new THREE.Scene();
    scene.fog = new THREE.Fog(background, 1, 300000);

    var planeGeo = new THREE.PlaneGeometry(
      planeSize,
      planeSize,
      planeDefinition,
      planeDefinition
    );
    var plane = new THREE.Mesh(
      planeGeo,
      new THREE.MeshBasicMaterial({
        color: meshColor,
        wireframe: true,
      })
    );
    plane.rotation.x -= Math.PI * 0.5;

    scene.add(plane);

    var renderer = new THREE.WebGLRenderer({ alpha: false });
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.setClearColor(background, 1);

    mountRef.current.appendChild(renderer.domElement);

    updatePlane();

    function updatePlane() {
      for (var i = 0; i < planeGeo.vertices.length; i++) {
        planeGeo.vertices[i].z += Math.random() * vertexHeight - vertexHeight;
        planeGeo.vertices[i]._myZ = planeGeo.vertices[i].z;
      }
    }

    render();

    var count = 0;
    function render() {
      requestAnimationFrame(render);
      // camera.position.z -= 150;
      var x = camera.position.x;
      var z = camera.position.z;
      camera.position.x = x * Math.cos(0.001) + z * Math.sin(0.001) - 10;
      camera.position.z = z * Math.cos(0.001) - x * Math.sin(0.001) - 10;
      camera.lookAt(new THREE.Vector3(0, 8000, 0));

      for (var i = 0; i < planeGeo.vertices.length; i++) {
        z = +planeGeo.vertices[i].z;
        planeGeo.vertices[i].z =
          Math.sin(i + count * 0.00002) *
          (planeGeo.vertices[i]._myZ - planeGeo.vertices[i]._myZ * 0.6);
        plane.geometry.verticesNeedUpdate = true;

        count += 0.1;
      }

      renderer.render(scene, camera);
    }

    window.addEventListener("resize", onWindowResize, false);

    function onWindowResize() {
      camera.aspect = window.innerWidth / window.innerHeight;
      camera.updateProjectionMatrix();
      renderer.setSize(window.innerWidth, window.innerHeight);
    }

    return () => {
      mountRef.current.removeChild(renderer.domElement);
    };
  }, []);
  return (
    <div className="App">
      <div className="webgl-bg-scene" ref={mountRef}></div>
    </div>
  );
}

export default App;

body {
  margin: 0;
  padding: 0;
  border: 0;
  background-color: gray;
}

.App {
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.webgl-bg-scene {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  overflow-y: hidden;
  background-color: blue;
}

How do I implement a function that shows the value of the Cards in this JavaScript blackjack?

I have tried to implement a function to show the values of the player and the dealer cards (pelaajan pisteet and jakajan pisteet) But I have only been able to print the value of the players first two cards. I have tried it simply just printing the value of “KorttiSumma” and “KorttiSumma2” but it didn’t work exactly as I planed, as I said Printing the “KorttiSumma” printed the players first two cards but printing the “KorttiSumma2” didn’t print the dealers cards, It didn’t print anything. I’d appreciate if someone could help me I am losing my mind (sorry for the bad english).

let korttiPakka = [];
let maat = "";


for (let i = 0; i < 4; i++){
    if (i == 0) {
        maat = "hearts";
    }
    else if (i == 1) {
        maat = "clubs";
    }
    else if (i == 2) {
        maat = "diamonds";
    }
    else if (i == 3) {
        maat = "spades"
    }
     for (let j = 0; j < 13; j++) {
        korttiPakka.push([maat, j + 1]);
    }
}

korttiPakka = korttiPakka.sort(function(a, b){return 0.5 - Math.random()});

let laskuri = 0;
let korttiArvo = korttiPakka[laskuri][1]; 
let korttiMaaKoodi = korttiPakka[laskuri][0];
let korttiSumma = 0;

while (laskuri < 2) {
    if (laskuri == 0) {
        document.getElementById("upper").innerText = korttiArvo;

        if (korttiMaaKoodi == "hearts") {
            document.getElementById("midle-red").innerText = "♥";
        }
        else if (korttiMaaKoodi == "clubs") {
            document.getElementById("midle").innerText = "♣";
        }
        else if (korttiMaaKoodi == "diamonds") {
            document.getElementById("midle-red").innerText = "♦";
        }
        else if (korttiMaaKoodi == "spades") {
            document.getElementById("midle").innerText = "♠";
        }
        document.getElementById("lower").innerText = korttiArvo;
        korttiSumma += korttiArvo;
        laskuri++;
        korttiMaaKoodi = korttiPakka[laskuri][0];
        korttiArvo = korttiPakka[laskuri][1];
    }
    else if (laskuri == 1) {
        document.getElementById("upper2").innerText = korttiArvo;

        if (korttiMaaKoodi == "hearts") {
            document.getElementById("midle-red2").innerText = "♥";
        }
        else if (korttiMaaKoodi == "clubs") {
            document.getElementById("midle2").innerText = "♣";
        }
        else if (korttiMaaKoodi == "diamonds") {
            document.getElementById("midle-red2").innerText = "♦";
        }
        else if (korttiMaaKoodi == "spades") {
            document.getElementById("midle2").innerText = "♠";
        }
        document.getElementById("lower2").innerText = korttiArvo;
        korttiSumma += korttiArvo;
        laskuri++;
    }
}

if (korttiSumma == 21) {
    document.getElementById("tulos").innerText = "Sait korttien arvoksi 21, VOITIT PELIN!";
}
else if (korttiSumma > 21) {
    document.getElementById("tulos").innerText = "HÄVISIT PELIN!";
}

function nostaKortti() {
    korttiMaaKoodi = korttiPakka[laskuri][0];
    korttiArvo = korttiPakka[laskuri][1];
    korttiSumma += korttiArvo;
        if (laskuri == 2) {
            document.getElementById("upper3").innerText = korttiArvo;

            if (korttiMaaKoodi == "hearts") {
                document.getElementById("midle-red3").innerText = "♥";
            }
            else if (korttiMaaKoodi == "clubs") {
                document.getElementById("midle3").innerText = "♣";
            }
            else if (korttiMaaKoodi == "diamonds") {
                document.getElementById("midle-red3").innerText = "♦";
            }
            else if (korttiMaaKoodi == "spades") {
                document.getElementById("midle3").innerText = "♠";
            }
            document.getElementById("lower3").innerText = korttiArvo;

            if (korttiSumma == 21) {
                document.getElementById("tulos").innerText = "VOITIT PELIN!";
            }
            else if (korttiSumma > 21) {
                document.getElementById("tulos").innerText = "Jakaja voitti, HÄVISIT PELIN!";
            }
            else {
                laskuri++;
            }
        }
        else if (laskuri == 3) {
            document.getElementById("upper4").innerText = korttiArvo;

            if (korttiMaaKoodi == "hearts") {
                document.getElementById("midle-red4").innerText = "♥";
            }
            else if (korttiMaaKoodi == "clubs") {
                document.getElementById("midle4").innerText = "♣";
            }
            else if (korttiMaaKoodi == "diamonds") {
            document.getElementById("midle-red4").innerText = "♦";
            }
            else if (korttiMaaKoodi == "spades") {
            document.getElementById("midle4").innerText = "♠";
            }
            document.getElementById("lower4").innerText = korttiArvo;

            if (korttiSumma == 21) {
                document.getElementById("tulos").innerText = "VOITIT PELIN!";
            }
            else if (korttiSumma > 21) {
                document.getElementById("tulos").innerText = "Jakaja voitti, HÄVISIT PELIN!";
            }
            else {
                laskuri++;
            }
        }
        else if (laskuri == 4) {
            document.getElementById("upper5").innerText = korttiArvo;

            if (korttiMaaKoodi == "hearts") {
                document.getElementById("midle-red5").innerText = "♥";
            }
            else if (korttiMaaKoodi == "clubs") {
                document.getElementById("midle5").innerText = "♣";
            }
            else if (korttiMaaKoodi == "diamonds") {
                document.getElementById("midle-red5").innerText = "♦";
            }
            else if (korttiMaaKoodi == "spades") {
                document.getElementById("midle5").innerText = "♠";
            }
            document.getElementById("lower5").innerText = korttiArvo;

            if (korttiSumma == 21 || korttiSumma < 21) {
                document.getElementById("tulos").innerText = "VOITIT PELIN!";
            }
            else if (korttiSumma > 21) {
                document.getElementById("tulos").innerText = "Jakaja voitti, HÄVISIT PELIN!";
            }
            else {
                laskuri++;
            }
        }
}

function jää() {
    korttiArvo = korttiPakka[laskuri][1];
    korttiMaaKoodi = korttiPakka[laskuri][0];
    let korttiSumma2 = korttiArvo;
    let loppu = 0;

    document.getElementById("upper6").innerText = korttiArvo;

    if (korttiMaaKoodi == "hearts") {
        document.getElementById("midle-red6").innerText = "♥";
    }
    else if (korttiMaaKoodi == "clubs") {
        document.getElementById("midle6").innerText = "♣";
    }
    else if (korttiMaaKoodi == "diamonds") {
        document.getElementById("midle-red6").innerText = "♦";
    }
    else if (korttiMaaKoodi == "spades") {
        document.getElementById("midle6").innerText = "♠";
    }

    document.getElementById("lower6").innerText = korttiArvo;
    
    if (korttiSumma2 > 21) {
        document.getElementById("tulos").innerText = "Voitit pelin!";
        loppu += 1;
    }
    else if ((korttiSumma2 > korttiSumma && korttiSumma2 < 21) || korttiSumma2 == 21) {
        document.getElementById("tulos").innerText = "Jakaja voitti pelin!";
        loppu += 1;
    }
    else if (korttiSumma2 < 21 && loppu == 0) {
        laskuri++;
        korttiArvo = korttiPakka[laskuri][1];
        korttiMaaKoodi = korttiPakka[laskuri][0];
        korttiSumma2 += korttiArvo;

        document.getElementById("upper7").innerText = korttiArvo;

        if (korttiMaaKoodi == "hearts") {
            document.getElementById("midle-red7").innerText = "♥";
        }
        else if (korttiMaaKoodi == "clubs") {
            document.getElementById("midle7").innerText = "♣";
        }
        else if (korttiMaaKoodi == "diamonds") {
            document.getElementById("midle-red7").innerText = "♦";
        }
        else if (korttiMaaKoodi == "spades") {
            document.getElementById("midle7").innerText = "♠";
        }

        document.getElementById("lower7").innerText = korttiArvo;

        if (korttiSumma2 > 21) {
            document.getElementById("tulos").innerText = "Voitit pelin!";
            loppu += 1;
        }
        else if ((korttiSumma2 > korttiSumma && korttiSumma2 < 21) || korttiSumma2 == 21) {
            document.getElementById("tulos").innerText = "Jakaja voitti pelin!";
            loppu += 1;
        }
        else if (korttiSumma2 < 21 && loppu == 0) {
            laskuri++;
            korttiArvo = korttiPakka[laskuri][1];
            korttiMaaKoodi = korttiPakka[laskuri][0];
            korttiSumma2 += korttiArvo;

            document.getElementById("upper8").innerText = korttiArvo;

            if (korttiMaaKoodi == "hearts") {
                document.getElementById("midle-red8").innerText = "♥";
            }
            else if (korttiMaaKoodi == "clubs") {
                document.getElementById("midle8").innerText = "♣";
            }
            else if (korttiMaaKoodi == "diamonds") {
                document.getElementById("midle-red8").innerText = "♦";
            }
            else if (korttiMaaKoodi == "spades") {
                document.getElementById("midle8").innerText = "♠";
            }

            document.getElementById("lower8").innerText = korttiArvo;

            if (korttiSumma2 > 21) {
                document.getElementById("tulos").innerText = "Voitit pelin!";
                loppu += 1;
            }
            else if ((korttiSumma2 > korttiSumma && korttiSumma2 < 21) || korttiSumma2 == 21) {
                document.getElementById("tulos").innerText = "Jakaja voitti pelin!";
                loppu += 1;
            }
            else if (korttiSumma < 21 && loppu == 0) {
                laskuri++;
                korttiArvo = korttiPakka[laskuri][1];
                korttiMaaKoodi = korttiPakka[laskuri][0];
                korttiSumma2 += korttiArvo;

                document.getElementById("upper9").innerText = korttiArvo;

                if (korttiMaaKoodi == "hearts") {
                    document.getElementById("midle-red9").innerText = "♥";
                }
                else if (korttiMaaKoodi == "clubs") {
                    document.getElementById("midle9").innerText = "♣";
                }
                else if (korttiMaaKoodi == "diamonds") {
                    document.getElementById("midle-red9").innerText = "♦";
                }
                else if (korttiMaaKoodi == "spades") {
                    document.getElementById("midle9").innerText = "♠";
                }

                document.getElementById("lower9").innerText = korttiArvo;

                if (korttiSumma2 > 21) {
                    document.getElementById("tulos").innerText = "Voitit pelin!";
                    loppu += 1;
                }
                else if ((korttiSumma2 > korttiSumma && korttiSumma2 < 21) || korttiSumma2 == 21) {
                    document.getElementById("tulos").innerText = "Jakaja voitti pelin!";
                    loppu += 1;
                }
                else if (korttiSumma2 < 21 && loppu == 0) {
                    laskuri++;
                    korttiArvo = korttiPakka[laskuri][1];
                    korttiMaaKoodi = korttiPakka[laskuri][0];
                    korttiSumma2 += korttiArvo;

                    document.getElementById("upper10").innerText = korttiArvo;

                    if (korttiMaaKoodi == "hearts") {
                        document.getElementById("midle-red10").innerText = "♥";
                    }
                    else if (korttiMaaKoodi == "clubs") {
                        document.getElementById("midle10").innerText = "♣";
                    }
                    else if (korttiMaaKoodi == "diamonds") {
                        document.getElementById("midle-red10").innerText = "♦";
                    }
                    else if (korttiMaaKoodi == "spades") {
                        document.getElementById("midle10").innerText = "♠";
                    }

                    document.getElementById("lower10").innerText = korttiArvo;

                    if (korttiSumma2 > 21) {
                        document.getElementById("tulos").innerText = "Voitit pelin";
                    }
                    else if (korttiSumma2 < 21) {
                        document.getElementById("tulos").innerText = "Jakaja voitti pelin!";
                    
                    }
                }
            }
        }
    }


}

* {
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    color: white;
    
}

span { display: block; }
.outline{ width: 110px; text-align: center; padding: 10px; margin: 10px; background: #FFF; color: #cc0033; 
}
.top{ text-align: left; }
.bottom{ text-align: right; }
.shadow{ box-shadow: 1px 1px 3px #000; -moz-box-shadow: 1px 1px 3px #000; -webkit-box-shadow: 1px 1px 3px #000; }
.rounded{ border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; }


.main {
    margin-top: 10rem;
    background-color: #212121;
    color: #98ffa5c9;
}

body {
    background-color: #212121;
    font-family:Verdana, Geneva, Tahoma, sans-serif;
    margin: 0;
    padding: 0;
}


/* Navin säännöt */

.laatikko {
    max-width: 1200px;
    margin: 0 auto;
}



a {
  text-decoration: none;
  color: rgb(225, 225, 225);
}

header nav ul li a:hover {
    background-color: #4B0082;
    padding: 0.2rem;
}
  
.navi {
    background-color: #1d1c1c;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 100;
}

header nav ul {
    list-style-type: none;
}

header nav ul li {
    display: inline-block;
    padding: 0 1rem;
}
  
header nav ul li a,
.logo a {
    text-decoration: none;
    display: block;
}

.logo a {
    font-size: 2rem;
    color: #4B0082;
}

header .laatikko {
    position: relative;
    padding: 1rem;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.kuva-otsikko {
    text-align: inherit;
    font-size: 3rem;
    
    
}

/* kuvan säännöt */

.tausta-kuva {
    position: relative;
    margin-top: 45px;
}

.kuva-otsikko {
    position: absolute;
    top: 200px;
    left: 50px;
}

.kuva-kappale {
    position: absolute;
    top: 300px;
    left: 50px;
    font-size: 1.2rem;
}

.kuva {
    padding-top: 1.5rem;
    filter: opacity(100%);
    filter: brightness(20%);
}

.tiedot {
    padding-top: 5rem;
    text-align: center;
}

.tiedot2 {
    text-align: center;
}

 
  #tulos {
    text-align: center;
    font-family:fantasy;
    color: #98ffa5c9;
    font-size: 60px;
    
}


/* Napit otettu sivustolta: https://getcssscan.com/css-buttons-examples */

.button-71 {
  background-color: #98ffa5c9;
  border: 0;
  border-radius: 56px;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-family: system-ui,-apple-system,system-ui,"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",sans-serif;
  font-size: 18px;
  font-weight: 600;
  outline: 0;
  padding: 16px 21px;
  position: relative;
  text-align: center;
  text-decoration: none;
  transition: all .3s;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.button-71:before {
  background-color: initial;
  border-radius: 125px;
  content: "";
  height: 50%;
  left: 4%;
  opacity: .5;
  position: absolute;
  top: 0;
  transition: all .3s;
  width: 92%;
}

.button-71:hover {
    background-color: #1e8449;;
  box-shadow: rgba(255, 255, 255, .2) 0 3px 15px inset, rgba(0, 0, 0, .1) 0 3px 5px, rgba(0, 0, 0, .1) 0 10px 13px;
  transform: scale(1.05);
}

@media (min-width: 768px) {
  .button-71 {
    padding: 16px 48px;
  }
}


.button-68 {
  appearance: none;
  backface-visibility: hidden;
  background-color: #98ffa5c9;
  border-radius: 8px;
  border-style: none;
  box-shadow: rgba(39, 174, 96, .15) 0 4px 9px;
  box-sizing: border-box;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-family: Inter,-apple-system,system-ui,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: normal;
  line-height: 1.5;
  outline: none;
  overflow: hidden;
  padding: 13px 20px;
  position: relative;
  text-align: center;
  text-decoration: none;
  transform: translate3d(0, 0, 0);
  transition: all .3s;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  vertical-align: top;
  white-space: nowrap;
  margin: 2rem;
}

.button-68:hover {
  background-color: #1e8449;
  opacity: 1;
  transform: translateY(0);
  transition-duration: .35s;
}

.button-68:active {
  transform: translateY(2px);
  transition-duration: .35s;
}

.button-68:hover {
  box-shadow: rgba(39, 174, 96, .2) 0 6px 12px;
}

#kortti1, #kortti2, #kortti3, #kortti4, #kortti5, #kortti6, #kortti7, #kortti8, #kortti9, #kortti10 {
    background-color: white;
    width: 110px;
    height: 210px;
    border: 1px solid #ccc;
    padding: 50px;
    border-radius: 5px;
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.25);
    margin: 20px;
    padding: 2rem 2rem 2rem 2rem;
    user-select: none;
    display: inline-block;
    }

    #upper, #upper2, #upper3, #upper4, #upper5, #upper6, #upper7, #upper8, #upper9, #upper10 {
        top: 10px;
        left: 30px;
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 40px;
        color: black;
        margin-left: -100px;
    }
    #midle, #midle2, #midle3, #midle4, #midle5, #midle6, #midle7, #midle8, #midle9, #midle10 {
        text-align: left;
        margin: 35px;
        font-size: 60px;
        color: black;
    }
    #midle-red, #midle-red2, #midle-red3, #midle-red4, #midle-red5, #midle-red6, #midle-red7, #midle-red8, #midle-red9, #midle-red10 {
        text-align: left;
        margin: 35px;
        font-size: 60px;
        color: red;
    }
    #lower, #lower2, #lower3, #lower4, #lower5, #lower6, #lower7, #lower8, #lower9, #lower10 {
        transform: rotate(180deg);
        margin-left: 130px;
        font-size: 40px;
        color: black;
    }

.peli {
    justify-content: center;
    text-align: center;
}

.jakaja-otsikko {
    margin-left: -56rem;
}

.pelaaja-otsikko {
    margin-left: -56rem;
}

.otsikko1 {
    margin-top: -5.5rem;
}

<!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>Oma nettisivu</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <header>
        <div class="navi">
            <div class="laatikko">
                <div class="logo"><a href="https://public.bc.fi/s2101004/ohjelmointi/">Kasperin JavaScript-ohjelmia</a></div>
                <nav>
                    <ul>
                        <li><a href="https://public.bc.fi/s2101004/ohjelmointi/teht/">Tehtävät</a></li>
                        <li><a href="https://public.bc.fi/s2101004/ohjelmointi/robotto/">Robotto-ohjelma</a></li>
                        <li><a href="https://public.bc.fi/s2101004/ohjelmointi/ventti/">Ventti-ohjelma</a></li>
                        <li><a href="https://public.bc.fi/s2101004/ohjelmointi/luvut/">Luvut-ohjelma</a></li>
                        <li><a href="#footer">Yhteystiedot</a></li>
                    </ul>
                </nav>
            </div>
        </div>

            
      <div class="main">
          <h1 class="otsikko1">TÄSSÄ ON VENTTI OHJELMA</h1>
          <h3 class="otsikko2">Tässä tehtävässä piti: Tee JavaScript-ohjelma, joka toteuttaa ventti korttipelin</h3>
          <br>
        
          <div class="peli">
              <h2 class="jakaja-otsikko">Jakajan kortit</h2>
              <div id="jp" class="jp">Jakajan Pisteet:</div>
              <div id="jakajankortit">
                <div id="kortti6">
                    <p id="upper6"></p>
                    <p id="midle6"></p>
                    <p id="midle-red6"></p>
                    <p id="lower6"></p>
                </div>
                <div id="kortti7">
                    <p id="upper7"></p>
                    <p id="midle7"></p>
                    <p id="midle-red7"></p>
                    <p id="lower7"></p>
                </div>
                <div id="kortti8">
                    <p id="upper8"></p>
                    <p id="midle8"></p>
                    <p id="midle-red8"></p>
                    <p id="lower8"></p>
                </div>
                <div id="kortti9">
                    <p id="upper9"></p>
                    <p id="midle9"></p>
                    <p id="midle-red9"></p>
                    <p id="lower9"></p>
                </div>
                <div id="kortti10">
                    <p id="upper10"></p>
                    <p id="midle10"></p>
                    <p id="midle-red10"></p>
                    <p id="lower10"></p>
                </div>
                      </div>
              
                      <br>
                      <br>
              
                      <h2 class="pelaaja-otsikko">Pelaajan kortit</h2>
                      <div id="pp" class="pp">Pelaajan Pisteet:</div>

              
                      <div id="pelaajankortit">
                <div id="kortti1">
                    <p id="upper"></p>
                    <p id="midle"></p>
                    <p id="midle-red"></p>
                    <p id="lower"></p>
                </div>
                <div id="kortti2">
                    <p id="upper2"></p>
                    <p id="midle2"></p>
                    <p id="midle-red2"></p>
                    <p id="lower2"></p>
                </div>
                <div id="kortti3">
                    <p id="upper3"></p>
                    <p id="midle3"></p>
                    <p id="midle-red3"></p>
                    <p id="lower3"></p>
                </div>
                <div id="kortti4">
                    <p id="upper4"></p>
                    <p id="midle4"></p>
                    <p id="midle-red4"></p>
                    <p id="lower4"></p>
                </div>
                <div id="kortti5">
                    <p id="upper5"></p>
                    <p id="midle5"></p>
                    <p id="midle-red5"></p>
                    <p id="lower5"></p>
                </div>
                      </div>
              
                      <button type="button" class="button-68" role="button" onclick="nostaKortti()">Nosta!</button>
                      <button type="button" class="button-68" role="button" onclick="jää()">Jää!</button>
                      <p id="tulos"></p>
                      <br>
                      <button type="button" class="button-71" role="button" onclick="history.go(0);">Uusi Peli!</button>
                      

          </div>

          

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

Error with .toLowerCase and null property

What I’m trying to do is make a user able to enter multiple options from a prompt, and I can’t make it so that it doesn’t matter if “rcz” is entered with or without capital letters, I always get the same error.
I need my counter to appear in the console, but instead I got this:

Uncaught TypeError: Cannot read properties of null (reading ‘toLowerCase’)
at anonymous :31:42

Code I’m using:

alert(`Choose one or more cars. If you want to stop press ESC`);
let userPrompt = prompt(`Available cars: 208, 308, RCZ`);
let promptToLC = userPrompt.toLowerCase();
let counter = 0;
while(userPrompt != null) {
    switch(promptToLC) {
        default:
            alert(`We don't have that car. Try again.`);
            break;
        case "208":
            counter = counter + 1;
            break;
        case "308":
            counter = counter + 1;
            break;
        case "rcz":
            counter = counter + 1;
            break;
    }
    userPrompt = prompt(`Available cars: 208, 308, RCZ`);
    promptToLC = userPrompt.toLowerCase();
}
console.log(counter);

How to create Undo and Redo value functionality from input tag in Angular?

I want to create a functionality which undo and redo value from input tag in angular. What I supposed to do is as follows if I enter Hello in input:

click undo button: show hell
click undo button: show hel
click redo button: show hell
click redo button: show hello

Please help. Thanks

Routes not exporting from react-router-dom

Routes component is not importing from react-router-dom. I checked my package.json and I have version 6.2.2, I uninstalled and reinstaled the package, running npm start again after the reinstall. I read the documentation and could not find anything regarding my problem.

Any advice?

My code:

import React from "react";
import {Footer, Header, Bio, Works} from "./containers";
import {Navbar} from "./components";
import { Routes, Route } from "react-router-dom";


import './App.css'

function App() {
    return (
        <div className="App">
            <Navbar/>
            <Header/>
            <Bio/>
            <Routes>
                <Route path="/works" element={Works} />
            </Routes>
            <Footer/>
        </div>
  );
}

export default App;

This is my package.json, as you can see I have version 6.2.2 of react-router-dom:

{
  "name": "my_portfolio_website",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@chakra-ui/icons": "^1.1.7",
    "@chakra-ui/react": "^1.8.6",
    "@emotion/react": "^11.8.1",
    "@emotion/styled": "^11.8.1",
    "@testing-library/jest-dom": "^5.16.2",
    "@testing-library/react": "^12.1.3",
    "@testing-library/user-event": "^13.5.0",
    "framer-motion": "^6.2.8",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-icons": "^4.3.1",
    "react-router-dom": "^6.2.2",
    "react-scripts": "^5.0.0",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Custom `@typedef` object or `undefined`

I am trying to properly document a scenario that happens throughout out a program I am working in. I am unsure how to properly express the expected resolution of certain promises. Below is my attempt to mock what is happening.

There are certain api promises, outside the scope of the program that I am trying to document. I mentioned this because documenting the api methods is not an option, but rather the variable that contain the resolved values of those promises is where I’d like focus.

// simplified example
function apiMethod() {
    const fail = 0;
    const response = {
        error: fail ? "error message" : undefined, // undef if no errors
        success: fail ? undefined : [ // undef if errors present
            {key01: "val01", key02: 1, key03: {"subKey01": [1, 2, 3]}},
            {key01: "val03", key02: 2, key03: {"subKey01": [4, 5, 6]}}
        ]
    };
    return new Promise(resolve => setTimeout(() => resolve(response), 250));
}

(async () => {
    /**
     * @typedef {object} thing
     * @property {string} key01
     * @property {number} key02
     * @property {{subKey02: string[]}} key03
     */
    /**
     * @type {Promise<{success: thing[]|undefined, error: string|undefined}>}
     */
    const myVar = await apiMethod();
    console.log(myVar.key01);
})();

This seems to work mostly well, but where I am getting stuck on is expressing that the success property could be undefined under certain circumstances. Right now this is how the vscode tooltip looks when hovering the myVar;

const myVar: Promise<{
    success: thing[];
    error: string | undefined;
}>

This is how the vscode tooltip looks when hovering thing in the @type expression:

type thing = {
    key01: string;
    key02: number;
    key03: {
        subKey02: string[];
    };
}

Questions:

Is is possible to express that success will be an array of thing objects or undefined? When using typedef it doesn’t seem like I can do this.
Right now it only seems possible to see the exploded view of the thing object when hovering thing in the @type expression. When I hover myVar it simply shows that success will be an array of things. Is it possible show this “exploded” view of thing when hovering myVar, whilst still using @typedef?

Firebase Functions predeploy parsing error run lint

When i try to deploy my Firebase Functions it gets an parse error.
I am using cmd on Windows and i am coding in JavaScript.
A couple of days ago i deployed my Functions on Mac and it worked, today i wanted to do the same thing on windows. After i tried it on Windows and it didn’t worked, i tried it on mac again and it did not worked eather, even if it worked before.

I tried to change the firebase.json from “predeploy”:[
“npm –prefix “$RESOURCE_DIR” run lint”
]
to:
“predeploy”: [
“npm –prefix “%RESOURCE_DIR%” run lint”
]

but this was alos not working.

Can anybody help me out here?
Thanks in advance 🙂

Bootstrap 5 collapse with Checkbox, stopPropagation() not working

I thought I had found the answer to my question here, but it’s not working for me: prevent bootstrap collapse from collapsing

My content is dynamically created, so I used the $(document).on syntax, so I’m not sure if that’s the issue? Or something else with how the event propagates?

I also tried taking the input outside of the button, but it breaks the layout. Should I do that and just try to fix the layout issue? I’d rather have it looking good and figure out how to stop the propagation…

Here is my js code:

//handle the file accordion checkbox click event
$(document).on('click', '.program_checkbox', function(e) {
    e.stopPropagation(); 
});

And the rendered HTML

<div id="fileDownloadDiv">
    <div class="accordion" id="accordionExample">
        <div class="accordion-item">
            <h2 class="accordion-header" id="heading6"><button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse6" aria-expanded="true" aria-controls="collapse6"><input type="checkbox" class="form-check-input program_checkbox" value="Maine Ecological Reserves Program" checked="">Maine Ecological Reserves Program</button></h2>
        </div>
        <div id="collapse6" class="accordion-collapse ml-4 collapse show" aria-labelledby="heading6" data-bs-parent="#accordionExample">
            <div class="form-group form-check pl-4"><input type="checkbox" class="form-check-input package_checkbox" id="package243" value="program_data/6/packages/1646756076.zip" checked=""><label class="form-check-label" for="package243">1646756076.zip</label></div>
            <div class="form-group form-check pl-4"><input type="checkbox" class="form-check-input script_checkbox" id="scriptundefined" value="program_data/6/scripts/MEER_munger.py" checked=""><label class="form-check-label" for="scriptundefined">MEER_munger.py</label></div>
        </div>
        <div class="accordion-item">
            <h2 class="accordion-header" id="heading9"><button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse9" aria-expanded="true" aria-controls="collapse9"><input type="checkbox" class="form-check-input program_checkbox" value="Vermont State Lands Continuous Forest Inventory">Vermont State Lands Continuous Forest Inventory</button></h2>
        </div>
        <div id="collapse9" class="accordion-collapse collapse show ml-4" aria-labelledby="heading9" data-bs-parent="#accordionExample">No files for this project</div>
    </div>
</div>

JS: select class inside of

I have an <iframe> on my page.

Inside of the page, that is loaded in the iframe, is this: <span class="test">TEST</span>

I would like to change the color of TEST to red.

This is what I wrote:

var test = document.querySelector("iframe").contentWindow.document.querySelector(".test");

test.style.color = "red";

Seems logical, but it doesn’t work. – What’s going on?

How to control number display format using Javascript?

I have a Javascript function that displays a time counter as the following : 0:0 and 0:1. But I actually want it to be displayed like this : 00:00 and 00:01.

Here is the code :

var interval = null;
var time = 0
function increaseTimer() {
    // increase and print timer
    time++
    console.log(new Date() + ' ' + 'timer: ' + parseInt(time / 60, 10) + ':' + parseInt(time % 60, 10))
    // condition of a process
    if (time % 5 == 0) {
        // some process
    }
    // stop simulation after 30s
    if (time == 30) {
        clearInterval(interval)
    }
}

I call this function with interval variable : interval = setInterval(increaseTimer, 1000)

What should I change in my code to make it work ?
Thanks in advance.

Is it bad practice to store your backend server origin in a global window variable on client-side?

Is it bad practice to store my backend server’s configuration in a global window variable on client-side?
I.e. is it bad if this is exposed? And if so, why?

window.backendConfig = {
backendApiOrigin:'https://bad-idea-context-root.com/api',
environment:'test'}

In order to later be able to perform fetch calls to that environment dependent origin.