@berragurlesin

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

devlog #08
My favicon has been uploaded, and I’m now managing my repository on GitHub!

devlog #07
Hii again, I just can’t seem to finish my project :D I realized there’s one more feature that needs to be included in the MVP; users experiencing the same issue should be able to vote on it, and the tickets with the most votes should appear at the top when filtered. I added this feature and tweaked the look of the filter buttons (it looks much better this way) and I think it’s finally ready!

devlog #06
I was actually planning to finish the project, but at the last minute, I decided I needed to make this addition:D We can now view user profiles, review the issues they’ve posted and the solutions they’ve provided all in one place!

devlog #05
after an hour, I finished my logo design (using Canva, I actually saved it on my laptop, but I can’t transfer it) and placed it in the appropriate places on my site. I also added a favicon, it was visible at first, but it disappeared when I changed the image. I think it’s a caching issue:( I expect it will be fixed once I clear the local cache. I think my project is done! Next up is writing the readme!!

devlog #04
Hii, I’m here to share the updates I’ve made to my site since my last devlog.

First, I added a new filter to the system called “URGENT.” Users can check this box when their issues are truly urgent, allowing them to get a solution more quickly. I added a small icon in the top-left corner of cards marked as urgent to indicate this; the urgent filter flashes to draw attention, and the filter system is working smoothly.

Next, users can now attach images both when creating an issue and when submitting solutions. This will help them describe their situations more easily. Additionally, users can now attach their readme files to their comments.

I also worked on optimizing the use of localhost and local storage resources during the MVP phase. Uploaded media files are compressed on the client side using HTML5 Canvas and converted to Base64 format; I added file size limits and created a lightweight preview mechanism that keeps memory usage to a minimum.

Then, I also made improvements to the interface and styling. The pop-up boxes that appear when viewing issue details etc. looked too cluttered to me, so I adjusted the fonts and made the boxes wider.

Now, the MVP of my project is almost complete, I’ll make a few minor tweaks and get it ready for release. Thank you for reading this far!