Click here to view the ToThink or ToDo project.
Welcome to Think or Just-do-it app. This repo contains an application helps people write down tasks, filter them based on them being done or not OR helps them to find things to add to their to-do list, meaning gives them time to think in hypnotizing jumping balls. ¯_(ツ)_/¯.
This website is desigened to be responsive on a range of devices which is smooth to navigate for potential users seeking a to-do app or fun way for spacing out and it showcases the developers skill in javascript, the main focus for the website’s owner is to present his app for other people to help them write down tasks and manifest their ideas digitally. Potential website visitors can simply add their tasks or space-out a little bit in a fun GUI.
-
- A user can add tasks to the app.
- A user can filter the task to see which one are open, done or both.
- To be able to effortlessly navigate the website to find the right web application.
- To be able to find information about the app, through the modal.
- To be able to zone-out or to gaze at the (hypnotizing) balls.
-
-
- The image I found on (pixabay) represents what I tried to create digitally. It's well taken, with a clean mess around.
-
- The color used are colormap linear gradient of the color schemes purple, pink and blue and at most of the design purple is the color progression dominant. I choose the color purple because it's often assosiated with wisdom, creativity and magic. And it's my favirote color.
- Color inspired from dribble.
-
-
The fonts used within the website are Bootstrap standard font. Sans Serif font is used a well as a fallback font if the browser is not compatible with the fonts.
-
Desktop Orginal Idea Wireframes
-
Mobile Wireframes
-
-
-
- I'll apply more JS functions that a user can Interact with, such as a pop-up to set timer for tasks.
-
- I will find a hosting platform, obtain a domain as well to make the project official, and most importantly to have a bigger playground to play with and add more functionality.
-
- I will add functions to make the balls more fun to play with creating more balls by each click.
-
- Notfications of tasks about to end, plus I'll use the Google Task api and I think I can add more features.
-
- When Clicking on the logo, it takes you back home.
-
- The very fun jumping balls that can mesmerize users to think of a task.
-
- When clicking on the main two buttons a modal with description pop down and have some descriptive images of where the link will take you.
-
- There's a linear color changing background, makes the balls more fun.
-
- If you are done with the tasks you can make it disappear by and only check the tasks that are left.
-
- Bootstrap was used to assist with the responsiveness and styling of the website.
-
- Gitpod was used as an IDE to create and push the website to Github.
-
- Repl.it was used as an IDE to create and temporary view the website.
-
- A private API was used, but to be changed to Google Tasks API.
-
- Hover.css was used on the Social Media icons in the footer to add the float transition while being hovered over.
-
- Google fonts were used to import the 'Titillium Web' font into the style.css file which is used on all pages throughout the project.
-
- Font Awesome was used within the whole website to add icons for aesthetic's.
-
- jQuery came with Bootstrap to make the navbar responsive but was also used for the smooth scroll function in JavaScript.
-
- I used Canva to create the logo and size my profile image.
-
- Balsamiq used to create the design wireframes.
-
- Git was used for version control by utilizing the Gitpod terminal to commit to Git and Push to GitHub.
-
- GitHub is used to store the projects code after being pushed from Git.
- Code-Institute’s Gitpod-Full-Template repository was used to install the helpful extensions for the Gitpod workspace.
The W3C Markup Validator and W3C CSS Validator Services were used to validate every page of the project to ensure there were no syntax errors in the project.
- Inspect element (dev tools, was my secert best weapon).
- Am I responsive
- W3C Markup Validator
- W3C CSS Validator
- Inspect Element (Dev tools) = Was my main debbuging to-go tool.
-
As a Visitor, I want to easily understand the main purpose of the site and add tasks to a to-Do App.
- When entering the site I am greeted and with the simple design I see 2 buttons that makes me navigate easily.
- The main points are concluded immediately within the two buttons, I have all the information I need.
-
I want to smoothly navigate through the site to find information about the web application.
-
The users have two options:
- Click on the ballz button to go to fun jumpy balls.
- Click on the to-Do button to go to the web application.
-
I want to be able to add tasks to my tasks list.
- I want to add tasks and filter them based on if their done or not.
- I want to check hypnotizing balls, to think or not to think of next tasks to add.
-
- Getting null pointer exception (cannot read property " ..." of null, in many of my declared variable because I used Let instead of var.
- Getting null as well to my canvas because of its surronding with a div and not loading the JS first. Solved from here
- My get did not push at the begining and I had to use -f push to force it to push, still do not know why solved. Solved from here
- Gitpod did not work and delayed my submission and I used Repl.it instead and had to copy paste the code from there which was written in a different way like the structure of the folders. The gitpod problem was my most struggling problem, another problem with it is it has a delay from the server to respond to the code which made me change the code multiple of times until I asked around and tried the code somewhere else then I realized its from gitpod not the code.
The project was deployed to GitHub Pages using the following steps...
- Log in to GitHub and locate the GitHub Repository
- At the top of the Repository (not top of page), locate the "Settings" Button on the menu.
- Scroll down the Settings page until you locate the "GitHub Pages" Section.
- Under "Source", click the dropdown called "None" and select "Master Branch".
- The page will automatically refresh.
- Scroll back down through the page to locate the now published site link in the "GitHub Pages" section.
- Log in to GitHub and locate the GitHub Repository
- Under the repository name, click "Clone or Download".
- To clone the repository using HTTPS, under "Clone with HTTPS", copy the link.
- Open Git Bash
- Change the current working directory to the location where you want the cloned directory to be made.
- Type
git clone, and then paste the URL you copied in Step 3.
$ git clone https://alashtal.github.io/Just-Do-it_App_or_ToThink_Ballzz/
- Go to the clone folder and double click on the index.html to load the website.
- Content was written by the programmer. Moe's portfolio.(not yet upgraded)
- README File content was used from Code Institute README Sample
- Color show was from here Stackss
- I learned a lot of if not all of the physics from here
- I'm very grateful and thankful for my mentor @Maranatha Ilesanmi, The great Andreas Roth, Mark Mcgann, Lucy Rush and all the student care team.