Challenge ideas

[dvidsilva]

From @dvidsilva on January 5, 2018 22:29

Keep this issue open, we can track here ideas for challenges.

• [ ] Select boxes that depend on a previous value
• [ ] Select boxes that depend on a previous value, with React
• [ ] File input , drag and drop, allow to drop a file and show a preview
• [x] Client side form validation
• [ ] Array do CSV download file
• [ ] Git cherry pick
• [ ] Display data from JSON in dashboard
• [x] Display data from CSV as table
• [ ] Draw on a canvas from a bit array. Like /place.
• [ ] Create an npm package
• [ ] Display a bunch of data in a dashboard from a json file like https://pastebin.com/6a8rRFxS
• [x] CSS fizz buzz
• [ ] Make a login page with a fake endpoint. Add errors. Etc. Look at Json server
• [ ] Git merge conflicts
• [x] Get repos from the github api and lists them
• [ ] Get images from an api and display them | imgur front page replace
• [ ] Get threads from reddit | reddit replace client
• [ ] black or white - https://github.com/dvidsilva/blackorwhite
• [ ] black or white with camera
• [ ] dogeface http://dvidsilva.com/dogeface/
• [x] the holy grail https://en.wikipedia.org/wiki/Holy_Grail_(web_design) with flexbox
• [ ] audio player
• [ ] youtube player
• [ ] subscribers / events
• [ ] create your own templating library, like handlebars
• [ ] dvidsilva/feelthebern - add stamps to pics
• [ ] poker dealing cards challenge - airbnb
• [ ] codecorgi challenge idea get location/weather - nice design -
• [ ] annoying modal to ask for email
• [ ] design a data base model
• [ ] ~/code/addepar-test.js
• [ ] Chrome extension
• [ ] Chrome theme
• [ ] wordpress template design
• [ ] Super crappy code base, installing jslint on it and fixing errors
• [ ] JS code with bugs, like jquery not running
• [ ] Change portfolio template and add your personal information and publish it
• [x] Add service workers to a current template from anywhere
• [ ] Add a google maps to a thing using the API
• [ ] React Context
• [ ] React hooks
• [ ] Upgrading from react 15 to 16

Copied from original issue: corgicode/api#27

[dvidsilva]

Mobile web certificate by Google

• [ ] Networking - get Image data using the fetch API, display errors if they occur, display the image if successful
• [ ] Networking - post data, (have a server running in the back?) have a form that has some inputs and when you click a button sends the info to the backend
• [ ] PWA Shell - create a service worker that only caches the necesary files for the app shell, CSS, JS, images, logo, header, and footer,
• [ ] Create a responsive layout:

[dvidsilva]

[dvidsilva]

Use new features of Javascript:

• [ ] change all instances of var for let and const

[dvidsilva]

Automated Customer support chat system. The bot responds with an answer from a dictionary or a default depending on the user input.

[dvidsilva]

• [ ] turn a website into a motherfucking website

[dvidsilva]

Responsives layouts challenge

https://responsivedesign.is/articles/advanced-responsive-design-techniques/

Maybe toggle between techniques

• [ ] Column drop (elements stack)
• [ ] Mostly fluid (very similar to the other, but margins to the side)
• [ ] Layout shifter (instead of flowing, everything just changes or appears or dissapears)
• [ ] Off cancas (remove eleemnts that are not used frequently, like navg) and behind buttons

[dvidsilva]

• [ ] Turn a website's navigation into a hamburguer hidden menu

[dvidsilva]

Responsive tables

Nanoodeegree lessons 5

https://css-tricks.com/responsive-data-table-roundup/

• [ ] Hidden Columns (abreviated data)
• [ ] no more tables
• [ ] nested tables

[dvidsilva]

Responsive images

Nanoodeegree lessons 6?

https://css-tricks.com/responsive-data-table-roundup/

• [ ] relative height or width
• [ ] using cool css units, like vmin, vmax
• [ ] compressing them, using media queries for which image gets displayed
• [ ] displaying images as background in an element

[dvidsilva]

Use unicode characters / or icon fonts to replace images

https://unicode-table.com/en/search/?q=music

[dvidsilva]

Accesibility

?

[dvidsilva]

https://www.reddit.com/r/learnjavascript/comments/aoqow1/practice_problems_for_improving_js_skills_for/?st=JRXKXA9S&sh=9520745e

[dvidsilva]

https://medium.freecodecamp.org/more-project-ideas-to-improve-your-coding-skills-99f48d09bb4b

[dvidsilva]

Ideas from post-it:

• [ ] Dynamic table: (Create a table from a data structure) CreateTable([{name: 'Joun',....}])
• [ ] Componment, search emoji from a list of emoji, emoji picker. Search by color or other arguments, not just name
• [ ] Refresh a list of compnents, without flashing, like shadow dom? append a row or alter a tree without refreshing the page, or replacing the whole content
• [ ] Form builder: create a form from a strucutre, like CreateForm([{name: 'nombre', ...}]), advanced, with event listeners etc
• [ ] Giphy search: Similar to the github or imgur one, but using the giphy API (more reate limiting)
• [ ] Create a portfolio page: Clone a repo and release it in github pages by changing your personal info (very intro)