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

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

داخل فولدر

نحضر ملعقة من فايل html
نحضر ملعقة من فايل css
نحضر ملعقة من فايل javascript

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>

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

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

  <div class="notes"></div>
</div>

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;
}

شكل طعام الحالي

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

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 = "";
});

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

css اشوية بعد

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

الناتج

بالعافية 😅

Blog

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

omar.dev

html نبدا ب

css اشوية

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

الناتج

Join Our Newsletter. No Spam, Only the good stuff.

Related