We Keep Coding

Navigation bar with drop-down menu is not sticky-ing

The navigation menu is not 'freezing' to the top of the page while I scroll sticky this navigation menu at the top of the page.
let nav_toggle = document.querySelector('.nav_toggle');
let nav_toggle_icon = document.querySelector('.nav_toggle ion-icon');
let nav_menu = document.querySelector('.nav_menu');
nav_toggle.addEventListener('click', () => {
nav_menu.classList.toggle('active');
nav_toggle_icon.setAttribute('name',
nav_menu.classList.contains('active') ? 'close-outline' : 'menu-outline'
);
});
#import url('https://fonts.googleapis.com/css2?family=Inter:wght#400;500&display=swap');
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
list-style-type: none;
}
:root {
--primary: #7F56D9;
--secondary: #F4EBFF;
--text-primary: #101828;
--text-secondary: #667085;
--badge-bg: #ECFDF3;
--badge-text: #027A48;
--white: #fff;
--dropdown-bg: rgb(252, 253, 251);
--shadow: rgba(32, 7, 65, 0.14);
--container: 124rem;
--nav-height: 7rem;
}
html {
font-family: 'Inter', sans-serif;
font-size: 62.5%;
font-style: normal;
}
body {
font-size: 1.6rem;
}
ion-icon {
font-size: 20px;
}
h4 {
font-size: 110%;
font-weight: 300;
}
h3 {
font-size: 130%;
font-weight: 500;
}
a.logo {
color: rgb(9, 2, 114);
font-size: 20px;
font-weight: 500;
}
h4:hover {
color: #eba714;
}
h3:hover {
color: #3d3d3d;
}
.container {
max-width: var(--container);
margin: 0 auto;
padding: 0 1rem;
opacity: 0.98;
position: sticky;
top: 0;
}
.navigation {
display: flex;
align-items: center;
justify-content: space-between;
height: var(--nav-height);
position: relative;
background: var(--white);
}
.nav_list {
display: inline-flex;
gap: 2rem;
align-items: center;
margin: 0 1.5rem;
}
.nav_action {
display: flex;
align-items: center;
gap: 1rem;
}
.nav_link,
.btn {
display: flex;
justify-content: center;
gap: 1rem;
font-weight: 500;
color: var(--text-primary);
}
.btn-primary {
display: inline-flex;
color: var(--white);
background: var(--primary);
font-weight: 500;
padding: 0.6rem 1.5rem;
border-radius: 1.5rem;
}
.nav_toggle {
cursor: pointer;
display: none;
}
.nav_toggle ion-icon {
font-size: 3.5rem;
color: var(--text-primary);
}
.dropdown {
position: absolute;
top: var(--nav-height);
left: 0;
width: 100%;
background: var(--dropdown-bg);
box-shadow: 0rem 0.2rem 0.5rem var(--shadow);
clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
transition: all 0.5s ease-in;
}
.dropdown-inner {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
gap: 1rem;
padding: 2rem;
}
.nav_list_menu:hover ion-icon {
transition: all 0.5s ease-in;
transform: rotate(180deg);
}
.nav_list_menu:hover .dropdown {
clip-path: polygon(0 0, 100% 0, 100% 102%, 0 102%);
}
.item-list {
display: flex;
align-items: center;
gap: 1rem;
margin: 3rem 0;
}
.item-list-info {
position: relative;
width: 100%;
}
.info-badge {
position: absolute;
right: 1rem;
top: 0;
background: var(--badge-bg);
padding: 0.1rem 0.5rem;
border-radius: 1rem;
color: var(--badge-text);
}
#media (max-width:730px) {
.nav_toggle {
display: block;
}
.nav_menu {
position: absolute;
top: var(--nav-height);
left: 0;
width: 100%;
background: var(--dropdown-bg);
display: none;
}
.nav_menu.active {
display: block;
}
.nav_list {
display: block;
margin: 2rem 0;
text-align: center;
}
.nav_link {
padding: 0 2rem;
display: flex;
justify-content: space-between;
}
.dropdown {
top: 0;
position: relative;
clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
box-shadow: none;
height: 0;
text-align: start;
transition: all 0.5s ease-in;
}
.nav_list_menu:hover .dropdown {
height: 100%;
transition: all 0.5s ease-in;
}
}
#media (max-width:365px) {
.logo-img {
width: 10rem;
}
.btn,
.btn-primary {
padding: 0.4rem 1rem;
}
}
<header>
<div class="container">
<nav class="navigation">
<a class="logo"> RA </a>
<li class="nav_list nav_list_menu">
<a href="#!" class="nav_link">
<ion-icon name="menu"></ion-icon>
</a>
<div class="dropdown">
<div class="dropdown-inner">
<div class="dropdown-item">
<h3 class="item-heading">Menu</h3>
<div class="item-list">
<div class="item-list-info">
<h4>Home</h4>
</div>
</div>
<div class="item-list">
<div class="item-list-info">
<h4>About</h4>
</div>
</div>
<div class="item-list">
<div class="item-list-info">
<h4>Blog</h4>
</div>
</div>
<div class="item-list">
<div class="item-list-info">
<h4>Get in touch</h4>
</div>
</div>
</div>
<div class="dropdown-item">
<h3 class="item-heading">Projects</h3>
<div class="item-list">
<div class="item-list-info">
<h4>Carbon Calculator</h4>
</div>
</div>
<div class="item-list">
<div class="item-list-info">
<h4>Price my car</h4>
</div>
</div>
<div class="item-list">
<div class="item-list-info">
<h4>Coffee Finder</h4>
</div>
</div>
<div class="item-list">
<div class="item-list-info">
<h4>Quran Whiteboard</h4>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
I have tried to attach the 'position: sticky;' and the 'top: 0;' to the container, navigation, etc., and to no effect. I am fairly new to JS and just getting back into HTML and CSS, your help would be appreciated, thank you!

Search Bar showing footer when any word is typed in thats not on the product cards

I have implemented a search bar on my website and when a name of a product card is typed in it works. However, if you was to type in a word such as "lol' or any other word that is not included on the product cards the footer begins to show. I'm wanting the footer to stay in its current place which is at the bottom of the page.
I will be uploading code snippets and the files to my server so you can view the entire website and the problems I am experiencing.
I hope all of the information provided shows the problem I am experiencing.
[Click the product page to see the problem I am experiencing or click run snippet below][1]
[1]: https://kipplo.co.uk/kipplov2
// JavaScript code
function search_products() {
let input = document.getElementById('searchbar').value
input=input.toLowerCase();
let x = document.getElementsByClassName('products');
for (i = 0; i < x.length; i++) {
if (!x[i].innerHTML.toLowerCase().includes(input)) {
x[i].style.display="none";
}
else {
x[i].style.display="list-item";
}
}
}
body {
background-color: black;
}
* {
font-family: Verdana;
}
/* Announcment bar */
.alert {
padding: 20px;
background-color: #2a7a85;
color: white;
}
.alertcontainer {
display: flex;
flex-direction: column;
height:100vh;
}
.closebtn {
margin-left: 15px;
color: white;
font-weight: bold;
float: right;
font-size: 22px;
line-height: 20px;
cursor: pointer;
transition: 0.3s;
}
.closebtn:hover {
color: black;
}
body {
margin: 0;
}
/* Navigation bar */
ul.topnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: rgb(248, 248, 248);
}
ul.topnav li {
float: left;
}
ul.topnav li a {
display: block;
color: black;
text-align: center;
font-weight: bold;
padding: 25px 32px;
text-decoration: none;
}
ul.topnav li a:hover:not(.active) {
background-color: rgb(139, 185, 255);
}
ul.topnav li a.active {
background-color: #0cc0d8;
}
ul.topnav li.right {
float: right;
}
#media screen and (max-width: 600px) {
ul.topnav li.right,
ul.topnav li {
float: none;
}
}
/* On smaller screens, decrease text size */
#media only screen and (max-width: 300px) {
.text {
font-size: 11px;
}
}
/* Homepage button */
.glow-on-hover {
width: 220px;
height: 35px;
border: none;
outline: none;
color: rgb(0, 0, 0);
font-weight: bold;
font-size: 20px;
background: #111;
cursor: pointer;
position: relative;
z-index: 0;
border-radius: 10px;
}
.glow-on-hover:before {
content: "";
background: linear-gradient(
45deg,
#ff0000,
#ff7300,
#fffb00,
#48ff00,
#00ffd5,
#002bff,
#7a00ff,
#ff00c8,
#ff0000
);
position: absolute;
top: -2px;
left: -2px;
background-size: 400%;
z-index: -1;
filter: blur(5px);
width: calc(100% + 4px);
height: calc(100% + 4px);
animation: glowing 20s linear infinite;
opacity: 0;
transition: opacity 0.3s ease-in-out;
border-radius: 10px;
}
.glow-on-hover:active {
color: #000;
}
.glow-on-hover:active:after {
background: transparent;
}
.glow-on-hover:hover:before {
opacity: 1;
}
.glow-on-hover:after {
z-index: -1;
content: "";
position: absolute;
width: 100%;
height: 100%;
background: rgb(11, 78, 223);
left: 0;
top: 0;
border-radius: 10px;
}
#keyframes glowing {
0% {
background-position: 0 0;
}
50% {
background-position: 400% 0;
}
100% {
background-position: 0 0;
}
}
/* kipplo heading on homepage */
h1 {
font-size: 10vw;
margin: 0;
padding: 0;
color: blue;
word-wrap: break-word;
text-align: center;
}
/* for the heading and the button alignment*/
.btn-centering {
flex-grow: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
/* product cards*/
h3 {
text-align: center;
font-size: 30px;
margin: 0;
padding-top: 10px;
}
a {
text-decoration: none;
}
.gallery {
display: flex;
flex-wrap: wrap;
width: 100%;
justify-content: center;
align-items: center;
margin: 50px 0;
}
.content {
width: 24%;
margin: 15px;
box-sizing: border-box;
float: left;
text-align: center;
border-radius: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
padding-top: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
transition: 0.4s;
background-color: whitesmoke;
}
.content:hover {
box-shadow: 0 0 11px rgb(0, 217, 255);
transform: translate(0px, -8px);
transition: 0.6s;
}
.productcard-image {
width: 200px;
height: 200px;
text-align: center;
margin: 0 auto;
display: block;
}
p {
text-align: center;
color: #b2bec3;
padding: 0 8px;
}
h6 {
font-size: 26px;
text-align: center;
color: #222f3e;
margin: 0;
}
.product-card {
list-style-type: none;
display: flex;
justify-content: center;
align-items: center;
padding: 0px;
}
.productcard-list {
padding: 5px;
}
.fa {
color: #ff9f43;
font-size: 26px;
transition: 0.4s;
}
.fa:hover {
transform: scale(1.3);
transition: 0.6s;
}
.productcardbutton {
text-align: center;
font-size: 24px;
color: #fff;
width: 100%;
padding: 15px;
border: 0px;
outline: none;
cursor: pointer;
margin-top: 5px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}
.buy-1 {
background-color: #2183a2;
}
.buy-2 {
background-color: #3b3e6e;
}
.buy-3 {
background-color: #0b0b0b;
}
#media (max-width: 1000px) {
.content {
width: 46%;
}
}
#media (max-width: 750px) {
.content {
width: 100%;
}
}
/* Footer */
.footer__container {
background-color: #141414;
padding: 5rem 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#footer__logo {
color: #fff;
display: flex;
align-items: center;
cursor: pointer;
text-decoration: none;
font-size: 2rem;
}
.footer__links {
width: 100%;
max-width: 1000px;
display: flex;
justify-content: center;
}
.footer__link--wrapper {
display: flex;
}
.footer__link--items {
display: flex;
flex-direction: column;
align-items: flex-start;
margin: 16px;
text-align: left;
width: 160px;
box-sizing: border-box;
}
.footer__link--items h2 {
margin-bottom: 16px;
}
.footer__link--items > h2 {
color: #fff;
}
.footer__link--items a {
color: #fff;
text-decoration: none;
margin-bottom: 0.5rem;
}
.footer__link--items a:hover {
color: #e9e9e9;
transition: 0.3s ease-out;
}
/* Social Icons */
.social__icon--link {
color: #fff;
font-size: 24px;
}
.social__media {
max-width: 1000px;
width: 100%;
}
.social__media--wrap {
display: flex;
justify-content: space-between;
align-items: center;
width: 90%;
max-width: 1000px;
margin: 40px auto 0 auto;
}
.website__rights {
color: #fff;
}
#media screen and (max-width: 820px) {
.footer__links {
padding-top: 2rem;
}
#footer__logo {
margin-bottom: 2rem;
}
.website__rights {
padding: 2rem;
}
.footer__link--wrapper {
flex-direction: column;
}
.social__media--wrap {
flex-direction: column;
}
}
#media screen and (max-width: 480px) {
.footer__link--items {
margin: 0;
padding: 10px;
width: 100%;
}
}
/* Text above the form*/
.boxed {
box-shadow: 0 0 15px rgb(24, 143, 190);
border-radius: 15px;
text-align:center;
padding: 4%;
margin: 10vh;
font-size:20px;
color:#00ffd5;
}
/* Feedback form*/
.form1 {
display: flex;
flex-direction: column;
align-items: center;
width: 500px;
margin: 15vh auto;
height: auto;
border-radius: 15px;
border: none;
box-shadow: 0 0 15px rgb(24, 143, 190);
}
form {
display: flex;
flex-direction: column;
align-items: center;
width: 90%;
}
input {
width: 100%;
margin: 5px 0;
height: 35px;
font-size: 17px;
text-align: center;
outline: none;
border-radius: 15px;
border: none;
background: rgb(235, 228, 228);
}
textarea {
width: 100%;
margin: 5px 0;
font-size: 17px;
text-align: center;
outline: none;
border-radius: 15px;
border: none;
background: rgb(235, 228, 228);
}
input[type="submit"] {
margin: 10px auto;
width: 120px;
background: rgb(24, 143, 190);
color: white;
cursor: pointer;
}
input[type="submit"]:hover {
background: rgb(19, 41, 238);
}
#media screen and (max-width: 600px) {
.form1 {
width: 90%;
height: auto;
}
}
h2 {
color: #00ffd5;
font-size: 30px;
}
p4 {
color: #00ffd5;
font-size: 20px;
}
/* Scroll bar */
::-webkit-scrollbar {
background: transparent;
width: 7px;
}
::-webkit-scrollbar-thumb {
background: #606060;
border-radius: 100px;
}
/* search bar */
#searchbar{
margin-left: 15%;
padding:15px;
border-radius: 10px;
}
input[type=text] {
width: 30%;
-webkit-transition: width 0.15s ease-in-out;
transition: width 0.15s ease-in-out;
}
/* When the input field gets focus,
change its width to 100% */
input[type=text]:focus {
width: 70%;
}
#list{
font-size: 1.5em;
margin-left: 90px;
}
.products{
display: list-item;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="styles.css">
<title>Products</title>
<style>
p1 {
color: whitesmoke;
}
</style>
</head>
<body>
<!-- Alert Bar -->
<div class="alert">
<span class="closebtn" onclick="this.parentElement.style.display='none';">×</span>
<center><strong>DEALS NOW ON!</strong> Upto 30% discounts this christmas
</center></div>
<!-- Navigation bar -->
<ul class="topnav">
<li><img src="img/logo.png">
<div>
<li>Home</li>
<li><a class="active" href="products.html">Products</a></li>
<li>Contact Us</li>
<li>About Us</li>
</ul>
</div>
<!-- input tag copy this-->
<input id="searchbar" onkeyup="search_products()" type="text"
name="search" placeholder="Search Products..">
<!-- Product Card -->
<div class="gallery">
<div class="content products">
<img src="shoes.png" class="productcard-image">
<h3>Product 1</h3>
<p3>Test product line</p3>
<h6>£100</h6>
<ul class="product-card">
<li class="productcard-list">
<li> <i class="fa fa-star" aria-hidden="true"></i></li>
<li> <i class="fa fa-star" aria-hidden="true"></i></li>
<li><i class="fa fa-star" aria-hidden="true"></i></li>
<li><i class="fa fa-star" aria-hidden="true"></i></li>
<li></li> <i class="fa fa-star" aria-hidden="true"></i></li>
</ul>
<button class="buy-1 productcardbutton" onclick="location.href='https://buy.stripe.com/test_00g7tvcTneaigM07st'">Buy Now</button>
</div>
<div class="content products">
<img src="earphone.png" class="productcard-image">
<h3>Product 2</h3>
<p3>Test product line</p3>
<h6>£40.00</h6>
<ul class="product-card">
<li class="productcard-list">
<li> <i class="fa fa-star" aria-hidden="true"></i></li>
<li><i class="fa fa-star" aria-hidden="true"></i></li>
<li><i class="fa fa-star" aria-hidden="true"></i></li>
<li><i class="fa fa-star" aria-hidden="true"></i></li>
<li><i class="fa fa-star" aria-hidden="true"></i></li>
</ul>
<button class="buy-2 productcardbutton" onclick="location.href='https://buy.stripe.com/test_00g7tvcTneaigM07st'">Buy Now</button>
</div>
<div class="content products">
<img src="watch.png" class="productcard-image">
<h3>Product 3</h3>
<p3>Test product line</p2>
<h6>£70</h6>
<ul class="product-card">
<li class="productcard-list">
<li> <i class="fa fa-star" aria-hidden="false"></i></li>
<li> <i class="fa fa-star" aria-hidden="true"></i></li>
<li> <i class="fa fa-star" aria-hidden="true"></i></li>
<li></li><i class="fa fa-star" aria-hidden="true"></i></li>
<li> <i class="fa fa-star" aria-hidden="true"></i></li>
</ul>
<button class="buy-3 productcardbutton" onclick="location.href='https://buy.stripe.com/test_00g7tvcTneaigM07st'">Buy Now</button>
<script src="products.js"></script>
</div>
</div>
<!-- Footer -->
<div class="footer__container">
<div class="footer__links">
<div class="footer__link--wrapper">
<div class="footer__link--items">
About Us
</div>
<div class="footer__link--items">
Contact Us
</div>
</div>
<div class="footer__link--wrapper">
<div class="footer__link--items">
Youtube
</div>
<div class="footer__link--items">
TikTok
</div>
</div>
</div>
<section class="social__media">
<div class="social__media--wrap">
<div class="footer__logo">
<!-- Kipplo Footer Logo -->
<a href="index.html">
<img src="img/logo2.png" id="footer__logo" ></a>
</div>
<!-- Creative Commmons Logo -->
<a href="https://creativecommons.org/licenses/by-nc-nd/4.0/legalcode">
<img src="img/88x31.png" id="footer__logo"></a>
<p class="website__rights">
Creative Commons - KIPPLO.CO.UK 2022.</p>
</div>
</div>
</section>
</div>
</body>
</html>

I would just wrap it with id or class and set it min-height:100vh;. Its the easiest way, not the cleanest code. Hope it helped!
// JavaScript code
function search_products() {
let input = document.getElementById('searchbar').value
input=input.toLowerCase();
let x = document.getElementsByClassName('products');
for (i = 0; i < x.length; i++) {
if (!x[i].innerHTML.toLowerCase().includes(input)) {
x[i].style.display="none";
}
else {
x[i].style.display="list-item";
}
}
}
body {
background-color: black;
}
* {
font-family: Verdana;
}
.wrap-nav-and-main {
min-height: 100vh;
}
/* Announcment bar */
.alert {
padding: 20px;
background-color: #2a7a85;
color: white;
}
.alertcontainer {
display: flex;
flex-direction: column;
height:100vh;
}
.closebtn {
margin-left: 15px;
color: white;
font-weight: bold;
float: right;
font-size: 22px;
line-height: 20px;
cursor: pointer;
transition: 0.3s;
}
.closebtn:hover {
color: black;
}
body {
margin: 0;
}
/* Navigation bar */
ul.topnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: rgb(248, 248, 248);
}
ul.topnav li {
float: left;
}
ul.topnav li a {
display: block;
color: black;
text-align: center;
font-weight: bold;
padding: 25px 32px;
text-decoration: none;
}
ul.topnav li a:hover:not(.active) {
background-color: rgb(139, 185, 255);
}
ul.topnav li a.active {
background-color: #0cc0d8;
}
ul.topnav li.right {
float: right;
}
#media screen and (max-width: 600px) {
ul.topnav li.right,
ul.topnav li {
float: none;
}
}
/* On smaller screens, decrease text size */
#media only screen and (max-width: 300px) {
.text {
font-size: 11px;
}
}
/* Homepage button */
.glow-on-hover {
width: 220px;
height: 35px;
border: none;
outline: none;
color: rgb(0, 0, 0);
font-weight: bold;
font-size: 20px;
background: #111;
cursor: pointer;
position: relative;
z-index: 0;
border-radius: 10px;
}
.glow-on-hover:before {
content: "";
background: linear-gradient(
45deg,
#ff0000,
#ff7300,
#fffb00,
#48ff00,
#00ffd5,
#002bff,
#7a00ff,
#ff00c8,
#ff0000
);
position: absolute;
top: -2px;
left: -2px;
background-size: 400%;
z-index: -1;
filter: blur(5px);
width: calc(100% + 4px);
height: calc(100% + 4px);
animation: glowing 20s linear infinite;
opacity: 0;
transition: opacity 0.3s ease-in-out;
border-radius: 10px;
}
.glow-on-hover:active {
color: #000;
}
.glow-on-hover:active:after {
background: transparent;
}
.glow-on-hover:hover:before {
opacity: 1;
}
.glow-on-hover:after {
z-index: -1;
content: "";
position: absolute;
width: 100%;
height: 100%;
background: rgb(11, 78, 223);
left: 0;
top: 0;
border-radius: 10px;
}
#keyframes glowing {
0% {
background-position: 0 0;
}
50% {
background-position: 400% 0;
}
100% {
background-position: 0 0;
}
}
/* kipplo heading on homepage */
h1 {
font-size: 10vw;
margin: 0;
padding: 0;
color: blue;
word-wrap: break-word;
text-align: center;
}
/* for the heading and the button alignment*/
.btn-centering {
flex-grow: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
/* product cards*/
h3 {
text-align: center;
font-size: 30px;
margin: 0;
padding-top: 10px;
}
a {
text-decoration: none;
}
.gallery {
display: flex;
flex-wrap: wrap;
width: 100%;
justify-content: center;
align-items: center;
margin: 50px 0;
}
.content {
width: 24%;
margin: 15px;
box-sizing: border-box;
float: left;
text-align: center;
border-radius: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
padding-top: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
transition: 0.4s;
background-color: whitesmoke;
}
.content:hover {
box-shadow: 0 0 11px rgb(0, 217, 255);
transform: translate(0px, -8px);
transition: 0.6s;
}
.productcard-image {
width: 200px;
height: 200px;
text-align: center;
margin: 0 auto;
display: block;
}
p {
text-align: center;
color: #b2bec3;
padding: 0 8px;
}
h6 {
font-size: 26px;
text-align: center;
color: #222f3e;
margin: 0;
}
.product-card {
list-style-type: none;
display: flex;
justify-content: center;
align-items: center;
padding: 0px;
}
.productcard-list {
padding: 5px;
}
.fa {
color: #ff9f43;
font-size: 26px;
transition: 0.4s;
}
.fa:hover {
transform: scale(1.3);
transition: 0.6s;
}
.productcardbutton {
text-align: center;
font-size: 24px;
color: #fff;
width: 100%;
padding: 15px;
border: 0px;
outline: none;
cursor: pointer;
margin-top: 5px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}
.buy-1 {
background-color: #2183a2;
}
.buy-2 {
background-color: #3b3e6e;
}
.buy-3 {
background-color: #0b0b0b;
}
#media (max-width: 1000px) {
.content {
width: 46%;
}
}
#media (max-width: 750px) {
.content {
width: 100%;
}
}
/* Footer */
.footer__container {
background-color: #141414;
padding: 5rem 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#footer__logo {
color: #fff;
display: flex;
align-items: center;
cursor: pointer;
text-decoration: none;
font-size: 2rem;
}
.footer__links {
width: 100%;
max-width: 1000px;
display: flex;
justify-content: center;
}
.footer__link--wrapper {
display: flex;
}
.footer__link--items {
display: flex;
flex-direction: column;
align-items: flex-start;
margin: 16px;
text-align: left;
width: 160px;
box-sizing: border-box;
}
.footer__link--items h2 {
margin-bottom: 16px;
}
.footer__link--items > h2 {
color: #fff;
}
.footer__link--items a {
color: #fff;
text-decoration: none;
margin-bottom: 0.5rem;
}
.footer__link--items a:hover {
color: #e9e9e9;
transition: 0.3s ease-out;
}
/* Social Icons */
.social__icon--link {
color: #fff;
font-size: 24px;
}
.social__media {
max-width: 1000px;
width: 100%;
}
.social__media--wrap {
display: flex;
justify-content: space-between;
align-items: center;
width: 90%;
max-width: 1000px;
margin: 40px auto 0 auto;
}
.website__rights {
color: #fff;
}
#media screen and (max-width: 820px) {
.footer__links {
padding-top: 2rem;
}
#footer__logo {
margin-bottom: 2rem;
}
.website__rights {
padding: 2rem;
}
.footer__link--wrapper {
flex-direction: column;
}
.social__media--wrap {
flex-direction: column;
}
}
#media screen and (max-width: 480px) {
.footer__link--items {
margin: 0;
padding: 10px;
width: 100%;
}
}
/* Text above the form*/
.boxed {
box-shadow: 0 0 15px rgb(24, 143, 190);
border-radius: 15px;
text-align:center;
padding: 4%;
margin: 10vh;
font-size:20px;
color:#00ffd5;
}
/* Feedback form*/
.form1 {
display: flex;
flex-direction: column;
align-items: center;
width: 500px;
margin: 15vh auto;
height: auto;
border-radius: 15px;
border: none;
box-shadow: 0 0 15px rgb(24, 143, 190);
}
form {
display: flex;
flex-direction: column;
align-items: center;
width: 90%;
}
input {
width: 100%;
margin: 5px 0;
height: 35px;
font-size: 17px;
text-align: center;
outline: none;
border-radius: 15px;
border: none;
background: rgb(235, 228, 228);
}
textarea {
width: 100%;
margin: 5px 0;
font-size: 17px;
text-align: center;
outline: none;
border-radius: 15px;
border: none;
background: rgb(235, 228, 228);
}
input[type="submit"] {
margin: 10px auto;
width: 120px;
background: rgb(24, 143, 190);
color: white;
cursor: pointer;
}
input[type="submit"]:hover {
background: rgb(19, 41, 238);
}
#media screen and (max-width: 600px) {
.form1 {
width: 90%;
height: auto;
}
}
h2 {
color: #00ffd5;
font-size: 30px;
}
p4 {
color: #00ffd5;
font-size: 20px;
}
/* Scroll bar */
::-webkit-scrollbar {
background: transparent;
width: 7px;
}
::-webkit-scrollbar-thumb {
background: #606060;
border-radius: 100px;
}
/* search bar */
#searchbar{
margin-left: 15%;
padding:15px;
border-radius: 10px;
}
input[type=text] {
width: 30%;
-webkit-transition: width 0.15s ease-in-out;
transition: width 0.15s ease-in-out;
}
/* When the input field gets focus,
change its width to 100% */
input[type=text]:focus {
width: 70%;
}
#list{
font-size: 1.5em;
margin-left: 90px;
}
.products{
display: list-item;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="styles.css">
<title>Products</title>
<style>
p1 {
color: whitesmoke;
}
</style>
</head>
<body>
<section class="wrap-nav-and-main">
<!-- Alert Bar -->
<div class="alert">
<span class="closebtn" onclick="this.parentElement.style.display='none';">×</span>
<center><strong>DEALS NOW ON!</strong> Upto 30% discounts this christmas
</center></div>
<!-- Navigation bar -->
<ul class="topnav">
<li><img src="img/logo.png">
<div>
<li>Home</li>
<li><a class="active" href="products.html">Products</a></li>
<li>Contact Us</li>
<li>About Us</li>
</ul>
</div>
<!-- input tag copy this-->
<input id="searchbar" onkeyup="search_products()" type="text"
name="search" placeholder="Search Products..">
<!-- Product Card -->
<div class="gallery">
<div class="content products">
<img src="shoes.png" class="productcard-image">
<h3>Product 1</h3>
<p3>Test product line</p3>
<h6>£100</h6>
<ul class="product-card">
<li class="productcard-list">
<li> <i class="fa fa-star" aria-hidden="true"></i></li>
<li> <i class="fa fa-star" aria-hidden="true"></i></li>
<li><i class="fa fa-star" aria-hidden="true"></i></li>
<li><i class="fa fa-star" aria-hidden="true"></i></li>
<li></li> <i class="fa fa-star" aria-hidden="true"></i></li>
</ul>
<button class="buy-1 productcardbutton" onclick="location.href='https://buy.stripe.com/test_00g7tvcTneaigM07st'">Buy Now</button>
</div>
<div class="content products">
<img src="earphone.png" class="productcard-image">
<h3>Product 2</h3>
<p3>Test product line</p3>
<h6>£40.00</h6>
<ul class="product-card">
<li class="productcard-list">
<li> <i class="fa fa-star" aria-hidden="true"></i></li>
<li><i class="fa fa-star" aria-hidden="true"></i></li>
<li><i class="fa fa-star" aria-hidden="true"></i></li>
<li><i class="fa fa-star" aria-hidden="true"></i></li>
<li><i class="fa fa-star" aria-hidden="true"></i></li>
</ul>
<button class="buy-2 productcardbutton" onclick="location.href='https://buy.stripe.com/test_00g7tvcTneaigM07st'">Buy Now</button>
</div>
<div class="content products">
<img src="watch.png" class="productcard-image">
<h3>Product 3</h3>
<p3>Test product line</p2>
<h6>£70</h6>
<ul class="product-card">
<li class="productcard-list">
<li> <i class="fa fa-star" aria-hidden="false"></i></li>
<li> <i class="fa fa-star" aria-hidden="true"></i></li>
<li> <i class="fa fa-star" aria-hidden="true"></i></li>
<li></li><i class="fa fa-star" aria-hidden="true"></i></li>
<li> <i class="fa fa-star" aria-hidden="true"></i></li>
</ul>
<button class="buy-3 productcardbutton" onclick="location.href='https://buy.stripe.com/test_00g7tvcTneaigM07st'">Buy Now</button>
<script src="products.js"></script>
</div>
</div>
</section>
<!-- Footer -->
<div class="footer__container">
<div class="footer__links">
<div class="footer__link--wrapper">
<div class="footer__link--items">
About Us
</div>
<div class="footer__link--items">
Contact Us
</div>
</div>
<div class="footer__link--wrapper">
<div class="footer__link--items">
Youtube
</div>
<div class="footer__link--items">
TikTok
</div>
</div>
</div>
<section class="social__media">
<div class="social__media--wrap">
<div class="footer__logo">
<!-- Kipplo Footer Logo -->
<a href="index.html">
<img src="img/logo2.png" id="footer__logo" ></a>
</div>
<!-- Creative Commmons Logo -->
<a href="https://creativecommons.org/licenses/by-nc-nd/4.0/legalcode">
<img src="img/88x31.png" id="footer__logo"></a>
<p class="website__rights">
Creative Commons - KIPPLO.CO.UK 2022.</p>
</div>
</div>
</section>
</div>
</body>
</html>

Javascript - Calendar Flip animation not working

I am attempting to create a calendar wherein upon clicking a particular date, the calendar should flip over to reveal details of a specific reservation. While the calendar interface appears perfectly on the webpage, the flip animation does not work and I cant seem to figure out why. I must add that I found most of this code on codepen and am modifying it based on my preference. I have attached my code breakdown below. I would greatly appreciate any advice and help. Thanks!:
<script type = "text/javascript">
var app = {
settings: {
container: $(".calendar"),
calendar: $(".front"),
days: $(".weeks span"),
form: $(".back"),
input: $(".back input"),
buttons: $(".back button")
},
init: function () {
instance = this;
settings = this.settings;
this.bindUIActions();
},
swap: function (currentSide, desiredSide) {
settings.container.toggleClass("flip");
currentSide.fadeOut(900);
currentSide.hide();
desiredSide.show();
},
bindUIActions: function () {
settings.days.on("click", function () {
instance.swap(settings.calendar, settings.form);
settings.input.focus();
});
settings.buttons.on("click", function () {
instance.swap(settings.form, settings.calendar);
});
}
};
app.init();
</script>
<style type = "text/css">
* {
box-sizing: border-box;
font-family: "Roboto", sans-serif;
list-style: none;
margin: 0;
outline: none;
padding: 0;
}
a {
text-decoration: none;
}
body,
html {
height: 100%;
}
body {
background: #dfebed;
font-family: "Roboto", sans-serif;
}
.container {
align-items: center;
display: flex;
height: 100%;
justify-content: center;
margin: 0 auto;
max-width: 600px;
width: 100%;
}
.calendar {
background: #2b4450;
border-radius: 4px;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
height: 501px;
perspective: 1000;
transition: 0.9s;
transform-style: preserve-3d;
width: 100%;
}
/* Front - Calendar */
.front {
transform: rotateY(0deg);
}
.current-date {
border-bottom: 1px solid rgba(73, 114, 133, 0.6);
display: flex;
justify-content: space-between;
padding: 30px 40px;
}
.current-date h1 {
color: #dfebed;
font-size: 1.4em;
font-weight: 300;
}
.week-days {
color: #dfebed;
display: flex;
justify-content: space-between;
font-weight: 600;
padding: 30px 40px;
}
.days {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.weeks {
color: #fff;
display: flex;
flex-direction: column;
padding: 0 40px;
}
.weeks div {
display: flex;
font-size: 1.2em;
font-weight: 300;
justify-content: space-between;
margin-bottom: 20px;
width: 100%;
}
.last-month {
opacity: 0.3;
}
.weeks span {
padding: 10px;
}
.weeks span.active {
background: #f78536;
border-radius: 50%;
}
.weeks span:not(.last-month):hover {
cursor: pointer;
font-weight: 600;
}
.event {
position: relative;
}
.event:after {
content: "•";
color: #f78536;
font-size: 1.4em;
position: absolute;
right: -4px;
top: -4px;
}
/* Back - Event form */
.back {
height: 100%;
transform: rotateY(180deg);
}
.back input {
background: none;
border: none;
border-bottom: 1px solid rgba(73, 114, 133, 0.6);
color: #dfebed;
font-size: 1.4em;
font-weight: 300;
padding: 30px 40px;
width: 100%;
}
.info {
color: #dfebed;
display: flex;
flex-direction: column;
font-weight: 600;
font-size: 1.2em;
padding: 30px 40px;
}
.info div:not(.observations) {
margin-bottom: 40px;
}
.info span {
font-weight: 300;
}
.info .date {
display: flex;
justify-content: space-between;
}
.info .date p {
width: 50%;
}
.info .address p {
width: 100%;
}
.actions {
bottom: 0;
border-top: 1px solid rgba(73, 114, 133, 0.6);
display: flex;
justify-content: space-between;
position: absolute;
width: 100%;
}
.actions button {
background: none;
border: 0;
color: #fff;
font-weight: 600;
letter-spacing: 3px;
margin: 0;
padding: 30px 0;
text-transform: uppercase;
width: 50%;
}
.actions button:first-of-type {
border-right: 1px solid rgba(73, 114, 133, 0.6);
}
.actions button:hover {
background: #497285;
cursor: pointer;
}
.actions button:active {
background: #5889a0;
outline: none;
}
/* Flip animation */
.flip {
transform: rotateY(180deg);
}
.front,
.back {
backface-visibility: hidden;
}
</style>
<link rel = "stylesheet" type = "text/css">
<script type="text/javascript" src="jquery-2.1.4.min.js"></script>
<div class="container">
<div class="calendar">
<div class="front">
<div class="current-date">
<h1>Monday 26th</h1>
<h1>April 2021</h1>
</div>
<div class="current-month">
<ul class="week-days">
<li>MON</li>
<li>TUE</li>
<li>WED</li>
<li>THU</li>
<li>FRI</li>
<li>SAT</li>
<li>SUN</li>
</ul>
<div class="weeks">
<div class="first">
<span class="last-month">28</span>
<span class="last-month">29</span>
<span class="last-month">30</span>
<span class="last-month">31</span>
<span>01</span>
<span>02</span>
<span>03</span>
</div>
<div class="second">
<span>04</span>
<span>05</span>
<span class="event">06</span>
<span>07</span>
<span>08</span>
<span>09</span>
<span>10</span>
</div>
<div class="third">
<span>11</span>
<span>12</span>
<span>13</span>
<span>14</span>
<span class="active">15</span>
<span>16</span>
<span>17</span>
</div>
<div class="fourth">
<span>18</span>
<span>19</span>
<span>20</span>
<span>21</span>
<span>22</span>
<span>23</span>
<span>24</span>
</div>
<div class="fifth">
<span>25</span>
<span>26</span>
<span>27</span>
<span>28</span>
<span>29</span>
<span>30</span>
<span>31</span>
</div>
</div>
</div>
</div>
<div class="back">
<input placeholder="What's the event?">
<div class="info">
<div class="date">
<p class="info-date">
Date: <span>Jan 15th, 2016</span>
</p>
<p class="info-time">
Time: <span>6:35 PM</span>
</p>
</div>
<div class="address">
<p>
Address: <span>129 W 81st St, New York, NY</span>
</p>
</div>
<div class="observations">
<p>
Observations: <span>Be there 15 minutes earlier</span>
</p>
</div>
</div>
<div class="actions">
<button class="save">
Save <i class="ion-checkmark"></i>
</button>
<button class="dismiss">
Dismiss <i class="ion-android-close"></i>
</button>
</div>
</div>
</div>
</div>

Just change the <script> tag as shown below. I added Google CDN for jQuery. Why?
For more about how to load script tags check here
var app = {
settings: {
container: $(".calendar"),
calendar: $(".front"),
days: $(".weeks span"),
form: $(".back"),
input: $(".back input"),
buttons: $(".back button")
},
init: function () {
instance = this;
settings = this.settings;
this.bindUIActions();
},
swap: function (currentSide, desiredSide) {
settings.container.toggleClass("flip");
currentSide.fadeOut(900);
currentSide.hide();
desiredSide.show();
},
bindUIActions: function () {
settings.days.on("click", function () {
instance.swap(settings.calendar, settings.form);
settings.input.focus();
});
settings.buttons.on("click", function () {
instance.swap(settings.form, settings.calendar);
});
}
};
app.init();
* {
box-sizing: border-box;
font-family: "Roboto", sans-serif;
list-style: none;
margin: 0;
outline: none;
padding: 0;
}
a {
text-decoration: none;
}
body,
html {
height: 100%;
}
body {
background: #dfebed;
font-family: "Roboto", sans-serif;
}
.container {
align-items: center;
display: flex;
height: 100%;
justify-content: center;
margin: 0 auto;
max-width: 600px;
width: 100%;
}
.calendar {
background: #2b4450;
border-radius: 4px;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
height: 501px;
perspective: 1000;
transition: 0.9s;
transform-style: preserve-3d;
width: 100%;
}
/* Front - Calendar */
.front {
transform: rotateY(0deg);
}
.current-date {
border-bottom: 1px solid rgba(73, 114, 133, 0.6);
display: flex;
justify-content: space-between;
padding: 30px 40px;
}
.current-date h1 {
color: #dfebed;
font-size: 1.4em;
font-weight: 300;
}
.week-days {
color: #dfebed;
display: flex;
justify-content: space-between;
font-weight: 600;
padding: 30px 40px;
}
.days {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.weeks {
color: #fff;
display: flex;
flex-direction: column;
padding: 0 40px;
}
.weeks div {
display: flex;
font-size: 1.2em;
font-weight: 300;
justify-content: space-between;
margin-bottom: 20px;
width: 100%;
}
.last-month {
opacity: 0.3;
}
.weeks span {
padding: 10px;
}
.weeks span.active {
background: #f78536;
border-radius: 50%;
}
.weeks span:not(.last-month):hover {
cursor: pointer;
font-weight: 600;
}
.event {
position: relative;
}
.event:after {
content: "•";
color: #f78536;
font-size: 1.4em;
position: absolute;
right: -4px;
top: -4px;
}
/* Back - Event form */
.back {
height: 100%;
transform: rotateY(180deg);
}
.back input {
background: none;
border: none;
border-bottom: 1px solid rgba(73, 114, 133, 0.6);
color: #dfebed;
font-size: 1.4em;
font-weight: 300;
padding: 30px 40px;
width: 100%;
}
.info {
color: #dfebed;
display: flex;
flex-direction: column;
font-weight: 600;
font-size: 1.2em;
padding: 30px 40px;
}
.info div:not(.observations) {
margin-bottom: 40px;
}
.info span {
font-weight: 300;
}
.info .date {
display: flex;
justify-content: space-between;
}
.info .date p {
width: 50%;
}
.info .address p {
width: 100%;
}
.actions {
bottom: 0;
border-top: 1px solid rgba(73, 114, 133, 0.6);
display: flex;
justify-content: space-between;
position: absolute;
width: 100%;
}
.actions button {
background: none;
border: 0;
color: #fff;
font-weight: 600;
letter-spacing: 3px;
margin: 0;
padding: 30px 0;
text-transform: uppercase;
width: 50%;
}
.actions button:first-of-type {
border-right: 1px solid rgba(73, 114, 133, 0.6);
}
.actions button:hover {
background: #497285;
cursor: pointer;
}
.actions button:active {
background: #5889a0;
outline: none;
}
/* Flip animation */
.flip {
transform: rotateY(180deg);
}
.front,
.back {
backface-visibility: hidden;
}
</style>
<div class="container">
<div class="calendar">
<div class="front">
<div class="current-date">
<h1>Monday 26th</h1>
<h1>April 2021</h1>
</div>
<div class="current-month">
<ul class="week-days">
<li>MON</li>
<li>TUE</li>
<li>WED</li>
<li>THU</li>
<li>FRI</li>
<li>SAT</li>
<li>SUN</li>
</ul>
<div class="weeks">
<div class="first">
<span class="last-month">28</span>
<span class="last-month">29</span>
<span class="last-month">30</span>
<span class="last-month">31</span>
<span>01</span>
<span>02</span>
<span>03</span>
</div>
<div class="second">
<span>04</span>
<span>05</span>
<span class="event">06</span>
<span>07</span>
<span>08</span>
<span>09</span>
<span>10</span>
</div>
<div class="third">
<span>11</span>
<span>12</span>
<span>13</span>
<span>14</span>
<span class="active">15</span>
<span>16</span>
<span>17</span>
</div>
<div class="fourth">
<span>18</span>
<span>19</span>
<span>20</span>
<span>21</span>
<span>22</span>
<span>23</span>
<span>24</span>
</div>
<div class="fifth">
<span>25</span>
<span>26</span>
<span>27</span>
<span>28</span>
<span>29</span>
<span>30</span>
<span>31</span>
</div>
</div>
</div>
</div>
<div class="back">
<input placeholder="What's the event?">
<div class="info">
<div class="date">
<p class="info-date">
Date: <span>Jan 15th, 2016</span>
</p>
<p class="info-time">
Time: <span>6:35 PM</span>
</p>
</div>
<div class="address">
<p>
Address: <span>129 W 81st St, New York, NY</span>
</p>
</div>
<div class="observations">
<p>
Observations: <span>Be there 15 minutes earlier</span>
</p>
</div>
</div>
<div class="actions">
<button class="save">
Save <i class="ion-checkmark"></i>
</button>
<button class="dismiss">
Dismiss <i class="ion-android-close"></i>
</button>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

CSS z-index property and javascript background mouse interaction

I'm trying to add a radial gradient as a background of my blogpost card.
This radial gradient should follow the cursor when the
blog post card is hovered. Here here my little code example about the
effect ( https://codepen.io/D_s/pen/OJNpNBV ).
The problem is that doesn't work as expected because the other div elements of the card (title, image, tags, button) are interfering with the hovering. How i can solve this?
Here is the code of the blog post card:
let backgroundgradient = document.querySelector('.card');
backgroundgradient.onmousemove = function(e) {
let rect = e.target.getBoundingClientRect();
let x = e.clientX - rect.left;
let y = e.clientY - rect.top;
backgroundgradient.style.setProperty('--x', x + 'px');
backgroundgradient.style.setProperty('--y', y + 'px');
}
Thank you for the help!

Instead of using e.target.getBoundingClientRect() and .left/.right which will change as the child elements are hovered, consider using the .offsetLeft/.offsetRight of the .card element itself.
let backgroundgradient = document.querySelector('.card');
backgroundgradient.onmousemove = function(e) {
let x = e.clientX - backgroundgradient.offsetLeft;
let y = e.clientY - (backgroundgradient.offsetTop - window.pageYOffset);
backgroundgradient.style.setProperty('--x', x + 'px');
backgroundgradient.style.setProperty('--y', y + 'px');
}
.card,
.imagebox {
display: flex;
flex-wrap: wrap;
align-items: center;
}
.imagebox {
flex: 3 1 30ch;
height: calc(282px + 5vw);
overflow: hidden;
}
.imagebox img {
max-width: 100%;
min-width: 100%;
min-height: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: cover;
object-position: 50% 50%;
padding: 15px;
border-radius: 30px;
z-index: 1;
}
.card {
background: #bdbdbd;
box-sizing: border-box;
border: 2px solid #f93668;
overflow: hidden;
position: relative;
border-radius: 20px;
overflow: hidden;
}
.card:before {
--size: 0;
content: '';
position: absolute;
left: var(--x);
top: var(--y);
width: var(--size);
height: var(--size);
background: radial-gradient(circle closest-side, #f93668, transparent);
transform: translate(-50%, -50%);
transition: width 0.8s ease, height 0.4s ease;
}
.card:hover:before {
--size: 90rem;
}
.card-content {
padding: 16px 32px;
flex: 10 1 40ch;
z-index: 2;
}
.card-tags {
margin: 0 -8px;
}
.card-tag {
display: inline-block;
margin: 8px;
font-size: 0.875em;
text-transform: uppercase;
font-weight: 600;
letter-spacing: 0.02em;
color: var(--primary);
}
.card-title {
margin: 0;
font-size: clamp(2.4em, 1.1vw, 1.1em);
font-family: "Roboto Slab", Helvetica, Arial, sans-serif;
}
.card-title a {
text-decoration: none;
color: inherit;
}
.card-metadata {
margin: 0;
}
.card-save {
display: flex;
align-items: center;
padding: 6px 14px 6px 12px;
border-radius: 4px;
border: 2px solid currentColor;
color: var(--primary);
background: none;
cursor: pointer;
font-weight: bold;
}
.card-save svg {
margin-right: 6px;
}
/* Body Layout */
* {
box-sizing: border-box;
}
body {
--primary: rgb(249, 54, 104);
--grey: #454545;
--lightgrey: #666;
color: var(--grey);
line-height: 1.55;
display: flex;
justify-content: center;
flex-wrap: wrap;
font-family: "Roboto", Helvetica, Arial, sans-serif;
}
.container {
width: clamp(20px, 90%, 90%);
padding: 24px;
}
<div class="container">
<article class="card">
<div class="imagebox">
<img src="https://d2w9rnfcy7mm78.cloudfront.net/2548871/original_eb4afb32258fcb72de6dddd99cbc4171.jpg?1534159969?bc=1" width="1500" height="1368" alt="">
</div>
<div class="card-content">
<p class="card-tags">
<span class="card-tag">Gluten Free</span>
<span class="card-tag">Main dish</span>
</p>
<h1 class="card-title">Title for a post to come</h1>
<p class="card-desc">by Slutty Urbanism</p>
<button class="card-save" type="button">
Read more
</button>
</div>
</article>
</div>
An example with multiple card elements...
let cards = document.querySelectorAll('.card');
for (let card of cards) {
card.onmousemove = function(e) {
let x = e.clientX - card.offsetLeft;
let y = e.clientY - (card.offsetTop - window.pageYOffset);
card.style.setProperty('--x', x + 'px');
card.style.setProperty('--y', y + 'px');
}
}
.card,
.imagebox {
display: flex;
flex-wrap: wrap;
align-items: center;
}
.imagebox {
flex: 3 1 30ch;
height: calc(282px + 5vw);
overflow: hidden;
}
.imagebox img {
max-width: 100%;
min-width: 100%;
min-height: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: cover;
object-position: 50% 50%;
padding: 15px;
border-radius: 30px;
z-index: 1;
}
.card {
background: #bdbdbd;
box-sizing: border-box;
border: 2px solid #f93668;
overflow: hidden;
position: relative;
border-radius: 20px;
overflow: hidden;
}
.card:before {
--size: 0;
content: '';
position: absolute;
left: var(--x);
top: var(--y);
width: var(--size);
height: var(--size);
background: radial-gradient(circle closest-side, #f93668, transparent);
transform: translate(-50%, -50%);
transition: width 0.8s ease, height 0.4s ease;
}
.card:hover:before {
--size: 90rem;
}
.card-content {
padding: 16px 32px;
flex: 10 1 40ch;
z-index: 2;
}
.card-tags {
margin: 0 -8px;
}
.card-tag {
display: inline-block;
margin: 8px;
font-size: 0.875em;
text-transform: uppercase;
font-weight: 600;
letter-spacing: 0.02em;
color: var(--primary);
}
.card-title {
margin: 0;
font-size: clamp(2.4em, 1.1vw, 1.1em);
font-family: "Roboto Slab", Helvetica, Arial, sans-serif;
}
.card-title a {
text-decoration: none;
color: inherit;
}
.card-metadata {
margin: 0;
}
.card-save {
display: flex;
align-items: center;
padding: 6px 14px 6px 12px;
border-radius: 4px;
border: 2px solid currentColor;
color: var(--primary);
background: none;
cursor: pointer;
font-weight: bold;
}
.card-save svg {
margin-right: 6px;
}
/* Body Layout */
* {
box-sizing: border-box;
}
body {
--primary: rgb(249, 54, 104);
--grey: #454545;
--lightgrey: #666;
color: var(--grey);
line-height: 1.55;
display: flex;
justify-content: center;
flex-wrap: wrap;
font-family: "Roboto", Helvetica, Arial, sans-serif;
}
.container {
width: clamp(20px, 90%, 90%);
padding: 24px;
}
<div class="container">
<article class="card">
<div class="imagebox">
<img src="https://d2w9rnfcy7mm78.cloudfront.net/2548871/original_eb4afb32258fcb72de6dddd99cbc4171.jpg?1534159969?bc=1" width="1500" height="1368" alt="">
</div>
<div class="card-content">
<p class="card-tags">
<span class="card-tag">Gluten Free</span>
<span class="card-tag">Main dish</span>
</p>
<h1 class="card-title">Title for a post to come</h1>
<p class="card-desc">by Slutty Urbanism</p>
<button class="card-save" type="button">
Read more
</button>
</div>
</article>
<article class="card">
<div class="imagebox">
<img src="https://d2w9rnfcy7mm78.cloudfront.net/2548871/original_eb4afb32258fcb72de6dddd99cbc4171.jpg?1534159969?bc=1" width="1500" height="1368" alt="">
</div>
<div class="card-content">
<p class="card-tags">
<span class="card-tag">Gluten Free</span>
<span class="card-tag">Main dish</span>
</p>
<h1 class="card-title">Title for a post to come</h1>
<p class="card-desc">by Slutty Urbanism</p>
<button class="card-save" type="button">
Read more
</button>
</div>
</article>
</div>

HTML Template not rendering on screen

I'm currently building a Twitter clone for my portfolio using Web Component's template feature. However, my template isn't rendering on screen when the tweet button is clicked. I'm currently getting an error 'Uncaught TypeError: Cannot set property 'innerHTML' of null at HTMLButtonElement.postTweetButton.onclick'.
I have attempted moving the 'tweetText.innerHTML = tweetBoxInput;' line around to no avail. My tweetText variable's value is correct so I'm not sure why the property cannot set. I suspect it's to do with the template not importing correctly.
JS FIDDLE: https://jsfiddle.net/manoj1234/mty68qng/13/
Help greatly appreciated. Thanks.
JS:
window.onload = () => {
const createTweetContainer = document.getElementById("createTweetContainer");
const createTweetButton = document.getElementById("createTweetButton");
const backArrow = document.getElementById("backArrow");
const tweetBox = document.getElementById("tweetBox");
let tweetBoxInput;
const pinnedTweet = document.getElementById("pinnedTweet");
const tweetContainer = document.getElementById("tweetContainer");
const tweetSentContainer = document.getElementById("tweetSentContainer");
createTweetButton.onclick = () => {
createTweetContainer.style.display = "block";
tweetBox.value = "";
}
backArrow.onclick = () => {
createTweetContainer.style.display = "none";
}
postTweetButton.onclick = () => {
var tweetText = document.getElementById("tweetText");
console.log(tweetBox.value);
tweetBoxInput = tweetBox.value;
if (tweetBoxInput == "") {
console.log("please write tweet");
} else {
createTweetContainer.style.display = "none";
tweetSentContainer.style.display = "flex";
var tweetTemplate = document.getElementById("tweet-template");
var tweetInstance = document.importNode(tweetTemplate.content, true);
tweetText.innerHTML = tweetBoxInput;
pinnedTweet.after(tweetInstance);
/* Show Tweet Sent container*/
setTimeout(() => {
tweetSentContainer.style.height = "30px";
}, 1000);
setTimeout(() => {
tweetSentContainer.style.opacity = "1";
}, 1300);
/* End of Show Tweet Sent container */
/* Hide Tweet Sent container */
setTimeout(() => {
tweetSentContainer.style.opacity = "0";
}, 5000);
setTimeout(() => {
tweetSentContainer.style.height = "0";
tweetSentContainer.style.marginBottom = "0";
}, 5300);
setTimeout(() => {
tweetSentContainer.style.display = "none";
tweetSentContainer.style.marginBottom = "12px";
}, 8000);
/*End of Hide Tweet Sent container */
}
}
}
CSS:
* {
margin: 0;
padding: 0;
transition: ease 0.2s;
box-sizing: border-box;
-webkit-user-drag: none;
appearance: none;
outline: none;
font-family: 'Roboto';
}
body {
display: flex;
justify-content: center;
align-items: center;
}
body main {
width: 480px;
/*background-color: $blueBackground;
*/
}
.globalWrap {
padding-left: 25px;
padding-right: 25px;
}
.greyText {
color: #8997a2;
font-weight: normal;
}
.bodyText {
font-size: 15px;
}
#bottomFixed {
width: 100%;
position: fixed;
bottom: 0;
z-index: 4;
display: flex;
align-items: flex-end;
flex-direction: column;
}
#bottomFixed #createTweetButton {
width: 65px;
height: 65px;
font-size: 1.2em;
display: flex;
justify-content: center;
align-items: center;
color: white;
border-radius: 360px;
background-color: #1da1f2;
margin-bottom: 12px;
margin-right: 10px;
}
#bottomFixed #navBar {
height: 50px;
width: 100%;
background-color: #15202b;
border-top: solid 1px #38444d;
}
#bottomFixed #tweetSentContainer {
height: 30px;
height: 0px;
bottom: 20;
z-index: 6;
background-color: #1da1f2;
width: 80%;
display: flex;
align-self: center;
display: none;
opacity: 0;
justify-content: space-between;
align-items: center;
padding-left: 25px;
padding-right: 25px;
margin-bottom: 12px;
border-radius: 5px;
transition: ease-in-out 0.3s;
}
#coverImgContainer {
height: 125px;
width: 100%;
}
#coverImgContainer img {
height: 100%;
width: 100%;
position: relative;
object-fit: cover;
}
#userProfile {
width: 100%;
background-color: #15202b;
color: white;
}
#userProfile #userImgContainer {
display: flex;
justify-content: space-between;
align-items: flex-start;
}
#userProfile #userImgContainer button {
margin-top: 12px;
background-color: transparent;
border: solid 1px #1da1f2;
padding-left: 12px;
padding-right: 12px;
padding-top: 6px;
padding-bottom: 6px;
border-radius: 25px;
color: #1da1f2;
font-size: 0.8em;
}
#userProfile #userImgContainer h2 {
font-size: 1em;
}
#userProfile #userImgContainer #profileImgName {
position: relative;
bottom: 25;
}
#userProfile #profilePicContainer {
height: 80px;
width: 80px;
}
#userProfile #profilePicContainer img {
width: 100%;
border-radius: 100%;
border: solid 4px #15202b;
}
#userProfile #profileNav {
display: flex;
justify-content: space-between;
margin-top: 16px;
}
#userProfile #profileNav h4 {
padding-left: 10px;
padding-right: 10px;
padding-bottom: 12px;
font-size: 16px;
color: #8997a2;
}
#userProfile #profileNav h4:nth-child(1) {
color: #1da1f2;
border-bottom: solid 2px #1da1f2;
padding-left: 25px;
padding-right: 25px;
}
#userProfile #profileNav h4:nth-child(4) {
padding-right: 25px;
}
#userProfile #userInfo p:nth-child(1) {
position: relative;
bottom: 12.5;
}
#userProfile #userInfo p:nth-child(2) {
position: relative;
bottom: 6.25;
display: flex;
}
#userProfile #userInfo p:nth-child(3) {
font-weight: bold;
margin-top: 4px;
font-size: 14px;
}
#userProfile #userInfo span {
font-weight: normal;
}
#userProfile #userInfo span:nth-child(1) {
margin-right: 6px;
}
#userProfile #userInfo svg {
width: 5%;
color: #8997a2;
fill: #8997a2;
margin-right: 5px;
display: none;
}
#timelineContainer {
background-color: #12161e;
height: 100vh;
width: 100%;
}
.tweetContainer {
display: flex;
padding-top: 12px;
padding-bottom: 12px;
padding-left: 25px;
padding-right: 25px;
width: 100%;
background-color: #15202b;
border-top: solid 1px #38444d;
transition: ease-in-out 0.3s;
}
.tweetContainer .tweetName {
color: white;
}
.tweetContainer .tweetText {
color: white;
margin-bottom: 12px;
}
.tweetContainer #tweetText {
color: white;
margin-bottom: 12px;
}
.tweetContainer .tweetImgContainer {
width: 100%;
height: 200px;
display: flex;
border-radius: 12px;
overflow: hidden;
/*Add this to main container so the Border-Radius also rounds child elements*/
border: solid 1px #38444d;
}
.tweetContainer .tweetImgContainer #col-1ImgContainer {
width: 100%;
overflow: hidden;
}
.tweetContainer .tweetImgContainer #col-1ImgContainer img {
height: 100%;
width: 100%;
object-fit: cover;
border-right: solid 5px #12161e;
}
.tweetContainer .tweetImgContainer .col-2ImgContainer {
height: 50%;
overflow: hidden;
}
.tweetContainer .tweetImgContainer .col-2ImgContainer:nth-child(1) {
border-bottom: solid 5px #12161e;
}
.tweetContainer .tweetImgContainer .col-2ImgContainer img {
transform: scale(1.5, 1.5);
height: 100%;
width: 100%;
object-fit: cover;
}
.tweetProfileImgContainer {
min-width: 55px;
min-height: 55px;
max-width: 55px;
max-height: 55px;
padding-right: 12px;
}
.tweetProfileImgContainer .tweetProfileImg {
width: 100%;
border-radius: 100%;
}
/* Create Tweet Page */
#createTweetContainer {
height: 100vh;
width: 100%;
background-color: #15202b;
position: fixed;
z-index: 5;
display: none;
}
#createTweetContainer img {
margin-right: 12px;
margin-left: 25px;
}
#createTweetContainer #createTweetHeader {
height: 45px;
border-bottom: solid 1px #38444d;
color: white;
display: flex;
justify-content: space-between;
align-items: center;
padding-left: 25px;
padding-right: 25px;
}
#createTweetContainer #createTweetHeader i {
color: #1da1f2;
}
#createTweetContainer #createTweetHeader button {
background-color: #1da1f2;
border: solid 1px #1da1f2;
padding-left: 24px;
padding-right: 24px;
padding-top: 6px;
padding-bottom: 6px;
border-radius: 25px;
color: white;
font-size: 0.8em;
font-weight: bold;
opacity: 0.5;
}
#profileTweetBoxContainer {
display: flex;
justify-content: space-between;
padding-top: 12px;
}
textarea {
margin-left: 25px;
width: 100%;
resize: none;
background-color: #15202b;
border: 0;
color: white;
outline: none;
padding-right: 25px;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
position: relative;
top: 10;
caret-color: #1da1f2;
}
HTML:
<script src="https://kit.fontawesome.com/cd801faa65.js" crossorigin="anonymous"></script>
<div id="bottomFixed">
<div id="createTweetButton">
<i class="fas fa-feather"></i>
</div>
<div id="tweetSentContainer">
<p><i class="fas fa-check-circle"></i>Your Tweet was sent.</p>
<p>View</p>
</div>
<div id="navBar">
</div>
</div>
<section id="createTweetContainer">
<div id="createTweetHeader">
<i id="backArrow" class="fas fa-arrow-left"></i>
<button id="postTweetButton">Tweet</button>
</div>
<div id="profileTweetBoxContainer">
<figure class="tweetProfileImgContainer">
<img class="tweetProfileImg" src="https://cdn.pixabay.com/photo/2016/11/08/15/21/user-1808597_1280.png">
</figure>
<textarea id="tweetBox" cols="500" rows="10" placeholder="What's Happening?"></textarea>
</div>
</section>
<section id="timelineContainer">
<div id="pinnedTweet" class="tweetContainer">
<figure class="tweetProfileImgContainer">
<img class="tweetProfileImg" src="https://cdn.pixabay.com/photo/2016/11/08/15/21/user-1808597_1280.png">
</figure>
<div>
<h4 class="tweetName bodyText">Name <span class="greyText">#username</span></h4>
<p class="tweetText bodyText">Tweet Text Here</p>
<div class="tweetImgContainer">
<div id="col-1ImgContainer">
<img src="https://cdn.getyourguide.com/img/tour/5ac513c518061.jpeg/146.jpg">
</div>
</div>
</div>
</div>
<template id="tweet-template">
<div id="tweetContainer" class="tweetContainer">
<figure class="tweetProfileImgContainer">
<img class="tweetProfileImg" src="images/profilepicture.jpg">
</figure>
<div>
<h4 class="tweetName">Emmanuel</h4>
<p id="tweetText"></p>
</div>
</div>
</template>
</section>

I realised I was attempting to change the original template's p tag rather than the imported node. I added tweetInstance.querySelectorAll(‘p’)[0].innerHTML = tweetBoxInput; which changes the text of the new node.