Shipped this project!
Added an entire preview system, which you can even open in a new tab. ‘Fixed’ the saving system. I made the sidebar collapsible. You can right-click to open a preview or open it in a new tab.
Added an entire preview system, which you can even open in a new tab. Which refreshes under every single change. ‘Fixed’ the saving system; previously, you had to save it even if nothing was edited just by pressing, and it saved only to your computer; now it saves locally and only when you edited something.
I also made the sidebar collapsible. Now, when right-clicking, you can open the preview or open it in a new tab.
The preview also included a console that should display errors, but it hasn’t been fully tested yet.
Log in to leave a comment
Finally fixed the issue by getting rid of it and starting again. I made the inline suggestion work, added text, and autocomplete. Btw, to the reviewer, I am so sorry that you had to endure the last version because I’m a dumb ass and didn’t properly test my code.
Log in to leave a comment
This project took a long time, with not a lot of the website working. You can do some kind of basic stuff like open files, make tasks, code, and save them. Stuff like previewing will be added next version, along with a couple of other features and bug fixes.
So I couldn’t figure out why the website wasn’t deploying, I did something very stupid. I pasted it into Claude and SUCH a simple issue, in github i set the branch to /docs instead of /root. After some messing around in the JS, I resorted to Claude.
Log in to leave a comment
Fixed a couple of bugs regarding the file saving and tasks, and added color to the code in the editor itself. Made ctrl + s better because of permissions. Forgot to say when I commited on github but changed the icons up a bit.
Log in to leave a comment
This update changed everything. The sidebar was added, including a new tasks tab, an improved preview with semi-working code, a working explorer with new buttons to add file open folder and more, draggable files, and finally a working right-click. A working task system, which took a couple of hours, even the side color thing was super difficult, it looks way easier than it actually is, you wouldn’t believe it.
Log in to leave a comment
Currently made the general UI for the home/onboarding screen that is very visual studio code like, which includes a topbar, a welcome div with links to make or open new projects, and a recently opened projects, so you can start faster.
Log in to leave a comment
This was my first time making an extension, I finally learned why the elements, when inspecting are actually used for in programming, because I mainly use the console. I learned how to use the chrome://extensions/ to use my own extension. I researched on what .crx files are and found out that it was was I needed for extensions and for this project to qualify. Most importantly, I didn’t know what releases were in github so I know which will be important in the future, and when editing an existing website use !important to overrule the already existing css.
The arch theme extention was supposed to revamp the entire website, sadly I only had enough time and skill to adjust the sidebar and the background. I changed the sidebar into 2 different shades of blue similar to arch, and the background is a reddish color which I thought looked good but it isn’t for everyone. This project took so long because I couldn’t deside anything, this project went through so many different phases and color themes too bad I didn’t take any screenshots.
Log in to leave a comment
I continued improving the website, and learned to filter by categories, made my own articles, saved them in localStorage, and was able to reset the changes.
The V2 of this project now includes
Add article button
=> Article creation UI
=> Local saving of articles
=> new article editing
=> (Thank you to desh.kian suggesting ‘Really clean and polished website, but would be cooler if it has more articles. Maybe make it so that people can add articles to it. Overall, really useful for searching up linux commands.’)
Reset changes feature only after editing
Categories and filtering
Log in to leave a comment
I made a Linux wikipedia website name ‘Anything Linux’, inspired by wikipedia ofc, I wanted to make a detailed wikipedia like source of information for linux commands so that new linux users could find proper documentation for any distro or command they would need. Now how far has my vision come, not far we have 3 commands but in my opinion a great UI. What I think will be challenging is getting all the documentation and all commands in order with images which will be very difficult and I currently don’t know how. I’m honestly very proud of the UI.
You can search a command in the searchbar or choose it in the sidebar. You get all sorts of information like Syntax, Examples / use cases, Common errors, Tips, Related Commands, and images. You can choose to edit it if you find mistakes, which will get saved in localStorage. The only commands available right now are the ls commands, the cd commands, and the pwd command.
Log in to leave a comment
Honestly, I haven’t been to expirienced with JS, this project helped me use math in a more creative and, honestly kinda fun way. I loved testing the project after each small change. Overall, very fun challenge, a lot of research into JS and how to use it. I’m proud of myself for doing around 1 and a half hour in one go and making it work.
Created the files (index.html, style.css, and script.js). In the CSS file, I set the layout to a 4-by-4 grid with squares/rectangles as the board. Then I made it spawn in one play to see if the number goes in the boxes or not, after I made it randomly spawn. Firstly, I added moving to the left, fixed some glitches before adding the up, down, and right movement types. But it didn’t really work too well because I forgot a very important mechanic, merging of numbers, so I made it so that when the same numbers touch, it merges and double the value.
Lastly, I added some smaller features, like the number of moves, total time, score & best score.
Log in to leave a comment
This project simulates rolling a six-sided die. Instead of showing just a number, the result is displayed using a visual dice face for better feedback. Each roll is animated to feel more like a real dice roll, and previous rolls are saved in a history list.
When you press ‘ROLL THE DICE’, the opacity changes, showing that you can’t use it while the dice is rolling. It has a little animation that cycles through each die number, then randomly stops on one of them. It gets added to your history of past rolled die, which you can clear using the ‘CLEAR HISTORY’ button. Each button has a special style/animation when you hover over it, and it also changes your cursor to indicate it’s clickable.
Firstly I made some basic text like the D6 dice roller text, the roll a dice button, and the result. I originally made it display a number, but changed it to a more visual one. I made a styles.css where I put all the styles, like for the button and the text. After I made the history and separated the JS from the HTML by making a script.js file.
Log in to leave a comment