It gives me the error

{
“message”: “nInvalid prisma.user.create() invocation innC:UsersAelotlive-fullstackbackendindex.js:54:36nn 51 // create usern 52 app.post(‘/users’, async (req, res) => {n 53 try{n→ 54 const user = await prisma.user.create({n data: {n email: undefined,n + name: Stringn }n })nnArgument name is missing.”
}

enter image description here

In the given code snippet

enter image description here

I need help pls

I have cloned a repository to my local computer and trying to get this to run on my local host. I am getting a runtime error of Error in function createError in commons.js:
commons.js and it says that no codeFrame could be generated. How can I resolve this?

I’m using Knex and I want to measure the time it takes for a query to run in the database so that I can raise a warning for slow queries.

I was going to use the listeners Knex provides but when it came to identifying the queries I see there are 4 different UIDs: __knexUid, __knexTxUid and __knexQueryUid.

I cannot find what each one is supposed to identify.

Here is the code:

let test = [];
test.someProp = "haha";
console.log(test); // result:  [ someProp: 'haha' ]
console.log(JSON.stringify(test)); // result: []
console.log(test.someProp); // result: haha
console.log(JSON.stringify(test)); // result: []

How console.log(test) returns an object and the line after it console.log(JSON.stringify(test)) returns an empty array ?

I have a date variable which is a clone of another date

let date = new Date(); //This date is in GMT+0100 Central European Standard Time

let cloneDate = new Date(date.getTime()); //This creates a prefect clone of the date

However, when I try to change the year of cloneDate using the setFullYear() method or the setMonth() or setDate(), etc., it changes the GMT timezone

  cloneDate.setFullYear(1883, 8, 11) //The result is a date in GMT+0009 Central European Summer Time instead of GMT+0100 Central European Standard Time

This creates erros in my function.

Does anyone know how to solve this in order to get a cloneDate with the new year, month, day, but also in the same GMT timezone?

Thanks

I am using jsmediatags latest version but I cannot get year information to show up. I do have year info visible when I check my songs in Mp3 tag editor.

If I look into jsmediatags source code I can see TYE is used for this?

I dont get TYE but only the followng:

I’ve react 18.2 and I am using functional component. I am trying to prevent the default behavior of the event when a user is trying to navigate to an external link or inside the React app. My code works fine when I refresh the page, but when I navigate to another route inside the app from the header, it’s not showing modal.

changes you made may not be saved.

import { useLocation, useParams, useNavigate } from 'react-router-dom';
const dispatch = useDispatch();
const location = useLocation();
const navigate = useNavigate();

const { id } = useParams();


useEffect(() => {
  const handleBeforeUnload = (event) => {
    if (!id) {
      event.preventDefault();
      event.returnValue = '';
      return '';
    }
  };

  window.addEventListener('beforeunload', handleBeforeUnload);

  return () => {
    window.removeEventListener('beforeunload', handleBeforeUnload);
  };
}, []);

Write a code get an integer number as input and print the sum of the digits.

Input Description:
A single line containing an integer.

Output Description:
Print the sum of the digits of the integer.

Sample Input :
124
Sample Output :
7

var a = "124";

var b = a.split('')

var result = b.reduce(function (acc, dcc) {
    return acc + dcc
})
console.log(result)

The script below needs to connect to an already open instance of Google Chrome because I am already logged in there with my username and password. If it opens a new one, it will need to log in again, and the environment requires two-factor authentication. Therefore, the ideal solution is to use the one that is already open. So far so good.

The only thing I need now is to ensure that it does not maximize every time the script runs, since it is a script that will run in a loop until I stop it manually or if it encounters an error.

const puppeteer = require('puppeteer');
const requests = '<my_url>'

let browser; 

async function startbrowser() { 
    if (!browser) {
        browser = await puppeteer.connect({
            browserWSEndpoint: 'ws://127.0.0.1:9222/devtools/browser/<my_address>', 
        });
    }
    return browser;
}

async function monitor() {
    try {
        await startbrowser();
        const page = await browser.newPage();
        await page.goto(requests, { waitUntil: 'networkidle0' });

        const frame = await page.frames().find(f => f.name() === '<frame_name>');
        if (!frame) {
            console.log('Frame not found');
            return;
        }
    
        const noRecords = await frame.evaluate(() => document.body.innerText.includes("No records"));
        if (noRecords) {
            console.log("No records to display found, script will run again after 3 minutes");
            await page.close(); 
            setTimeout(() => monitor().catch(console.error), 180000); //3min

        } else {
            console.log("Records found, proceeding with actions.");
            const coordinates = await frame.evaluate(() => {
                const el = document.body;
                const {x, y} = el.getBoundingClientRect();
                return {x, y};
            });

            await page.mouse.click(coordinates.x + 80, coordinates.y + 240, { button: 'right' });
            await page.mouse.move(coordinates.x + 120, coordinates.y + 300);
            await page.mouse.click(coordinates.x + 120, coordinates.y + 300, { button: 'left' });
            await page.close();
        }

    } catch (error) {
        console.error("An error occurred:", error);
    } finally {
        setTimeout(() => monitor().catch(console.error), 10000); //10s
        console.log("waiting 3 minutes to run again");
    }
}
monitor().catch(console.error);

I tried running the code above, but every time it runs, the Chrome windows are maximized.

i have this code if i type text to the textbox and click speek their speech someone talking but if their comma or dot the speech always stop for mill seconds, i want to call silentGIF if no speek and if the speech talking to display lipGIF idea is the gif and speek to be like someone talking, but LipGIF is always displaying and silent Gif not displaying please help

<div class="container">
    <textarea id="textToSpeak" rows="4" placeholder="Enter text to speak..."></textarea>
    <button id="speakButton">Speak</button>
</div>
<img id="lipGif" src="image/dux1.gif" alt="Lips animation">
<img id="lipSilent" src="image/duxsilent.gif" alt="silent animation">

<script>
        document.addEventListener('DOMContentLoaded', function() {
            const textToSpeakInput = document.getElementById('textToSpeak');
            const speakButton = document.getElementById('speakButton');
            const lipGif = document.getElementById('lipGif');
            const lipSilent = document.getElementById('lipSilent');

            speakButton.addEventListener('click', function() {
                const text = textToSpeakInput.value.trim();
                if (text !== '') {
                    speakText(text);
                    showLipAnimation();
                } else {
                    alert('Please enter some text to speak.');
                }
            });

            function speakText(text) {
                // Insert a pause after each '.' or ','
                text = text.replace(/([.,])/g, '$1<break time="200ms"/>');

                const utterance = new SpeechSynthesisUtterance(text);
                utterance.onstart = function() {
                    showLipAnimation();
                };
                utterance.onend = function() {
                    hideLipAnimation();
                };
                speechSynthesis.speak(utterance);

                // Set up an interval that checks the 'speaking' property every 100 milliseconds
                const checkSpeaking = setInterval(function() {
                    if (speechSynthesis.speaking) {
                        showLipAnimation();
                    } else {
                        showSilentAnimation();
                    }
                }, 100);

                // Clear the interval when the speech ends
                utterance.onend = function() {
                    clearInterval(checkSpeaking);
                    hideLipAnimation();
                };
            }

            function showLipAnimation() {
                lipGif.style.display = 'inline';
                lipSilent.style.display = 'none';
            }

            function hideLipAnimation() {
                lipGif.style.display = 'none';
                lipSilent.style.display = 'none';
            }

            function showSilentAnimation() {
                lipGif.style.display = 'none';
                lipSilent.style.display = 'inline';
            }
        });
    </script>

I want the nav bar and header to just be at the top of the page but instead it stays on the screen as scrolling. Anytime i try to fix it it just sends the title to the side or messes with the design on the nav bar. And im struggling with getting everything to center and scale down if the window is minimized. I want to have all contents center and the nav to just hide as you scroll.

Html=

`<body>  
<nav> 
    <h1>Freakish Bizzaar Studio</h1>
    <a class="glowing-btn" href="Index.html"><span class="glowing-txt">H<span class="faulty-letter">O</span>ME</span></a> 
    <a class="glowing-btn" href="Shop.html"><span class="glowing-txt">S<span class="faulty-letter">H</span>OP</span></a> 
    <a class="glowing-btn" href="Album.html"><span class="glowing-txt">ALB<span class="faulty-letter">U</span>M</span></a> 
    <a class="glowing-btn" href="History.html"><span class="glowing-txt">HI<span class="faulty-letter">STO</span>RY</span></a> 
    <a class="glowing-btn" href="Contact.html"><span class="glowing-txt">CON<span class="faulty-letter">TA</span>CT</span></a> 
</nav>
<br>
    <br>
<img src="sitestyles/Divider.png" alt="" width="2800" height="321"/>
</body>
</html>`

Css=

html {
    background-image: url('background.png');
    background-size: cover;
    text-align: center;
}
/*title formatting*/
h1 {
  font-size: 130px;
  line-height: calc(10px + 15vh);
/*   text-shadow: 0 0 5px #f562ff, 0 0 15px #f562ff, 0 0 25px #f562ff,
    0 0 20px #f562ff, 0 0 30px #890092, 0 0 80px #890092, 0 0 80px #890092;
  color: #fccaff; */
  text-shadow: 0 0 5px #ff0000, 0 0 15px #ff0000, 0 0 20px #ff0000, 0 0 40px #ff0000, 0 0 60px #ff0000, 0 0 10px #800000, 0 0 98px #ff0000;
    color: #280000;
  font-family: 'Guttural';
  text-align: center; 
  justify-content: center;
  align-items: center;
  display: flex;
  animation: blink 9s infinite;
  -webkit-animation: blink 9s infinite;
}
body {
    font-family: 'Glitch Goblin';
    min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
/* effect for title*/
@-webkit-keyframes blink {
  20%,
  24%,
  55% {
    color: #8000;
    text-shadow: none;
  }
  0%,
  19%,
  21%,
  23%,
  25%,
  54%,
  56%,
  100% {
/*     color: #fccaff;
    text-shadow: 0 0 5px #f562ff, 0 0 15px #f562ff, 0 0 25px #f562ff,
      0 0 20px #f562ff, 0 0 30px #890092, 0 0 80px #890092, 0 0 80px #890092; */
  text-shadow: 0 0 5px #ff0000, 0 0 15px #ff0000, 0 0 20px #ff0000, 0 0 40px #ff0000, 0 0 60px #ff0000, 0 0 10px #800000, 0 0 98px #ff0000;
    color: #0C0303;
  }
}
@keyframes blink {
  20%,
  24%,
  55% {
    color: #120101;
    text-shadow: none;
  }
  0%,
  19%,
  21%,
  23%,
  25%,
  54%,
  56%,
  100% {
/*     color: #fccaff;
    text-shadow: 0 0 5px #f562ff, 0 0 15px #f562ff, 0 0 25px #f562ff,
      0 0 20px #f562ff, 0 0 30px #890092, 0 0 80px #890092, 0 0 80px #890092; */
  text-shadow: 0 0 5px #ff0000, 0 0 15px #ff0000, 0 0 20px #ff0000, 0 0 40px #ff0000, 0 0 60px #ff0000, 0 0 10px #800000, 0 0 98px #ff0000;
    color: #280000;
  }
}
nav{
  position: fixed;
  top: 0;
  width: 100%;
}
img {
    display: flex;
}
a {
  font-size: 1.5rem;
  padding: 1rem 3rem;
  color: #ff0000;
  text-transform: uppercase;
}
/* NAV BUTTON*/
:root {
    --glow-color: hsl(0 100% 47%);
}
*,*::before,*::after {
  box-sizing: border-box;
}

.glowing-btn {
  position: relative;
  color: var(--glow-color);
  cursor: pointer;
  padding: 0.5em 1em;
  border: 0.15em solid var(--glow-color);
  border-radius: 0.45em;
  background: none;
  perspective: 2em;
  font-size: 2em;
  font-weight: 900;
  letter-spacing: 0.8em;

  -webkit-box-shadow: inset 0px 0px 0.5em 0px var(--glow-color),
    0px 0px 0.5em 0px var(--glow-color);
  -moz-box-shadow: inset 0px 0px 0.5em 0px var(--glow-color),
    0px 0px 0.5em 0px var(--glow-color);
  box-shadow: inset 0px 0px 0.5em 0px var(--glow-color),
    0px 0px 0.5em 0px var(--glow-color);
  animation: border-flicker 2s linear infinite;
}

.glowing-txt {
  float: left;
  margin-right: -0.8em;
  -webkit-text-shadow: 0 0 0.125em hsl(0 0% 100% / 0.3),
    0 0 0.45em var(--glow-color);
  -moz-text-shadow: 0 0 0.125em hsl(0 0% 100% / 0.3),
    0 0 0.45em var(--glow-color);
  text-shadow: 0 0 0.125em hsl(0 0% 100% / 0.3), 0 0 0.45em var(--glow-color);
  animation: text-flicker 3s linear infinite;
}

.faulty-letter {
  opacity: 0.5;
  animation: faulty-flicker 2s linear infinite;
}

.glowing-btn::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: 0.7;
  filter: blur(1em);
  transform: translateY(120%) rotateX(95deg) scale(1, 0.35);
  background: var(--glow-color);
  pointer-events: none;
}

.glowing-btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  z-index: -1;
  background-color: var(--glow-color);
  box-shadow: 0 0 2em 0.2em var(--glow-color);
  transition: opacity 100ms linear;
}

.glowing-btn:hover {
  color: rgba(0, 0, 0, 0.8);
  text-shadow: none;
  animation: none;
}

.glowing-btn:hover .glowing-txt {
  animation: none;
}

.glowing-btn:hover .faulty-letter {
  animation: none;
  text-shadow: none;
  opacity: 1;
}

.glowing-btn:hover:before {
  filter: blur(1.5em);
  opacity: 1;
}

.glowing-btn:hover:after {
  opacity: 1;
}

@keyframes faulty-flicker {
  0% {
    opacity: 0.1;
  }
  2% {
    opacity: 0.1;
  }
  4% {
    opacity: 0.5;
  }
  19% {
    opacity: 0.5;
  }
  21% {
    opacity: 0.1;
  }
  23% {
    opacity: 1;
  }
  80% {
    opacity: 0.5;
  }
  83% {
    opacity: 0.4;
  }

  87% {
    opacity: 1;
  }
}

@keyframes text-flicker {
  0% {
    opacity: 0.1;
  }

  2% {
    opacity: 1;
  }

  8% {
    opacity: 0.1;
  }

  9% {
    opacity: 1;
  }

  12% {
    opacity: 0.1;
  }
  20% {
    opacity: 1;
  }
  25% {
    opacity: 0.3;
  }
  30% {
    opacity: 1;
  }

  70% {
    opacity: 0.7;
  }
  72% {
    opacity: 0.2;
  }

  77% {
    opacity: 0.9;
  }
  100% {
    opacity: 0.9;
  }
}

@keyframes border-flicker {
  0% {
    opacity: 0.1;
  }
  2% {
    opacity: 1;
  }
  4% {
    opacity: 0.1;
  }

  8% {
    opacity: 1;
  }
  70% {
    opacity: 0.7;
  }
  100% {
    opacity: 1;
  }
}

@media only screen and (max-width: 600px) {
  .glowing-btn{
    font-size: 1em;
  }
}`

Scss=

`nav{
  width: 100%;
  position: fixed;
  top:50px;
  text-align:center;
}
nav a{
  font-weight:800;
  text-transform:uppercase;
  text-decoration:none;
  color:#16151b;
  margin:0 15px;
  font-size:16px;
  letter-spacing:1px;
  position:relative;
  display:inline-block;
}
nav a:before{
  content:'';
  position: absolute;
  width: 100%;
  height: 3px;
  background:#16151b;
  top:47%;
  animation:out 0.2s cubic-bezier(1, 0, 0.58, 0.97) 1 both;
}
nav a:hover:before{
  animation:in 0.2s cubic-bezier(1, 0, 0.58, 0.97) 1 both;

}
@keyframes in{
  0%{
    width: 0;
    left:0;
    right:auto;
  }
  100%{
    left:0;
    right:auto;
    width: 100%;
  }
}
@keyframes out{
  0%{
    width:100%;
    left: auto;
    right: 0;
  }
  100%{
    width: 0;
    left: auto;
    right: 0;
  }
}

@for $i from 1 through 5 {
  nav a:nth-child(#{$i}){
    animation:show .2s #{$i*0.1+1}s ease 1 both;
  }
}`

I’m trying to migrate my custom map markers to the new advanced marker library, seems the animation options is no more available, it give me this error:

Unknown property ‘animation’ of AdvancedMarkerElement

I checked the documentation and the animation options is still there but nothing is mentioned about how to migrate the animation option.

google marker documentation

I’m currently trying to setup my static web app to get/post data to my Azure Table using Vanilla Javascript. I’m trying to test the REST API using POSTMAN with a simple GET request. However I’m an error:

Server failed to authenticate the request. Make sure the value of Authorization header is formed correctly including the signature.

Here is my code:

    var date = new Date();
    var utcDate = date.toUTCString();
    CanonicalizedResource = "" + "/" + "accountname/" + 'Tables';
    ContentMD5 = "";
    ContentType = ""; //Should this be empty? I've tried application/json as well as text/plain
    StringToSign = "GET" + "n" +
                    ContentMD5 + "n" +
                    ContentType + "n" + 
                    utcDate + "n" +  
            CanonicalizedResource;  


    var hmac = computeHMACSHA256(StringToSign, 'key from Azure Table');
    console.log(StringToSign);
    console.log(utcDate);
    console.log(hmac);

function computeHMACSHA256(stringToSign, accountKey) {
    const key = Buffer.from(accountKey, "base64");
    return crypto.createHmac("sha256", key).update(stringToSign, "utf8").digest("base64");
} //this function is taken from the Javascript client service, so that I could test.

In Postman, I have 4 headers in my GET request.

Authorization: SharedKey accountname:signature

Date: Date in GMT

x-ms-version: 2019-02-02

DataServiceVersion: 3.0;NetFx

I have read through the Azure documentation to create the signature, but still no luck. I’ve used the Azure Javascript client service to test the connection, and it works. For administrative purposes, I’d prefer to communicate with Tables using REST HTTP requests.

Unfortunately I was unable to find anything through searching with this specific setup. I’ve verified it works using SharedKeyLite (through the client service). I’m thinking something is wrong with my StringToSign, but still unsure.

Hoping someone can see what’s wrong here.

I’m implementing an online shop right now where you can order food in advance and I want to implement a coupon which only appliable when they are ordering for a specific day. But the day of ordering doesnt matter.

So while checking out and choosing that specific delivery date the coupon can be applied otherwise it doesnt work.

Do you guys have any ideas how I can solve that.

Kind regards

I’m working on this mini game. It is a two player turn based game, each player has the option to either cooperate or defect:

if both cooperate : + 3 points

if both defect : +1 point

if player one defect and player 2 cooperate:

+5 points to player 1 who defected

if player two defect and player 1 cooperate:

+5 points to player 2 who defected

let current_player = 2;
let player_1_choice;
let player_2_choice;
let score1 = 0;
let score2 = 69;
let rounds = 3;
const gameRounds = document.querySelector("#rounds")
const is_player1_it_turn = document.querySelector("#player1turn");
const is_player2_it_turn = document.querySelector("#player2turn");
const input_choice1 = document.querySelector("#choice1");
const input_choice2 = document.querySelector("#choice2");
const PlayerUnoScore = document.querySelector("#playeroneSCORE")
const PlayerDuoScore = document.querySelector("#playertwoSCORE")
PlayerUnoScore.textContent = "Score:" + score1
PlayerDuoScore.textContent = "Score:" + score2
gameRounds.textContent = "Rounds:" + rounds;
const input_turn = "It's your turn...";

// Add a general keydown event listener outside the check_turn function
document.addEventListener('keydown', function(event) {
  check_turn(event.key);
});

function switchPlayer() {
  if (current_player === 1) {
    current_player = 2;
    is_player1_it_turn.textContent = "";
    is_player2_it_turn.textContent = input_turn;
  } else if (current_player === 2) {
    current_player = 1;
    is_player2_it_turn.textContent = "";
    is_player1_it_turn.textContent = input_turn;
  }
}

function isValidChoice(player, key) {
  // Define valid choices for each player
  const validChoices = {
    1: ['c', 'd'],
    2: ['f', 'k']
  };

  return validChoices[player].includes(key);
}

function check_turn(key) {
  if (current_player === 1) {
    is_player1_it_turn.textContent = input_turn;
    if (isValidChoice(1, key)) {
      player_1_choice = key;
      input_choice1.textContent = "You choose to " + (key === 'c' ? 'cooperate' : 'defect');
      switchPlayer();
    } else {
      console.log("Invalid choice for Player 1");
    }
  } else if (current_player === 2) {
    is_player2_it_turn.textContent = input_turn;
    if (isValidChoice(2, key)) {
      player_2_choice = key;
      input_choice2.textContent = "You choose to " + (key === 'f' ? 'cooperate' : 'defect');
      switchPlayer();
    } else {
      console.log("Invalid choice for Player 2");
    }
  }
}

function roundPoints() {
  check_turn()
}

// Game loop
function startGame() {
  let running = true;
  check_turn();
}

// Restart button event listener
const restartbtn = document.querySelector("#restart").addEventListener("click", restartGame);

// Restart game function
function restartGame() {
  // Reset game state or perform any other necessary actions
  current_player = 1;
  is_player1_it_turn.textContent = "";
  is_player2_it_turn.textContent = "";
  input_choice1.textContent = "";
  input_choice2.textContent = "";
  score1 = 0;
  score2 = 0;
  PlayerUnoScore.textContent = "Score:" + score1
  PlayerDuoScore.textContent = "Score:" + score2
  rounds = 1;
  gameRounds.textContent = "Rounds:" + rounds;
  startGame(); // You might want to restart the game loop here
}

startGame();

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Josefin Sans", sans-serif;
  ;
}

body {
  height: 100vh;
  overflow-x: hidden;
}

#display {
  display: flex;
  width: 100%;
  height: 100%;
}

#left {
  background-color: greenyellow;
  width: 25%;
  height: 100%;
  padding-top: 20px;
}

#middle {
  width: 50%;
  height: 100%;
}

#right {
  background-color: rgb(237, 36, 36);
  width: 25%;
  height: 100%;
  padding-top: 20px;
}

#row1 {
  margin-left: 23vw;
  margin-top: 15vh;
}

#row2 {
  margin-left: 20vw;
  margin-top: 2vh;
}

#row3 {
  margin-left: 24vw;
  margin-top: 2vh;
}

.player1 {
  background-color: greenyellow;
  font-size: 4em;
}

.player2 {
  background-color: rgb(237, 36, 36);
  font-size: 4em;
}

h1 {
  text-align: center;
}

span {
  width: 40vw;
  border: 1px solid black;
  border-radius: 20px;
}

#rounds {
  margin-left: 2vw;
  font-size: 3em;
}

#playertwoSCORE {
  position: absolute;
  top: 90%;
  left: 76%;
  color: rgb(0, 0, 0);
  font-size: 2em;
}

#playeroneSCORE {
  position: absolute;
  top: 90%;
  left: 1%;
  color: rgb(0, 0, 0);
  font-size: 2em;
}

button {
  position: relative;
  top: 50%;
  left: 6%;
  width: 11vw;
  height: 6vh;
  border-radius: 30px;
  border: none;
}

#player1turn {
  font-size: 1.5em;
  font-weight: bold;
}

#player2turn {
  font-size: 1.5em;
  font-weight: bold;
  padding-left: 34px;
}

#cinput0 {
  background-color: rgb(9, 163, 225);
}

#dinput0 {
  background-color: darkorchid;
}

#cinput1 {
  background-color: rgb(9, 163, 225);
}

#dinput1 {
  background-color: darkorchid;
}

button:hover {
  border: 2px solid;
}

label {
  margin-left: 50px;
}

.mt {
  margin-top: 8px;
}

#rsrt {
  margin-top: 50px;
  margin-left: 200px;
}

#choice2 {
  position: relative;
  top: 50%;
  left: 10%;
}

#choice1 {
  text-align: start;
  position: relative;
  top: 52%;
  left: 22%;
}

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&display=swap" rel="stylesheet">
<div id="display">
  <div id="left">
    <h1>player ONE</h1>
    <label id="playeroneSCORE">Score:0</label>
    <button id="cinput0">C</button>
    <button id="dinput0">D</button>
    <label id="player1turn"></label>
    <p id="choice1"></p>
  </div>
  <div id="middle">
    <label id="rounds">rounds:0</label>

    <div id="row1">
      <span class="player1">3</span>
      <span class="player2">3</span>
    </div>
    <div id="row2">
      <span class="player1">5</span>
      <span class="player2">0</span>
      <span class="player1">0</span>
      <span class="player2">5</span>
    </div>
    <div id="row3">
      <span class="player1">1</span>
      <span class="player2">1</span>
    </div>


    <div id="support">
      <button style="background-color: rgb(9, 163, 225);">press</button>
      <label>For cooperate</label>
      <br>
      <button class="mt" style="background-color: darkorchid;">press</button>
      <label>For defect</label>
    </div>
    <div id="rsrt">
      <button id="restart">Restart Game</button>
    </div>
  </div>
  <div id="right">
    <h1>player Two</h1>
    <label id="playertwoSCORE">Score:</label>
    <button id="cinput1">F</button>
    <button id="dinput1">k</button>
    <label id="player2turn"></label><br>
    <label id="choice2"></label>
  </div>
</div>