Console.log("Little JS")

Petits projets javascript pour rattraper les concepts de base du JS..

Construire quelque chose fait toujours rebondir l'excitation chez le développeur noob qui réside en nous. En tant que débutant en développement Web, j'ai toujours voulu mettre en œuvre tout ce que j'apprenais. Nous finissons tous toujours par avoir peur après avoir vu de grands projets géants de développeurs experts. Pourquoi ne pas commencer par les plus petits ?

JavaScript est un langage de script qui vous permet de créer du contenu mis à jour dynamiquement, de contrôler le multimédia, d'animer des images et à peu près tout le reste . Pour maîtriser quelque chose dont vous avez besoin pour le pratiquer, pour comprendre les concepts de base de JS, voici 4 projets faciles et conviviaux pour les débutants -

1. Emoji combattant

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. Trier les fruits

Créez une fonction qui place les pommes sur appleShelf et les oranges sur 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. Générateur de mot de passe aléatoire

Lorsque l'utilisateur clique sur le bouton Générer un mot de passe, les 2 mots de passe différents s'affichent à l'écran.

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é de définir la longueur du mot de passe.
• Ajouter "copier pour cliquer"
• Activer/désactiver les symboles et les chiffres.

4. Convertisseur d'unités

Convertissez les nombres entre les unités métriques/impériales lorsque l'utilisateur entre un nombre et clique sur le bouton de conversion.

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. Ajoutez le vôtre

Excité de voir ce que le développeur débutant en vous propose. voici le lien vers mon dépôt ajoutez vos contributions au même

https://github.com/Sapna127/Little-Js

Référence et ressources —

• https://scrimba.com/learn/learnjavascrip
• https://github.com/javascript-tutorial/en.javascript.info
• https://github.com/HariAcidReign/JavaScript-A-Z-Notes