.word-row {
  display: flex;
  justify-content: center;
  margin: 5px;
}

.letter {
  width: 40px;
  height: 40px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin: 2px;
  color: white;
  font-weight: bold;
  font-size: 1.2em;
}

.letter.correct {
  background-color: green;
}

.letter.present {
  background-color: gold;
}

.letter.absent {
  background-color: lightgray;
}

Row.css

import React from "react";
import "./Row.css"

const Row = ({ guess, targetWord }) => {
  const getLetterStatus = (letter, index) => {
    if (letter === targetWord[index]) {
      return "correct";
    } else if (targetWord.includes(letter)) {
      return "present";
    } else {
      return "absent";
    }
  };

  return (
    <div className="word-row">
      {guess.split("").map((letter, index) => (
        <span
          key={index}
          className={`letter ${getLetterStatus(letter, index)}`}
        >
          {letter}
        </span>
      ))}
    </div>
  );
};

export default Row;

Row.jsx

body {
  margin: 0;
  font-family: Arial, sans-serif;
  height: 100vh;
  background: linear-gradient(135deg, #f3e7e9, #e3eeff);
}

.main-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

App.css

import React, { useState } from "react";
import "./App.css";
import Row from "./Row";

const App = () => {
  const targetWord = "REACT";
  const maxAttempts = 6;

  const [guesses, setGuesses] = useState([]);
  const [currentGuess, setCurrentGuess] = useState("");
  const [isGameOver, setIsGameOver] = useState(false);

  const handleInputChange = (event) => {
    setCurrentGuess(event.target.value.toUpperCase());
  };

  const handleGuess = () => {
    if (currentGuess.length !== 5) {
      return;
    }

    const updatedGuesses = [...guesses, currentGuess];
    setGuesses(updatedGuesses);

    if (currentGuess === targetWord || updatedGuesses.length >= maxAttempts) {
      setIsGameOver(true);
    }
  };

  return (
    <div className="main-container">
      <h1>Wordle</h1>
      {guesses.map((guess, index) => (
        <Row key={index} guess={guess} targetWord={targetWord} />
      ))}
      {!isGameOver && (
        <>
          <input
            onChange={handleInputChange}
            maxLength={targetWord.length}
            placeholder="Enter your guess"
          />
          <button onClick={handleGuess}>Guess</button>
        </>
      )}
      {isGameOver && currentGuess !== targetWord && (
        <p>{`Game over! The word was: ${targetWord}`}</p>
      )}
    </div>
  );
};

export default App;


App.jsx

<!doctype html>
<html>
<head>
  <script type="module" src="./index.js"></script>
  <link rel="stylesheet" href="./index.css" />
  <title>Wordle</title>
</head>
<body>
  <div id="root">loading</div>
</body>
</html>

index.html

import React from "react";
import { createRoot } from "react-dom/client";
import App from "./App";

const container = document.getElementById("root");
const root = createRoot(container);
root.render(<App />);

index.jsx

Wordle Clone React project

Srdan Borovic

Erhöhe dein AI-Credits-Guthaben sofort und arbeite ohne Unterbrechungen weiter

AI-Credits aufladen

Vernetze dich mit anderen Lernenden und hol dir Support vom Mimo-Team.

Dein Link zum Zurücksetzen des Passworts ist möglicherweise abgelaufen. Fordere über die Schaltfläche unten einen neuen Link an

Fast geschafft, sieh in deinem Posteingang nach!

Wenn du weiterhin Probleme hast, wende dich an

Mit Google anmelden

Maximal 10 Bilder pro Nachricht mit je 5 MB (JPG, PNG, GIF, WebP)

Bilder hier ablegen

Beim Generieren der Antwort ist ein Fehler aufgetreten. Bitte versuch es noch einmal.

Fehler

Hol dir noch heute deinen persönlichen KI-Coding-Tutor und erhalte sofort Hilfe bei all deinen Fragen.

Nutze die Power von KI

Konfiguriere deine App-Einstellungen inklusive Veröffentlichen, Export und Löschen.

App-Einstellungen

Anleitung

Möchtest du "{domain}" wirklich trennen? Dadurch ist deine App unter dieser Domain nicht mehr erreichbar.

Domain trennen

Verbindung fehlgeschlagen

Eigene Domain

Baue reale Apps, Spiele und Websites. Erstelle in Sekunden einen funktionierenden Prototyp und baue dann in einer KI-gestützten Coding-Umgebung weiter.

Was möchtest du bauen?

Daten aktualisieren

Wird aktualisiert ...

Machine-Logs

Mach ein Upgrade, um deine eigene Domain zu verbinden

Verwandle deinen Code in Sekunden in eine Live-Web-App. Kein Setup und kein Deployment erforderlich.

Sofort live gehen

Exportieren

Lösche deine App und alle Daten dauerhaft

App löschen

Veröffentliche deine App, damit sie öffentlich verfügbar ist

Mach ein Upgrade, um deine App zu veröffentlichen und öffentlich verfügbar zu machen

App veröffentlichen

Heb die Veröffentlichung deiner App auf, damit sie nicht mehr öffentlich zugänglich ist

Veröffentlichung aufheben

Der Text für dieses Element ist dynamisch. Bitte die KI, ihn zu ändern.

Mach ein Upgrade, um die App dauerhaft zu behalten

Der Timer wurde zurückgesetzt!

Mimo arbeitet jetzt autonomer als je zuvor. Beschreibe, was du bauen möchtest - ob App, Tool oder Workflow - und Mimo kümmert sich um Setup, Code und Logik. Es bewertet, prüft sich selbst und iteriert anhand deiner Vorgaben.

Baue mit Mimo

Du kannst weiterhin selbst frei und präzise coden. Wenn du Hilfe brauchst, beantwortet Mimo Fragen, prüft deinen Code und unterstützt dich - ohne Credits zu verbrauchen oder eigenständig Änderungen vorzunehmen.

Hands-on Coden

Jede Aktion von Mimo passt ihre Kosten an die Komplexität an. Kleinere Aktionen benötigen oft nur einen Bruchteil eines Credits, größere etwas mehr. Während des Bauens siehst du jederzeit die Kosten und behältst die volle Kontrolle.

Smartes Pricing

Baue auf Mimo weiter. Alles, was du an Instance liebst, ist jetzt im Build-Tab von Mimo enthalten - inklusive deiner Apps und deines Abos.

Instance ist jetzt Teil von Mimo!

Möchtest du diese Datei wirklich löschen?

Möchtest du diesen Ordner und alles darin wirklich löschen?

Datei löschen

Ordner löschen

Möchtest du diese App wirklich löschen?

"{machineName}" löschen

"{projectName}" löschen

App umbenennen

Möchtest du die Veröffentlichung dieser App wirklich aufheben?

Du hast dein App-Slot-Limit erreicht. Du brauchst mehr Apps? Kontaktiere uns unter

Deine App-Slots sind aufgebraucht

Du hast dein Veröffentlichungs-Limit erreicht. Du möchtest mehr veröffentlichen? Kontaktiere uns unter

Deine Veröffentlichungs-Slots sind aufgebraucht

Machine umbenennen

Projekt umbenennen

Mach ein Upgrade auf {maxPlanTitle}, um {appSlots} App-Slots zu erhalten und weiterzubauen

Mach ein Upgrade auf Max, um mehr Credits zu bekommen und weiterzubauen

Hol dir mehr Credits, um zu bauen, zu experimentieren und zu erstellen

Dir sind die Credits ausgegangen

Mehr Credits freischalten

Mach ein Upgrade, um bis zu drei produktionsreife Apps für echte Nutzer:innen zu veröffentlichen

Vorschau-App

Veröffentlichte App

Bereit, live zu gehen?

browser-output

Sorry, das gesuchte Projekt existiert nicht.

Projekt nicht gefunden

Name

Apps

Wir sind auf ein Problem gestoßen. Bitte versuch es noch einmal.

Veröffentlichung fehlgeschlagen

Veröffentlichung läuft ...

Veröffentliche eine stabile Version, die du mit echten Nutzer:innen teilen kannst

Deine App ist jetzt live und bereit zum Teilen.
Willst du sie zeigen?

Deine App ist live!

Deine App ist jetzt aktualisiert und bereit zum Teilen.
Willst du sie zeigen?

Update veröffentlicht!

Domain kaufen

Express-Server

JavaScript

Python

React-App

React-App mit Router

Statische Website

Schau später noch einmal vorbei und versuch es erneut.

Etwas ist schiefgelaufen.

Dadurch wird deine bisherige Unterhaltung dauerhaft entfernt.

Chat zurücksetzen?

AI-Chat

So bekommst du die Antwort:

Wenn du fortfährst, ersetzen wir deinen Code durch die vorgegebene Lösung

Vorgegebene Lösung verwenden?

Anweisungen

Der gesamte Fortschritt in dieser Sitzung geht verloren

Möchtest du wirklich beenden?

Zusätzliches Feedback geben

Hier findest du deine Anweisungen und Aufgaben.

Bereit zum Start?

Code-Editor

Das ist das API-Client-Fenster, in dem du Anfragen an deine Endpunkte senden kannst.

API-Client

Das ist das Browserfenster, in dem dein Ergebnis angezeigt wird.

Webbrowser

Das ist das Konsolenfenster, in dem deine Logs angezeigt werden.

Konsole

Das ist das Ausgabefenster, in dem dein Abfrageergebnis angezeigt wird.

Abfrageausgabe

Schick deinen Code hier ab. Wenn er korrekt ist, kannst du zur nächsten Lektion gehen.

Abschicken & weiter

Hol dir Hilfe oder stell Fragen, wenn du die Aufgabe nicht lösen kannst.

AI-Tutor

Lies die Anweisungen und starte mit dem Projekt.

Du bist bereit!

Danke, dass du Mimo für alle verbesserst!

Meldung gesendet

Ein Problem melden

Schöpfe dein volles Potenzial mit unserem KI-Tutor aus. Mit Mimo Max bekommst du jederzeit unbegrenzte Hilfe, wenn du sie brauchst.

Level up mit unserem KI-Tutor

Wir haben dein Zertifikat an {email} gesendet

Überprüfe deine E-Mails

Glückwunsch! Dein Zertifikat wurde heruntergeladen

Download erfolgreich

Du hast <bold>#{rank}</bold> von {usersCount} in der {previousLeague}-Liga erreicht und bist in die <bold>{newLeague}-Liga</bold> abgestiegen

Du hast <bold>#{rank}</bold> von {usersCount} in der {previousLeague}-Liga erreicht.

Kannst du dein Ergebnis schlagen und diese Woche in die <bold>{nextLeague}-Liga</bold> aufsteigen?

Du hast <bold>#{rank}</bold> von {usersCount} in der {previousLeague}-Liga erreicht und bist in die <bold>{newLeague}-Liga</bold> aufgestiegen

Du hast <bold>#{rank}</bold> von {usersCount} in der {previousLeague}-Liga erreicht, aber der <bold>Liga-Schutz</bold> hat dich vor dem Abstieg bewahrt

Du hast <bold>#{rank}</bold> von {usersCount} in der <bold>{previousLeague}-Liga</bold> erreicht

Du hast den Abschnitt abgeschlossen.

Glückwunsch!

Wir speichern dein Projekt im Build-Tab, damit du jederzeit darauf zugreifen kannst.

Um dein Projekt zu speichern und weiterzubauen, upgrade auf unbegrenzte Projekt-Slots.

Wir konnten dich nicht mit Discord verbinden

Etwas ist schiefgelaufen und das tut uns leid

Bald gibt es neue Live Sessions. Schau in den nächsten Tagen wieder vorbei!

Keine geplanten Sessions

dabei

Voraussetzungen

Mimo Max Live Session

Schließe unter den Top-Platzierungen ab, um in eine höhere Liga aufzusteigen

Erobere deine Liga

Du hast nur begrenzte Zeit, um ganz nach oben zu kommen. Die Ergebnisse stehen bereit, sobald die aktuelle Liga beendet ist.

Die Zeit läuft

Starte deine Coding-Karriere mit Mimo Max!

Verbessere deine Fähigkeiten mit anspruchsvollen Übungen

Problemlösen verbessern

Arbeite mit praxisnahen Coding-Szenarien, um dein Wissen in praktischen Situationen anzuwenden

Praxisnahe Szenarien

Wiederhole vergangene Themen, um dein Verständnis zu festigen und Wissen langfristig zu behalten

Wiederholen und festigen

Verbessere deine Fähigkeiten mit praktischen Übungen und Projekten. Mache in deinem Lernpfad Fortschritte, um Übungsinhalte freizuschalten.

Schließe unten beliebige Inhalte ab, um Fortschritte zu machen

Dein Übungsfortschritt

Bereit, vom Lernen am Smartphone zum Beherrschen von Fähigkeiten am Computer aufzusteigen wie ein:e echte:r Programmierer:in?

Vollen Zugriff freischalten

Entwickle reale Apps, Spiele und Websites. Erstelle in Sekunden einen funktionsfähigen Prototyp und entwickle in einer KI-gestützten Coding-Umgebung weiter.

Was möchtest du entwickeln?

Sieh dir an, was andere entwickeln

Praxisnahe Projekte, entwickelt mit Mimo

Wir freuen uns, diesen Weg gemeinsam zu gehen!

Dein Upgrade war erfolgreich

Mit deinem neuen Mimo-Max-Abo brauchst du Pro nicht mehr. Gehe in der Google-Play-App zu deinen Abos und wähle Mimo Pro zum Kündigen. In Zukunft kannst du dein Abo im Web in den Einstellungen verwalten.

Mit deinem neuen Mimo-Max-Abo brauchst du Pro nicht mehr. Gehe zu Einstellungen > Tippe auf deinen Namen > Tippe auf Abonnements und wähle Mimo Pro zum Kündigen. In Zukunft kannst du dein Abo im Web in den Einstellungen verwalten.

Kündige dein mobiles Abo

Aufladen erfolgreich

Wiederhole vergangene Themen, um dein Verständnis zu festigen

Mehr üben

Diese Projekte sind optional und beeinflussen deinen Gesamtfortschritt nicht

Du hast alle Lern-Sessions abgeschlossen. Wähle unten ein Kapitel aus der Liste aus, um es zu wiederholen.

Lernen

Üben

Du hast das Projekt dieses Abschnitts erfolgreich abgeschlossen.

Du hast das Erweiterungsprojekt erfolgreich abgeschlossen

Du hast den {part}. Teil des Projekts dieses Abschnitts erfolgreich abgeschlossen.

Abschnittsprojekt

{title}-Projekt

Projektvorschau

Alles, was du für dein nächstes Projekt brauchst

Jetzt: Max freischalten

Erstelle funktionale Apps, Kundenportale, interne Tools, Landingpages und mehr im Chat mit unserer fortgeschrittenen KI