Not getting alert for blank task - javascript

I'm creating a to do list with html and JavaScript. I'm trying to create an alert for a blank task, but no alert is popping up and no errors in the console. I actually click inside of the input box, but don't type anything and leave the field blank. Then I click 'Add Task', but don't receive the alert.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Task List</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col s12">
<div id="main" class="card">
<div class="card-content">
<span class="card-title">Task List</span>
<div class="row">
<for id="task-form">
<div class="input-field col s12">
<input type="text" name="task" id="task">
<label for="task">New Task</label>
</div>
<input type="submit" value="Add Task" class="btn">
</for>
</div>
</div>
<div class="card-action">
<h5 id="task-title">Tasks</h5>
<div class="input-field col s12">
<input type="text" name="filter" id="filter">
<label for="filter">Filter Tasks</label>
</div>
<ul class="collection"></ul>
Clear Tasks
</div>
</div>
</div>
</div>
</div>
<script
src="https://code.jquery.com/jquery-3.4.1.js"
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src="app.js"></script>
</html>
JavaScript:
// Define ui variables
const form = document.querySelector('#task-form');
const taskList = document.querySelector('.collection');
const clearBtn = document.querySelector('.clear-tasks');
const filter = document.querySelector('#filter');
const taskInput = document.querySelector('#task');
// Load all event listeners
loadEventListeners();
// Load all event listeners
function loadEventListeners() {
// Add task event
form.addEventListener('submit', addTask);
}
// Add Task
function addTask(e) {
if(taskInput.value === ''){
alert('Add a task');
}
e.preventDefault();
}


I believe you mistyped form. It should be <form id="task-form"> instead of <for id="task-form"> so the proper events aren't getting called.
// Define ui variables
const form = document.querySelector('#task-form');
const taskList = document.querySelector('.collection');
const clearBtn = document.querySelector('.clear-tasks');
const filter = document.querySelector('#filter');
const taskInput = document.querySelector('#task');
// Load all event listeners
loadEventListeners();
// Load all event listeners
function loadEventListeners() {
// Add task event
form.addEventListener('submit', addTask);
}
// Add Task
function addTask(e) {
if(taskInput.value === ''){
alert('Add a task');
}
e.preventDefault();
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Task List</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col s12">
<div id="main" class="card">
<div class="card-content">
<span class="card-title">Task List</span>
<div class="row">
<form id="task-form">
<div class="input-field col s12">
<input type="text" name="task" id="task">
<label for="task">New Task</label>
</div>
<input type="submit" value="Add Task" class="btn">
</form>
</div>
</div>
<div class="card-action">
<h5 id="task-title">Tasks</h5>
<div class="input-field col s12">
<input type="text" name="filter" id="filter">
<label for="filter">Filter Tasks</label>
</div>
<ul class="collection"></ul>
Clear Tasks
</div>
</div>
</div>
</div>
</div>
<script
src="https://code.jquery.com/jquery-3.4.1.js"
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src="app.js"></script>
</html>

Related

TypeError: login is not a function at HTMLInputElement.onclick (VM188 index.html:76) onclick # VM188 index.html:76

I am trying to make a login page for my project I am working on and I came across this error while trying to run the code. I have no idea what is causing it.
Here is my code:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>JAuth Login</title>
<link href="https://fonts.googleapis.com/css?family=Karla:400,700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.materialdesignicons.com/4.8.95/css/materialdesignicons.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/login.css">
</head>
<body>
<script>
//firebase stuff
//Login
//Authentication
//login
function login() {
var userEmail = document.getElementById("email").value;
var userPass = document.getElementById("password").value;
window.alert(userEmail + " " + userPass);
}
</script>
<main class="d-flex align-items-center min-vh-100 py-3 py-md-0">
<div class="container">
<div class="card login-card">
<div class="row no-gutters">
<div class="col-md-5">
<img src="assets/images/login.jpg" alt="login" class="login-card-img">
</div>
<div class="col-md-7">
<div class="card-body">
<div class="brand-wrapper">
<img src="assets/images/Jauth.png" alt="logo" class="logo">
</div>
<p class="login-card-description">Sign into your account</p>
<form action="#!">
<div class="form-group">
<label for="email" class="sr-only">Email</label>
<input type="email" name="email" id="email" class="form-control" placeholder="Email address">
</div>
<div class="form-group mb-4">
<label for="password" class="sr-only">Password</label>
<input type="password" name="password" id="password" class="form-control" placeholder="***********">
</div>
<input name="login" id="login" class="btn btn-block login-btn mb-4" type="button" value="Login" onclick="login()">
<input name="register" id="register" class="btn btn-block login-btn mb-4" type="button" value="Register">
</form>
Forgot password?
<nav class="login-card-footer-nav">
Terms of use.
Privacy policy
</nav>
</div>
</div>
</div>
</div>
</div>
</main>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</body>
</html>
That was the full script.
When I run the code and go to chrome, I keep finding an error saying: TypeError: login is not a function at HTMLInputElement.onclick (VM188 index.html:76) onclick # VM188 index.html:76
Do you know what is happening?
Thanks

Clear/reset the content of a div using a button

I am developing a simple game (similar to Blockly and Scratch) that involves drag-and-drop. After dragging the buttons to a target container, I want to be able to clear the content of that container by pressing a Reset button. I have tried to implement it (which is demonstrated in the code below) but to no avail.
Here are the relevant codes:
<!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, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Play Maze - Zoom Zoom</title>
<script src="{{ url_for('static',filename='vendor/jquery/jquery.min.js') }}"></script>
<script src="{{ url_for('static',filename='js/sb-admin-2.min.js') }}"></script>
</head>
<body id="page-top">
<div id="wrapper">
<ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion" id="accordion_sidebar">
<!-- Commands -->
<a class="sidebar-brand d-flex align-items-center justify-content-center">
<div class="sidebar-brand-icon rotate-n-15"><i class="fas fa-laugh-wink"></i></div>
<div class="sidebar-brand-text mx-3">Commands</div>
</a>
<div class="commands">
<div class="draggable">
<input type="button" class="btn-forward" id="forward" value="Forward" draggable="true"></button>
</div>
<div class="draggable">
<input type="button" class="btn-backward" id="backward" value="Backward" draggable="true"></button>
</div>
<div class="draggable">
<input type="button" class="btn-right" id="right" value="Right" draggable="true"></button>
</div>
<div class="draggable">
<input type="button" class="btn-left" id="left" value="Left" draggable="true"></button>
</div>
<div class="draggable">
<input type="button" class="btn-repeat" id="repeat" value="Repeat" draggable="true"></button>
</div>
</div>
</ul>
<!-- Begin Page Content -->
<div class="container-fluid">
<div class="row">
<div class="col-xl-12 col-lg-12">
<div class="card shadow mb-4">
<div class="card-body">
<div class="row">
<div class="col">
<div class="container" id="commands"></div>
<button id="reset" class="btn btn-lg btn-primary" value="Reset"></button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" \
integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" \
crossorigin="anonymous" referrerpolicy="no-referrer">
</script>
<script type="text/javascript">
$(document).ready(function()
{
$("button").click(function()
{
$("#commands").empty();
});
});
</script>
</html>

You can make divs' appear or disappear using vanilla javascript only.
A simple example below:
<div id="container">This is Div's content</div>
<reset id="resetButton" value="Reset">Reset</reset>
<script>
resetButton.addEventListener('click', () => {
container.innerHTML = '';
// Or container.style.display = 'none'; if you want container to disappear without leaving space
// Or container.style.visibility = 'hidden'; if you want container to disappear leaving space
});
</script>

Changed to:
<reset id="reset" class="btn btn-lg btn-primary" value="Reset">Reset</reset>
<script type="text/javascript">
$(document).ready(function()
{
$("reset").click(function()
{
$("#commands").empty();
});
});
</script>

aligning fetch api array of objects in bootstrap 4 rows and columns using foreach loop to iterate through array

I am fetching data from an external API which is an array of objects(each objects contain Details of harry potter movie character and there are 50 objects) I am using foreach loop to iterate through array so that I can show every object in my browser I am using Bootstrap 4 rows and columns method, now I want first object from array to show in first row first column and second object in first row second column, similarly third object in second row first column fourth object in second row second column and so on. how can I Achieve this with bootstrap 4 ?
**HTML file**
<!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="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w=="
crossorigin="anonymous"
/>
<link rel="stylesheet" href="style.css" />
<title>harry poter</title>
</head>
<body>
<div class="gap">
<h1 class="font-weight-bold text-dark">
✨Harry Potter Characters✨
</h1>
</div>
<div class="form-group gap-1">
<input
type="search"
class="form-control"
placeholder="search for character"
/><i class="fas fa-search search"></i>
</div>
<div class="container gap-2">
<ul id="hpcharacters"></ul>
</div>
<script src="main.js"></script>
<script
src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"
></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"
></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"
></script>
</body>
</html>
JAVASCRIPT file
const hpCharacters = document.querySelector("#hpcharacters");
async function getHpCharacters() {
const res = await fetch("http://hp-api.herokuapp.com/api/characters");
const data = await res.json();
let output = "";
data.forEach((user) => {
output += `
<div class="row">
<div class="col-5">
<div class="row">
<div class="col-sm-5">
<li> ACTOR:${user.actor}</li>
<li> NAME:${user.name}</li>
<li> HOUSE:${user.house}</li>
</div>
<div class="col-sm-5"">
<img src="${user.image}" class="img-fluid">
</div>
</div>
</div>
<div class="col-5">
<div class="row">
<div class="col-sm-5">
<li> ACTOR:${user.actor}</li>
<li> NAME:${user.name}</li>
<li> HOUSE:${user.house}</li>
</div>
<div class="col-sm-5"">
<img src="${user.image}" class="img-fluid">
</div>
</div>
</div>
</div>
</div>`;
});
hpCharacters.innerHTML = output;
}
getHpCharacters();

hpCharacters.innerHTML = output;
This line always overwrite the previous rows. So, you might want to use something hpCharacters.insertAdjacentElement('afterend',output). But hpCharacters is an tag. Why do you want to put rows (which is a div) inside an ul tag? That is not the appropriate way to do it.

I've created a helper function getCharacterHTML that returns HTML of a column if object exist in data and used for-loop instead of forEach to make it simple and get increment by i += 2.
const hpCharacters = document.querySelector("#hpcharacters");
function getCharacterHTML(data, i) {
const obj = data[i];
if (!obj) return "";
return `
<div class="col-5">
<div class="container">
<div class="row">
<div class="col-sm-5">
<li> ACTOR:${obj.actor}</li>
<li> NAME:${obj.name}</li>
<li> HOUSE:${obj.house}</li>
</div>
<div class="col-sm-5"">
<img src=" ${obj.image}" class="img-fluid" />
</div>
</div>
</div>
</div>
`;
}
async function getHpCharacters() {
const res = await fetch("http://hp-api.herokuapp.com/api/characters");
const data = await res.json();
let output = "";
for (let i = 0; i < data.length; i += 2) {
output += `
<div class="row">
${getCharacterHTML(data, i)}
${getCharacterHTML(data, i + 1)}
</div>
`;
}
hpCharacters.innerHTML = output;
}
getHpCharacters();
<!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="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" />
<link rel="stylesheet" href="style.css" />
<title>harry potter</title>
</head>
<body>
<div class="gap">
<h1 class="font-weight-bold text-dark">
✨Harry Potter Characters✨
</h1>
</div>
<div class="form-group gap-1">
<input type="search" class="form-control" placeholder="search for character" /><i class="fas fa-search search"></i>
</div>
<div class="container gap-2">
<ul id="hpcharacters"></ul>
</div>
<script src="main.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>

I commented jquery-ui.min.js to show a modal window but this is restricting to show datepicker

I have a html page as below
`
<HTML lang="EN-US">
<HEAD>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta content="IE=edge" http-equiv="X-UA-Compatible" />
<TITLE>
DUMMY
</TITLE>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
<link rel=stylesheet href=styles.css>
</HEAD>
<body class="mild-blue">
<head>
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta content="IE=edge" http-equiv="X-UA-Compatible" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<metatags id="MetaTags1" selectedtabindex="0" runat="server" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript" src="css/jquery.dataTables.min.js"></script>
<!-- <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>-->
<script type="text/javascript">
wp.include("menu");
</script>
</head>
<!--Confirm Modal to naviagate to APP-->
<div id="navigateConfirm" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog modal-dialog-centered">
<form>
<div class="modal-content warning-block">
<div class="header">
<h6>Confirmation</h6>
</div>
<div class="content">
<p class="d-inline-block my-md-2 mt-0 medium p-0">You are navigating out of iStore. Any pending changes will be lost. Continue ?</p>
<div class="modal-footer">
<button class="button-secondary" data-dismiss="modal" id="navigateConfirmYes">YES</button>
<button type="submit" class="button-primary" data-dismiss="modal">NO</button>
</div>
</div>
</div>
</form>
</div>
</div>
<head>
<div class="primary-header">
<nav class="row navbar">
<a class="navbar-brand d-flex">
<img src="images/logo.svg" alt="Logo" id="navigateAPP" />
<p class="header p-0" onclick="#">TEST Store</p>
</a>
</div>
</nav>
</div>
<script LANGUAGE="javascript">
$("#navigateAPP").click(function(event) {
$('#navigateConfirm').modal('show');
});
$("#navigateConfirmYes").click(function(event) {
window.location.href = document.getElementById("returnUrl").value;
});
</script>
<div class="row m-0">
<div class="col-lg-6 deliveryOps p-0 pr-lg-1">
<div class="cartCard py-3">
<div class="row">
<div class="formField mb-0 col-12 col-md-6 col-lg-12">
<input type="text" name="ibeforedate" id="ibeforedate" class="datepicker" placeholder="Example: 31-DEC-1999" autocomplete="off" required onChange="this.value = datecheck(this.value,'DD-MON-RRRR');" readonly>
<label class="input_label medium">Request Delivery Date</label>
</div>
</div>
</div>
</div>
</div>
`
When user clicks on logo.svg, navigateAPP modal window should popup
at the same we have one datefield.
Now the issue is, if i use <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
I am able to open date calendar and select the date from the calender. But when i click on logo.svg, navigateAPP modal window is not appearing.
When i uncomment the jquery-ui.js, able to see modal window but datepicker is not working.
How to make both the things work.
Thanks

how can I solve the problem with accents even if I already used a charset = UTF-8?

<%# taglib uri = "http://java.sun.com/jsp/jstl/core" prefix = "c" %>
<%# page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Library Management</title>
<meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="assets/css/custom.css" rel="stylesheet" type="text/css" />
</head>
<body>
<jsp:include page='menu.jsp'></jsp:include>
<main>
<section class="content">
<div class="page-announce valign-wrapper">
<i class="material-icons">menu</i>
<h1 class="page-announce-text valign">Fiche livre</h1>
</div>
<div class="row">
<div class="container">
<h5>Crèation d'un nouveau livre</h5>
<div class="row">
<form action="livre_add" method="post" class="col s12">
<div class="row">
<div class="input-field col m12 s12">
<input id="titre" type="text" name="titre">
<label for="titre">Titre</label>
</div>
</div>
<div class="row">
<div class="input-field col s6">
<input id="auteur" type="text" name="auteur">
<label for="auteur">Auteur</label>
</div>
<div class="input-field col s6">
<input id="isbn" type="text" name="isbn">
<label for="isbn">ISBN 13</label>
</div>
</div>
<div class="row center">
<button class="btn waves-effect waves-light" type="submit">Enregistrer</button>
<button class="btn waves-effect waves-light orange" type="reset">Annuler</button>
</div>
</form>
</div>
</div>
</div>
</section>
</main>
<jsp:include page='footer.jsp'></jsp:include>
</body>
</html>
That's a file in .jsp that is a class to visualize one function of the program .
I have a problem when I open the browser, the accents are decoded as not found even if I have used a UTF-8 charset and statement to print Crèation d'un nouveau livre .

Categories