Activités JavaScript

Correction du devoir de contrôle

RIB Checker

Fichier HTML

<h1>RIB Checker</h1>
<div id="rib-band">
  <form action="#">
    <div>
      <label for="rib">RIB Checker</label>
      <input type="text" name="rib" id="rib" required>
      <button type="button" id="valid-rib">Validate RIB</button>
    </div>
  </form>
</div>
<div id="res"></div>
<script src="rib.js"></script>

Fichier CSS

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background-color: #c4d8ed;
  color: #00377c;
  font-size: 17px;
  font-family: sans-serif;
}

#rib-band {
	background-color: #4c6793;
	color: white;
	margin: 50px 0;
}

form {
	width: 600px;
	margin: 0 auto;
	padding: 50px 0;
}

#valid-rib {
	padding: 10px 30px;
	border-radius: 0;
	border: none;
	font-size: 17px;
	font-weight: bold;
	color: #fff;
	background-color: #00823a;
}

#rib {
	padding: 10px;
	font-size: 17px;
	border-radius: 0;
	border: #5d3cb5 solid 1px;
	margin: 0 13px;
	width: 299px;
}

h1 {
	text-align: center;
	margin: 2em 0 1em;
	text-transform: uppercase;
}

.wrong {
  color: maroon;
}

.valid {
  color: green;
}

#res {
  text-align: center;
  font-size: 20px;
  width: 600px;
  margin: 0 auto;
}

Code JavaScript

const inpRIB = document.getElementById("rib");
const btnVal = document.getElementById("valid-rib");
const divRes = document.getElementById("res");

function btnValClicked(e) {
  /* TODO */
}

btnVal.addEventListener("click", btnValClicked);

function isAlphanumric(ch) {
  /* TODO */
}

function isValidRIB(ch) {
  /* TODO */
}

const digits = "12345678912345678923456789";
function replaceByDigits(ch) {
  let ch1 = "";
  for (let i = 0; i < ch.length; i++) {
    let car = ch[i];
    if (car >= "A" && car <= "Z") {
      car = digits[car.charCodeAt(0) - 65];
    } else if (car >= "a" && car <= "z") {
      car = digits[car.charCodeAt(0) - 97];
    }
    ch1 += car;
  }
  return ch1;
}

function removeSpaces(ch) {
  let ch1 = "";
  for (let i = 0; i < ch.length; i++) {
    if (ch[i] != " ") ch1 += ch[i];
  }
  return ch1;
}

function mod97(ch) {
  let mul = 1, s = 0;
  for (let i = ch.length - 1; i >= 0; i--) {
    s = (s + Number(ch[i]) * mul) % 97;
    mul = (mul * 10) % 97;
  }
  return s;
}

// Some valid RIBs to test with
//----------------------------------
// 30001 00794 12345678901 85
// 12345 12345 0123456789A 03
// 11808 00910 12345678901 47
// 20041 01005 0500013M026 06
// 12548 02998 98765432109 21
// 12548 0KRZH IYXONMCBJ0I 21

ClicToPay

Enoncé du devoir

Fichier HTML

<form action="#" method="post">
  <div>
    <img src="images/clictopay-logo.png" alt="Clic to pay logo">
  </div>
  <div class="titre">
    Numéro de la commande N°<span id="num-cmd"></span> &darr;
  </div>
  <div>
    <label for="num-card">Numéro de la carte</label>
    <input type="text" id="num-card" name="num_card" placeholder="**** **** **** **** ****" required>
  </div>
  <div class="row">
    <div class="col">
      <label for="month">Valable jusqu'au</label>
      <select name="month" id="month" required>
        <option value="">-</option>
        <option value="1">Janvier</option>
        <option value="2">Février</option>
        <option value="3">Mars</option>
        <option value="4">Avril</option>
        <option value="5">Mai</option>
        <option value="6">Juin</option>
        <option value="7">Juillet</option>
        <option value="8">Août</option>
        <option value="9">Septembre</option>
        <option value="10">Octobre</option>
        <option value="11">Novembre</option>
        <option value="12">Décembre</option>
      </select>
    </div>
    <div class="col">
      <label for="year">&nbsp;</label>
      <select name="year" id="year" required>
        <option value="">-</option>
        <option value="2023">2023</option>
        <option value="2024">2024</option>
        <option value="2025">2025</option>
        <option value="2026">2026</option>
      </select>
    </div>
    <div class="col">
      <label for="CVV2">CVV2</label>
      <input type="password" name="cvv2" id="CVV2" placeholder="***" required>
    </div>
  </div>
  <div>
    <label for="nom">Le nom du détenteur</label>
    <input type="text" name="nom" id="nom" required>
  </div>
  <div>
    <label for="mail">Adresse e-mail</label>
    <input type="email" name="mail" id="mail" required>
  </div>
  <div>
    <button type="button" id="paie">Paiement <span id="montant"></span> TND</button>
  </div>
</form>
<script src="paiement.js"></script>

Fichier CSS

* {
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
  font-size: 14px;
}

form {
  width: 540px;
  margin: 30px auto;
  padding: 20px;
  border: gray solid 1px;
  border-radius: 10px;
}

form>div {
  margin: 15px 0;
}

label[for] {
  display: block;
  color: #464646;
}

.row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.col {
  width: 30%;
}

.titre {
  font-size: 1.2em;
  font-weight: bold;
  text-align: center;
}

input[type="text"],
input[type="email"],
input[type="password"],
select {
  width: 100%;
  font-size: 16px;
  padding: 10px;
  border: #808080 solid 1px;
  border-radius: 5px;
}

button {
  width: 100%;
  background-color: blue;
  color: white;
  font-weight: bold;
  font-size: 20px;
  padding: 15px;
  border: none;
  border-radius: 5px;
}

Code JavaScript

const spanNumCmd = document.getElementById("num-cmd");
const spanMontant = document.getElementById("montant");
const inpNumCard = document.getElementById("num-card");
const inpMonth = document.getElementById("month");
const inpYear = document.getElementById("year");
const inpCVV2 = document.getElementById("CVV2");
const inpNom = document.getElementById("nom");
const inpMail = document.getElementById("mail");
const btnPaie = document.getElementById("paie");

function btnPaieClicked(e) {
  /* TODO */
}

function validCardNumber(numCard) {
  /* TODO */
}

function validMail(mail) {
  return /^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/g.test(mail);
}

function validCVV2(CVV2) {
  return /^[0-9]{3}$/g.test(CVV2);
}

function estAlphabetique(nom) {
  return /^[\w\s]{3,}$/g.test(nom);
}

function randint(a, b) {
  return Math.floor(a + Math.random() * (b - a + 1));
}

function genNumCommand() {
  let s = "";
  for (let i = 0; i < 7; i++) {
    s += randint((i == 0) ? 1 : 0, 9);
  }
  return s;
}

btnPaie.addEventListener("click", btnPaieClicked);
spanNumCmd.textContent = genNumCommand();
spanMontant.textContent = randint(10, 250).toFixed(3);

Grille Calories

Enoncé du devoir

Code HTML

<h1>Nombre de calories grillées</h1>
<p>Remplir le formulaire suivant pour calculer le nombre de calories que vous allez griller après cet exercice.</p>
<form id="frm" action="#" method="post">
  <div>
    <label for>Activité</label>
    <label><input type="radio" name="act" id="act-1" value="marche" required> Marche</label>
    <label><input type="radio" name="act" id="act-2" value="course"> Course</label>
  </div>
  <div>
    <label for="int">Intensité</label>
    <select name="int" id="int" required>
      <option value="0">- Faire un choix -</option>
      <option value="1">Faible</option>
      <option value="2">Moyenne</option>
      <option value="3">Modérée</option>
    </select>
  </div>
  <div>
    <label for="tmp">Temps d'exercice</label>
    <input type="number" name="tmp" id="tmp" min="1" max="300" placeholder="Nombre de minutes" required>
  </div>
  <div>
    <button type="button" id="calc">Calculer</button>
    <button type="reset">Effacer</button>
  </div>
</form>
<div id="res">&nbsp;</div>
<script src="grille_calories.js"></script>

Code CSS

* {
  box-sizing: border-box;
}

body {
  font-size: 12pt;
  font-family: sans-serif;
}

h1 {
  color: orange;
  text-align: center;
  width: 640px;
  margin: 1em auto;
}

p {
  text-align: center;
  width: 640px;
  margin: auto;
}

#res,
#frm {
  padding: 30px;
  width: 640px;
  margin: 25px auto;
  border: #333 solid 1px;
  border-radius: 8px;
  background-color: #eee;
}

#frm > div {
  margin: 10px 0;
}

label[for] {
  display: block;
  font-weight: bold;
  font-size: 1.1em;
}

select,
input[type="number"] {
  font-size: 12pt;
  width: 100%;
  padding: 10px;
}

button {
	font-size: 12pt;
	background-color: #333;
	color: #fff;
	border: none;
	border-radius: 8px;
	padding: 10px 30px;
}

#res {
  font-size: 16pt;
  text-align: center;
  margin-top: 30px;
}

Code JavaScript

const radAct1 = document.getElementById("act-1");
const radAct2 = document.getElementById("act-2");
const selInt = document.getElementById("int");
const inpTmp = document.getElementById("tmp");
const btnCalc = document.getElementById("calc");
const divRes = document.getElementById("res");

function btnCalcClicked(ev) {
  /* TODO */
}

btnCalc.addEventListener("click", btnCalcClicked);