Ако сте начинаещ кодер, който търси прост, но ангажиращ проект, който да добавите към портфолиото си, помислете за създаване на приложение за генериране на цитати/шеги/предсказания.

  1. Нека започнем с HTML за структура и CSS за стилизиране и позициониране:
<div id="container">
    <button id="btn">Let's see what the Universe has prepared for you!</button>

    <p id="show"></p>
</div>
body {
    background-image: url("https://images.unsplash.com/photo-1419242902214-272b3f66ee7a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=913&q=80");
    background-repeat: no-repeat;
    background-size: cover;
}

#container{
    display:flex;
    justify-content: center;
    align-items: center;
    height:70vh;
}
#btn {
    padding: 15px;
    border-radius: 60px;
    border: 3px solid #400D51;
    background-color: antiquewhite;
    color: #400D51;
    font-size: 20px;
    position: fixed;
}
#btn:hover {
    background-color: #400D51;
    color: antiquewhite;
    border: 3px solid antiquewhite;
}

#show {display: none;
margin-top: 400px;
padding: 15px;
    border-radius: 60px;
    border: 3px solid #400D51;
    background-color: antiquewhite;
    color: #400D51;
    font-size: 20px;
}

2. Сега да преминем към JS. Първо трябва да получим достъп до елемента бутон и абзац чрез querySelector:

const btn = document.querySelector (`#btn`);
const par = document.querySelector(`#show`);

3. След това трябва да създадем масив с нашите цитати, вицове или прогнози:

const predictions = [
    `Important news will come very soon.`,
    `A time of doubt and hesitation has come for you. But don't worry - everything will work out!`,
    `You are on the right track! Do not stop!`,
    `Expect a surprise. Very soon!`,
    `You will soon find the lost thing!`,
    `Your wish will come true this week.`
]

4. След това трябва да добавим слушател на събития към елемента бутон с помощта на метода addEventListener. Слушателят на събития е настроен да слуша за събитие „щракване“ върху бутона. Когато се щракне върху бутона, произволна прогноза от масива „предсказания“ се избира с помощта на методите Math.random() и Math.floor(). Math.random()се използва за генериране на произволен индекс в обхвата на масива с прогнози и тъй като индексите на масива трябва да бъдат цели числа, трябва да закръглим произволното число с плаваща запетая надолу до най-близкото цяло число, използвайки Math.floor(). След това избраното предвиждане се показва в елемента на абзаца чрез настройване на свойството му textContent на произволния низ за предвиждане. Свойството style.display на елемента абзац също е настроено на „блокиране“, за да е сигурно, че абзацът е видим.

btn.addEventListener(`click`,()=>{
    let randomPred = predictions[Math.floor(Math.random()*predictions.length)];
    par.style.display = `block`;
    par.textContent = randomPred;
})

Ето как ще изглежда преди да щракнете върху бутона:

И след като щракнете върху бутона:

Създаването на просто приложение за генератор на цитати/шеги/предсказания е забавен и лесен проект, който може да добави стойност към портфолиото ви за кодиране.

Надявам се тази статия да е била полезна.