scrimba
The Weekly Web Dev Challenge
The Weekly Web Dev Challenge: Show your pics! ๐Ÿ“ธ
Go Pro!Bootcamp

Bootcamp

Study group

Collaborate with peers in your dedicated #study-group channel.

Code reviews

Submit projects for review using the /review command in your #code-reviews channel

The Weekly Web Dev Challenge: Show your pics! ๐Ÿ“ธ
AboutCommentsNotes
The Weekly Web Dev Challenge: Show your pics! ๐Ÿ“ธ
Expand for more info
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. -->
Console
/index.html
-1:45