The Event Calendar has its own shortcode feature but only for PRO users, which of course if you are a serious users of your own business where you have your own website that uses this plugin then I suggest you use purchase this plugin it has a great features to offer for pro users.

You can view a demo to their official website, that we you have a quick glance how this plugin works, now if you have a client that has a concern of budget, will this PHP code will help you do the thing like make a customize simple layout design where you have a chance to customize the event page but of course this PHP short code will only show the current event of the month with search functionality that targets to actual events in The Event Calendar plugin.

As you can see on the screenshot above there is a date above that shows the current date, that is not included in the code, I use an Elementor to display that but I will also include the php code that will display a date incase you want it as well. the main functionality of their is the Search Function, and the listing the current event of the month.

View Code On My Git Hub

The code has two files, one is PHP and the second one is CSS (EventCalendarShortCodeSnippets.css / EventCalendarShortCodeSnippets.php) these two files is necessary for starting point, if you know about css you can ignore the css files and add your own css base on that php code, just copy the PHP code and paste it using Code Snippets or into functions.php, will create a video tutorial below how to implement it for the sake of beginners.

If you have any issues running it please let me know, also ensure that THE EVENT CALENDAR is already activated and that you have an event of the current month so you know its working. 

 Bricks builder is one of the trend page builder for WordPress, this article is simple we will put any useful tools here that can be use for actual products of building page such as responsiveness and more.

Bricks Grid Template:

repeat(auto-fit, minmax(400px, 1fr)) - it set to function auto-fit for responsiveness and then set 400 for 2 columns with 1 fraction, this 400px is base on page-width size.

repeat(2, minmax(200px, 1fr)) - This is also simple and straight forward, the grid template here os suggested base on bricks documentation.

 This kind of strategy is easy to implement just go to your Elementor editor where you edit the page then drag the Divider element, do some settings changes, then add this line of code below into the Custom CSS.

Also, you need to change the width from Percentage into Pixels:

 Page Builder, I Am Using for WordPress Development:

1. Visual Composer
2. Divi Builder
3. Elementor
4. Thrive Architect
5. Avada Builder
6. Oxygen Builder

Visual Composer - This is one of the most common plugins I use to build Websites in WordPress CMS.

DIVI Builder - I once use this builder and it's really good as well, there are premium themes that use this builder called Divi Themes.

Elementor - This one is my favorite but since my recent client did not use this one as they prefer Visual composer I rarely use this, but what I like this one is that you can create your own custom elements with it, you can try it with a free version, and there is also an Elementor Pro version of it, I mostly do some small projects using this builder in my localhost server.

Other Plugin Extension I Use:

1. Overlaiz
2. Unlimited Elements for Elementor
3. Essential Addons
4. Happy Elementor Addons
5. OoohBoi Steroids for Elementor

Thrive Architect - I have a client who has all tools in Thrive and this builder is also good, but I think its too expensive, but to be honest its really good, you can create a decent page for the blog page before I develop a blog and Photography site using this builder.

Avada Builder - I also use this as it also has powerful tools, the only problem with this is that it is only intended for Avada Themes, not unlike Elementor which is compatible with most of the themes you can imagine.

#bryangransedevs #wordpressdeveloper #development #wordpress #photography #projects #pagebuilder #elementorpro #elementor

<!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>Javascript Fetch JSON FILE</title>
    <link rel="shortcut icon" href="data:" type="image/x-icon">
</head>
<body>
    <div class="output"></div>
    <script src="./app.js"></script>
</body>
</html>

const url = './data.json'; 
const output = document.querySelector('.output'); 
 let xHR = new XMLHttpRequest(); 
 console.log(xHR) 
xHR.open('GET', url); 
xHR.responseType = 'json'; 
xHR.onload = function() {
    
console.log(xHR.response);
    
let data = xHR.response;
    
data.books.forEach(result => {
        
output.innerHTML += `§{result.title}<br />`;
    
})
} 
xHR.send();
console.log(xHR);

 I've been working on my Javascript as I am going to improve my fundamental understanding in standard JavaScript into TypeScript as well as other JS framework like React, so currently I am working with so many small projects, and below are some of them.

My Javascript Roadmap

1. Learn an In-depth JavaScript fundamental, from basic to proffessioansl and technicalities of this programming language.
2. Learn TypeScript to make my code consistent and easy to track errors
3. Learn Vue.js and React.js for Framework

Small Projects I Work On

1. Quiz Projects
2. ISS or International Space Station API - what this small project is I pull out the exact location of ISS and display it in the map, and create a custom marker in it, using the LeafLetJS.
3. Random DOG Breed API - what this small project does is it lets the user ask a question to identify the current dog being displayed on the page, based on the random dog image being pull-out in the API I use, then it shows an indication if the user answers the correct dog breed.