GIAIC Hackathon Milestone 3 | Dynamic Resume Builder | Hackathon Governor Initiative

Introduction

Introduction

Welcome back to my channel! Today, we will embark on Milestone 3 of our project, where we will create a dynamic resume builder. I mistakenly labeled the folder with Milestone 2; however, we are indeed working on Milestone 3. I’ve set up all the necessary files as we did previously.

Setting Up the HTML Structure

To kick things off, create an HTML structure that includes all key elements. We will start with an h1 heading stating "Dynamic Resume Builder" and set up a form to take user inputs.

1. Creating the Form: This will include elements for personal information such as name, email, and phone number.

2. Fieldset and Legend Tags: Use <fieldset> and <legend> to group information. The first fieldset will represent personal information.

3. Input Fields:

   • Label for Name
   • Input Type: Text (ID: name)
   • Placeholder: "Enter your name"
   • Required: True

4. Copying Input Fields: Duplicate the input fields for email and phone number, adjusting IDs and types accordingly.

Adding Education, Experience, and Skills Fields

Similarly, we will create separate fieldsets for:

• Education: An input area for education details using a <textarea> to accommodate multiline entries.
• Experience: Creating a new fieldset for work experience and applying similar formatting.
• Skills: What skills the user has, formatted like previous sections.

Finalizing the HTML Code

After structuring all fields, it’s time to add buttons. Inside the form, add a submit button labeled "Generate Resume," and set its type to "submit."

Dynamic Resume Generation

The next step is to create a new div below the form where the resume's content will display once generated. Link the external JS file, where the form's functionalities will be coded.

Implementing TypeScript Functionality

In the JavaScript file, we will:

1. Get References: Grab the form and the display area using getElementById.
2. Handle Form Submission: Use an event listener to listen for form submissions and prevent default actions.
3. Collect Input Values: As users fill in their information, capture these fields and store them in variables.
4. Generate HTML Resume Content: Utilize template literals to create a dynamic HTML content based on user input.
5. Display the Resume: Finally, output the generated content into the previously created div.

Conclusion

Once the setup is complete, test the functionality by filling in the details and clicking "Generate Resume." The resume will display user input in a structured format beneath the form.

If you appreciated the walkthrough, don’t forget to like, comment, and share the video. The CSS code will be provided in the description. Tomorrow, we will proceed to Milestone 4 and 5. Thank you for your support, and remember, Allah Hafiz!

Keywords

• Dynamic Resume Builder
• HTML Structure
• Form Elements
• Personal Information
• Education Fieldset
• Experience Fieldset
• Skills Section
• JavaScript Functionality
• User Input
• Template Literals

FAQ

1. What is Milestone 3 focused on?

   • Milestone 3 aims to create a dynamic resume builder that captures user input and generates a structured resume.

2. What HTML tags are utilized in the resume builder?

   • The primary tags used are <form>, <fieldset>, <legend>, <label>, and <input>, among others.

3. How is user input captured?

   • User input is captured using the getElementById method in JavaScript, allowing the script to reference each input field dynamically.

4. Will the functionality work without compiling TypeScript?

   • No, the JavaScript file must be compiled from TypeScript to function properly within the HTML page.

5. What happens when the "Generate Resume" button is clicked?

   • Upon clicking the button, the resume is generated and displayed below the form with the data inputted by the user.