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

  1. Basic layout was sketched out and raw data was collected to be put up
  2. Pictures were post processed on Photoshop and some vectors were created using Illustrator
  3. HTML layout and simultaneous styling in CSS
  4. Responsiveness of the website was looked upon
  5. Some more Graphic improvisations
  6. Contact Us form was built
  7. Vigorous testing and debugging of php and .js files
  8. 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:

<?php
 
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:

  1. RSVP Form for the upcoming event
  2. Responsive design displaying past events organized by the CC of IIIT-Delhi
  3. Countdown for the next event by the CC at IIIT-Delhi
  4. Calendar of all events in the semester
  5. Facebook news feed
  6. Links to the associated clubs
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License