Console.log("Mały JS")

Dec 03 2022

Małe projekty javascript, aby nadrobić zaległości w podstawowych koncepcjach JS..

Budowanie czegoś zawsze wzbudza emocje w noob-developerze, który jest w nas. Jako nowicjusz w tworzeniu stron internetowych zawsze chciałem wdrażać wszystko, czego się uczę. Wszyscy zawsze zaczynamy się bać, widząc duże, gigantyczne projekty doświadczonych programistów. Dlaczego nie zacząć od najmłodszych —

JavaScript to język skryptowy, który umożliwia tworzenie dynamicznie aktualizowanych treści, sterowanie multimediami, animowanie obrazów i praktycznie wszystko inne . Aby coś opanować, musisz to ćwiczyć, aby zrozumieć podstawowe koncepcje JS, oto 4 łatwe projekty przyjazne dla początkujących -

Wojownik 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. Sortowanie owoców

Utwórz funkcję, która umieszcza jabłka na appleShelf, a pomarańcze 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. Generator losowych haseł

Gdy użytkownik kliknie przycisk generowania hasła, na ekranie zostaną wyświetlone 2 różne hasła.

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

Możliwość ustawienia długości hasła.
Dodaj „kopiuj do kliknięcia”
Włącz/wyłącz symbole i cyfry.

4. Konwerter jednostek

Konwertuj liczby między jednostkami metrycznymi/angielskimi, gdy użytkownik wprowadzi dowolną liczbę i kliknie przycisk konwersji.

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. Dodaj swoje

Nie mogę się doczekać, aby zobaczyć, co wymyśli twój początkujący programista. oto link do mojego repozytorium, dodaj swój wkład do tego samego