اذهب إلى المحتوى
  • 0

المساعدة في كتابة برنامج بلغة جافا سكريبت

محمد الحربي

السؤال

 برنامج يسمح للمستخدم يدخل اسمه و يختار لونه المفضل ولما يضغط على الزر راح يتغير لون الخلفيه للون الي اختاره و راح ينكتب على الشاشه اسمه و تحليل شخصيته

رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

  • 0

السلام عليكم
بإمكانك عمل المطلوب بالشكل التالي
 

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
    
<body>

  <style>
    body {color: white;}
    .color {color: black;}
    </style>  
    
<div class="dDi">
  <input type="text" id="name" placeholder="Enter Your Name"><br>
  <span class="color">Select Your Favorite Color</span><br>
  <select id="color">
      <option value="red"> Red </option>
      <option value="green"> Green </option>
      <option value="blue"> Blue </option>

  </select><br>
  <button type="button" onclick="btnCliked()" name="button">Click Here</button>
</div>

          
             
<div id="myDiv" style="padding-top:10px; font-size: large;">
</div>
       

<script type="text/javascript">

    function btnCliked() {
        var color = document.getElementById('color').value;
        document.body.style.backgroundColor = color;

        var name = document.getElementById('name').value;

        var yourPer;

        if(color == "red"){
          yourPer = "So, You love Red Things";
        }
        if(color == "green"){
          yourPer = "So, You love Green Things";
        }
        if(color == "blue"){
          yourPer = "So, You love Blue Things";
        }


        document.getElementById('myDiv').innerHTML = "Your Name is <b>" + name + "</b> and Your Favorite Color is <b>" + color + "</b> " + yourPer;
       

    }   
</script>

  </body>
</html>

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

السلام عليكم,

هته صفحة صممتها ب jquery و بها ما تحتاج:

ice_screenshot_20200424-153721.thumb.png.d46da348de1229fab918633948b86503.png

ice_screenshot_20200424-153713.thumb.png.002ee022c3c9f84bb20382021e734181.png

ice_screenshot_20200424-153759.png.11fbb209c1e1d2295705492d08783b8b.png

هذا هو الكود:

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            font-size: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            flex-direction: column;
            margin: 0;
        }
        .alert{
            position: absolute;
            top: 0;
        }
        .alert > *{
            text-align: center;
        }
        .form{
            border: 1px solid #555;
            border-radius: 0.5em;
            padding: 15px;
            background-color: white;
        }
        .form .name input{
            font-size: inherit;
            font-family: inherit;
            padding: 5px 8px;
        }
        h5{
            text-align: center;
        }
        .colors{
            display: grid;
            grid-gap: 10px;
            grid-template-columns: repeat(6, 1fr);
            justify-items: center;
        }
        .colors .color{
            width: 40px;
            height: 40px;
            box-shadow: inset 0 0 10px #00000085;
            border-radius: 0.25em;
            cursor: pointer;
            transition: all .35s;
        }
        .colors .color[data-color="black"]{
            box-shadow: inset 0 0 10px #ffffff85;
        }
        .colors .color:hover{
            box-shadow: inset 0 0 20px #00000000;
        }
        .colors .color[data-color="white"]{
            border: 1px solid transparent;
        }
        .colors .color[data-color="white"]:hover{
            border-color: black;
        }
        .error{
            background: #ff9797;
            margin-top: 30px;
            padding: 25px 50px;
            border: 1px solid black;
            border-radius: 0.5em;
            display: none;
        }
    </style>
</head>
<body>
    <div class="alert">
        <h2 class="showed-name"></h2>
        <p class="personality"></p>
    </div>
    <div class="form">
        <div class="name">
            <label for="name">أدخل اسمك:</label>
            <input type="text" name="name" placeholder="محمد">
        </div>
        <h5>إختر لونك:</h5>
        <div class="colors"></div>
    </div>
    <div class="error">
            المرجو إدخال الإسم أولا
    </div>
    <script src="https://code.jquery.com/jquery-3.5.0.min.js" integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ=" crossorigin="anonymous"></script>
    <script defer>
        let colors = ["white", "black", "red", "green", "blue", "yellow", "pink", "purple", "orange", "brown", "gold", "aqua"],
            darkColors = ["black", "green", "purple", "brown"],
            colorsInarabic = ["الأبيض", "الأسود", "الأحمر", "الأخضر", "الأزرق", "الأصفر", "الوردي", "البنفسجي", "البرتقالي", "البني", "الذهبي", "المائي"],
            al = $(".alert"), name, c

        for (const item of colors) {
            $(".colors").append(`<div class="color" data-color="${item}" style="background: ${item}"></div>`)
        }

        $(".colors").on('click', '.color',function () {
            name = $(".name input").val()
            c = $(this).data("color")

            if(name){
                al.find(".showed-name").text(name)
                    .next(".personality").text(`أنت تحب اللون ${colorsInarabic[colors.indexOf(c)]}`)

                $("body").css("background", c)

                if(darkColors.includes(c))
                    al.css("color", "white")
                else
                    al.css("color", "black")
            } else {
                $(".error").slideDown().delay(1500).slideUp()
            }
                
        })
    </script>
</body>
</html>

لتغيير الألوان تحتاج فقط لتعديل المصفوفات colors و colorsInarabic و darkColors و التي تحتوي بالتوالي على الألوان بالإنجليزية, نفس الألوان بالعربية, الألوان الداكنة الموجودة في مصفوفة الألوان.

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0
بتاريخ 21 ساعات قال Nabil Tayeh:

السلام عليكم
بإمكانك عمل المطلوب بالشكل التالي
 


<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
    
<body>

  <style>
    body {color: white;}
    .color {color: black;}
    </style>  
    
<div class="dDi">
  <input type="text" id="name" placeholder="Enter Your Name"><br>
  <span class="color">Select Your Favorite Color</span><br>
  <select id="color">
      <option value="red"> Red </option>
      <option value="green"> Green </option>
      <option value="blue"> Blue </option>

  </select><br>
  <button type="button" onclick="btnCliked()" name="button">Click Here</button>
</div>

          
             
<div id="myDiv" style="padding-top:10px; font-size: large;">
</div>
       

<script type="text/javascript">

    function btnCliked() {
        var color = document.getElementById('color').value;
        document.body.style.backgroundColor = color;

        var name = document.getElementById('name').value;

        var yourPer;

        if(color == "red"){
          yourPer = "So, You love Red Things";
        }
        if(color == "green"){
          yourPer = "So, You love Green Things";
        }
        if(color == "blue"){
          yourPer = "So, You love Blue Things";
        }


        document.getElementById('myDiv').innerHTML = "Your Name is <b>" + name + "</b> and Your Favorite Color is <b>" + color + "</b> " + yourPer;
       

    }   
</script>

  </body>
</html>

 

شكراً لك ولكن اريد المخرج يكون هكذا5ea34441b1d8b__.thumb.jpg.47553ec994f10c4389d66a88865b8d3a.jpg

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0
بتاريخ 3 ساعات قال محمد الحربي13:

شكراً لك ولكن اريد المخرج يكون هكذا

تفضل الكود:

<!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>

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...