Mohammed Hhhh

21 مايو 2022

السلام عليكم و رحمة الله وبركاته

انا اقوم بعمل مشروع crud و لكن صادفتني مشكله

المشكله موجوده في مربع ال total

حاولت ان اجعل مربع ال total ان يصبح لونه اخضر عند ادخال البينات و لونه احمر عندما لا تتوفر بينات و لكن عندما اقوم بمسح البيانات لا يستجيب و يبقى لونه

اخضر و لا يتغير الى الاحمر لانه من المفترض ان تيغير الى اللون الاحمر لانه لا يجود قيم في المربعات pricr , taxes , ads , discount

سوف اضع comment لاوضح اين المكشله في ملف JS

كود html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="pstyle.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap" rel="stylesheet">
    <title>CRUDs</title>

</head>

<body>
    <div class="crud">
        <!-- ----- -->
        <div class="head">
            <h2> <img src="/project/photos/cruds.png" alt="" width="40px">
                <p>crud</p>
            </h2>
            <a target="_blank" href="/ourTeam.html" class="ourTeam">Our Team</a>
        </div>
        <!-- ----- -->

        <div class="inputs">
            <input type="text" name="" id="title" placeholder="title">
            <div class="price">
                <input onkeyup="getTotal()" type="number" value="" id="price" placeholder="price">
                <input onkeyup="getTotal()" type="number" value="" id="taxes" placeholder="taxes">
                <input onkeyup="getTotal()" type="number" value="" id="ads" placeholder="ads">
                <input onkeyup="getTotal()" type="number" value="" id="discount" placeholder="discount">
                <small id="total"></small>
            </div>
            <div class="containerOfcreat">
            <div class="creatdiv">
                <input type="text" id="count" placeholder="count">
                <input type="text" id="category" placeholder="category">
            </div>
                <button id="submit"> <img src="/project/photos/creat.png" alt="noIMGerror" width="20px"> Creat</button>
            </div>
            
        </div>
        <!-- ----- -->
        <div class="outputs">
            <div class="searchBlock">
                <input type="text" id="search" placeholder="search">
                <div class="btnSearch">
                    <button id="searchTitle">Search By Title</button>
                    <button id="searchTCategory">Search By Category</button>
                </div>
            </div>
        </div>

        <table>
            <tr>
                <th>id</th>
                <th>title</th>
                <th>price</th>
                <th>taxes</th>
                <th>discount</th>
                <th>total</th>
                <th>ads</th>
                <th>category</th>
                <th>update</th>
                <th>delet</th>
            </tr>
            <tbody>
                <tr>
                    <td>5409</td>
                    <td>i phone</td>
                    <td>4000</td>
                    <td>210</td>
                    <td>324</td>
                    <td>20</td>
                    <td>10</td>
                    <td>phone</td>
                    <td><button id="update">update</button></td>
                    <td><button id="delet">delet</button></td>
                </tr>
                <tr>
                    <td>0952</td>
                    <td>Lenovo</td>
                    <td>3256</td>
                    <td>10</td>
                    <td>32</td>
                    <td>5</td>
                    <td>19</td>
                    <td>laptop</td>
                    <td><button id="update">update</button></td>
                    <td><button id="delet">delet</button></td>
                </tr>
                <tr>
                    <td>4285</td>
                    <td>Samsung</td>
                    <td>4500</td>
                    <td>20</td>
                    <td>100</td>
                    <td>100</td>
                    <td>30</td>
                    <td>phone</td>
                    <td><button id="update">update</button></td>
                    <td><button id="delet">delet</button></td>
                </tr>
                <tr>
                    <td>4285</td>
                    <td>Samsung</td>
                    <td>4500</td>
                    <td>20</td>
                    <td>100</td>
                    <td>100</td>
                    <td>30</td>
                    <td>phone</td>
                    <td><button id="update">update</button></td>
                    <td><button id="delet">delet</button></td>
                </tr>
            </tbody>
        </table>
    </div>
    <footer>
        <p>Proudly made by Mohammed  😁</p>


    </footer>


    <script src="pmain.js"></script>
</body>

</html>

كود css

* {
    margin: 0;
    padding: 0;
}

html {
    font-family: 'Roboto', sans-serif;
}

body {
    background-color: #222;
    color: #fff;
}

.crud {
    width: 80%;
    margin: auto;
}

.head {
    display: flex;
    justify-content: space-between;
    text-align: left;
    text-transform: uppercase;
    margin: 10px 0;
}

.head h2 p {
    position: relative;
    top: -10px;
    display: inline-block;
}

.head .ourTeam {
    margin: 5px 0 0 0;
    background-color: #0d1a22;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    padding: 10px;
    text-decoration: none;
    color: white;
    transition: all 1s ease;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -o-transition: all 1s ease;
}

.head .ourTeam:hover {
    background-color: #264b62cb;
    color: rgb(199, 199, 199);
    box-shadow: 0px 0px 10px rgb(0, 41, 113);
    text-shadow: 5px 5px 5px rgb(255, 255, 255);
}

input {
    width: 100%;
    height: 30px;
    outline: none;
    border: none;
    background-color: #111;
    margin: 4px 0;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    padding: 4px;
    transition: 0.5s all;
    -webkit-transition: 0.5s all;
    -moz-transition: 0.5s all;
    -ms-transition: 0.5s all;
    -o-transition: 0.5s all;
}

input:focus {
    background-color: #000;
    color: white;
    transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
}

.price input {
    width: 20%;
}

#total {
    background-color: rgb(148, 24, 24);
    padding: 6px 3px;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
    -o-border-radius: 2px;
}

#total::before {
    content: "total: ";
}

button {
    width: 101%;
    height: 30px;
    border: none;
    cursor: pointer;
    background-color: rgb(3, 11, 50);
    color: white;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
}

button:hover {
    background-color: rgb(14, 50, 226);
    letter-spacing: 0.5px;
}
.containerOfcreat{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}
.creatdiv{
    width: 45%;
}
#submit {
    width: 45%;
    padding: 20px;
    display: block;
    height: 82px;
    font-size: 30px;
    position: relative;
    right: -8px;
}

.btnSearch {
    display: flex;
    justify-content: space-evenly;
}

.btnSearch button {
    width: 45%;
}

table {
    width: 100%;
    text-align: center;
    margin: 10px 0;
}

table th {
    text-transform: uppercase;
}

th,
td {
    padding: 5px;
}

footer {
    width: 100%;
    margin-top: 40px;
    background-color: #0d1a22;
    padding: 30px 0;
}

footer p {
    text-align: center;
    font-weight: bold;
    font-size: 30px;
    transition: all 1s;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -ms-transition: all 1s;
    -o-transition: all 1s;
}

footer p:hover {
    color: #0d1a22;
    text-shadow: 0px 0px 10px whitesmoke;
}

كود JS

let title = document.getElementById("title");
let price = document.getElementById("price");
let taxes = document.getElementById("taxes");
let ads = document.getElementById("ads");
let discount = document.getElementById("discount");
let total = document.getElementById("total");
let count = document.getElementById("count");
let category = document.getElementById("category");
let submit = document.getElementById("submit");
// console.log(title ,price ,taxes ,ads ,discount, total,count,category,submit);
// count total
//!!!!!!! proplem
//!!!!!!! proplem
//!!!!!!! proplem
//!!!!!!! proplem
function getTotal() {
    if(price != ""){
        let result = (+price.value + +ads.value + +taxes.value) - 
        +discount.value; 
        total.innerHTML = result ;
        total.style.background="#040" ;
    }else{
        total.innerHTML='' ;
        total.style.background = '#040';
    }
}

//!!!!!!! proplem
//!!!!!!! proplem
//!!!!!!! proplem
//!!!!!!! proplem

وشكرا لكم ................

20 مايو 2022

حاولت ان اقوم بعمل برنامج انه اذا عملت hover على عنصر يتغير لون الصفحه وقمت بكتابة الكود التالي و لكن لم يعمل ما الحل

h1:hover body{
background-color:red ;
}

20 مايو 2022

window.localStorage.user = {
    name : 'mohammed',
    age : 14
}
console.log(typeof JSON.parse(localStorage.user));
// لماذا يعطني خطأ

السلام عليكم

لماذا يظهر هذا الخطأ:

"Uncaught SyntaxError: Unexpected token o in JSON at position 1"

17 مايو 2022

السلام عليكم............

لماذا عندما اقوم بعمل refresh للصفحه لا يقوم هذا الكود بالعمل

document.scroll(100,200);

و لكن عند اضافته في ال console في المتفصح يعمل مباشره ولكن عندما اقوم بكتابته في ملف ال JS لا يعمل

17 مايو 2022

ما الفرق بين هاتين الخاصيتين

في JS

document.createTextNode(‘hello world’);
//!!! and 
document.innerHtml(‘hello world’);

15 مايو 2022

السلام عليكم و رحمة الله وبركاته

ما هو الفرق بين هاذين الكودين

// code 1
let a = document.img ;
// code 2
let a = document.imges ;

// ما هو الفرق بينهما

14 مايو 2022

السلام عليكم ورحمة الله وبركاته

ما الفرق بين ال object.assign و object.create

و شكرا

13 مايو 2022

ما هي ال 2d array في JS و هل يوجد انواع اخرى و شكرا جزيلا....

12 مايو 2022

ما هو الفرق بين ال flex-basis and flex-grow

بتاريخ 6 دقائق مضت قال Mohammmed Mahmoud:

ما هو الفرق بين ال flex-basis and flex-grow

و ال width

12 مايو 2022

بتاريخ 20 ساعات قال سامح أشرف:

حاول تفكيك مكونات الصورة في مخيلتك لتستطيع فهم المحتويات وستجد أنه يمكن بناء هذه الأشكال بسهولة.

لمركز على الشكل الموجود على اليسار الآن، في البداية يوجد صورة لأحد الأندية ويوجد حدود border بيضاء حولها، وتم جعل هذه الحدود دائرية من خلال الخاصية border-radius.

بعد ذلك يوجد مربع يحتوي على اسم النادي، وهذا العنصر له حدود دائرية كذلك عبر الخاصية border-radius، وتم إزاحة العنصر قابلًا ناحية الصورة من خلال الخاصية margin-left (بقيمة سالبة)، كما يمكن إستخدام margin لإزاحة العنصر إلى الأسفل قليلًا ليكون في منتصف الصورة أفقيًا.

وبنفس المبدئ يمكن عمل الشكل الموجود على اليمين، مع تغير ترتيب النص (اسم النادي) والصورة كذلك.

ملاحظة: تستطيع ترتيب ظهور الصورة فوق النص من خلال الخاصية z-index

يوجد أكثر من طريقة لتنفيذ ما سبق وليس عليك حتى إستخدام نفس الخصائص، حيث يمكنك أن تستعمل flex box مثلًا بدلًا من margin

حاول تطبيق هذا الأمر وإن واجهت مشكلة في الكود فتستطيع أن تقوم بإضافة سؤال لتحصل على المساعدة بشكل أدق.

هل هذا جيد

.behind_the_picture_liverpool {

    display: inline-block;

    background-color: white;

    border-radius: 50%;

    -webkit-border-radius: 50%;

    -moz-border-radius: 50%;

    -ms-border-radius: 50%;

    -o-border-radius: 50%;

    width: 120px;

    height: 120px;

    padding: 20px ;

    z-index: 123;

    position: relative ;

}

.liverpool_name{

    display: inline-block ;

    background-color: white ;

    width: 250px ;

    height: 80px ;

    text-align: center ;

    border-radius: 50px ;

    -webkit-border-radius: 50px ;

    -moz-border-radius: 50px ;

    -ms-border-radius: 50px ;

    -o-border-radius: 50px ;

    padding: 25px ;

    font-size: 20px;

    position: relative;

    top: 5px;

    left: -55px;

}

12 مايو 2022

كيف اقوم بعمل هذا الشكل

8 مايو 2022

السلام عليكم و رحمة الله وبركاته

لماذا الصروة لاتأتي فوق المربع مع اني حاولت ان اعطيها z-index اكبر من المربع \

كود html

<!DOCTYPE html>
<html lang="en" style="background-color: #E5E5E5 ;">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="Style/style_mainpage.css">
    <script src="project_1/JavaScript/jsfile.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- nav_bar -->
    <nav class="navbar fixed-top navbar-expend-lg navbar-dark p-md-3 ">
        <div class="container">
            <div class="">
                <img src="/project_1/images/football.png" height="30px" width="30px" alt="" style="float: left;">
                <div class="navbar-brand text-dark"
                    style="font-weight: bold ; float: right; margin-left: 10px;padding-top: 0px;">Match</div>
            </div>
            <button href="/project_1/login_pg.html" class="sing-in">Sing-in</button>
        </div>
    </nav>
    <!-- body (content)  -->
    <div class="container">
        <table>
            <thead>
                <tr>
                    <td><span class="behind_the_picture_liverpool"><img src="/project_1/images/liverpool.png"
                                alt="the img is unavailable" width="80px" height="80px"></span>
                        <p class="liverpool_name">Liverpool</p>
                    </td>
                    <td></td>
                </tr>
            </thead>
        </table>
    </div>
    <!-- boot strap files JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
        crossorigin="anonymous"></script>
</body>

</html>

كود css

.site_name {
    display: inline-block;
}

.sing-in {
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    font-weight: bold;
    background-color: rgb(255, 191, 0);
    color: black;
    text-decoration: none;
    padding: 8px 25px;
    transition: all 1s ease;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -o-transition: all 1s ease;
}

.sing-in:hover {
    background-color: rgb(24, 24, 24);
    color: rgb(255, 255, 255);
    box-shadow: 0px 0px 5px 1px rgb(255 191 0);
}


table {
    position: absolute ;
    top: 255px ;
    margin: 0 ;
}

.behind_the_picture_liverpool {
    z-index: 1;
    display: inline-block;
    background-color: white;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    width: 120px; 
    height: 120px;
    padding: 20px ;
}
.liverpool_name{
    display: inline-block ;
    background-color: white ;
    width: 250px ;
    height: 80px ;
    text-align: center ;
    border-radius: 50px ;
    -webkit-border-radius: 50px ;
    -moz-border-radius: 50px ;
    -ms-border-radius: 50px ;
    -o-border-radius: 50px ;
    padding: 25px ;
    font-size: 20px;
    position: relative;
    top: 5px;
    left: -55px;
}

صورة الخطا

7 مايو 2022

بتاريخ 30 دقائق مضت قال أسامة زيادة:

وعليكم السلام ورحمة الله وبركاته

هل يمكنك إرفاق شيفرتك البرمجية حتى أستطيع معرفة ما قمت به ؟

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="Style/style_mainpage.css">
    <script src="project_1/JavaScript/jsfile.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- nav bar -->
    <nav class="navbar fixed-top navbar-expend-lg navbar-dark p-md-3 ">
        <div class="container">
            <img src="/project_1/images/football.png" height="30px" width="30px" alt="">
            <div class="navbar-brand text-dark" style="font-weight: bold ;">Match</div>
            <a href="/project_1/login_pg.html" class="sing-in">Sing-in</a>
        </div>
    </nav>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
        crossorigin="anonymous"></script>
</body>
</html>

7 مايو 2022

السلام عليكم ورحمة الله وبركاته

كيف اقوم بنقل كلمة match بجانب الشعار لتصبح مثل الشكل النهائي boot strap

7 مايو 2022

السلام عليكم ورحمة الله وبركاته

انا استخدم كود boot strap و عندما اقوم بوضع الشعار يكون شكله غير جيد ما السبب مع اني حاولت ان اقوم ب بتعديل القياسات و شكرا

كود boot strap

<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">
      <img src="/project_1/images/football.png" alt="" width="30" height="24"
           class="d-inline-block align-text-top">
      Bootstrap
    </a>
  </div>
</nav>

6 مايو 2022

    <div class="navbar navbaar-expand bg-dark navbar-dark text-white">
        <div class="container">Boot strap Tutorial<a href="#"class="navbar-brand"><a>
            <div class="colapse navbar-colapse">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item"><a href="#intro" class="nav-link">About us</a></li>
                    
                    <li class="nav-item"><a href="#fag" class="nav-link">News</a></li>
                    
                    <li class="nav-item"><a href="#youtube" class="nav-link">Buy</a></li>
                </ul>
            </div>
        </div>
    </div>

لماذا يقوم بعرض العناصر فوق بعضها البعض وليس بجانب بعضها البعض

6 مايو 2022

ما سبب الخطأ

$(document).ready(function() { $(td).click(function{
console.log("click it again"), alert("mmn")

6 مايو 2022

شكرا لك قمت بوضع كود JS في اخر الصفحه و عمل و لكن ما الفرق بين وضعه في ال head و body

و شكرا لكم

6 مايو 2022

و عندما اضعه في المتصفح استطيع استدعائه

6 مايو 2022

لماذا يعطيني error عندما اقوم بعمل run في ال terminal بينما عندما اعمل run في الموقع اواجه مشكله

6 مايو 2022

ما هي الفائدة من forEach وما هي ومتى استعملها و امثله عليها javaScript

5 مايو 2022

هل يمكنني ان اقوم بأخفاء اكواد css من الكروم dev tools

26 أبريل 2022

السلام عليكم ورحمة الله وبركاته

لماذا عندما اطبع النتيجه يعطيني صفر واحد و ليس خمس اصفار كما انا كتبت في الكود

الكود

function product(product_name = "Unknown" , product_number = 00000) {
  console.log(`Laptop Name Is ${product_name} And Product Nummber Is ${product_number}`);
}

product("Lenovo Ideapad 5" , 15934);
product("Hp Omen" );
product();

9 أبريل 2022

let price = null  ;



console.log(`the price is ${price || 200 }`);   <------

console.log(`the price is ${price ?? 200 }`);  <------

ما الفرق بين الكودين

9 أبريل 2022

السلام عليكم ورحمة الله وبركاته

ماهو الفرق بين ال substr and substring and slice في لغة الجافا سكربت و هم يقومون بعمل نفس الوظيفه

ريادة الأعمال

البرمجة

التصميم

DevOps

التسويق والمبيعات

العمل الحر

البرامج والتطبيقات

آخر التحديثات

قصص نجاح

أسئلة وأجوبة

كتب

دورات

أجوبة بواسطة Mohammed Hhhh