🎖

Projeto - level 7
Para este projeto iremos fazer um gerador de contos, pode ser contos de fadas, histórias de aventura, folclore, lendas urbanas,
enfim, qualquer tipo de história que lhe venha a cabeça. Irá funcionar mais ou menos da seguinte forma:

1. Um usuário seleciona o gênero fictício que quer ter como resposta, como por exemplo Zumbis.

2. Seleciona o acidente que causou a era dos monstros, como por exemplo uma fissura nuclear

3. Seleciona seus instrumentos de aventuras, como por exemplo Varinha Mágica.

4. Diz o nome e o gênero de seu personagem, como por exemplo Otávio, Golfinho.

5. Seleciona o Local em que se passa a história, como por exemplo Disney World.

#DICA:

Sugerimos que deixe o maior número possível de informações dentro de selects, isso irá facilitar sua vida, portanto, no campo de
gênero fictício podemos ter (Zumbis, Orcs, Dragões, Fadas).

O campo do nome deve ser um input, mas somente este precisa necessariamente ser um Input.

O resultado de uma história ser mais ou menos o que segue:

"Era uma vez em lugar chamado Disney World havia lá um habitante que se chamava Otávio, ele era
um golfinho muito alegre, até que foi chegada a era dos Zumbis, que foi causada em 2021 (iremos
utilizar aqui date.getFullYear() para sempre retornar o ano que o usuário se encontra) por uma fissura
nuclear que fazia com que os humanos pertos se tornassem Zumbis, criaturas sem qualquer tipo de
consciência, suas únicas motivações eram comer golfinhos e dançar break. O golfinho se viu
obrigado a aprender técnicas de combate aprimoradas, até que encontrou no Submundo de Disney
World uma varinha mágica, ferramenta que ele utilizou por décadas no combate destes Zumbis, até
que um dia aprendeu uma magia capaz de trazer os Zumbis de volta a sanidade mental, esses por
sua vez não esqueceram como dançar break... Fim".

#DICA:

Utilize switches para criar a história, funciona da seguinte forma:

var place = document.querySelector('#placeSelector').value;

var hPlace;
var strPlaceFull;

switch(place){
case 'Disney World':
hPlace = 'Disney World';
strPlaceFull = 'Submundo de Disney World';
break;
case 'Jundiaí':
hPlace = 'Jundiaí';
strPlaceFull = 'São Camilo, onde nenhum jundiaiense se propõe a chegar'
}

Ao final desta parte você deve ter algo parecido com isso:

Projeto - level 7 1
 Agora vamos imaginar como seria a história caso o usuário tivesse escolhido Jundiaí:

"Era uma vez em lugar chamado Jundiaí havia lá um habitante que se chamava Otávio, ele era um
golfinho muito alegre, até que foi chegada a era dos Zumbis, que foi causada em 2021 (iremos utilizar
aqui date.getFullYear() para sempre retornar o ano que o usuário se encontra) por uma fissura
nuclear que fazia com que os humanos pertos se tornassem Zumbis, criaturas sem qualquer tipo de
consciência, suas únicas motivações eram comer golfinhos e dançar break. O golfinho se viu
obrigado a aprender técnicas de combate aprimoradas, até que encontrou no São Camilo, onde
nenhum jundiaiense se propõe a chegar uma varinha mágica, ferramenta que ele utilizou por décadas
no combate destes Zumbis, até que um dia aprendeu uma magia capaz de trazer os Zumbis de volta
a sanidade mental, esses por sua vez não esqueceram como dançar break... Fim".

Neste ponto você já deve ter entendido como funciona o gerador de histórias, temos uma string padrão de história, que é alterada
com variáveis que são incrementadas no texto, em caso de dúvidas, aconselhamos também ver o link que segue:

Gerador de histórias bobas - Aprendendo desenvolvimento web | MDN

Nesta avaliação, você será encarregado de utilizar parte do conhecimento que você adquiriu nos artigos deste
módulo e aplicá-lo para criar um aplicativo divertido que gera histórias bobas aleatórias. Divirta-se! Pré-
requisitos: Antes de tentar esta avaliação, você já deve ter trabalhado com todos os artigos deste módulo.
https://developer.mozilla.org/pt-BR/docs/Learn/JavaScript/First_steps/Silly_story_generator

Condições especiais de Análise:

1. Vamos supor que o usuário tenha escolhido Zumbis, neste caso a imagem de fundo deve ser de Zumbis, porém, deverá haver
uma nova imagem a cada 5 segundos sobre Zumbis.
#DICA:
Crie um Array images vazio;

Dentro do case 'zumbis' de um push certa quantidade de URLs referentes a Zumbis dentro do array;

switch (valueMonsterType) {
case 'zumbis':
monsterTypeCase = 'Zumbis'
randomMovesCase = randomMoves[random];
backImages.push('https://i.pinimg.com/originals/66/b7/b5/66b7b54bc106aa6f64a436b99121a877.jpg')
backImages.push('https://s1.1zoom.me/b5050/117/342078-blackangel_1920x1080.jpg');
backImages.push('https://i.pinimg.com/originals/eb/21/37/eb213700250bfa06ffecc1adc782ae50.jpg');
backImages.push('https://acrediteounao.com/wp-content/uploads/2017/01/resident-evil-wallpaper-zombie-images-1920x1080.jpg');
break;

Projeto - level 7 2
 ...
}

Faça uma função temporizadora para trocar o background do body a cada determinados segundos baseado naquele array
(const random = Math.floor(Math.random * imagesArray.length));

function changeBG(){
var randomBack = Math.floor(Math.random() * backImages.length);
if(randomBack == 0){
randomBack = 1;
}
document.body.style.backgroundImage = `url('${backImages[randomBack]}')`;
}

2. A História deve ser escrita letra por letra, como se fosse uma daquelas máquinas antigas de escrever.

#DICA:

utilize keyframes para isto, que são funções de animação.

Se tiver dúvidas sobre como realizar esta parte, sugerimos que veja os seguintes links e opte por qual prefere, nós
particularmente da iv2 achamos o do JavaScript de mais fácil execução:

How To Create a Typing Effect

var i = 0;var txt = 'Lorem ipsum typing effect!'; /* The text */var speed = 50; /* The speed/duration of the
effect in milliseconds */ function typeWriter() { if (i < txt.length) {
document.getElementById("demo").innerHTML += txt.charAt(i); i++; setTimeout(typeWriter, speed); }}
https://www.w3schools.com/howto/howto_js_typewriter.asp

Typewriter Effect
typewriter h1 { overflow: hidden; /* Ensures the content is not revealed until the animation */ border-right:
.15em solid orange; /* The typwriter cursor */ white-space: nowrap; /* Keeps the content on a single line */
margin: 0 auto; /* Gives that scrolling effect as the typing happens */ letter-spacing:
https://css-tricks.com/snippets/css/typewriter-effect/

Ao final do Projeto queremos ver algo mais ou menos assim:

Projeto - level 7 3
 Notem que Background está mudando com o tempo, e que o textos está sendo escrito aos poucos...
Para este projeto é isso, capriche na história, pode ser adicionado coisas que não falamos, mas é essencial ter os 6 tópicos que
apresentamos.
Padrões extra de Análise:

HTML e CSS em harmônia.

Função de mudança de background funcionando corretamente e com uso de funções temporizadoras.

Se uma imagem vier em branco ou sem resposta será desagregado da nota final.

Projeto - level 7 4