Console.log ("Little JS")

Dec 03 2022

Piccoli progetti javascript per recuperare i concetti base di JS..

Costruire qualcosa fa sempre rimbalzare l'entusiasmo nello sviluppatore noob che risiede dentro di noi. Come principiante nello sviluppo web, ho sempre voluto implementare tutto ciò che sto imparando. Finiamo sempre per spaventarci dopo aver visto grandi progetti giganti di sviluppatori esperti. Perché non iniziare con i più piccoli -

JavaScript è un linguaggio di scripting che ti consente di creare contenuti aggiornati dinamicamente, controllare contenuti multimediali, animare immagini e praticamente tutto il resto . Per padroneggiare qualcosa devi esercitarti, per capire i concetti di base di JS qui ci sono 4 progetti facili per principianti -

Combattente Emoji

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. Ordinamento dei frutti

Crea una funzione che metta le mele nell'appleShelf e le arance nell'orangeShelf.

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. Generatore di password casuali

Quando l'utente fa clic sul pulsante Genera password, sullo schermo vengono visualizzate 2 diverse password.

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()  
}

Possibilità di impostare la lunghezza della password.
Aggiungi "copia per fare clic"
Attiva/disattiva simboli e numeri.

4. Convertitore di unità

Converti i numeri tra unità metriche/imperiali quando l'utente inserisce un numero qualsiasi e fa clic sul pulsante di conversione.

let convertBtn = document.getElementById("convert")
let inputEl = document.getElementById("inputEl")
let val = document.getElementById("val")

const meterToFeet =  3.281
const literToGallon =  0.264
const kiloToPound =  2.204

convert.addEventListener("click", function() {
    let baseValue = inputEl.value
    
    val.textContent = `${baseValue} meter = ${baseValue * meterToFeet} feet` 
})

5. Aggiungi il tuo

Sono entusiasta di vedere cosa ti viene in mente lo sviluppatore principiante che è in te. ecco il link al mio repository aggiungi i tuoi contributi allo stesso