Custom Events in LWC

skChildCmp.html

<template>
    <h1>Click below buttons to get URL for resources</h1>
    <lightning-button label="SFDCSTUFF BLOGS" onclick={sendMessageToParentCmp}></lightning-button>
    <lightning-button label="TRAILHEAD" onclick={sendMessageToParentCmp}></lightning-button> 
</template>

skChildCmp.js

import { LightningElement } from 'lwc';

export default class SkChildCmp extends LightningElement {

    sendMessageToParentCmp(event) {
        const selBtnName = event.target.label;
        console.log('****selBtnName:'+selBtnName);
        var selResourceURL;
        if(selBtnName=='SFDCSTUFF BLOGS'){
            selResourceURL='https://www.sfdcstuff.com/';
        }if(selBtnName=='TRAILHEAD'){
            selResourceURL='https://trailhead.salesforce.com/';
        }
        this.fireCustomEvent('selectedresource',selResourceURL);
    }

    fireCustomEvent(eventName, dataToSend){
        const eventFromChild = new CustomEvent(eventName,{detail:dataToSend});
        console.log('****eventFromChild:'+JSON.stringify(eventFromChild));
        this.dispatchEvent(eventFromChild);
    }


}

skChildCmp.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>56.0</apiVersion>
    <isExposed>true</isExposed>
</LightningComponentBundle>

skParentCmp.html

<template>
    <lightning-card  title="Custom Events in LWC">
            <div style="background-color:#E6E6FA;border-style: solid;height:200px;margin:5%;padding:2%;">
                <p>This is parent Component- container for skChildCmp</p>
                <br/>
                Display resource URL passed from child component using custom events---
                <a href={selectedResourceURL}>{selectedResourceURL}</a>
                <br/>
                <div style="background-color:#7ff6f6;border-style: solid;padding:2%;"> 
                    <p>This is child component present inside skParentCmp</p>
                    <c-sk-child-cmp onselectedresource={childEventHandler}></c-sk-child-cmp> 
                </div>
            </div>
    </lightning-card>
</template>

skParentCmp.js

import { LightningElement,track } from 'lwc';

export default class SkParentCmp extends LightningElement {
    @track selectedResourceURL;

    childEventHandler(event) {
        console.log("**recieved event detail-->" + event.detail);
        this.selectedResourceURL=  event.detail;
      }
}

skParentCmp.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>56.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
     </targets>
</LightningComponentBundle>