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