diff --git a/15. Form Validation/README.md b/15. Form Validation/README.md new file mode 100644 index 0000000..6de6945 --- /dev/null +++ b/15. Form Validation/README.md @@ -0,0 +1,131 @@ +# Form validation _(HTML, CSS, Js)_ +![alt text](https://github.com/AkashKobal/web-development/blob/main/15.%20Form%20Validation/output.png) + +## _HTML_ +```html + + + + + + + Form validation + + + + + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+ +
+ + +``` + +## _Javascript_ +```js +let name = document.getElementById("name"); +let email = document.getElementById("email"); +let phoneNo = document.getElementById("phoneNo"); +let message = document.getElementById("message"); + +function phoneNumber() { + let phoneNoLength = phoneNo.value; + if (phoneNoLength.length > 10 || phoneNoLength.length < 10) { + alert("Invalid phone number"); + } + else if (phoneNo.type !== "number") { + alert("Invalid phone number"); + } + else { + textArea(); + } +} + +function textArea() { + let messageLength = message.value; + if (messageLength.length > 250) { + alert("Message should be less than 250 characters"); + } +} +``` +## _CSS_ +```css +.colorful-form { + max-width: 400px; + margin: 0 auto; + padding: 20px; + background-color: #f5f5f5; + border-radius: 10px; + +} + +.form-group { + margin-bottom: 20px; +} + +.form-label { + display: block; + font-weight: bold; + margin-bottom: 5px; + color: #333; +} + +.form-input { + width: 100%; + padding: 10px; + border: none; + background-color: #fff; + color: #333; + border-radius: 5px; +} + +textarea.form-input { + height: 100px; +} + +.form-button { + display: block; + width: 100%; + padding: 10px; + background-color: #ff6f69; + color: #fff; + border: none; + border-radius: 5px; + cursor: pointer; + transition: background-color 0.3s ease; +} + +.form-button:hover { + background-color: #ff5f59; +} + +.colorful-form { + max-width: 420px; + margin: 0 auto; + padding: 25px; + background-color: #f5f5f5; + border-radius: 10px; + left: 50%; + margin-top: 250px; + padding-right: 40px; +} +``` + diff --git a/15. Form Validation/index.html b/15. Form Validation/index.html new file mode 100644 index 0000000..78a6497 --- /dev/null +++ b/15. Form Validation/index.html @@ -0,0 +1,34 @@ + + + + + + + Form validation + + + + + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+ +
+ + \ No newline at end of file diff --git a/15. Form Validation/output.png b/15. Form Validation/output.png new file mode 100644 index 0000000..2de79e5 Binary files /dev/null and b/15. Form Validation/output.png differ diff --git a/15. Form Validation/script.js b/15. Form Validation/script.js new file mode 100644 index 0000000..32941d9 --- /dev/null +++ b/15. Form Validation/script.js @@ -0,0 +1,24 @@ +let name = document.getElementById("name"); +let email = document.getElementById("email"); +let phoneNo = document.getElementById("phoneNo"); +let message = document.getElementById("message"); + +function phoneNumber() { + let phoneNoLength = phoneNo.value; + if (phoneNoLength.length > 10 || phoneNoLength.length < 10) { + alert("Invalid phone number"); + } + else if (phoneNo.type !== "number") { + alert("Invalid phone number"); + } + else { + textArea(); + } +} + +function textArea() { + let messageLength = message.value; + if (messageLength.length > 250) { + alert("Message should be less than 250 characters"); + } +} diff --git a/15. Form Validation/style.css b/15. Form Validation/style.css new file mode 100644 index 0000000..2bd3acf --- /dev/null +++ b/15. Form Validation/style.css @@ -0,0 +1,59 @@ +.colorful-form { + max-width: 400px; + margin: 0 auto; + padding: 20px; + background-color: #f5f5f5; + border-radius: 10px; + +} + +.form-group { + margin-bottom: 20px; +} + +.form-label { + display: block; + font-weight: bold; + margin-bottom: 5px; + color: #333; +} + +.form-input { + width: 100%; + padding: 10px; + border: none; + background-color: #fff; + color: #333; + border-radius: 5px; +} + +textarea.form-input { + height: 100px; +} + +.form-button { + display: block; + width: 100%; + padding: 10px; + background-color: #ff6f69; + color: #fff; + border: none; + border-radius: 5px; + cursor: pointer; + transition: background-color 0.3s ease; +} + +.form-button:hover { + background-color: #ff5f59; +} + +.colorful-form { + max-width: 420px; + margin: 0 auto; + padding: 25px; + background-color: #f5f5f5; + border-radius: 10px; + left: 50%; + margin-top: 250px; + padding-right: 40px; +} \ No newline at end of file diff --git a/README.md b/README.md index 2a1fff6..f4b480c 100644 --- a/README.md +++ b/README.md @@ -48,4 +48,7 @@ ## Age calculator _(HTML, CSS, Js)_ ![alt text](https://github.com/AkashKobal/web-development/blob/main/14.%20Age%20Calculator/output.png) +## Form validation _(HTML, CSS, Js)_ +![alt text](https://github.com/AkashKobal/web-development/blob/main/15.%20Form%20Validation/output.png) + diff --git a/index.html b/index.html index 32d0120..ebe3edc 100644 --- a/index.html +++ b/index.html @@ -128,6 +128,7 @@ transition-duration: 400ms; transition-property: color; padding-top: 12px; + } button:focus, @@ -162,6 +163,7 @@ margin-left: -11px; /* margin-right: 10px; */ /* background-color: #21212426; */ + } \ No newline at end of file diff --git a/left-frame.html b/left-frame.html deleted file mode 100644 index 0471564..0000000 --- a/left-frame.html +++ /dev/null @@ -1,163 +0,0 @@ - - - - - - - Web Development Projects - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - \ No newline at end of file