لوحة المتصدرين
المحتوى الأكثر حصولًا على سمعة جيدة
المحتوى الأعلى تقييمًا في 04/25/20 in أجوبة
-
تفضل الكود: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Colors psychologie</title> <style> .form{ margin: auto; width: max-content; padding: 20px 30px; border: 1px solid black; border-radius: 20px; margin-top: 50px; display: grid; grid-gap: 20px; grid-template-columns: 1fr 1fr; } .form button{ grid-column: span 2; cursor: pointer; } .result{ display: none; font-size: 22px; } .result h1{ text-align: center; } </style> </head> <body> <div class="form"> <label>What is your name?</label> <input type="text"> <label>Pick a color</label> <select> <option value="red">Red</option> <option value="blue">Blue</option> <option value="green">Green</option> <option value="gray">Gray</option> </select> <button>Go</button> </div> <div class="result"> <h1>Your Psychological Color Profile</h1> <h3>Greetings, <span id="name"></span></h3> <p>Here's what your color choice reveals about your personality:</p> <p>people who like <b id="color"></b> are <span id="personality"></span></p> <button>Go Back</button> </div> <script src="https://code.jquery.com/jquery-3.5.0.min.js" integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ=" crossorigin="anonymous"></script> <script defer> let personality = { "red": "lively and ready to rock!", "blue": "calm, good natured, and tend to have a lot of friends.", "green": "sensitive, but are easily taken advantage of.", "gray": "probably lying." } $(".form button").click(function () { if($(".form input").val()){ $(this).parent().hide() .next().show() let n = $(".form input").val(), c = $(".form select").val(), pr = personality[c] $("body").css("background", c) $("#name").text(n) $("#color").text(c) $("#personality").text(pr) } }) $(".result button").click(function () { $(this).parent().hide() .prev().show() $("body").css("background", "white") }) </script> </body> </html>1 نقطة