diff --git a/README.md b/README.md index f2d817b00..d67cf75ec 100644 --- a/README.md +++ b/README.md @@ -1,9 +1,3 @@ -## Headstorm Interview - -Welcome to the Headstorm interview challenge! This repository is designed for candidates to [fork and create Pull Requests](https://help.github.com/en/articles/creating-a-pull-request-from-a-fork) with their solutions. There are two types of 'take-home' problems here: - -### Challenges -These are domain specific problems that can be submitted individually. You can choose from backend, frontend, databases, or data-science. You can submit a PR for one, many, or all the challenges. - -### Interviews -These are language specific interview questions and you can choose the language in which you implement your solution. +## front end challenge +This is my attempt for the front end challenge. I had some issues with reCAPTCHA v3, so I used v2. This was my first time using reCAPTCHA, it may not be perfect. +Would love to hear any feedback you have for me and ways I can improve. diff --git a/contact.html b/contact.html new file mode 100644 index 000000000..4a7095eb4 --- /dev/null +++ b/contact.html @@ -0,0 +1,53 @@ + + + + + + + + + + + + Contact us + + + + +
+

Contact us

+
+
+
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ + + +
+
+
+ +
+
+ +
+ + + \ No newline at end of file diff --git a/favicon-16x16.png b/favicon-16x16.png new file mode 100644 index 000000000..a31b5f6a8 Binary files /dev/null and b/favicon-16x16.png differ diff --git a/favicon-32x32.png b/favicon-32x32.png new file mode 100644 index 000000000..ee333148b Binary files /dev/null and b/favicon-32x32.png differ diff --git a/favicon.ico b/favicon.ico new file mode 100644 index 000000000..abb68dd90 Binary files /dev/null and b/favicon.ico differ diff --git a/index.html b/index.html new file mode 100644 index 000000000..58cf163c0 --- /dev/null +++ b/index.html @@ -0,0 +1,28 @@ + + + + + + + + + + + Yellowberry + + + +
+

Yellowberry


+
+ +

Eating better made simple

+ + + + + \ No newline at end of file diff --git a/scripts.js b/scripts.js new file mode 100644 index 000000000..2306d1f31 --- /dev/null +++ b/scripts.js @@ -0,0 +1,58 @@ +function validation() { + var name = document.getElementById("name").value; + var email = document.getElementById("email").value; + var phone = document.getElementById("phone").value; + var subject = document.getElementById("subject").value; + var message = document.getElementById("message").value; + var error_message = document.getElementById("error_message"); + var text; + + error_message.style.padding = "10px"; + + if(name.length <5) { + text= "Please Enter a Valid Name"; + error_message.innerHTML= text; + return false; + } + + if(isNaN(phone) || phone.length !=10) { + text= "Please Enter a Valid Number"; + error_message.innerHTML= text; + return false; + } + + if(email.indexOf("@") == -1 || email.length <6){ + text= "Please Enter a Valid Email"; + error_message.innerHTML= text; + return false; + } + + if(subject.length <6) { + text = "Please Ellaborate"; + error_message.innerHTML= text; + return false; + } + + if(message.length <= 150) { + text = "Please Enter More Than 150 Characters"; + error_message.innerHTML= text; + return false; + } + + + alert("Form was Submitted Successfully! \n We'll be in touch soon."); + return true; +} + +function submitUserForm() { + var response = grecaptcha.getResponse(); + if(response.length == 0) { + document.getElementById('g-recaptcha-error').innerHTML = 'This field is required.'; + return false; + } + return true; +} + +function verifyCaptcha() { + document.getElementById('g-recaptcha-error').innerHTML = ''; +} \ No newline at end of file diff --git a/src/style.css b/src/style.css new file mode 100644 index 000000000..8c048b1d5 --- /dev/null +++ b/src/style.css @@ -0,0 +1,112 @@ +@import url('https://fonts.googleapis.com/css2?family=Josefin+Slab:wght@100&display=swap'); + +body { + background: yellow; +} + +.logo img { + height: 10em; + display: block; + margin-left: auto; + margin-right: auto; + margin-top: 20px; + max-width: 350px; +} + +.title { + text-align: center; + padding-top: 30px; +} + +p { + text-align: center; + color: black; + font-weight: bold; +} + +a { + border-radius: 2px; + padding: 7px; + text-transform: uppercase; + top: 50%; + left: 50%; + letter-spacing: 5%; + transform: translate(-50%, -50%); + max-width: 120px; + background-color: lightgray; + display: block; + text-align: center; + position: absolute; + color: black; + font-weight: bold; + +} + +*{ + margin:0; + padding:0; + box-sizing: border-box; + outline: none; + font-family:'Josefin Slab', serif; + +} + +.wrapper { + position: absolute; + top: 50%; + left: 50%; + letter-spacing: 5%; + transform: translate(-50%, -50%); + max-width: 350px; + width: 100%; + background-color: #ffffff; + padding: 25px; + border-radius: 5px; +} + +.wrapper h1 { + text-align: center; + margin-bottom: 20px; + text-transform: uppercase; + letter-spacing: 3px; + color: black; +} + +.wrapper .input_field{ + margin-bottom: 10px; +} + +.wrapper .input_field input[type= "text"], +.wrapper textarea{ + width: 100%; + border: 1px solid #e0e0e0e0; + padding: 10px; +} + +.wrapper textarea { + height: 110px; + resize: none; +} + +.wrapper .button input[type="submit"] { + border: 0; + margin-top: 20px; + padding:10px; + width: 100%; + background: black; + color:white; + text-transform: uppercase; + letter-spacing: 5px; + font-weight: bold; + border-radius: 25px; + cursor: pointer; +} + +.wrapper #error_message { + margin-bottom: 20px; + padding: 0; + background: pink; + text-align: center; + font-size: 14px; + transition: all 0.5s ease; +} \ No newline at end of file diff --git a/src/yellowberryLogo_clear_yellow.png b/src/yellowberryLogo_clear_yellow.png new file mode 100644 index 000000000..cb9f1e28d Binary files /dev/null and b/src/yellowberryLogo_clear_yellow.png differ