Forem: William Kwadwo Owusu

Mastering the Fundamentals: Ready for Advanced Web Development Projects

William Kwadwo Owusu — Sat, 19 Oct 2024 16:52:58 +0000

Over the past few months, I’ve embarked on several web development projects that have not only solidified my grasp on fundamentals but also fueled my desire to explore more complex and advanced challenges. From building simple interfaces to creating interactive apps with Vue.js, I’ve acquired a solid understanding of JavaScript, Vue.js, Bootstrap, and state management. Now, I feel ready to take the next big step and dive into full-fledged advanced projects.

Reflecting on the Journey So Far

Here’s a quick recap of what I’ve accomplished so far:

Building Interactive Web Applications: With Vue.js, I’ve been able to create highly interactive, reactive web apps like a Pomodoro Timer and a Calculator. These projects taught me the importance of efficient state management and handling dynamic user input.
Responsive UI with Bootstrap: Using Bootstrap, I’ve ensured that all my projects are responsive and visually appealing across devices, from mobile screens to desktops. This framework has been invaluable in speeding up the design process.
Solidifying JavaScript Skills: Through my work, I’ve mastered the core fundamentals of JavaScript such as event handling, DOM manipulation, and string operations—skills that have prepared me for the more intricate aspects of programming.

With these foundational skills under my belt, it’s time to push beyond the basics. I want to explore deeper concepts and tackle projects that will challenge me further.

Venturing into Advanced Projects: What I Aspire to Learn

As I transition into more advanced territory, here are some areas I’m eager to explore:

Full Stack Development: I’ve become comfortable with the frontend, and now I’m excited to expand my skills by incorporating it into the backend. Due to the experience I have in technologies like Node.js, Express.js, and MongoDB it will allow me to build end-to-end applications that manage complex data and provide full user experiences.
State Management with Vuex: While I’ve enjoyed Vue’s basic state management, I’m keen on diving into Vuex to manage more complex application states across different components. I want to understand modular state management and apply these techniques to larger applications.
APIs and Asynchronous Programming: I’ve experimented with basic API calls, but I’m eager to go further. I want to master asynchronous JavaScript and work with APIs to build real-time data-driven applications—think weather apps, stock market dashboards, or even chat applications using websockets.
Advanced CSS & Animations: While frameworks like Bootstrap provide a great starting point, I want to get deeper into advanced CSS techniques like Flexbox, CSS Grid, and CSS animations to create more unique and polished user interfaces. Additionally, exploring SVG animations could bring a dynamic feel to my projects.
Testing & Debugging: As I move towards more complex projects, understanding how to write unit tests, perform integration testing, and handle real-world debugging will be crucial to ensuring the reliability of my applications. I aim to get familiar with tools like Jest and Cypress for test-driven development.
Progressive Web Apps (PWAs): The idea of building offline-first applications that can work on mobile devices excites me. I’d love to learn about service workers, caching strategies, and how to implement push notifications for a true PWA experience.
Building with Frameworks like Nuxt.js: I plan to expand beyond basic Vue.js and explore frameworks like Nuxt.js, which offer server-side rendering (SSR) and static site generation (SSG). This will help improve performance, SEO, and scalability in larger applications.

What’s Next?

I’m gearing up to start some exciting advanced projects that will take my skills to the next level. Here are a few project ideas I’m considering:

A Full Stack Blog Platform: Complete with user authentication, rich content editing, and a scalable backend using Node.js and MongoDB.
Real-Time Chat App: Implementing WebSockets or Firebase to allow real-time communication between users.
E-commerce Store: Creating a full e-commerce platform, from product catalog to payment integration, focusing on best practices for both frontend and backend development.

Open to Suggestions! What Do You Think I Should Build?

Now that I’m ready to take on advanced projects, I’d love to hear from you! If you have any project ideas or technologies that you think would be great to explore, please leave a comment below. Whether it’s a challenge you’ve faced in your own development journey or a cool project you think would push my skills further, I’m all ears!

The learning journey never ends, and I’m excited to dive into the advanced realms of web development. So, if you have suggestions or tips, feel free to share—I’d love to collaborate and hear what you have to say.

Let’s build something awesome together! 👨‍💻

What I’ve Learned from Building a Calculator with Vue.js

William Kwadwo Owusu — Sat, 19 Oct 2024 16:34:52 +0000

For my fourth project, I developed a Calculator app using Vue.js. It was a valuable experience in understanding how to handle user input, display dynamic results, and perform calculations with JavaScript. Here’s a breakdown of the key lessons I learned while building this app.

1. Handling User Input and Updating the Display

The calculator needs to accept user input (numbers and operators) and update the display dynamically. I used Vue's reactive properties to keep track of the current input and result. The ref function in Vue made it easy to store and modify these values:

const result = ref('');
const calculated = ref(false);

Every time a user clicks on a number or operator, the result property updates, ensuring that the display shows the most recent input. The function handleClick is used to append values to the result:

const handleClick = (value) => {
    if (calculated.value) {
        result.value = value; // Reset the result if a calculation was just completed
        calculated.value = false;
    } else {
        result.value += value;
    }
}

This was an essential lesson in handling user interaction and updating the interface based on reactive properties.

2. Managing Operators: Avoiding Redundant Input

One key challenge in building a calculator is ensuring that multiple operators are not added consecutively (e.g., avoiding inputs like 3++4). To address this, I added a check to replace an operator if the last character is already an operator:

const handleOperatorClick = (operator) => {
    if (/[+*/-]$/.test(result.value)) {
        result.value = result.value.slice(0, -1) + operator; // Replace the last operator
    } else {
        result.value += operator; // Add the new operator
    }
    calculated.value = false; // Reset flag
};

This method ensures that only one operator is present at the end of the input string, improving the robustness of the calculator.

3. Clearing and Deleting Input

The calculator needs to provide functionality for clearing all input (using the AC button) or deleting the last input character (using the DEL button). I implemented these two actions with the clearAll and clear methods:

Clear All (AC): Resets the entire input.

const clearAll = () => {
    result.value = '';
    calculated.value = false;
};

Delete Last Character (DEL): Removes the last character of the input string.

const clear = () => {
    if (result.value && result.value.length > 0) {
        result.value = result.value.slice(0, -1); // Remove the last character
        if (result.value.length === 0) {
            clearAll(); // If the input is empty, reset everything
        }
    } else {
        clearAll();
    }
};

This was a useful exercise in handling string manipulation and providing a smooth user experience.

4. Performing Calculations

One of the core functionalities of a calculator is to evaluate expressions entered by the user. I used JavaScript’s built-in eval() function to calculate the result of the input expression:

const calculate = () => {
    let stringifiedResult = new String(result.value);
    result.value = eval(String(stringifiedResult)); // Evaluate the expression
    calculated.value = true; // Set flag to indicate the calculation is done
};

While eval() is simple and effective for this basic calculator, I’ve learned about the potential security risks it poses when handling arbitrary user input. In future projects, I may explore writing a custom parser for improved safety and flexibility.

5. User Interface with Vue and Bootstrap

To build the calculator interface, I used Bootstrap for quick and responsive design. The buttons are arranged in a grid with appropriate color coding for numbers and operators:

<div class="row text-center border">
    <div class="col-3 border bg-dark text-white" @click="handleClick('7')">7</div>
    <div class="col-3 border bg-dark text-white" @click="handleClick('8')">8</div>
    <div class="col-3 border bg-dark text-white" @click="handleClick('9')">9</div>
    <div class="col-3 border bg-warning" @click="handleOperatorClick('-')">-</div>
</div>

I learned how to combine Vue’s event handling with Bootstrap’s classes to create a visually appealing and responsive calculator interface.

6. Handling Edge Cases and Enhancing UX

I encountered several edge cases while building the calculator. For example, after performing a calculation, if a user enters a new number, the calculator needs to reset the previous result. This was handled by checking the calculated flag:

if (calculated.value) {
    result.value = value; // Replace the result with the new value
    calculated.value = false; // Reset the calculated flag
}

Another useful feature was formatting the display to make it more intuitive, like automatically replacing the last operator if the user changes their mind, improving the user experience.

Final Thoughts: What I’ve Gained from Building a Calculator

This project provided a deep dive into handling dynamic input, managing state, and building a clean user interface using Vue.js. I gained practical knowledge in the following areas:

State management: How to track and update the user’s input and result dynamically.
Event handling: Responding to user actions (number clicks, operator clicks, and calculating results).
UI/UX considerations: Ensuring that the calculator handles edge cases gracefully, and provides a clear and intuitive user interface.
String manipulation: Parsing and manipulating input strings to create valid mathematical expressions.

Building this calculator was a rewarding experience that strengthened my ability to manage user input and create dynamic, interactive web applications using Vue.js. Looking forward to applying these skills to more complex projects!

Learning Vue Part 3: Building a pomodoro timer

William Kwadwo Owusu — Sun, 08 Sep 2024 22:30:09 +0000

For my third project, I decided to create a Pomodoro Timer, a productivity tool designed to help manage deep work sessions followed by short breaks. In building this, I expanded my understanding of Vue.js, particularly when it comes to managing time-based states, form handling, and user interactions. Here’s an overview of the key lessons I’ve learned.

1. Handling Form Submissions with Vue: Custom Work and Break Times

The first part of the project involved setting up a simple form to allow the user to set their desired work and break times. Just like in my previous projects, I used Vue’s @submit.prevent to stop the form from refreshing the page:

<form class="mt-4" @submit.prevent="setTime">
    <div class="form-row mx-2">
        <div class="col-4">
            <label class="font-weight-bold">Work (min)</label>
            <input type="number" v-model="workTime" class="form-control" placeholder="eg: 25">
        </div>
        <div class="col-4">
            <label class="font-weight-bold">Break (min)</label>
            <input type="number" v-model="breakTime" class="form-control" placeholder="eg: 5">
        </div>
        <div class="col-4">
            <label style="visibility: hidden;">Submit</label>
            <input type="submit" class=" form-control btn btn-outline-light text-white">
        </div>
    </div>
</form>

Vue’s v-model allows for two-way data binding, making it easy to capture and manipulate the input values for work and break time. Validating user input (e.g., ensuring the input is a valid number) was also something I had to account for, which I handled within the setTime method:

const setTime = () => {
    if (workTime.value == '' || breakTime.value == '' || workTime.value <= 0 || breakTime.value <= 0) {
        alert("Please enter a valid number of minutes!");
        return;
    }
    totalSeconds.value = (workTime.value * 60);
    initialWorkTime = (workTime.value * 60);
    initialBreakTime = (breakTime.value * 60);
    updateMinutesSeconds();
    alert("Work and break time successfully updated");
};

This was a valuable exercise in handling form validation and ensuring data integrity.

2. State Management: Tracking Time with Reactive Properties

Managing the timer functionality required me to keep track of the number of seconds and minutes remaining. Vue’s ref method was crucial for this, as it made the data reactive and ensured the UI updated automatically as the timer counted down:

const totalSeconds = ref(initialWorkTime);
const seconds = ref(totalSeconds.value % 60);
const minutes = ref(Math.floor(totalSeconds.value / 60));

To continuously update the timer, I used setInterval to decrement the time every second:

const startTimer = () => {
    isPaused.value = false;
    if (!nIntervalId.value) {
        nIntervalId.value = setInterval(() => {
            if (totalSeconds.value > 0 && isPaused.value == false) {
                totalSeconds.value--;
                updateMinutesSeconds();
            } else if (totalSeconds.value == 0) {
                clearInterval(nIntervalId.value);
                nIntervalId.value = null;
                setBreak();
            }
        }, 1000);
    }
};

This not only allowed the timer to work correctly but also highlighted how Vue’s reactivity system handles time-sensitive operations well.

3. Computed Properties: Formatting Time for Display

When building a timer, it's important to display the time in a readable format. To ensure that the seconds display with a leading zero (e.g., 04 instead of 4), I used a computed property in Vue:

const formattedSeconds = computed(() => {
    return seconds.value < 10 ? `0${seconds.value}` : seconds.value;
});

This was a great opportunity to use Vue’s computed property, which efficiently recalculates values only when dependencies change, making it ideal for time formatting.

4. Handling Timer Control: Start, Pause, Reset

Implementing start, pause, and reset functionalities required careful management of the timer’s state. I used Vue’s reactivity to track whether the timer was running or paused:

let isPaused = ref(false);

Start Timer: This resumes the countdown by setting isPaused to false and starting the interval if it isn’t already running.
Pause Timer: I simply set isPaused to true when the user wants to pause the timer.
Reset Timer: This clears the interval and restores the timer to its initial state:

const resetTimer = () => {
    clearInterval(nIntervalId.value);
    nIntervalId.value = null;
    totalSeconds.value = initialWorkTime;
    updateMinutesSeconds();
    isPaused.value = false;
    workPeriod = true;
};

This was a key lesson in how to manage state transitions in a Vue app, especially when working with intervals and reactive variables.

5. Switching Between Work and Break Periods

A Pomodoro timer involves alternating between a deep work period and a break period. When the work period ends, I switch to break mode using the setBreak method:

const setBreak = () => {
    totalSeconds.value = initialBreakTime;
    updateMinutesSeconds();
    workPeriod = false;
};

This logic ensures that after the timer hits zero during the work session, it transitions automatically to the break session, and vice versa.

6. Enhancing User Experience with Tooltips and Icons

To make the UI more user-friendly, I added Bootstrap icons and tooltips. For example, I used buttons with icons for Start, Pause, Reset, and Switch to Break, each with tooltips to clarify their functionality:

<button class="btn btn-lg btn-light text-danger mx-3" data-toggle="tooltip" data-placement="top" title="Start/Resume timer" @click="startTimer"><i class="bi bi-play-fill"></i></button>
<button class="btn btn-lg btn-light text-danger mx-3" data-toggle="tooltip" data-placement="top" title="Pause timer" @click="pauseTimer"><i class="bi bi-pause-fill"></i></button>
<button class="btn btn-lg btn-light text-danger mx-3" data-toggle="tooltip" data-placement="top" title="Reset timer" @click="resetTimer"><i class="bi bi-arrow-counterclockwise"></i></button>
<button class="btn btn-lg btn-light text-danger mx-3" data-toggle="tooltip" data-placement="top" title="Go to break time" @click="setBreak"><i class="bi bi-lightning-charge-fill"></i></button>

These small enhancements added a lot to the user experience by making the interface more intuitive.

Final Thoughts: What I’ve Gained from Building a Pomodoro Timer

This project deepened my understanding of how Vue.js can be used for time-based, interactive apps. I learned how to:

Effectively manage timers and state transitions with setInterval.
Use computed properties to handle dynamic UI changes, such as formatting time.
Implement a user-friendly form to capture and validate input, ensuring smooth user interaction.
Create an intuitive user interface with Bootstrap icons and tooltips.

By completing this Pomodoro Timer, I gained a solid grasp of more advanced state management and how to create user-friendly experiences with Vue.

Looking forward to more Vue adventures!

Learning Vue Part 2: Building a to-do app

William Kwadwo Owusu — Sat, 07 Sep 2024 20:33:34 +0000

After completing my first project—a weather app—I decided to take on a second project to further explore Vue.js: a to-do list app. This project allowed me to dive deeper into Vue’s reactivity system, local storage, and form handling. Here’s a breakdown of what I’ve learned from building it.

1. Form Handling: Preventing Page Refresh with `@submit.prevent`

One of the first things I realized was how powerful Vue’s form handling is, especially the @submit.prevent directive. By using this, I was able to prevent the default behavior of form submissions, which typically results in a page refresh. In my app, I used @submit.prevent="addTask" to ensure that when users add a task, the page doesn’t reload.

<form @submit.prevent="addTask" class="d-flex justify-content-center">
    <div class="form-group">
        <input type="text" class="form-control" placeholder="Add task..." v-model="task">
    </div>
    <span class="ml-2"><button type="submit" class="btn btn-success">Add</button></span>
</form>

However, I learned that when you prevent form submission in Vue, you need to ensure the input field has a v-model bound to a reactive data property. Otherwise, the form may still behave as if it’s refreshing since the input value isn't being tracked or updated in Vue’s reactive system.

2. Reactivity: Managing Tasks with `ref`

Just like in my weather app, I used Vue’s ref function to manage the state of my tasks and the current input. This allowed me to store tasks in an array and dynamically update the UI when new tasks were added or deleted:

const task = ref('');
const tasks = ref([]);

const addTask = () => {
    if (task.value.trim() === '') return; // prevent adding empty tasks
    let taskObject = { id: Date.now(), name: task.value, checked: false };
    tasks.value.push(taskObject);
    updateLocalStorage();
    task.value = '';
};

This reactivity is key to keeping the app dynamic. Any changes to the tasks array automatically trigger re-renders in the UI, without any need for manual DOM manipulation. This is where Vue really shines.

3. Local Storage: Making the App Persistent

One of the key features I wanted to implement in my to-do list app was persistence. I didn’t want users to lose their tasks when they refreshed the page, so I decided to store the tasks in localStorage. I learned that Vue’s onMounted lifecycle hook is perfect for restoring data when the app loads:

onMounted(() => {
    const storedTasks = localStorage.getItem('tasks');
    tasks.value = storedTasks ? JSON.parse(storedTasks) : [];
});

This way, when the user opens the app, it checks localStorage for any previously saved tasks and loads them into the app’s state. Whenever a task is added, modified, or deleted, the updateLocalStorage function is called to save the latest state of the tasks:

const updateLocalStorage = () => {
    localStorage.setItem('tasks', JSON.stringify(tasks.value));
};

This was a valuable lesson in making apps more user-friendly by maintaining state across sessions.

4. Task Management: Checkboxes and Deletion

Managing the completion status of tasks was another fun challenge. By using Vue’s v-model to bind the checkbox to each task’s checked property, I was able to make each task reactive to user input:

<input type="checkbox" class="form-check-input" :id="index" v-model="todo.checked" @change="changeTaskStatus($event)">

This allowed me to visually update the task’s status with a strikethrough when it was checked:

<label class="form-check-label" :style="{'text-decoration': todo.checked ? 'line-through' : 'none'}">{{todo.name}}</label>

For task deletion, I wanted to make sure users didn’t accidentally delete tasks, so I integrated SweetAlert2 to confirm the deletion:

const deleteTask = (taskId) => {
    Swal.fire({
        title: "Are you sure you want to delete the task?",
        showDenyButton: true,
        confirmButtonText: "Yes, delete",
        denyButtonText: `No`
    }).then((result) => {
        if (result.isConfirmed) {
            tasks.value.splice(taskId, 1);
            updateLocalStorage();
            Swal.fire("Deleted!", "", "success");
        } else {
            Swal.fire("Task not deleted", "", "info");
        }
    });
};

This was a good opportunity to explore how Vue can easily interact with external libraries like SweetAlert2 for enhanced user experience.

5. Leveraging `v-for` for Task Iteration

Displaying multiple tasks was another instance where Vue’s v-for directive came in handy. This allowed me to loop through the tasks array and render each task dynamically:

<div v-for="(todo, index) in tasks" :key="index">
    <div class="form-group form-check d-flex align-items-center">
        <input type="checkbox" class="form-check-input" :value=todo.name :id="index" v-model="todo.checked" @change="changeTaskStatus($event)">
        <label class="form-check-label" :style="{'text-decoration': todo.checked ? 'line-through' : none}">{{todo.name}}</label>
        <span class="ml-auto text-danger" @click="deleteTask(index)">🗑️</span>
    </div>
</div>

This directive was key to ensuring that each task was properly rendered, updated, and managed in a way that was reactive to user interaction.

Final Thoughts: What I’ve Gained from This Project

This to-do list project deepened my understanding of Vue’s reactivity system, especially when working with forms and local storage. It’s amazing how Vue makes tasks like managing form submissions, updating the UI based on user interactions, and persisting data so much easier than if I were to do it manually.

In particular, learning how to:

Prevent form submissions while ensuring reactive data binding with v-model
Manage tasks and local storage for persistence
Use external libraries like SweetAlert2 for improved UX

...has given me confidence in Vue’s capabilities. If you’re new to Vue or just looking for a fun project, a to-do list is a great way to get more comfortable with core concepts like reactivity, form handling, and lifecycle hooks.

Happy coding!

Learning Vue Part 1: Building a weather app

William Kwadwo Owusu — Mon, 02 Sep 2024 14:09:18 +0000

Diving into Vue.js has been like discovering a new favorite tool in a DIY kit—intuitive, flexible, and surprisingly powerful. My first side project to get my hands dirty with Vue was a weather app, and it’s taught me a lot about the framework’s capabilities, as well as about web development in general. Here’s what I’ve learned so far.

1. Getting Started with Vue: Simplicity Meets Power

One of the first things that struck me about Vue.js is how easy it is to get up and running. Unlike some other frameworks that require a lot of setup and configuration, Vue was refreshingly straightforward. All I needed was a script tag to include Vue, and I was off to the races.

In my weather app, I used Vue’s createApp function to kickstart my application:

const { createApp, ref } = Vue;

createApp({
    setup() {
        const locationValue = ref('');
        const responseMessage = ref(null);
        const selectedHourlyForecast = ref([]);
        const selectedFutureForecast = ref([]);
        // More code here...
    }
}).mount("#app")

This approach is clean and keeps everything in one place, making it easier to manage the state and logic of the application.

2. Reactive Data Binding: The Magic of `ref`

Vue’s reactivity system is one of its standout features. By using ref, I was able to make my data reactive, meaning that any changes to the data automatically update the DOM. For instance, when a user submits a location, the weather data is fetched and displayed without any manual DOM manipulation:

const locationValue = ref('');
const responseMessage = ref(null);

const submitLocation = async () => {
    try {
        const response = await fetch(`http://api.weatherapi.com/v1/forecast.json?key=${APIKEY}&q=${locationValue.value}&days=6&aqi=no&alerts=no`);
        const result = await response.json();
        responseMessage.value = result;
    } catch (error) {
        console.log("An error occurred while fetching weather data", error);
        alert("Location not found");
    }
};

The seamless update of the UI based on changes in data is something that makes Vue.js incredibly powerful for building interactive applications.

3. Conditional Rendering: Show Only What’s Needed

Vue’s directives like v-if and v-else make it easy to conditionally render elements based on the state of your data. In my weather app, I used these directives to display the weather data only when it’s available:

<div v-if="responseMessage">
    <div class="h1">{{responseMessage.current.temp_c}}°C</div>
    <div>{{responseMessage.location.name}}, {{responseMessage.location.country}}</div>
</div>
<div v-else>
    <div class="h1">N/A °C</div>
    <div>No location present</div>
</div>

This kind of conditional rendering ensures that the app remains clean and informative, only showing users what they need to see when they need to see it.

4. Handling User Input: The Power of `v-model`

Handling user input in Vue.js is a breeze with the v-model directive. In my app, I used v-model to bind the input field directly to my locationValue variable, making it reactive and keeping the data in sync with the user’s input:

<input type="text" class="form-control" placeholder="Enter location..." v-model="locationValue">

This simple binding eliminated the need for manual event listeners, reducing boilerplate code and making the application more maintainable.

5. Breaking Down the Weather Data: Iterating with `v-for`

Displaying multiple pieces of data, like the hourly or future weather forecasts, was made easy with Vue’s v-for directive. This allowed me to loop through arrays of data and render them dynamically:

<div v-for="(forecast, index) in selectedHourlyForecast" :key="index" class="p-2 text-center">
    <div>{{forecast.temp_c}}°C</div>
    <span class="icon"><img :src="'https:' + forecast.condition.icon" alt=""></span>
    <div class="font-weight-bold font-italic">{{forecast.condition.text}}</div>
    <div>{{forecast.time.slice(11,16)}}</div>
</div>

This made it easy to create a flexible and responsive UI that could display a varying number of data points, depending on the user’s location and the time of day.

6. Error Handling: Don’t Forget to Catch Those Exceptions

Working with APIs always comes with the possibility of errors, whether it’s a network issue or an invalid location. Vue made it easy to handle these errors gracefully, ensuring that the app doesn’t crash and burn when something goes wrong:

catch (error) {
    console.log("An error occurred while fetching weather data", error);
    alert("Unable to retrieve weather details");
}

This helped me understand the importance of error handling in making robust applications that can deal with unexpected situations.

Wrapping Up

Building this weather app with Vue.js has been an enlightening experience. I’ve learned a lot about how to structure an application, and create a responsive UI that updates in real-time based on user input. Vue’s simplicity and flexibility have made this process enjoyable, and I’m excited to continue exploring what else I can build with this powerful framework.

If you’re considering diving into Vue.js, I’d highly recommend starting with a small project like a weather app. It’s a great way to learn the basics while building something tangible that you can actually use.

Look out for the next project I will build soon while learning #Vue. Happy coding!

Filtering a table by date

William Kwadwo Owusu — Wed, 02 Feb 2022 09:24:28 +0000

Assuming you have table in your project and would like to filter the values by date. This simple code will enable you to filter it using from-to dates.

<div class="row">
  <div class="col-md-3">
    <h4>Date from</h4>
    <input type="date" class="form-control" id="datefilterfrom" data-date-split-input="true">
  </div>
  <div class="col-md-3">
    <h4>Date to</h4>
    <input type="date" class="form-control" id="datefilterto" data-date-split-input="true">
  </div>
</div>
<table id="myTable" class="table" border="1">
  <tr>
    <td>nothing</td>
    <td>nothing</td>
    <td>18/07/2018</td>
    <td>nothing</td>
  </tr>
  <tr>
    <td>nothing</td>
    <td>nothing</td>
    <td>19/07/2018</td>
    <td>nothing</td>
  </tr>
  <tr>
    <td>nothing</td>
    <td>nothing</td>
    <td>20/07/2018</td>
    <td>nothing</td>
  </tr>
</table>

The javascript code to actually filter the table and redraw the table:

function filterRows() {
  var from = $('#datefilterfrom').val();
  var to = $('#datefilterto').val();

  if (!from && !to) { // no value for from and to
    return;
  }

  from = from || '1970-01-01'; // default from to a old date if it is not set
  to = to || '2999-12-31';

  var dateFrom = moment(from);
  var dateTo = moment(to);

  $('#myTable tr').each(function(i, tr) {
    var val = $(tr).find("td:nth-child(3)").text();
    var dateVal = moment(val, "DD/MM/YYYY");
    var visible = (dateVal.isBetween(dateFrom, dateTo, null, [])) ? "" : "none"; // [] for inclusive
    $(tr).css('display', visible);
  });
}

$('#datefilterfrom').on("change", filterRows);
$('#datefilterto').on("change", filterRows);

Give me a follow if you found this helpful! :-)