Cloning of calendly.com website.

Hello bloggers, I hope you are doing great in your life and web developing section and searching for new ideas or maybe got any recommendation from one of your friend. So, as you are here now. I would like to introduce about me first. I am Harshit Sanas and IT background Student. I have been learning Web Development at Masai School . In this blog, I would like to share with a little project that I and colleagues have made. So lets start a journey of this blog.

What is Calendly website and what we have done in just span of 4 days?

Calendly is a scheduling software, which aims to save time, accelerate sales, and improve service quality. It eliminates the old-school way of using email and phone tags for scheduling appointments, calls, interviews, demos, and more.

So coming to a blog, there is a lots of challenge we gets. The below snapshot is landing page that is created by one of my colleagues which is almost similar to the landing page of calendy website. He used HTML and CSS for styling the website and some hover effects to the buttons in the page.

HTML5: It is used to build the basic structure of the website. All headings, Paragraph, links, forms etc. were structured by HTML.

CSS: It is used to add styling the website. Background images were used to make the website identical. Also grid and flex were also used along with the media queries to make the page responsive.

Javascript: it is used to add logical functionalities to the webpages like onClick function and dynamic aspects of the webpage.

Screenshot (205).png

So, coming to the next point below snapshot is a pricing page which consists of all the pricing details of the website and all about discounts and all other stuffs

Screenshot (206).png

Lets moving forward below snapshot is all about integration and scheduling of the app we are calling our data from local storage object in JSON format it was the new thing for me to store data and calling it from the local storage. Because of this method we have coded HTML less.

Screenshot (207).png

So moving forward below image is a query form that user has query and the team will get back to the user.

Screenshot (208).png

So moving next to the solution page, It contains the data like sales and marketing all the leader, all each and every single details of the company how it works, why it works, what its works.

Screenshot (209).png

Screenshot (210).png

Screenshot (211).png

So moving next there is a signup page where the user that sign-up with the gmail account and it will get store in the local data and while clicking of the signup button it shows and alert pop-up that user is successfully signup with the calendly.

Screenshot (212).png

So moving next there is a login page where the user that log-in with the gmail account and it will get store in the local data and while clicking of the login button it shows and alert pop-up that user is successfully signup with the calendly or else if the user put any wrong credential then alert pop-up comes please enter correct credential. Screenshot (213).png

After the user login with the gmail account it will directly redirected to the home page of user account. On the home page there is a create event button where the user can create an event after filling all the details and it get displayed on the main page. This is all possible by using javascript.

Screenshot (214).png

Screenshot (215).png

Screenshot (217).png

Screenshot (218).png

Coming to the next, In nav bar there is an account button and in account there is a account setting where user can change their profile details and change details whenever user want and there is also a delete button at the bottom of the page the user can delete his account where each and every events user added was delete from the account.

Screenshot (220).png

At last there is and logout option if user clicks on logout it will redirect to the signup page.

Screenshot (221).png

This has been a great and wonderful experience for us and whole team member to get coordinate with each other and build this website in a given time. The excitement of building a certain website almost similar to the main website was unexpectedly a good thing that we had. It is so satisfying. while building a website and merging on a github to the main page. There are many conflicts occurs while merging the pages. But the more you do it, the better you become.

It is not just about coding, it is about problem-solving. I have always believed in learning by building the code. This project could not have been made possible without the contribution of my fellow colleagues.

#HTML5 #CSS #JAVASCRIPT #CLONING #WEBDEVELOPMENT #FULLSTACKWEBDEVELOPER