The Weekly Web Dev Challenge: Show your pics! 📸

scrimba

Watch in fullscreen

by michael r

The Weekly Web Dev Challenge

About

Comments

Notes

The Weekly Web Dev Challenge: Short-Changed 🪙3:50

The Weekly Web Dev Challenge: Show your pics! 📸

by michael r

The Weekly Web Dev Challenge

Expand for more info

The Weekly Web Dev Challenge: Short-Changed 🪙3:50

index.html

run

preview

console

<html>
    <head>
        <link rel="stylesheet" href="index.css">
    </head>
  <body>
    <div class="panels">
      <div class="panel first">
        <p>Panel 1</p>
      </div>
      <div class="panel second">
        <p>Panel 2</p>
      </div>
      <div class="panel third">
        <p>Panel 3</p>
      </div>
    </div>
    <script src="index.js"></script>
  </body>
</html>

<!-- 
DESCRIPTION:

Your challenge is to create a set of responsive panels. 
The user should be able to click on a panel, it should expand 
revealing more info on the subject of the panel. 
When the user clicks on the panel again, it should get back to the original state.

Example gif: 
https://docs.google.com/presentation/d/e/2PACX-1vQabQ1b7iLGqmB_MyTaKl85CSiQVGkrYQviaef03cZZOi59IEwUahS0fDqY0JkoOjY_aaE_PgTlN6_6/pub?start=false&loop=false&delayms=3000

Remember: the panel needs to be responsive.

CSS: 
box-sizing, flex box, flex children, 
transition, text-transform, transform, 
opacity, justfication and alignment 

JS: 
querySelectorAll, classList, addEventListener -->

<!-- 
DETAILED INSTRUCTIONS
1. Choose how many panels you wish to have
2. Style the vertical/horizontal panels, align everything into place
3. Figure out how to expand a panel and transition to a larger size
4. Figure out how to collapse the panel back. -->

<html>

<head>

</head>

<body>

<p>Panel 1</p>

</div>

<p>Panel 2</p>

</div>

<p>Panel 3</p>

</div>

</body>

</html>

<!--

DESCRIPTION:

Your challenge is to create a set of responsive panels.

The user should be able to click on a panel, it should expand

revealing more info on the subject of the panel.

When the user clicks on the panel again, it should get back to the original state.

Example gif:

https://docs.google.

com/presentation/d/e/2PACX-1vQabQ1b7iLGqmB_MyTaKl85CSiQVGkrYQviaef03cZZOi59IEwUahS0fDqY0JkoOjY_aaE_P

gTlN6_6/pub?start=false&loop=false&delayms=3000

Remember: the panel needs to be responsive.

CSS:

box-sizing, flex box, flex children,

transition, text-transform, transform,

opacity, justfication and alignment

JS:

querySelectorAll, classList, addEventListener -->

<!--

DETAILED INSTRUCTIONS

1. Choose how many panels you wish to have

2. Style the vertical/horizontal panels, align everything into place

3. Figure out how to expand a panel and transition to a larger size

-1:45