DEV Community

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

Posted on

4 2

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


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

الناتج

بالعافية 😅

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (1)

Collapse
 
omar_dev profile image
omar.dev

Cringe 😬

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More