DEV Community: Abdur Rehman Khalid

Restaurant Menu using javascript

Abdur Rehman Khalid — Sat, 22 May 2021 00:00:27 +0000

Hello DEV community! 👋

I've recently attempted to make a Restaurant Menu using HTML CSS and java script.

Live Demo: https://res-menu.netlify.app/
You can check the github repository here for the source code: https://github.com/abdurrehmaan/Restaurants-Menu

Please note that some features are yet to be implemented and i would love to hear your feedback!

Games Every Programmer Should Play

Abdur Rehman Khalid — Tue, 11 May 2021 15:29:57 +0000

Programming games are often overlooked as a way to learn a new programming language or improve your knowledge of an existing one. Here are few programming games that are worth a try.

CodinGame

Visit CodinGame here - https://www.codingame.com/

CodinGame is one of the better-known free platforms for learning how to code through games. The platform supports over 25 programming languages and comes with challenges that become gradually harder as you progress through them. CodinGame is a community, too. You can solve challenges together with your friends or colleagues and learn how other players solve particular challenges.

Codemonkey

Visit Codemonkey here - https://www.codemonkey.com/

Codemonkey teaches codding using CoffeeScript, a real programing language, to teach you to build your own games in HTML5. It's aimed at codding for kids, but it's definitely fun for adults too.

Flexbox Froggy

Visit Flexbox Froggy here - https://flexboxfroggy.com/

In this game, you must bring the frogs home to their lilypads by mastering CSS flexbox, a powerful new module that makes layout a breeze. With it you can control alignment, spacing, and wrapping of elements on the webpage using only one or two lines of code.

CodeCombat

Visit Code Combat here - https://codecombat.com/

CodeCombat is a platform that gamifies Python, JavaScript, HTML, and the fundamentals of computer science. As you progress, you'll unlock heroes, pets, gear, and more.
The game is free for all its core levels, with a $9.99 a month subscription if you want access to its extra level branches plus 3,500 bonus gems a month. The game has a strong open-source community that helps with translations and creating more levels.

Untrusted

Visit Untrusted here - https://www.playuntrusted.com/

Untrusted is a meta-JavaScript adventure game written by Alex Nisnevich and Greg Shuflin. You need to write (or remove) JavaScript code to create a gap in the walls surrounding you.
Contrary to some of the other suggestions in this list, Untrusted is made for people already familiar with JavaScript. It starts easy, but the puzzles quickly become difficult. If you're up for a challenge, try Untrusted.

Cyber-Dojo

Visit Cyber-Dojo here: https://www.cyber-dojo.org/

cyber-dojo is an online browser-based coding dojo game. cyber-dojo is the world's simplest non development environment. Each group writes their code and tests inside a web browser. presses their run-tests button to submit their code and tests to the cyber-dojo server.

AI Gaming

Visit AI Gaming here - https://www.aigaming.com/

Last but not the least, we have Microsoft's AI Gaming Platform where you can code bots in python and compete against your friends on 30+ different games & challenges. You can also participate in tournaments to win some really cool prizes. Along with learning to code a bot in Python, you will also get hands-on practice in using Microsoft's Cloud Platform, Azure.

We hope you found at least one new programming game you’ll enjoy playing. There’s nothing better than learning how to code while having fun in the process. If you enjoyed this article, please feel free to share it on social media clicking the buttons top right.

Build your own Promodoro Timer

Abdur Rehman Khalid — Sat, 01 May 2021 02:55:28 +0000

Build your own Promodoro Timer

Promodoro Timmer by Abdur Rehman

Contributors	Profile links
Abdur Rehman	https://github.com/abdurrehmaan
Zeenat Parveen	https://github.com/Zeeizee

Demo	Source Code
https://promodorotimer.netlify.app/	https://github.com/abdurrehmaan/pomodorotimer

Today we will be creating Promodoro timer to track the totle work time and break time of a specific task .

This task giving by (Raheel@Devnation) during the Web Programming course. The task was to build a promodoro timer which tells you exactly when to start the task and when to take a short break. At the End show the completed task and with calculated tasktime (tasktime + breaktime)
Note: tasktime == worktime;

The basic process is as follows:

Start a 25-minute timer.
Work until the timer rings.
Take a short, five minutes break.
List the Completed to task
Calculate to total time(worktime + breaktime)

User Interface

User Task

These are the user stories for this Pomodoro Timer:

User can start / stop a timer
User can Pause / Resume a timer
User can add the title of a task
User can see a list of the completed pomodoro task with completed time.

framework and Toolkit

We used Bootstrap which is open-source CSS framework

 <!-- bootstrap -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"
        integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

And We for Icons we Font-awesome icon sets and tools

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
        integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w=="
        crossorigin="anonymous" />

Promodoro Structure

We will start by creating a simple HTML structure to display a timer and add buttons to start, pause and stop it.

 <div class="container my-3">
        <h2 class="text-uppercase text-center display-4">Promodoro Timer</h2>
        <div class="worktimer my-4">
        </div>
        <div>
            <input type="text" class="taskname" placeholder="Enter your Task here">
        </div>
        <div class="wb-box my-4">
            <div class="wt-box">
                <label for="">Work Time</label>
                <input type="number" class="workinterval" value="25" readonly>
            </div>
            <div class="wt-box">
                <label for="">Break Time</label>
                <input type="number" class="breakinterval" value="5" readonly>
            </div>
        </div>
        <div class=" alertmessagebox text-center mb-2"><small class="alertmessage d-none font-weight-bold ">Enter task
                name before
                start</small>
        </div>
        <div class="actionbtns">
            <button class="btnstart startgrey "><i class="fas fa-play-circle"></i></button>
            <button class="btnpause bg-warning d-none "><i class="fas fa-pause-circle"></i></button>
            <button class="btnresume bg-warning d-none "><i class="fas fa-step-forward"></i> </button>
            <button class="btnstop bg-danger d-none "><i class="fas fa-stop-circle"></i></button>
        </div>
        <div class="mt-4">
            <span class="text-uppercase text-center display-5 ">Your Completed Tasks</span>

        </div>
        <div class="completedList my-3">
            <ul class="py-3">

            </ul>

        </div>
    </div>

# Styling Promodoro Timer

  :root{
    --gray: #eeeded;
}
.yellowcolor {
    background: #e67e22;
    color:white;
}
.greencolor {
    background: #2980b9;
    color:white;
}
.container{
    max-width: 400px;
}
.worktimer {
    height: 150px;
    width: 100%;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
    /* background-color: var(--gray); */
    /* border: none; */
    outline: none;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
}
.worktimer2 {
    height: 150px;
    width: 100%;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
    background-color: white;
    /* border: none; */
    outline: none;
    color:#2980b9;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
}
.worktimer span {
    font-size: 5rem;
}
.taskname{
    width: 100%;
    height: 50px;
    border: none;
    outline: none;
    /* background-color: var(--gray); */
    padding: 20px;
    border-radius: 5px;
    /* background-color: #2980b9; */
    color: #2980b9;;
    font-size: 1.5rem;
    border: 2px solid #2980b9;
}
.wb-box{
    display: flex;
    justify-content: center;
    align-items: center;
}
.wb-box .wt-box {
    margin: 10px;
    text-align: center;
}
.wb-box .wt-box label {
    font-size: 1.2rem;
    font-weight: 600;
}
.wb-box .wt-box input {
    width: 100%;
    border: none;
    outline: none;
    padding: 10px;
    border-radius: 5px;
    text-align: center;
    font-size: 1.5rem;
}
.startgrey{
    background-color: #2980b9;
    opacity: 0.5;
}
.startblue{
    background-color: #2980b9;
    color:white;
}
.alertmessagebox
{
    height: 25px;
    width: 100%;
    color:#e67e22;
}
.workinterval {
    background-color: #2980b9;
    color: white;
}
.breakinterval{
    background-color: #e67e22;
    color: white;
}
.actionbtns{
    display: flex;
    justify-content: center;
    align-items: center;
}
.actionbtns button{
    margin: 5px;
    width: 50%;
    padding: 20px;
    border: none;
    border-radius: 5px; 
    color: white;
    font-size: 1.2rem;
}
.fas{
    font-size: 2.5rem;
}
.completedList ul {
  list-style:decimal;
    width: 100%;
    background-color: #a5d6f7;
    color: white;   
}
.completedList ul li { 
    background-color: white;
    margin-top: 20px;
    margin-bottom: 10px;
    margin-right: 20px;
    color: #2980b9;
    padding: 10px 10px;
    font-size: 1.2rem;
}

Create a function to format and display the time

First, I defined all the variables. As I was not using jQuery, I ensured that I captured all my elements using document.querySelector.
When the ‘start’ button is clicked, the interval is cleared. A new interval is set if isPaused changes from true to false.
The ‘reset’ button clears the interval, and resets the variables.

The timer function is where the countdown magic happens. It deducts one second from seconds. If seconds <; 0, the alarm is played, and the function determines if the next countdown should be a work session or break session

Now it’s time to work on the +/- buttons for the work and break durations. Initially, I created an onclick function for every button. While it was functional, there was definitely room for improvement.
It’s time to update the HTML!
I created functions to update the countdown display and button display, and incorporated those functions into an overarching function that also updated the Work/Break status and durations.
Finally, I used document.onclick to run the updateHTML function everytime the user clicks on the page. I also used window.setInterval to run the function 10 times a second for good measure.

function setInitialTime() {
  document.getElementById("minutes").innerHTML = session_minutes;
  document.getElementById("seconds").innerHTML = session_seconds;
}

function start_work() {

  taskName = document.getElementById("taskname").value;
  const workTime = document.getElementById('worktime').value;
  const breakTime = document.getElementById('breaktime').value;
  session_minutes = workTime-1;
  session_seconds = 59;
  document.getElementById("minutes").innerHTML = session_minutes;
  document.getElementById("seconds").innerHTML = session_seconds;
  minutes_interval = setInterval(minutesTimer, 60000);
  seconds_interval = setInterval(secondsTimer, 1000);

  function minutesTimer() {
    session_minutes = session_minutes - 1;
    document.getElementById("minutes").innerHTML = session_minutes;
  }
  function secondsTimer() {
    session_seconds = session_seconds - 1;
    document.getElementById("seconds").innerHTML = session_seconds;

    if (session_seconds <= 0) {
      if (session_minutes <= 0) {
        clearInterval(minutes_interval);
        clearInterval(seconds_interval);
        document.getElementById("done").innerHTML = "Session Done, Take a Break!";
        document.getElementById("done").classList.add("show_message");
        start_break(breakTime);
      }
      session_seconds = 60;
    }
  }
}
function start_break(breakTime) {

  session_minutes = breakTime-1;
  session_seconds = 59;

  document.getElementById("minutes").innerHTML = session_minutes;
  document.getElementById("seconds").innerHTML = session_seconds;


  minutes_interval = setInterval(minutesTimer, 60000);
  seconds_interval = setInterval(secondsTimer, 1000);


  function minutesTimer() {
    session_minutes = session_minutes - 1;
    document.getElementById("minutes").innerHTML = session_minutes;
  }


  function secondsTimer() {
    session_seconds = session_seconds - 1;
    document.getElementById("seconds").innerHTML = session_seconds;


    if (session_seconds <= 0) {
      if (session_minutes <= 0) {

        clearInterval(minutes_interval);
        clearInterval(seconds_interval);


        document.getElementById("done").innerHTML = "Break Finished! Continue Working now!";
        document.getElementById("done").classList.add("show_message");

        start_work()
      }
      session_seconds = 60;
    }
  }
}
function reset(){

  clearInterval(minutes_interval)
  clearInterval(seconds_interval)
  let session_seconds = "00";
  let session_minutes = 00;
  document.getElementById("minutes").innerHTML = session_minutes;
  document.getElementById("seconds").innerHTML = session_seconds;
}
function startTime(){

  const dateNow = new Date();
  return dateNow
}

function stopTime(){
  const dateNow = new Date()
  return dateNow

}

document.getElementById("start-button").addEventListener("click", () => {
  start_work();
  start = startTime()

  document.getElementById("start-button").classList.add("d-none")
  document.getElementById("pause-button").classList.remove("d-none")
});

document.getElementById("pause-button").addEventListener("click", () =>{
  clearInterval(minutes_interval)
  clearInterval(seconds_interval)

  document.getElementById("pause-button").classList.add("d-none")
  document.getElementById("resume-button").classList.remove("d-none")

} )
document.getElementById("resume-button").addEventListener("click", () => {

  minutes_interval = setInterval(()=> {
    session_minutes = session_minutes - 1;
    document.getElementById("minutes").innerHTML = session_minutes;}, 
    60000);

  seconds_interval = setInterval(() => {
    session_seconds = session_seconds - 1;
    document.getElementById("seconds").innerHTML = session_seconds;
  }, 1000);

  document.getElementById("pause-button").classList.remove("d-none")
  document.getElementById("resume-button").classList.add("d-none")
  document.getElementById("start-button").classList.add("d-none")
})
document.getElementById("reset-button").addEventListener("click", () => {
  reset();
  stopp = stopTime()
  totalTime = dateFns.distanceInWords(start, stopp, {addSuffix: true})

  const completedSessionList = document.querySelector('#sessions-list')
  const html = `<li class="list-group-item d-flex justify-content-between align-items-center">${taskName} was completed ${totalTime}</li>`;

  completedSessionList.innerHTML += html;

  document.getElementById("done").innerHTML = "";
  document.getElementById("done").classList.remove("show_message");

  document.getElementById("start-button").classList.remove("d-none")
  document.getElementById("pause-button").classList.add("d-none")
  document.getElementById("resume-button").classList.add("d-none")

});

And that’s the wrap up of my project!
You’ve reached the end of this tutorial. At this point, you should have a functioning Pomodoro timer application with useful features like sound alerts and notifications. If you have any questions or suggestions, please leave a comment below.

Thanks for reading, and happy coding!

What is Stored Procedure in SQL

Abdur Rehman Khalid — Fri, 30 Apr 2021 11:37:21 +0000

The new capabilities provided by stored procedures, require new disciplines for MySQL developers, only some of whom will have prior experience in stored program development using other relational databases.

what is store procedure

Stored Procedures are pre-compiled code which compiled for first time and its compiled format is saved, we call the compiled saved format whenever we want.

How to create store procedure in sql ?

Stored Procedure Syntax


CREATE PROCEDURE procedure_name
AS
sql_statement
GO;

Execute a Stored Procedure


EXEC procedure_name;

Build your own digital clock using JavaScript

Abdur Rehman Khalid — Tue, 27 Apr 2021 22:59:50 +0000

Source code : Github

In this article, I am going to show you how to design a simple animated Digital Clock in JavaScript. Since, a browser executes a JavaScript program at the client side, the script will pick up time from the client's computer and display it.

What we want to have

Display current date
Display current time
Increment the time on it's own

Technology we use

Vanilla javascript

The Javascript

The entire code for the working of the clock is written within the tick() function. Inside this function, an object of the Date() is created which allows you to call year, date, hour, minute, second.

const now = new Date();

In our code, this object is used for getting the current hours, minutes and seconds which are stored in different variables.

const h = now.getHours();
const m = now.getMinutes();
const s = now.getSeconds();

The obtained hours, minutes and seconds will be displayed in single digit if less than 10. For example, the current hour will be displayed as 7 instead of 07. To always display the elements of time in two-digit format, a 0 is appended before them whenever they are less than 10

<span>${h < 10 ? "0"+h:h}</span>:
<span>${m < 10 ? "0"+m:m}</span>:
<span>${s < 10 ? "0"+s:s}</span>`;

Now once our time is ready, let's display it in the div which we made before. This is done by obtaining the div using the document.getElementById method and give our time as the content of the div using the innerHTML property.

const clock = document.querySelector('.clock');
const html = `
<span>${h < 10 ? "0"+h:h}</span>:
<span>${m < 10 ? "0"+m:m}</span>:
<span>${s < 10 ? "0"+s:s}</span>`;
clock.innerHTML = html;

Base design

Make the basic html structure

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Digital Clock</title>
</head>
<body>
    <div class="clock-body">
        <div class="inner-body">
            <div class="clock">
            
            </div>
        </div>
    </div>
</body>
</html>

Attach CSS

<link rel="stylesheet" href="css/digitalclock.css">

Attach Javascript file

<script src="js/digitalclock.js"></script>

The Styling

Will add a nice font it will center the hero div and make the background fit nicely

@import url('https://fonts.googleapis.com/css?family=Orbitron');
.clock-body {
    margin: 200px auto;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.inner-body{
    width: 30%;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 5px solid #2BC511;
    background-color: black;
    border-radius:12px;
}
.clock{
    font-size: 4em;
    font-weight: 700;
    text-align: center;
    color:#2BC511;
    font-family: 'Orbitron', sans-serif;
}
.clock span {
    padding: 20px;
}