Wednesday, January 24, 2018

Iseng Javascript haha... :D

Berikut previewnya :



Berikut kodenya :
index.html :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<!doctype html>
<html lang="en">
<head>
  <title> Iseng Javascript </title>
</head>
<body>
  <h1> This is without using webpack </h1>
  <button id="poipo-button"> Show Paragraph </button>
  <p id="poipo-paragraph"> Hellow there... Please click the button... :) </p>
  
  <script src="js/poipo-dom-loader.js"></script>
  <script src="js/app.js"></script>
</body>
</html>

poipo-dom-loader.js :

1
2
var myButton = document.querySelector('#poipo-button');
var myParagraph = document.querySelector('#poipo-paragraph');

app.js :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
var showParagraph = false;

myButton.addEventListener('click', toggleState);

function toggleState() {
  showParagraph = !showParagraph;
  updateParagraph();
  updateButton();
}

function updateParagraph() {
  if(showParagraph) {
    myButton.textContent = 'Hide Paragraph';
  } else {
    myButton.textContent = 'Show Paragraph';
  }
}

function updateButton() {
  if(showParagraph) {
    myParagraph.textContent = 'Hay hay hay hay... Thanks for clicking the button...:D';
  } else {
    myParagraph.textContent = 'Please click the button';
  }
}

Github :
https://github.com/HyosokaPoipo/isengjavascript


Lnjut ke Part II...

Diposkan oleh di
Label:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)