Working link (in progress) can be found here.
This is a Js/UI/UX project where I'm going to have it to enter in several names and it creates a team with a captain and co-captain (chosen at random). Also a randomly generated team name will be added as well (for added humor and to keep the user engaged).
- Fix flexbox centering in css (✅)
- Make style sheet in Sketch
- have make-team button fade in (✅)
- highlight the
<li>button in full green (✅) - fix spacing (✅)
- animated gif for the sports ball (✅)
- space sports title out (✅)
- update footer (✅)
- add remove button on name (✅)
- responsiveness is incorrect on Android phone (✅)
- buttons on iOS are weird AF, but only on the front page. The second page they are fine. (✅)
- fix errors of undefined (✅)
- prevent user from entering in an empty value on
<li>(✅) - fix errors that say "delete" on the results (✅)
- remove edit on second page (✅)
- add edit button on name (✅)
- draw background for header (the sports field) (✅)
- entering in blank fields (✅)
- reverse what you have, enter things into array then into html, not visa versa (😥)
- If full name, put space in and interject a funny nickname (✅)
- One name, keep as is (✅)
- extra click on edit function (✅)
- fix bug where click was not making the submit button appear (✅)
- fix responsiveness with too small of icons (use media query) and captain font is off (✅)
- add cursor pointer over hover of icons (✅)
- clean up CSS (✅)
- add hover animation on icon hover (like a tilt or rotate) (❌)
- static path for bg.svg not working unless I put it in css folder (not right) (✅)
- Make Capitalization work (✅)
somehow get this to share stats on social media- create validator instead of alert (✅)
- Fix "undefined" in the nickname generator (✅)
- set timeout for fake loading page (for fun) (✅)
make copy paragraph funnier and more concise (enlist Kate on that)- fix edit focus (✅)
- refactor js (✅)
- capitalization of first word is off (✅)
- fix font issues (✅)
- fix background (✅)
Version 1.2 Bug appeared to be hammered out, Kate helped with the verbiage and I feel like it's solid now. Going to put it to rest until some other giant glaring bug pops out at me or I feel like monkeying around with it again.
Version 1.1 and everything appears to be working, there are a few bugs to work out but I think I have the lion's share of stuff. I think the UX needs to be considered as there are some issues where people enter in everything with a comma and then submit... not what I wanted. So I need to think that one through, which will be fun as that's my realm of expertise and I like it. Calling this one finished for now (unless I miss a giant glaring bug) and send it over to Matt.
Version 1 is done. Big thanks to Andrew, Kyle, Kevin and Justin who helped me out so much on this project. I'm happy to finally get to a point where I can say it's done (I'm sure there are a shit ton of bugs I've missed, starting with Safari). This is also my 67th consecutive day coding, I'm rather happy to have that in the bank and hope to keep the fires burning going ahead.
Home stretch. Just a few more things left and I'm super excited to get this done
Converted all styles over to Sass using gulp, that worked for the most part but now some things are off even thought I did a mass find-n-replace. Organized my sass file to do the colors right now too. Added in loader animation and it has some bugs but not many. This project is like a hydra, I figure out one thing and 2 problems arise. I guess that's coding in general. The spinning square (currently) was found on CodePen, I wrote it line by line to figure out how the author did it (it also seems to be fairly common on CodePen so I don't feel like I stole anything)
Spent many hours fixing the Gulp/Babel files, I had no idea what that stuff was at first, now I know and now I know to use a boilerplate in the future to skip all that crap. Jesus, what a nightmare. After many tears Kyle really helped out a lot.
Been pretty frustrated at this project as it was supposed to be just a simple rest operator for ES6, I had no idea it'd spin into something like this. I like it but jesus this is crazy. I fix one thing and three other things pop up.
Made a lot of progress on this and mostly due to memory (also there was one part on the preventDefault that it just magically worked. I don't know why and still am confused by that). The project is nearing completion and I honestly can't wait to style it and get v1 out.
Frustrated AF
I'm rolling down on a few extra things before finessing a few things. There are a few big ticket issues and smaller ones.
I added a few things by myself without really having to look, most notably I was able to do my own setTimeout() function which I was very happy about. I focused a bit on styling things out too this time as well. I need to make the color better. Wes Bos's tutorials are indeed, boss and very helpful.
I have completed a fair amount of code with the help of Justin, Bryan and Kevin (I used their expertise sparingly). I was surprised that Stack Overflow was receptive to my questions (as well as super quick) without getting slammed for asking the wrong thing. You can see my questions asked here and here. Big thanks to Thomas Konings on his Random Name Generator which will provide endless entertainment
Using Sketch to comp out my look and layout and will start building out the style sheet. That can be viewed by clicking here
On the landing page the user is presented with instructions to enter in names to create a team.
Here a user can enter in names, a "make your team" button appears to create the team
A randomly generated (and silly) team name will be created, a team captain will be picked at random as well as a co-captain and the team formed using ES6 rest operator in an array.
- user enters names in the form (comma separated)
- array is formed
- spread operator takes array and randomly assigns a captain and co-captain while the rest are team players
- Captain gets a shiny ⭐ ⭐ for being captain
- Co Captain gets only one ⭐
- team gets listed in a
- having a hard time with the forEach loop when I know is basic stuff, it's just that this is hard for me right now (being completely transparent).
- learning about the rest operator, that's fun, I like that
- added start of my bind child to the list. This may be a bit of a headache