A sequential background color changing gradient website for the CodeVixens Academy challenge.
To see how well you understand loops, conditions and arrays in Javascript.
Day 0️⃣1️⃣
- Create a Github repository containing a suitable name for your task.
- Create a one page website that changes its background gradient sequentially on clicking on the previous and next button. This means on clicking the next button, the background gradient should change to the next gradient in the default colors list; the reverse should happen on clicking the previous button.
- The initial background gradient on viewing the page for the first time must be (#780206 and #061161).
- A default list of background colors must be used. (Its referenced below)
- Once the default colors are exhausted, the background should again change to the first gradient on the list.
- Make use of Javascript ES6
- The webpage must be a single page
- Use fontawesome direction icons for the previous and next button
- The previous button must be located at the far left of the page while the next button must be located at the far right hand side of the page.
- Once the page is completed, push your changes to Github.
- Deploy it on Github pages.
Day 0️⃣2️⃣
Add the following features to the gradient site you built for day one’s task:
- A beautiful page loader on a white background that shows on loading the page
- A button to add more gradients to the default gradient list
- The button should open a modal box containing two input fields for the two color codes and a button to save them.
- Give your gradient website a good name e.g uigrids.
- Create a simple logo for your website (can be a plain text) and add it to the website
- A button to view and copy the css for the gradient website.
- The button should also open a modal box displaying the css of the gradient and a button to copy. Check https://uigradients.com.
- A hamburger icon with this text beside it “View all gradients”
- The hamburger icon should open a scrollable white colored overlay containing the gradients as cards. Check https://uigradients.com for more information
- Assign a creative name to each gradient
- #FBD3E9, #BB377D
- #00d2ff, #3a7bd5
- #f2709c, #ff9472
- #a73737, #7a2828
- #4b6cb7, #182848
- #C04848, #480048
- #5f2c82, #49a09d
- #232526, #414345
- #5C258D, #4389A2
- #4776E6, #8E54E9
Gradientti requires Node.js v17+
- Clone the repository
git clone https://github.com/elitenoire/gradientti.git- Install dependencies using
yarn
cd gradientti && yarn- Run locally
yarn dev