Aryan Barghi - Front End

interviews/App.js

@@ -0,0 +1,9 @@
+import ContactForm from './ContactForm.js';
+
+function App() {
+  return (
+    <ContactForm />
+  );
+}
+
+export default App;

interviews/ContactForm.css

@@ -0,0 +1,43 @@
+body {
+    background-color: rgb(64, 187, 125);
+}
+
+.centerBox {
+    margin: auto;
+    width: 400px;
+    height: 600px;
+    border: 1px solid black;
+    padding: 10px;
+    text-align: center;
+    background-color: #ffffff;
+    font-family: "Lucida Console", "Courier New", monospace;
+}
+
+.form {
+    margin: 0 auto;
+    width: 250px;
+}
+
+.form label{
+    display: inline-block;
+    text-align: right;
+    float: left;
+}
+
+.form input{
+    display: inline-block;
+    text-align: left;
+    float: right;
+}
+
+.messageField {
+    height: 100px;
+}
+
+.captcha {
+    transform: translate(12%, 30%);
+}
+
+.submitButton {
+    transform: translate(0, 550%);
+}

interviews/ContactForm.js

@@ -0,0 +1,66 @@
+import React from 'react';
+import './ContactForm.css';
+import GoogleCaptcha from 'react-google-recaptcha'
+
+class ContactForm extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+          buttonIsDisabled: true,
+          name: '',
+          email: '',
+          phone: '',
+          message: '',
+        };
+
+        this.handleNameChange = this.handleNameChange.bind(this);
+        this.handleEmailChange = this.handleEmailChange.bind(this);
+        this.handlePhoneChange = this.handlePhoneChange.bind(this);
+        this.handleMessageChange = this.handleMessageChange.bind(this);
+        this.handleSubmit = this.handleSubmit.bind(this);
+    }
+
+    enableButton() { document.getElementById("submitBtn").disabled = false; }
+
+    handleNameChange = (e) => { this.setState({name: e.target.value}); }
+    handleEmailChange = (e) => { this.setState({email: e.target.value}); }
+    handlePhoneChange = (e) => { this.setState({phone: e.target.value}); }
+    handleMessageChange = (e) => { this.setState({message: e.target.value}); }
+
+    handleSubmit() {
+        console.log('Name: ' + this.state.name);
+        console.log('Email: ' + this.state.email);
+        console.log('Phone: ' + this.state.phone);
+        console.log('Message: ' + this.state.message);
+    }
+
+    render() {
+        return (
+            <div className = "centerBox">
+                <div className = "form">
+                    <h1>BODYRAIN SOFTWARE SOLUTIONS</h1>
+                    <h2>Contact Form</h2>
+
+                    <h4> Name <input type="text" id="nameId" onChange={(e) => this.handleNameChange(e)} /> </h4>
+                    <h4> Email <input type="text" id="emailId" onChange={(e) => this.handleEmailChange(e)} /> </h4>
+                    <h4> Phone <input type="text" id="phoneId" onChange={(e) => this.handlePhoneChange(e)} /> </h4>
+                    <h4> Message <input type="text" className = "messageField" id="messageId" onChange={(e) => this.handleMessageChange(e)} /> </h4>
+                </div>
+
+                <div className = "captcha">
+                    <GoogleCaptcha
+                        sitekey="6Lf2TZoaAAAAALttxj9Li7-wz62EtXdZ2vZTdLKF"
+                        onChange={(event) => this.enableButton() }
+                    />
+                </div>
+
+                <div className = "submitButton">
+                    <button id="submitBtn" className = "btn btn-primary" disabled={this.state.buttonIsDisabled}> Submit </button>
+                </div>
+                <button onClick = {this.handleSubmit()}></button>
+            </div>
+        );
+    }
+}
+
+export default ContactForm;

interviews/README.md

@@ -1,21 +1,4 @@
-# Language Specific Interview Problems
-
-Your goal should be to find the most elegant solution of the below stated problem. Efficiency is important, but clarity is even
-more crucial. Some of the problems can be trivially solved using built-in functions, but the preference is to attempt to
-find your own solution.
-
-# Language Specific Interview Problems
-
-Implement "run-length encoding" data compression for a list of characters:
-
-### Example:
-
- *define:* encode(List('t, 't, 't, 't, 'b, 'c, 'c, 'a, 'a, 'd, 'r, 'r, 'r, 'r))
-
- *result:* List((4,'t), (1,'b), (2,'c), (2,'a), (1,'d), (4,'r))
-
- # Language Specific Interview Problems
-
-* Use the language specific directory(i.e.: ./scala) to implement your solution given the template provided in the form of _Solve.lang_
-* Create a PR to this repository when finished
-
+Hello! This is my attempt at the front end challenge for Headstorm.
+I haven't really worked with these technologies this in-depth, so please excuse
+me if there is anything non-conventional in my code. Thanks!
+- Aryan Barghi

interviews/index.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
+import reportWebVitals from './reportWebVitals';
+
+ReactDOM.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+  document.getElementById('root')
+);
+
+// If you want to start measuring performance in your app, pass a function
+// to log results (for example: reportWebVitals(console.log))
+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+reportWebVitals();