Random Quote

Solution for a challenge from Devchallenges.io.

Demo | Solution | Challenge

Table of Contents

• Table of Contents
• Overview
  • Desktop
  • Mobile
  • Built With
• Features
• How To Use
• learned/improved
• Acknowledgements
• Contact

Overview

Desktop

Mobile

Built With

Base

• HTML
• CSS
• JavaScript
• Node.js：20.16.0
• Vite：5.4.1

Other major libraries

• Lightning CSS

API

• Quotable API

Features

This application/site was created as a submission to a DevChallenges challenge. The challenge was to build an application to complete the given user stories.

• Create a random quote app that matches the given design.
• Use HTML to create the basic structure.
• Add author name, quote, tag,.. according to the design.
• Use vanilla JavaScript to add interactivity.
• Users can see a random quote when they first visit the page.
• Users can see a random quote after they select the random button.
• Users can copy the quote to the clipboard.
• The page should be responsive on different screen sizes.
• Deploy the solution and submit Repository URL and Demo URL.

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/h-yoshikawa44/ch-random-quote.git
# or
git clone git@github.com:h-yoshikawa44/ch-random-quote.git

# Install dependencies
npm install

# Run the Vite
npm run dev

learned/improved

• Review of how to use fetch api.
• ESLint v9 (flat config) I understand a bit more about how to configure the base.

Acknowledgements

• MDN - fetch API
• GitHub - neostandard/neostandard
• ESLint Stylistic

Contact

• Website：h-yoshikawa44.com
• GitHub：@h-yoshikawa44
• Twitter：@yoshi44_lion