Console.log ("Pequeño JS")

Dec 03 2022

Pequeños proyectos de javascript para ponerse al día con los conceptos básicos de JS..

Construir algo siempre despierta la emoción en el desarrollador novato que reside dentro de nosotros. Como novato en desarrollo web, siempre quise implementar todo lo que estaba aprendiendo. Todos siempre terminamos asustados después de ver grandes proyectos gigantes de desarrolladores expertos. ¿Por qué no empezar con los más pequeños?

JavaScript es un lenguaje de secuencias de comandos que le permite crear contenido de actualización dinámica, controlar multimedia, animar imágenes y casi todo lo demás . Para dominar algo necesitas practicarlo, para comprender los conceptos básicos de JS aquí hay 4 proyectos fáciles para principiantes:

luchador 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. Clasificación de frutas

Cree una función que coloque las manzanas en el estante de manzanas y las naranjas en el estante de naranjas.

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. Generador de contraseñas aleatorias

Cuando el usuario hace clic en el botón generar contraseña, se muestran 2 contraseñas diferentes en la pantalla.

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

Posibilidad de establecer la longitud de la contraseña.
Agregar "copiar para hacer clic"
Activa o desactiva símbolos y números.

4. Convertidor de unidades

Convierte números entre unidades métricas/imperiales cuando el usuario ingresa cualquier número y hace clic en el botón de conversión.

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. Agrega el tuyo

Emocionado de ver lo que se le ocurre al desarrollador novato que hay en ti. aquí está el enlace a mi repositorio agrega tus contribuciones al mismo