Skip to content
This repository has been archived by the owner on Oct 8, 2024. It is now read-only.

Commit

Permalink
Add MLH Build Day Website
Browse files Browse the repository at this point in the history
  • Loading branch information
@harshithpabbati
harshithpabbati committed Nov 20, 2019
1 parent 795ffc5 commit e1684a2
Show file tree
Hide file tree
Showing 12 changed files with 719 additions and 0 deletions.
67 changes: 67 additions & 0 deletions src/events/mlh-build-day/components/countdown.js
View file
Original file line number Diff line number Diff line change
@@ -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;
23 changes: 23 additions & 0 deletions src/events/mlh-build-day/components/footer.js
View file
Original file line number Diff line number Diff line change
@@ -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
102 changes: 102 additions & 0 deletions src/events/mlh-build-day/components/header.js
View file
Original file line number Diff line number Diff line change
@@ -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">
<a href="#registration-form" style={{color: 'black', textDecoration: 'none'}}>REGISTER NOW</a>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</>
)
}

export default Header;
178 changes: 178 additions & 0 deletions src/events/mlh-build-day/components/registration.js
View file
Original file line number Diff line number Diff line change
@@ -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: id,
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 => {
this.setState({loading: 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
Loading

0 comments on commit e1684a2

Please sign in to comment.