Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Add the first Exercice of JS2 W1 #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 24 additions & 0 deletions Week1/homework/js-exercices/about_me.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>About Me</title>

<style>
.list-item { color: red}
</style>

</head>
<body>
<h1>About Me</h1>

<ul>
<li>Nickname: <span id="nickname"></span></li>
<li>Favorite food: <span id="fav-food"></span></li>
<li>Hometown: <span id="hometown"></span></li>
</ul>
<script src="about_me.js">

</script>
</body>
</html>
25 changes: 25 additions & 0 deletions Week1/homework/js-exercices/about_me.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
var myBody = document.body;
myBody.style.fontFamily="Arial, sans-serif";

var mySpan1 = document.getElementById("nickname");
var mySpan2 = document.getElementById("fav-food");
var mySpan3 = document.getElementById("hometown");
mySpan1.innerHTML="Bouba";
mySpan2.innerHTML="Rice";
mySpan3.innerHTML="Conakry";

var myLi= document.getElementsByTagName("li");
for(let i=0; i<myLi.length; i++){
myLi[i].className="list-item";
}

var myImg = document.createElement("img");
myImg.src="bouba.jpg";
myImg.style.height="200px";
myImg.style.width="250px";
myBody.appendChild(myImg);





17 changes: 17 additions & 0 deletions Week1/homework/js-exercices/bookList.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
<!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>Document</title>
</head>
<body>


<script src="bookList.js">

</script>

</body>
</html>
44 changes: 44 additions & 0 deletions Week1/homework/js-exercices/bookList.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
var mesLivres=[
{
title:"Les Crapauds-brousse",
author:"Tierno Monénembo",
alreadyRead:true,
imgSrc:"https://media.senscritique.com/media/000006441212/source_big/Les_crapauds_brousse.jpg",
},
{
title: "La Révolte des bovidés",
author: "Amadou Hampâté Bâ",
alreadyRead: false,
imgSrc:"https://images-eu.ssl-images-amazon.com/images/I/61d84huBGyL.jpg",
},
{
title: "Hosties noires",
author: "Léopold Sédar Senghor",
alreadyRead: true,
imgSrc:"https://images-na.ssl-images-amazon.com/images/I/41ZQjlvZ2QL._AC_SY400_.jpg",
}

]
var para = document.createElement("p");
var ulList = document.createElement("ul");
for (let livreX of mesLivres ) {
var div=document.createElement("div");
var liList = document.createElement("li");
var myImg = document.createElement("img");
if(livreX.alreadyRead){
div.style.background="red";
}else{div.style.background="green";}
myImg.src=livreX.imgSrc;
myImg.style.height="100px";
myImg.style.width="100px";
var nodeli = document.createTextNode(livreX.title+' of '+livreX.author);
liList.appendChild(nodeli);
ulList.appendChild(div);
div.appendChild(liList);
div.appendChild(myImg);
console.log(mesLivres.length) ;
}
var myBody = document.querySelector("body");
myBody.appendChild(para);
para.appendChild(ulList);

Binary file added Week1/homework/js-exercices/bouba.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
57 changes: 57 additions & 0 deletions Week1/homework/js-exercices/catWalk.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Cat Walk</title>
</head>
<body>
<img style="position:absolute;" src="http://www.anniemation.com/clip_art/images/cat-walk.gif" />

<script>
var myImg= document.querySelector("img");
var imgWidth=myImg.width;
var imgStyle=myImg.style.left=0;

function catWalk(){

if(imgStyle<(innerWidth-myImg.width)){

if(Math.round(((innerWidth/2)-(myImg.width/2))/10)==Math.round(imgStyle/10)){

clearInterval(id);
myImg.src="https://media1.tenor.com/images/2de63e950fb254920054f9bd081e8157/tenor.gif";
setTimeout(catDanse, 5000);

}
imgStyle+=10;
myImg.style.left=imgStyle+"px";
}else{
imgStyle=myImg.style.left=0;
imgStyle+=10;
myImg.style.left=imgStyle+"px";
}
}
var id=setInterval(catWalk, 50);
function catDanse(){
myImg.src="http://www.anniemation.com/clip_art/images/cat-walk.gif";
id=setInterval(catWalk, 50);
}

</script>

</body>
</html>


<!--1.Ajoutez une balise de script au bas de la page, où vous mettrez tout votre code. setInterval((function(){myImg.src="https://tenor.com/StFI.gif";}), 5000);
2.Créez une variable pour stocker une référence à l'img. else{ myImg.src="http://www.anniemation.com/clip_art/images/cat-walk.gif";}
3.Changez le style de l'img pour avoir une "gauche" de "0px", de sorte qu'il commence à gauche des écrans.
4.Créez une fonction appelée catWalk () qui déplace le chat de 10 pixels à droite de l'endroit où il a commencé,
en modifiant la propriété de style «gauche». https://media1.tenor.com/images/2de63e950fb254920054f9bd081e8157/tenor.gif?itemid=10561424
5.Appelez cette fonction toutes les 50 millisecondes. Votre chat devrait maintenant se déplacer sur l'écran de gauche à droite. Hourra!
6.Lorsque le chat atteint le côté droit de l'écran, redémarrez-le sur le côté gauche ("0px").
Ils devraient donc continuer à marcher de gauche à droite sur l'écran, pour toujours et à jamais.
7.Lorsque le chat atteint le milieu de l'écran,
remplacez l'img par une image d'un chat dansant (utilisez cette URL: https://tenor.com/StFI.gif ),
laissez-le danser pendant 5 secondes, puis remplacez l'img avec l'image originale et faites-la continuer la marche.!-->
;
4 changes: 4 additions & 0 deletions Week1/homework/js-exercices/hijackGoogleLogo.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
(function hijackGoogleLogo(){
var myLogo=document.querySelector("[alt=Google]");
myLogo.srcset="https://www.hackyourfuture.dk/static/logo-dark.svg";
})();
9 changes: 9 additions & 0 deletions Week1/homework/js-exercices/showCurrentTime.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
var myTime = setInterval(myFuncTimer, 1000);

function myFuncTimer() {
var d = new Date();
var t = d.toLocaleTimeString();
document.getElementById("time").innerHTML = t;
}


24 changes: 24 additions & 0 deletions Week1/homework/js-exercices/time.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
<!DOCTYPE html>
<html>
<body>

<p id="time"></p>


<script src="showCurrentTime.js">

</script>

</body>
</html>



<!--Pourquoi porter une montre quand vous pouvez vérifier l'heure, en direct sur votre page Web?

1.Créez un fichier HTML vide, appelé time.html
2.Créez un fichier JavaScript appelé showCurrentTime.jset incluez-le dans le fichier HTML
3.Dans le fichier JS, écrivez une fonction qui ajoute l'heure actuelle à la page Web.
Assurez-vous qu'il est écrit dans la notation HH: MM: SS (heure, minute, seconde).
Astuce: utilisez setInterval()pour vous assurer que l'heure reste à jour
4.Faire exécuter la fonction lors de son chargement dans le navigateur !-->
20 changes: 20 additions & 0 deletions Week2/homework/js-exercices/collectiveAge.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
const hackYourFutureMembers = [
{ name : 'Wouter' , age : 33 } ,
{ name : 'Federico' , age : 32 } ,
{ name : 'Noer' , age : 27 } ,
{ name : 'Tjebbe' , age : 22 } ,
] ;

const ages=hackYourFutureMembers.map(keepAge);
function keepAge(myArrayAges){
return myArrayAges.age;
}
console.log("the age by student is :"+ages);

const collectiveAge=hackYourFutureMembers.reduce((accu, ages) => accu+ages.age, 0);

function mainFunc(callFunc){
console.log("L'âge collectif de l'équipe HYF est : "+callFunc);
return callFunc;
}
mainFunc(collectiveAge);
19 changes: 19 additions & 0 deletions Week2/homework/js-exercices/favoritHobbies.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
<!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>Document</title>
</head>
<body>




<script src="favoritHobbies.js">

</script>

</body>
</html>
22 changes: 22 additions & 0 deletions Week2/homework/js-exercices/favoritHobbies.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
const myHobbies = [
'Méditation' ,
'Lecture' ,
'Programmation' ,
'Sortir avec des amis' ,
'Aller au gymnase' ,
] ;

var ulList = document.createElement("ul");

var eachELement=myHobbies.forEach(putList);

function putList(hobbie){
var liList = document.createElement("li");
var nodeli = document.createTextNode(hobbie);
liList.appendChild(nodeli);
ulList.appendChild(liList);
}
var myBody = document.querySelector("body");
myBody.appendChild(ulList);


4 changes: 4 additions & 0 deletions Week2/homework/js-exercices/lemonAllergy.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
const fruitBasket = ['Apple', 'Lemon', 'Grapefruit', 'Lemon', 'Banana', 'Watermelon', 'Lemon'];

const fruitWithoutLemon=fruitBasket.filter(fruit=> fruit!='Lemon');
console.log("My mom bought me a fruit basket, containing : " +fruitWithoutLemon+"!");
55 changes: 55 additions & 0 deletions Week2/homework/js-exercices/mondayWorth.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
const mondayTasks = [
{
name: 'Daily standup',
duration: 30, // specified in minutes
},
{
name: 'Feature discussion',
duration: 120,
},
{
name: 'Development time',
duration: 240,
},
{
name: 'Talk to different members from the product team',
duration: 60,
},
];

function addMinute(totMin, minut){
return totMin+=minut.duration;
}

var totalMinutes1=mondayTasks.reduce(addMinute, 0);

function time_convert(totalMinutes)
{
const hours = Math.floor(totalMinutes / 60);
const minutes = totalMinutes % 60;
return `${hours}H:${minutes}M`;
}

var totalMinutes2=time_convert(totalMinutes1);
console.log("My hourly rate on Monday is : " +totalMinutes2);

function timeEachTask(duree){
return duree.duration;
}

var timeTask=mondayTasks.map(timeEachTask);
console.log("\nThe duration for each task is : " +timeTask);

function multiplyDuration(duree){
let rate=11;
return ((duree*rate)/60);
}
var multEachDuration=timeTask.map(multiplyDuration);
console.log("\nThe bill per duration for each task is : " +multEachDuration);

function totalBill(total, rateBytask){
return total+rateBytask;
}
var totBill=multEachDuration.reduce(totalBill, 0);
totBill=totBill.toFixed(2);
console.log("\nThe total of he bill per duration for each task is : €" +totBill);
21 changes: 21 additions & 0 deletions Week2/homework/js-exercices/oddOnesOut.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
function doubleEvenNumbersMap(numbers){
return numbers.map(function(element){
if(element%2===0){
return element*2
}
})
}

const myNumbers = [1, 2, 3, 4];
console.log(doubleEvenNumbersMap(myNumbers));

function doubleEvenNumbersFilter(numbers){
return numbers.filter(function(element){
if(element%2===0){
return element*2
}
});

}

console.log(doubleEvenNumbersFilter(myNumbers));
14 changes: 14 additions & 0 deletions Week3/homework/js-exercices/addSix.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
'use strict';
function createBase(numb) {
var compt=9;
return function () {compt += numb; numb=numb+3; return compt; }
}

const addSix = createBase(6);

// Put here your function calls...

console.log(addSix());
console.log(addSix());
console.log(addSix());

Loading