Import table from csv file

1

Hello,

I’m just starting to learn about web development and have already gone through a couple of online courses for HTML/CSS and some JavaScript. I’m in the middle of my first project for the freeCodeCamp HTML/CSS course.

I’m trying to help a non-profit with their website. It seems I’m the most technical volunteer they have.

There is an Excel spreadsheet containing a schedule of events for the calendar year. For last year’s schedule, I saved the file in .html format and got a file with each line marked up with

and tags. I then manually edited the file to get the desired markup.

I understand how to manually make a table with HTML tags. What I’m trying to do is avoid doing it manually. Ideally, I would write some code to read the file and have the code mark up the text.

Since I’m just getting started, I don’t know what I don’t know. Since freeCodeCamp introduced me to bootstrap, I used it on last year’s table and that worked well.

But this time I wanted to allow the table to expand when you click on the month and only display that month. There are other filters I would like to apply using a drop-down. I’ve seen how bootstrap can be used for this. So I understand the markup needed.

What I don’t know is what tools are available to create a filter to import this file.

Since I’m just getting started, I’m trying to stay away from the various frameworks like Angular, React and Vue. But maybe it’s time to pick one. Or maybe there is more to Javascript or jQuery I have yet to learn.

Sorry for the length of the question. I look forward to getting some direction from the community. I’ll update my profile to include my CodePen page.

Thanks,
AustinPowered
CodePen.io

3

@camperextraordinaire, good feedback. I have edited the post to add my CodePen link, but I haven’t done anything on CodePen for this project yet.

I appreciate how it will be a useful tool for sharing what I have done.

4

I’m sure there are a number of libraries around for converting a csv to JSON if you don’t want to handle it manually.

6

When I said I don’t know what I don’t know the emphasis would be on web development. I’m very comfortable with sysadmin tasks and the command line in Linux.

I know I could write a script in Python or even Bash to read the file and output the result as tagged HTML. But I also know that is not the right solution.

If you are saying JavaScript has the tools to solve this problem, then you have answered my question.

I see Basic JavaScript is my next course in the freeCodeCamp curriculum. I’ll stay the course and let you know when I post my solution.

Thanks,
AustinPowered