Category: javascript

I am building multiplayer match making game server. where client join the queue. when there have enough player in the queue(this have multiqueued services). then server create a match room for them, It can happen some types:

1. create socket connect between all of client of and server (not good for large number of client)
2. client join the queue and after time to time ask the server to start match(dummy server)
3. server run an instance and try to make a match . when can make a match notify the client with match id and something.(i want to built this way)

1,2 no way not good (i think). 3th way, server only ask connect with client just telling his message id. it should not be a socket. how can i do it??
(i am using express server)

Anybody tell me how can i built this in which tools.

I am creating a web application using react i have noticed a weird behaviour that the child page is scrolled to the same position at the parent page scrolled. For navigate i have used react router dom.

I have used useEffect in every page to scroll to the top. But why it is happening? Is there any way to avoid just by CSS and react props.

I am trying to forward a text message to an email address. This should be simple, but the code on Twilio’s docs produces a syntax error. I modified the code and I am working through it, but I am able to get this to run correctly. The “axios” message displays, but not the “buffer”. It seems like the .then statement/section does not respond. Any thoughts or tips would be greatly appreciated.

Link to Twilios code: https://help.twilio.com/articles/10499908492571-Using-Functions-to-Forward-MMS-media-with-Email-using-Sendgrid

/*
 * Send a Hello World Message
 * Description: When your Twilio Phone Number associated with this function
 * receives a message, it will respond with "Hello World".
 *
 * Contents:
 * 1. Main Handler
 */

// Defining the handler function
const axios = require('axios');  // legacy way
//import axios from 'axios';
console.log("* * * S T A R T * * *");

exports.handler = function (context, event, callback) {
  const axios = require("axios");  // legacy way

  let imagePath = event.MediaUrl0;
  let imageContentType = event.MediaContentType0;
  let messageBody = event.Body ? event.Body :"A new message from Twilio ";
  console.log("path")
  console.log(imagePath)
  console.log("type")
  console.log(imageContentType)
  console.log("Body")
  console.log(messageBody)
  if(!imagePath || !imagePath.includes('Media')){
    let twiml1 = new Twilio.twiml.MessagingResponse();
    twiml1.message('No Picture Attached');   
    console.log('No Picture Attached');   
    return callback(null, twiml1);
    }//end if
  else{
    console.log("axios");
    axios.get(imagePath, { responseType: 'arraybuffer' }) //end axios
    .then(function(response) {
      let imageBuffer = buffer.from(result.data, 'binary');
      let imageBase64  = imageBuffer.toString('base64');
      //const buffer = result.data;
      console.log("buffer");
      console.log("response");
      
      //now create the email message
      //const msg = {
      //  personalizations: [{ to: [{ email: context.TO_EMAIL_ADDRESS }] }],
      //  from: { email: context.FROM_EMAIL_ADDRESS },
      //  subject: `New SMS message from: ${event.From}`,
        //content: [
        //  {
        //    type: 'text/plain',
        //    value: messageBody
        //  }
        // ],
        // attachments: [
        //  {
        //    content: imageBase64,
        //    filename: imageContentType.replace("image/", 'owl.'),
        //    type: imageContentType,
        //    disposition: "attachment",
        //    content_id: "my_image"
        //  }
        //]
      //};
    }) // .then
    //.catch(err = {
    //  console.log("axios.get Error")
    //})//.catch
  } //end else
  
  
  // Creating a new instance of Twilio's MessagingResponse object
  const twiml = new Twilio.twiml.MessagingResponse();
  console.log("Test")

  // Adding a message to the response object. This message will be sent back to the user.
  twiml.message('Hello World');

  // Using the callback function to return the response object (twiml) back to the user
  callback(null, twiml);
  console.log("End");
}; // end handler

I’ve trying to get over the learning curve with three.js. Never really worked with 3d objects in programing so everything is kind of new. I have written this code that creates cylinder geometry with random heights stacked on the Y axis.

The code is basic, barebones but I have No Clue why they aren’t lining up correctly!

Any help would be must appreciated.

https://codepen.io/Sum-Dood/pen/ZEgaJdp

  let scene, camera, renderer;
    let stack = [];
    const colors = ['red', 'green', 'blue', 'yellow', 'orange'];

    // Setup
    init();
    animate();

    function init() {
        // Scene
        scene = new THREE.Scene();

        // Camera
        const width = window.innerWidth;
        const height = window.innerHeight;
        camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);
        camera.position.z = 50;

        // Renderer
        renderer = new THREE.WebGLRenderer();
        renderer.setSize(width, height);
        document.body.appendChild(renderer.domElement);

        // Lights
        const light = new THREE.DirectionalLight(0xffffff, 2);
        light.position.set(1, 1, 2);
        scene.add(light);

        createStack();

        // Stats
        //const stats = new Stats();
       // document.body.appendChild(stats.dom);

        window.addEventListener('resize', onWindowResize, false);
    }

    function createStack() {
        var preHeight = 0;
        for (let i = 0; i < 10; i++) {
            // Create cylinder geometry and material
            const radius = 1;
            const segments = 32;

            // Heights are randomly assigned from 2 to 8 with increments of 2
            const height = Math.floor(Math.random() * 4) * 2 + 2;
            preHeight = height + preHeight;
            const geometry = new THREE.CylinderGeometry(radius, radius, height, segments);
            const material = new THREE.MeshPhongMaterial({
                color: getRandomColor(),
                shininess: 50,
                transparent: true
            });

            // Create mesh and position it on the Y axis
            const beadMesh = new THREE.Mesh(geometry, material);
            beadMesh.position.y = preHeight;

            scene.add(beadMesh);
            stack.push(beadMesh);
        }
    }

    function getRandomColor() {
        return colors[Math.floor(Math.random() * colors.length)];
    }

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

    function animate() {
        requestAnimationFrame(animate);

        // Rotate all beads slightly
        stack.forEach(bead => {
            bead.rotation.x += 0.005;
            bead.rotation.y += 0.01;
        });

        //stats.update();
        renderer.render(scene, camera);
    }

I’m writing middleware in NodeJS with Express API. I want to grab the response body and compare it with the results of another microservice. This is part of a process of replacing the current API.

I’m getting the response body as a buffer, and even using toString method it’s still failing because it’s not converting the data to a valid JSON.

I also tried using other events, like write, finish, end, but they all fall in the same Buffer problem. Any ideas about what can I possibly be doing wrong, or other ways I could achieve the same result?

const microserviceCompareMiddleware = async (req, res, next) => {
  // Clone the request to send it to the new microservice
  const requestData = {
    method: req.method,
    url: req.originalUrl,
    headers: req.headers,
    data: req.body,
  };

  // Capture the response of the current microservice
  const originalSend = res.send;
  res.send = function (body) {
    // Store the response from the current microservice
    let currentResponse = body;

    // If response is a Buffer, convert it to string
    if (Buffer.isBuffer(currentResponse)) {
      currentResponse = currentResponse.toString("utf-8");
    }

    try {
      // Try to parse JSON
      currentResponse = JSON.parse(currentResponse);
    } catch (error) {
      logger.warn(`⚠️ Response is not a valid JSON: ${currentResponse}`);
    }

    // Restore the send method to avoid issues
    originalSend.call(this, body);

    // Call the new microservice asynchronously
    (async () => {
      try {
        const newResponse = await axios({
          method: requestData.method,
          url: `http://localhost:8080/v1${requestData.url}`,
          headers: requestData.headers,
          data: requestData.data,
        });

        // Perform deep comparison of the responses
        if (!_.isEqual(JSON.parse(currentResponse), newResponse.data)) {
          logger.error(`[DISCREPANCY DETECTED] - Endpoint: ${requestData.url}`);
          logger.error(
            `Current Microservice Response:`,
            JSON.parse(currentResponse)
          );
          logger.error(`New Microservice Response:`, newResponse.data);
        }
      } catch (error) {
        logger.error(
          `[ERROR CALLING NEW MICROSERVICE] ${requestData.url}`,
          error.message
        );
        console.log(error);
      }
    })();
  };

  next();
};

I’m working on a React website that uses ThreeJS to display a 3D model that animates based on scroll position. The problem is that rendering the model seems to be slowing down other animations on my page, specially a text in my file that contains both the 3D model and the component for the animated text

The 3D model works great its just am noticing that other CSS animations on my page become choppy when the Three.js scene is rendering, especially on mobile devices.

Is it possible to render ThreeJS in a separate thread (Web Worker) to prevent it from blocking the main UI thread?
If not, what are the best practices for optimizing Three.js to minimize impact on page performance?

Here’s a snippet of my current implementation

function setupAnimation(object, renderer, camera, scene) {
    const animate = () => {
        frameRef.current = requestAnimationFrame(animate);
        
        const shouldUpdate = window.THREEJS_SHOULD_UPDATE !== false;
        
        if (object && shouldUpdate) {
            const normalizedScroll = scrollRef.current / ANIMATION.totalScrollHeight;
                        
            renderer.render(scene, camera);
        }
    };

    animate();
}

I need to synchronize task data between a CRM and an external project management service that provides a REST API. I’m looking for a JavaScript library that can help with:
• Simplifying HTTP requests (GET, POST, PATCH, etc.)
• Handling authentication (API keys, OAuth, etc.)
• Processing webhooks to track task updates

Which JavaScript libraries are best suited for this kind of integration? Ideally, I’m looking for something lightweight with an active community.

I have this code here… It worked in the past, but now im not being able to make it working again. Can you please check what am i doing wrong here?

JS:

function enviar(){


    if($("#nome").val()==""){
        alert("Preencha correctamente todos os campos");
    }
    else {
        $.post("js/mailnovo.php",{nome:$("#nome").val(),telefone:$("#telefone").val(),email:$("#email").val(),mensagem:$("#mensagem").val()} ,function(resultado){

            $("#nome").val("");
            $("#telefone").val("");
            $("#email").val("");
            $("#mensagem").val("");
        });
        alert("A sua mensagem foi enviada com sucesso. Seremos breves na resposta. Obrigado.");
        window.open("https://www.activecard.pt/obrigado.html", "_self");
    }
}

mailnovo.php

    <?php
$nome = $_POST['nome'];
$telefone = $_POST['telefone'];
$email = $_POST['email'];
$mensagem = $_POST['mensagem'];

$to = "[email protected]";
$subject = "Pedido de Orçamento - ".$nome;
$message = "
<b>Nome:</b> $nome<br/>
<b>Telefone:</b> $telefone<br/>
<b>Email:</b> $email<br/>
<b>Mensagem:</b><br/>
$mensagem";

$from = "[email protected]";
$headers .= "From: ".$nome."<$from>rn";
$headers .= "MIME-Version: 1.0rn";
$headers .= "Content-Type: text/html; charset=UTF-8rn";

if(mail($to,$subject,$message,$headers))
{
    echo 1;
}
else
{
    echo 0;
}

?>

It says that message was sent, but i dont get the email…

When I try to read source code of for example example.com, it works. But as I try to use it for example for instagram.com it does not work anymore and app falls. Can I ask where is the difference and what fix run it?
The main part is javascript code, but I think there is no ay bug.

MainActivity.java

package com.example.pokuswebview2;

import android.content.Intent;
import android.os.Bundle;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.Button;
import android.widget.Toast;
import androidx.appcompat.app.AppCompatActivity;

import com.example.pokuswebview2.R;

public class MainActivity extends AppCompatActivity {

    private WebView webView;
    private Button btnShowSource;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        webView = findViewById(R.id.webview);
        btnShowSource = findViewById(R.id.btnShowSource);

        
        webView.setWebViewClient(new WebViewClient());
        webView.getSettings().setJavaScriptEnabled(true);
        webView.loadUrl("https://goodgamestudios.com");

        
        btnShowSource.setOnClickListener(v -> {
            webView.evaluateJavascript("(function() { return document.documentElement.outerHTML; })();", html -> {
                
                if (html != null) {
                    
                    Intent intent = new Intent(MainActivity.this, com.example.pokuswebview2.SourceActivity.class);
                    intent.putExtra("SOURCE_CODE", html);
                    startActivity(intent);
                } else {
                    
                    Toast.makeText(MainActivity.this, "Chyba při získávání zdrojového kódu", Toast.LENGTH_SHORT).show();
                }
            });
        });
    }
}

SourceActivity.java

package com.example.pokuswebview2;

import android.os.Bundle;
import android.widget.TextView;
import androidx.appcompat.app.AppCompatActivity;

import com.example.pokuswebview2.R;

public class SourceActivity extends AppCompatActivity {

    private TextView tvSourceCode;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_source);

        tvSourceCode = findViewById(R.id.tvSourceCode);

        String pageSource = getIntent().getStringExtra("SOURCE_CODE");

        if (pageSource != null) {
            tvSourceCode.setText(pageSource);
        }
    }
}

The logcat with errors from bellow need to scroll right):

ProcessRecord{47e911b 13655:com.example.pokuswebview2/u0a158} is attached to a previous process
2025-02-26 13:43:43.001   532-617   InputDispatcher         system_server                        E  channel 'd75bb1a com.example.pokuswebview2/com.example.pokuswebview2.MainActivity (server)' ~ Channel is unrecoverably broken and will be disposed!
2025-02-26 13:43:43.014   532-552   ActivityManager         system_server                        E  Already have existing proc ProcessRecord{47e911b 13655:com.example.pokuswebview2/u0a158} when adding ProcessRecord{e4a8eb7 0:com.example.pokuswebview2/u0a158}
2025-02-26 13:43:43.107   532-3328  ActivityTaskManager     system_server                        E  Transaction too large, intent: Intent { cmp=com.example.pokuswebview2/.SourceActivity (has extras) }, extras size: 767960, icicle size: 0
2025-02-26 13:43:43.128   532-3328  ActivityTaskManager     system_server                        E  Second failure launching com.example.pokuswebview2/.SourceActivity, giving up
                                                                                                    android.os.TransactionTooLargeException: data parcel size 771000 bytes
                                                                                                        at android.os.BinderProxy.transactNative(Native Method)
                                                                                                        at android.os.BinderProxy.transact(BinderProxy.java:540)
                                                                                                        at android.app.IApplicationThread$Stub$Proxy.scheduleTransaction(IApplicationThread.java:2504)
                                                                                                        at android.app.servertransaction.ClientTransaction.schedule(ClientTransaction.java:136)
                                                                                                        at com.android.server.wm.ClientLifecycleManager.scheduleTransaction(ClientLifecycleManager.java:47)
                                                                                                        at com.android.server.wm.ActivityStackSupervisor.realStartActivityLocked(ActivityStackSupervisor.java:863)
                                                                                                        at com.android.server.wm.RootWindowContainer.startActivityForAttachedApplicationIfNeeded(RootWindowContainer.java:1965)
                                                                                                        at com.android.server.wm.RootWindowContainer.lambda$5fbF65VSmaJkPHxEhceOGTat7JE(Unknown Source:0)
                                                                                                        at com.android.server.wm.-$$Lambda$RootWindowContainer$5fbF65VSmaJkPHxEhceOGTat7JE.apply(Unknown Source:8)
                                                                                                        at com.android.internal.util.function.pooled.PooledLambdaImpl.doInvoke(PooledLambdaImpl.java:315)
                                                                                                        at com.android.internal.util.function.pooled.PooledLambdaImpl.invoke(PooledLambdaImpl.java:201)
                                                                                                        at com.android.internal.util.function.pooled.OmniFunction.apply(OmniFunction.java:78)
                                                                                                        at com.android.server.wm.ActivityRecord.forAllActivities(ActivityRecord.java:3620)
                                                                                                        at com.android.server.wm.WindowContainer.forAllActivities(WindowContainer.java:1331)
                                                                                                        at com.android.server.wm.WindowContainer.forAllActivities(WindowContainer.java:1324)
                                                                                                        at com.android.server.wm.RootWindowContainer.attachApplication(RootWindowContainer.java:1944)
                                                                                                        at com.android.server.wm.ActivityTaskManagerService$LocalService.attachApplication(ActivityTaskManagerService.java:6890)
                                                                                                        at com.android.server.am.ActivityManagerService.attachApplicationLocked(ActivityManagerService.java:5378)
                                                                                                        at com.android.server.am.ActivityManagerService.attachApplication(ActivityManagerService.java:5458)
                                                                                                        at android.app.IActivityManager$Stub.onTransact(IActivityManager.java:2320)
                                                                                                        at com.android.server.am.ActivityManagerService.onTransact(ActivityManagerService.java:2883)
                                                                                                        at android.os.Binder.execTransactInternal(Binder.java:1154)
                                                                                                        at android.os.Binder.execTransact(Binder.java:1123)

I am using Umbraco and .net core app, to upload files via angularJs in the backoffice this working fine, but now I need to upload images to the media section of the umbraco.

vm.uploadFile = function () {
  let uploadUrl = `/umbraco/backoffice/api/MyApi/UploadFile`;

  let fileInput = document.getElementById('UploadFile');
  let file = fileInput.files[0];

  if (!file) {
    alert("Please select a file to upload.");
    return;
  }

  vm.isLoading = true;
  let formData = new FormData();
  formData.append('file', file);
  
  Upload.upload({
    url: uploadUrl,
    file: file
  }).success(function () {
    fileInput.value = '';
    alert('File uploaded successfully!');
  }).catch(function (x) {
    console.error('Error uploading file:', x);
    alert('File upload failed.');
  })
    .finally(() => {
    vm.isLoading = false;
  });
};

public class MyApiController
{

 [HttpPost]
    public IHttpActionResult UploadFile()
    {
       
            var httpRequest = HttpContext.Current.Request;

            if (httpRequest.Files.Count == 0)
                return BadRequest("No file uploaded.");

            var file = httpRequest.Files[0];
       ...
    }
}

How can I upload some images to the umbraco media, lets say I have a info folder there like “umbraco#/media/info” and want upload images using my custom code, and also need to know the URL of the umbraco media or the service responsible for that.

Currently I have a map where people can also enter streetview-mode. I’d like to have a minimap in the lower-left-corner which shows the ‘little man’ and the direction you’re looking. For illustration I added a screenshot.

The code I use for creating the map is pretty basic and I’m not a pro in this area. Hope someone can point out how to add such a minimap in my current map.

        function initialize() {

            var latlng = new google.maps.LatLng(52.207206, 4.866782);
            var myOptions = {
                zoom: GetPrevZoom(),
                mapTypeId: "OSM",
                streetViewControl: true,
                gestureHandling: "greedy",
                zoomControl: false,
                mapTypeControlOptions: {
                    mapTypeIds: [
                        "OSM",
                        google.maps.MapTypeId.SATELLITE,
                        google.maps.MapTypeId.ROADMAP
                    ]
                }

            };
            map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);

            map.mapTypes.set("OSM", new google.maps.ImageMapType({
                getTileUrl: function (coord, zoom) {
                    return "https://tile.openstreetmap.org/" + zoom + "/" + coord.x + "/" + coord.y + ".png";
                },
                tileSize: new google.maps.Size(256, 256),
                name: "OpenStreetMap",
                maxZoom: 19
            }));

            map.addListener('zoom_changed', function () {

                sessionStorage.setItem('zoomlevel', map.getZoom());

            });

            oms = new OverlappingMarkerSpiderfier(map, { markersWontMove: true, markersWontHide: true, keepSpiderfied: true });
            var iw = new google.maps.InfoWindow();

            map.overlayMapTypes.push(null);

        }

        function GetPrevZoom() {

            let data = sessionStorage.getItem('zoomlevel');

            return 18;

        }

What do I need to add here to get a minimap?

Thanks,
Ferdy

I’m looking at making a mixed mode text box. The user can use some scripted functionality to insert rich text items, otherwise it’s just plain text. This seems like a job for content-editable: plaintext-only. Things work well except for when the user enters a newline between two structured items. See snippet below: place the caret between the two items and press enter.

.semiStructuredInputStructuredItem {
    :after {
        content: " "
    }

    user-select: all;
}

<div contenteditable="plaintext-only" style="/* white-space: pre; */"><div class="semiStructuredInputStructuredItem" data-semi-structured-index="0" contenteditable="false" style="display: inline-block; margin-left: 2px; margin-right: 2px;"><div style="background: rgb(235, 244, 245); padding: 2px;">Developer, Test (Mr)</div></div><div class="semiStructuredInputStructuredItem" data-semi-structured-index="1" contenteditable="false" style="display: inline-block; margin-left: 2px; margin-right: 2px;"><div style="background: rgb(235, 244, 245); padding: 2px;">Demo, (Dr)</div></div><br></div>

The first issue is that Chrome inserts two newlines, rather than one, when enter is pressed. The second item should still be on the same line as the caret, but it isn’t. This isn’t purely visual either; Chrome reports the text box actually contains two new lines. The second issue is that if you press delete after this, the second newline is deleted, but so is the structured item, when only the newline should be deleted.

Any thoughts on how to make this behaviour more rational? The desired outcome is that if the user presses enter, they should enter only one newline, and if they enter a newline, deleting it should delete only the newline and not anything else after it.

I saw some discussion of how white-space interacts here, but trying different versions has no effect.

I have used the script below, but it’s executed, and it’s showing “0 inline text frames changed to Above Line.”. Actually when I manually find the inline text frame in the “find/replace -> objects” it’s detected, but using script3, the inline was not detected. Can anyone suggest the proper script?

var doc = app.activeDocument;
var count = 0;

for (var i = 0; i < doc.stories.length; i++) {
    var story = doc.stories[i];

    for (var j = 0; j < story.insertionPoints.length; j++) {
        var ip = story.insertionPoints[j];

        if (ip.textFrames.length > 0) { // Check if there's an anchored frame
            for (var k = 0; k < ip.textFrames.length; k++) {
                var textFrame = ip.textFrames[k];
                
                if (textFrame.anchoredObjectSettings.anchoredPosition == AnchorPosition.INLINE_POSITION) {
                    textFrame.anchoredObjectSettings.anchoredPosition = AnchorPosition.ABOVE_LINE;
                    count++;
                }
            }
        }
    }
}

alert(count + " inline text frames changed to Above Line.");

I want to change all the inline text frames to above line in all the indd files.

I am trying to do programmatically redirect external link open in a new tab after axios successful response but it blocked by browser the message is popup blocked. I tried it in different way and different browser (safari, chrome, firefox) but still getting same error.

I have tried this code:

window.open(newUrl, '_blank');
// This is not working 

Also i tried this:

 const link = document.createElement('a');
 link.href = 'https://example.html';
 link.target = '_blank';
 document.body.appendChild(link);
 link.click();
 document.body.removeChild(link);

This also not working :

await window.navigation.navigate('http://localhost:8000/filepath', { 
    targetName: '_blank'
 });

Please help me to find out a solution for this programmatically redirect issue.

I have tried to make soemthing for Math class, however the button elements didn’t seem to do anything on Iphones. I have tried to use eventlisteners and the onclick Attribute.
Does anyone know why it doesn’t work?

  <!DOCTYPE html>

<html>

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="https://fontlibrary.org//face/cmu-serif">

  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">

  <title>Portfolio</title>

  <style>

    body {

      background:dimgray;

      color:white;

      font-family:none;

    }

    .header {

      text-align:center;

      font-weight:bold;

    }

    

    .header2, .header3 {

      text-align:center;

    }

    .rechnung {

      font-weight:bold;

      text-align:center;

    }

    #calc1Input {

      width:50px;

      border-radius:2px;

      border:solid lightgray 1px;

      background:gray;

      color:white;

    }

    

    #calc1Input:focus {

      width:50px;

      border-radius:2px;

      border:solid lightgray 1px;

      background:gray;

      color:white;

      outline:none;

    }

    #correct {

      font-weight:bold;

      color:green;

    }

    

    #wrong {

      font-weight:bold;

      color:red;

    }

    

    #window {

      width:200px;

      height:120px;

      border:solid gray 1px;

      border-radius:10px;

      font-family:none;

    }

    

    #window {

      margin-left:45px;

      text-align:center;

      background:dimgray;

      

    }

    

    #calc1Input {

      font-family:none;

      text-align:center;

    }

    

    #aufloesen {

      margin-top:10px;

      border:solid gray 1px;

      border-radius:8px;

      height:30px;

      width:80px;

      font-weight:bold;

      color:black;

      background:white;

      margin-left:105px;

      cursor:pointer;

      font-family:none;

    }

    

    .berechnung {

      margin-top:20px;

    }

    

    .richtig {

      margin-top:25px;

      font-size:30px;

      font-weight:bold;

    }

    

    #wrong {

      margin-top:40px;

    }

    

    #calc1Input1 {

      width:50px;

      border-radius:2px;

      border:solid lightgray 1px;

      background:gray;

      color:white;

    }

    

    #calc1Input1:focus {

      width:50px;

      border-radius:2px;

      border:solid lightgray 1px;

      background:gray;

      color:white;

      outline:none;

    }

    #correct1 {

      font-weight:bold;

      color:green;

    }

    

    #wrong1 {

      font-weight:bold;

      color:red;

    }

    

    #window1 {

      width:200px;

      height:120px;

      border:solid gray 1px;

      border-radius:10px;

      font-family:none;

    }

    

    #window1 {

      margin-left:45px;

      text-align:center;

      background:dimgray;

      

    }

    

    #calc1Input1 {

      font-family:none;

      text-align:center;

    }

    

    #aufloesen1 {

      margin-top:10px;

      border:solid gray 1px;

      border-radius:8px;

      height:30px;

      width:80px;

      font-weight:bold;

      color:black;

      background:white;

      margin-left:105px;

      cursor:pointer;

      font-family:none;

    }

    

    .berechnung {

      margin-top:20px;

    }

    

    .richtig {

      margin-top:25px;

      font-size:30px;

      font-weight:bold;

    }

    

    #wrong1 {

      margin-top:40px;

    }

    

    .aufgabenstellung {

      font-weight:bold;

    }

    

    div.body {

    background-color: gray;

    width: 80%;

    margin: 20px auto;

    padding: 20px;

    border-radius: 9px;

    }

    

   .coordinate-system {

    width: 300px;

    height: 300px;

    border: 1px solid black;

}



.axis {

    stroke: black;

    stroke-width: 1;

}



.label {

    font-size: 12px;

}



.line {

    stroke: red;

    stroke-width: 2;

    fill: none;

}

 svg {

   background:white;

   border: solid black 1px;

   margin-left: -4px;

 }



  </style>

</head>



<body>

    <h1 class="header">Portfolio Mathematik</h1>

    <h3 class="header3" style="color:#f8baba;">Sofian Sekakri</h3>

  <div class="body">

    <h2 class="header2" style="color:orange;font-weight:bold;">1. Zinseszins</h2>

    

    <h3 class="header3">Erklärung der Formel</h3>

    <div class="section">

  <div class="header">1. K (Endkapital)</div>

  <div class="content">

      Das Endkapital ist der Betrag nach der Berechnung. Es ergibt sich aus dem Anfangskapital und dem Wachstumsfaktor. Es zeigt den Endwert nach der Zeit.

  </div>

</div>

<br>

<div class="section">

  <div class="header">2. K<sub>0</sub> (Anfangskapital)</div>

  <div class="content">

    Das Anfangskapital ist der Betrag zu Beginn. Es ist der Ausgangspunkt der Berechnung.<br>

    <b>Beispiel: K<sub>0</sub> = 2300.</b>

  </div>

</div>

<br>



<div class="section">

  <div class="header">3. q (Wachstumsfaktor)</div>

  <div class="content">

    Der Wachstumsfaktor zeigt, wie sich das Kapital verändert.Er wird durch den Zinssatz berechnet.<br>

    <b>Zum Beispiel: q = 1.03 bei 3% Zinsen.</b>

  </div>

</div>

<br>



<div class="section">

  <div class="header">4. n (Anzahl der Jahre/Perioden)</div>

  <div class="content">

    n ist die Anzahl der Jahre.

    Je höher n, desto länger läuft die Verzinsung. <b>Für 5 Jahre ist n = 5.</b>

  </div>

</div>

<br>



<div class="section">

  <div class="header">5. q<sup>n</sup> (Wachstumsfaktor hoch n)</div>

  <div class="content">

    Der Wachstumsfaktor wird über n Jahre angewendet. Es multipliziert das Kapital mehrfach.<br>

    <b>Beispiel: (1.03)<sup>3</sup> für 3 Jahre.</b>

  </div>

</div>

<br>

<h3 class="header3">Beispiel für Zinseszins</h3>

<svg width="300" height="300" viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg">

  <!-- Achsen -->

  <line x1="50" y1="350" x2="350" y2="350" stroke="black" stroke-width="2" />

  <line x1="50" y1="350" x2="50" y2="50" stroke="black" stroke-width="2" />

  

  <!-- Achsenbeschriftungen -->

  <text x="50" y="370" font-size="12" text-anchor="middle">0</text>

  <text x="100" y="370" font-size="12" text-anchor="middle">2</text>

  <text x="150" y="370" font-size="12" text-anchor="middle">4</text>

  <text x="200" y="370" font-size="12" text-anchor="middle">6</text>

  <text x="250" y="370" font-size="12" text-anchor="middle">8</text>

  <text x="300" y="370" font-size="12" text-anchor="middle">10</text>



  <text x="40" y="350" font-size="12" text-anchor="middle">9.700</text>

  <text x="40" y="300" font-size="12" text-anchor="middle">10.000</text>

  <text x="40" y="250" font-size="12" text-anchor="middle">10.400</text>

  <text x="40" y="200" font-size="12" text-anchor="middle">10.800</text>

  <text x="40" y="150" font-size="12" text-anchor="middle">11.200</text>

  <text x="40" y="100" font-size="12" text-anchor="middle">11.600</text>

  <text x="40" y="50" font-size="12" text-anchor="middle">12.000</text>



  <!-- Exponentielle Kurve (Wachstum über 10 Jahre) -->

  <path d="M50,350 C100,330, 150,280, 200,230 C250,170, 300,100, 350,50" stroke="blue" stroke-width="2" fill="transparent" />

</svg>

<h2 class="header2">Aufgabe 1</h2>

<div style="text-align:center;">

  Carlos legt an sein Sparkonto 2.300 Euro über 5 Jahre an. Der Zinssatz pro Jahr beträgt 0,89 Prozent. <b>Runde das Ergebnis auf 2 Kommastellen</b>.

</div>

    <ul>

    <div style="font-weight:bold;">

K<sub>0</sub> = <span style="color:orange;">2.300€</span>

<div style="font-weight:bold;"><sub>n</sub> = <span style="color:orange;">5 Jahre</span></div>

<div style="font-weight:bold;">q = <span style="color:orange;">1,089</span></div>

    </ul>

    <h3 class="rechnung">Rechnung:</h3>

   <div class="rechnung">  

    <span style="color:red;opacity:50%;">K</span><span style="color:orange;opacity:50%;"><sub>0</sub></span>  

    *  

    <span style="color:green;opacity:50%;">q</span><sup><span style="color:blue;opacity:50%;">n</span></sup>  

    =  

    <span style="color:red;opacity:50%;">K</span>  

    <br>  

    <br>  

</div>

    <div id="window">

    <br>

    <div class="aufgabenstellung">Berechne den Wert von <b>K</b></div><br>

    <span class="berechnung">K = <input id="calc1Input">€</span><br><br>

    <span id="wrong"></span>

   </div>

   <button id="aufloesen">Überprüfen</button>

   

   

  </div>

  

   <div class="body">

    <h2 class="header2" style="color:orange;font-weight:bold;">2. lineares Wachstum</h2>

    

    <h3 class="header3">Erklärung der Formel</h3>



<div class="section">

  <div class="header">1. y (Ergebnis)</div>

  <div class="content">

      Das ist der Wert, den man am Ende rausbekommt. Er setzt sich aus dem Anfangswert und der Veränderung über die Zeit zusammen.

  </div>

</div>

<br>



<div class="section">

  <div class="header">2. b (Anfangswert)</div>

  <div class="content">

    Das ist der Startwert, bevor sich irgendwas verändert. Man fängt also damit an.<br>

    <b>Beispiel: b = 500.</b>

  </div>

</div>

<br>



<div class="section">

  <div class="header">3. m (Steigung/Veränderung pro Schritt)</div>

  <div class="content">

    Das zeigt, wie schnell oder langsam sich der Wert verändert. Je größer m, desto stärker steigt (oder fällt) der Wert.<br>

    <b>Beispiel: m = 20 heißt, dass der Wert pro Schritt um 20 größer wird.</b>

  </div>

</div>

<br>



<div class="section">

  <div class="header">4. x (Zeit/Anzahl der Schritte)</div>

  <div class="content">

    x gibt an, wie viele Schritte vergangen sind. Je größer x, desto mehr hat sich der Wert verändert.<br>

    <b>Beispiel: x = 5 bedeutet, dass 5 Zeiteinheiten vergangen sind.</b>

  </div>

</div>

<br>



<div class="section">

  <div class="header">5. m · x (Gesamtveränderung)</div>

  <div class="content">

    Hier wird die Veränderung pro Schritt mit der Anzahl der Schritte multipliziert. So sieht man, wie viel sich der Wert insgesamt verändert hat.<br>

    <b>Beispiel: 20 · 3 = 60 bedeutet, dass der Wert nach 3 Schritten um 60 gestiegen ist.</b>

  </div>

  

  



      <h3 class="header3">Beispiel für eine lineare Funktion</h3>



<svg width="300" height="300" viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg">

  <!-- Achsen -->

  <line x1="50" y1="350" x2="350" y2="350" stroke="black" stroke-width="2" />

  <line x1="50" y1="350" x2="50" y2="50" stroke="black" stroke-width="2" />

  

  <!-- Achsenbeschriftungen -->

  <text x="50" y="370" font-size="12" text-anchor="middle">0</text>

  <text x="100" y="370" font-size="12" text-anchor="middle">1</text>

  <text x="150" y="370" font-size="12" text-anchor="middle">2</text>

  <text x="200" y="370" font-size="12" text-anchor="middle">3</text>

  <text x="250" y="370" font-size="12" text-anchor="middle">4</text>

  <text x="300" y="370" font-size="12" text-anchor="middle">5</text>

  <text x="350" y="370" font-size="12" text-anchor="middle">6</text>

  

  <text x="40" y="350" font-size="12" text-anchor="middle">0</text>

  <text x="40" y="300" font-size="12" text-anchor="middle">20</text>

  <text x="40" y="250" font-size="12" text-anchor="middle">40</text>

  <text x="40" y="200" font-size="12" text-anchor="middle">60</text>

  <text x="40" y="150" font-size="12" text-anchor="middle">80</text>

  <text x="40" y="100" font-size="12" text-anchor="middle">100</text>

  <text x="40" y="50" font-size="12" text-anchor="middle">120</text>

  

  <!-- Linie für lineares Wachstum -->

  <line x1="50" y1="350" x2="100" y2="300" stroke="blue" stroke-width="2" />

  <line x1="100" y1="300" x2="150" y2="250" stroke="blue" stroke-width="2" />

  <line x1="150" y1="250" x2="200" y2="200" stroke="blue" stroke-width="2" />

  <line x1="200" y1="200" x2="250" y2="150" stroke="blue" stroke-width="2" />

  <line x1="250" y1="150" x2="300" y2="100" stroke="blue" stroke-width="2" />

</svg>

<br>

<br>

  <div class="content">

    Wie man im Beispiel sehen kann bleibt die Steigung <b>immer</b> Konstant und verändert sich über Zeit nicht. Es ist vergleichbar mit einem gleichbleibendem Taschengeld von bspw. 20€. Man hat nach insgesamt 3 Monaten 60€ bekommen. Die Summe, die man monatlich bekommt ändert sich jedoch nicht.

  </div>

  <h2 class="header2">Aufgabe 2: Kredithai</h2>

<div style="text-align:center;">

  Marlon leiht Juvarz 200 Euro. Diese Summe muss innerhalb von 1 Monat zurückgezahlt werden. Ist dies nicht der Fall schuldet Juvraz Marlon zusätzliche <b>31,70€</b> für jeden weiteren überzogenen Monat. Nach 8 Monaten entscheided sich Juvraz das Geld zurückzuzahlen. <b>Wie viel schuldet er Marlon?</b>

</div>

    <ul>

    <div style="font-weight:bold;">

x = <span style="color:orange;">7</span>

<div style="font-weight:bold;">b = <span style="color:orange;">200</span></div>

<div style="font-weight:bold;">m = <span style="color:orange;">31,70€</span></div>

    </ul>

    <h3 class="rechnung">Rechnung:</h3>

<div class="rechnung">  

    <span style="color:red;opacity:50%;">y</span> =  

    <span style="color:orange;opacity:50%;">b</span> +  

    <span style="color:yellow;opacity:50%;">m</span> *  

    <span style="color:green;opacity:50%;">x</span>  

    <br>  

    <br>  

</div>

    <div id="window1">

    <br>

    <div class="aufgabenstellung">Berechne den Wert von <b>y</b></div><br>

    <span class="berechnung">y = <input id="calc1Input1">€</span><br><br>

    <span id="wrong1"></span>

   </div>

   <button id="aufloesen1">Überprüfen</button>

  </div>

  </div>



   <div class="body">

    <h2 class="header2" style="color:orange;font-weight:bold;">3. Potenzen</h2>

    

    

    </div>

  <script>

    document.querySelector('#aufloesen').addEventListener("touchstart", rechnung);

document.querySelector('#aufloesen1').addEventListener("touchstart", rechnung1);

    document.querySelector('#aufloesen').addEventListener("click", rechnung);

document.querySelector('#aufloesen1').addEventListener("click", rechnung1);

//Aufgabe 1

function rechnung() {

const result1 = document.querySelector('#calc1Input').value;

if (result1 === "2404,19") {

  document.querySelector('#calc1Input').setAttribute('disabled', 'disabled')

  document.querySelector('#wrong').innerHTML = "";

  document.querySelector('#window').innerHTML =  "<div class='richtig'>"+ "Korrekte Antwort!" + "</div>";

  document.querySelector('#window').style.background = 'green';

  document.querySelector('#window').style.borderColor = 'green';

  document.querySelector('#aufloesen').setAttribute('disabled', 'disabled');

} else {

  document.querySelector('#wrong').innerHTML = "Falsche Antwort!";

  document.querySelector('#window').style.borderColor = 'red';

}

}





//Aufgabe 2



function rechnung1() {

const result11 = document.querySelector('#calc1Input1').value;

if (result11 === "421,90") {

  document.querySelector('#calc1Input1').setAttribute('disabled', 'disabled')

  document.querySelector('#wrong1').innerHTML = "";

  document.querySelector('#window1').innerHTML =  "<div class='richtig'>"+ "Korrekte Antwort!" + "</div>";

  document.querySelector('#window1').style.background = 'green';

  document.querySelector('#window1').style.borderColor = 'green';

  document.querySelector('#aufloesen1').setAttribute('disabled', 'disabled');

} else {

  document.querySelector('#wrong1').innerHTML = "Falsche Antwort!";

  document.querySelector('#window1').style.borderColor = 'red';

}

}

  </script>

</body>

</html>

I expected it to execute my scripts saved in the functions. I couldn’t really debug it properly because I could only test it on apple mobile devices