Skip to content

Instantly share code, notes, and snippets.

@crystianleao

crystianleao/index.html

Created October 11, 2013 14:32
Show Gist options
  • Save crystianleao/6935678 to your computer and use it in GitHub Desktop.
Save crystianleao/6935678 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. Crystian Wendel Meneses Leão created this gist Oct 11, 2013.
    79 changes: 79 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,79 @@
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Titulo</title>
    <link rel="stylesheet" type="text/css" href="estilo.css"/>
    <style rel="stylesheet" type="text/css">
    #popup {
    width: 50px;
    height: 50px;
    border: 1px solid red;
    position: fixed;
    top: 10px;
    left: 10px;
    background-color: #CCC;
    }
    </style>
    </head>
    <body>
    <h1>Exercícios</h1>
    <ol>
    <li>Fazer formulário com validação.
    <ol>
    <li>Validar campos textuais para não ficarem vazios.</li>
    <li>Exibir indicação de quais campos precisam de preenchimento no próprio HTML.</li>
    </ol>
    </li>
    <li>Fazer menu pop-up.
    <ol>
    <li>Botão deve ativar menu pop-up.</li>
    <li>Pop-up deve aparecer como uma div na página, e deve ter um botão de "close".</li>
    </ol>
    </li>
    <li>Fazer jogo! Jogo de perseguir o quadrado, que consiste de mostrar um quadrado em uma posicão aleatória da tela, e troca-lo de posição sempre que o usuário clicar nele.
    <ol>
    <li>Pontuação do jogo deve ser mostrada em algum lugar na página, e o usuário ganha mais pontos se clicar no quadrado mais rapidamente.</li>
    <li>Jogo termina depois de o usuário acertar o quadrado 10 vezes.</li>
    </ol>
    </li>
    </ol>

    <h2>Respostas</h2>
    <ol>
    <li><a href="https://gist.github.com/crystianwendel/6934003">https://gist.github.com/crystianwendel/6934003</a></li>
    <li><a href="https://gist.github.com/crystianwendel/6934917">https://gist.github.com/crystianwendel/6934917</a></li>
    <li>Aqui!</li>
    </ol>

    <div id="popup" onclick="randomPosition();">

    </div>


    <script language="javascript">
    function randomPosition() {
    width = window.innerWidth
    height = window.innerHeight

    r = Math.random();
    r = r * (width - 50);
    document.getElementById('popup').style.left = r + 'px';

    r = Math.random();
    r = r * (height - 50);
    document.getElementById('popup').style.top = r + 'px';


    }
    </script>
    </body>
    </html>