I encountered a little problem. I wanted to put 2 fontAwesome icons in my login page like what i did in this picture :
but... That was berfore I check W3C. Apparently we can not use placeholder in a lot of input. So what I did is use some easy vanilla JS to get my boxes ID and add to them a placeholder.
But, font-family : "fontAwesome" doesn't works anymore on those placeHolder, I tried tu put my js into some variable to style them but it doesn't works either. So what's the common solution to this problem ?
Put an image instead ?
Here's a part of my code :
let x = document.getElementById("mdp2").placeholder = " Mot de passe...";
let y = document.getElementById("username").placeholder= " Nom d'utilisateur ou e-mail...";
* {
padding: 0;
margin: 0;
text-decoration: none;
font-family: "Play", sans-serif;
box-sizing: border-box;
}
h1,
h2 {
font-family: "Varela Round", Arial, Helvetica, sans-serif;
}
.compte {
position: relative;
width: 100%;
height: 1500px;
overflow: hidden;
background : orange;
}
.compte > .video-bg {
z-index: -10;
position: absolute;
min-width: 100%;
min-height: 100%;
}
.contenu {
position: relative;
padding: 50px;
text-align: center;
margin: 0 auto;
color: white;
}
.log {
height: 50vh;
}
.contenu-cont {
margin: 250px auto;
}
.contenu-cont > h1 {
font-size: 60px;
color: orangered;
}
.contenu-cont > span {
letter-spacing: 5px;
font-size: 20px;
}
.box-log {
position: relative;
margin: -140px auto;
width: 100%;
}
.log > h2 {
margin: 0 0 25px 0;
font-size: 36px;
}
.input-box {
margin: 15px 0;
display: flex;
justify-content: center;
}
.user-box {
border-radius: 25px;
padding: 15px;
width: 400px;
border: none;
outline: none;
background-color: rgba(255, 255, 255, 0.267);
color: white;
}
.user-box::placeholder {
color: white;
font-family: "jura", fontAwesome;
padding: 0 0 0 5px;
}
#mdp2::placeholder{
font-family: "jura", fontAwesome;
padding: 0 0 0 5px;
}
.btn-sign {
background: orangered;
outline: none;
width: 180px;
padding: 13px;
border-radius: 35px;
border: none;
color: white;
cursor: pointer;
transition: 0.5s;
}
.btn-sign:hover {
opacity: 0.8;
}
.ou {
font-weight: 500;
}
.oup {
font-weight: bolder;
color: rgba(255, 0, 0, 0.829);
font-size: 22px;
}
.subm {
color: blue;
}
#media screen and (max-width: 540px) {
.contenu-cont > h1 {
font-size: 40px;
padding: 0;
}
.contenu-cont > span {
letter-spacing: 5px;
font-size: 15px;
}
.log > h2 {
font-size: 20px;
}
}
<!DOCTYPE html>
<html lang="fr">
<head>
<title>PharmaTech</title>
<meta name="description de la page" content="A compléter pour le referencement"><!--Description du site, apparait notamment dans la description google-->
<meta charset="utf-8">
<meta name="robots" content="index, follow, aussi pour le referencement"><!--index du site, apparait notamment dans la description google-->
<link rel="icon" href="image/Phoenix-detoure.png"><!--Icone de l'onglet de site-->
<meta name="viewport" content="width=device-width, initial-scale=1"><!--toujours afficher l'entiereté de la page peu importe la largeur-->
<link href="https://fonts.googleapis.com/css2?family=Play:wght#400;700&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#600&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Jura:wght#700&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Varela+Round&display=swap" rel="stylesheet">
<link rel="stylesheet" href="compte.css">
<link rel="stylesheet" href="header.css">
<link rel="stylesheet" href="footer.css">
<script src="https://kit.fontawesome.com/3b3be1baf7.js" crossorigin="anonymous"></script>
</head>
<body>
<header>
<nav class="navbar">
<div class="logo"></div>
<span class="hamburger"><label id="hamburger">☰</label></span>
<span class="cross"><label id="cross">✖</label></span>
<ul>
<li id="home"><span> <i class="fas fa-home" style="padding-right: 10px;"></i></span> Index </li>
<li id="Shop"> <span><i class="fas fa-store-alt" style="padding-right: 15px;"></i></span>Boutique
<ul class="dropdown" role="menu">
<li> Nanites</li>
<li> Assistances</li>
<li> Prothèses</li>
<li> Organes</li>
</ul>
</li>
<li id="compte"><span><i class="fas fa-user" style="padding-right: 10px;"></i></span> Compte
<ul class="dropdown" role="menu">
<li>Se connecter</li>
<li>S'inscrire</li>
</ul>
</li>
</ul>
<div class="search">
<input type="text" placeholder="Recherche...">
<button class="loupe"><i class="fas fa-search"></i></button>
</div>
</nav>
</header>
<div class="compte">
<video autoplay loop muted class="video-bg">
<source src="videos/back3.mp4" type="video/mp4">
</video>
<div class="form">
<div class="contenu">
<div class="contenu-cont">
<h1>PharmaTech</h1>
<span>From chance to choice</span>
</div>
<div class="box-log">
<div class="log">
<h2>Se connecter</h2>
<form>
<div class="input-box">
<input class="user-box" type="username" name="username" id="username" >
</div>
<div class="input-box">
<input class="user-box" type="password" name="password" id="mdp2" required>
</div>
<div class="button-co">
<button type="submit" class="btn-sign">Se connecter</button>
</div>
<hr style="width:280px; margin: 20px auto;">
<p class="ou"> Pas encore inscrit ? S'inscrire</p>
</form>
</div>
</div>
</div>
</div>
</div>
<footer>
<div class="footer-container">
<div class="left-content">
<div class="up">
<div class="theme">A propos de nous</div>
<p>
Leader dans les domaines de la bio-ingénierie, pharmaceutique et assistance en tous genres,
nous mettons notre savoir-faire à votre service depuis plus de 150 ans.
</p>
</div>
<div class="low">
<div class="theme">Nous contacter</div>
<div class="tel">
<span>✆</span> +356 053 356 152
</div>
<div class="mail">
<span>✉</span> abc#pharmatech.com
</div>
</div>
</div>
<div class="middle-content">
<div class="theme">Nos services </div>
<div> Nous trouver</div>
<div> En savoir plus</div>
<hr>
<div> Rapport</div>
<div> Powerpoint</div>
</div>
<div class="right-content">
<div class="theme">Subscribe us</div>
<form action="#">
<input type="text" name="email" placeholder="Entrer votre adresse mail" required>
<input type="submit" name="envois" value="Envoyer" class="subm">
<div class="reseaux">
<img src="image/facebook.ico" alt="Logo de facebook">
<img src="image/twitter.ico" alt="Logo de twitter">
<img src="image/whatsapp.ico" alt="Logo de whatsapp">
<img src="image/instagram.ico" alt="Logo d'instagram'">
</div>
</form>
</div>
</div>
</footer>
<div class="bas">
<p>Copyright © 2020 <span>PharmaTech</span> by Alexandre Novais & Nhat Linh Nguyen</p>
</div>
<script>
window.addEventListener('scroll', function (e) {
// Setup the new requestAnimationFrame()
let timeout = window.requestAnimationFrame(function () {
// Run our scroll functions
let nav = document.querySelector('nav'); /*Selection de la class voulus grace à query*/
if (document.querySelector('header').getBoundingClientRect().top !== 0) {
nav.classList.add('scroll');
} else {
nav.classList.remove('scroll');
}
});
}, false);
</script>
<script>
let hamburger = document.querySelector(".hamburger");
let cross = document.querySelector(".cross");
let ul = document.querySelector("ul");
hamburger.onclick = () =>{
hamburger.style.opacity = 0;
hamburger.style.visibility = "hidden";
cross.style.opacity = 1;
cross.style.visibility = "visible";
ul.style.top = "80px";
}
cross.onclick = () =>{
hamburger.style.opacity = 1;
hamburger.style.visibility = "visible";
cross.style.opacity = 0;
cross.style.visibility = "hidden";
ul.style.top = "-600px";
}
</script>
<script src="JS/placeholder2.js"></script>
</body>
</html>
codepen
Thank you again!
let inputContainer = document.querySelector('.input');
let placeholderEl = inputContainer.querySelector('.placeholder');
let inputEl = inputContainer.querySelector('input');
inputEl.addEventListener('focus', () => {
placeholderEl.style.display = 'none';
inputEl.focus();
});
inputEl.addEventListener('blur', () => {
if (inputEl.value.trim().length === 0) {
placeholderEl.style.display = 'block';
}
});
placeholderEl.addEventListener('click', () => {
placeholderEl.style.display = 'none';
inputEl.focus();
});
.input {
position: relative;
}
.input .placeholder {
position: absolute;
top: 8px;
left: 10px;
color: #444;
}
input {
outline: none;
border: 1px solid #CCC;
border-radius: 17px;
padding: 10px;
height: 10px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet"/>
<div class="input">
<div class="placeholder"><i class="fa fa-user"></i> Username</div>
<input type="text" />
</div>
You can add your own CSS to do this. Here is the demo :)
IDEA: Idea is to set a wrapper div around your input and icon. Set a border on wrapper and set border:none and outline:none; on input.
.search{
display:inline-flex;
border:1px solid #777;
padding:5px 10px;
border-radius:1rem;
}
.search input{
border:none;
outline:none;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet"/>
<div class="search">
<i class="fas fa-search"></i>
<input type="text" placeholder="Recherche...">
</div>
Related
I am creating a simple bug tracker that uses a modal to pop up different bugs. The problem I have is that when I delete a bug, there is a thin grey box where the background of the modal was. So basically the list of bugs is empty but it shows the background of the modal even when it should not be there. For example , if you load up the files and open with live server; create a new bug, then delete the bug, you will see the grey box where the bug was just at. I am trying to have the background not be there, when there is no bugs in the list. Any help is greatly appreciated.
I have tried changing the opacity of the modal and issuesList as well as background color, but tbh I am completely lost on how to dynamically change the opacity.
Index.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">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD"
crossorigin="anonymous">
<script src="https://kit.fontawesome.com/4582c8b826.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="/css/styles.css">
<title>Issue Tracker</title>
</head>
<body>
<div class="contaienr">
<h1>Issue Tracker</h1>
<div class="jumbotron">
<h3>Add New Issue:</h3>
<form id="issueinputform">
<div class="form-group">
<label for="issueDescription">Description</label>
<input type="text" class="form-control" id="issueDescription" placeholder="Describe the issue ...">
</div>
<div class="form-group">
<label for="issueSeverity">Severity</label>
<select class="form-control" id="issueSeverity">
<option value="Low">Low</option>
<option value="Medium">Medium</option>
<option value="High">High</option>
</select>
</div>
<div class="form-group">
<label for="issueAssignedTo">Assigned To</label>
<input type="text" class="form-control" id="issueAssignedTo" placeholder="Enter responsible ...">
</div>
<button id="add-issue" onclick="submitIssue()" class="btn btn-primary">Add</button>
</form>
</div>
<div class="col-lg-12">
<div id="issuesList">
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="emptyField" tabindex="-1" role="dialog" aria-labelledby="emptyFieldLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="emptyFieldLabel">Invalid Input!</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Please provide the desciption of the issue and also the person name who you want to assign the issue.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.3.min.js" integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.min.js" integrity="sha384-mQ93GR66B00ZXjt0YO5KlohRA5SY2XofN4zfuZxLkoj1gXtW8ANNCe9d5Y3eG5eD" crossorigin="anonymous"></script>
<script src="app.js"></script>
</body>
</html>
app.js
function submitIssue(e) {
const getInputValue = id => document.getElementById(id).value;
const description = getInputValue('issueDescription');
const severity = getInputValue('issueSeverity');
const assignedTo = getInputValue('issueAssignedTo');
const id = Math.floor(Math.random() * 100000000) + '';
const status = 'Open';
if ((description.length == 0) || (assignedTo.length == 0)) {
alert("Please fill all fields with required data.");
document.getElementById('add-issue').setAttribute("data-toggle", "modal");
document.getElementById('add-issue').setAttribute("data-target", "#emptyField")
}
else {
document.getElementById('add-issue').removeAttribute("data-toggle", "modal");
document.getElementById('add-issue').removeAttribute("data-target", "#emptyField")
const issue = { id, description, severity, assignedTo, status };
let issues = [];
if (localStorage.getItem('issues')) {
issues = JSON.parse(localStorage.getItem('issues'));
}
issues.push(issue);
localStorage.setItem('issues', JSON.stringify(issues));
fetchIssues();
}
}
const closeIssue = id => {
const issues = JSON.parse(localStorage.getItem('issues'));
const currentIssue = issues.find(issue => issue.id == id);
currentIssue.status = 'Closed';
currentIssue.description = `<strike>${currentIssue.description}</strike>`
localStorage.setItem('issues', JSON.stringify(issues));
fetchIssues();
}
const deleteIssue = id => {
const issues = JSON.parse(localStorage.getItem('issues'));
const remainingIssues = issues.filter(issue => ((issue.id) != id))
localStorage.removeItem('issues');
localStorage.setItem('issues', JSON.stringify(remainingIssues));
fetchIssues();
}
const fetchIssues = () => {
const issues = JSON.parse(localStorage.getItem('issues'));
const issuesList = document.getElementById('issuesList');
issuesList.innerHTML = '';
for (let i = 0; i < issues.length; i++) {
const { id, description, severity, assignedTo, status } = issues[i];
issuesList.innerHTML += `<div class="well">
<h6>Issue ID: ${id} </h6>
<p><span class="label label-info"> ${status} </span></p>
<h3> ${description} </h3>
<p><i class="fa-solid fa-bolt"></i> ${severity}</p>
<p><i class="fa-solid fa-user"></i> ${assignedTo}</p>
<button onclick="closeIssue(${id})" class="btn btn-warning">Close</button>
<button onclick="deleteIssue(${id})" class="btn btn-danger">Delete</button>
</div>`;
}
}
fetchIssues();
styles.css
*{
box-sizing: border-box;
}
.jumbotron{
background: rgb(225, 224, 224);
margin-top: 20px;
margin-left: 150px;
margin-right: 150px;
padding-left: 60px;
padding-right: 60px;
padding-top: 50px;
padding-bottom: 50px;
border-radius: 6px;
}
.container{
}
p{
margin: 0 0 10px;
}
h1{
font-size: 36px;
margin-top: 20px;
margin-bottom: 10px;
margin-left: 150px;
}
/* .col-lg-12{
display: block;
font-size: 14px;
line-height: 1.42857143;
color: #333;
} */
#issuesList{
padding-top: 40px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 20px;
display: block;
margin-left: 170px;
margin-right: 170px;
margin-top: 40px;
margin-bottom: 20px;
background-color: rgb(233, 233, 233);
border-radius: 6px;
border: solid grey transparent ;
border-width: thin;
}
h6{
font-size: 12px;
font-family: inherit;
margin-bottom: 10px;
}
h3{
margin-bottom: 10px;
margin-top: 30px;
font-weight: 500;
line-height: 1.1;
}
.label{
background-color: #5bc0de;
border: solid rgb(10, 198, 240);
border-radius: 0.25em;
padding: 3px;
color: white;
line-height: 1;
font-weight: 700;
font-size: 75%;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}
#add-issue{
margin-top: 20px;
}
.container::after{
clear: both
}
.modal
{
opacity:0.5 !important;
}
I am trying to make a to-do list by myself and it's going pretty well, but I can't remove the correct div. It always removes the first one in the pile. I am not creating new divs, I am basically cloning a template that I've made and setting the display as none.
let d = document.getElementById('botao')
d.addEventListener('click', addTarefa())
function addTarefa() {
let divtarefa = document.getElementById('TarefaEscondida')
clone = divtarefa.cloneNode(true)
clone.id = 'tarefa'
clone.class = "tarefa"
container.appendChild(clone)
clone.setAttribute('display', 'flex')
clone.setAttribute('class', 'tarefa')
clone.setAttribute('id', 'tarefa')
}
function suma() {
let father = document.getElementById('container')
let son = document.getElementById('tarefa')
let apaga = father.removeChild(son)
}
* {
margin: 0;
box-sizing: border-box;
}
body {
background-color: aqua;
}
header {
text-align: center;
background-color: rgb(255, 208, 0);
}
#container {
display: flex;
background-color: beige;
margin-top: 15px;
margin-left: 15%;
margin-right: 15%;
height: 90vh;
align-items: stretch;
padding-top: 8px;
flex-direction: column;
flex-wrap: nowrap;
gap: 8px;
}
.tarefa {
padding: 5px;
background-color: brown;
margin-left: 8px;
margin-right: 8px;
display: flex;
}
.texto {
border: none;
margin-left: 8px;
background-color: brown;
color: white;
width: 90%;
padding: 8px;
}
::placeholder {
color: white;
opacity: 1;
}
.remove {
float: right;
height: 40px;
width: 40px;
color: #333;
cursor: pointer;
}
#botao {
position: fixed;
background-color: brown;
height: 80px;
width: 80px;
border-radius: 50%;
bottom: .8%;
left: 1.5%;
text-align: center;
color: white;
font-weight: 900;
font-size: 4.5rem;
}
#TarefaEscondida {
padding: 5px;
background-color: brown;
/* margin-top: 8px; */
margin-left: 8px;
margin-right: 8px;
display: none;
}
#TextoEscondido {
border: none;
margin-left: 8px;
background-color: brown;
color: white;
width: 90%;
padding: 8px;
}
<!DOCTYPE html>
<html lang="pt-br">
<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">
<link rel="stylesheet" href="style.css">
<title>My To Do list</title>
</head>
<body>
<header id="header">
<h1>My To do list</h1>
</header>
<main id="container">
<div id="TarefaEscondida">
<input type="button" value="Feito" class="remove" onclick="suma()">
<input type="text" placeholder="Escreva aqui..." id="TextoEscondido">
</div>
<div id='tarefa' class="tarefa">
<input type="button" value="Feito" class="remove" onclick="suma()">
<input type="text" placeholder="Escreva aqui..." class="texto">
</div>
</main>
<div id="botao" onclick="addTarefa()">
<P>+ </P>
</div>
<script src="main.js"></script>
</body>
</html>
You don't need to bother with element IDs. DOM navigation will allow you to find the parent of the clicked element, and remove it:
<main id="container">
<div id="TarefaEscondida">
<input type="button" value="Feito" class="remove" onclick="suma(this)">
<input type="text" placeholder="Escreva aqui..." id="TextoEscondido">
</div>
<div id='tarefa' class="tarefa">
<input type="button" value="Feito" class="remove" onclick="suma(this)">
<input type="text" placeholder="Escreva aqui..." class="texto">
</div>
</main>
(Notice how I've changed the onclick so it passes this element)
And then your remove function can simply locate the parent of the clicked element and remove it.
function suma(element) {
element.parentNode.remove();
}
Also, please note: In your function that adds a new element, you should be aware of duplicating element IDs. That will create invalid HTML because IDs must be unique.
Here is a Fiddle example.
let d = document.getElementById('botao')
d.addEventListener('click', addTarefa())
function addTarefa() {
let divtarefa = document.getElementById('TarefaEscondida')
clone = divtarefa.cloneNode(true)
clone.id = 'tarefa'
clone.class = "tarefa"
container.appendChild(clone)
clone.setAttribute('display', 'flex')
clone.setAttribute('class', 'tarefa')
clone.setAttribute('id', 'tarefa')
}
function suma(element) {
element.parentNode.remove();
}
<main id="container">
<div id="TarefaEscondida">
<input type="button" value="Feito" class="remove" onclick="suma(this)">
<input type="text" placeholder="Escreva aqui..." id="TextoEscondido">
</div>
<div id='tarefa' class="tarefa">
<input type="button" value="Feito" class="remove" onclick="suma(this)">
<input type="text" placeholder="Escreva aqui..." class="texto">
</div>
</main>
<div id="botao" onclick="addTarefa()">
<P>+ </P>
</div>
In .addEventListener you put function but don't call it.
d.addEventListener('click',addTarefa)
i want to create a chat and i have been working on it.
here is the code below
<!DOCTYPE html>
<html>
<head>
<title>Aswin's Good Apps</title>
<!-- add icon link -->
<link rel = "icon" href =
"https://goodapps.w3spaces.com/AswinIcon.png"
type = "image/x-icon">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script>
<script type="text/javascript" src="https://html2canvas.hertzen.com/dist/html2canvas.js"></script>
<style>
body{
background-color:pink;
color:purple;
font: 15px Arial, sans-serif;
}
#media screen and (max-width: 300px) {
body{
width: 100%;
}
}
.
input[type=text], input[type=password] {
width: 100%;
padding: 15px;
margin: 5px 0 22px 0;
display: inline-block;
border: none;
background: #f1f1f1;
}
/* Add a background color when the inputs get focus */
input[type=text]:focus, input[type=password]:focus {
background-color: #ddd;
outline: none;
}
/* Set a style for all buttons */
button {
background-color: purple;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
opacity: 0.9;
}
.cancelbtn {
padding: 14px 20px;
background-color: #8B0000;
}
.cancelbtn, .signupbtn {
float: left;
width: 50%;
}
.signupbtn{
background-color:#013220;
}
.container {
padding: 20px;
}
.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: #0000ffff;
padding-top: 50px;
}
.modal-content {
background-color: #ff8c00;
margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
border: 1px solid #888;
width: 80%;
}
hr {
border: 1px solid blue;
margin-bottom: 25px;
}
.close {
position: absolute;
right: 35px;
top: 15px;
font-size: 40px;
font-weight: bold;
color: white;
}
.close:hover,
.close:focus {
color: purple;
cursor: pointer;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
a{
font-size:25px;
color:purple;
text-decoration:none;
font-size:50px;
}
h2{
font-size:50px;
background-color: pink;
}
div.sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
padding: 12px;
}
#loading {
position: absolute;
left: 50%;
top: 50%;
z-index: 1;
text-align: center;
color:green;
background-color:yellow;
top: calc(50% - 30px);
left: calc(50% - 45px);
text-align: center;
font-weight: bold;
}
div.sticky1 {
position: -webkit-sticky;
position: sticky;
top: 0;
padding: 12px;
}
#loader {
position: absolute;
left: 50%;
top: 50%;
z-index: 1;
width: 130px;
height: 130px;
margin: -76px 0 0 -76px;
border: 16px solid greenyellow;
border-radius: 60%;
border-top: 16px solid yellow;
border-radius:60%;
border-bottom: 16px solid yellow;
-webkit-animation: spin 2s linear infinite;
animation: spin 1s linear infinite;
}
#-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Add animation to "page content" */
.animate-bottom {
position: relative;
-webkit-animation-name: animatebottom;
-webkit-animation-duration: 1s;
animation-name: animatebottom;
animation-duration: 1s
}
#-webkit-keyframes animatebottom {
from { bottom:-100px; opacity:0 }
to { bottom:0px; opacity:1 }
}
#keyframes animatebottom {
from{ bottom:-100px; opacity:0 }
to{ bottom:0; opacity:1 }
}
#myDiv {
display: none;
}
ul{
list-style: none;
}
p{
font-size: 25px;
}
</style>
</head>
<body onload="myFunction()" style="margin:0;">
<div id="body">
<script>
var myVar;
function myFunction() {
myVar = setTimeout(showPage, 3000);
document.getElementById('fail').style.display='none';
document.getElementById('goonthetrack').style.display='none';//
let messages = localStorage.getItem('message');
console.log(messages);
document.getElementById('result').innerHTML = messages;
}
function showPage() {
document.getElementById("loader").style.display = "none";
document.getElementById("loading").style.display="none";
}
//this will filter the results to which they have searched far
function searchresult(){
//this line tells the html tags we have used
var input, filter, ul, li, a, i, txtValue;
//this collects the inputs id
input = document.getElementById("mysearch");
//this tells about the filter
filter = input.value.toUpperCase();
ul = document.getElementById("myUL");
li = ul.getElementsByTagName("li");
for (i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName("a")[0];
txtValue = a.textContent || a.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "";
} else {
li[i].style.display = "none";
}
}
}
function validate()
{
if( document.getElementById("text1").value == "aswin.arulvel#gmail.com"
&& document.getElementById("text2").value == "aswinwebsitepass" )
{
document.getElementById("p1").innerHTML = "Hello Aswin";
document.getElementById('goonthetrack').style.display='block';
document.getElementById("signup2").style.display = "none" ;
document.getElementById("login1").style.display = "none" ;
}
else if( document.getElementById("text1").value == "sathya.arulvel#gmail.com"
&& document.getElementById("text2").value == "sathyasaccount01" )
{
document.getElementById("p1").innerHTML = "Hello Sathya!";
document.getElementById('goonthetrack').style.display='block';
document.getElementById("signup2").style.display = "none" ;
document.getElementById("login1").style.display = "none" ;
}
else if(document.getElementById("text1").value == "arulvel.kumarasamy#gmail.com"
&& document.getElementById("text2").value == "skar$SP50zxcvArulaccount")
{
document.getElementById("p1").innerHTML = "Hello Arulvel!";
document.getElementById('goonthetrack').style.display='block';
document.getElementById("signup2").style.display = "none" ;
document.getElementById("login1").style.display = "none" ;
}
else if(document.getElementById("text1").value == "mine#3478"
&& document.getElementById("text2").value == "mine#3478")
{
document.getElementById("p1").innerHTML = "Hello Shreyan!";
document.getElementById('goonthetrack').style.display='block';
document.getElementById("login1").style.display = "none" ;
document.getElementById("signup2").style.display = "none" ;
}
else
{
alert( "validation failed" );
document.getElementById("fail").style.display = "block" ;
}
}
function addmessaage()
{
let li = document.createElement("li");
let li2 = li.classname = "li2";
let textToChange = document.getElementById('chatmessage').value;
let t= document.createTextNode(textToChange);
li.appendChild(t);
document.getElementById('result').appendChild(li);
document.getElementById('chatmessage').value ="";
var multisave = document.getElementById('result').value;
for (i = 0 ; i < li2.length; i++) {
li2[i].onclick = function() {
var div = this.parentElement;
}
}
localStorage.setItem("message", textToChange);
}
</script>
<a href="goodapps.w3spaces.com/fractionscalc.html">We just put fraction calculer! Explore it!
<div class="container mt-3" style="background-color:pink; text-align:left;">
<div class="sticky">
<!-- Nav tabs -->
<ul class="nav nav-tabs">
<li class="nav-item">
<p id="p1">Not logged in</p>
</li>
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#home" style="font-size:20px;"> <i class="fa fa-home"></i>Home</a>
</li>
<li class="nav-item">
<a class="nav-link" id="login1" data-toggle="tab" href="#login" style="font-size:20px;"><i class="fa fa-sign-in"></i>Log In</a>
</li>
<li class="nav-item">
<a class="nav-link" id="signup2" data-toggle="tab" href="#menu3" style="font-size:20px;"> <i class="fa fa-user-plus" aria-hidden="true"></i>Sign Up</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#menu2" style="font-size:20px;"><i class="fa fa-database" aria-hidden="true"></i>Good Apps</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#menu4" style="font-size:20px;"><i class="fa fa-comment" aria-hidden="true"></i>Chat</a>
</li>
<iframe style="text-align:right;"width="145" height="102" src="https://goodapps.w3spaces.com/dateaswin.html" style="float:right; text-decoration: none; margin-right: 100px;">
</iframe>
</div>
</li>
</ul>
</div>
<!-- Tab panes -->
<div style="background-color:pink;"class="tab-content">
<div id="home" class="container tab-pane active"><br>
<i class="fa fa-home" style="font-size:50px;"></i><h3><i class="fa-duotone fa-house"></i>HOME</h3>
<img src="https://goodapps.w3spaces.com/AswinIcon.png"/ width="200" height="360px">
<p>Welcome to Aswin.</p>
<a class="nav-link" data-toggle="tab" href="#login" style="font-size:20px;">Login</a>
<a class="nav-link" data-toggle="tab" href="#menu3" style="font-size:20px;"> Sign Up</a>
</div>
<div id="login" class="container tab-pane fade"><br>
<i class="fa fa-sign-in" style="font-size:50px;"> </i></i><h3>Login</h3>
<p>Log in to save your work and have a more personalized experience.</p>
<form action="#home">
<input type="text" style = "width:15%;"class="form-control" placeholder="Username" id="text1" />
<input type="password" class="form-control" placeholder="Password" id="text2" style="width:15%;"/>
<input type="button" value="Login" class="btn btn-info" onclick="javascript:validate()" />
</form>
<div class="alert alert-danger" id="fail">
<p>Incorrect username or password.</p>
</div>
<div class="alert alert-success" id="goonthetrack">
<p>You have succesfuly logged in.</p>
</div>
</div>
<div id="menu2" class="container tab-pane fade"><br>
<h3>Good Apps</h3>
<p>These are all good apps and have a lot of helpful info and all that stuff Items that are tagged "Under Development" are not finished and may have issues.</p>
<input type="search" id="mysearch" placeholder="Search Apps..." style="margin-top: 8px;
padding: 14px;
float: right; " onkeyup="searchresult()"
>
<ul id="myUL">
<li> Aswin's Tutorials</li>
<br>
<br>
<li>Aswin's Stories</li>
<br>
<br>
<li>Aswin's Sentences</li>
<br>
<br>
<li>Aswin's Games</li>
<br>
<br>
<li> Aswin's Calculater</li>
<br>
<br>
<li>Aswin's Writer</li>
<br>
<br>
<li>Aswin's Code Editor</li>
<br>
<br>
<li> Aswin's Dictonary</li>
<br>
<br>
<li> Aswin's Galaxy Director (under devolopment)
</li><br>
<br>
<li> Aswin's Star Collage(under devolopment)
</li><br>
<br>
<li> Aswin's Facts(under devolopment)</li>
</ul>
</div>
<div id="menu3" class="container tab-pane fade"><br>
<i class="fa fa-user-plus" style="font-size:50px;" aria-hidden="true"></i><h3>Sign UP</h3>
<form action="#home">
<p>Enter your email:</p>
<input type="email" class="form-control" required>
<p>Set a password:</p>
<input type="password" class="form-control" required>
<p>Repeat Password:</p>
<input type="password" class="form-control" required>
<input type="checkbox" class="form-control" required style="text-align:left;" name="I agree to the terms of service." id="agree" value="I agree to the terms of service."/><p>By signing up, I agree to the terms of service.</p>
<input type="submit" class="form-control" value="Sign Up">
</form>
</div>
<div id="menu4" class="container tab-pane fade"><br>
<i class="fa fa-comment" style="font-size:50px;" aria-hidden="true"></i><h3>chat</h3>
<form action="#home">
<ul id="result" style="font-size:50px; display: inline-block;overflow:auto; height:150px;" class="form-control">
</ul>
<input type="text" id="chatmessage" class="form-control">
<input type="button" value="Send" onclick="addmessaage()" id="save" class="btn btn-success">
</form>
</div>
</div>
<div class="sticky">
</iframe>
</div>
</div>
</div>
<div id="loader"></div><p id="loading">Loading...</p>
</div>
</body>
</html>
i want to save the elements that the js has been created.
i want to use client-side javascript and use localstorage().
issue is i can't save multiple messages.
go to the chat section and make the snippet full screen
please help me
Here is a Fiddle of my problem (Click the image next to the 'Werknemers' or 'Verzuimdossiers').
I got a sidebar in which some items have subcontent and some don't. So I made an accordion with subnav items. The problem is that the opening animation works fine. However, the closing animation is not being fired.
What could be the issue here?
Code for reference
openSubnav = (evt, subNavName) => {
let i, subnavContent, subnavLinks;
//Check if the current accordion is clicked again to close it.
const subNav = document.getElementById(subNavName)
if (getComputedStyle(subNav).display === 'block') {
subNav.style.display = 'none'
evt.currentTarget.className = evt.currentTarget.className.replace(" subnav-isActive", "");
subNav.style.maxHeight = null;
return
}
//hide alle subnav content
subnavContent = document.getElementsByClassName("subnav-content");
for (i = 0; i < subnavContent.length; i++) {
subnavContent[i].style.display = "none";
}
//delete the subnav-isActive class
subnavLinks = document.getElementsByClassName("subnav-item");
for (i = 0; i < subnavLinks.length; i++) {
subnavLinks[i].className = subnavLinks[i].className.replace(" subnav-isActive", "");
}
//Display the content
subNav.style.display = "block";
//Add the subnav-isActive class
evt.currentTarget.className += " subnav-isActive";
//If there currently is a max-height on the element, delete it.
if (subNav.style.maxHeight) {
subNav.style.maxHeight = null;
}
subNav.style.maxHeight = subNav.scrollHeight + "px";
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.root {
display: flex;
font-family: 'Poppins', sans-serif;
}
nav {
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
-o-user-select:none;
user-select:none;
}
.icon-container {
width: 60px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
}
/* .sidebar:hover {
width: 250px;
overflow: visible;
} */
.sidebar {
width: 250px;
}
.sidebar {
background-color: #8dc4d9;
position:absolute;
top:0;
bottom:0;
height:100%;
left:0;
/* width:60px; */
overflow:hidden;
-webkit-transition:width .05s linear;
transition:width .05s linear;
}
.sidebar>ul {
margin: 10px 0;
}
.sidebar li {
width:250px;
}
.sidebar li>span {
position: relative;
display: table;
border-collapse: collapse;
border-spacing: 0;
font-size: 14px;
transition: all .1s linear;
}
.sidebar .nav-text {
display: table-cell;
vertical-align: middle;
/* 250px breed totaal - 60px breed icoon = 190 */
width: 190px;
}
.sidebar .nav-dropdown {
display: table-cell;
vertical-align: middle;
cursor: pointer;
padding-right: 20px;
padding-top: 8px;
}
.sidebar .nav-dropdown img {
transform: rotate(270deg);
transition: transform .3s ease;
}
.sidebar .nav-dropdown.subnav-isActive img {
transform: rotate(360deg);
}
.user {
margin-bottom: 20px;
}
.sidebar li:hover>span {
background-color:#76abbf;
}
.subnav-content {
display: none;
/* 17px omdat de afbeelding 24x24 is en de breedte van de sidebar 60px.
Met de afbeelding houd je dus 17px aan beiden kanten over. */
padding: 10px 17px;
background-color:#76abbf;
list-style: none;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
.content {
width: calc(50% - 30px);
background-color: #f3f6f9;
}
.preview {
width: calc(50% - 30px);
background-color: #f3f6f9;
}
<!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">
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<title>Sidebar</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#400;700&display=swap" rel="stylesheet">
</head>
<body>
<div class="root">
<nav class="sidebar">
<ul>
<li class="user">
<span>
<div class="icon-container">
<img class="nav-icon" src="./icons24/user32.png" alt="">
</div>
<span class="nav-text">
Mijn account
</span>
</span>
</li>
<li>
<span>
<div class="icon-container">
<img class="nav-icon" src="./icons24/bureaublad24.png" alt="">
</div>
<span class="nav-text">
Dashboard
</span>
</span>
</li>
<li class="has-subnav">
<span>
<div class="icon-container">
<img class="nav-icon" src="./icons24/werknemers24.png" alt="">
</div>
<span class="nav-text">
Werknemers
</span>
<span class="nav-dropdown subnav-item" onclick="openSubnav(event, 'Werknemers')">
<img src="./icons24/DropdownArrow16.png">
</span>
</span>
<ul id="Werknemers" class="subnav-content">
<li>kaas</li>
<li>brood</li>
<li>eieren</li>
</ul>
</li>
<li>
<span>
<div class="icon-container">
<img class="nav-icon" src="./icons24/verzuimdossiers24.png" alt="">
</div>
<span class="nav-text">
Verzuimdossiers
</span>
<span class="nav-dropdown subnav-item" onclick="openSubnav(event, 'Verzuimdossiers')">
<img src="./icons24/DropdownArrow16.png">
</span>
</span>
<ul id="Verzuimdossiers" class="subnav-content">
<li>boter</li>
<li>friet</li>
<li>pasta</li>
</ul>
</li>
<li>
<span>
<div class="icon-container">
<img class="nav-icon" src="./icons24/trajecten24.png" alt="">
</div>
<span class="nav-text">
Trajecten
</span>
</span>
</li>
<li>
<span>
<div class="icon-container">
<img class="nav-icon" src="./icons24/projecten24.png" alt="">
</div>
<span class="nav-text">
Projecten
</span>
</span>
</li>
</ul>
</nav>
<div class="content">
Content
</div>
<div class="preview">
Preview
</div>
</div>
</body>
</html>
You need to set timeout before the display: none so it has time to prosecute the closing animation.
Like in this code:
const subNav = document.getElementById(subNavName)
if (getComputedStyle(subNav).display === 'block') {
evt.currentTarget.className = evt.currentTarget.className.replace(" subnav-isActive", "");
subNav.style.maxHeight = null;
setTimeout(function(){subNav.style.display = 'none';}, 100);
return
}
Here you have the right code complete (idk why, but you need to expand the snippet to see it working, click on Run code snippet and then Full page link):
openSubnav = (evt, subNavName) => {
let i, subnavContent, subnavLinks;
//Check if the current accordion is clicked again to close it.
const subNav = document.getElementById(subNavName)
if (getComputedStyle(subNav).display === 'block') {
evt.currentTarget.className = evt.currentTarget.className.replace(" subnav-isActive", "");
subNav.style.maxHeight = null;
setTimeout(function(){subNav.style.display = 'none';}, 100);
return
}
//hide alle subnav content
subnavContent = document.getElementsByClassName("subnav-content");
for (i = 0; i < subnavContent.length; i++) {
subnavContent[i].style.display = "none";
}
//delete the subnav-isActive class
subnavLinks = document.getElementsByClassName("subnav-item");
for (i = 0; i < subnavLinks.length; i++) {
subnavLinks[i].className = subnavLinks[i].className.replace(" subnav-isActive", "");
}
//Display the content
subNav.style.display = "block";
//Add the subnav-isActive class
evt.currentTarget.className += " subnav-isActive";
//If there currently is a max-height on the element, delete it.
if (subNav.style.maxHeight) {
subNav.style.maxHeight = null;
}
subNav.style.maxHeight = subNav.scrollHeight + "px";
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.root {
display: flex;
font-family: 'Poppins', sans-serif;
}
nav {
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
-o-user-select:none;
user-select:none;
}
.icon-container {
width: 60px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
}
/* .sidebar:hover {
width: 250px;
overflow: visible;
} */
.sidebar {
width: 250px;
}
.sidebar {
background-color: #8dc4d9;
position:absolute;
top:0;
bottom:0;
height:100%;
left:0;
/* width:60px; */
overflow:hidden;
-webkit-transition:width .05s linear;
transition:width .05s linear;
}
.sidebar>ul {
margin: 10px 0;
}
.sidebar li {
width:250px;
}
.sidebar li>span {
position: relative;
display: table;
border-collapse: collapse;
border-spacing: 0;
font-size: 14px;
transition: all .1s linear;
}
.sidebar .nav-text {
display: table-cell;
vertical-align: middle;
/* 250px breed totaal - 60px breed icoon = 190 */
width: 190px;
}
.sidebar .nav-dropdown {
display: table-cell;
vertical-align: middle;
cursor: pointer;
padding-right: 20px;
padding-top: 8px;
}
.sidebar .nav-dropdown img {
transform: rotate(270deg);
transition: transform .3s ease;
}
.sidebar .nav-dropdown.subnav-isActive img {
transform: rotate(360deg);
}
.user {
margin-bottom: 20px;
}
.sidebar li:hover>span {
background-color:#76abbf;
}
.subnav-content {
display: none;
/* 17px omdat de afbeelding 24x24 is en de breedte van de sidebar 60px.
Met de afbeelding houd je dus 17px aan beiden kanten over. */
padding: 10px 17px;
background-color:#76abbf;
list-style: none;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
.content {
width: calc(50% - 30px);
background-color: #f3f6f9;
}
.preview {
width: calc(50% - 30px);
background-color: #f3f6f9;
}
<!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">
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<title>Sidebar</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#400;700&display=swap" rel="stylesheet">
</head>
<body>
<div class="root">
<nav class="sidebar">
<ul>
<li class="user">
<span>
<div class="icon-container">
<img class="nav-icon" src="./icons24/user32.png" alt="">
</div>
<span class="nav-text">
Mijn account
</span>
</span>
</li>
<li>
<span>
<div class="icon-container">
<img class="nav-icon" src="./icons24/bureaublad24.png" alt="">
</div>
<span class="nav-text">
Dashboard
</span>
</span>
</li>
<li class="has-subnav">
<span>
<div class="icon-container">
<img class="nav-icon" src="./icons24/werknemers24.png" alt="">
</div>
<span class="nav-text">
Werknemers
</span>
<span class="nav-dropdown subnav-item" onclick="openSubnav(event, 'Werknemers')">
<img src="./icons24/DropdownArrow16.png">
</span>
</span>
<ul id="Werknemers" class="subnav-content">
<li>kaas</li>
<li>brood</li>
<li>eieren</li>
</ul>
</li>
<li>
<span>
<div class="icon-container">
<img class="nav-icon" src="./icons24/verzuimdossiers24.png" alt="">
</div>
<span class="nav-text">
Verzuimdossiers
</span>
<span class="nav-dropdown subnav-item" onclick="openSubnav(event, 'Verzuimdossiers')">
<img src="./icons24/DropdownArrow16.png">
</span>
</span>
<ul id="Verzuimdossiers" class="subnav-content">
<li>boter</li>
<li>friet</li>
<li>pasta</li>
</ul>
</li>
<li>
<span>
<div class="icon-container">
<img class="nav-icon" src="./icons24/trajecten24.png" alt="">
</div>
<span class="nav-text">
Trajecten
</span>
</span>
</li>
<li>
<span>
<div class="icon-container">
<img class="nav-icon" src="./icons24/projecten24.png" alt="">
</div>
<span class="nav-text">
Projecten
</span>
</span>
</li>
</ul>
</nav>
<div class="content">
Content
</div>
<div class="preview">
Preview
</div>
</div>
</body>
</html>
The reason is because your animation takes some time to execute, but you assign display: none before your animation has any chance to be rendered.
Okey so when i tried to make dropdown responsive navigatorbar but it just dosen't work so if someone could help me with this that would be nice :)
More about my issue.
So menu should open when i press this button
picture of navbar
normally when i change
header nav ul height to 0 it closes it but when i change it to auto; it opens menu but it wont close it so i tried to make script that reads when you click that picture it will turn it to auto; but i dosen't seem to work.
so my problem is that i can't open it or close it.
fa-bars is picture from awesomefont just to make that clear.
Here some code.
$(document).ready(function() {
$(".fa-bars").on("click", function() {
$("header nav ul").toggleClass("open");
});
});
/* MOBILES */
#media screen and (max-width: 480px){
#logo {
width: 80px;
margin-left: 30px;
margin-top: 15px;
}
header nav {
margin: 0;
float: none;
}
.fa-bars {
font-size: 24px;
display: inline-block;
width: 100%;
cursor: pointer;
text-align: right;
float: right;
margin: 13px 35px 0 0;
}
.fa-bars:hover {
opacity: 0.5;
}
header nav ul {
height: 0;
overflow: hidden;
margin: 0;
padding: 0;
width: 100%;
}
header nav ul.open {
height: auto;
}
header nav ul li {
width: 100%;
padding: 5px 0;
margin: 0;
font-size: 17px;
border-top: 1px solid #dddddd;
}
header nav ul li:hover {
background-color: #eeeeee;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script defer src="js/fontawesome.js"></script>
<title>SeQaFin</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:500" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300" rel="stylesheet">
</head>
<body>
<!-- Header -->
<header>
<div id="logo">
<a href="#">
<img src="img/logo.png" alt="Logo">
</a>
</div>
<!-- NavBar -->
<nav id="main-nav">
<i class="fas fa-bars"></i>
<ul>
<li>Etusivu</li></li>
<li>Tieto</li>
<li>Liity</li>
</ul>
</nav>
</header>
<!-- Etusivu -->
<section id="Kotisivu">
<h3 id="seqatext">DOwn</h3>
<a href="#Tietoa">
<img src="img/down.png" alt="Down">
</a>
</section>
<!-- Tietoa -->
<section id="Tietoa">
<h3>Tietoa</h3>
<hr>
<img src="img/avatar.png" alt="Avatar">
<h4></h4>
<p>
</p>
<h4></h4>
<p>
</p>
<h4></h4>
<p>
</p>
<h4></h4>
<p>
</p>
<br><br><br><br><br>
</section>
<!-- Liity -->
<section id="Liity">
<h3>Liity</h3>
<hr>
<h4>Ohjeet</h4>
<p>Ohjeet Tähän!</p>
<form>
<input class="input_text" type="email" tabindex="1" placeholder="Sähköposti"><br>
<input class="input_text" type="text" tabindex="2" placeholder="Otsikko"><br>
<textarea class="input_text" tabindex="3" placeholder="Viesti"></textarea><br>
<input class="button" type="submit">
</form>
</section>
<footer>
<p>
</p>
</footer>
<script src="js/jquery.js"></script>
<script src="js/mobile.js"></script>
</body>
</html>
You have not loaded your script file.
Try it with the correction I made here.
$(document).ready(function() {
$('.fa-bars').on('click', function() {
$('header nav ul').toggleClass('open');
});
});
#media screen and (max-width: 480px) {
#logo {
width: 80px;
margin-left: 30px;
margin-top: 15px;
}
}
header nav {
margin: 0;
float: none;
}
.fa-bars {
font-size: 24px;
display: inline-block;
width: 100%;
cursor: pointer;
text-align: right;
float: right;
margin: 13px 35px 0 0;
}
.fa-bars:hover {
opacity: 0.5;
}
header nav ul {
height: 0;
overflow: hidden;
margin: 0;
padding: 0;
width: 100%;
}
header nav ul.open {
height: auto;
}
header nav ul li {
width: 100%;
padding: 5px 0;
margin: 0;
font-size: 17px;
border-top: 1px solid #dddddd;
}
header nav ul li:hover {
background-color: #eeeeee;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script defer src="js/fontawesome.js"></script>
<title>SeQaFin</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:500" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300" rel="stylesheet">
</head>
<body>
<!-- Header -->
<header>
<div id="logo">
<a href="#">
<img src="img/logo.png" alt="Logo">
</a>
</div>
<!-- NavBar -->
<nav id="main-nav">
<i class="fas fa-bars"></i>
<ul>
<li>Etusivu</li></li>
<li>Tieto</li>
<li>Liity</li>
</ul>
</nav>
</header>
<!-- Etusivu -->
<section id="Kotisivu">
<h3 id="seqatext">DOwn</h3>
<a href="#Tietoa">
<img src="img/down.png" alt="Down">
</a>
</section>
<!-- Tietoa -->
<section id="Tietoa">
<h3>Tietoa</h3>
<hr>
<img src="img/avatar.png" alt="Avatar">
<h4></h4>
<p>
</p>
<h4></h4>
<p>
</p>
<h4></h4>
<p>
</p>
<h4></h4>
<p>
</p>
<br><br><br><br><br>
</section>
<!-- Liity -->
<section id="Liity">
<h3>Liity</h3>
<hr>
<h4>Ohjeet</h4>
<p>Ohjeet Tähän!</p>
<form>
<input class="input_text" type="email" tabindex="1" placeholder="Sähköposti"><br>
<input class="input_text" type="text" tabindex="2" placeholder="Otsikko"><br>
<textarea class="input_text" tabindex="3" placeholder="Viesti"></textarea><br>
<input class="button" type="submit">
</form>
</section>
<footer>
<p>
</p>
</footer>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/index.js"></script>
</body>
</html>