aled

Author: pierreSALMI

lesson2/bouton/index.html

@@ -10,6 +10,12 @@
     <button id="js-btn"> Click me§</button>
 
     <button style="background-color: gray;" id="js-gray-btn">Gray button</button>
+    <button id="js-hovered-btn">Hover btn</button>
+
+    <form id="js-form">
+        <input type="text" id="js-input" placeholder="Enter some text">
+            <button type="submit">Submit</button>
+    </form>
     <script src='script.js'></script>
 </body>
 </html>

lesson2/bouton/script.js

@@ -0,0 +1,41 @@
+'use strict';
+
+const myBtn = document.querySelector('#js-btn');
+myBtn.addEventListener('click', (event) => {
+    console.log('Clicked',event)
+});
+
+let isClickedTwice = false;
+const myGrayBtn = document.querySelector('#js-gray-btn');
+myGrayBtn.addEventListener('click', () => {
+    isClickedTwice = !isClickedTwice;
+    if(isClickedTwice){
+        myGrayBtn.style.backgroundColor = 'green';
+    }else {
+        myGrayBtn.style.backgroundColor = 'red';
+    }
+});
+
+const hoveredBtn = document.querySelector('#js-hovered-btn');
+hoveredBtn.addEventListener('mouseenter', () => {
+    hoveredBtn.style.backgroundColor = 'red';
+});
+hoveredBtn.addEventListener('mouseleave', () => {
+    hoveredBtn.style.backgroundColor = 'initial';
+});
+
+window.addEventListener('contextmenu', (event) => {
+    console.log('Get right CLICKED')
+});
+
+const myForm = document.querySelector('#js-form');
+const myInput = document.querySelector('#js-input')
+myInput.addEventListener('keyup', (e)=> {
+    console.log('e',e);
+    console.log('input value:', myInput.value);
+})
+
+myForm.addEventListener('submit', (event) => {
+    event.preventDefault();
+    alert(`your input is ${myInput.value}`)
+})