Add phone number validator application with HTML, CSS, and JavaScript

OrasanuAna · Nov 18, 2024 · 0ee055c · 0ee055c
commit 0ee055c
Show file tree

Hide file tree

Showing 3 changed files with 253 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html lang="ro">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Validator de Numere de Telefon</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <header class="header">
+      <h1 class="title">Validator de Numere de Telefon</h1>
+      <p class="subtitle">Pentru România & SUA</p>
+    </header>
+
+    <main class="main-content">
+      <div class="validation-container">
+        <!-- Iconă pentru ghid vizual -->
+        <img
+          src="https://cdn-icons-png.flaticon.com/512/1827/1827379.png"
+          alt="Telefon Icon"
+          class="phone-icon"
+        />
+
+        <!-- Selectare țară -->
+        <div class="form-group">
+          <label for="country-select">Selectați țara:</label>
+          <select id="country-select" class="dropdown">
+            <option value="ro">România</option>
+            <option value="us">SUA</option>
+          </select>
+        </div>
+
+        <!-- Câmpul pentru introducerea numărului de telefon -->
+        <div class="form-group">
+          <input
+            type="text"
+            id="user-input"
+            class="input-field"
+            placeholder="Introduceți un număr de telefon"
+          />
+        </div>
+
+        <!-- Butoane pentru validare și ștergere -->
+        <div class="button-group">
+          <button id="check-btn" class="btn primary-btn">Validează</button>
+          <button id="clear-btn" class="btn secondary-btn">Șterge</button>
+        </div>
+
+        <!-- Zona pentru afișarea rezultatelor -->
+        <div id="results-div" class="results-div"></div>
+      </div>
+    </main>
+
+    <footer class="footer">
+      <p>
+        &copy; 2024 Validator de Numere de Telefon | Toate Drepturile Rezervate
+      </p>
+      <p class="contact-info">
+        Contact:
+        <a href="mailto:orasanu.anamaria19@gmail.com"
+          >orasanu.anamaria19@gmail.com</a
+        >
+      </p>
+    </footer>
+
+    <!-- Scriptul JavaScript pentru validare -->
+    <script src="script.js"></script>
+  </body>
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,50 @@
+document.getElementById("check-btn").addEventListener("click", function () {
+  const userInput = document.getElementById("user-input").value.trim();
+  const resultsDiv = document.getElementById("results-div");
+  const country = document.getElementById("country-select").value;
+
+  // Verifică dacă câmpul de introducere este gol
+  if (!userInput) {
+    alert("Introduceți un număr de telefon pentru a valida.");
+    return;
+  }
+
+  // Validare număr de telefon
+  const isValid = validatePhoneNumber(userInput, country);
+
+  // Actualizare rezultat
+  if (isValid) {
+    resultsDiv.textContent = `Număr valid (${country.toUpperCase()}): ${userInput}`;
+    resultsDiv.style.color = "green"; // Afișează rezultatul în verde pentru valid
+  } else {
+    resultsDiv.textContent = `Număr invalid (${country.toUpperCase()}): ${userInput}`;
+    resultsDiv.style.color = "red"; // Afișează rezultatul în roșu pentru invalid
+  }
+});
+
+// Buton de ștergere pentru resetarea câmpurilor de introducere și rezultate
+document.getElementById("clear-btn").addEventListener("click", function () {
+  document.getElementById("user-input").value = "";
+  document.getElementById("results-div").textContent = "";
+});
+
+// Funcția de validare a numărului de telefon în funcție de țară
+function validatePhoneNumber(number, country) {
+  let pattern;
+
+  // Selectăm expresia regulată în funcție de țara selectată
+  if (country === "us") {
+    // Expresie regulată pentru numerele din SUA
+    pattern = /^(1\s?)?(\(\d{3}\)|\d{3})[\s\-]?\d{3}[\s\-]?\d{4}$/;
+  } else if (country === "ro") {
+    // Expresie regulată pentru numerele din România (de ex. 07xx xxx xxx)
+    pattern = /^(?:\+4|04)?07[0-8]\d{7}$/;
+  } else {
+    // În caz că țara nu este suportată
+    alert("Țara selectată nu este suportată pentru validare.");
+    return false;
+  }
+
+  // Returnează rezultatul validării
+  return pattern.test(number);
+}
diff --git a/styles.css b/styles.css
@@ -0,0 +1,134 @@
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  font-family: Arial, sans-serif;
+}
+
+body {
+  background: linear-gradient(135deg, #28313b, #485461);
+  color: #f5f5f5;
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+
+.header {
+  text-align: center;
+  padding: 2rem;
+  background-color: #333;
+}
+
+.title {
+  font-size: 2.5rem;
+  color: #00c6ff;
+}
+
+.subtitle {
+  font-size: 1.2rem;
+  color: #ffb74d;
+}
+
+.main-content {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-grow: 1;
+  padding: 2rem;
+}
+
+.validation-container {
+  background-color: rgba(255, 255, 255, 0.1);
+  padding: 2rem;
+  border-radius: 10px;
+  width: 100%;
+  max-width: 500px;
+  text-align: center;
+  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
+}
+
+.phone-icon {
+  width: 60px;
+  margin-bottom: 1rem;
+}
+
+.form-group {
+  margin-bottom: 1.5rem;
+}
+
+.dropdown,
+.input-field {
+  width: 100%;
+  padding: 0.5rem;
+  font-size: 1rem;
+  border: 1px solid #ddd;
+  border-radius: 5px;
+  margin-top: 0.5rem;
+  color: #333;
+}
+
+.input-field::placeholder {
+  color: #888;
+}
+
+.button-group {
+  display: flex;
+  justify-content: space-between;
+  gap: 1rem;
+  margin-top: 1.5rem;
+}
+
+.btn {
+  padding: 0.7rem 1.5rem;
+  font-size: 1rem;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  transition: background 0.3s;
+}
+
+.primary-btn {
+  background-color: #1e90ff;
+  color: #fff;
+}
+
+.primary-btn:hover {
+  background-color: #00bfff;
+}
+
+.secondary-btn {
+  background-color: #ff6b6b;
+  color: #fff;
+}
+
+.secondary-btn:hover {
+  background-color: #ff4757;
+}
+
+.results-div {
+  margin-top: 1.5rem;
+  padding: 1rem;
+  background-color: rgba(0, 0, 0, 0.2);
+  border-radius: 5px;
+  font-size: 1.1rem;
+}
+
+.footer {
+  background-color: #333;
+  color: #ddd;
+  text-align: center;
+  padding: 1rem;
+}
+
+.footer p {
+  margin: 0.5rem 0;
+}
+
+.contact-info a {
+  color: #00c6ff;
+  text-decoration: none;
+}
+
+.contact-info a:hover {
+  color: #00a8cc;
+}