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

محمد الحربي · 23 أبريل 2020

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

Nabil Tayeh · 23 أبريل 2020

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

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

Othmane Othwsav · 24 أبريل 2020

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

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

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 و التي تحتوي بالتوالي على الألوان بالإنجليزية, نفس الألوان بالعربية, الألوان الداكنة الموجودة في مصفوفة الألوان.

محمد الحربي · 24 أبريل 2020

بتاريخ 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>

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

Othmane Othwsav · 24 أبريل 2020

بتاريخ 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>

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

السؤال

محمد الحربي

4 أجوبة على هذا السؤال

Recommended Posts

Nabil Tayeh

Othmane Othwsav

محمد الحربي

Othmane Othwsav

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية