Console.log(“Pequeno JS”)

Dec 03 2022

Pequenos projetos de javascript para acompanhar os conceitos básicos de JS.

Construir algo sempre aumenta a empolgação do desenvolvedor novato dentro de nós. Como um novato em desenvolvimento web, sempre quis implementar tudo o que estou aprendendo. Todos nós sempre acabamos ficando com medo depois de ver grandes projetos gigantes de desenvolvedores especializados. Por que não começar com os mais pequenos -

JavaScript é uma linguagem de script que permite criar conteúdo de atualização dinâmica, controlar multimídia, animar imagens e praticamente tudo mais . Para dominar algo, você precisa praticar, para entender os conceitos básicos de JS, aqui estão 4 projetos fáceis para iniciantes -

Emoji Fighter

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. Separação de frutas

Crie uma função que coloque as maçãs na appleShelf e as laranjas na 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. Gerador de senha aleatório

Quando o usuário clica no botão gerar senha, as 2 senhas diferentes são exibidas na tela.

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

Capacidade de definir o comprimento da senha.
Adicionar “copiar para clicar”
Ativar/desativar símbolos e números.

4. Conversor de unidades

Converta números entre unidades métricas/imperiais quando o usuário insere qualquer número e clica no botão converter.

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. Adicione o seu

Animado para ver o que o desenvolvedor novato em você vai inventar. aqui está o link para o meu repositório, adicione suas contribuições ao mesmo