How to create Typing Tool using Jquery & PHP | PHP Project with Source Code 2022.

Dear friends in this article we will tell you How to create Typing Tool using Jquery & PHP. So i hope you like our article because here you can get the source code free and this code you can use in your projects. Guys if you learn more interesting articles then go to search bar and type article name then you can find easily more interested articles.

Project Overview

1. Create Folder in your Xampp/htdocs/ Foldername

2. Open VS Code Editor (You can open any code editor)

3. Create Files (index.php, config.php, typing.php)

4. Create Database in you phpmyadmin for typing tool

5. Need Google API link – Download

6. Go to developer.google website – for get the country names and jquery code.

Create Databse

Go to your phpmyadmin page and clicke the new button after this write the database name then click on create button. After this create table name with 3 columns. First give the id and second give the lang_name and last give the lang_value then save it and get the typing tool file.

Now go to your code editor name open config.php file for connectivity with the databse.

Like this.

<?php
$conn = mysqli_connect('localhost','root','','typingtool');
if(!$conn){
    echo "not connected";
}
?>

Design Typing Tool

Go to the index.php file and create basic html syntax. If you using the vs code then press the shift+1 and enter for create automatically html snipt and include config.php file in this for make the dynamic Typing Tool.

HTML and PHP Code.

<div class="container">
        <div class="row">
            <div class="col-md-8 m-auto">
                <div class="all_languages">
                <h3>Select Your Language...</h3>
                <div class="row">
                    <?php
                    $selectQ = "SELECT * FROM `typingtable`";
                    $q = mysqli_query($conn,$selectQ);
                     while($getData = mysqli_fetch_assoc($q)){

                    
                    ?>
                    <div class="col-md-4">
                        <a href="typingtool.php?lang=<?php echo $getData['id'];?>" class="btn all-btn w-100 mb-3"><?php echo $getData['lang_name']; ?> Typing</a>
                    </div>
                    <?php } ?>
                </div>
                </div>
            </div>
        </div>
    </div>

CSS Code.

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: rgb(204, 204, 204);
}
.all_languages{
   background-color: rgb(204, 204, 204);
   padding: 30px;
   border-radius: 10px;
   box-shadow: 2px 3px 10px rgba(0, 0, 0, 0.308),
   -2px -3px 5px rgb(255, 255, 255);
}
h3{
    text-align: center;
    margin-bottom: 30px;
    font-family: 'Edu TAS Beginner', cursive;
    font-weight: bold;
    color: red;
}
.all-btn{
    padding: 7px 20px;
    width: 100px;
    height: 40px;
    background-color: rgb(204, 204, 204);
    color: red;
    box-shadow: 2px 3px 10px rgba(0, 0, 0, 0.308),
    -2px -3px 5px rgb(255, 255, 255);
    transition: all 0.4s;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
}
.all-btn:hover{
    background-color: red;
    color: #fff;
}
.typingtool{
    background-color: rgb(204, 204, 204);
    padding: 30px;
    border-radius: 10px;
    box-shadow: 2px 3px 10px rgba(0, 0, 0, 0.308),
    -2px -3px 5px rgb(255, 255, 255);
}
.typingtool textarea{
    outline: none;
    resize: none;
    border: none;
    width: 100%;
    height: 300px;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    box-shadow:inset 2px 3px 7px rgba(0, 0, 0, 0.308),
    inset -2px -3px 7px rgb(255, 255, 255);
    padding: 15px;
    border-radius: 10px;
    background-color: rgb(204, 204, 204);
}
.typingtool p{
    margin-top: 20px;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
}

/* second section */
.head{
    display: flex;
}
.head .back-btn{
    padding: 7px 20px;
    width: 100px;
    height: 40px;
    background-color: rgb(204, 204, 204);
    color: red;
    box-shadow: 2px 3px 10px rgba(0, 0, 0, 0.308),
    -2px -3px 5px rgb(255, 255, 255);
    transition: all 0.4s;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
}
.head .back-btn:hover{
    background-color: red;
    color: #fff;
}
.head h3{
    margin-left: 60px;
}
kbd{
    padding: 7px 20px;
    width: 100px;
    height: 40px;
    background-color: rgb(204, 204, 204);
    color: red;
    box-shadow: 2px 3px 10px rgba(0, 0, 0, 0.308),
    -2px -3px 5px rgb(255, 255, 255);
    transition: all 0.4s;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    margin: 0 10px 0 10px;
}
kbd:hover{
    background-color: red;
    color: #fff;
}

PHP Code.

<?php
include('config.php');
$myId = $_GET['lang'];
   $getId = "SELECT * FROM `typingtable` WHERE id='".$myId."'";
   $myQuery = mysqli_query($conn,$getId);
   $getIdData = mysqli_fetch_assoc($myQuery);
 
  ?>

Jquery Code.

// Load the Google Transliterate API
google.load("elements", "1", {
      packages: "transliteration"
    });

function onLoad() {
  var options = {
      sourceLanguage:
          google.elements.transliteration.LanguageCode.ENGLISH,
      destinationLanguage:
          [google.elements.transliteration.LanguageCode.<?php echo $getIdData['lang_value']; ?>],
      shortcutKey: 'ctrl+g',
      transliterationEnabled: true
  };

  // Create an instance on TransliterationControl with the required
  // options.
  var control =
      new google.elements.transliteration.TransliterationControl(options);

  // Enable transliteration in the textbox with id
  // 'transliterateTextarea'.
  control.makeTransliteratable(['text']);
}
google.setOnLoadCallback(onLoad);

If you any confusion then watch our video related this article and you can undestand easily with the video. So check video and subscribe our channel for interested topics.

Watch Video Related this Article.