From d893741ee1db854b7e35e82b06ebc004b15b7a9c Mon Sep 17 00:00:00 2001 From: Jash Date: Thu, 2 Oct 2025 11:10:21 +0530 Subject: [PATCH 1/2] Added a phone number input in contact form --- BasicContactForm/README.md | 39 ++++++++++++++++++++++ BasicContactForm/app.js | 35 ++++++++++++++++++++ BasicContactForm/index.html | 44 +++++++++++++++++++++++++ BasicContactForm/style.css | 65 +++++++++++++++++++++++++++++++++++++ 4 files changed, 183 insertions(+) create mode 100644 BasicContactForm/README.md create mode 100644 BasicContactForm/app.js create mode 100644 BasicContactForm/index.html create mode 100644 BasicContactForm/style.css diff --git a/BasicContactForm/README.md b/BasicContactForm/README.md new file mode 100644 index 000000000..61c2eabac --- /dev/null +++ b/BasicContactForm/README.md @@ -0,0 +1,39 @@ +

Basic Contact Form

+ +

A Basic Contact Form written in HTML, CSS and JAVASCRIPT .

+ +### Use of the Project: + +

This basic contact form can be added to any website to make it attractive.

+ +

Used Technologies

+ + +#### Steps to Use: + +--- + +- Download or clone the repository + +``` +git clone https://github.com/Ayushparikh-code/Web-dev-mini-projects.git +``` + +- Go to the directory +- Run the index.html file +- Result is here!!! + +

Screenshot:

+Screenshot (19) + + +

Demo

+ +Demo + +
+ diff --git a/BasicContactForm/app.js b/BasicContactForm/app.js new file mode 100644 index 000000000..775d69833 --- /dev/null +++ b/BasicContactForm/app.js @@ -0,0 +1,35 @@ +let sendButton = document.getElementById('send'); +let resetButton = document.getElementById('reset'); +let form = document.getElementById('form'); + + +form.addEventListener('submit', function (e) { + e.preventDefault(); +}) + +resetButton.addEventListener('click', function () { + let name = document.getElementById('name'); + let email = document.getElementById('email'); + let message = document.getElementById('message'); + + name.value = ''; + email.value = ''; + message.value = ''; +}) + +sendButton.addEventListener('click', function (e) { + let name = document.getElementById('name'); + let email = document.getElementById('email'); + let message = document.getElementById('message'); + + name = name.value; + localStorage.setItem('name', name); + + email = email.value; + localStorage.setItem('email', email); + + message = message.value; + localStorage.setItem('message', message); + +}) + diff --git a/BasicContactForm/index.html b/BasicContactForm/index.html new file mode 100644 index 000000000..bd09ac895 --- /dev/null +++ b/BasicContactForm/index.html @@ -0,0 +1,44 @@ + + + + + + + + + Contact Form + + + +
+

Please Contact me

+
+
+ +
+
+
+ +
+
+
+ +
+
+
+ +
+
+
+ +
+
+ +
+
+
+ + + + + diff --git a/BasicContactForm/style.css b/BasicContactForm/style.css new file mode 100644 index 000000000..edd41c01b --- /dev/null +++ b/BasicContactForm/style.css @@ -0,0 +1,65 @@ +form { + background-color: black; + width: 500px; + border-radius: 25px; + height: 400px; + padding: 25px; + font-family: Arial, Helvetica, sans-serif; + box-sizing: border-box; + margin: 50px auto 50px; + +} + +form h1 { + color: white; + text-align: center; + font-size: 22px; +} + +label { + color: rgb(43, 134, 209); + font-weight: bold; + padding-bottom: 5px; + padding-top: 15px; + display: inline-block; +} + +input, +textarea { + box-sizing: border-box; + width: 450px; + height: 30px; + padding-left: 5px; + font-family: Arial, Helvetica, sans-serif; +} + +textarea { + height: 50px; +} + +#buttons-row { + display: flex; + justify-content: space-evenly; +} + +button { + flex-grow: 1; + width: 125px; + margin: 25px; + border: none; + border-radius: 15px; + height: 35px; + font-size: 20px; + margin-top: 35px; +} + +button#send { + background-color: rgb(211, 59, 59); + color: white; +} + +button#reset { + background-color: rgb(253, 253, 54); + color: black; +} + From 974ccaeaf6235d0456f6d99a2dab0a4e5179a6d2 Mon Sep 17 00:00:00 2001 From: Jash Date: Thu, 2 Oct 2025 11:17:03 +0530 Subject: [PATCH 2/2] Added a phone number input in contact form --- BasicContactForm/index.html | 2 +- BasicContactForm/style.css | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/BasicContactForm/index.html b/BasicContactForm/index.html index bd09ac895..30ba555da 100644 --- a/BasicContactForm/index.html +++ b/BasicContactForm/index.html @@ -18,7 +18,7 @@

Please Contact me


- +

diff --git a/BasicContactForm/style.css b/BasicContactForm/style.css index edd41c01b..45bead8df 100644 --- a/BasicContactForm/style.css +++ b/BasicContactForm/style.css @@ -6,7 +6,7 @@ form { padding: 25px; font-family: Arial, Helvetica, sans-serif; box-sizing: border-box; - margin: 50px auto 50px; + margin: 50px auto; }