Hast du eine Frage?

How-to: Farb Tool

Willkommen zum How-to: Farb Tool.
Hier lernst du, wie du ein Werkzeug programmieren kannst, mit dem du
basierend auf deiner Eingabe eine Farbe, die passend zum Thema ist, generieren lassen kannst.
Du bekommt dabei den CSS Farbname, den du für die Gestaltung deines How-tos nutzen kannst.

Falls du etwas nicht verstehst, nutze den Chatbot auf der rechten Seite.
Kopiere den Teil vom Code, den du erklärt haben möchtest und stelle deine Frage dazu.

Was brauchen wir für das Werkzeug:
→ Ordnerstruktur & Dateien (siehe How to: Basic Setup)
→ OpenAI-API Key (siehe How to: API)
→ Browser (funktioniert am besten mit Chrome)
→ Text-Editor (zb. SublimeText)

HTML index.html

Die index.html beinhaltet u.A.:
→ <h1> Überschrift (optional)
→ <p> Anleitungstext (optional)
→ <input> zum Prompt eingeben und <button> zum Generieren
→ <p> um die Antwort anzeigen zu lassen

1. Öffne die index.html

Du kannst den Code kopieren und in deine Datei einfügen:


                <!DOCTYPE html> 

                <html>

                <head>

                <title>Farbe</title>

                <link rel="stylesheet" type="text/css" href="css/style.css">

                </head>

                <body>

                

                <h1>Color Chat Bot</h1>

                <p>

                Lass dir eine corporate Color generieren. <br>

                Gib das Thema deines how-tos ein. <br>

                Anschließend wird eine passende Farbe generiert. <br>

                </p>

                <input placeholder="Thema eingeben"/>

                <button id="generateButton">Generieren</button>

                <p>Deine Farbe ist:</p> <p id="output"></p>

                

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

                </body>

                </html>

2. Speicher die index.html

CSS style.css

1. Öffne die style.css

Die style.css beinhaltet:
→ *{} Zurücksetzen auf den Default Style
→ h1{}, p{}, input{} basic Styling (optinal)

Du kannst den Code kopieren und in deine style.css Datei einfügen:


                * { 

                margin: 0;

                padding: 0;

                box-sizing: border-box;

                }


                h1, p {

                margin: 20px;

                }


                input {

                margin-left: 20px;

                width: 200px;

                }

2. Speicher die style.css

JS script.js

Die script.js beinhaltet:
→ getMessage(): Ruft generierten Text von einer API ab und fügt sie der Seite hinzu
→generateButton.addEventListener('click', getMessage): Bindet das Klick-Ereignis des "Generate"-Buttons an die getMessage()-Funktion.

1. Öffne die script.js

Du kannst den Code kopieren und in deine script.js Datei einfügen:


            const API_KEY = "DEIN_API_KEY";

            const generateButton = document.querySelector('#generateButton');

            const outputElement = document.querySelector('#output');

            const inputElement = document.querySelector('input');

            const body = document.querySelector('body');

            

            async function getMessage() {

            console.log('clicked');

            const options = {

            method: "POST",

            headers: {

            "Authorization": `Bearer ${API_KEY}`,

            "Content-Type": 'application/json'

            },

            body: JSON.stringify({

            model: "gpt-3.5-turbo",

            messages: [{

            role: "user",

            content: 'My topic is called: "' + inputElement.value + '", I need a color that matches. Answer only with the CSS color name! Your answer should look exactly like this: colorname'

            }],

            max_tokens: 100

            })

            };

            

            try {

            const response = await fetch('https://api.openai.com/v1/chat/completions', options);

            const data = await response.json();

            console.log(data);

            outputElement.textContent = data.choices[0].message.content;

            document.body.style.backgroundColor = outputElement.textContent;

            

            generateButton.textContent = "Generate";

            } catch (error) {

            console.error(error);

            }

            }

            

            generateButton.addEventListener('click', getMessage);

            

            const handleGenerateButtonClick = () => {

            generateButton.textContent = "Loading...";

            getImages();

            };

            

            generateButton.addEventListener('click', handleGenerateButtonClick);

2. Füge deinen API Key in dieses Feld ein: "DEIN_API_KEY"

3. Speicher die script.js