Console.log(“Küçük JS”)

JS'nin temel kavramlarını yakalamak için küçük javascript projeleri..

Bir şeyler inşa etmek, içimizdeki çaylak geliştiricinin heyecanını her zaman yükseltir. Web geliştirmede yeni başlayan biri olarak, her zaman öğrendiğim her şeyi uygulamak istemişimdir. Uzman geliştiricilerin büyük dev projelerini gördükten sonra hepimiz her zaman korkarız. Neden küçüklerle başlamıyorsunuz —

JavaScript , dinamik olarak güncellenen içerik oluşturmanıza, multimedyayı kontrol etmenize, resimleri canlandırmanıza ve hemen hemen her şeye olanak sağlayan bir betik dilidir . Bir şeyde ustalaşmak için pratik yapmanız, JS'nin temel kavramlarını anlamanız için burada 4 kolay başlangıç ​​dostu proje var -

1. Emoji Savaşçısı

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. Meyveleri Ayırma

Elmaları appleShelf'e ve portakalları da orangeShelf'e koyan bir işlev oluşturun.

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. Rastgele şifre oluşturucu

Kullanıcı şifre oluştur düğmesine tıkladığında ekranda 2 farklı şifre görüntülenir.

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

• Parola uzunluğunu ayarlama yeteneği.
• "Tıklamak için kopyala" ekleyin
• Sembolleri ve sayıları açın/kapatın.

4. Birim Dönüştürücü

Kullanıcı herhangi bir sayı girip dönüştür düğmesine tıkladığında sayıları metrik/İngiliz birimleri arasında dönüştürü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. Kendinizinkini ekleyin

İçinizdeki acemi geliştiricinin neler bulduğunu görmek beni heyecanlandırıyor. işte repomun linki siz de katkılarınızı ekleyin

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

Referans ve Kaynaklar —

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