I am a Full-Stack Web Developer with an interest in creating user-focussed projects that solve relevant real world problems.
reacharity's Introduction
reacharity's People
Forkers
thomas-nicholsonreacharity's Issues
FUNCTION: Delete bookmark
Upon clicking the delete icon on the bookmark element, the info is removed from local storage for that specific bookmark and the bookmark is removed from the page
Make HTML for bookmark page
Basic HTML for bookmark page
Link HTML to api search javascript
FUNCTION: Banner
Upon opening index.html, the user is greeted with a banner slideshow that scrolls through different picture slides.
FUNCTION: Dynamically update cause description box
Once user has selected a cause, but before clicking search, description box text is dynamically updated to include a cause description
FUNCTION: Dynamically create search result boxes
Once the search button has been clicked, the results are dynamically updated into the webpage
FUNCTION: Convert address to coordinates via API
Retrieve the address details from each charity that appears in the search result, send the details through the API and then retrieve the coordinates in latitude and longitude
Create Initial File Structure
Creating index.html
Create assets folder
Create scripts folder and script.js
Create styles folder and style.css
Create screenshots folder
Logo
Create ReaCharity Logo
Create file structure
Creating the initial file structure:
Index.html
Bookmarks.html
Script.js
Style.css
Assets
.gitignore
Implement "Back to Top" button
This button should appear and stick to the bottom of the screen when the user has scrolled away from the top of the page
FUNCTION: Create a link using charity coordinates to google maps
Using the coordinates obtained from the API, create a function that creates a link in the search result boxes that sends the user to the address of the charity in google maps upon being clicked
Function: No results returned text
When a search doesn't return any results, we need a function to input text to tell the user that there are no results for those criteria.
FUNCTION: Bookmark the charity
Upon clicking the bookmark icon in the search result boxes, the charity info (JSON) is added to local storage
FUNCTION: Add Bookmark Button and store in arrays
Upon searching charities, the user can save individual charity name, website and address which they can view at a later time.
Add quiz (Enhancement)
Add a quiz to the website using a model. The results from the quiz will formulate a personalized charity recommendation
FUNCTION: Add bookmark to bookmark page
Upon loading the bookmark page, the local storage data containing the bookmarked charity info is dynamically added to the page
Loading display while result boxes load
Due to the potential long load time for the result boxes as a result of the address to coordinates API, a loading animation may help keep the page looking nice while the load occurs
FUNCTION: Retrieve data from Charity API
Design the function to retrieve the JSON from the API asynchronously upon window load
Make HTML for landing page
Create the HTML for the landing page
CSS for both Landing and Bookmark page
One person to complete the CSS for both pages to keep the design the same
Responsive Banner
Upon viewing index.html on responsive devices, the user is greeted with a banner slideshow that scrolls through different picture slides.
FUNCTION: Filter the charities based upon search input
Filter the charities based upon search input from the user
Defining User Requirement
AS a user
I WANT to find charities easily in my area based on my location
SO THAT I can learn more about and visit the selected charity
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.