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

Skip to content

Commit d419906

Browse files
done homework JS2 W1
1 parent ea654b7 commit d419906

File tree

7 files changed

+143
-0
lines changed

7 files changed

+143
-0
lines changed
Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>About Me</title>
6+
7+
<style>
8+
.list-item { color: red}
9+
</style>
10+
11+
</head>
12+
<body>
13+
<h1>About Me</h1>
14+
15+
<ul>
16+
<li>Nickname: <span id="nickname"></span></li>
17+
<li>Favorite food: <span id="fav-food"></span></li>
18+
<li>Hometown: <span id="hometown"></span></li>
19+
</ul>
20+
<script src="about_me.js">
21+
22+
</script>
23+
</body>
24+
</html>
Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
var myBody = document.body;
2+
myBody.style.fontFamily="Arial, sans-serif";
3+
4+
var mySpan1 = document.getElementById("nickname");
5+
var mySpan2 = document.getElementById("fav-food");
6+
var mySpan3 = document.getElementById("hometown");
7+
mySpan1.innerHTML="Bouba";
8+
mySpan2.innerHTML="Rice";
9+
mySpan3.innerHTML="Conakry";
10+
11+
var myLi= document.getElementsByTagName("li");
12+
for(let i=0; i<myLi.length; i++){
13+
myLi[i].className="list-item";
14+
}
15+
16+
var myImg = document.createElement("img");
17+
myImg.src="bouba.jpg";
18+
myImg.style.height="200px";
19+
myImg.style.width="250px";
20+
myBody.appendChild(myImg);
21+
22+
23+
24+
25+

Week1/homework/js-exercices/bouba.jpg

120 KB
Loading
Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Cat Walk</title>
6+
</head>
7+
<body>
8+
<img style="position:absolute;" src="http://www.anniemation.com/clip_art/images/cat-walk.gif" />
9+
10+
<script>
11+
var myImg= document.querySelector("img");
12+
var imgWidth=myImg.width;
13+
var imgStyle=myImg.style.left=0;
14+
15+
function catWalk(){
16+
17+
if(imgStyle<(innerWidth-myImg.width)){
18+
19+
if(Math.round(((innerWidth/2)-(myImg.width/2))/10)==Math.round(imgStyle/10)){
20+
21+
clearInterval(id);
22+
myImg.src="https://media1.tenor.com/images/2de63e950fb254920054f9bd081e8157/tenor.gif";
23+
setTimeout(catDanse, 5000);
24+
25+
}
26+
imgStyle+=10;
27+
myImg.style.left=imgStyle+"px";
28+
}else{
29+
imgStyle=myImg.style.left=0;
30+
imgStyle+=10;
31+
myImg.style.left=imgStyle+"px";
32+
}
33+
}
34+
var id=setInterval(catWalk, 50);
35+
function catDanse(){
36+
myImg.src="http://www.anniemation.com/clip_art/images/cat-walk.gif";
37+
id=setInterval(catWalk, 50);
38+
}
39+
40+
</script>
41+
42+
</body>
43+
</html>
44+
45+
46+
<!--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);
47+
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";}
48+
3.Changez le style de l'img pour avoir une "gauche" de "0px", de sorte qu'il commence à gauche des écrans.
49+
4.Créez une fonction appelée catWalk () qui déplace le chat de 10 pixels à droite de l'endroit où il a commencé,
50+
en modifiant la propriété de style «gauche». https://media1.tenor.com/images/2de63e950fb254920054f9bd081e8157/tenor.gif?itemid=10561424
51+
5.Appelez cette fonction toutes les 50 millisecondes. Votre chat devrait maintenant se déplacer sur l'écran de gauche à droite. Hourra!
52+
6.Lorsque le chat atteint le côté droit de l'écran, redémarrez-le sur le côté gauche ("0px").
53+
Ils devraient donc continuer à marcher de gauche à droite sur l'écran, pour toujours et à jamais.
54+
7.Lorsque le chat atteint le milieu de l'écran,
55+
remplacez l'img par une image d'un chat dansant (utilisez cette URL: https://tenor.com/StFI.gif ),
56+
laissez-le danser pendant 5 secondes, puis remplacez l'img avec l'image originale et faites-la continuer la marche.!-->
57+
;
Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
(function hijackGoogleLogo(){
2+
var myLogo=document.querySelector("[alt=Google]");
3+
myLogo.srcset="https://www.hackyourfuture.dk/static/logo-dark.svg";
4+
})();
Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
var myTime = setInterval(myFuncTimer, 1000);
2+
3+
function myFuncTimer() {
4+
var d = new Date();
5+
var t = d.toLocaleTimeString();
6+
document.getElementById("time").innerHTML = t;
7+
}
8+
9+

Week1/homework/js-exercices/time.html

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<body>
4+
5+
<p id="time"></p>
6+
7+
8+
<script src="showCurrentTime.js">
9+
10+
</script>
11+
12+
</body>
13+
</html>
14+
15+
16+
17+
<!--Pourquoi porter une montre quand vous pouvez vérifier l'heure, en direct sur votre page Web?
18+
19+
1.Créez un fichier HTML vide, appelé time.html
20+
2.Créez un fichier JavaScript appelé showCurrentTime.jset incluez-le dans le fichier HTML
21+
3.Dans le fichier JS, écrivez une fonction qui ajoute l'heure actuelle à la page Web.
22+
Assurez-vous qu'il est écrit dans la notation HH: MM: SS (heure, minute, seconde).
23+
Astuce: utilisez setInterval()pour vous assurer que l'heure reste à jour
24+
4.Faire exécuter la fonction lors de son chargement dans le navigateur !-->

0 commit comments

Comments
 (0)