Spaces:
Running
Running
| <html> | |
| <head> | |
| <title>Decision Making Tool</title> | |
| <style> | |
| #slider { | |
| width: 300px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>Decision Making Tool</h1> | |
| <p>Enter your options and assign a weight to each option using the slider.</p> | |
| <form> | |
| <div> | |
| <label for="option1">Option 1:</label> | |
| <input type="text" id="option1"> | |
| <input type="range" id="slider1" min="1" max="10" step="1" value="5"> | |
| </div> | |
| <div> | |
| <label for="option2">Option 2:</label> | |
| <input type="text" id="option2"> | |
| <input type="range" id="slider2" min="1" max="10" step="1" value="5"> | |
| </div> | |
| <div> | |
| <label for="option3">Option 3:</label> | |
| <input type="text" id="option3"> | |
| <input type="range" id="slider3" min="1" max="10" step="1" value="5"> | |
| </div> | |
| </form> | |
| <button onclick="calculate()">Calculate</button> | |
| <p id="result"></p> | |
| <script> | |
| function calculate() { | |
| var option1 = document.getElementById("option1").value; | |
| var option2 = document.getElementById("option2").value; | |
| var option3 = document.getElementById("option3").value; | |
| var weight1 = parseInt(document.getElementById("slider1").value); | |
| var weight2 = parseInt(document.getElementById("slider2").value); | |
| var weight3 = parseInt(document.getElementById("slider3").value); | |
| var total = weight1 + weight2 + weight3; | |
| var option1Score = weight1 / total; | |
| var option2Score = weight2 / total; | |
| var option3Score = weight3 / total; | |
| var result = ""; | |
| if (option1Score > option2Score && option1Score > option3Score) { | |
| result = option1; | |
| } else if (option2Score > option1Score && option2Score > option3Score) { | |
| result = option2; | |
| } else if (option3Score > option1Score && option3Score > option2Score) { | |
| result = option3; | |
| } else { | |
| result = "No clear winner!"; | |
| } | |
| document.getElementById("result").innerHTML = "The best option is " + result + "."; | |
| } | |
| </script> | |
| <html> | |
| <head> | |
| <title>Rainbow Theme</title> | |
| <style> | |
| body { | |
| background: linear-gradient(to bottom, #FF0000, #FF7F00, #FFFF00, #00FF00, #0000FF, #2E2B5F, #8B00FF); | |
| } | |
| h1 { | |
| color: #FFFFFF; | |
| text-align: center; | |
| text-shadow: 2px 2px #000000; | |
| font-size: 48px; | |
| font-family: Arial, sans-serif; | |
| margin-top: 100px; | |
| } | |
| p { | |
| color: #FFFFFF; | |
| text-align: center; | |
| font-size: 24px; | |
| font-family: Arial, sans-serif; | |
| margin-top: 50px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>Welcome to my Rainbow Theme!</h1> | |
| <p>This is an example of how to create a rainbow-colored theme in HTML using a linear gradient background.</p> | |
| </body> | |
| </html> | |
| </body> | |
| </html> | |