Ако сте начинаещ кодер, който търси прост, но ангажиращ проект, който да добавите към портфолиото си, помислете за създаване на приложение за генериране на цитати/шеги/предсказания.
- Нека започнем с 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; })
Ето как ще изглежда преди да щракнете върху бутона:
И след като щракнете върху бутона:
Създаването на просто приложение за генератор на цитати/шеги/предсказания е забавен и лесен проект, който може да добави стойност към портфолиото ви за кодиране.
Надявам се тази статия да е била полезна.