My First Post! && href in Javascript

Thanks for checking out my first blog post on dev.to! In my inaugural post, Ill be discussing how to use the <a> href HTML attribute with javascript: what <a> href is, and why its used, how to use it in the context of js, and my experience working with <a> href. Before I jump into the technical details, Ill be sharing a little bit about my background, and the project that led me to write about href.

[about me]

Before we jump into the technical details about our main topic, a little more about me. Ive spent the last decade in tech, having worked for several start-ups in software in various client-facing roles. I didnt originally set out to work in tech, having read philosophy (specifically some arcane political philosophy at that) while in university, and rather fell into it. I now work as a technical program manager in big tech.

Ive been extraordinarily lucky to have had many brilliant technical mentors over the years. They taught me many software fundamentals and many technical management (re: Scrum, Kanban) theories. Over time, I picked up enough through mentors, on-the-job learning and self-study to be effective in my field, but I always felt at a disadvantage (re: imposter syndrome) for not receiving any formal software engineering training.

The pandemic provides some dedicated time at home for me to learn new things, so I decided to sign up for a coding bootcamp to round out my technical skills. This blog, and the javascript project I coded using <a> href are part of my program curriculum.

[info about my project]

The capstone for the first phase of my program is a simple web app. I decided to use a URL shortening API to code a single-page web app that allows users to shorten URLs, and have the links show up on the page. This project necessitated an understanding of and leveraging the <a> href attribute. This blog post shares what I learned about this topic through my project.

You can access the web app and source code through my github:

[What is <a> href and what does it do?]

Strictly speaking, the <a> is an HTML tag, and the href is the tag attribute. Href comes from Hypertext REFerence.

Together (and always together) <a> href renders a clickable link to a local file or url.
"anchor text. Which is the clickable text

Remember: You must use the href attribute with an <a> </a> tag.

Heres for the <a> href is constructed: Link , Target, & Title
Link is the url or file path.
Target is how you want the linked document to open (new window, same frame, etc. - you can read more on this here.
Title is what you want the link to show up as on the webpage

How to use <a> href in Javascript:

So, when might you want to manipulate document links through your javascript instead of coding the links into the html - after all, <a> href is an html tag and attribute?

There were two requirements for my URL shortener app 1) take a long form url and return a short link & 2) add both the original and short links to the web page as clickable hyperlinks.

We therefore need a mechanism to update the web page with the new content. To accomplish this, I used <a> href in my javascript to dynamically update the web page.

My approach to getting the URLs added to the DOM was to create an