├── README.md ├── index.html ├── script.js └── style.css /README.md: -------------------------------------------------------------------------------- 1 | ## Deploying a Static Site with Netlify 2 | Hello! This GitHub repo is intended to be used with the article [Deploying a Static Site with Netlify](https://www.codecademy.com/articles/deploying-a-static-site-with-netlify). 3 | 4 | Make sure to follow the steps as outlined in the article to see how to use Netlify for your deployment needs! 5 | 6 | You're free to make changes on your own branch, but for the sake of consistency, we will not be merging any external pull requests. Thank you and happy coding! 7 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | Your Website 11 | 12 | 13 | 14 |

15 |

Welcome to your website!

16 | 17 |

18 | 19 | 20 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | const clapButton = document.getElementById('clap-button'); 2 | 3 | clapButton.addEventListener('click', switchBackground); 4 | 5 | function randomColor() { 6 | const red = Math.floor(Math.random() * 256); 7 | const green = Math.floor(Math.random() * 256); 8 | const blue = Math.floor(Math.random() * 256); 9 | 10 | const color = `rgb(${red}, ${green}, ${blue})` 11 | return color; 12 | } 13 | 14 | function switchBackground() { 15 | const backgroundColor = randomColor(); 16 | document.body.style.backgroundColor = backgroundColor; 17 | } -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | body { 2 | padding: 0; 3 | margin: 0; 4 | width: 100vw; 5 | height: 100vh; 6 | font-family: "Syne Mono", monospace; 7 | background-color: #7236ff; 8 | display: flex; 9 | align-items: center; 10 | justify-content: center; 11 | } 12 | 13 | .container { 14 | width: 750px; 15 | max-width: 75%; 16 | text-align: center; 17 | background-color: #ffffff; 18 | border-radius: 5px; 19 | box-shadow: 0 0 5px 1px; 20 | padding: 20px; 21 | } 22 | 23 | .button { 24 | background-color: #4400ff; 25 | color: #ffffff; 26 | border-radius: 4px; 27 | padding: 10px 40px; 28 | margin: 15px 0px; 29 | font-size: 1.75rem; 30 | border: 5px solid #4400ff; 31 | } 32 | 33 | .button:hover { 34 | border: 5px solid black; 35 | cursor: pointer; 36 | } 37 | 38 | .button:active { 39 | border: 5px solid #ffd300; 40 | } --------------------------------------------------------------------------------