Success depends heavily on motivation, yet maintaining that motivation is not always simple. We occasionally require that extra push to keep moving forward. The Motivational Quote Generator can help with that. This software was developed to offer users daily doses of motivational inspiration.
JavaScript, HTML, and CSS were used to create the app. It has a straightforward user interface and shows an inspirational saying and an emoticon to assist establish the mood for the day. By selecting the "Generate Quote" button, users can create a fresh quote. From a list of 34 quotes, the software chooses one at random and displays it on the screen.
What I built
A API called Motivational Quote Generator offers users a selection of inspirational quotes at random. Users can obtain a fresh quote to inspire and motivate them with just one click on the "Generate Quote" button. The quote is shown on the page by the app.
Category Submission:
The app has been categorized as "Wacky Wildcards" in the submission.
App Link
The app is hosted via github pages. LINK
Screenshots
Description
JavaScript, CSS, and simple HTML were used to create this project. The list of quotes that are displayed on the website is contained in the quotes array in the JavaScript file. A random quotation is chosen from the quotes array and displayed on the webpage when the user clicks the "Generate Quote" button.
The webpage's basic structure is contained in the HTML file. The inspirational quotation and emoji are shown in the div element with the id "quote-container". The "generate-btn" id, which is used to pick the button element in JavaScript, is associated with the "Generate Quote" button.
The website's styles are contained in the CSS file. The background color of the body element is #1c1c1e, and its sans-serif font is from the "Helvetica Neue" family. The maximum width and margin of the webpage are set using the container class. The text-align property of the h1 element is set to center, and the font size is 2.5 rem.
The deployment of a website to GitHub Pages is automated by the YAML code in this GitHub Actions workflow. This is my sample.
name: Deploy to GitHub Pages
on:
push:
branches:
- main
jobs:
build-and-deploy:
runs-on: ubuntu-latest
steps:
- name: Checkout code
uses: actions/checkout@v2
- name: Build and Deploy
uses: JamesIves/github-pages-deploy-action@4.1.0
with:
branch: gh-pages
folder: .
Link to Source Code
The app's source code is accessible on GitHub:https://github.com/abhixsh/motivate-me
Permissive License
The MIT license, a liberal free software license, governs the use of the application. This indicates that there are no restrictions on how the software may be used, updated, or distributed, including for commercial reasons.
Background (What made you decide to build this particular app? What inspired you?)
The "Generate Quote" button on this app's APK generates a random inspirational quote each time it is pressed. The website employs HTML, CSS, and JavaScript to produce a simple, aesthetically pleasing, and user-friendly experience. The goal of creating this app was to give users a quick and simple way to receive inspiration and support whenever they need it. The motivational quotes included in the app come from a wide spectrum of well-known people, including politicians, authors, scientists, and artists. They address a variety of issues relating to achievement, perseverance, and personal development. Anyone who needs a little incentive to get through the day can use the app because it is made to be user-friendly for a broad audience.
How I built it (How did you utilize GitHub Actions or GitHub Codespaces? Did you learn something new along the way? Pick up a new skill?)
This project is set up for CI/CD using GitHub Actions. The GitHub Actions procedure gets activated whenever there is a fresh push to the main branch. The procedure tests the JavaScript file to ensure that it is functioning properly. The workflow launches the project to GitHub Pages if the testing is successful. By doing this, the project is always current and functioning properly. Here I learned about GitHub actions very well to do this project. It added something new to my skill set.
Additional Resources/Info
Features: GitHub Actions
GitHub Actions Documentation
GitHub Pages
Top comments (3)
What a positive and powerful project to share with others, thank you for sharing. Great write up and analysis on how you approached developing the solution. Thank you for sharing!
Great project.Thank you for sharing.
A good example of learning & trying things within a simple project. Also, great work explaining the process. Thanks!
Happy Coding!