ad
ad
Topview AI logo

GIAIC Hackathon Milestone 4 | Editable Resume Builder | Hackathon Governor Initiative

Education

Introduction

Bismillah Rahman Rahim, Assalam! Welcome back to my channel. Today, we are going to embark on Milestone 4. Yesterday, we completed Milestone 3, and Inshallah, by this evening, we will also complete Milestone 4 together. Don't forget to submit your forms as well.

Milestone 4 is relatively simple, and the video is quite short. The main task will be to update our TypeScript and HTML files. We will continue building upon the dynamic resume we created in Milestone 3 by making it editable. This means that once the user generates their resume, they can make changes directly in the browser without reloading the page.

Step-by-step Guide

Here’s how you can start:

  1. Folder Structure: Navigate to the folder where you have created all your milestones. Copy the folder for Milestone 3 using Ctrl+C and then paste it using Ctrl+V. Rename this copied folder to Milestone 4 since we will be updating the existing code.

  2. Open VS Code: Open your terminal, type cmd, and then enter code . to launch Visual Studio Code.

  3. Edit HTML:

    • Open the HTML file and change the title to "Editable Resume".
    • Update the <h1> heading as well to reflect that we are working on an editable resume.
    • Modify any comments in the code from "dynamic" to "editable".
    • Locate the "Resume Display" section in the HTML file. Add the attribute contenteditable="true" to the <div> for resume display to make it editable directly in the browser.

  4. Update CSS: Go to the CSS file and make sure to add an outline style to the resume display area. A comment can be added to explain the addition of the editable resume outline.

  5. Modify TypeScript:

    • In your TypeScript file, replace necessary variables from "dynamic" to "editable".
    • Ensure we add the contenteditable attribute to any elements you want to make editable.

  6. Compile the Code: You might need to compile the TypeScript file using the command tsc script.ts to ensure there are no errors.

  7. Test the Editable Resume:

    • Input all necessary information such as name, email, phone number, education, experience, and skills.
    • Click on the "Generate Resume" button to see your editable resume.
    • Make changes directly on the browser page and see how updates happen in real time.

In this way, Milestone 4 enhances our resume builder, making it immediately interactive and editable. I will share the video for Milestone 5 shortly, which will be our final milestone. Please complete Milestone 4 as soon as possible and remember to submit your forms today.

If you enjoyed this video, please like, comment, and share. Inshallah, we’ll meet in the next video. Take care, and remember me in your prayers. Allah Hafiz!

Keywords

  • GIAIC Hackathon
  • Milestone 4
  • Editable Resume
  • TypeScript
  • HTML
  • CSS
  • Dynamic Resume
  • Content Editable
  • Resume Builder
  • Programming

FAQ

1. What is Milestone 4 about?
Milestone 4 involves updating the dynamic resume created in Milestone 3 to make it editable directly in the browser.

2. What changes do I need to make in the HTML file?
You need to change the title to "Editable Resume", update the headings, and add the attribute contenteditable="true" to the resume display section.

3. Do I need to modify the CSS as well?
Yes, you should add styles for the outline of the editable resume display area.

4. How do I compile the TypeScript file?
You can compile the TypeScript file using the command tsc script.ts in your terminal.

5. Can I edit the resume once it's generated?
Yes, after generating the resume, you can directly make changes to it in the browser without needing to reload the page.