Zuordnung der Homepage

Repository-URL Meiner Homepage

https://github.com/im-khaled/homepage

CSS-Selektoren und CSS-Farben

RGB-Werte in HSL-Werte umrechnen:

1. hsl (0, 0%, 100%)
2. hsl (0, 0%, 0%)
3. hsl (319, 90%, 35%)
4. hsl (95, 100%, 56%)
5. hsla (25, 100%, 56%, 0.8)

CSS-Positionierung

Lösung zum 2. Video:

Wireframe mit HTML und CSS

HTML-Wireframe:

Responsiv mit Flexbox und Desktop-First

Desktop-First-Strategie:

Responsiv mit Grid und Mobile-First

Mobile-First:

Wireframe responsive mit Grid

Landing-Page responsiv mit Grid:

Funktionen

//Aufgabe 1
function identity(a) {
    return a;
  }

//Aufgabe 2
function identity_function(a) {
    return function() {
      return a;
    };
  }
  
// Aufgabe 3
function add(x, y) {
    return x + y;
  }
  
  function mul(x, y) {
    return x * y;
  }
  
//Aufgabe 4
function addf(x) {
    return function(y) {
      return x + y;
    };
  }
  
  // Example usage:
  const result = addf(3)(4); 
  console.log("Result:", result);
  
//aufgabe 5
function applyf(binaryFunc) {
    return function(x) {
      return function(y) {
        return binaryFunc(x, y);
      };
    };
  }
  const addff = applyf(add);
  const mulf = applyf(mul);
  
  const resultAdd = addff(3)(4); // Result: 7
  const resultMul = mulf(5)(6); // Result: 30
  
  console.log("Result (addf):", resultAdd);
  console.log("Result (mulf):", resultMul);
  

Objekte

// Person-Prototyp
function Person(name) {
    this.name = name;
    this.autos = [];
  }
  
  // Auto-Prototyp
  function Auto(model) {
    this.model = model;
    this.owner = [];
  }
  
  // Funktion zum Überprüfen von Konflikten
  function conflict(auto) {
    
    if(auto.owner.length > 1){
        console.log('\nKonflikt gefunden');
        for(var x of auto.owner ){
            console.log(auto.model, 'wird von', x, 'besessen');
        }
        
     return true;   
    }
    else{
       console.log('\nFür',auto.model,'Kein Konflikt gefunden'); 
    }
    return false;
  }
  
  // Beispiel
  const person1 = new Person("Paul");
  const person2 = new Person("Linda");
  const person3 = new Person("Tim");
  
  const auto1 = new Auto("BMW");
  const auto2 = new Auto("Audi");
  const auto3 = new Auto("Volkswagen");
  
  
  person1.autos.push(auto1);
  person2.autos.push(auto2);
  person3.autos.push(auto3);
  
  

  auto1.owner.push (person1.name);
  auto2.owner.push (person2.name);
  auto3.owner.push (person1.name);
  auto3.owner.push (person3.name);


// false, kein Konflikt
conflict(auto1); 

// true, Konflikt gefunden
conflict(auto3); 
  

Fibonacci

const fibTable = new Map();
const GrosteInt = new Array();
const intZahl = new Array();
const numZahl = new Array();

function fib(n) {
  // Initialisiere die ersten beiden Fibonacci-Zahlen.
  let prevPrev = 0;
  let prev = 1;
  if(n === 0){
      return 0;
  }
  if(n === 1) {
      return 1;
  }
  // Berechne die Fibonacci-Zahlen von 2 bis n.
  for (let i = 2; i <= n; i++) {
    const current = prevPrev + prev;
    prevPrev = prev;
    prev = current;
  }

  // Rückgabe der n-ten Fibonacci-Zahl.
  return prev;
}
for (let i = 0; i <= 2000; i++) {
  let result = fib(i);
  
  if(result > Number.MAX_SAFE_INTEGER && result < Number.MAX_VALUE){

      intZahl.push(i-1);
      const newResult = fib(i-1);
      GrosteInt.push(newResult);
      result = BigInt(result);
      numZahl.push(result);
       
  }
  fibTable.set(i, result);
  console.log(fibTable); 
  
}
//größte Fibonacci-Zahl, die sich noch als Integer sicher speichern lässt
console.log('Größte Fibonacci-Zahl(Integer)', GrosteInt[0])

//Die Zahl, die in der Fibonacci-Folge(Integer)
console.log('Die anzahl, die in der Fibonacci-Folge(Integer):', intZahl[0]);

//die größte Fibonacci-Zahl, die sich noch als Number speichern lässt 
console.log('Größte Fibonacci-Zahl(Number)', numZahl[numZahl.length-1])

//Die Zahl, die in der Fibonacci-Folge(Number)
console.log('Die anzahl, die in der Fibonacci-Folge(Number):', intZahl.length);

TopSort

function topsort(abhaengigkeiten) {
    const graph = new Map();
    const sortedGraph = new Map();
    const ergebnis = [];
  
    // Erstelle den Graphen und berechne die sortedGraph
    for (const [von, nach] of abhaengigkeiten) {
      if (!graph.has(von)) {
        graph.set(von, []);
      }
      graph.get(von).push(nach);
  
      sortedGraph.set(nach, (sortedGraph.get(nach) || 0) + 1);
    }
  
    // Initialisiere eine queue mit Knoten
    const queue = [];
    for (const knoten of graph.keys()) {
      if (!sortedGraph.has(knoten)) {
        queue.push(knoten);
      }
    }
  
    // Führe die topologische Sortierung
    while (queue.length > 0) {
      const knoten = queue.shift();
      ergebnis.push(knoten);
  
      if (graph.has(knoten)) {
        for (const nachbar of graph.get(knoten)) {
          sortedGraph.set(nachbar, sortedGraph.get(nachbar) - 1);
  
          if (sortedGraph.get(nachbar) === 0) {
            queue.push(nachbar);
          }
        }
      }
    }
  
    return ergebnis;
  }
  
  // Test
  const abhaengigkeiten = [["schlafen", "studieren"], ["essen", "studieren"], ["studieren", "pruefen"],["vorbereiten", "pruefen"]];
  const ergebnis = topsort(abhaengigkeiten);

    console.assert(ergebnis.indexOf("essen") < ergebnis.indexOf("studieren"), "Test failed: 'essen' sollte vor 'studieren' liegen");
    console.assert(ergebnis.indexOf("schlafen") < ergebnis.indexOf("studieren"), "Test failed: 'schlafen' sollte vor 'studieren' liegen");
    console.assert(ergebnis.indexOf("studieren") < ergebnis.indexOf("pruefen"), "Test failed: 'studieren' sollte vor 'pruefen' liegen");
    console.assert(ergebnis.indexOf("vorbereiten") < ergebnis.indexOf("pruefen"), "Test failed: 'studieren' sollte vor 'pruefen' liegen");

console.log("Topologische Sortierung:", ergebnis);
    

Spread-Operator

        /**
            Mit dem Spread-Operator können wir die Elemente eines Arrays in ein anderes Array einfügen oder sie als Argumente für eine Funktion übergeben.
        */

        //Zusammenfügen von Arrays
        const array1 = [1, 2, 3];
        const array2 = [4, 5, 6];
        const mergedArray = [...array1, ...array2];

        console.log(mergedArray); // Ausgabe: [1, 2, 3, 4, 5, 6]

        // Verwendung in einer Funktion
        const numbers = [10, 20, 30];
        const sum = (a, b, c) => a + b + c;

        console.log(sum(...numbers)); // Ausgabe: 60

        /*
            Der Spread-Operator kann auch verwendet werden, um Eigenschaften von einem Objekt in ein anderes zu kopieren.   
        */

        //Kopieren von Objekteigenschaften
        const person = { name: 'John', age: 25 };
        const details = {...person, email: 'john@beispiel.com'};

        console.log(details);
        // Ausgabe: {name: 'John', age: 25, email: 'john@beispiel.com'}