graeme.levack
1/1/2021 - 5:16 PM

lock JS | Project 1 - Expanding cards

This was the files that I created when completing the 50 Projects In 50 Days - HTML, CSS & JavaScript on Udemy.

Note: the css and js files below contain an excessive amount of comments.
This is something you probably wouldn't add to a production website.
I did this to help with my learning, so when I refer back to the code later I can more easily understand the code

index.html
content_copyfile_download
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <link
            rel="stylesheet"
            href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
            integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
            crossorigin="anonymous"
        />
        <title>JS | Project 1 | Expanding Cards</title>
    </head>
    <body>
        <div
            class="panel active"
            style="
                background-image: url('https://images.unsplash.com/photo-1558979158-65a1eaa08691?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80');
            "
        >
            <h3>Explore The World</h3>
        </div>
        <div
            class="panel"
            style="
                background-image: url('https://images.unsplash.com/photo-1572276596237-5db2c3e16c5d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80');
            "
        >
            <h3>Wild Forest</h3>
        </div>
        <div
            class="panel"
            style="
                background-image: url('https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1353&q=80');
            "
        >
            <h3>Sunny Beach</h3>
        </div>
        <div
            class="panel"
            style="
                background-image: url('https://images.unsplash.com/photo-1551009175-8a68da93d5f9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1351&q=80');
            "
        >
            <h3>City on Winter</h3>
        </div>
        <div
            class="panel"
            style="
                background-image: url('https://images.unsplash.com/photo-1549880338-65ddcdfd017b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80');
            "
        >
            <h3>Mountains - Clouds</h3>
        </div>

        <script src="script.js"></script>
    </body>
</html>
style.css
content_copyfile_download
@import url('https://fonts.googleapis.com/css2?family=Muli&display=swap');

/* standard and should always be done */
* {
	box-sizing: border-box;
}

body {
	font-family: 'Muli', sans-serif;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100vh;
	overflow: hidden;
	margin: 0;
}

/* Align the panels to the centre of the page */
.container {
	display: flex; 	/* this puts the panels in a row*/
	width: 90vw;  /* but only 90% of the viewport width */
}

.panel {
	background-size: cover;  /* so you can see all of the image */
	background-position: center;  /* so the image is centered */
	background-repeat: no-repeat;  /* so you only see 1 image taking up the space */
	height: 80vh;  /* but only 80% of the viewport height */
	border-radius: 50px;  /* radius on the corners of the image */
	color: #fff;
	cursor: pointer;  /* becuase they are clickable, we need the finger pointer to show */
	flex: 0.5;  /* the ensures the panels are equal width by default */
	margin: 10px;
	position: relative;  /* this is in preparation to allow us to set the H3 to absolution...that wouldn't work if this wasn't set to relative. */
	transition: flex 0.7s ease-in;  /* when the JS activates this we want to ease across rather than just jump */
}

.panel h3 {
	font-size: 24px;
	position: absolute;  /* this in conjuction with the next 2 lines set the position of the text in the panel */
	bottom: 20px;
	left: 20px;
	margin: 0;
	opacity: 0;  /* whilst this is not the active panel this hides the text */
}

.panel.active {
	flex: 5;  /* this makes the active panel bigger than the default */
} 

.panel.active h3 {
	opacity: 1;  /* when the panel is active panel this shows the text */
	transition: opacity 0.3s ease-in 0.4s;  /* when the JS activates this we want to ease in rather than just jump */
}

@media(max-width: 480px) {
	.container {
		width: 100vw;
	}

	/* this allows us to hide the 4th and 5th panels when the viewport is less than 480px wide ie small screens */
	.panel:nth-of-type(4),
	.panel:nth-of-type(5) {
		display: none;
	}
}
script.js
content_copyfile_download
// first we need to load the DOM objects that we want to interact with
const panels = document.querySelectorAll('.panel')  /* we use querySelectorAll when there are 2 or more objects with the class of panel */

/* this is listening for a click of the mouse on this object in the DOM */
panels.forEach(panel => {
	panel.addEventListener('click', () => {
		removeActiveClasses()  /* this triggers the removeActiveClasses function */
		panel.classList.add('active')  /* this is to change which panel is active */
	})
})

function removeActiveClasses() {
	panels.forEach(panel => {
		panel.classList.remove('active')  /* this is to change which panel is no longer active */
	})
}