Console.log("Маленький JS")

Dec 03 2022

Небольшие javascript-проекты, чтобы освоить основные концепции JS.

Создание чего-то всегда вызывает волнение у нуб-разработчиков внутри нас. Будучи новичком в веб-разработке, я всегда хотел реализовать то, что изучаю. Мы все всегда пугаемся, увидев большие гигантские проекты опытных разработчиков. Почему бы не начать с самых маленьких —

JavaScript — это язык сценариев, который позволяет создавать динамически обновляемый контент, управлять мультимедиа, анимировать изображения и многое другое . Чтобы что-то освоить, вам нужно попрактиковаться, чтобы понять основные концепции JS, вот 4 простых проекта для начинающих:

Эмодзи Боец

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. Сортировка фруктов

Создайте функцию, которая помещает яблоки на полку appleShelf, а апельсины — на полку 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. Генератор случайных паролей

Когда пользователь нажимает кнопку «Создать пароль», на экране отображаются 2 разных пароля.

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

Возможность установки длины пароля.
Добавить «копировать по клику»
Включение/выключение символов и цифр.

4. Конвертер единиц измерения

Преобразование чисел между метрическими/имперскими единицами, когда пользователь вводит любое число и нажимает кнопку преобразования.

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. Добавьте свой

Рад видеть, что придумывает начинающий разработчик внутри вас. вот ссылка на мой репозиторий, добавляйте сюда свои вклады