Home Verkennen Help
Inloggen
olga_pushkar
/
javascript
Volgen 1
Ster 0
Vork 0
Bestanden Issues 0 Pull-aanvragen 0 Wiki
Bladeren bron

add7.1

Olga1108 4 jaren geleden
bovenliggende
98e109e53f
commit
e5deb85e06
2 gewijzigde bestanden met toevoegingen van 47 en 0 verwijderingen
Zij-aan-zij weergave Toon Diff Stats
  1. 16 0
      js7.1/index.html
  2. 31 0
      js7.1/index.js

+ 16 - 0
js7.1/index.html
Bestand weergeven 

@@ -0,0 +1,16 @@
 
+!DOCTYPE html>
 
+<html lang='en'>
 
+    <head>
 
+        <meta charset='UTF-8' />
 
+        <meta name='viewport' content='width=device-width, initial-scale=1.0' />
 
+        <title>Home Work 7.1 JS</title>
 
+    </head>
 
+    <body>
 
+        <h1>Home Work 7.1</h1>
 
+        <ul>
 
+            <li>dog</li>
 
+            <li>cat</li>
 
+        </ul>
 
+        <script src='index.js'></script>    
+    </body>
 
+</html>

+ 31 - 0
js7.1/index.js
Bestand weergeven 

@@ -0,0 +1,31 @@
 
+let picture = 'https://lh3.googleusercontent.com/proxy/1dtMIJmaPfoqtMW2W7m_KVaTmE-_nC9-wFdgF26ZBLSBA0vhRYsNfIzJt9AGRC4l_nCuT3995s6A1A_I0J_SjlSsh0TMqfpkKULrAHjC-0leO_2qozYtf2ubPrsTAsunOgAHYprx278PbuNlSLHZyOLD'
 
+let p = document.body.appendChild (document.createElement('p'));
 
+p.style = `
 
+    width: 220px;
 
+    color: purple;
 
+    font-size: 22px;
 
+    cursor: pointer;`
 
+    p.innerText = `There will be a cat. Click ME!`
 
+p.onclick = function(event) {
 
+    let img = event.target.appendChild (
 
+        document.createElement ('img')
 
+    )
 
+    img.src = picture;
 
+    img.id = 'photo';
 
+    img.width = 100;
 
+    img.style.margin = 50;
 
+img.onmouseover = function(event) {
 
+    let imgBig = document.getElementById('photo');
 
+    imgBig.width = 200;
 
+    imgBig.style.transitionDuration = '.8s'
 
+}
 
+img.onmouseout = function(event) {
 
+    let imgBig = document.getElementById('photo');
 
+    imgBig.width = 100;
 
+    imgBig.style.transitionDuration = '.8s';
 
+}
 
+img.addEventListener( 'click', function(event) {
 
+    let imgBig = document.getElementById('photo');
 
+    imgBig.remove();
 
+   })
 
+}