Markdown Previewer

Solution for a challenge from FreeCodeCamp Challenge.

Demo | Challenge

Table of Contents

• Overview
  • Built With
• How to use
• Contact
• Acknowledgements

Overview

Hi 👋 this was a challenge to create a preview for markdown texts. However I wanted to add an extra functionalities. That was the hard of the project.

Thats extra functionalities were:

• Copy by click an icon
• Download into a file by clicking an icon
• Drag & Drop a file into a textarea

Was hard beacuse I had not knowledge about any of these. For that reason the main thing that I learned in this project was:

• The clickboard API
• How create a file usign Blob and <a>
• How to copy a file with dataTransfer and file reader

Built With

• React
• Next
• Deployed with Vercel

How To Use

To clone and run this application, you'll need Git and Node.js (which comes with npm) installed on your computer. From your command line:

# Clone this repository
$ git clone https://github.com/your-user-name/your-project-name

# Install dependencies
$ npm install
# or
$ yarn install

# Run the app
$ npm run dev
# or
$ yarn dev

Acknowledgements

• Blob API
• URL.createObjectURL to download elements
• What is a blob object
• Drag & Drop API
• How to read multiple files - Carlos Delgado
• How to read files from a file input -

Contact

• Website Juan Sifontez Portfolio
• GitHub @jsifontez
• Twitter @jsifontez_