DEV Community

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

Posted on

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


مرحبا, اليوم راح نعمل موقع ملاحظات باستخدام
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 (0)