Exercices adding
This commit is contained in:
gauvainboiche
26
_small_exercices/looping_through_arrays.js
Normal file
26
_small_exercices/looping_through_arrays.js
Normal file
@@ -0,0 +1,26 @@
|
|||||||
|
const vacationSpots = ['Bali', 'Paris', 'Tulum'];
|
||||||
|
const bestVacationSpots = ["Pyongyang", "Caracas", "Beijing", "Havana", "Ho-Chi-Minh ville"];
|
||||||
|
|
||||||
|
// Write your code below
|
||||||
|
|
||||||
|
for (let i = 0; i < vacationSpots.length; i++) {
|
||||||
|
console.log(`I would love to visit ${vacationSpots[i]}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log("----------");
|
||||||
|
|
||||||
|
for (const city of vacationSpots) {
|
||||||
|
console.log(`I would love to visit ${city}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log("----------");
|
||||||
|
|
||||||
|
function cityTravelling(array) {
|
||||||
|
for (const item of array) {
|
||||||
|
console.log(`I would love to visit ${item}`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
cityTravelling(vacationSpots);
|
||||||
|
console.log("----------");
|
||||||
|
cityTravelling(bestVacationSpots);
|
||||||
24
_small_exercices/whale_talk.js
Normal file
24
_small_exercices/whale_talk.js
Normal file
@@ -0,0 +1,24 @@
|
|||||||
|
const input = "Il existe une humilite naive, assez frequente en somme, qui, lorsqu’on la possede, vous rend, une fois pour toutes, impropre a etre disciple de la connaissance. Car, au moment ou un homme de cette espece aperçoit quelque chose qui le frappe, il se retourne en quelque sorte sur lui-meme et se dit : « Tu t’es trompe ! Ou avais-tu tes sens ! Cela ne peut pas etre la verite ! » — Et alors, au lieu d’y regarder encore une fois de plus pres, au lieu de preter encore l’oreille, il s’enfuit intimide et evite de rencontrer la chose frappante qu’il cherche a se sortir de la tete aussi vite que possible. Son canon interieur dit : « Je ne veux rien voir qui soit en contradiction avec l’opinion courante sur les choses ! Suis-je fait, moi, pour decouvrir des verites nouvelles ? Il y en a deja trop d’anciennes. » ";
|
||||||
|
|
||||||
|
const inputLowercase = input.toLowerCase();
|
||||||
|
|
||||||
|
const vowels = ["a", "e", "i", "o", "u"];
|
||||||
|
|
||||||
|
const resultArray = [];
|
||||||
|
|
||||||
|
for (const char of inputLowercase) {
|
||||||
|
//console.log(char);
|
||||||
|
for (const vowel of vowels) {
|
||||||
|
//console.log(vowel);
|
||||||
|
if (vowel === char) {
|
||||||
|
if (vowel === "e" || vowel === "u") {
|
||||||
|
resultArray.push(vowel); // Add an additionnal E or U if present on top of the other .push
|
||||||
|
}
|
||||||
|
resultArray.push(vowel); // Add a push() for every vowel, whatever it is
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const formatedResultArray = resultArray.join("").toUpperCase();
|
||||||
|
|
||||||
|
console.log(formatedResultArray);
|
||||||
BIN
number-guesser-starting.zip
Normal file
BIN
number-guesser-starting.zip
Normal file
Binary file not shown.
99
number-guesser-starting/game.js
Normal file
99
number-guesser-starting/game.js
Normal file
@@ -0,0 +1,99 @@
|
|||||||
|
let target;
|
||||||
|
|
||||||
|
const humanGuessInput = document.getElementById('human-guess');
|
||||||
|
|
||||||
|
const roundNumberDisplay = document.getElementById('round-number');
|
||||||
|
|
||||||
|
const computerGuessDisplay = document.getElementById('computer-guess');
|
||||||
|
const humanScoreDisplay = document.getElementById('human-score');
|
||||||
|
const computerScoreDisplay = document.getElementById('computer-score');
|
||||||
|
const targetNumberDisplay = document.getElementById('target-number');
|
||||||
|
const computerWinsDisplay = document.getElementById('computer-wins');
|
||||||
|
|
||||||
|
const guessButton = document.getElementById('guess');
|
||||||
|
const nextRoundButton = document.getElementById('next-round')
|
||||||
|
|
||||||
|
guessButton.addEventListener('click', () => {
|
||||||
|
// Generate the target value
|
||||||
|
target = generateTarget();
|
||||||
|
// Retrieve the player's guess
|
||||||
|
const currentHumanGuess = humanGuessInput.value;
|
||||||
|
// Make a random 'computer guess'
|
||||||
|
const computerGuess = Math.floor(Math.random() * 10);
|
||||||
|
|
||||||
|
// Display the computer guess and the target
|
||||||
|
computerGuessDisplay.innerText = computerGuess;
|
||||||
|
targetNumberDisplay.innerText = target;
|
||||||
|
|
||||||
|
// Determine if the human or computer wins:
|
||||||
|
const humanIsWinner = compareGuesses(currentHumanGuess, computerGuess, target)
|
||||||
|
const winner = humanIsWinner ? 'human' : 'computer'
|
||||||
|
|
||||||
|
// Update the correct score:
|
||||||
|
updateScore(winner);
|
||||||
|
|
||||||
|
// Display the winner
|
||||||
|
if (humanIsWinner) {
|
||||||
|
guessButton.innerText = 'You Win!!!!!';
|
||||||
|
guessButton.classList.toggle('winning-text')
|
||||||
|
} else {
|
||||||
|
computerWinsDisplay.innerText = 'Computer Wins!!!';
|
||||||
|
}
|
||||||
|
|
||||||
|
// winnerDisplay.innerText = humanIsWinner ? 'You win!' : 'Computer wins!';
|
||||||
|
|
||||||
|
// Display the current scores:
|
||||||
|
humanScoreDisplay.innerText = humanScore;
|
||||||
|
computerScoreDisplay.innerText = computerScore;
|
||||||
|
|
||||||
|
// Set the correct disabled state for the buttons
|
||||||
|
guessButton.setAttribute('disabled', true)
|
||||||
|
nextRoundButton.removeAttribute('disabled');
|
||||||
|
});
|
||||||
|
|
||||||
|
nextRoundButton.addEventListener('click', () => {
|
||||||
|
// Increase the round number
|
||||||
|
advanceRound();
|
||||||
|
// Display the new round number
|
||||||
|
roundNumberDisplay.innerText = currentRoundNumber;
|
||||||
|
|
||||||
|
// Set the correct disabled state for the buttons
|
||||||
|
nextRoundButton.setAttribute('disabled', true);
|
||||||
|
guessButton.removeAttribute('disabled');
|
||||||
|
|
||||||
|
// Reset the guess input box and the target number display:
|
||||||
|
targetNumberDisplay.innerText = '?';
|
||||||
|
guessButton.innerText = 'Make a Guess';
|
||||||
|
humanGuessInput.value = '';
|
||||||
|
computerGuessDisplay.innerText = '?';
|
||||||
|
computerWinsDisplay.innerText = '';
|
||||||
|
guessButton.classList.remove('winning-text');
|
||||||
|
});
|
||||||
|
|
||||||
|
const addButton = document.getElementById('add');
|
||||||
|
const subtractButton = document.getElementById('subtract');
|
||||||
|
|
||||||
|
addButton.addEventListener('click', () => {
|
||||||
|
humanGuessInput.value = +humanGuessInput.value + 1;
|
||||||
|
handleValueChange(humanGuessInput.value);
|
||||||
|
});
|
||||||
|
|
||||||
|
subtractButton.addEventListener('click', () => {
|
||||||
|
humanGuessInput.value = +humanGuessInput.value - 1;
|
||||||
|
handleValueChange(humanGuessInput.value);
|
||||||
|
});
|
||||||
|
|
||||||
|
const handleValueChange = value => {
|
||||||
|
if (value > 0 && value <= 9) {
|
||||||
|
subtractButton.removeAttribute('disabled');
|
||||||
|
addButton.removeAttribute('disabled');
|
||||||
|
} else if (value > 9) {
|
||||||
|
addButton.setAttribute('disabled', true);
|
||||||
|
} else if (value <= 0) {
|
||||||
|
subtractButton.setAttribute('disabled', true);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
humanGuessInput.addEventListener('input', function(e) {
|
||||||
|
handleValueChange(e.target.value);
|
||||||
|
});
|
||||||
67
number-guesser-starting/index.html
Normal file
67
number-guesser-starting/index.html
Normal file
@@ -0,0 +1,67 @@
|
|||||||
|
<!doctype html>
|
||||||
|
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>Number Guesser</title>
|
||||||
|
<link href="https://fonts.googleapis.com/css?family=Nunito+Sans:400,700" rel="stylesheet">
|
||||||
|
<link rel="stylesheet" href="./style.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="game-container">
|
||||||
|
<header>
|
||||||
|
<h1>Number Guesser!</h1>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div class="rounds">
|
||||||
|
<p class="round-label">Round <span id="round-number">1</span></p>
|
||||||
|
<p class="guess-label">Target Number: <span id="target-number">?</span></p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="guessing-area">
|
||||||
|
<div class="guess computer-guess">
|
||||||
|
<div class="guess-title">
|
||||||
|
<p class="guess-label">Computer</p>
|
||||||
|
<p class="score-label">Score: <span id="computer-score">0</span></p>
|
||||||
|
</div>
|
||||||
|
<p id="computer-guess">?</p>
|
||||||
|
<p class="winning-text" id="computer-wins"></p>
|
||||||
|
</div>
|
||||||
|
<div class="guess human-guess">
|
||||||
|
<div class="guess-title">
|
||||||
|
<p class="guess-label">You</p>
|
||||||
|
<p class="score-label">Score: <span id="human-score">0</span></p>
|
||||||
|
</div>
|
||||||
|
<input type="number" id="human-guess" min=0 max=9 value=0>
|
||||||
|
<div class="number-controls">
|
||||||
|
<button class="number-control left" id="subtract" disabled>-</button>
|
||||||
|
<button class="number-control right" id="add">+</button>
|
||||||
|
</div>
|
||||||
|
<button class="button" id="guess">Make a Guess</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="next-round-container">
|
||||||
|
<button class="button" id="next-round" disabled>Next Round</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="instructions">
|
||||||
|
<div class="instruction">
|
||||||
|
<h3>Step 1</h3>
|
||||||
|
<p>Input a number between 0 and 9</p>
|
||||||
|
</div>
|
||||||
|
<div class="instruction">
|
||||||
|
<h3>Step 2</h3>
|
||||||
|
<p>Click "Make a Guess" to submit your guess and see who won the round.</p>
|
||||||
|
</div>
|
||||||
|
<div class="instruction">
|
||||||
|
<h3>Step 3</h3>
|
||||||
|
<p>Click "Next Round" to play again.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="./script.js"></script>
|
||||||
|
<script src="./game.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
34
number-guesser-starting/script.js
Normal file
34
number-guesser-starting/script.js
Normal file
@@ -0,0 +1,34 @@
|
|||||||
|
let humanScore = 0;
|
||||||
|
let computerScore = 0;
|
||||||
|
let currentRoundNumber = 1;
|
||||||
|
|
||||||
|
// Write your code below:
|
||||||
|
|
||||||
|
function generateTarget() {
|
||||||
|
return Math.floor(Math.random() * 10);
|
||||||
|
}
|
||||||
|
|
||||||
|
function compareGuesses(humanGuess, computerGuess, target) {
|
||||||
|
if (humanGuess < 0 || humanGuess > 9) {
|
||||||
|
alert("Your guess must be between 0 and 9.");
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
const humanDiff = Math.abs(target - humanGuess);
|
||||||
|
const computerDiff = Math.abs(target - computerGuess);
|
||||||
|
|
||||||
|
return humanDiff <= computerDiff;
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateScore(winner) {
|
||||||
|
if (winner === 'human') {
|
||||||
|
humanScore++;
|
||||||
|
} else if (winner === 'computer') {
|
||||||
|
computerScore++;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function advanceRound() {
|
||||||
|
currentRoundNumber++;
|
||||||
|
console.log(`Current Round: ${currentRoundNumber}`);
|
||||||
|
}
|
||||||
195
number-guesser-starting/style.css
Normal file
195
number-guesser-starting/style.css
Normal file
@@ -0,0 +1,195 @@
|
|||||||
|
* {
|
||||||
|
font-family: 'Nunito Sans';
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 3px;
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.game-container {
|
||||||
|
max-width: 640px;
|
||||||
|
margin: 0 auto;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center
|
||||||
|
}
|
||||||
|
|
||||||
|
.rounds {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.round-label {
|
||||||
|
font-size: 30px;
|
||||||
|
font-weight: 700;
|
||||||
|
margin-bottom: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.guess {
|
||||||
|
min-width: 303px;
|
||||||
|
height: 328px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
padding: 19px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.guessing-area {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
align-items: flex-start;
|
||||||
|
margin-bottom: 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.guess-title {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-start;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.guess-label {
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 700;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.score-label {
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 700;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.target-guess {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.computer-guess {
|
||||||
|
background-color: #ececec;
|
||||||
|
}
|
||||||
|
|
||||||
|
#computer-guess {
|
||||||
|
font-size: 50px;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #a5a5a5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.human-guess {
|
||||||
|
border: 1px solid #979797;
|
||||||
|
}
|
||||||
|
|
||||||
|
.guess input {
|
||||||
|
height: 90px;
|
||||||
|
width: 90px;
|
||||||
|
font-size: 30px;
|
||||||
|
text-align: center;
|
||||||
|
margin: 0 auto;
|
||||||
|
margin-bottom: 7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.number-controls {
|
||||||
|
font-size: 0;
|
||||||
|
margin-bottom: 23px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.number-control {
|
||||||
|
border: solid 1px #4c7ef3;
|
||||||
|
display: inline-block;
|
||||||
|
width: 45px;
|
||||||
|
height: 35px;
|
||||||
|
font-size: 24px;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #4c7ef3;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.number-controls button[disabled] {
|
||||||
|
color: #dfdfdf;
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
|
|
||||||
|
.left {
|
||||||
|
border-top-left-radius: 22.5px;
|
||||||
|
border-bottom-left-radius: 22.5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right {
|
||||||
|
border-top-right-radius: 22.5px;
|
||||||
|
border-bottom-right-radius: 22.5px;
|
||||||
|
border-left-width: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.controls {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button {
|
||||||
|
background-color: #4c7ef3;
|
||||||
|
color: #fff;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
#guess {
|
||||||
|
padding: 20px;
|
||||||
|
width: 169px;
|
||||||
|
height: 59px;
|
||||||
|
border: none;
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type=number]::-webkit-inner-spin-button {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#next-round {
|
||||||
|
width: 179px;
|
||||||
|
height: 64px;
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
margin-bottom: 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button[disabled] {
|
||||||
|
background-color: #d2d2d2;
|
||||||
|
color: #a0a0a0;
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
|
|
||||||
|
.instructions {
|
||||||
|
background-color: #ececec;
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
}
|
||||||
|
|
||||||
|
.instruction {
|
||||||
|
width: 180px;
|
||||||
|
padding: 2px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.instructions h3 {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.winning-text, .winning-text[disabled] {
|
||||||
|
color: #ec3636;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user