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

Mohammed Hhhh

الأعضاء
  • المساهمات

    219
  • تاريخ الانضمام

  • تاريخ آخر زيارة

  • عدد الأيام التي تصدر بها

    1

كل منشورات العضو Mohammed Hhhh

  1. السلام عليكم و رحمة الله وبركاته انا اقوم بعمل مشروع 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 وشكرا لكم ................
  2. حاولت ان اقوم بعمل برنامج انه اذا عملت hover على عنصر يتغير لون الصفحه وقمت بكتابة الكود التالي و لكن لم يعمل ما الحل h1:hover body{ background-color:red ; }
  3. window.localStorage.user = { name : 'mohammed', age : 14 } console.log(typeof JSON.parse(localStorage.user)); // لماذا يعطني خطأ السلام عليكم لماذا يظهر هذا الخطأ: "Uncaught SyntaxError: Unexpected token o in JSON at position 1"
  4. السلام عليكم............ لماذا عندما اقوم بعمل refresh للصفحه لا يقوم هذا الكود بالعمل document.scroll(100,200); و لكن عند اضافته في ال console في المتفصح يعمل مباشره ولكن عندما اقوم بكتابته في ملف ال JS لا يعمل
  5. ما الفرق بين هاتين الخاصيتين في JS document.createTextNode(‘hello world’); //!!! and document.innerHtml(‘hello world’);
  6. السلام عليكم و رحمة الله وبركاته ما هو الفرق بين هاذين الكودين // code 1 let a = document.img ; // code 2 let a = document.imges ; // ما هو الفرق بينهما
  7. السلام عليكم ورحمة الله وبركاته ما الفرق بين ال object.assign و object.create و شكرا
  8. ما هي ال 2d array في JS و هل يوجد انواع اخرى و شكرا جزيلا....
  9. ما هو الفرق بين ال flex-basis and flex-grow و ال width
  10. هل هذا جيد .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; }
  11. السلام عليكم و رحمة الله وبركاته لماذا الصروة لاتأتي فوق المربع مع اني حاولت ان اعطيها 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; } صورة الخطا
  12. <!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>
  13. السلام عليكم ورحمة الله وبركاته كيف اقوم بنقل كلمة match بجانب الشعار لتصبح مثل الشكل النهائي boot strap
  14. السلام عليكم ورحمة الله وبركاته انا استخدم كود 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>
  15. <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> لماذا يقوم بعرض العناصر فوق بعضها البعض وليس بجانب بعضها البعض
  16. ما سبب الخطأ $(document).ready(function() { $(td).click(function{ console.log("click it again"), alert("mmn")
  17. شكرا لك قمت بوضع كود JS في اخر الصفحه و عمل و لكن ما الفرق بين وضعه في ال head و body و شكرا لكم
  18. و عندما اضعه في المتصفح استطيع استدعائه
  19. لماذا يعطيني error عندما اقوم بعمل run في ال terminal بينما عندما اعمل run في الموقع اواجه مشكله
  20. ما هي الفائدة من forEach وما هي ومتى استعملها و امثله عليها javaScript
  21. هل يمكنني ان اقوم بأخفاء اكواد css من الكروم dev tools
  22. السلام عليكم ورحمة الله وبركاته لماذا عندما اطبع النتيجه يعطيني صفر واحد و ليس خمس اصفار كما انا كتبت في الكود الكود 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();
  23. let price = null ; console.log(`the price is ${price || 200 }`); <------ console.log(`the price is ${price ?? 200 }`); <------ ما الفرق بين الكودين
  24. السلام عليكم ورحمة الله وبركاته ماهو الفرق بين ال substr and substring and slice في لغة الجافا سكربت و هم يقومون بعمل نفس الوظيفه
×
×
  • أضف...