search

gabrieldarezzo / helpjs-ravi

Exercícios/Tutorial/Desafios para Iniciantes em JavaScript
1.38k stars 192 forks source link

Question 39, 40 #10

Closed elvissouza closed 5 years ago

elvissouza commented 5 years ago

Tem como dá alguma ajuda?

let listElement = document.querySelector('#app ul');
let inputElement = document.querySelector('#app input');
let buttonElement = document.querySelector('#app button');

let todos = ['Fazer Café'];

renderTodos = () => {
    listElement.innerHTML = '';
    for(todo of todos){
        let todoElement = document.createElement('li');
        let todoText = document.createTextNode(todo);
        todoElement.appendChild(todoText);
        listElement.appendChild(todoElement);

    }
}
renderTodos();

addTodo = () => {
    var todoText = inputElement.value;
    if(todoText == 'Coffe'){
        let todoElement = document.createElement('li');
        let todoText = document.createTextNode(todo);
        todoElement.appendChild(todoText);
        listElement.appendChild(todoElement);
        var resul = document.createElement('strong');
        resul.appendChild(document.createTextNode('Coffe'))
        todos.push(resul);
    }else{
        todos.push(todoText);
    }

    inputElement.value = '';
    renderTodos()
}

buttonElement.onclick = addTodo;

Pesquisei muito muito mesmo, mas quando retorno tipo a comparação ( se tiver coffe, volta o texto em negrito). Já coloquei o bold() mas ai volta exemplo: <'b>coffe</b'> (ignora os ' no b)

elvissouza commented 5 years ago

Tem alguma aula, exemplo, algo? ( gosto de finalizar as coisas, ai to me matando pra concluir kk)

gabrieldarezzo commented 5 years ago

Não se se rola ver, mas vou fazer um exemplo aqui: https://www.twitch.tv/gabrieldarezzo

gabrieldarezzo commented 5 years ago

Segue o exemplo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

    <!--
    (39) Crie um campo texto no html 
    que armazena o conteúdo em um array 
    sempre que você clicar no botão, e
    apresente em uma lista(ul)
    -->

    <p>Frutas:</p>
    <input type="text" name="frutas" id="frutas" />
    <br>
    <button id="add-frutas">Adicionar Frutas</button>

    <ul id="lista-frutas">        
    </ul>
<script>
const btnAddFruta = document.getElementById('add-frutas');
const inputFrutas = document.getElementById('frutas');
const ulFrutas = document.getElementById('lista-frutas');

btnAddFruta.addEventListener('click',() => {
    const valueFrutas = inputFrutas.value;
    if(valueFrutas.trim() == '') {
        alert('Preencha a fruta corretamente');
        return false;
    }

    var no = document.createElement("li");
    no.appendChild(document.createTextNode(valueFrutas));
    ulFrutas.appendChild(no);   
});
</script>

</body>
</html>
gabrieldarezzo commented 5 years ago

Com seu exemplo, consegui esse resultado:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

</head>
<body>

<div id="app">
    <p>Frutas:</p>
    <input type="text" name="frutas" id="frutas" />
    <br>
    <button id="add-frutas">Adicionar Frutas</button>
    <ul id="lista-frutas"> 
</div>

<script>
let listElement = document.querySelector('#app ul');
let inputElement = document.querySelector('#app input');
let buttonElement = document.querySelector('#app button');

let todos = ['Fazer Café'];

renderTodos  =() => {
    let listElement = document.querySelector('#app ul');
    listElement.innerHTML = '';
    for(todo of todos){
        let todoElement = document.createElement('li');

        if(todo == 'Coffe') {
            var todoText = document.createElement('strong');
            todoText.appendChild(document.createTextNode('Coffe'))
        } else {
            var todoText = document.createTextNode(todo)
        }

        todoElement.appendChild(todoText);
        listElement.appendChild(todoElement);

    }
}
renderTodos();

// Controlador
addTodo = () => {
    var todoText = inputElement.value;

    todos.push(todoText);
    inputElement.value = '';
    renderTodos()
}

buttonElement.onclick = addTodo;
</script>

</body>
</html>
elvissouza commented 5 years ago

Olá o Urso Corredor como ficou

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Ursinho Flash</title>
    <style type="text/css">
        html, body {
            padding: 0px;
            margin: 0px;
        }
        body {
            width: 100%;

        }
        #ursinhoPuff {
            position:fixed;
            width: 100px;       
        }
    </style>
</head>
<body>

<img src="https://raw.githubusercontent.com/gabrieldarezzo/helpjs-ravi/master/images/chara-1.png" alt="" style="display:none;"/>
<img src="https://raw.githubusercontent.com/gabrieldarezzo/helpjs-ravi/master/images/chara-2.png" alt="" style="display:none;"/>
<img src="https://raw.githubusercontent.com/gabrieldarezzo/helpjs-ravi/master/images/chara-3.png" alt="" style="display:none;"/>

<img id="ursinhoPuff" alt="UrsoPuf" src="https://raw.githubusercontent.com/gabrieldarezzo/helpjs-ravi/master/images/chara-1.png"/>

<script type="text/javascript">
const screenLarge = innerWidth;
var position = 5;
let toper = 0

var animationFrame = 0;

const animationUrsinho = [
    'https://raw.githubusercontent.com/gabrieldarezzo/helpjs-ravi/master/images/chara-1.png',
    'https://raw.githubusercontent.com/gabrieldarezzo/helpjs-ravi/master/images/chara-2.png',
    'https://raw.githubusercontent.com/gabrieldarezzo/helpjs-ravi/master/images/chara-3.png',
];

setInterval( () => {

    if( position > screenLarge ) {
        toper += 40;
        position = 0;
        document.getElementById("ursinhoPuff").style.marginTop = toper + "px";
    }

    document.getElementById("ursinhoPuff").src = animationUrsinho[animationFrame];

    document.getElementById("ursinhoPuff").style.left = position + 'px';

    position +=6;

    animationFrame++;
    if(animationFrame > 2) {
        animationFrame = 0;
    }
}, 1);
</script>
</body>
</html>
gabrieldarezzo commented 5 years ago

40:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

    <!--
    (40) Crie um campo texto no html que armazena o conteúdo em um array sempre que você clicar no botão, e apresente em uma lista(ul) destacando os números pares
    -->

    <p>Números:</p>
    <input type="number" name="frutas" id="frutas" />
    <br>
    <button id="add-numero">Adicionar Número</button>

    <ul id="lista-frutas">        
    </ul>
<script>
const btnAddFruta = document.getElementById('add-numero');
const inputFrutas = document.getElementById('frutas');
const ulFrutas = document.getElementById('lista-frutas');

btnAddFruta.addEventListener('click',() => {
    if(inputFrutas.value.trim() == '') {
        alert('Preencha a fruta corretamente');
        return false;
    }

    const valueNumeros = parseInt(inputFrutas.value);

    if(valueNumeros % 2 == 0) {
        var strongEl = document.createElement('strong');
            strongEl.appendChild(document.createTextNode(valueNumeros))

        var no = document.createElement("li");
        no.appendChild(strongEl);

    } else {
        var no = document.createElement("li");
        no.appendChild(document.createTextNode(valueNumeros));
    }
    ulFrutas.appendChild(no);   
});
</script>

</body>
</html>
elvissouza commented 5 years ago

Obrigado me solucionar isso, como estou começando não sei bem como procurar exemplos ou referencias, fiquei perdido quando me retornou um <b>Coffe</b> ou <strong>Coffe</strong>. Isso que pesquisei muito muito sobre isso kk Vou refazer os dois exercício estudando suas solução, obrigado mesmo .

Sobre a twich irá gravar hoje? se Sim deixará gravada?

gabrieldarezzo commented 5 years ago

Salve, @elvissouza Normal se atrapalhar mano, importante é isso, ir tentando fazer e talz.

A live rolou enquanto fazia pra ti os exemplos: (Fica gravada 14 dias se não me engano) https://www.twitch.tv/videos/501441057

Ps: Muito bom o seu exercício do Urso, ficou show.

elvissouza commented 5 years ago

Obrigado @gabrieldarezzo. Vou assisti-lá amanha, para refazer o exercícios.