rodude123/my-portfolio
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added in error hovering to the form and fixed some warnings

Browse Source
This commit is contained in:
Rohit Pai
2022-01-11 19:51:53 +00:00
parent 4e7eaa4990
commit 4764deb58f
11 changed files with 355 additions and 126 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/api/index.php
+6 -4
View File
@@ -102,7 +102,7 @@ $app->post('/contact', function (Request $request, Response $response)
$headers1 .= "Content-Type: text/html; charset=UTF-8\r\n";
$message1 = "
<html>
<html lang=\"en\">
<head>
<title>{$data['subject']}</title>
<style>
@@ -163,6 +163,7 @@ $app->post('/contact', function (Request $request, Response $response)
<td>{$data['lName']}</td>
<td><a href=\"mailto:{$data['email']}\">{$data['email']}</a></td>
<td>{$data['subject']}</td>
<td>{$data['message']}</td>
</tr>
</table>
<br>
@@ -181,7 +182,7 @@ $app->post('/contact', function (Request $request, Response $response)
$headers2 .= "Content-Type: text/html; charset=UTF-8\r\n";
$message2 = "
<html>
<html lang=\"en\">
<head>
<title>{$data['subject']}</title>
<style>
@@ -226,7 +227,7 @@ $app->post('/contact', function (Request $request, Response $response)
</style>
</head>
<body>
<p>{data['fName']} {data['lName']} filled in the form on the website, here is what they sent.</p>
<p>{$data['fName']} {$data['lName']} filled in the form on the website, here is what they sent.</p>
<table>
<thead>
<th>Firstname</th>
@@ -240,6 +241,7 @@ $app->post('/contact', function (Request $request, Response $response)
<td>{$data['lName']}</td>
<td><a href=\"mailto:{$data['email']}\">{$data['email']}</a></td>
<td>{$data['subject']}</td>
<td>{$data['message']}</td>
</tr>
</table>
</body>
@@ -250,4 +252,4 @@ $app->post('/contact', function (Request $request, Response $response)
return $response->withStatus(201);
});
$app->run();
$app->run();
src/css/contact.css
+103 -1
View File
@@ -63,7 +63,7 @@ div#sayHello #contactForm{
#contactForm .flName {
display: flex;
flex-direction: row;
gap: 1;
gap: 1em;
}
#contactForm .formControl {
@@ -107,3 +107,105 @@ div#sayHello #contactForm{
#contactForm .formControl input:not([type="submit"]) {
height: 3em;
}
#contactForm .flName {
display: flex;
flex-direction: row;
gap: 1em;
}
#contactForm .formControl {
width: 100%;
}
#contactForm input[type="submit"] {
margin-top: 1em;
align-self: flex-start;
}
#contactForm .formControl input:not([type="submit"]), #contactForm .formControl textarea {
width: 100%;
border: 4px solid var(--primaryDefault);
background: none;
outline: none;
-webkit-border-radius: 1em;
-moz-border-radius: 1em;
border-radius: 0.5em;
padding: 0 0.5em;
}
#contactForm .formControl textarea {
padding: 0.5em;
}
#contactForm .formControl input:not([type="submit"]).invalid:invalid, #contactForm .formControl textarea.invalid:invalid {
border: 4px solid var(--errorDefault);
}
#contactForm .formControl input:not([type="submit"]).invalid:invalid:focus, #contactForm .formControl textarea.invalid:invalid:focus {
border: 4px solid var(--errorHover);
box-shadow: 0 4px 2px 0 var(--mutedBlack);
}
#contactForm .formControl input:not([type="submit"]):focus, #contactForm .formControl textarea:focus {
border: 4px solid var(--primaryHover);
}
#contactForm .formControl input:not([type="submit"]) {
height: 3em;
}
div.message {
background: var(--primaryDefault);
color: #FFFFFF;
padding: 0.5em 0.8em;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
display: flex;
justify-content: center;
align-items: center;
align-self: flex-start;
flex-direction: row-reverse;
position: relative;
height: 75px;
visibility: visible;
overflow: hidden;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
opacity: 1;
margin-top: 1em;
}
div.message.error {
background: var(--errorDefault);
}
div.message button {
border: none;
background: none;
outline: none;
cursor: pointer;
color: #FFFFFF;
font-size: 1.25rem;
margin-top: -5px;
position: absolute;
transform: translate(0, 0);
transform-origin: 0 0;
right: 10px;
top: 10px;
}
div.message.hidden {
opacity: 0;
visibility: hidden;
height: 0;
}
div.message button:hover {
text-shadow: -1px 2px var(--mutedBlack);
}
src/css/main.css
+2 -1
View File
@@ -18,7 +18,8 @@
--primaryDefault: hsla(var(--mainHue), var(--mainSat), var(--mainLight), 1);
--primaryHover: hsla(var(--mainHue), var(--mainSat), calc(var(--mainLight) - 10%), 1);
--timelineItemBrdr: hsla(var(--mainHue), var(--mainSat), calc(var(--mainLight) - 20%), 1);
--errorDefault: hsla(0, var(--mainSat), var(--mainLight), 1);
--errorDefault: hsla(0, calc(var(--mainSat) + 10%),calc(var(--mainLight) + 10%), 1);
--errorHover: hsla(0, calc(var(--mainSat) + 10%), calc(var(--mainLight) - 10%), 1);
--grey: hsla(0, 0%, 39%, 1);
--notAvailableDefault: hsla(0, 0%, 39%, 1);
--notAvailableHover: hsla(0, 0%,32%, 1);
src/index.html
+12 -7
View File
@@ -8,7 +8,6 @@
<title>Rohit Pai - Portfolio</title>
<link rel="stylesheet" href="css/main.css">
<script src="https://kit.fontawesome.com/ed3c25598e.js" crossorigin="anonymous"></script>
<script src="js/main.js"></script>
</head>
<body>
<header>
@@ -122,28 +121,33 @@
</div>
<div id="sayHello">
<h1>say hello</h1>
<form action="" id="contactForm">
<form action="" id="contactForm" method="POST">
<div class="flName">
<div class="formControl">
<label for="fName">First Name</label>
<input type="text" name="fName" id="fName">
<input type="text" name="fName" id="fName" placeholder="John" required>
</div>
<div class="formControl">
<label for="lName">Last Name</label>
<input type="text" name="lName" id="lName">
<input type="text" name="lName" id="lName" placeholder="Doe" required>
</div>
</div>
<div class="formControl">
<label for="email">Email</label>
<input type="email" id="email" name="email">
<input type="email" id="email" name="email" onchange="(this.value.length !== 0) ? this.classList.add('invalid') : this.classList.remove('invalid');" placeholder="john.doe@example.com" required>
</div>
<div class="formControl">
<label for="subject">Subject</label>
<input type="text" name="subject" id="subject"/>
<input type="text" name="subject" id="subject" placeholder="Something very important..." required/>
</div>
<div class="formControl">
<label for="message">Message</label>
<textarea name="message" id="message" cols="30" rows="10"></textarea></div>
<textarea name="message" id="message" cols="30" rows="10" placeholder="Heyyy!" required></textarea>
</div>
<div class="message hidden" id="contactError">
<button class="close" type="button">&times;</button>
<div></div>
</div>
<input type="submit" class="btn btnPrimary boxShadowIn boxShadowOut" value="Say Hello">
</form>
</div>
@@ -154,5 +158,6 @@
<button class="goBackToTop"></button>
</footer>
</main>
<script src="js/main.js"></script>
</body>
</html>
src/js/main.js
+29 -57
View File
@@ -214,6 +214,10 @@ document.addEventListener('DOMContentLoaded', () =>
getProjectData();
});
// contact error message
document.querySelector("#contactError .close").addEventListener("click", () =>
document.querySelector("#contactError").classList.toggle("hidden"));
// contact form
document.querySelector("#contactForm").addEventListener("submit", e =>
{
@@ -225,61 +229,29 @@ document.querySelector("#contactForm").addEventListener("submit", e =>
contactData.append("subject", document.querySelector("#subject").value);
contactData.append("message", document.querySelector("#message").value);
if (document.querySelector("#fName").value.length == 0)
{
document.querySelector("#fName").classList.add("invalid");
// please fill out all the fields
return;
}
else
{
document.querySelector("#fName").classList.remove("invalid");
}
if (document.querySelector("#lName").value.length == 0)
{
document.querySelector("#lName").classList.add("invalid");
// please fill out all the fields
return;
}
else
{
document.querySelector("#lName").classList.remove("invalid");
}
if (document.querySelector("#email").value.length == 0)
{
document.querySelector("#email").classList.add("invalid");
// please fill out all the fields
return;
}
else
{
document.querySelector("#email").classList.remove("invalid");
}
if (document.querySelector("#subject").value.length == 0)
{
document.querySelector("#subject").classList.add("invalid");
// please fill out all the fields
return;
}
else
{
document.querySelector("#subject").classList.remove("invalid");
}
if (document.querySelector("#message").value.length == 0)
{
document.querySelector("#message").classList.add("invalid");
// please fill out all the fields
return;
}
else
{
document.querySelector("#message").classList.remove("invalid");
}
const fields = ['#fName', '#lName', '#email', '#subject', '#message'];
let invalid = false;
fields.forEach(field => {
const element = document.querySelector(field);
if (element.value.length === 0) {
element.classList.add("invalid");
invalid = true;
} else {
element.classList.remove("invalid")
document.querySelector("#contactError").classList.remove("error");
}
});
if (invalid)
{
// show error message
document.querySelector("#contactError").classList.add("error");
document.querySelector("#contactError").classList.remove("hidden");
document.querySelector("#contactError div").innerText = "Please fill out all fields.";
return;
}
fetch("/api/contact",
{
method: "POST",
@@ -288,8 +260,8 @@ document.querySelector("#contactForm").addEventListener("submit", e =>
{
if(res.ok)
{
// show message box
}
document.querySelector("#contactError").classList.remove("hidden");
document.querySelector("#contactError div").innerText = "Thanks for contacting me, I will get back to you as soon as possible.";
}
});
});