Add MLH Build Day Website

src/events/mlh-build-day/components/countdown.js

@@ -0,0 +1,67 @@
+import React, { Component } from 'react';
+
+class Countdown extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      days: 0,
+      hours: 0,
+      minutes: 0,
+      seconds: 0,
+    };
+  }
+
+  componentWillMount() {
+    this.getTimeUntil(this.props.deadline);
+  }
+
+  componentDidMount() {
+    setInterval(() => this.getTimeUntil(this.props.deadline), 1000);
+  }
+
+  leading(num) {
+    return num < 10 ? '0' + num : num;
+  }
+
+  getTimeUntil(deadline) {
+    const time = Date.parse(deadline) - Date.parse(new Date());
+    if(time < 0) {
+      this.setState({ days: 0, hours: 0, minutes: 0, seconds: 0 });
+
+    } else {
+      const seconds = Math.floor((time/1000)%60);
+      const minutes = Math.floor((time/1000/60)%60);
+      const hours = Math.floor((time/(1000*60*60))%24);
+      const days = Math.floor(time/(1000*60*60*24));
+
+      this.setState({ days, hours, minutes, seconds });
+    }
+
+  }
+
+  render() {
+    return(
+      <section id="counter" className="d-flex align-items-center">
+        <div className="row m-0 w-100">
+          <div className="part p-4 col-6 col-md-3">
+            {this.leading(this.state.days)}
+            <span>Days</span>
+          </div>
+          <div className="part p-4 col-6 col-md-3">
+            {this.leading(this.state.hours)}
+            <span>Hours</span>
+          </div>
+          <div className="part p-4 col-6 col-md-3">
+            {this.leading(this.state.minutes)}
+            <span>Minutes</span>
+          </div>
+          <div className="part p-4 col-6 col-md-3">
+            {this.leading(this.state.seconds)}
+            <span>Seconds</span>
+          </div>
+        </div>
+      </section>
+    );
+  }
+}
+export default Countdown;

src/events/mlh-build-day/components/footer.js

@@ -0,0 +1,23 @@
+import React from "react"
+import Github from '../images/github.png'
+import MLH from "../images/mlh-logo-white.png"
+
+const Footer = () => {
+  return(
+    <div id="footer">
+      <div className="py-4 text-center text-light">Thank You</div>
+      <div id="footer-logos" className="row m-0">
+        <div className="container d-flex justify-content-center">
+          <a href="https://mlh.io/">
+            <img className="p-2" src={MLH} alt="MLH" />
+          </a>
+          <a href="https://github.com/">
+            <img className="px-2" src={Github} alt="Github" />
+          </a>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default Footer

src/events/mlh-build-day/components/header.js

@@ -0,0 +1,102 @@
+import React from "react"
+import amFOSSLogo from "../../../images/amfoss_logo.png"
+import amritaLogo from "../../../images/amrita_logo.png"
+import LocalHackDay from "../images/localhackday.svg"
+import Particles from "react-particles-js"
+
+const Header = () => {
+  return (
+    <>
+      <div id="header-area">
+        <Particles
+          canvasClassName="particleBg"
+          params={{
+            "particles": {
+              "number": {
+                "value": 400,
+                "density": {
+                  "enable": false
+                }
+              },
+              "size": {
+                "value": 3,
+                "random": true,
+                "anim": {
+                  "speed": 10,
+                  "size_min": 0.3
+                }
+              },
+              "line_linked": {
+                "enable": false
+              },
+              "move": {
+                "random": true,
+                "speed": 3,
+                "direction": "down",
+                "out_mode": "out"
+              }
+            },
+            "interactivity": {
+              "events": {
+                "onhover": {
+                  "enable": true,
+                  "mode": "bubble"
+                },
+                "onclick": {
+                  "enable": true,
+                  "mode": "repulse"
+                }
+              },
+              "modes": {
+                "bubble": {
+                  "distance": 50,
+                  "duration": 2,
+                  "size": 0,
+                  "opacity": 0
+                },
+                "repulse": {
+                  "distance": 40,
+                  "duration": 4
+                }
+              }
+            }
+          }}
+        />
+        <div id="top-bar" className="row m-0 p-4">
+          <div className="col-6">
+            <a href="https://amfoss.in">
+              <img alt="amFOSS Logo" className="amFOSSLogo" src={amFOSSLogo}/>
+            </a>
+          </div>
+          <div className="col-6 text-right">
+            <a href="https://www.amrita.edu/">
+              <img alt="Amrita Logo" className="amritaLogo" src={amritaLogo}/>
+            </a>
+          </div>
+        </div>
+        <div className="header-title d-flex align-items-center justify-content-center">
+          <div className="row m-0 w-100">
+            <div className="col-xl-12 col-lg-12 text-center p-0">
+              <img className="mlh-Logo" src={LocalHackDay} />
+            </div>
+            <div className="col-sm-12">
+              <div className="d-flex align-items-center text-lg-left text-center justify-content-center h-100">
+                <div>
+                  <h1>Amritapuri</h1>
+                  <h3 className="d-flex align-items-center text-center justify-content-center h-100">December 15th 2019</h3>
+                  <div className="text-center">
+                    <button className="button" style={{backgroundColor: 'white'}}>
+                      <a href="#registration-form" style={{color: 'black', textDecoration: 'none'}}>REGISTER NOW</a>
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}
+
+export default Header;

src/events/mlh-build-day/components/registration.js

@@ -0,0 +1,178 @@
+import React, { useState } from "react"
+import dataFetch from "../../../utils/dataFetch"
+
+const Registration = () => {
+  const [name, setName] = useState("");
+  const [email, setEmail] = useState("")
+  const [phone, setPhone] = useState("")
+  const [gender, setGender] = useState("")
+  const [roll , setRoll] = useState("")
+  const [errorText, setErrorText] = useState("")
+  const [successText, setSuccessText] = useState("")
+  const [loading, setLoading] = useState(false)
+
+  const query=`
+  mutation submitApplication($name: String!, $email: String!, $phone: String!, $formData: JSONString!){
+  submitApplication(
+    name: $name, 
+    email: $email,
+    phone: $phone,
+    formID: 4,
+    formData: $formData
+  )
+  {
+    id
+  }
+}
+`;
+
+  const submitForm = async variables =>
+    dataFetch({ query, variables });
+
+  const register = () => {
+    const emailRegex = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
+    const phoneRegex = /^\d{10}$/;
+    const rollRegex = /^AM[.]EN[.]U4(CSE|AIE|ECE|EAC|ELC|EEE|ME)[1][6-9][\d][\d][\d]$/;
+    if (name === '' || roll === '' || phone === '' || email === '' || gender === '') {
+      setLoading(false)
+      setErrorText("Please Fill All the Fields")
+    } else if (emailRegex.test(email) === false) {
+      setLoading(false)
+      setErrorText( "Enter Proper Email")
+    } else if (phoneRegex.test(phone) === false) {
+      setLoading(false)
+      setErrorText( "Enter Proper Phone No")
+    } else if (rollRegex.test(roll.toUpperCase()) === false) {
+      setErrorText("Enter Amrita Roll Number in proper format - AM.EN.U4XXX00000")
+      setLoading(false)
+    } else {
+      const json = { 'gender': gender, "rollNo": roll }
+      const variables = { name, email, phone, formData: JSON.stringify(json) }
+     submitForm(variables).then(r=>{
+       if (Object.prototype.hasOwnProperty.call(r, "errors")) {
+         setErrorText(r.errors[0].message)
+       } else {
+         setSuccessText(r.data.id)
+         setErrorText("")
+       }
+     })
+    }
+  }
+  return (
+    <section id="registration-form">
+      <div className="row m-0">
+        <div className="col-md-2" />
+        <div className="col-md-8 p-4 d-flex align-items-center">
+          { !loading ?
+            (
+              <div>
+                <h2 className="my-4">
+                  Register <span>Now</span></h2>
+                <p className="text-dark">
+                  Sign up for the meet-up for free by filling up the form below,
+                  and make sure you do that fast as we have limited seats to fit you
+                  all in! Also, don't forget to bring in your friends as well :)
+                </p>
+                <p style={{ color: 'red'}}>* Meetup only open for students of Amritapuri Campus</p>
+                <form
+                  className="form-group"
+                  onSubmit={e => {
+                    setLoading(true);
+                    register();
+                    e.preventDefault();
+                  }}>
+                  <div className="row">
+                    <div className="col-12 p-0">
+                      <div className="m-2">
+                        <input
+                          type="text"
+                          placeholder="Enter Full Name"
+                          name="name"
+                          className="form-control"
+                          onChange={e => setName(e.target.value)}
+                        />
+                      </div>
+                    </div>
+                    <div className="col-sm-6 p-0">
+                      <div className="m-2">
+                        <input
+                          type="text"
+                          placeholder="Enter Roll Number"
+                          name="Roll No"
+                          className="form-control"
+                          onChange={e => setRoll(e.target.value)}
+                        />
+                      </div>
+                    </div>
+                    <div className="col-sm-6 p-0">
+                      <div className="m-2">
+                        <input
+                          type="text"
+                          placeholder="Enter Email"
+                          name="email"
+                          className="form-control"
+                          onChange={e => setEmail(e.target.value)}
+                        />
+                      </div>
+                    </div>
+                    <div className="col-sm-6 p-0">
+                      <div className="m-2">
+                        <input
+                          type="text"
+                          placeholder="Enter Phone"
+                          name="phoneno"
+                          className="form-control"
+                          onChange={e => setPhone(e.target.value)}
+                        />
+                      </div>
+                    </div>
+                    <div className="col-sm-6 p-0">
+                      <div className="m-2">
+                        <select className="form-control text-light" onChange={e => setGender(e.target.value)}>
+                          <option value="" hidden disabled selected>Select Gender</option>
+                          <option value="male">Male</option>
+                          <option value="female">Female</option>
+                        </select>
+                      </div>
+                    </div>
+                    <div className="col-sm-6 p-0">
+                      <div className="m-2" />
+                    </div>
+                    <div className="col-12 form-check">
+                      <div className="m-2 text-dark text-center d-flex justify-content-center">
+                        <label className="form-check-label text-dark" htmlFor="undertaking">
+                          By submitting this application, I agree to the <a href="#" className="text-dark">Code of Conduct</a> & <a href="#" className="text-dark">Privacy Policy</a> of the organizers.
+                        </label>
+                      </div>
+                    </div>
+                    {
+                      errorText !== '' ?
+                        <div className="w-100 w-100 text-center m-2 alert alert-danger" role="alert">
+                          {errorText}
+                        </div> : null
+                    }
+                    <div className="col-12 p-0 text-center text-md-right">
+                      <div className="m-2">
+                        <button
+                          type="submit"
+                          className="button btn-block px-4"
+                        >
+                          REGISTER
+                        </button>
+                      </div>
+                    </div>
+                  </div>
+                </form>
+              </div>) : successText !== '' ? (<div className="alert alert-success">
+                Thank You! You have successfully signed up for the event.
+                We will get back to soon, meanwhile dont forget to bring your friends as well!
+              </div>) :
+              <div className="alert alert-warning">Submitting. Please Wait</div>
+          }
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export default Registration