Created
August 3, 2021 14:21
-
-
Save dnlsyfq/3ef3d50e8fc58965064ccb93598cf046 to your computer and use it in GitHub Desktop.
JavaScript Loops – Challenge // source https://jsbin.com/witojor
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>JavaScript Loops – Challenge</title> | |
| <link href="style.css" rel="stylesheet"> | |
| <style id="jsbin-css"> | |
| body { | |
| color: #fff; | |
| font-family: "Gotham Rounded A", "Gotham Rounded B", "Gotham Rounded", "Helvetica Neue", Helvetica, Arial, sans-serif; | |
| box-sizing: border-box; | |
| } | |
| main { | |
| width: 90%; | |
| max-width: 1080px; | |
| padding: 40px 0 0; | |
| margin: 0 auto; | |
| } | |
| main div { | |
| width: 55px; | |
| height: 55px; | |
| display: inline-block; | |
| text-align: center; | |
| border-radius: 50%; | |
| line-height: 55px; | |
| margin: 5px; | |
| text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.25); | |
| } | |
| h1 { | |
| font-size: 3.75em; | |
| } | |
| h2 { | |
| font-size: 2.5em; | |
| font-weight: normal; | |
| } | |
| p { | |
| font-size: 1.1em; | |
| line-height: 1.5; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <main></main> | |
| <script src="script.js"></script> | |
| <script id="jsbin-javascript"> | |
| "use strict"; | |
| var num = 10; | |
| var html = ''; | |
| var randomRGB = undefined; | |
| function color() { | |
| return Math.floor(Math.random() * 256); | |
| } | |
| for (var i = 1; i <= +num; i++) { | |
| randomRGB = "rgb(" + color() + "," + color() + "," + color() + ")"; | |
| html += "<div style=\"background-color: " + randomRGB + "\">" + i + "</div>"; | |
| } | |
| document.querySelector("main").innerHTML = html; | |
| </script> | |
| <script id="jsbin-source-css" type="text/css"> | |
| body { | |
| color: #fff; | |
| font-family: "Gotham Rounded A", "Gotham Rounded B", "Gotham Rounded", "Helvetica Neue", Helvetica, Arial, sans-serif; | |
| box-sizing: border-box; | |
| } | |
| main { | |
| width: 90%; | |
| max-width: 1080px; | |
| padding: 40px 0 0; | |
| margin: 0 auto; | |
| } | |
| main div { | |
| width: 55px; | |
| height: 55px; | |
| display: inline-block; | |
| text-align: center; | |
| border-radius: 50%; | |
| line-height: 55px; | |
| margin: 5px; | |
| text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.25); | |
| } | |
| h1 { | |
| font-size: 3.75em; | |
| } | |
| h2 { | |
| font-size: 2.5em; | |
| font-weight: normal; | |
| } | |
| p { | |
| font-size: 1.1em; | |
| line-height: 1.5; | |
| } | |
| </script> | |
| <script id="jsbin-source-javascript" type="text/javascript">let num = 10; | |
| let html = ''; | |
| let randomRGB; | |
| function color(){ | |
| return Math.floor(Math.random() * 256); | |
| } | |
| for(let i = 1 ; i <= +num; i++ ){ | |
| randomRGB = `rgb(${color()},${color()},${color()})`; | |
| html += `<div style="background-color: ${randomRGB}">${i}</div>`; | |
| } | |
| document.querySelector("main").innerHTML = html;</script></body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body { | |
| color: #fff; | |
| font-family: "Gotham Rounded A", "Gotham Rounded B", "Gotham Rounded", "Helvetica Neue", Helvetica, Arial, sans-serif; | |
| box-sizing: border-box; | |
| } | |
| main { | |
| width: 90%; | |
| max-width: 1080px; | |
| padding: 40px 0 0; | |
| margin: 0 auto; | |
| } | |
| main div { | |
| width: 55px; | |
| height: 55px; | |
| display: inline-block; | |
| text-align: center; | |
| border-radius: 50%; | |
| line-height: 55px; | |
| margin: 5px; | |
| text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.25); | |
| } | |
| h1 { | |
| font-size: 3.75em; | |
| } | |
| h2 { | |
| font-size: 2.5em; | |
| font-weight: normal; | |
| } | |
| p { | |
| font-size: 1.1em; | |
| line-height: 1.5; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| "use strict"; | |
| var num = 10; | |
| var html = ''; | |
| var randomRGB = undefined; | |
| function color() { | |
| return Math.floor(Math.random() * 256); | |
| } | |
| for (var i = 1; i <= +num; i++) { | |
| randomRGB = "rgb(" + color() + "," + color() + "," + color() + ")"; | |
| html += "<div style=\"background-color: " + randomRGB + "\">" + i + "</div>"; | |
| } | |
| document.querySelector("main").innerHTML = html; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment