js_1_hour/index.html at master · teemurishe/js_1_hour · GitHub

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
26
27
28
29
<!DOCTYPE html> <!basic html structure/>
<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>Learning JavaScript</title>
    <script src="javascript.js"></script> <!adding the js file to html/>
  </head>
<body>
  <h1>Let's color a text!</h1>
    <p id='color_text'>Select text color</p> <!this is a tag in html to show some text on the page/>
    <button class='buttonColor' onclick="changeColor('blue');" onmouseover="buttonMouse('dark_grey')">Blue</button> <!button is another html tag to create a button with js action/>
    <button class='buttonColor' onclick="changeColor('red');" onmouseover="buttonMouse('dark_grey')">Red</button> <!all the buttons have class button. it's needed/>
    <button class='buttonColor' onclick="changeColor('green');" onmouseover="buttonMouse('dark_grey')">Green</button> <!to mention them in js file in one command/>
    <button class='buttonColor' onclick="changeColor('purple');" onmouseover="buttonMouse('dark_grey')">Purple</button>
    <button class='buttonColor' onclick="changeColor('yellow');" onmouseover="buttonMouse('dark_grey')">Yellow</button>
    <button class='buttonColor' onclick="changeColor('orange');" onmouseover="buttonMouse('dark_grey')">Orange</button>
    <br>
    <br>
    <br>
    <h1>Tell us about you! (Not sent anywhere)</h1>
    <form name="userData" action="" onsubmit="return validateForm()" method="post">
      Name: <input type="text" name="username">
      Phone number: <input type="text" name="userphone">
      <input type="submit" value="Submit">
    </form>
</body>
</html>