Implemented the front end design and sound functionality

assets/css/index.css

@@ -0,0 +1,108 @@
+* {
+  margin: 0;
+  padding: 0;
+}
+/*********** Navigation bar *********/
+.navbar {
+  border-radius: 0px;
+  background-color: transparent;
+  border: none;
+  margin-bottom: 0;
+}
+.navbar-brand {
+  color: blue !important;
+  position: relative;
+}
+.navbar-brand span {
+  color: red;
+}
+ul {
+  float: right !important;
+}
+/*********** Content of mainArea **********/
+#mainArea {
+  position: relative;
+}
+.ibibio {
+  position: absolute;
+  top: 13em;
+  left: 20%;
+  width: 60%;
+  text-align: center;
+}
+.ibibio h1 {
+  font-size: 45px;
+  color: blue;
+  position: relative;
+}
+.ibibio h1 span {
+  color: red;
+}
+
+/*********** Buttons / forms **********/
+.btn {
+  border-radius: 0px;
+  background-color: transparent;
+  color: black;
+  border-color: #66afe9;
+}
+
+input.form-control {
+  border-radius: 0px;
+}
+
+.btn-success:hover {
+    color: #fff;
+    background-color: #66afe9;
+    border-color: #66afe9;
+}
+
+.btn-success.active.focus, .btn-success.active:focus, .btn-success.active:hover, .btn-success:active.focus, .btn-success:active:focus, .btn-success:active:hover, .open>.dropdown-toggle.btn-success.focus, .open>.dropdown-toggle.btn-success:focus, .open>.dropdown-toggle.btn-success:hover {
+    color: #fff;
+    background-color: #66afe9;
+    border-color: #66afe9;
+}
+
+.btn-success.focus, .btn-success:focus {
+    color: #fff;
+    background-color: #66afe9;
+    border-color: #66afe9;
+}
+
+#searchForm {
+  padding: 10px 0px 0px;
+  background-color: #f9f9f9;
+  border: 1px solid #d9d9d9;
+}
+
+form .col-md-8, form .col-md-4 {
+  padding: 0px;
+}
+label#valueMain-error {
+  display: none !important;
+}
+/*********** Media Query **********/
+
+@media (max-width: 768px) {
+  .ibibio {
+    padding: 0px 40px;
+    width: 100%;
+    right: 0px;
+    left: 0px;
+  }
+  ul {
+    float: left !important;
+  }
+}
+
+@media (max-width: 768px) {
+  .ibibio h1 {
+    font-size: 35px !important;
+  }
+}
+
+@media (max-width: 480px) {
+  .ibibio h1 {
+    font-size: 20px !important;
+  }
+}

assets/js/index.js

@@ -0,0 +1,85 @@
+$(document).ready(function (){
+
+  // hides the main search form
+  $('#searchForm').hide();
+  $('#contentArena').hide();
+  $('#nav-tag').hide();
+  $('#searchresult').hide();
+
+  // get the value of current search form and then display the main search form
+  $('#search').keyup(function () {
+
+    var search = $('#search').val();
+    $('#searchForm').show(function () {
+      $('#change').html("<input type='text' class='form-control' id='valueMain' name='search' value='' autofocus='true'>");
+      $('#valueMain').val(search);
+      $('#nav-tag').show(500);
+    });
+    fetchResult();
+    $('#contentArena').show();
+    $('#mainArea').hide();
+
+  });
+
+  $('#searchForm2').validate({
+    rules: {
+      "search": {required: true}
+    },
+    message: {
+      "search": ""
+    },
+    submitHandler: function(){
+      var that = $('#searchForm2'),
+          url = that.attr('action'),
+          type = that.attr('method'),
+          data = {};
+
+      that.find('[name]').each(function(index, value){
+        var that = $(this),
+            name = that.attr('name'),
+            value = that.val();
+
+        data[name] = value;
+      });
+
+      $.ajax({
+        url: 'search.php',
+        type: 'POST',
+        data: data
+      })
+
+      .done(function(data){
+        $('#getResult').html(data);
+        $('#contentArena').show();
+        // console.log(data);
+      })
+
+      .fail(function(data){
+        // console.log(data);
+      })
+
+      .always(function(data){
+        console.log("complete")
+      })
+    }
+  }); // ends search query
+
+  function fetchResult() {
+    $.ajax({
+        url: 'search.php',
+        type: 'GET',
+        dataType: 'json',
+        data: {searchMain: true}
+    })
+    .done(function(data) {
+      console.log(data);
+    })
+    .fail(function(data) {
+      console.log(data);
+    })
+    .always(function() {
+        console.log('complete');
+    });
+  }
+
+});

database/connection.php

@@ -0,0 +1,32 @@
+<?php
+
+try {
+
+  // declare variables
+  $host="localhost";
+
+  $user="root";
+
+  $password="";
+
+  $dbname = "iwebdict";
+
+  // PDO conection
+
+  $conn = new PDO("mysql:dbname=$dbname; host=$host", $user, $password);
+
+  // check if conection is established
+
+  if($conn)
+  {
+    // echo "Connected";
+  }
+
+
+} catch (Exception $e) {
+
+  echo "Problem Occured". $e->message();
+
+}
+
+?>

database/iwebdict.sql

@@ -0,0 +1,51 @@
+-- phpMyAdmin SQL Dump
+-- version 4.1.14
+-- http://www.phpmyadmin.net
+--
+-- Host: 127.0.0.1
+-- Generation Time: Jul 29, 2017 at 09:57 PM
+-- Server version: 5.6.17
+-- PHP Version: 5.5.12
+
+SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
+SET time_zone = "+00:00";
+
+
+/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
+/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
+/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
+/*!40101 SET NAMES utf8 */;
+
+--
+-- Database: `webdict`
+--
+
+-- --------------------------------------------------------
+
+--
+-- Table structure for table `contents`
+--
+
+CREATE TABLE IF NOT EXISTS `contents` (
+  `ID` int(255) NOT NULL AUTO_INCREMENT,
+  `word` varchar(255) NOT NULL,
+  `english` varchar(255) NOT NULL,
+  `meaning` text NOT NULL,
+  `sound` varchar(255) NOT NULL,
+  `domain` varchar(255) NOT NULL,
+  PRIMARY KEY (`ID`)
+) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=5 ;
+
+--
+-- Dumping data for table `contents`
+--
+
+INSERT INTO `contents` (`ID`, `word`, `english`, `meaning`, `sound`, `domain`) VALUES
+(1, 'abasi', 'God', 'The name of the Christian God.', 'sound/test.mp3', 'Religion'),
+(2, 'ekom', 'Praise', 'Praise to the Almighty God', 'sound/test.mp3', 'Religion'),
+(3, 'akam', 'Prayer', 'prayer offered to God', 'sound/test1.mp3', 'Religion'),
+(4, 'unam', 'Meat', 'the flesh of an animal', 'sound/test4.mp3', 'Market');
+
+/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
+/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
+/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

index.php

@@ -0,0 +1,109 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Local WebDictionary</title>
+    <link rel="stylesheet" href="assets/css/bootstrap.min.css" media="screen" title="no title" charset="utf-8">
+    <link rel="stylesheet" href="assets/css/font-awesome.min.css" media="screen" title="no title" charset="utf-8">
+    <link rel="stylesheet" href="assets/css/index.css" media="screen" title="no title" charset="utf-8">
+  </head>
+  <body>
+
+  <section id="nav">
+    <nav class="navbar navbar-default">
+      <div class="container-fluid">
+        <div class="navbar-header">
+          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-nav" aria-expanded="false">
+            <span class="sr-only">Toggle navigation</span>
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+          </button>
+          <a class="navbar-brand" href="index.php">
+            Ibibio Web<span>Dictionary</span>
+          </a>
+        </div>
+        <div class="collapse navbar-collapse" id="main-nav">
+          <ul class="nav navbar-nav">
+            <li><a href="#">ABOUT</a></li>
+            <li><a href="#">CONTACT</a></li>
+          </ul>
+        </div><!-- /.navbar-collapse -->
+      </div><!-- /.container-fluid -->
+    </nav>
+  </section>
+
+  <section id="searchForm">
+      <div class="container-fluid">
+        <div class="col-md-6">
+          <form class="" action="search.php" id="searchForm2" method="POST">
+            <div class="row">
+              <div class="col-xs-10 col-sm-6 col-md-8">
+                <div class="form-group" id="change">
+                  <!-- Search form displays here -->
+
+                </div>
+              </div>
+              <div class="col-xs-2 col-sm-6 col-md-4">
+                <div class="form-group">
+                  <button type="submit" class="btn btn-success" id="searchMain" name="searchMain">Search</button>
+                </div>
+              </div>
+            </div>
+          </form>
+        </div>
+      </div>
+    </section>
+
+  <section id="mainArea">
+      <div class="ibibio">
+        <h1>
+          Ibibio Web<span>Dictionary</span>
+        </h1>
+        <form action="search.php" method="post" id="searchFormMain">
+          <div class="form-group">
+            <input type="text" class="form-control" name="search" value="" id="search" placeholder="Enter Search query">
+          </div>
+          <div class="form-group">
+            <button type="button" class="btn btn-success" name="button">Search</button>
+          </div>
+          <div class="row">
+            <div class="col-xs-3 col-sm-3 col-md-3">
+              <a href="#"><p>Igbo</p></a>
+            </div>
+            <div class="col-xs-3 col-sm-3 col-md-3">
+              <a href="#"><p>Hausa</p></a>
+            </div>
+            <div class="col-xs-3 col-sm-3 col-md-3">
+              <a href="#"><p>Yoruba</p></a>
+            </div>
+            <div class="col-xs-3 col-sm-3 col-md-3">
+              <a href="#"><p>Ibibio</p></a>
+            </div>
+          </div>
+          <div class="row">
+            <p>
+              Copyright &copy; 2017
+            </p>
+          </div>
+        </form>
+      </div>
+    </section>
+
+  <section id="contentArena">
+      <div class="container-fluid">
+        <div class="col-md-7" id="getResult">
+
+        </div>
+        <div class="col-md-5">
+          <h3>Related searches</h3>
+        </div>
+      </div>
+    </section>
+
+  <script src="assets/js/jquery.min.js" charset="utf-8"></script>
+  <script src="assets/js/bootstrap.min.js" charset="utf-8"></script>
+  <script src="assets/js/jquery.validate.min.js" charset="utf-8"></script>
+  <script src="assets/js/index.js" charset="utf-8"></script>
+</body>
+</html>