SWAG Tab

devlog #13
it seems like SWAG tab is finally done! We can now adjust the sticker sizes. And I wrote the project README so you can get a handle on the details. I’d be absolutely happy if you could take a look and share your feedback

devlog #12
hii, being motivated is important and as people with goals we need it. That’s why there’s now a motivational note box in SWAG Tab! I’ll also be working on adding default options (plus, you can move this box wherever you like and it works AWESOME) Also, NASA sent a video a few days ago but it gave an error again, it seems to be a permissions issue. So I added a button that links directly to the NASA APOD page, that way the video can be watched! I hadn’t been able to share a devlog but if another video comes through I’ll show it. Ooh, and I also made it possible to drag the NASA photo box!

devlog#11
hey everyone! you can now write a name using ransom note letters inside the “my name is” tag (I’m thinking of changing this style or adding different options later) I added three font size levels, the letters shrink as the word gets longer, so it looks betterrr. ooh, and also since I was used to it I was entering Turkish characters, so I added a function to convert them (though adding different characters directly later on might be better)

devlog#10
heelloo, I was getting an error when a video came from NASA, so I had to write the code to handle both scenarios. But then I realized there was a conflict because the image wasn’t being hidden when the video appeared. I also learned that YouTube links etc. can come through as well, so I added a parameter to account for those cases too. Insallah, this solves the problem!

devlog#09
hiyaa, I spent a long time trying to add a function to adjust sticker sizes, but once I added it other features stopped working properly…I couldn’t add or drag stickers, and so on :( If you have any ideas on how to fix this, please lmk. BUUUT I did add something I really love, a cute label where you can write your name! I made it stick out a bit, adjusted the angle and placement etc. though I’m going to try changing the text to a different font. Also, a problem show up with the image/video coming from NASA today. I think it is a video for today and the issue occurs from that, I’m gonna try to fix it now

devlog#08
Hi guyss! There is a super important update, SWAG Tab is now even more customizable! I’ve coded the sticker adding feature I’ve had in mind from the very beginning (some parts were really tricky :D) First, I loaded default stickers and set their positions. I decided that two of them shouldn’t be deletable (the star near the search bar and the limited edition sticker. I used “canBeDeleted” boolean variable to ensure those set to false couldn’t be removed) though their positions can still be changed by user. (actually, you can move any sticker wherever you want, though there are a few bugs I still need to fix) In the video, I clear the local storage and show the default positions. Also, all of the user’s edits are saved locally. In short, the user can now add and remove stickers and move them anywhere they want on the page. However, the sizes of the stickers need to be adjustable, the next devlog might be about that! If you’ve read this far, lmk what do you think about stickers!

devlog #07
we can now change the backgroundd I’ve added a few options that match the theme, but you can also select your own file if you want. I designed the icon for the background settings myself, I didn’t want a normal settings icon, so I added the star to it, I think it looks good now!

devlog #06
hey there! SWAG tab is progressing. I thought that if I am building a tab I need to add shortcuts, and I’ve spent the last three hours working on this. Now there’s a box that we can add our fav shortcuts. I put a lot of thought into the design, and this is the result! I used Google favicon fetcher to get the app icons (otherwise they look pretty bad) and I added a button to delete them if needed, make them match to the overall theme. I also applied a glittery background to the box that I really like. As the next step, I’m thinking of adding a feature to change the background color (the blue one), because I’m already itching to see some different colors! :D

devlog #05
now, I can fetch images from NASA! I added a api key and used it by following the steps in the guide. I learned that NASA sometimes uploads videos for APOD, so I wrote an if statement and make sure nothing breaks when a video loads. I also customized the styling!

devlog #04
standard fonts didn’t give me the vibe I was looking for, so I cropped the numbers I mentioned in my previous devlog, made them all the same size and removed their backgrounds. Got them working on the clock! made the images cycle through in order every second. How is it going?

devlog #03
hii, I created a live digital clock that updates itself using JS’s date object and the setInterval function. I wanna change this clock with numbers in my own style (I found a font!) now I’m going to look into how to do that

devlog #02
I found these colors on pinterest (I added the reference) and applied that blue color to my background, I also added a google search bar and adjusted its colors as well

devlog #01
hey everyone, I followed the steps in the mission guide and I think I’ve got the basics down (yup!) next up is customizing my own tab