You can also click on this WhatsApp button and here we can see we have the title which is this title that we see over here and then we have the link so in this way you can send the following.
Message to WhatsApp and the same way you can do this for telegram and uh Facebook as well now here at the bottom we have an icon for share so if I click on that the current URL will be copied to the.
Clipboard and you can go ahead and paste the URL of the current page that is a link of the post to anywhere you want so this is what we're going to start designing in this video so let's get.
started right here I have created this folder called social share buttons and I have opened it with vs code and I also.
File called index.html let's create another file called style. CSS and let's create one more file called main.js and let's start with the.
Index.html file now in vs code you can just type exclamation and press Tab and you'll have this basic HTML file code so let's link the CSS file over here and let's link the Javascript file over here.
Inside the body right now let's start with the markup of our design so the first thing we will do is we will create a container Division and let's give it a class of.
Social share container and in this for each of these buttons we'll create anchor tags so let's create an anchor tag over.
Here and uh we will add the link later and let's also give it a class so let's tap class let's set the class of the first button to Facebook button and here will also type Target equals underscore.
- Power BI Dashboard Challenge: Executive Dashboards that Connect Company Systems, by Poorni G.
- Power Apps Deep Linking to Screen App StartScreen & OnStart
- Automating business processes for T-Mobile with Power Automate
Blank so this will make sure that when - ID Card Make
We click on the link it will go to a new Tab and uh here inside this anchor tag let's create an IMG tag and here on the source let's tap Images slash Facebook.Logo.png right now let's copy this and uh paste it a couple more times so we need one for Twitter and then one for whatsa telegram and share button so for the second one let's change the class.
Name to Twitter and here for the image let's tap Twitter logo.png and the next one is WhatsApp so let's change the class name to whats apppp button and here for the image let's type WhatsApp.
Logo.png and then we have telegram so let's type Telegram and Here Also let's T Telegram logo.png and then lastly we have the share button so here let's tap share BTN.
And here let's set the image to images SL share icon.png all right so that's basically it with the index.html file now let's go ahead and style this and let's open this in our browser and let's.
See how it looks so I have this extension called live server installed in vs code so once you have this live server extension installed you can just right click over here in the HTML file.
And click on open with live server and this is how it looks now let's go ahead and style this so let's go to the style CSS file now the first thing we will do is we will remove the underlines that we.
See over here because these images are inside anchor tags so let's St social share container a and let's tap text decoration To None now we can see see.
That the underlines are removed right now let's go ahead and set the height of these images so let's tap social share container a IMG and let's say the height to 32 pixels and now when we hold of.
These images we want the image to
Increase in size so here I'll just add a transition so that we have smooth animations so I just tap all 300 milliseconds.Is and here let's tap social share container a colon hover and when you H the anchor t we will set a scale for the image so let's T.
Transform scale and let's set the value to 1.2 and now if you hold over this we can see that the image changes the scale right now we want all.
These icons to be one below the other so let's target the container division which is social share container and let's set the display to flex and flex direction to column and.
Let's position it to the center of the screen so let's St position fixed top of 50% and left let's set it to zero and right now it starts from the 50% Mark so.
We need to type transform Translate Y 50% and now it is exactly in the center right now let's add some padding to the Anchor tags so so here let's type.
Padding and let's set it to 16 pixels top and bottom and 12 pixels left and right right now let's go ahead and set the background color to white and let's add a box Shadow and let's set the value.
To 0 4 pixel 40 pixels 8 pixels rgba 0 0 0 and 0.3 and let's also add rounded Corners so let's St border radius and let's have rounded corners for the top right and.
Bottom right so let's t zero 8 pixels 8 pixels and zero now let's also style the notification that we see over here so if I click on this share button we can see we have this notification displayed over.
Here so let's create that let's go to the HTML file and let's create a division and let's call it toast and for now I'll just type message here and here we have the toast so let's.
Go to Styler CSS file and let's tap toast and let's set the font family to Roboto sensor and uh let's set the background color to dark gray and let's set the color of the text to White and.
Let's set the width to fit content and let's add rounded corners and let's set it to 8 pixels and let's set a padding of 12 pixels top and bottom and 32 pixels left and right now let's bring it.
To the bottom so let's St position fixed and bottom of 40 pixels and let's set the left position to 50% and now it starts from the 50% Mark so we need to type transform translate.
X 50% now when we want to display this we will add a class of active to this toast so let's type toast. active and by default let's go ahead and and uh set the transform translate so.
That the toast is at the bottom of the screen so here let's change this to translate and for the x value let's set it to minus 50% and for the Y value I just have 100 pixels so now this is.
Below the screen and we'll also set the opacity to zero and uh let's start transition so that we will have smooth animation and let's set it to all 300 milliseconds is now for the toast active.
Let's set the opacity to one and uh let's set the transform translate to NE 50% for the x axis and for the Y AIS let's set it to zero and now if you go to the HTML file and for the toast if.
You add a class of active we can see that the toast is being displayed and if I remove the active class it is hidden so we will display and hide it using JavaScript.
When we click on this share button and we'll also add the functionality of posting this message with the current link and current title to these different social media platforms using.
JavaScript in the next video so that's basically it for this video if you have any doubts you can ask in the comments below and if you like this video please click on the like button and subscribe.
To this channel to get the latest video updates thanks a lot for watching have a nice day.
