İletişim Sayfası (front-end)

ByFelez · 12 Ara 2023

Eskisi kadar Siber güvenlik projesi gelmiyor.
Web Geliştirmeye odaklanmış ve yönelmiş durumdayım. JavaScript Bilgim Vardı Zaten biraz front-end tarafında tecrübe kazanınca Node js ile back-end tarafına geçmeyi planlıyorum.

Her neyse

----------------------------------------------------------------

HTML

HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>İletişim</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="container">
      <h1>İletişim</h1>
      <form id="contactForm" action="#" method="post">
        <div class="form-group">
          <label for="name">Adınız:</label>
          <input
            type="text"
            id="name"
            name="name"
            style="width: 200px"
            required
          />
        </div>
        <div class="form-group">
          <label for="email">E-posta Adresiniz:</label>
          <input
            type="email"
            id="email"
            name="email"
            style="width: 200px"
            required
          />
        </div>
        <div class="form-group">
          <label for="phone">Telefon Numaranız:</label>
          <input
            type="tel"
            id="phone"
            name="phone"
            pattern="[0-9]{10}"
            style="width: 200px"
            required
          />
          <small
            >Lütfen 10 haneli telefon numarası girin (Ör: 5551234567)</small
          >
        </div>
        <div class="form-group">
          <label for="message">Mesajınız:</label>
          <textarea
            id="message"
            name="message"
            rows="5"
            style="width: 100%"
            required
          ></textarea>
        </div>
        <button type="submit">Gönder</button>
        <div id="errorMessage" class="error-message"></div>
      </form>
      <div id="successMessage" class="success-message">
        <p>Mesajınız başarıyla gönderildi!</p>
      </div>
    </div>

    <script src="script.js"></script>
  </body>
</html>

CSS

CSS:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  body {
    font-family: Arial, sans-serif;
    background-image: url('arkaplan.png');
    background-size: cover;
  }

  .container {
    width: 80%;
    margin: 50px auto;
    background-color: rgba(255, 255, 255, 0.7);
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  }

  h1 {
    text-align: center;
    margin-bottom: 20px;
  }

  .form-group {
    margin-bottom: 15px;
  }

  label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
  }

  input[type="text"],
  input[type="email"],
  input[type="tel"],
  textarea {
    width: calc(100% - 10px);
    padding: 8px;
    border-radius: 4px;
    border: 1px solid #ccc;
  }

  textarea {
    height: 100px;
  }

  small {
    display: block;
    margin-top: 5px;
    font-size: 12px;
    color: #888;
  }

  button {
    padding: 10px 20px;
    background-color: #4caf50;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    margin-top: 10px;
  }

  button:hover {
    background-color: #45a049;
  }

  .error-message,
  .success-message {
    display: none;
    text-align: center;
    padding: 10px;
    border-radius: 8px;
    margin-top: 20px;
  }

  .error-message {
    background-color: #f44336;
    color: #fff;
  }

  .success-message {
    background-color: #4caf50;
    color: #fff;
    animation: showMessage 1s ease-in-out forwards;
  }

  @keyframes showMessage {
    0% {
      transform: translateY(-50px);
      opacity: 0;
    }
    100% {
      transform: translateY(0);
      opacity: 1;
    }
  }

  @media screen and (max-width: 600px) {
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    textarea {
      width: calc(100% - 8px);
    }
  }

JAVASCRİPT

JavaScript:

document.getElementById('contactForm').addEventListener('submit', function(event) {
    event.preventDefault();

    var name = document.getElementById('name').value;
    var email = document.getElementById('email').value;
    var phone = document.getElementById('phone').value;
    var message = document.getElementById('message').value;

    var nameRegex = /^[a-zA-ZğüşöçıĞÜŞİÖÇ\s]+$/;

    var errorMessage = document.getElementById('errorMessage');
    var successMessage = document.getElementById('successMessage');

    if (nameRegex.test(name) && message && phone.length === 10 && !isNaN(phone)) {
      errorMessage.style.display = 'none';
      successMessage.style.display = 'block';
    } else {
      errorMessage.textContent = 'Lütfen geçerli bir ad, telefon numarası ve mesaj girin.';
      errorMessage.style.display = 'block';
      successMessage.style.display = 'none';
    }
  });

I AM EAC0D3Rx · 12 Ara 2023

elinize sağlık

Roichue · 12 Ara 2023

Tasarım daha çok güzelleştirilebilir ve geliştirilebilir, eline sağlık.

Node.js ile projeler bekliyorum.

ByFelez · 12 Ara 2023

404Qea' Alıntı:
elinize sağlık

Teşekkürler

Roichue' Alıntı:
Tasarım daha çok güzelleştirilebilir ve geliştirilebilir, eline sağlık.

Node.js ile projeler bekliyorum.

Tasarım konusun da çok haklısınız ama bende tasarım zevkinin olduğunu düşünmüyorum

Benim için o bi tık sıkıntı...

Yeterli Seviyeye geldiğimde elbettee

H@cked BaBy · 12 Ara 2023

ByFelez' Alıntı:

Eskisi kadar Siber güvenlik projesi gelmiyor.
Web Geliştirmeye odaklanmış ve yönelmiş durumdayım. JavaScript Bilgim Vardı Zaten biraz front-end tarafında tecrübe kazanınca Node js ile back-end tarafına geçmeyi planlıyorum.

Her neyse

----------------------------------------------------------------

HTML

HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>İletişim</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="container">
      <h1>İletişim</h1>
      <form id="contactForm" action="#" method="post">
        <div class="form-group">
          <label for="name">Adınız:</label>
          <input
            type="text"
            id="name"
            name="name"
            style="width: 200px"
            required
          />
        </div>
        <div class="form-group">
          <label for="email">E-posta Adresiniz:</label>
          <input
            type="email"
            id="email"
            name="email"
            style="width: 200px"
            required
          />
        </div>
        <div class="form-group">
          <label for="phone">Telefon Numaranız:</label>
          <input
            type="tel"
            id="phone"
            name="phone"
            pattern="[0-9]{10}"
            style="width: 200px"
            required
          />
          <small
            >Lütfen 10 haneli telefon numarası girin (Ör: 5551234567)</small
          >
        </div>
        <div class="form-group">
          <label for="message">Mesajınız:</label>
          <textarea
            id="message"
            name="message"
            rows="5"
            style="width: 100%"
            required
          ></textarea>
        </div>
        <button type="submit">Gönder</button>
        <div id="errorMessage" class="error-message"></div>
      </form>
      <div id="successMessage" class="success-message">
        <p>Mesajınız başarıyla gönderildi!</p>
      </div>
    </div>

    <script src="script.js"></script>
  </body>
</html>

CSS

CSS:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  body {
    font-family: Arial, sans-serif;
    background-image: url('arkaplan.png');
    background-size: cover;
  }

  .container {
    width: 80%;
    margin: 50px auto;
    background-color: rgba(255, 255, 255, 0.7);
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  }

  h1 {
    text-align: center;
    margin-bottom: 20px;
  }

  .form-group {
    margin-bottom: 15px;
  }

  label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
  }

  input[type="text"],
  input[type="email"],
  input[type="tel"],
  textarea {
    width: calc(100% - 10px);
    padding: 8px;
    border-radius: 4px;
    border: 1px solid #ccc;
  }

  textarea {
    height: 100px;
  }

  small {
    display: block;
    margin-top: 5px;
    font-size: 12px;
    color: #888;
  }

  button {
    padding: 10px 20px;
    background-color: #4caf50;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    margin-top: 10px;
  }

  button:hover {
    background-color: #45a049;
  }

  .error-message,
  .success-message {
    display: none;
    text-align: center;
    padding: 10px;
    border-radius: 8px;
    margin-top: 20px;
  }

  .error-message {
    background-color: #f44336;
    color: #fff;
  }

  .success-message {
    background-color: #4caf50;
    color: #fff;
    animation: showMessage 1s ease-in-out forwards;
  }

  @keyframes showMessage {
    0% {
      transform: translateY(-50px);
      opacity: 0;
    }
    100% {
      transform: translateY(0);
      opacity: 1;
    }
  }

  @media screen and (max-width: 600px) {
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    textarea {
      width: calc(100% - 8px);
    }
  }

JAVASCRİPT

JavaScript:

document.getElementById('contactForm').addEventListener('submit', function(event) {
    event.preventDefault();

    var name = document.getElementById('name').value;
    var email = document.getElementById('email').value;
    var phone = document.getElementById('phone').value;
    var message = document.getElementById('message').value;

    var nameRegex = /^[a-zA-ZğüşöçıĞÜŞİÖÇ\s]+$/;

    var errorMessage = document.getElementById('errorMessage');
    var successMessage = document.getElementById('successMessage');

    if (nameRegex.test(name) && message && phone.length === 10 && !isNaN(phone)) {
      errorMessage.style.display = 'none';
      successMessage.style.display = 'block';
    } else {
      errorMessage.textContent = 'Lütfen geçerli bir ad, telefon numarası ve mesaj girin.';
      errorMessage.style.display = 'block';
      successMessage.style.display = 'none';
    }
  });

Emegine saglik umarim kendini daha fazla gelistirebilirsin(tasarım dahil

)

ByFelez · 12 Ara 2023

H@cked BaBy' Alıntı:
Emegine saglik umarim kendini daha fazla gelistirebilirsin(tasarım dahil)

Teşekkürler
Zaman...

İletişim Sayfası (front-end)

ByFelez

Uzman üye

I AM EAC0D3Rx

Anka Team Junior

Roichue

Asistan Moderatör

ByFelez

Uzman üye

H@cked BaBy

Basın&Medya Ekibi

ByFelez

Uzman üye

Sosyal medya sayfalarımız