Cultural Committee
Introduction
About the Cultural Committee
We are responsible for organizing fun and cultural events, parties and festivities in IIIT-Delhi, and increasing students engagement in non-academic activities.
About the Website
The website is hosted here. It gives detailed information about the Cultural Committee of IIIT-Delhi and its upcoming events.
Team
Name | Work Done |
---|---|
Gurek Singh | Layout(HTML, JavaScript) and Hosting |
Azhar Tak | Content and WikiPage |
Shivam Pal | Content and Graphic Design |
Harsh Ramdasani | CSS and Bootstrap |
Mridul Sharma | PHP Mailing System |
Goal
To enlighten ourselves with HTML, CSS, JavaScript, PHP(Yes! A bit.), and Apache based web-server.
Initial Design
Aim was to build an eye-catching and responsive website for the Cultural Committee of IIIT-Delhi.
Languages, tools and templates used
- Apache web-server
- POP3 Mail Client
- HTML/CSS for Design and Layout
- JavaScript for frontend responsive design
- PHP for backend handling with Mail Client
- Bootstrap.css for column grid
- Some OSCs as templates like countdown timer etc
From start to end
- Basic layout was sketched out and raw data was collected to be put up
- Pictures were post processed on Photoshop and some vectors were created using Illustrator
- HTML layout and simultaneous styling in CSS
- Responsiveness of the website was looked upon
- Some more Graphic improvisations
- Contact Us form was built
- Vigorous testing and debugging of php and .js files
- Voila! We are done with the Website Design. Time to jot down the Wiki page.
Have a look!
at some templates and the website too-
Countdown timer:
(function($) { $.fn.countdown = function(options, callback) { thisEl = $(this); var settings = { 'date': null, 'format': null }; if(options) { $.extend(settings, options); } function countdown_proc() { eventDate = Date.parse(settings['date']) / 1000; currentDate = Math.floor($.now() / 1000); if(eventDate <= currentDate) { callback.call(this); clearInterval(interval); } seconds = eventDate - currentDate; days = Math.floor(seconds / (60 * 60 * 24)); seconds -= days * 60 * 60 * 24; hours = Math.floor(seconds / (60 * 60)); seconds -= hours * 60 * 60; minutes = Math.floor(seconds / 60); seconds -= minutes * 60; if (days == 1) { thisEl.find(".timeRefDays").text("day"); } else { thisEl.find(".timeRefDays").text("days"); } if (hours == 1) { thisEl.find(".timeRefHours").text("hour"); } else { thisEl.find(".timeRefHours").text("hours"); } if (minutes == 1) { thisEl.find(".timeRefMinutes").text("minute"); } else { thisEl.find(".timeRefMinutes").text("minutes"); } if (seconds == 1) { thisEl.find(".timeRefSeconds").text("second"); } else { thisEl.find(".timeRefSeconds").text("seconds"); } if(settings['format'] == "on") { days = (String(days).length >= 2) ? days : "0" + days; hours = (String(hours).length >= 2) ? hours : "0" + hours; minutes = (String(minutes).length >= 2) ? minutes : "0" + minutes; seconds = (String(seconds).length >= 2) ? seconds : "0" + seconds; } if(!isNaN(eventDate)) { thisEl.find(".days").text(days); thisEl.find(".hours").text(hours); thisEl.find(".minutes").text(minutes); thisEl.find(".seconds").text(seconds); } else { alert("Invalid date. Here's an example: 12 Tuesday 2012 17:30:00"); clearInterval(interval); } } countdown_proc(); interval = setInterval(countdown_proc, 1000); } }) (jQuery);
Mail form:
if(empty($_POST['name']) || empty($_POST['email']) || empty($_POST['message']) || !filter_var($_POST['email'],FILTER_VALIDATE_EMAIL)) { echo "Required fields not filled!"; return false; } $name = $_POST['name']; $email_address = $_POST['email']; $message = $_POST['message']; $to = 'mail@cult.gureksingh.in'; $email_subject = "Website Contact Form: $name"; $email_body = "\n\nName: $name\n\nEmail: $email_address\n\nMessage:\n$message"; $headers = "From: noreply@cult.gureksingh.in\n"; $headers .= "Reply-To: $email_address"; mail($to,$email_subject,$email_body,$headers); return true;
Website Mockup:
Features:
- RSVP Form for the upcoming event
- Responsive design displaying past events organized by the CC of IIIT-Delhi
- Countdown for the next event by the CC at IIIT-Delhi
- Calendar of all events in the semester
- Facebook news feed
- Links to the associated clubs
page revision: 0, last edited: 26 Oct 2015 17:45