Eventlistenerbutton unresponsive

Eventlistenerbutton unresponsive - javascript

I have created a login form button on my website.
It is opening but the closing button is not working.
HTML:-
<!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>Welcome to Hotel</title>
<!-- font cdn useful -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
/>
<!-- css file link -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!-- hearder section -->
<header>
<a href="#"class="logo"><span>H<span>otel<a>
<nav class="navbar">
home
books
packages
services
gallery
reviews
contact
</nav>
<div class="icons">
<i class="fas fa-search" id="search-btn"></i>
<i class="fas 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="fas fa-search" ></label>
</form>
</header>
<!-- header endeing -->
<!-- login form container -->
<div class="login-form-container">
<i class="fas fa-times" id="form-close"></i>
<form action="">
<h3>login</h3>
<input type="email" class="box" placeholder="enter your email">
<input type="password" class="box" placeholder="enter your password">
<input type="submit" value="login" class="btn">
<input type="checkbox" id="remember">
<label for="remember">Remember me</label>
<p>Forgot password? click here</p>
<p>dont have a account? register here</p>
</form>
</div>
<!-- js file link -->
<script src="main.js"></script>
</body>
</html>
css:
#import url('https://fonts.googleapis.com/css2?family=Nunito:wght#200;300;400;600;700&family=Ubuntu&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;
text-decoration: none;
transition: all 0.2s linear;
}
*::selection{
background:var(--orange);
color: #fff;
}
html{
font-size: 62.5%;
overflow-x: hidden;
scroll-padding-top: 6rem;
scroll-behavior: smooth;
}
.btn{
display: inline-block;
margin-top: 1rem;
background:var(--orange);
color: #fff;
padding: .8rem 3rem;
border: .2rem solid var(--orange);
cursor: pointer;
font-size: 1.7rem;
}
.btn:hover{
background: rgba(255,165,0,.2);
color: var(--orange);
}
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: 2.5rem;
font-weight: bolder;
color: #fff;
text-transform: uppercase;
}
header .logo span{
color: var(--orange);
}
header .navbar a{
color: #fff;
font-size: 2rem;
margin: .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(255,255,255,.2);
display: flex;
align-items: center;
z-index: 1001;
clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
}
header .search-bar-container.active{
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
header .search-bar-container #search-bar{
width: 100%;
padding: 1rem;
text-transform: none;
color: #333;
font-size: 1.7rem;
border-radius: 1rem;
}
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);
}
.login-form-container{
position: fixed;
top: -120%;
left: 0;
z-index: 10000;
min-height: 100vh;
width: 100%;
background: rgba(0,0,0,.7);
display: flex;
align-items: center;
justify-content: center;
}
.login-form-container.active{
top: 0;
}
.login-form-container form{
margin: 2rem;
padding: 1.5rem 2rem;
border-radius: .5rem;
background: #fff;
width: 50rem;
}
.login-form-container form h3{
font-size: 3rem;
color: #444;
text-transform: uppercase;
text-align: center;
padding: 1rem 0;
}
.login-form-container form .box{
width: 100%;
padding: 1rem;
font-size: 1.7rem;
color: #333;
margin: .6rem 0;
border: .1rem solid rgba(0,0,0,0.3);
text-transform: none;
}
.login-form-container form .box:focus{
border-color: var(--orange);
}
.login-form-container form #remember{
margin: 2rem 0;
}
.login-form-container form label{
font-size: 1.5rem;
}
.login-form-container form .btn{
display: block;
width: 100%;
}
.login-form-container form p{
padding: .5rem 0;
font-size: 1.5rem;
color: #666;
}
.login-form-container form p a{
color: var(--orange);
}
.login-form-container form p a:hover{
color:#333;
text-decoration: underline;
}
.login-form-container #form-close{
position: absolute;
top: 2rem;
right: 3rem;
font-size: 5rem;
color: #fff;
cursor: pointer;
}
JS(the problem)
let searchbtn = document.querySelector('#search-btn');
let searchbar = document.querySelector('.search-bar-container');
let formbtn = document.querySelector('#login-btn');
let loginForm = document.querySelector('.login-form-container');
let formclose = document.querySelector('.form-close');
window.onscroll = () =>{
searchbtn.classList.remove('fa-times');
searchbar.classList.remove('active');
}
searchbtn.addEventListener('click', () =>{
searchbtn.classList.toggle('fa-times');
searchbar.classList.toggle('active');
});
formbtn.addEventListener('click', () =>{
loginForm.classList.add('active');
});
formclose.addEventListener('click', () =>{
loginForm.classList.remove('active');
});
console reply:
[enter image description here][1]
[1]: https://i.stack.imgur.com/vfdtp.png

You made a small typo in the javascript file.
let formclose = document.querySelector(".form-close");
Should be
let formclose = document.querySelector("#form-close");
Since the element has an id of form-close and not a class, you need to use the '#' instead of the '.'

Related

How to solve this problem with responsive - blank space on right side?

I'm teaching coding in Visual Studio Code, and I found some template and tried make website. After finishing coding I have problem with responsive which u can see on pictures. There is blank white space and I dont know how to fix it.
https://i.stack.imgur.com/8jvI4.jpg
I tried to change values on #media in CSS, but nothing changes. I would really like someone to help me so I know in future where I made a mistake. I also have this reset.css - that is bootstrap.
Thanks in regards.
/* for navigation*/
var dugme = document.getElementById('dugmeNav');
dugme.addEventListener('click',pokreni,false);
function pokreni() {
document.getElementById("myNav").classList.toggle("meni_sirina");
document
.querySelector(".meni-dugmici")
.classList.toggle("meni-dugmici_style");
}
/* FONTOVI */
#font-face {
font-family: 'Raleway';
src: url('../fontovi/Raleway.ttf');
}
#font-face {
font-family: 'Open Sans';
src: url('../fontovi/OpenSans.ttf');
}
#font-face {
font-family: 'Poppins';
src: url('../fontovi/Poppins.ttf');
}
#font-face {
font-family: 'Roboto';
src: url('../fontovi/Roboto.ttf');
}
/* KRAJ FONTOVA */
body {
font-family: 'Raleway', sans-serif;
color: #0c0c0c;
background-color: #ffffff;
}
.margine {
margin: 90px 0;
}
.padding {
padding: 90px 0;
}
.padding2 {
padding: 45px 0;
}
.padding2-top {
padding-top: 45px;
}
.padding2-bottom {
padding-bottom: 45px;
}
.padding-top {
padding-top: 90px;
}
.padding-bottom {
padding-bottom: 90px;
}
.naslovi h2 {
font-weight: bold;
color: #1d1e31;
text-align: center;
position: relative;
padding-bottom: 10px;
}
.naslovi h2::before {
content: "";
width: 100px;
height: 1px;
background-color: #8547ca;
position: absolute;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
bottom: 0;
}
.hero_next_section-margin {
margin-top: 100px;
}
/*header section*/
.omotac {
height: 100vh;
position: relative;
background: -webkit-gradient(linear, left top, right top, color-stop(50%, #f2f7fd), color-stop(45%, #1d1e31));
background: linear-gradient(to right, #f2f7fd 50%, #1d1e31 45%);
}
.sub_page .omotac {
height: auto;
}
#header_sekcija .sekcija {
padding-right: 25px;
padding-left: 25px;
}
#header_sekcija .nav_container {
margin: 0 auto;
}
.navigacija-sekcija.navbar-prosirenje .navbar-nav .nav-link img {
width: 22px;
margin-right: 15px;
}
.navigacija-sekcija.navbar-prosirenje .navbar-nav .nav-link {
padding: 0px 25px;
color: #fefeff;
text-align: center;
font-family: "Roboto", sans-serif;
}
.meni-dugmici {
z-index: 9;
position: absolute;
right: 15px;
top: 14px;
}
.meni-dugmici button {
margin-top: 12px;
outline: none;
border: none;
background-color: transparent;
}
.meni-dugmici span {
display: block;
width: 35px;
height: 5px;
background-color: #fff;
margin: 7px 0;
-webkit-transition: all .3s;
transition: all .3s;
}
.meni-dugmici .meni-dugmici .s-2 {
-webkit-transition: all .1s;
transition: all .1s;
}
.meni-dugmici_style button {
position: fixed;
right: 29px;
top: 14px;
}
.meni-dugmici_style button .s-1 {
-webkit-transform: rotate(45deg) translateY(17px);
transform: rotate(45deg) translateY(17px);
}
.meni-dugmici_style button .s-2 {
-webkit-transform: translateX(100px);
transform: translateX(100px);
}
.meni-dugmici_style button .s-3 {
-webkit-transform: rotate(-45deg) translateY(-17px);
transform: rotate(-45deg) translateY(-17px);
}
.overlay {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: black;
background-color: rgba(0, 0, 0, 0.9);
overflow-x: hidden;
-webkit-transition: 0.5s;
transition: 0.5s;
}
.overlay .closebtn {
position: absolute;
top: 0;
right: 30px;
font-size: 60px;
}
.overlay a {
padding: 0px;
text-decoration: none;
font-size: 22px;
color: #f1f1f1;
display: block;
-webkit-transition: 0.3s;
transition: 0.3s;
}
.overlay-sadrzaj {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.meni_sirina {
width: 100%;
}
a,
a:hover,
a:focus {
text-decoration: none;
}
a:hover,
a:focus {
color: initial;
}
.btn,
.btn:focus {
outline: none !important;
-webkit-box-shadow: none;
box-shadow: none;
}
.navigacija-sekcija .nav_search-btn {
background-image: url(../slike/search-icon.png);
background-size: 18px;
background-repeat: no-repeat;
width: 35px;
height: 35px;
padding: 0;
border: none;
margin: 0 40px 0 15px;
background-position: center;
}
.navbar-logo {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.navbar-logo img {
width: 40px;
margin-right: 5px;
}
.navbar-logo h1 {
text-transform: uppercase;
font-size: 24px;
font-weight: 700;
color: #8547ca;
margin-top: 5px;
}
.navigacija-sekcija {
z-index: 99999;
padding: 15px 0;
}
.navigacija-sekcija .navbar-toggler {
outline: none;
}
.navigacija-sekcija .navbar-toggler .navbar-toggler-icon {
background-image: url(../slike/menu.png);
background-size: 55px;
}
.quote_btn-container a {
display: inline-block;
padding: 5px 15px;
background-color: #fc5d35;
color: #f7f7f7;
font-size: 14px;
text-transform: uppercase;
}
/*end header section*/
/* contact section */
.kontakt_sekcija {
background-color: #f2f7fd;
}
.kontakt_sekcija h3 {
font-size: 26px;
color: #010103;
font-weight: 600;
font-family: 'Raleway', sans-serif;
margin-bottom: 35px;
}
.kontakt_sekcija .row {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.kontakt_sekcija input {
border: none;
outline: none;
border-bottom: 1px solid #000;
width: 90%;
margin: 15px 0;
background-color: transparent;
}
.kontakt_sekcija input::-webkit-input-placeholder {
color: #595959;
font-size: 14px;
}
.kontakt_sekcija input:-ms-input-placeholder {
color: #595959;
font-size: 14px;
}
.kontakt_sekcija input::-ms-input-placeholder {
color: #595959;
font-size: 14px;
}
.kontakt_sekcija input::placeholder {
color: #595959;
font-size: 14px;
}
.kontakt_form-container #posaljiDugme {
border: none;
background-color: #8c60bd;
color: #fff;
font-size: 15px;
padding: 15px 45px;
border-radius: 30px;
text-transform: uppercase;
font-weight: bold;
}
#kontaktnaslov {
font-size: 26px;
color: #010103;
font-weight: 600;
font-family: 'Raleway', sans-serif;
margin-bottom: 35px;
}
.contact_img-box {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.contact_img-box img {
width: 100%;
}
/* end contact section */
/* info section */
.info_sekcija {
background-color: #363636;
color: #ffffff;
font-family: 'Poppins', sans-serif;
padding-left: 20px;
}
.info_sekcija h4 {
margin-bottom: 12px;
font-size: 22px;
}
.info_logo-box {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.info_logo-box h3 {
font-weight: bold;
padding: 5px 35px;
border-bottom: 1.5px solid #8547ca;
}
.info_sekcija ul {
padding: 0;
}
.info_sekcija ul li {
list-style-type: none;
margin: 3px 0;
}
.info_sekcija ul li a {
color: #ffffff;
}
.info_sekcija ul li a:hover {
color: #8547ca;
}
.info_sekcija .form_container input {
width: 225px;
height: 40px;
padding: 10px;
}
.info_sekcija .form_container::-webkit-input-placeholder {
color: #ccc8c8;
}
.info_sekcija .form_container:-ms-input-placeholder {
color: #ccc8c8;
}
.info_sekcija .form_container::-ms-input-placeholder {
color: #ccc8c8;
}
.info_sekcija .form_container::placeholder {
color: #ccc8c8;
}
.info_sekcija .form_container .pretplataDugme {
background-color: #8c60bd;
border: none;
outline: none;
color: #fff;
padding: 8px 30px;
margin-top: 15px;
font-size: 15px;
text-transform: uppercase;
}
.mreze_container {
width: 95%;
margin: 0 auto;
border-top: 1px solid #898989;
padding: 25px 0;
}
.info_sekcija .social-box {
margin: 0 auto;
width: 400px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.info_sekcija .social-box img {
width: 35px;
margin-right: 5px;
}
/* end info section */
/* footer section*/
.footer_sekcija {
background-color: #8547ca;
padding: 20px;
}
.footer_sekcija p {
margin: 0;
text-align: center;
color: #fefdfc;
}
.footer_sekcija a {
color: #fefdfc;
}
#media (max-width: 1280px) {
.slajder_sekcija .img-box img {
height: auto;
width: 100%;
}
.slajder_sekcija .detalji-box h2 {
font-size: 4.5rem;
}
}
#media (max-width: 992px) {
.slajder_sekcija .detalji-box h2 {
font-size: 3.5rem;
}
.slajder_sekcija .detalji-box h3 {
font-size: 2rem;
}
.slajder_sekcija .carousel-control-prev {
top: 15px;
}
.slajder_sekcija .carousel-control-next {
bottom: 75px;
}
}
#media (max-width: 769px) {
.omotac {
background: linear-gradient(to bottom, #f2f7fd 50%, #1d1e31 45%);
}
.sub_page .omotac {
background: linear-gradient(to bottom, #f2f7fd 50%, #f2f7fd 45%);
}
.omotac {
height: auto;
}
.meni-dugmici span {
background-color: #1d1e31;
}
.meni-dugmici_style button span {
background-color: #fff;
}
.carousel-indicators {
display: none;
}
.slajder_sekcija .img-box {
margin-top: 22.5px;
}
.slajder_sekcija .carousel-control-prev,
.slajder_sekcija .carousel-control-next {
display: none;
}
.skidanje_sekcija .main-img-box {
margin-top: 22.5px;
}
.onama_sekcija {
background-image: linear-gradient(rgba(255, 255, 255, .8), rgba(255, 255, 255, .8)), url("../slike/about-bg.jpg");
}
.onama_sekcija .detalji-box {
text-align: left;
height: auto;
}
.onama_sekcija .detalji-box.b-1 a {
margin: 0 auto;
}
.onama_sekcija .detalji-box.b-1 {
margin-bottom: 22.5px;
}
.info_sekcija .col-md-3 {
padding: 10px 12.50px;
text-align: left;
}
.contact_img-box {
margin-top: 22.5px;
}
.kol-levo {
float: none;
display: block;
margin: 0 auto;
width: 500px;
}
.kol-desno {
margin: 50px 0px 0px 180px;
}
.b-3 p {
font-size: 20px;
font-weight: bold;
color: #8c60bd;
}
.b-4 p {
margin-top: 25px;
font-size: 20px;
font-weight: bold;
color: #8c60bd;
}
}
#media (max-width: 576px) {
.kontakt_sekcija input {
width: 100%;
}
.info_sekcija .social-box {
width: auto;
}
}
#media (max-width: 400px) {
.slajder_sekcija .detalji-box h3 {
font-size: 1.5rem;
}
.slajder_sekcija .detalji-box h2 {
font-size: 2.5rem;
}
.pretplata_sekcija form {
flex-direction: column;
}
.pretplata_sekcija form input {
width: 100%;
height: 45px;
}
.pretplata_sekcija form .pretplataDugme {
width: 150px;
height: 45px;
line-height: 45px;
margin-top: 25px;
}
}
#media (max-width: 376px) {
.kol-levo {
float: none;
display: block;
margin: 0 auto;
width: 250px;
padding: 0;
}
.kol-desno {
margin: 50px 0px 0px 50px;
padding: 0;
}
.b-3 p {
padding-top: 10px;
color: #FFF;
font-size: 17px;
}
.b-4 p {
margin-top: 20px;
color: #FFF;
font-size: 17px;
}
}
#media (min-width: 1200px) {
.container {
max-width: 1170px;
}
}
<!DOCTYPE html>
<html lang="sr">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Abdans - Kontakt</title>
<!-- slajder css -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.3/assets/owl.carousel.min.css">
<!-- CSS -->
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/stil.css">
</head>
<body>
<!-- Header deo -->
<div class="omotac">
<header class="header_sekcija">
<div class="sekcija">
<nav class="navbar navbar-prosirenje navigacija-sekcija">
<div class="navbar-vracanje">
<div class="meni-dugmici">
<button id="dugmeNav">
<span class="s-1"> </span>
<span class="s-2"> </span>
<span class="s-3"> </span>
</button>
</div>
<div id="myNav" class="overlay">
<div class="overlay-sadrzaj">
POČETNA
O NAMA
ISKUSTVA KORISNIKA
KONTAKT
</div>
</div>
</div>
</nav>
<a class="navbar-logo" href="index.html">
<h1>
ABDANS
</h1>
</a>
</div>
</header>
<!-- Zavrsava se header deo -->
<!-- kontakt -->
<section class="kontakt_sekcija padding">
<div class="container">
<div class="d-flex ">
<h2 id="kontaktnaslov">
Kontaktirajte nas
</h2>
</div>
<div class="row">
<div class="col-md-6">
<form action="kontakt.php" method="get">
<div class="kontakt_form-container">
<div>
<div>
<input type="text" placeholder="Ime">
</div>
<div>
<input type="text" placeholder="Broj telefona">
</div>
<div>
<input type="email" placeholder="Email">
</div>
<div class="mt-5">
<input type="text" placeholder="Poruka">
</div>
<div class="mt-5">
<input type="submit" value="pošalji" id="posaljiDugme">
</div>
</div>
</div>
</form>
</div>
<div class="col-md-6">
<div class="contact_img-box">
<img src="slike/contact-img.png" alt="">
</div>
</div>
</div>
</div>
</section>
<!-- zavrsavaju se kontakti -->
<!-- info -->
<section class="info_sekcija padding-top">
<div class="info_logo-box">
<h3>
ABDANS
</h3>
</div>
<div class="container padding2">
<div class="row">
<div class="col-md-3">
<h4>
O nama
</h4>
<p>
Firma se bavi prodajom BIO prehrambenih proizvoda.
</p>
</div>
<div class="col-md-3">
<h4>
Korisni linkovi
</h4>
<ul>
<li>
<a href="http://www.organiccentar.rs/prednosti/sta-organski-proizvodi.html">
Šta je BIO proizvod ?
</a>
</li>
<li>
<a href="#">
Kako preuzeti aplikaciju ?
</a>
</li>
<li>
<a href="onama.html">
O nama
</a>
</li>
</ul>
</div>
<div class="col-md-3">
<h4>
Kontaktirajte nas
</h4>
<p>
Kontaktirajte nas na svim društvenim mrežama, klikom na ikonicu ispod.
</p>
</div>
<div class="col-md-3">
<div class="pretplata_container">
<h4>
Newsletter
</h4>
<div class="form_container">
<form action="pretplata.php" method="post">
<input type="email" placeholder="Upišite vaš email" id="preplata_provera">
<input type="submit" value="Pretplati se" class="pretplataDugme">
</form>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="mreze_container">
<div class="social-box">
<a href="#">
<img src="slike/fb.png" alt="">
</a>
<a href="#">
<img src="slike/twitter.png" alt="">
</a>
<a href="#">
<img src="slike/linkedin.png" alt="">
</a>
<a href="#">
<img src="slike/instagram.png" alt="">
</a>
</div>
</div>
</div>
</section>
<!-- zavrsava se info -->
<!-- footer -->
<footer class="sekcija footer_sekcija">
<p>
© 2022 Sva prava zadržana. Napravljen od strane
Nikole Tešića
</p>
</footer>
<!-- zavrsava se footer -->
<!-- javasript -->
<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/reset.js"></script>
<script src="js/navigacija.js"></script>
</div>
</body>
</html>
Thanks in regards.

Try width: 100vw; in the body element(or the element that have background color)

why arent my links white and without the line under?

im trying to create a disney plus clone and im just starting out. In the navbar the links should be white and without the underline i have the no text decoration but it still shows up i dont understand.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
width: 100%;
background: #0c111b;
position: relative;
font-family: roboto, sans-serif;
}
.navbar{
width: 100%;
height: 80px;
position: fixed;
top: 0;
left: 0;
padding: 0 4%;
background: #0c111b;
z-index: 9;
display: flex;
align-items: center;
}
.brand-logo{
height: 70px;
}
.nav-links{
margin-top: 10px;
display: flex;
list-style: none;
text-decoration: none;
}
.nav-items{
text-decoration: none;
margin-left: 20px;
text-transform: capitalize;
color: #fff;
opacity: 0,9;
}
.right-container{
display: block;
margin-left: auto;
}
.search-box{
border: none;
border-bottom: 1px solid #aaa;
background: transparent;
outline: none;
height: 30px;
color: #fff;
width: 250px;
text-transform: capitalize;
font-size: 16px;
font-weight: 500;
transition: .5s;
}
.search-box:focus{
width: 400px;
border-color: #1f80e0;
}
.sub-btn{
background: #1f80e0;
height: 30px;
padding: 0 20px;
color: #fff;
border-radius: 5px;
border: none;
outline: none;
text-transform: uppercase;
font-weight: 700;
font-size: 12px;
margin: 0 10px;
}
.login-link{
color: #fff;
opacity: 0.9;
text-transform: uppercase;
font-size: 15px;
font-weight: 700;
text-decoration: none;
}
<!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>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav class="navbar">
<img src="images/logo.png" class="brand-logo" alt="">
<ul class="nav-links">
<li class="nav-items">TV</li>
<li class="nav-items">movies</li>
<li class="nav-items">sports</li>
<li class="nav-items">premium</li>
</ul>
<div class="right-container">
<input type="text" class="search-box" placeholder="search">
<button class="sub-btn">Subscribe</button>
login
</div>
</nav>
</body>
</html>

Default browser styles for the <a> element include values for properties:
color
text-decoration
and these default values will always apply unless you explicitly override them:
.nav-items {
margin-left: 20px;
text-transform: capitalize;
opacity: 0.9;
}
.nav-items a {
text-decoration: none;
color: #fff;
}

Browsers are applying embedded CSS.
by default, links are blue (purple then visited) and underlined, this is why you have these styles.
You can check the option to see the browser styles to verify this.
In every project you will always have to override default CSS styles, unless you use CSS frameworks, such as bootstrap, etc

Use text-decoration:none;for your nav-items a element in your css.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
width: 100%;
background: #0c111b;
position: relative;
font-family: roboto, sans-serif;
}
.navbar{
width: 100%;
height: 80px;
position: fixed;
top: 0;
left: 0;
padding: 0 4%;
background: #0c111b;
z-index: 9;
display: flex;
align-items: center;
}
.brand-logo{
height: 70px;
}
.nav-links{
margin-top: 10px;
display: flex;
list-style: none;
text-decoration: none;
}
.nav-items{
text-decoration: none;
margin-left: 20px;
text-transform: capitalize;
color: #fff;
opacity: 0,9;
}
.right-container{
display: block;
margin-left: auto;
}
.search-box{
border: none;
border-bottom: 1px solid #aaa;
background: transparent;
outline: none;
height: 30px;
color: #fff;
width: 250px;
text-transform: capitalize;
font-size: 16px;
font-weight: 500;
transition: .5s;
}
.search-box:focus{
width: 400px;
border-color: #1f80e0;
}
.sub-btn{
background: #1f80e0;
height: 30px;
padding: 0 20px;
color: #fff;
border-radius: 5px;
border: none;
outline: none;
text-transform: uppercase;
font-weight: 700;
font-size: 12px;
margin: 0 10px;
}
.login-link{
color: #fff;
opacity: 0.9;
text-transform: uppercase;
font-size: 15px;
font-weight: 700;
text-decoration: none;
}
.nav-items a {
text-decoration: none;
color: #fff;
}
<!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>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav class="navbar">
<img src="images/logo.png" class="brand-logo" alt="">
<ul class="nav-links">
<li class="nav-items">TV</li>
<li class="nav-items">movies</li>
<li class="nav-items">sports</li>
<li class="nav-items">premium</li>
</ul>
<div class="right-container">
<input type="text" class="search-box" placeholder="search">
<button class="sub-btn">Subscribe</button>
login
</div>
</nav>
</body>
</html>

You have targeted wrong css just add anchor tag to .nav-items class.Bydefault it has blue color and text-decoration-underline property so remove the default behavior by adding your css.
.nav-items a {
text-decoration: none;
color: #fff;
}

Prevent header and footer divs from overlapping main div

I'm new to coding and I decided to try and learn HTML and CSS last night. I'm working on a chat UI. But I'm having a problem with my header and footer div overlapping the chat div.
I'm also having a problem with the message input I'm trying to fix the
input to the bottom of chat div but everything I tried didn't work.
// This is just to append dummy messages.
$(document).ready(function() {
setTimeout(() => {
for (let i = 0; i < 10; i++) {
let date = new Date();
let hours = date.getHours();
let minutes = date.getMinutes();
let message_content = `
<div class="chat_message">
<div class="chat_person_name"><p>Dummy User</p></div>
<div class="chat_message_content"><p>Dummy Message</p></div>
<div class="chat_time_stamp"><p>${hours} : ${minutes}</p></div>
</div>`;
$(".message_area").append(message_content);
$(".chat_messages").animate({
scrollTop: $(".chat_messages").prop("scrollHeight")
}, 1000);
}
}, 5000);
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 16px;
scroll-behavior: smooth;
}
body {
line-height: 1.4;
color: #333333;
font-family: Helvetica, Arial, sans-serif;
}
.chat {
display: flex;
}
.chat_header {
width: 100%;
padding: 20px;
position: fixed;
display: flex;
background: #8064A2;
background: -webkit-linear-gradient(to right, #8064A2, #000000);
background: linear-gradient(to right, #8064A2, #000000);
color: #FFFFFF;
}
.chat_sidebar {
height: 100vh;
color: #FFFFFF;
background-color: #2A2A2A;
overflow-y: scroll;
display: block;
}
.chat_main {
flex-grow: 1;
display: flex;
background-color: #2A2A2A;
flex-direction: column;
max-height: 100vh;
}
.message_area {
margin-bottom: 16px;
}
.chat_messages {
flex-grow: 1;
padding: 24px 24px 0;
overflow-y: scroll;
}
.chat_message {
width: 50%;
background-color: #212121;
padding: 10px 10px 0;
color: #B9B9B9;
animation-name: msg-ani;
animation-duration: 0.5s;
border-radius: 0 10px 10px 10px;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 10px;
}
.chat_person_name {
font-weight: bold;
color: #FFFFFF;
}
.chat_time_stamp {
text-align: right;
color: #FFFFFF;
font-weight: 500;
}
.compose {
display: flex;
flex-shrink: 0;
margin-top: 16px;
padding: 2px;
}
.compose form {
display: flex;
flex-grow: 1;
margin-right: 1px;
}
.compose input {
border: 1px solid #EEEEEE;
border-radius: 100px;
width: 100%;
padding: 12px;
margin: 0 16px 0 0;
flex-grow: 1;
font-size: 14px;
outline: none;
}
.compose button {
cursor: pointer;
padding: 12px;
background: #8064A2;
background: -webkit-linear-gradient(to right, #8064A2, #000000);
background: linear-gradient(to right, #8064A2, #000000);
border: none;
color: #F3F3F3;
font-size: 16px;
transition: background 0.3s ease;
border-radius: 100px;
}
.compose button:hover {
background: #8064A2;
background: -webkit-linear-gradient(to right, #000000, #8064A2);
background: linear-gradient(to right, #000000, #8064A2);
}
.list-title {
font-weight: 500;
font-size: 18px;
margin-bottom: 4px;
padding: 12px 24px 0;
text-align: center;
}
.user_item {
display: flex;
padding: 0;
margin: 0;
height: 44px;
align-items: center;
cursor: pointer;
clear: both;
position: relative;
font-weight: 500;
font-size: 0.9em;
border-bottom: 1px solid #F3F3F3;
}
.user_label {
color: #F3F3F3;
font-weight: 700 !important;
vertical-align: middle;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 32px;
display: inline-block;
font-size: 14px !important;
margin-left: -26px;
cursor: default;
position: absolute;
left: 75px;
max-width: 170px;
}
.chat_footer {
width: 100%;
padding: 20px;
position: fixed;
bottom: 0;
display: flex;
background: #8064A2;
background: -webkit-linear-gradient(to right, #8064A2, #000000);
background: linear-gradient(to right, #8064A2, #000000);
color: #ffffff;
}
<html>
<head>
<title>My Application</title>
<meta name="viewport" content="width=device-width, initial=1.0">
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="chat_header" style="display: block;">
<p>Logo Here</p>
</div>
<div class="chat">
<div id="side_bar" class="chat_sidebar">
<ul class="chat_nav" style="display: flex; flex-direction: row; justify-content: space-evenly;">
<li class="">
<a href="#users_container" data-role="users" data-toggle="tab">
<i class="fa fa-users"></i>
<span>Users</span><span class="users_online"></span>
</a>
</li>
<li class="">
<a href="#rooms_container" data-role="rooms" data-toggle="tab">
<i class="fa fa-list"></i>
<span>Rooms</span><span class="rooms_online"></span>
</a>
</li>
</ul>
<h3 class="list-title">Users Online</h3>
<hr>
<div class="user_item" style="color:#000000">
<div class="user_label">
<span class="user_label_span">Username one</span>
</div>
</div>
<div class="user_item" style="color:#000000">
<div class="user_label">
<span class="user_label_span">Username two</span>
</div>
</div>
<div class="user_item" style="color:#000000">
<div class="user_label">
<span class="user_label_span">Username three</span>
</div>
</div>
</div>
<div class="chat_main">
<div id="messages" class="chat_messages">
<div class="message_area">
</div>
<div class="compose flex-property ">
<form id="message-form">
<input name="message" type="text" placeholder="message" required autocomplete="off" class="message_input_field">
<button id="send_button">SEND</button>
</form>
</div>
</div>
</div>
</div>
<div class="chat_footer" style="display: block;">
<p>Footer Info Here</p>
</div>
<script src="script.js"></script>
</body>
</html>
I would appreciate any advice or help I could get.

Just remove position: fixed from both the classes for header and footer!
// This is just to append dummy messages.
$(document).ready(function() {
setTimeout(() => {
for (let i = 0; i < 10; i++) {
let date = new Date();
let hours = date.getHours();
let minutes = date.getMinutes();
let message_content = `
<div class="chat_message">
<div class="chat_person_name"><p>Dummy User</p></div>
<div class="chat_message_content"><p>Dummy Message</p></div>
<div class="chat_time_stamp"><p>${hours} : ${minutes}</p></div>
</div>`;
$(".message_area").append(message_content);
$(".chat_messages").animate({
scrollTop: $(".chat_messages").prop("scrollHeight")
}, 1000);
}
}, 5000);
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 16px;
scroll-behavior: smooth;
}
body {
line-height: 1.4;
color: #333333;
font-family: Helvetica, Arial, sans-serif;
}
.chat {
display: flex;
}
.chat_header {
width: 100%;
padding: 20px;
display: flex;
background: #8064A2;
background: -webkit-linear-gradient(to right, #8064A2, #000000);
background: linear-gradient(to right, #8064A2, #000000);
color: #FFFFFF;
}
.chat_sidebar {
height: 100vh;
color: #FFFFFF;
background-color: #2A2A2A;
overflow-y: scroll;
display: block;
}
.chat_main {
flex-grow: 1;
display: flex;
background-color: #2A2A2A;
flex-direction: column;
max-height: 100vh;
}
.message_area {
margin-bottom: 16px;
}
.chat_messages {
flex-grow: 1;
padding: 24px 24px 0;
overflow-y: scroll;
}
.chat_message {
width: 50%;
background-color: #212121;
padding: 10px 10px 0;
color: #B9B9B9;
animation-name: msg-ani;
animation-duration: 0.5s;
border-radius: 0 10px 10px 10px;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 10px;
}
.chat_person_name {
font-weight: bold;
color: #FFFFFF;
}
.chat_time_stamp {
text-align: right;
color: #FFFFFF;
font-weight: 500;
}
.compose {
display: flex;
flex-shrink: 0;
margin-top: 16px;
padding: 2px;
}
.compose form {
display: flex;
flex-grow: 1;
margin-right: 1px;
}
.compose input {
border: 1px solid #EEEEEE;
border-radius: 100px;
width: 100%;
padding: 12px;
margin: 0 16px 0 0;
flex-grow: 1;
font-size: 14px;
outline: none;
}
.compose button {
cursor: pointer;
padding: 12px;
background: #8064A2;
background: -webkit-linear-gradient(to right, #8064A2, #000000);
background: linear-gradient(to right, #8064A2, #000000);
border: none;
color: #F3F3F3;
font-size: 16px;
transition: background 0.3s ease;
border-radius: 100px;
}
.compose button:hover {
background: #8064A2;
background: -webkit-linear-gradient(to right, #000000, #8064A2);
background: linear-gradient(to right, #000000, #8064A2);
}
.list-title {
font-weight: 500;
font-size: 18px;
margin-bottom: 4px;
padding: 12px 24px 0;
text-align: center;
}
.user_item {
display: flex;
padding: 0;
margin: 0;
height: 44px;
align-items: center;
cursor: pointer;
clear: both;
position: relative;
font-weight: 500;
font-size: 0.9em;
border-bottom: 1px solid #F3F3F3;
}
.user_label {
color: #F3F3F3;
font-weight: 700 !important;
vertical-align: middle;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 32px;
display: inline-block;
font-size: 14px !important;
margin-left: -26px;
cursor: default;
position: absolute;
left: 75px;
max-width: 170px;
}
.chat_footer {
width: 100%;
padding: 20px;
bottom: 0;
display: flex;
background: #8064A2;
background: -webkit-linear-gradient(to right, #8064A2, #000000);
background: linear-gradient(to right, #8064A2, #000000);
color: #ffffff;
}
<html>
<head>
<title>My Application</title>
<meta name="viewport" content="width=device-width, initial=1.0">
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="chat_header" style="display: block;">
<p>Logo Here</p>
</div>
<div class="chat">
<div id="side_bar" class="chat_sidebar">
<ul class="chat_nav" style="display: flex; flex-direction: row; justify-content: space-evenly;">
<li class="">
<a href="#users_container" data-role="users" data-toggle="tab">
<i class="fa fa-users"></i>
<span>Users</span><span class="users_online"></span>
</a>
</li>
<li class="">
<a href="#rooms_container" data-role="rooms" data-toggle="tab">
<i class="fa fa-list"></i>
<span>Rooms</span><span class="rooms_online"></span>
</a>
</li>
</ul>
<h3 class="list-title">Users Online</h3>
<hr>
<div class="user_item" style="color:#000000">
<div class="user_label">
<span class="user_label_span">Username one</span>
</div>
</div>
<div class="user_item" style="color:#000000">
<div class="user_label">
<span class="user_label_span">Username two</span>
</div>
</div>
<div class="user_item" style="color:#000000">
<div class="user_label">
<span class="user_label_span">Username three</span>
</div>
</div>
</div>
<div class="chat_main">
<div id="messages" class="chat_messages">
<div class="message_area">
</div>
<div class="compose flex-property ">
<form id="message-form">
<input name="message" type="text" placeholder="message" required autocomplete="off" class="message_input_field">
<button id="send_button">SEND</button>
</form>
</div>
</div>
</div>
</div>
<div class="chat_footer" style="display: block;">
<p>Footer Info Here</p>
</div>
<script src="script.js"></script>
</body>
</html>

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);
});

Content Editable not saving with localStorage

I have created a basic content editable section using the tutorial from this website. HTML 5 Contenteditable
I have made a save button within the .toolbar at the top. When I go to change the text and press the .saveContent button, it doesn't save the content to localStorage so once refreshed, it disappears and goes back to the default text.
I have made the page as a .php page due to a login system I have made, would this be a factor at all in why it isn't working.
Code Here:
var theContent = $('#editable');
$('.saveContent').on('click', function() {
var editedContent = theContent.html();
localStorage.newContent = editedContent;
});
if(localStorage.getItem('newContent')) {
theContent.html(localStorage.getItem('newContent'));
}
/* ~ Copyright (c) Summit Learning Management System (made by students, for students). 2019. */
html > body {
overflow: hidden;
height: 100%;
margin: 0;
padding: 0;
font-family: 'Trebuchet MS', sans-serif;
}
#wrapper {
position: absolute;
overflow: hidden;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: #1B315E;
}
.backdrop {
background-image: url(Assets/Images/backdrop.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.loginBox {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 320px;
height: 420px;
background: rgba(0,0,0,0.6);
color: #FFF;
padding: 40px 30px;
box-sizing: border-box;
}
.loginBox p {
margin: 0;
padding: 0;
font-weight: bold;
}
.loginBox input {
width: 100%;
margin-bottom: 20px;
}
.loginBox input[type="text"], input[type="password"] {
border: none;
outline: none;
border-bottom: 1px solid #FFF;
background: transparent;
height: 40px;
font-size: 14px;
color: #FFF;
}
.loginBox input[type="submit"] {
border: none;
outline: none;
height: 40px;
font-size: 16px;
color: #FFF;
background: #777;
font-weight: bold;
}
.loginBox input[type="submit"]:hover {
cursor: pointer;
color: #FFF;
background: #888;
}
.institution, .message {
font-size: 12px;
text-align: justify;
}
* {
box-sizing: border-box;
}
.navigation {
background: #333;
overflow: hidden;
font-family: 'Trebuchet MS', sans-serif;
}
.navLinks {
margin-top: 8px;
margin-right: 4px;
float: right;
border: none;
outline: none;
color: #1B315E;
background: #B6B6B6;
padding: 4px 6px;
font-size: 16px;
text-align: center;
}
.navLinks:hover {
background: #A5A5A5;
}
.menuDropDown {
float: left;
overflow: hidden;
}
.menuDropDown > .menuButton {
border: none;
outline: none;
color: #FFF;
background: inherit;
font: inherit;
margin: 0;
font-size: 16px;
padding: 12px 6px;
}
.menuButton:hover, .navigation > .menuDropDown:hover > .menuButton {
background: #999;
color: #1B315E;
outline: none;
border: none;
}
.menuContent {
display: none;
width: 100%;
background: none;
position: absolute;
z-index: 1;
left: 0;
overflow: auto;
max-height: 85vh;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.menuDropDown:hover > .menuContent {
display: block;
}
.menuColumn {
float: left;
width: 25%;
padding: 8px;
overflow-y: auto;
background: #999;
height: 235px;
}
.menuColumn > a {
float: none;
color: #1B315E;
padding: 10px;
font-size: 14px;
text-decoration: none;
display: block;
text-align: left;
}
.menuRow:after {
content: "";
display: table;
clear: both;
}
.menuColumn > a:hover {
background: #A5A5A5;
}
.menuColumn > a.current {
background: #B6B6B6;
}
.menuHeader {
color: #1B315E;
margin-top: 0px;
margin-bottom: 8px;
}
.workspaceMain {
float: left;
width: 72.5%;
height: calc(100vh - 43px);
position: relative;
overflow: auto;
padding-right: 2px;
background: #FFF;
}
.toolbar {
background: #777;
border-bottom: 1px solid #666;
}
.toolbar > .saveContent {
color: #1B315E;
border: none;
outline: none;
background: #B6B6B6;
padding: 6px 6px;
font-size: 12px;
font: inherit;
}
.saveContent, .saveContent:hover, .toolLinks:hover {
background: #A5A5A5;
}
.toolLinks {
margin-top: 2px;
margin-right: 4px;
float: right;
border: none;
outline: none;
color: #1B315E;
background: #B6B6B6;
padding: 4px 6px;
font-size: 16px;
text-align: center;
}
.mainHeader {
text-align: center;
color: #1B315E;
}
table {
width: 100%;
font-size: 12px;
}
.tableName {
color: #1B315E;
font-size: 14px;
font-weight: bold;
}
<!DOCTYPE HTML>
<!--
~ Copyright (c) Summit Learning Management System (made by students, for students). 2019.
-->
<html lang="en-AU">
<head>
<title>Welcome — Summit — School Name</title>
<link rel="stylesheet" type="text/css" href="../style.css"> <!-- Internal Stylesheet -->
<script src="https://kit.fontawesome.com/d3afa470fb.js"></script> <!-- Vector Icons -->
<link rel="shortcut icon" href="../Assets/Images/favicon.png"> <!-- Favicon -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<?php
session_start();
if (!isset($_SESSION['loggedin']) || $_SESSION['loggedin'] == false ) {
header("Location: index.php");
}
?>
<div id="wrapper">
<div class="navigation">
<button class="navLinks" title="Logout"><i class="fas fa-sign-out-alt"></i></button>
<button class="navLinks" title="Help"><i class="fas fa-question-circle"></i></button>
<button class="navLinks" title="Quick Links"><i class="fas fa-bookmark"></i></button>
<div class="menuDropDown">
<button class="menuButton" title="Site Navigation"><i class="fas fa-bars"></i> Menu</button>
<div class="menuContent">
<div class="menuRow">
<div class="menuColumn"> <!-- Home Workspace -->
<h5 class="menuHeader">Home Workspace</h5>
<i class="fas fa-door-open"></i> Welcome
</div>
<div class="menuColumn"> <!-- Learning Workspace -->
</div>
<div class="menuColumn"> <!-- Student Management Workspace -->
</div>
<div class="menuColumn"> <!-- Administration Workspace -->
</div>
</div>
</div>
</div>
</div>
<div class="workspaceMain">
<div class="toolbar">
<button class="saveContent" title="Save Changes"><i class="fas fa-save"></i> Save</button>
<button class="toolLinks" title="Collapse Panel"><i class="fas fa-arrow-right"></i></button>
<button class="toolLinks" title="Change Background Colour"><i class="fas fa-fill-drip"></i></button>
</div>
<h3 class="mainHeader" id="editable" contenteditable="true">SCHOOL NAME</h3>
<table class="tableSet" id="editable" contenteditable="true">
<caption class="tableName">Weekly Outline</caption>
</table>
</div>
<div class="workspaceSide"></div>
</div>
</body>
</html>
Any help would be greatly appreciated.
Thanks, Tom

You need to use localStorage.setItem('key', value) to store the value in local storage
Your will then look like:
var theContent = $('#editable');
$('.saveContent').on('click', function() {
var editedContent = theContent.html();
localStorage.setItem('newContent',editedContent)
});

You are using the id "editable" twice, could you change that and retry?

<span (focusout)="JumpTo()" contenteditable="true">Click to Change text</span>
JumpTo(){
var contenteditable = document.querySelector('[contenteditable]');
localStorage.setItem('newContent',contenteditable.textContent);
}
If you want to change it instantly use ngOnChanges()

Develop Reference

JavaScript is the programming language of the Web.

Eventlistenerbutton unresponsive - javascript

You made a small typo in the javascript file. let formclose = document.querySelector(".form-close"); Should be let formclose = document.querySelector("#form-close"); Since the element has an id of form-close and not a class, you need to use the '#' instead of the '.'

Related

How to solve this problem with responsive - blank space on right side?

why arent my links white and without the line under?

Prevent header and footer divs from overlapping main div

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

Content Editable not saving with localStorage

Categories

Resources