Develop Reference

How can I hide or show a bootstrap modal in my web page?

I'm new at web programming and trying to figure out modal structure. The point is , my modal is always open even if I refresh the page. I want it to be activated after user clicks a submitting button.
Sory for long codes but I'm using a Colorlib template to make some practice. I didn't design the all form page by myself. Can you examine the code and tell me what is wrong with the bootstrap model? Why it is shown in the beginning, at the top of the page? I tried with different pages and it was working well.
HTML Code :
<div class="modal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<div class="page-wrapper bg-gra-03 p-t-45 p-b-50">
<div class="wrapper wrapper--w790">
<div class="card card-5">
<div class="card-heading">
<h2 class="title">PROJENİZ VE KENDİNİZ HAKKINDA BİLGİ VERİNİZ</h2>
</div>
<div class="card-body">
<form method="post" action="/proje_ekle">
<div class="form-row m-b-55">
<div class="name">İsminiz ve<br>Soy İsminiz</div>
<div class="value">
<div class="row row-space">
<div class="col-2">
<div class="input-group-desc">
<input class="input--style-5" type="text" name="first_name">
<span class="asterisk_input"> </span>
<label class="label--desc">isim</label>
</div>
</div>
<div class="col-2">
<div class="input-group-desc">
<input class="input--style-5" type="text" name="last_name">
<span class="asterisk_input"> </span>
<label class="label--desc">soy isim</label>
</div>
</div>
</div>
</div>
</div>
<div class="form-row">
<div class="name">Şirketiniz</div>
<div class="value">
<div class="input-group">
<div class="input-group">
<div class="rs-select2 js-select-simple select--no-search">
<select name="company_name">
<option disabled="disabled" selected="selected">Şirketinizi Seçiniz
</option>
<option>Maxion</option>
<option>IGYA</option>
<option>İnci Holding</option>
</select>
<span class="asterisk_input"> </span>
<div class="select-dropdown"></div>
</div>
</div>
</div>
</div>
</div>
<div class="form-row">
<div class="name">Departmanınız</div>
<div class="value">
<div class="input-group">
<!-- <input class="input--style-5" type="text" name="department_name"> -->
<div class="input-group">
<div class="rs-select2 js-select-simple select--no-search">
<select name="department_name">
<option disabled="disabled" selected="selected">Departmanınızı seçiniz
</option>
<option>Bilgi Teknolojileri</option>
<option>İnsan Kaynakları</option>
<option>Mali İşler</option>
</select>
<span class="asterisk_input"> </span>
<div class="select-dropdown"></div>
</div>
</div>
</div>
</div>
</div>
<div class="form-row">
<div class="name">Projenizin İsmi</div>
<div class="value">
<div class="input-group">
<input class="input--style-5" type="text" name="project_name">
<span class="asterisk_input"> </span>
</div>
</div>
</div>
<div class="form-row">
<div class="name">Projenizin Kategorisi</div>
<div class="value">
<div class="input-group">
<div class="input-group">
<div class="rs-select2 js-select-simple select--no-search">
<select name="project_category">
<option disabled="disabled" selected="selected">Projenizin Kategorisini
Seçiniz
</option>
<option>ARGE</option>
<option>Mühendislik</option>
<option>İmalat</option>
</select>
<span class="asterisk_input"> </span>
<div class="select-dropdown"></div>
</div>
</div>
</div>
</div>
</div>
<div class="form-row">
<div class="name">Projenizin Açıklaması</div>
<div class="value">
<div class="input-group">
<textarea cols="40" rows="3" class="input--style-5" type="text"
name="project_explanation"></textarea>
<span class="asterisk_input"> </span>
</div>
</div>
</div>
<div class="form-row p-t-20">
<div class="input-group custom-file-button">
<label class="input-group-text" for="inputGroupFile">Proje Dosyaları Ekle</label>
<input type="file" class="form-control" id="inputGroupFile" multiple>
</div>
</div>
<div>
<button class="btn btn--radius-2 btn--red" type="submit">Projemi Kütüphaneye Kaydet</button>
</div>
</form>
</div>
</div>
</div>
</div>
CSS Codes :
/* ==========================================================================
#FONT
========================================================================== */
.font-robo {
font-family: "Roboto", "Arial", "Helvetica Neue", sans-serif;
}
.font-poppins {
font-family: "Poppins", "Arial", "Helvetica Neue", sans-serif;
}
.font-opensans {
font-family: "Open Sans", "Arial", "Helvetica Neue", sans-serif;
}
/* ==========================================================================
#GRID
========================================================================== */
.row {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.row .col-2:last-child .input-group-desc {
margin-bottom: 0;
}
.row-space {
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-moz-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.row-refine {
margin: 0 -15px;
}
.row-refine .col-3 .input-group-desc,
.row-refine .col-9 .input-group-desc {
margin-bottom: 0;
}
.col-2 {
width: -webkit-calc((100% - 30px) / 2);
width: -moz-calc((100% - 30px) / 2);
width: calc((100% - 30px) / 2);
}
#media (max-width: 767px) {
.col-2 {
width: 100%;
}
}
.form-row {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-align: center;
-webkit-align-items: center;
-moz-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-bottom: 40px;
}
.form-row .name {
width: 125px;
color: #555;
font-size: 15px;
font-weight: 700;
}
.form-row .value {
width: -webkit-calc(100% - 125px);
width: -moz-calc(100% - 125px);
width: calc(100% - 125px);
}
#media (max-width: 767px) {
.form-row {
display: block;
}
.form-row .name,
.form-row .value {
display: block;
width: 100%;
}
.form-row .name {
margin-bottom: 7px;
}
}
.col-3,
.col-9 {
padding: 0 15px;
position: relative;
width: 100%;
min-height: 1px;
}
.col-3 {
-webkit-box-flex: 0;
-webkit-flex: 0 0 25%;
-moz-box-flex: 0;
-ms-flex: 0 0 25%;
flex: 0 0 25%;
max-width: 25%;
}
#media (max-width: 767px) {
.col-3 {
-webkit-box-flex: 0;
-webkit-flex: 0 0 35%;
-moz-box-flex: 0;
-ms-flex: 0 0 35%;
flex: 0 0 35%;
max-width: 35%;
}
}
.col-9 {
-webkit-box-flex: 0;
-webkit-flex: 0 0 75%;
-moz-box-flex: 0;
-ms-flex: 0 0 75%;
flex: 0 0 75%;
max-width: 75%;
}
#media (max-width: 767px) {
.col-9 {
-webkit-box-flex: 0;
-webkit-flex: 0 0 65%;
-moz-box-flex: 0;
-ms-flex: 0 0 65%;
flex: 0 0 65%;
max-width: 65%;
}
}
/* ==========================================================================
#BOX-SIZING
========================================================================== */
html {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
* {
padding: 0;
margin: 0;
}
*, *:before, *:after {
-webkit-box-sizing: inherit;
-moz-box-sizing: inherit;
box-sizing: inherit;
}
/* ==========================================================================
#RESET
========================================================================== */
/**
* A very simple reset that sits on top of Normalize.css.
*/
body,
h1, h2, h3, h4, h5, h6,
blockquote, p, pre,
dl, dd, ol, ul,
figure,
hr,
fieldset, legend {
margin: 0;
padding: 0;
}
/**
* Remove trailing margins from nested lists.
*/
li > ol,
li > ul {
margin-bottom: 0;
}
/**
* Remove default table spacing.
*/
table {
border-collapse: collapse;
border-spacing: 0;
}
/**
* 1. Reset Chrome and Firefox behaviour which sets a `min-width: min-content;`
* on fieldsets.
*/
fieldset {
min-width: 0;
/* [1] */
border: 0;
}
button {
outline: none;
background: none;
border: none;
}
/* ==========================================================================
#PAGE WRAPPER
========================================================================== */
.page-wrapper {
min-height: 100vh;
}
body {
font-family: "Open Sans", "Arial", "Helvetica Neue", sans-serif;
font-weight: 400;
font-size: 14px;
}
h1, h2, h3, h4, h5, h6 {
font-weight: 400;
}
h1 {
font-size: 36px;
}
h2 {
font-size: 30px;
}
h3 {
font-size: 24px;
}
h4 {
font-size: 18px;
}
h5 {
font-size: 15px;
}
h6 {
font-size: 13px;
}
/* ==========================================================================
#BACKGROUND
========================================================================== */
.bg-blue {
background: #2c6ed5;
}
.bg-red {
background: #fa4251;
}
.bg-gra-01 {
background: -webkit-gradient(linear, left bottom, left top, from(#fbc2eb), to(#a18cd1));
background: -webkit-linear-gradient(bottom, #fbc2eb 0%, #a18cd1 100%);
background: -moz-linear-gradient(bottom, #fbc2eb 0%, #a18cd1 100%);
background: -o-linear-gradient(bottom, #fbc2eb 0%, #a18cd1 100%);
background: linear-gradient(to top, #fbc2eb 0%, #a18cd1 100%);
}
.bg-gra-02 {
background: -webkit-gradient(linear, left bottom, right top, from(#fc2c77), to(#6c4079));
background: -webkit-linear-gradient(bottom left, #fc2c77 0%, #6c4079 100%);
background: -moz-linear-gradient(bottom left, #fc2c77 0%, #6c4079 100%);
background: -o-linear-gradient(bottom left, #fc2c77 0%, #6c4079 100%);
background: linear-gradient(to top right, #fc2c77 0%, #6c4079 100%);
}
.bg-gra-03 {
/* background: -webkit-gradient(linear, left bottom, right top, from(#08aeea), to(#b721ff));
background: -webkit-linear-gradient(bottom left, #08aeea 0%, #b721ff 100%);
background: -moz-linear-gradient(bottom left, #08aeea 0%, #b721ff 100%);
background: -o-linear-gradient(bottom left, #08aeea 0%, #b721ff 100%);
background: linear-gradient(to top right, #08aeea 0%, #b721ff 100%); */
background-image: url(/images/form_images/form_resim.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
/* ==========================================================================
#SPACING
========================================================================== */
.p-t-100 {
padding-top: 100px;
}
.p-t-130 {
padding-top: 130px;
}
.p-t-180 {
padding-top: 180px;
}
.p-t-45 {
padding-top: 45px;
}
.p-t-20 {
padding-top: 20px;
}
.p-t-15 {
padding-top: 15px;
}
.p-t-10 {
padding-top: 10px;
}
.p-t-30 {
padding-top: 30px;
}
.p-b-100 {
padding-bottom: 100px;
}
.p-b-50 {
padding-bottom: 50px;
}
.m-r-45 {
margin-right: 45px;
}
.m-r-55 {
margin-right: 55px;
}
.m-b-55 {
margin-bottom: 55px;
}
/* ==========================================================================
#WRAPPER
========================================================================== */
.wrapper {
margin: 0 auto;
}
.wrapper--w960 {
max-width: 960px;
}
.wrapper--w790 {
max-width: 790px;
}
.wrapper--w780 {
max-width: 780px;
}
.wrapper--w680 {
max-width: 680px;
}
/* ==========================================================================
#BUTTON
========================================================================== */
.btn {
display: inline-block;
line-height: 50px;
padding: 0 50px;
-webkit-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
transition: all 0.4s ease;
cursor: pointer;
font-size: 15px;
text-transform: uppercase;
font-weight: 700;
color: #fff;
font-family: inherit;
}
.btn--radius {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.btn--radius-2 {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.btn--pill {
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
.btn--green {
background: #57b846;
}
.btn--green:hover {
background: #4dae3c;
}
.btn--blue {
background: #4272d7;
}
.btn--blue:hover {
background: #3868cd;
}
.btn--red {
background: #1a1a1a;
}
.btn--red:hover {
background: #b31515;
}
/* ==========================================================================
#DATE PICKER
========================================================================== */
td.active {
background-color: #2c6ed5;
}
input[type="date" i] {
padding: 14px;
}
.table-condensed td, .table-condensed th {
font-size: 14px;
font-family: "Roboto", "Arial", "Helvetica Neue", sans-serif;
font-weight: 400;
}
.daterangepicker td {
width: 40px;
height: 30px;
}
.daterangepicker {
border: none;
-webkit-box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.15);
box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.15);
display: none;
border: 1px solid #e0e0e0;
margin-top: 5px;
}
.daterangepicker::after, .daterangepicker::before {
display: none;
}
.daterangepicker thead tr th {
padding: 10px 0;
}
.daterangepicker .table-condensed th select {
border: 1px solid #ccc;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
font-size: 14px;
padding: 5px;
outline: none;
}
/* ==========================================================================
#FORM
========================================================================== */
input {
outline: none;
margin: 0;
border: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
width: 100%;
font-size: 14px;
font-family: inherit;
}
.radio-container {
display: inline-block;
position: relative;
padding-left: 30px;
cursor: pointer;
font-size: 16px;
color: #666;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.radio-container input {
position: absolute;
opacity: 0;
cursor: pointer;
}
.radio-container input:checked ~ .checkmark {
background-color: #e5e5e5;
}
.radio-container input:checked ~ .checkmark:after {
display: block;
}
.radio-container .checkmark:after {
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 12px;
height: 12px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
background: #57b846;
}
.checkmark {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
left: 0;
height: 20px;
width: 20px;
background-color: #e5e5e5;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
-webkit-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.08);
-moz-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.08);
box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.08);
}
.checkmark:after {
content: "";
position: absolute;
display: none;
}
/* input[required]{
background-image: radial-gradient(#F00 30%, transparent 30%), radial-gradient(#F00 15%, transparent 16%);
background-size: 1em 1em;
background-position: right top;
background-repeat: no-repeat;
} */
.asterisk_input::after {
content:" *";
color: #e32;
position: absolute;
margin: 0px 0px 0px -15px;
font-size: large;
padding: 0 5px 0 0; }
.input--style-5 {
background: #e5e5e5;
line-height: 50px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
padding: 0 22px;
font-size: 16px;
color: #555;
}
.input-group-desc {
position: relative;
}
#media (max-width: 767px) {
.input-group-desc {
margin-bottom: 40px;
}
}
.input-group {
position: relative;
margin: 0;
}
.label {
color: #555;
font-size: 15px;
font-weight: 700;
}
.label--block {
width: 100%;
}
.label--desc {
position: absolute;
text-transform: capitalize;
display: block;
color: #999;
font-size: 14px;
margin: 0;
margin-top: 7px;
left: 0;
}
#inputGroupFile{
position:relative;
top:1.2em;
font-size: 0.8em ;
color: #b31515;
}
JavaScript Codes :
(function ($) {
'use strict';
/*==================================================================
[ Daterangepicker ]*/
try {
$('.js-datepicker').daterangepicker({
"singleDatePicker": true,
"showDropdowns": true,
"autoUpdateInput": false,
locale: {
format: 'DD/MM/YYYY'
},
});
var myCalendar = $('.js-datepicker');
var isClick = 0;
$(window).on('click',function(){
isClick = 0;
});
$(myCalendar).on('apply.daterangepicker',function(ev, picker){
isClick = 0;
$(this).val(picker.startDate.format('DD/MM/YYYY'));
});
$('.js-btn-calendar').on('click',function(e){
e.stopPropagation();
if(isClick === 1) isClick = 0;
else if(isClick === 0) isClick = 1;
if (isClick === 1) {
myCalendar.focus();
}
});
$(myCalendar).on('click',function(e){
e.stopPropagation();
isClick = 1;
});
$('.daterangepicker').on('click',function(e){
e.stopPropagation();
});
} catch(er) {console.log(er);}
/*[ Select 2 Config ]
===========================================================*/
try {
var selectSimple = $('.js-select-simple');
selectSimple.each(function () {
var that = $(this);
var selectBox = that.find('select');
var selectDropdown = that.find('.select-dropdown');
selectBox.select2({
dropdownParent: selectDropdown
});
});
} catch (err) {
console.log(err);
}
})(jQuery);
if ( window.history.replaceState ) {
window.history.replaceState(null, null, window.location.href);
}

It doesn't look like any CSS or JS is hiding the modal. Why would it be hidden?
There should be some CSS like:
.modal {
display: none;
}
.modal.active {
display: block; // or flex, grid, whatever you need
}
Then the triggering button needs an event listener, listening for a 'click' event, which will add the class active to the modal. To "close" the modal you need to remove the class "active" in another event listener.

How to put the dice on top of green circle and below the line like the given picture?

I am having trouble moving the green big circle and the dice image on top of each other and below. How do I achieve this as shown in this picture? I want to achieve this
But I could make only this
I tried using the position property but the left: 0px could only move the green circle to the middle.
Please comment below how do i fix this issue.
My code is below:
'use strict';
const dice = document.getElementById('dice');
const adviceContainer = document.querySelector('#box');
const renderAdvice = function (data) {
const html = `
<h1 class="heading">ADVICE <span class='hash' id="hash">#${data.slip.id}</span></h1>
<p class="advice" id="advice">'${data.slip.advice}' </p>
<img src="/images/pattern-divider-mobile.svg" alt="divider" class="divider">
`;
adviceContainer.innerHTML = html;
};
async function adviceGenerator() {
const res = await fetch('https://api.adviceslip.com/advice');
const data = await res.json();
renderAdvice(data);
}
dice.addEventListener('click', adviceGenerator);
adviceGenerator();
#import url('https://fonts.googleapis.com/css2?family=Manrope:wght#300;400;500;800&display=swap');
* {
box-sizing: border-box;
}
body {
font-family: Monrope, 'Arial', 'sans-serif';
background-color: hsl(220, 22%, 16%);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#container {
display: flex;
/* flex-direction: column; */
/* min-height: 100vh; */
/* max-width: 350px; */
margin: 100px auto;
background-color: hsl(218, 20%, 24%);
/* overflow: hidden; */
border-radius: 10px;
justify-content: center;
align-items: center;
}
.box {
/* height: min(100vh, 100%);
width: min(100vw, 100%); */
max-width: 350px;
min-height: 150px;
/* overflow: hidden; */
}
.heading {
color: hsl(150, 100%, 66%);
letter-spacing: 3px;
text-align: center;
padding-top: 3em;
font-size: 0.7em;
font-weight: 300;
}
.advice {
color: hsl(203, 33%, 86%);
font-size: 1.75em;
font-weight: 800;
padding: 0.5em;
/* margin-left: 30px; */
/* width: clamp(200px, 50%, 20rem); */
}
.divider {
display: block;
margin-left: auto;
margin-right: auto;
}
.green {
height: 70px;
width: 70px;
border-radius: 50%;
background-color: hsl(150, 100%, 66%);
display: inline-block;
/* position: relative; */
left: 1px;
right: 10px;
top: 45px;
}
.dice {
position: relative;
height: 30px;
width: 30px;
margin-left: 80px;
top: 25px;
left: 5px;
cursor: pointer;
}
.attribution {
font-size: 11px;
text-align: center;
}
.attribution a {
color: hsl(228, 45%, 44%);
}
#media (min-width:768px) {
.box {
max-width: 450px;
}
.green {
height: 70px;
width: 70px;
border-radius: 50%;
background-color: hsl(150, 100%, 66%);
display: inline-block;
position: relative;
left: 175px;
top: 45px;
}
.dice {
position: relative;
height: 30px;
width: 30px;
margin-left: 80px;
top: 25px;
left: 39px;
cursor: pointer;
}
}
/* https://api.adviceslip.com/ */
/*
Colors
Primary
Light Cyan: hsl(193, 38%, 86%)
Neon Green: hsl(150, 100%, 66%)
Neutral
Grayish Blue: hsl(217, 19%, 38%)
Dark Grayish Blue: hsl(217, 19%, 24%)
Typography
Body Copy
Font size (quote): 28px
Font
Family: Manrope
Weights: 800
*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- displays site properly based on user's device -->
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<link rel="stylesheet" href="style.css">
<title>Frontend Mentor | Advice generator app</title>
</head>
<body>
<section id="container">
<section class="box" id="box">
<!-- <h1 class="heading">ADVICE <span class='hash' id="hash">#</span></h1>
<p class="advice" id="advice">'Lorem ipsum dolor sit amet consectetur adipisicing elit.!' </p> -->
</section>
<span class="green"></span>
<img src="/images/icon-dice.svg" alt="dice" class="dice" id="dice">
</section>
<div class="attribution">
Challenge by Frontend Mentor.
Coded by Nelson Uprety.
</div>
<script src="script.js"></script>
</body>
</html>
Thank you for the help.

You could just have one div which has that green as background color and a background image, centered and say 50% size. That way you don't have to try to align separate elements e.g. by having them in the same container.
Here's a simple example:
div {
background-color: palegreen;
background-image: url(https://picsum.photos/id/237/300/300);
background-size: 50% 50%;
background-position: center center;
background-repeat: no-repeat;
border-radius: 50%;
width: 30vmin;
aspect-ratio: 1 / 1;
}
<div></div>

You could reshuffle your html a bit and your JavaScript could be simpler.
'use strict';
const dice = document.getElementById('dice');
const adviceContainer = document.querySelector('#box');
const renderAdvice = function (data) {
document.querySelector('#hash').innerText = `#${data.slip.id}`;
document.querySelector('#advice').innerText = data.slip.advice;
};
async function adviceGenerator() {
const res = await fetch('https://api.adviceslip.com/advice');
const data = await res.json();
renderAdvice(data);
}
dice.addEventListener('click', adviceGenerator);
adviceGenerator();
#import url('https://fonts.googleapis.com/css2?family=Manrope:wght#300;400;500;800&display=swap');
* {
box-sizing: border-box;
}
body {
font-family: Monrope, 'Arial', 'sans-serif';
background-color: hsl(220, 22%, 16%);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#container {
margin: 100px auto;
background-color: hsl(218, 20%, 24%);
border-radius: 10px;
}
.box {
display: flex;
flex-direction: row;
flex-wrap: wrap;
max-width: 350px;
min-height: 150px;
justify-content: center;
}
.heading {
flex-basis: 100%;
color: hsl(150, 100%, 66%);
letter-spacing: 3px;
text-align: center;
padding-top: 3em;
font-size: 0.7em;
font-weight: 300;
}
.advice {
flex-basis: 100%;
color: hsl(203, 33%, 86%);
font-size: 1.75em;
font-weight: 800;
padding: 0.5em;
text-align: center;
}
.divider {
flex-basis: 100%;
display: block;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.green {
height: 70px;
width: 70px;
border-radius: 50%;
background-color: hsl(150, 100%, 66%);
display: inline-block;
position: relative;
top: 25px;
}
.dice {
position: relative;
height: 30px;
width: 30px;
top: 25px;
left: 5px;
cursor: pointer;
}
.attribution {
font-size: 11px;
text-align: center;
}
.attribution a {
color: hsl(228, 45%, 44%);
}
#media (min-width: 768px) {
.box {
max-width: 450px;
}
.green {
height: 70px;
width: 70px;
border-radius: 50%;
background-color: hsl(150, 100%, 66%);
display: inline-block;
position: relative;
top: 25px;
}
.dice {
position: relative;
height: 30px;
width: 30px;
margin-left: 80px;
top: 25px;
left: 39px;
cursor: pointer;
}
}
/* https://api.adviceslip.com/ */
/*
Colors
Primary
Light Cyan: hsl(193, 38%, 86%)
Neon Green: hsl(150, 100%, 66%)
Neutral
Grayish Blue: hsl(217, 19%, 38%)
Dark Grayish Blue: hsl(217, 19%, 24%)
Typography
Body Copy
Font size (quote): 28px
Font
Family: Manrope
Weights: 800
*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- displays site properly based on user's device -->
<link
rel="icon"
type="image/png"
sizes="32x32"
href="./images/favicon-32x32.png"
/>
<link rel="stylesheet" href="style.css" />
<title>Frontend Mentor | Advice generator app</title>
</head>
<body>
<section id="container">
<section class="box" id="box">
<h1 class="heading">
ADVICE <span class="hash" id="hash"></span>
</h1>
<p class="advice" id="advice"></p>
<img
src="/images/pattern-divider-mobile.svg"
alt="divider"
class="divider"
/>
<span class="green"
><img src="/images/icon-dice.svg" alt="dice" class="dice" id="dice"
/></span>
</section>
</section>
<div class="attribution">
Challenge by
<a href="https://www.frontendmentor.io?ref=challenge" target="_blank"
>Frontend Mentor</a
>. Coded by
<a href="https://www.linkedin.com/in/nelson-uprety-951a2b156/"
>Nelson Uprety</a
>.
</div>
<script src="script.js"></script>
</body>
</html>

GTM Invalid HTML, CSS, or JavaScript found in template

I am using GTM's "Custom HTML Tag" option with the my below code but it is giving me the following error when I try to publish it: Invalid HTML, CSS, or JavaScript found in template.
I've seen other threads where it looks like GTM doesn't support or recognize certain tag attributes. I have tested my code, and no error prompts show up in the console either. It is a standard bootstrap modal:
function myFunction() {
var copyText = document.getElementById("myInput");
navigator.clipboard.writeText(copyText.innerHTML);
var testtip = document.getElementById("myTooltip");
testtip.innerHTML = "Copied: " + copyText.innerHTML;
}
function outFunc() {
var testtip = document.getElementById("myTooltip");
testtip.innerHTML = "Copy";
}
$("#myModal").modal();
body {
font-family: 'Varela Round', sans-serif
}
.modal-login {
color: #636363;
max-width: 850px;
width: 100%;
margin: 30px auto;
background-image: none!important
}
.modal-login .modal-content {
padding: 20px;
min-height: 586px;
border-radius: 5px;
margin: 1rem;
background-color: #eaebeb;
background-image: url(https://media-services.dcm-inc.com/couponsites/static/resources/img/festival.png);
background-size: 100%;
background-repeat: no-repeat
}
.modal-login .modal-header {
border-bottom: none;
position: relative;
justify-content: center;
margin-top: 130px
}
.modal-login img {
display: block;
height: 100%;
margin-left: auto;
margin-right: auto;
width: 40%
}
.modal-login .form-group {
position: relative
}
.modal-login h4 {
text-align: center;
font-size: 20px;
width: 80%;
display: block;
margin-left: auto;
margin-right: auto
}
.modal-login i {
position: absolute;
left: 13px;
top: 11px;
font-size: 18px
}
.modal-login .form-control {
display: block;
margin-left: auto;
margin-right: auto;
width: 40%
}
#media screen and (max-width:600px) {
.modal-login .form-control {
display: block;
margin-left: auto;
margin-right: auto;
width: 80%
}
}
.modal-login .form-control:focus {
border-color: #fcda7b
}
.modal-login .btn,
.modal-login .form-control {
min-height: 40px;
border-radius: 30px
}
.modal-login .hint-text {
text-align: center;
padding-top: 10px
}
.modal-login .close {
position: absolute;
top: -5px;
right: -5px
}
.button,
.modal-login .btn {
background: linear-gradient(90deg, #fcda7b 0, #fd5c88 100%);
border: none;
line-height: normal
}
.modal-login .custom {
display: block;
margin-left: auto;
margin-right: auto;
width: 20%
}
#media screen and (max-width:600px) {
.modal-login .custom {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%
}
}
.modal-login .custom-social {
display: block;
margin-left: auto;
margin-right: auto;
width: 30%
}
.modal-login .btn:focus,
.modal-login .btn:hover {
opacity: .7
}
.trigger-btn {
display: inline-block;
margin: 100px auto
}
.contest-social {
padding: 10px;
font-size: 30px;
width: 50px;
text-align: center;
text-decoration: none;
margin: 5px 2px;
border-radius: 50%
}
.modal-login .fa:hover {
opacity: .7
}
.modal-login .contest-social-facebook {
background: linear-gradient(90deg, #fcda7b 0, #fd5c88 100%)!important;
color: #fff
}
.modal-login .contest-social-twitter {
background: linear-gradient(90deg, #fcda7b 0, #fd5c88 100%)!important;
color: #fff
}
.modal-login .contest-social-youtube {
background: linear-gradient(90deg, #fcda7b 0, #fd5c88 100%)!important;
color: #fff
}
.modal-login .contest-social-instagram {
background: linear-gradient(90deg, #fcda7b 0, #fd5c88 100%)!important;
color: #fff
}
.flex {
display: -webkit-box;
display: -ms-flexbox;
display: flex
}
.flexC {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
justify-content: center;
align-items: center;
flex-flow: row wrap;
-webkit-flex-flow: row wrap
}
.modal-title img {
margin: 1rem;
max-width: 100px;
border-radius: 10px;
box-shadow: 0 0 3px 3px #ddd
}
.modal-title p {
font-size: 20px;
font-weight: 500;
max-width: 300px;
color: #000
}
.ccme {
color: #fd5c88
}
.codelinkbox {
margin: 0;
position: relative;
text-align: center;
width: auto;
position: relative
}
.codeValue {
border: 2px dashed currentColor;
font-size: 28px;
height: 50px;
line-height: 48px;
padding: 0 15px;
border-right: none;
border-radius: 0;
display: inline-block;
white-space: nowrap;
cursor: pointer;
border-radius: 6px 0 0 6px!important;
font-weight: 700;
color: #000
}
.buttonBtn.copy {
background-color: currentColor;
cursor: pointer;
font-size: 16px;
height: 50px;
line-height: 42px;
margin: 0;
padding: 0 15px;
position: relative;
text-transform: capitalize;
overflow: hidden;
min-width: 0;
-webkit-transition: all .3s linear;
-o-transition: all .3s linear;
transition: all .3s linear;
border-radius: 0 6px 6px 0
}
.buttonBtn.copy:hover {
background: #6ba62c;
color: #fff
}
.copy span {
color: #fff
}
.m1 {
margin: 1rem auto
}
.txtC {
text-align: center
}
.buttonBtn {
position: relative;
cursor: pointer;
font-size: 15px;
left: 0;
top: 0;
margin: 0;
height: 54px;
min-width: 180px;
border: 0;
outline: 0;
padding: 0 15px;
border-radius: 10px;
line-height: 54px
}
.arrRight {
color: #fff;
font-weight: 700
}
.arrRight:after {
content: '\2192';
display: inline-block;
color: #fff
}
.emailIcon {
width: 24px;
max-width: 24px;
margin: 0 5px
}
.termsto {
margin: 3rem 0
}
.sendemail {
font-size: 13px;
margin: 10px 0
}
#media all and (max-width:540px) {
.modal-title {
text-align: center
}
.modal-login .modal-header {
margin-top: 40px
}
}
.testtip {
position: relative;
display: inline-block;
}
.testtip .tooltiptext {
visibility: hidden;
width: 140px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px;
position: absolute;
z-index: 1;
bottom: 120%;
left: 50%;
margin-left: -75px;
opacity: 0;
transition: opacity 0.3s;
}
.testtip .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
.testtip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
<link href="https://fonts.googleapis.com/css?family=Roboto%7CVarela+Round" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Modal HTML -->
<div id="myModal" class="modal fade">
<div class="modal-dialog modal-login border">
<div class="modal-content">
<div class="modal-header">
<div class="modal-title">
<div class="flexC">
<img src="https://res.cloudinary.com/csnetworkco/image/upload/c_scale,h_150,w_150/csnimages/Noon_568012.jpg" alt="Noon Discount Code" title="Noon Discount Code" width="150" height="150" loading="lazy">
<p>Up To 70% Off Sale + 10% Off Using Noon Coupon Code</p>
</div>
</div>
<div class="modal-body">
<div class="codelinkbox flexC m1">
<div id="myInput" class="codeValue">YB26</div>
<div class="testtip">
<button class="buttonBtn copy ccme" onclick="myFunction()" onmouseout="outFunc()"><span id="myTooltip">Copy</span></button>
</div>
</div>
</div>
<div class="row termsto">
<div class="col-sm-8">
<p><strong>Things to remember:</strong></p>
<ul>
<li>Don't forget to paste the code in the checkout during the purchase</li>
<li>Get 10% Off for New Customers & 5% Off for Returning Customers. </li>
<li>Code Usage: 2 times per customer.</li>
<li>Always contact our customer support team if there is any issues</li>
<li>You can always share the code</li>
</ul>
</div>
<div class="col-sm-4 txtC ">
<button class="buttonBtn ccme button" id=""><span class="arrRight">VISIT SITE </span></button>
</div>
</div>
</div>
</div>
</div>
</div>

I found what the issue was, in the img tag I was adding an attribute loading="lazy" due to which the invalid HTML CSS or JS error was being thrown
They really need to highlight what part of the code is the problem
I removed the above mentioned attribute and am now able to publish the tag

One Api request for an image works but a copy of it in another HTML file in the same folder doesnt work

const menu = document.querySelector('#mobile-menu');
const menuLinks = document.querySelector('.navbar__menu');
menu.addEventListener('click', function() {
menu.classList.toggle('is-active');
menuLinks.classList.toggle('active');
});
var req = new XMLHttpRequest();
var url = "https://api.nasa.gov/planetary/apod?api_key=";
var api_key = "Q6LCLptEevXBK9pvwj1GeEsPbM4mmv6ywTmfw0Nc";
req.open("GET", url + api_key);
req.send();
req.addEventListener("load", function() {
if (req.status == 200 && req.readyState == 4) {
var response = JSON.parse(req.responseText);
document.getElementById("title").textContent = response.title;
document.getElementById("date").textContent = response.date;
document.getElementById("pic").src = response.hdurl;
document.getElementById("explanation").textContent = response.explanation;
}
})
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Kumbh Sans', sans-serif;
}
.navbar {
background: darkred;
height: 80px;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.2rem;
position: sticky;
top: 0;
z-index: 999;
}
.navbar__container {
display: flex;
justify-content: space-between;
height: 80px;
z-index: 1;
width: 100%;
max-width: 1300px;
margin-right: auto;
margin-left: auto;
padding-right: 50px;
padding-left: 50px;
}
#navbar__logo {
background-color: #ff8177;
background-image: linear-gradient(to top, #ff0844 0%, #ffb199 100%);
background-size: 100%;
-webkit-background-clip: text;
-moz-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
display: flex;
align-items: center;
cursor: pointer;
text-decoration: none;
font-size: 2rem;
}
.fa-gem {
margin-right: 0.5rem;
}
.navbar__menu {
display: flex;
align-items: center;
list-style: none;
text-align: center;
}
.navbar__item {
height: 80px;
}
.navbar__links {
color: #fff;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
padding: 0 1rem;
height: 100%;
}
.navbar__btn {
display: flex;
justify-content: center;
align-items: center;
padding: 0 1rem;
width: 100%;
}
.btnclick {
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
padding: 10px 20px;
height: 100%;
width: 100%;
border: none;
outline: none;
border-radius: 4px;
background: #f77062;
color: #fff;
}
.button:hover {
background: #4837ff;
transition: all 0.3s ease;
}
.navbar__links:hover {
color: #f77062;
transition: all 0.3s ease;
}
#media screen and (max-width: 960px) {
.navbar__container {
display: flex;
justify-content: space-between;
height: 80px;
z-index: 1;
width: 100%;
max-width: 1300px;
padding: 0;
}
.navbar__menu {
display: grid;
grid-template-columns: auto;
margin: 0;
width: 100%;
position: absolute;
top: -1000px;
opacity: 1;
transition: all 0.5s ease;
height: 50vh;
z-index: -1;
}
.navbar__menu.active {
background: #131313;
top: 100%;
opacity: 1;
transition: all 0.5s ease;
z-index: 99;
height: 50vh;
font-size: 1.6rem;
}
#navbar__logo {
padding-left: 25px;
}
.navbar__toggle .bar {
width: 25px;
height: 3px;
margin: 5px auto;
transition: all 0.3s ease-in-out;
background: #fff;
}
.navbar__item {
width: 100%;
}
.navbar__links {
text-align: center;
padding: 2rem;
width: 100%;
display: table;
}
.navbar__btn {
padding-bottom: 2rem;
}
.button {
display: flex;
justify-content: center;
align-items: center;
width: 80%;
height: 80px;
margin: 0;
}
#mobile-menu {
position: absolute;
top: 20%;
right: 5%;
transform: translate(5%, 20%);
}
.navbar__toggle .bar {
display: block;
cursor: pointer;
}
#mobile-menu.is-active .bar:nth-child(2) {
opacity: 0;
}
#mobile-menu.is-active .bar:nth-child(1) {
transform: translateY(8px) rotate(45deg);
}
#mobile-menu.is-active .bar:nth-child(3) {
transform: translateY(-8px) rotate(-45deg);
}
}
/* Main Content CSS */
.main {
background-color: #131313;
}
.main__container {
display: grid;
grid-template-columns: auto auto;
align-items: Left;
justify-self: Left;
margin: 100px;
height: 90vh;
background-color: #131313;
z-index: 1;
width: 100%;
max-width: 1300px;
padding-right: 0px;
padding-left: 0px;
}
.main__content {
color: #fff;
width: 100%;
}
.main__content h1 {
font-size: 4rem;
background-color: #ff8177;
background-image: linear-gradient(to top, #ff0844 0%, #ffb199 100%);
background-size: 100%;
-webkit-background-clip: text;
-moz-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
}
.main__content h2 {
font-size: 4rem;
margin-top: 10px;
background-color: #ff8177;
background-image: linear-gradient(-20deg, #b721ff 0%, #21d4fd 100%);
background-size: 100%;
-webkit-background-clip: text;
-moz-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
}
.main__content p {
margin-top: 1rem;
font-size: 2rem;
font-weight: 700;
}
.main__btn {
font-size: 1rem;
background-image: linear-gradient(to top, #f77062 0%, #fe5196 100%);
padding: 14px 32px;
border: none;
border-radius: 4px;
color: #fff;
margin-top: 2rem;
cursor: pointer;
position: relative;
transition: all 0.35s;
outline: none;
}
.main__btn a {
position: relative;
z-index: 2;
color: #fff;
text-decoration: none;
}
.main__btn:after {
position: absolute;
content: '';
top: 0;
left: 0;
width: 0;
height: 100%;
background: #4837ff;
transition: all 0.35s;
border-radius: 4px;
}
.main__btn:hover {
color: #fff;
}
.main__btn:hover:after {
width: 100%;
}
.main__img--container {
text-align: center;
}
#main__img {
height: 80%;
width: 80%;
}
/* Mobile Responsive */
#media screen and (max-width: 768px) {
.main__container {
display: grid;
grid-template-columns: auto;
align-items: center;
justify-self: center;
width: 100%;
margin: 0 auto;
height: 90vh;
}
.main__content {
text-align: center;
margin-bottom: 4rem;
}
.main__content h1 {
font-size: 2.5rem;
margin-top: 2rem;
}
.main__content h2 {
font-size: 3rem;
}
.main__content p {
margin-top: 1rem;
font-size: 1.5rem;
}
}
#media screen and (max-width: 480px) {
.main__content h1 {
font-size: 2rem;
margin-top: 3rem;
}
.main__content h2 {
font-size: 2rem;
}
.main__content p {
margin-top: 2rem;
font-size: 1.5rem;
}
.main__btn {
padding: 12px 36px;
margin: 2.5rem 0;
}
}
/* Services Section */
.services {
background: #131313;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
}
.services h1 {
background-color: #ff8177;
background-image: linear-gradient( to right, #ff8177 0%, #ff867a 0%, #ff8c7f 21%, #f99185 52%, #cf556c 78%, #b12a5b 100%);
background-size: 100%;
-webkit-background-clip: text;
-moz-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
margin-bottom: 5rem;
font-size: 2.5rem;
}
.services__container {
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.services__card {
margin: 1rem;
height: 525px;
width: 400px;
border-radius: 4px;
background-image: linear-gradient( to bottom, rgba(0, 0, 0, 0) 0%, rgba(17, 17, 17, 0.6) 100%), url('/images/pic3.jpg');
background-size: cover;
position: relative;
color: #fff;
}
.services__card:before {
opacity: 0.2;
}
.services__card:nth-child(2) {
background-image: linear-gradient( to bottom, rgba(0, 0, 0, 0) 0%, rgba(17, 17, 17, 0.9) 100%), url('/images/pic4.jpg');
}
.services__card h2 {
position: absolute;
top: 350px;
left: 30px;
}
.services__card p {
position: absolute;
top: 400px;
left: 30px;
}
.services__card button {
color: #fff;
padding: 10px 20px;
border: none;
outline: none;
border-radius: 4px;
background: #f77062;
position: absolute;
top: 440px;
left: 30px;
font-size: 1rem;
}
.services__card button:hover {
cursor: pointer;
}
.services__card:hover {
transform: scale(1.075);
transition: 0.2s ease-in;
cursor: pointer;
}
#media screen and (max-width: 960px) {
.services {
height: 1600px;
}
.services h1 {
font-size: 2rem;
margin-top: 12rem;
}
}
#media screen and (max-width: 480px) {
.services {
height: 1400px;
}
.services h1 {
font-size: 1.2rem;
}
.services__card {
width: 300px;
}
}
/* Footer CSS */
.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;
}
.social__icons {
display: flex;
justify-content: space-between;
align-items: center;
width: 240px;
}
.social__logo {
color: #fff;
justify-self: start;
margin-left: 20px;
cursor: pointer;
text-decoration: none;
font-size: 2rem;
display: flex;
align-items: center;
margin-bottom: 16px;
}
.website__rights {
color: #fff;
}
#media screen and (max-width: 820px) {
.footer__links {
padding-top: 2rem;
}
#footer__logo {
margin-bottom: 2rem;
}
.website__rights {
margin-bottom: 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%;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>HTML CSS Website</title>
<link rel="stylesheet" href="styles.css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" crossorigin="anonymous" />
<link href="https://fonts.googleapis.com/css2?family=Kumbh+Sans:wght#400;700&display=swap" rel="stylesheet" />
</head>
<body style="background-color:#131313;">
<div class="grid-container">
<nav class="navbar">
<div class="navbar__container">
<div class="navbar__toggle" id="mobile-menu">
<span class="bar"></span> <span class="bar"></span>
<span class="bar"></span>
</div>
<ul class="navbar__menu">
<li class="navbar__item">
Coming Soon
</li>
<li class="navbar__item">
Coming Soon
</li>
<li class="navbar__item">
Coming Soon
</li>
</ul>
</div>
</nav>
</div>
<div class="main">
<div class="main__container">
<div class="main__content">
<h1>Starfield</h1>
<h2>Explore Images from NASA</h2>
<p>By Nick</p>
</div>
</div>
</div>
<div class="main__content">
<div class="main__container">
<div class="item2">
<h1>NASA Astronomy Picture Of The Day</h1>
<h2 id="title" /h2>
<h3>Date: <span id="date"></span></h3>
<img id="pic" src="" alt="NASA Picture Of The Day" width="30%">
</div>
</div>
<script src="app.js"></script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>HTML CSS Website</title>
<link rel="stylesheet" href="styles.css" />
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.14.0/css/all.css"
integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc"
crossorigin="anonymous"
/>
<link
href="https://fonts.googleapis.com/css2?family=Kumbh+Sans:wght#400;700&display=swap"
rel="stylesheet"
/>
</head>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto;
grid-gap: 10px;
padding: 10px;
}
.grid-container > div {
text-align: Left;
padding: 20px 0;
font-size: 30px;
}
</style>
<body style="background-color:#131313;">
<div class="grid-container">
<div class="item1">
<div class="main">
<div class="main__container">
<div class="main__content">
<h1>Starfield</h1>
<h2>Explore Images from NASA</h2>
<p>By Nikunj Patel</p></div>
</div>
</div>
</div>
<div class="main__content">
<div class="main__container">
<div class="item2">
<h1>NASA Astronomy Picture Of The Day</h1>
<h2 id="title"></h2>
<h3>Date: <span id="date"></span></h3>
<img id="pic" src="" alt="NASA Picture Of The Day" width="100%">
<p id="explanation"></p>
</div>
</div>
</div>
<div class="item3">3</div>
<div class="item4">4</div>
</div>
<script src="app.js"></script>
</body>
</html>
So why does the first html produce an image and the second doesnt but both return the Error:
(Both HTMLs use the same CSS and Js files)
"{
"message": "Uncaught TypeError: Cannot set properties of null (setting 'textContent')",
"filename": "https://stacksnippets.net/js",
"lineno": 680,
"colno": 56
}"
i want to use the formatting of this second html file instead of the first and i was surprised no image was produced

Uncaught TypeError: Cannot read properties of null (reading 'addEventListener') at (index):72

let searchBtn = document.querySelector("#Search-btn");
let searchBar = document.querySelector(".search-bar-container");
searchBtn.addEventListener("click", () => {
searchBtn.classlist.toggle("fa-times");
searchBar.classList.toggle("active");
});
let searchBtn = document.querySelector ( '#Search-btn');
let searchBar = document.querySelector ( '.search-bar-container');
searchBtn.addEventListener('click', () =>{
searchBtn.classlist.toggle('fa-times');
searchBar.classList.toggle('active');
});
#import url('https://fonts.googleapis.com/css2?family=Nunito:wght#200;300;400;600;700&display=swap');
:root {
--orange:#ffa500;
}
*{
font-family: 'Nunito', sans-serif;
margin: 0; padding: 0;
box-sizing: border-box;
text-transform: capitalize;
outline: none; border: none;
transition: all .2s linear;
text-decoration: none;
}
*::selection{
background: var(--orange);
color: #fff;
}
html{
font-size: 62.5%;
overflow-x: hidden;
scroll-padding-top: 6rem;
scroll-behavior: smooth;
}
header{
position: fixed;
top: 0; left: 0; right: 0;
background: #333;
z-index: 1000;
display: flex;
align-items: center;
justify-content: space-between;
padding: 2rem 9%;
}
header .logo {
font-size: 2rem;
font-weight: bolder;
color: #fff;
text-transform: uppercase;
}
header .logo span {
color: var(--orange);
}
header .navbar a{
font-size: 2rem;
color: #fff;
margin:0 .8rem;
}
header .navbar a:hover{
color: var(--orange);
}
header .icons i{
font-size: 2.5rem;
color:#fff;
cursor: pointer;
margin-right: 2rem;
}
header .icons i:hover{
color: var(--orange);
}
header .search-bar-container{
position: absolute;
top: 100%; left: 0; right: 0;
padding: 1.5rem 2rem;
background: #333;
border-top: .1rem solid rgba(225, 225, 225, .2);
display: flex;
align-items: center;
z-index: 1001;
clip-path: polygon(0 0, 100% 0, 0 0);
}
header .search-bar-container.active{
clip-path: polygon(0 0, 100% 0, 0 0);
}
#search-bar {
width: 100%;
padding: 1rem;
text-transform: none;
color: #333;
font-size: 1.7rem;
border-radius: 100rem;
}
header .search-bar-container label{
color: #fff;
cursor: pointer;
font-size: 3rem;
margin-left: 1.5rem;
}
header .search-bar-container label:hover {
color: var(--orange);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Travel Agency</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<span>T</span>ravel
<nav class="navbar">
home
book
package
services
review
contact
</nav>
<div class="icons">
<i class="fa fa-search" id="search-btn"></i>
<i class="fa fa-user" id="login-btn"></i>
</div>
<form action="" class="search-bar-container">
<input type="search" id="search-bar" placeholder="search here...">
<label for="search-bar" class="fa fa-search" ></label>
</form>
</header>
When I try to run my javascript code its give me an error. I do check my code and syntax twice i could not find the error please help me with that.

There two problems in your code, first #Search-btn id doen't exist, it should be #search-btn, and the second searchBtn.classlist.toggle('fa-times'); here classlist is wrong, it should be classList, like below code:
let searchBtn = document.querySelector('#search-btn');
let searchBar = document.querySelector('.search-bar-container');
searchBtn.addEventListener('click', () =>{
searchBtn.classList.toggle('fa-times');
searchBar.classList.toggle('active');
});
below snippet is exactly you snippet with just fixing two above problems:
let searchBtn = document.querySelector ( '#search-btn');
let searchBar = document.querySelector ( '.search-bar-container');
searchBtn.addEventListener('click', () =>{
searchBtn.classList.toggle('fa-times');
searchBar.classList.toggle('active');
});
#import url('https://fonts.googleapis.com/css2?family=Nunito:wght#200;300;400;600;700&display=swap');
:root {
--orange:#ffa500;
}
*{
font-family: 'Nunito', sans-serif;
margin: 0; padding: 0;
box-sizing: border-box;
text-transform: capitalize;
outline: none; border: none;
transition: all .2s linear;
text-decoration: none;
}
*::selection{
background: var(--orange);
color: #fff;
}
html{
font-size: 62.5%;
overflow-x: hidden;
scroll-padding-top: 6rem;
scroll-behavior: smooth;
}
header{
position: fixed;
top: 0; left: 0; right: 0;
background: #333;
z-index: 1000;
display: flex;
align-items: center;
justify-content: space-between;
padding: 2rem 9%;
}
header .logo {
font-size: 2rem;
font-weight: bolder;
color: #fff;
text-transform: uppercase;
}
header .logo span {
color: var(--orange);
}
header .navbar a{
font-size: 2rem;
color: #fff;
margin:0 .8rem;
}
header .navbar a:hover{
color: var(--orange);
}
header .icons i{
font-size: 2.5rem;
color:#fff;
cursor: pointer;
margin-right: 2rem;
}
header .icons i:hover{
color: var(--orange);
}
header .search-bar-container{
position: absolute;
top: 100%; left: 0; right: 0;
padding: 1.5rem 2rem;
background: #333;
border-top: .1rem solid rgba(225, 225, 225, .2);
display: flex;
align-items: center;
z-index: 1001;
clip-path: polygon(0 0, 100% 0, 0 0);
}
header .search-bar-container.active{
clip-path: inherit;
}
#search-bar {
width: 100%;
padding: 1rem;
text-transform: none;
color: #333;
font-size: 1.7rem;
border-radius: 100rem;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<header>
<span>T</span>ravel
<nav class="navbar">
home
book
package
services
review
contact
</nav>
<div class="icons">
<i class="fa fa-search" id="search-btn"></i>
<i class="fa fa-user" id="login-btn"></i>
</div>
<form action="" class="search-bar-container">
<input type="search" id="search-bar" placeholder="search here...">
<label for="search-bar" class="fa fa-search" ></label>
</form>
</header>

There is nothing called #Search-btn, it's #search-btn. So, your JavaScript should look like
let searchBtn = document.querySelector ( '#search-btn');
let searchBar = document.querySelector ( '.search-bar-container');
searchBtn.addEventListener('click', () =>{
searchBtn.classlist.toggle('fa-times');
searchBar.classList.toggle('active');
});
Next, the toggle function has to be used on classList. But, in this line:
searchBtn.classlist.toggle('fa-times');
You can see that you're calling classlist there.
After you fix that, this is what your JavaScript code should look like:
let searchBtn = document.querySelector ( '#search-btn');
let searchBar = document.querySelector ( '.search-bar-container');
searchBtn.addEventListener('click', () => {
searchBtn.classList.toggle('fa-times', true);
searchBar.classList.toggle('active', true);
});