diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..57502a6
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,120 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+.pnpm-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+web_modules/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+.env.test
+.env.production
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
+
+# Next.js build output
+.next
+out
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and not Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test
+
+# yarn v2
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+.pnp.*
+
+# End of https://mrkandreev.name/snippets/gitignore-generator/#Node
\ No newline at end of file
diff --git a/index.html b/index.html
index 641ae95..8255457 100644
--- a/index.html
+++ b/index.html
@@ -18,6 +18,8 @@
+
+
@@ -370,7 +372,8 @@ Contact Us!
-
+
+
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..6fd602f
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,31 @@
+{
+ "name": "AgriLearnNetwork",
+ "lockfileVersion": 3,
+ "requires": true,
+ "packages": {
+ "": {
+ "dependencies": {
+ "sweetalert": "^2.1.2"
+ }
+ },
+ "node_modules/es6-object-assign": {
+ "version": "1.1.0",
+ "resolved": "https://registry.npmjs.org/es6-object-assign/-/es6-object-assign-1.1.0.tgz",
+ "integrity": "sha512-MEl9uirslVwqQU369iHNWZXsI8yaZYGg/D65aOgZkeyFJwHYSxilf7rQzXKI7DdDuBPrBXbfk3sl9hJhmd5AUw=="
+ },
+ "node_modules/promise-polyfill": {
+ "version": "6.1.0",
+ "resolved": "https://registry.npmjs.org/promise-polyfill/-/promise-polyfill-6.1.0.tgz",
+ "integrity": "sha512-g0LWaH0gFsxovsU7R5LrrhHhWAWiHRnh1GPrhXnPgYsDkIqjRYUYSZEsej/wtleDrz5xVSIDbeKfidztp2XHFQ=="
+ },
+ "node_modules/sweetalert": {
+ "version": "2.1.2",
+ "resolved": "https://registry.npmjs.org/sweetalert/-/sweetalert-2.1.2.tgz",
+ "integrity": "sha512-iWx7X4anRBNDa/a+AdTmvAzQtkN1+s4j/JJRWlHpYE8Qimkohs8/XnFcWeYHH2lMA8LRCa5tj2d244If3S/hzA==",
+ "dependencies": {
+ "es6-object-assign": "^1.1.0",
+ "promise-polyfill": "^6.0.2"
+ }
+ }
+ }
+}
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..a4db7d8
--- /dev/null
+++ b/package.json
@@ -0,0 +1,5 @@
+{
+ "dependencies": {
+ "sweetalert": "^2.1.2"
+ }
+}
diff --git a/script.js b/script.js
index 57b5fc0..bacc315 100644
--- a/script.js
+++ b/script.js
@@ -117,38 +117,50 @@ form.addEventListener('submit', (event) => {
const mobileNumber = form.querySelector('input[placeholder="Mobile Number"]').value.trim();
const emailSubject = form.querySelector('input[placeholder="Email Subject"]').value.trim();
const message = form.querySelector('textarea').value.trim();
-
+ // const alertBox = document.getElementById('alertBox');
+ // alertBox.classList.remove('hidden');
// Validation
- if (!fullName) {
- alert('Please enter your full name.');
+ const nameRegex = /^[A-Za-z]{2,50}(?: [A-Za-z]{2,50})*$/;
+ if (!nameRegex.test(fullName)) {
+ swal({
+ title: "Custom Styled Alert",
+ text: "This alert has been styled with custom CSS.",
+ icon: "info",
+ button: "Awesome!"
+ })
+ swal("Try Again!","Please enter your full name.","warning");
return;
}
- const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
- if (!emailPattern.test(email)) {
- alert('Please enter a valid email address.');
+ const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+ if (!emailRegex.test(email)) {
+ swal("Try Again!","Please enter a valid email.","warning");
return;
}
- const mobilePattern = /^\d+$/;
- if (!mobilePattern.test(mobileNumber)) {
- alert('Please enter a valid mobile number.');
+ const mobileRegex = /^\+?(\d{1,3})?[-.\s]?(\(?\d{3,4}\)?[-.\s]?)?\d{3}[-.\s]?\d{3,4}$/;
+ if (!mobileRegex.test(mobileNumber)) {
+ swal("Try Again!","Please enter a valid mobile number.","warning");
return;
}
- if (!emailSubject) {
- alert('Please enter the email subject.');
+ const emailSubjectRegex = /^[\w\s\p{P}]{10,90}$/;
+ if (!emailSubjectRegex.test(emailSubject)) {
+ swal("Try Again!","Please enter email subject.","warning");
return;
}
if (!message) {
- alert('Please enter your message.');
+ swal("Try Again!","Please enter your message.","warning");
return;
}
// form reset
- form.reset();
- alert('Your message has been sent. Thank you!');
+ else {
+ form.reset();
+ swal("Message received!", "We will get back to you in no time.","success");
+
+ }
});
diff --git a/style.css b/style.css
index 05d63fa..2d1a3d4 100644
--- a/style.css
+++ b/style.css
@@ -11,6 +11,26 @@
font-family: "Playfair Display", serif;
}
+/* Customizing the title */
+.swal-title {
+ color: #000000 !important; /* Change title color */
+}
+
+/* Customizing the text */
+.swal-text {
+ color: #000000 !important; /* Change text color */
+}
+
+/* Customizing the button */
+.swal-button {
+ background-color:#053314 !important; /* Change button background color */
+ color: #ffffff !important; /* Change button text color */
+}
+
+/* Customizing the button on hover */
+.swal-button:hover {
+ background-color:#0e4b16 !important; /* Change button hover background color */
+}
:root {
--bg-color: #053314;
--second-color: #064b10;