Git Product home page Git Product logo

cefet-web-space's Introduction

cefet-web-space

Uma página espacial.

Atividade

Esta atividade é composta de 2 exercícios.

Exercício 1: expandir/retrair parágrafos

Você deve criar um código em Javascript, no arquivo exercicio1.js, para fazer os botões "+" expadirem ou retrairem o texto dos parágrafos, de acordo com o contexto.

O botão deve expandir ou retrair apenas o parágrafo dentro do qual ele está.

Uma classe CSS .expandido contém as propriedades necessárias para que o parágrafo seja exibido de forma completa. Uma regra para ela já está descrita no arquivo estilos.css da seguinte forma:

p {
  white-space: nowrap;
  height: 1em;
  overflow: hidden;
  text-overflow: ellipsis;
}

p.expandido {
  white-space: normal;
  height: auto;
}

Assim, para que um parágrafo seja completamente mostrado, ele deve possuir a classe .expandido.

Além de expandir/retrair o parágrafo, você deve alternar entre - e + no conteúdo do botão.

Exercício 2: galeria de imagens

Neste exercício você vai criar uma galeria de imagens.

  • Funcionamento:
    • Botões mostram a próxima imagem ou a anterior
    • Quando chegar na última imagem, voltar para a primeira
  • Você pode fazer de pelo menos 2 formas:
    1. Ter apenas uma e trocar o src dela para o da imagem corrente
    2. Ter uma para cada imagem exibidas numa linha e transladar de acordo com a imagem corrente

cefet-web-space's People

Contributors

fegemo avatar victorbalbo avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.