├── .gitignore ├── README.md └── Vanilla JS ├── Color Changing App ├── app.js ├── index.html └── style.css └── Day Of The Week App ├── app.js ├── index.html └── style.css /.gitignore: -------------------------------------------------------------------------------- 1 | *~ 2 | 3 | # temporary files which can be created if a process still has a handle open of a deleted file 4 | .fuse_hidden* 5 | 6 | # KDE directory preferences 7 | .directory 8 | 9 | # Linux trash folder which might appear on any partition or disk 10 | .Trash-* 11 | 12 | # .nfs files are created when an open file is removed but is still being accessed 13 | .nfs* 14 | 15 | .vscode/* 16 | !.vscode/settings.json 17 | !.vscode/tasks.json 18 | !.vscode/launch.json 19 | !.vscode/extensions.json 20 | !.vscode/*.code-snippets 21 | 22 | # Local History for Visual Studio Code 23 | .history/ 24 | 25 | # Built Visual Studio Code Extensions 26 | *.vsix 27 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Javascript-Mini-Projects 2 | Javascript Projects 3 | -------------------------------------------------------------------------------- /Vanilla JS/Color Changing App/app.js: -------------------------------------------------------------------------------- 1 | // let colors = ["red", "blue", "green", "orange", "purple", "black", "yellow"]; 2 | // let button = document.getElementsByClassName("btn"); 3 | 4 | // button.addEventListener("click", function () { 5 | // let index = parseInt(Math.random() * colors.length + 1); 6 | // let box = document.getElementsByClassName("box"); 7 | // box.style.background = `${colors[index]}`; 8 | // }); 9 | let colors = ["red", "blue", "green", "orange", "purple", "black", "yellow"]; 10 | let buttons = document.getElementsByClassName("btn"); 11 | 12 | for (let i = 0; i < buttons.length; i++) { 13 | buttons[i].addEventListener("click", function () { 14 | let index = parseInt(Math.random() * colors.length); 15 | let boxes = document.getElementsByClassName("box"); 16 | for (let j = 0; j < boxes.length; j++) { 17 | boxes[j].style.background = colors[index]; 18 | } 19 | }); 20 | } 21 | -------------------------------------------------------------------------------- /Vanilla JS/Color Changing App/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Color Changing App 7 | 8 | 9 | 10 | 11 |

12 |

13 |

14 | My background color will change when my button below is clicked. 15 |

16 |

17 | 18 |

19 |

20 | 21 | 22 | -------------------------------------------------------------------------------- /Vanilla JS/Color Changing App/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | html { 8 | background-color: antiquewhite; 9 | } 10 | html #app { 11 | padding: 100px 0; 12 | } 13 | html #app .container { 14 | text-align: center; 15 | width: 720px; 16 | margin: auto; 17 | } 18 | html #app .container h1 { 19 | color: chocolate; 20 | } 21 | html #app .container .box { 22 | width: 100%; 23 | height: 500px; 24 | margin: 40px 0; 25 | background-color: chartreuse; 26 | } 27 | html #app .container .btn { 28 | border: 1px solid dark; 29 | padding: 10px; 30 | font-weight: bold; 31 | }/*# sourceMappingURL=style.css.map */ -------------------------------------------------------------------------------- /Vanilla JS/Day Of The Week App/app.js: -------------------------------------------------------------------------------- 1 | let date = new Date(); 2 | let dayOfWeekNumber = date.getDay(); 3 | let nameOfDay; 4 | 5 | switch (dayOfWeekNumber) { 6 | case 0: 7 | nameOfDay = "Sunday"; 8 | break; 9 | case 1: 10 | nameOfDay = "Monday"; 11 | break; 12 | case 2: 13 | nameOfDay = "Tuesday"; 14 | break; 15 | case 3: 16 | nameOfDay = "Wednesday"; 17 | break; 18 | case 4: 19 | nameOfDay = "Thursday"; 20 | break; 21 | case 5: 22 | nameOfDay = "Friday"; 23 | break; 24 | case 6: 25 | nameOfDay = "Saturday"; 26 | break; 27 | } 28 | let weekDay = document.getElementById("weekday"); 29 | weekDay.innerHTML = `${nameOfDay}`; 30 | -------------------------------------------------------------------------------- /Vanilla JS/Day Of The Week App/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Day Of The Week App 7 | 8 | 9 | 10 | 11 |

12 |

13 |

14 |

Today is:

15 |

Display day of the week.

16 |

17 |

18 |

19 | 20 | 21 | -------------------------------------------------------------------------------- /Vanilla JS/Day Of The Week App/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | background-color: antiquewhite; 9 | } 10 | 11 | #app .container { 12 | width: 750px; 13 | margin: 100px auto; 14 | } 15 | #app .container .content { 16 | text-align: center; 17 | } 18 | #app .container .content h1 { 19 | font-size: 50px; 20 | color: #1dcc97; 21 | } 22 | #app .container .content h2 { 23 | font-size: 37px; 24 | color: rgb(34, 28, 197); 25 | } 26 | 27 | /*# sourceMappingURL=style.css.map */ --------------------------------------------------------------------------------