├── body_color_change
├── README.md
├── css
│ └── style.css
├── index.html
└── js
│ └── script.js
├── create_table
├── index.html
└── script.js
├── print_message_app
├── README.md
├── css
│ └── style.css
├── index.html
└── js
│ └── script.js
├── random_body_bg
├── README.md
├── css
│ └── style.css
├── index.html
└── js
│ └── script.js
├── simple_clock
├── index.html
└── js
│ └── script.js
├── slideshow_js
├── README.md
├── images
│ ├── 1.jpg
│ ├── 2.png
│ ├── 3.jpg
│ └── 4.jpg
├── index.html
└── js
│ └── main.js
└── toggle_password
├── README.md
├── css
└── style.css
├── index.html
└── js
└── script.js
/body_color_change/README.md:
--------------------------------------------------------------------------------
1 | # Div Color Change
2 |
3 | ## Todo:
4 |
5 | # HTML:
6 |
7 | - Create Button Element
8 |
9 | - Create Div Tag
10 |
11 | # Css
12 |
13 | - make some styles for every Element
14 |
15 | # Js
16 |
17 | - get all element into js
18 |
19 | - click into button
20 |
21 | - creaty array to contain colors
22 |
23 | - create variable with index 0
24 |
25 | - increment this variable
26 |
27 | - if index is 3 .. reset to 0
28 |
--------------------------------------------------------------------------------
/body_color_change/css/style.css:
--------------------------------------------------------------------------------
1 | * {
2 | margin: 0;
3 | padding: 0;
4 | box-sizing: border-box;
5 | }
6 |
7 | button {
8 | padding: 15px;
9 | background-color: #f6f6f6;
10 | cursor: pointer;
11 | font-size: 20px;
12 | font-family: "Montserrat";
13 | border: 1px solid gray;
14 | margin-bottom: 10px;
15 | }
16 |
17 | div {
18 | width: 200px;
19 | height: 200px;
20 | border: 1px solid #000;
21 | }
22 |
--------------------------------------------------------------------------------
/body_color_change/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | Js Div Color Change App
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
--------------------------------------------------------------------------------
/body_color_change/js/script.js:
--------------------------------------------------------------------------------
1 | var buttonEl = document.querySelector(".btn");
2 | var divEl = document.querySelector(".mydiv");
3 |
4 | var colors = ["red", "green", "blue"];
5 | var i = 0;
6 |
7 | buttonEl.onclick = function() {
8 | // logic
9 |
10 | divEl.style.backgroundColor = colors[i]; // green
11 | i++; // 3
12 |
13 | if(i == 3) {
14 | i = 0
15 | }
16 | }
17 |
18 | // i = 0
19 |
20 | // i = 1
21 |
--------------------------------------------------------------------------------
/create_table/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | Create Table
9 |
10 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
--------------------------------------------------------------------------------
/create_table/script.js:
--------------------------------------------------------------------------------
1 | let rowsInput = document.getElementById('rows')
2 | let colsInput = document.getElementById('cols')
3 | let btn = document.querySelector('button')
4 |
5 | btn.addEventListener('click', createTable)
6 |
7 | function createTable() {
8 | let body = document.body;
9 | let table = document.createElement("table");
10 |
11 | for(var i = 0 ; i < +rowsInput.value; i++) {
12 | let tr = document.createElement("tr") // |
13 | table.appendChild(tr);
14 | for(var j = 0 ; j < +colsInput.value; j++) {
15 | let td = document.createElement("td") // |
16 | let txt = document.createTextNode("item txt"); // "item text"
17 | td.appendChild(txt)
18 | // td.innerHTML = "item txt";
19 | tr.appendChild(td);
20 | }
21 | }
22 |
23 | body.appendChild(table);
24 | }
25 |
--------------------------------------------------------------------------------
/print_message_app/README.md:
--------------------------------------------------------------------------------
1 | # Print Simple Message App
2 |
3 | ## Todo:
4 |
5 | # HTML:
6 |
7 | - Create Input Tag
8 |
9 | - Create Button Tag
10 |
11 | - Create P Tag For Printing Msg
12 |
13 | # Css
14 |
15 | - make some styles for every Element
16 |
17 | # Js
18 |
19 | - get All Elements in html
20 |
21 | - add click event to button
22 |
23 | - get value from input
24 |
25 | - put value into p
26 |
--------------------------------------------------------------------------------
/print_message_app/css/style.css:
--------------------------------------------------------------------------------
1 | * {
2 | margin: 0;
3 | padding: 0;
4 | box-sizing: border-box;
5 | }
6 |
7 | body {
8 | background-color: brown;
9 | height: 100vh;
10 | display: flex;
11 | justify-content: center;
12 | align-items: center;
13 | font-family: "Montserrat", sans-serif;
14 | }
15 |
16 | .print-message-box {
17 | width: 600px;
18 | padding: 20px 15px;
19 | border: 1px solid #6f6f6f;
20 | background-color: #f6f6f6;
21 | }
22 |
23 | input,
24 | button {
25 | width: 100%;
26 | height: 40px;
27 | padding: 5px;
28 | margin-bottom: 5px;
29 | font-family: "Montserrat", sans-serif;
30 | }
31 |
32 | button {
33 | background-color: brown;
34 | color: #fff;
35 | font-size: 20px;
36 | cursor: pointer;
37 | opacity: 0.7;
38 | transition: 0.5s;
39 | border: 0;
40 | }
41 |
42 | button:hover {
43 | opacity: 1;
44 | }
45 |
46 | p {
47 | color: green;
48 | font-size: 20px;
49 | margin: 5px 0 0 0;
50 | }
51 |
--------------------------------------------------------------------------------
/print_message_app/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | Js Print Message App
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
![]()
19 |
20 |
21 |
22 |
23 |
--------------------------------------------------------------------------------
/slideshow_js/js/main.js:
--------------------------------------------------------------------------------
1 | let myImage = document.getElementById("slideshow");
2 | let images = ["images/1.jpg", "images/2.png", "images/3.jpg", "images/4.jpg"];
3 | let i = 0;
4 |
5 | function slideshow() {
6 | myImage.setAttribute('src', images[i]); // images[2]
7 |
8 | if(i == images.length - 1) {
9 | i = 0;
10 | } else {
11 | i++; // i = 2
12 | }
13 |
14 | setTimeout(function() {
15 | slideshow();
16 | }, 2000)
17 | }
18 |
19 | slideshow();
--------------------------------------------------------------------------------
/toggle_password/README.md:
--------------------------------------------------------------------------------
1 | # Toggle Password
2 |
3 | ## Todo:
4 |
5 | # HTML:
6 |
7 | - Create Button Element
8 |
9 | - Create Input Tag
10 |
11 | # Js
12 |
13 | - get All Elements
14 |
15 | - click on show button
16 |
17 | - convert input password to text
18 | - convert show text to hide
19 |
20 | - click on hide button
21 | - convert input text to password
22 | - convert hide text to show
23 |
--------------------------------------------------------------------------------
/toggle_password/css/style.css:
--------------------------------------------------------------------------------
1 | * {
2 | margin: 0;
3 | padding: 0;
4 | box-sizing: border-box;
5 | }
6 |
7 | button {
8 | padding: 15px;
9 | background-color: #f6f6f6;
10 | cursor: pointer;
11 | font-size: 20px;
12 | font-family: "Montserrat";
13 | border: 1px solid gray;
14 | margin-bottom: 10px;
15 | }
16 |
17 | div {
18 | width: 200px;
19 | height: 200px;
20 | border: 1px solid #000;
21 | }
22 |
--------------------------------------------------------------------------------
/toggle_password/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | Toggle Password
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/toggle_password/js/script.js:
--------------------------------------------------------------------------------
1 | // Setup vars
2 | var myInput = document.querySelector("#myInput");
3 | var myButton = document.querySelector("#btn");
4 |
5 | // Events
6 | myButton.addEventListener('click', togglePassword);
7 |
8 | // Function
9 | function togglePassword() {
10 | if(myButton.getAttribute('data-text') == "show") {
11 | myInput.setAttribute('type', 'text');
12 | myButton.setAttribute('data-text', 'hide');
13 | myButton.innerHTML = "Hide";
14 | } else {
15 | myInput.setAttribute('type', 'password');
16 | myButton.setAttribute('data-text', 'show');
17 | myButton.innerHTML = "Show";
18 | }
19 | }
20 |
21 | // Button = show => password => text Show => Hide => hide
22 | // Button = hide => text => password Hide => Show => show
--------------------------------------------------------------------------------