DEV Community

Cover image for برمجة موقع ملاحظات كانوا نحضر اكل
omar.dev
omar.dev

Posted on

برمجة موقع ملاحظات كانوا نحضر اكل

#html #css #javascript

مرحبا, اليوم راح نعمل موقع ملاحظات باستخدام
html وcss وjavascript

داخل فولدر

  1. نحضر ملعقة من فايل html
  2. نحضر ملعقة من فايل css
  3. نحضر ملعقة من فايل javascript

image presenting how to create file structure

html نبدا ب

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ملاحظات</title>
    <link rel="stylesheet" href="./style.css" />
    <script src="./script.js" defer></script>
  </head>
  <body></body>
</html>
Enter fullscreen mode Exit fullscreen mode

بعدين نضيف اساس الطبق

<div class="parent-conteiner">
  <button class="save-btn">حفظ</button>
  <input type="text" class="input" placeholder="ملاحظاتك" dir="rtl" />

  <div class="notes"></div>
</div>
Enter fullscreen mode Exit fullscreen mode

css اشوية 

body,
html {
  margin: 0;
  height: 100%;
  background-color: rgb(240, 240, 240);

  /* كود لجعل كل ايتمس في المنتصف */
  display: flex;
  align-items: center;
  justify-content: center;
}

.parent-conteiner {
  background-color: rgb(38, 111, 156);
  padding: 20px;
  border-radius: 5px;
}

.input {
  padding: 5px;
  border-radius: 5px;
  background-color: rgb(57, 142, 194);
  border: none;
  color: white;
  font-size: 20px;
}
input::placeholder {
  color: white;
}

.save-btn {
  padding: 5px 10px;
  border-radius: 5px;
  background-color: rgb(57, 142, 194);
  border: none;
  color: white;
  font-size: 20px;
  margin-top: 10px;
}
Enter fullscreen mode Exit fullscreen mode

شكل طعام الحالي
img-2

هذا جان مقبلات الطبق الاساسي لازم وي اشوية جافاسكريبت

const input = document.querySelector(".input");
const button = document.querySelector(".save-btn");
const notes = document.querySelector(".notes");

button.addEventListener("click", function () {
  const note = input.value;
  notes.innerHTML += `<p class='note'>${note}</p>`;
  input.value = "";
});
Enter fullscreen mode Exit fullscreen mode

الاكلة خلصناه تقريبا, نكدر نضيف ملاحضات كما في الشكل
result

css اشوية بعد

.note {
  font-size: 20px;
  color: white;
  background-color: rgb(57, 142, 194);
  padding: 5px;
  border-radius: 5px;
}
Enter fullscreen mode Exit fullscreen mode

الناتج

بالعافية 😅

Top comments (4)

Collapse
 
omar_dev profile image
omar.dev •

Cringe 😬

Collapse
 
loire918 profile image
Loire • • Edited

أنا دائمًا أرى أن اختيار الشيك أو الكمبيالة أو سند لأمر يعتمد بشكل كبير على طبيعة التعامل والضمانات المطلوبة بين الأطراف. الشيك يُعتبر وسيلة دفع سريعة ويمكن صرفه مباشرة من البنك، لكنه يحتاج لرصيد متوفر فورًا. الكمبيالة غالبًا تُستخدم في المعاملات التجارية طويلة الأجل وتمنح مهلة للسداد، بينما سند لأمر هو التزام مباشر من المدين بالسداد في تاريخ محدد، مما يوفر وضوحًا أكبر في الحقوق والواجبات. من تجربتي في إدارة المعاملات، التنويع بين هذه الأدوات قد يكون مفيدًا حسب الظروف. حتى في مجالات أخرى مثل متابعة الأخبار الرياضية أو المراهنات، كما في موقع bookmaker 1xBet الذي قرأت فيه عن 5 جوانب في كرة القدم الحديثة تزعج المشجعين، نجد أن وضوح الشروط والتزامات الأطراف هو ما يحدد جودة التعامل. الشفافية دائمًا المفتاح.

Collapse
 
khaledsaeed profile image
Khaled Saeed • • Edited

يبدو أن موضوع برمجة موقع الملاحظات مفيد جدًا لتنظيم الأفكار والمهام اليومية، خصوصًا أثناء تحضير الطعام أو إدارة المشاريع. إذا كنت مهتمًا بقضاء بعض الوقت في الترفيه أيضًا، يمكنك تجربة كازينو tunisia-bet.com/ وهو منصة موثوقة للألعاب الإلكترونية في تونس توفر خيارات متنوعة بطريقة آمنة وسهلة الاستخدام.

Some comments may only be visible to logged-in visitors. Sign in to view all comments.