Console.log („Little JS“)

Dec 03 2022

Kleine Javascript-Projekte, um sich mit den Grundkonzepten von JS vertraut zu machen.

Etwas zu bauen, bringt immer die Aufregung in den Noob-Entwickler-Resites in uns hoch. Als Neuling in der Webentwicklung wollte ich immer das umsetzen, was ich lerne. Wir alle bekommen am Ende immer Angst, wenn wir große Riesenprojekte von erfahrenen Entwicklern sehen. Warum nicht bei den Kleinen anfangen –

JavaScript ist eine Skriptsprache, mit der Sie sich dynamisch aktualisierende Inhalte erstellen, Multimedia steuern, Bilder animieren und so ziemlich alles andere tun können . Um etwas zu meistern, müssen Sie es üben, um die Grundkonzepte von JS zu verstehen, hier sind 4 einfache, anfängerfreundliche Projekte -

Emoji-Kämpfer

let fighters = ["", "", "","", "", "", "", "", "", "", "", "", "", "","", "", ""]

let stageEl = document.getElementById("stage")
let fightButton = document.getElementById("fightButton")

fightButton.addEventListener("click", function() {
    // Challenge:
    // When the user clicks on the "Pick Fighters" button, pick two random 
    // emoji fighters and display them as i.e. " vs " in the "stage" <div>.
    let randomIndexOne = Math.floor( Math.random() * fighters.length )
    let randomIndexTwo = Math.floor( Math.random() * fighters.length )
    console.log(fighters[randomIndexOne] + " vs " + fighters[randomIndexTwo])
})

2. Obst sortieren

Erstellen Sie eine Funktion, die die Äpfel auf das appleShelf und die Orangen auf das orangeShelf legt.

let fruit = ["", "", "", "", ""]
let appleShelf = document.getElementById("apple-shelf")
let orangeShelf = document.getElementById("orange-shelf")
function sortFruit() {
    for (let i = 0; i < fruit.length; i++) {
        if (fruit[i] === "") {
            appleShelf.textContent += ""
        } else if (fruit[i] === "") {
            orangeShelf.textContent += ""
        }
    }
}

sortFruit()

3. Zufälliger Passwortgenerator

Wenn der Benutzer auf die Schaltfläche „Passwort generieren“ klickt, werden die beiden verschiedenen Passwörter auf dem Bildschirm angezeigt.

const chars = ["A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z","a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z", "0", "1", "2", "3", "4", "5", "6", "7", "8", "9","~","`","!","@","#","$","%","^","&","*","(",")","_","-","+","=","{","[","}","]",",","|",":",";","<",">",".","?",
"/"];


let pass1 = document.getElementById("pass1")
let pass2 = document.getElementById("pass2")

let passLength = 12
function getChar(){
    let rnum = Math.floor(Math.random()*chars.length)
    return chars[rnum]
}

function generatePass(){
    let pass = ""
    for(let i=0;i<passLength;i++){
        pass+=getChar()
    }
    return pass
}

function copyToClipBoard(){
    navigator.clipboard.writeText(generatePass());
}


function generate(){
  pass1.textContent= generatePass()
  pass2.textContent=generatePass()  
}

Möglichkeit, die Passwortlänge festzulegen.
„Copy-to-Click“ hinzufügen
Symbole und Zahlen ein-/ausschalten.

4. Einheitenumrechner

Konvertieren Sie Zahlen zwischen metrischen/imperialen Einheiten, wenn der Benutzer eine beliebige Zahl eingibt und auf die Schaltfläche „Konvertieren“ klickt.