Wikipedia pages added to all of the pages.

I just added some Wikipedia i frame to the HTML pages of my website. The i frames show the topic of the buttons from when you click them, to show the corresponding Wikipedia topic. The Wikipedia frames are also usable and you can even search for other things on them.

Devlog 52:

Just tiding up my code with comments and editing the README.md

Just tiding up my code, adding comments and making sure it all looks nice for the ship. I have learn a lot from making this project and I am happy with how it turned out. This will be my final devlog, and so please give me good ratings and feedback, so that I can learn and improve.

Devlog 51:

Adding stars, realistic tilt, and better quality textures to the 3D earth.

I added 2000 stars to the earth window and even made a realistic tilt for the earth, like how it is in real life. I think that the stars made a big impact on the overall feel of the window, and makes it look much better.

• I also added a 8k quality texture onto the earth model instead of a 2k quality texture, so that the earth would be more clearer to see.

Devlog 50:

Adding new 3D Tiger Earth window.

I added a new window made with three.js, that is a 3D globe of the world that is, movable, rotatable, and zoom in able. I also added a feature where you can stop the rotation, so that its easier to view (And find the hidden Tiger). First I made the 3D circle and of the globe and then added the texture and animations.

What did I learn and what was difficult.

This is my first time making a project like a 3D thing, so I was a bit new to this. Now I have learnt much more about how to make 3D projects like this and I hope I can make many more simulation projects like this in the future.

Devlog 49:

Adding tiger population chart window and UI polishing.

I added a new window that shows the tiger population in the countries Russia, Nepal, and India. The data points are the milestones of there tiger conservation across 2010 to 2016 to 2022. The chart is a line graph and the 3 line variables are the countries. The chart looks very good and I am happy with how it turned out.

• I also polished more of my webOS using nice fonts such as “Fira Sans”, “Bold”, and “Italic”. I styled it and made sure across my webOS there was a orange, black, and white theme, like the tigers colors.

What did I learn and what was difficult

The most difficult part of it was debugging everything when I found errors. I learnt the functions for making a graph in JavaScript and how to get data and put it into a graph using code, while still making it look nice. This helps me a lot especially for more projects I might do in the future using data and statistics.

Devlog 12:

Final devlog

Just fixing up some things and some button styling so that it works better on all screen sizes. Please give thoughtful feedback as I am learning Python and Javascript still and want to improve a lot.

Devlog 11:

Changing some off the font types and fixing text to background color visibility.

Just fixing up some off the CSS with the text fonts and some fonts being hard to see because of the background. I fixed this by adding a box to the text so that it is more visible. I also used a font type that I thought looked very nice on the title.

Devlog 48:

Updating the CSS styling and improving the interface visibility.

I edited the CSS stying adding more things such as box-shadow and different color border. I made sure the web os looked good and wasn’t too heavily colored, that might make the text less easy to read. I also fixed the minimize button in the link window since it was off centered, because of the small size of it compared to the normal window sized ones.

Difficulty:

For me to be honest, this was difficult not because of like syntax and stuff, but because I’m not very good at styling. I tried to like make it pop and look extra good, and I think I have done well.

Devlog 10:

Edited some of the CSS styling and fixing up the code

I fixed up some of the Python backend code that wasn’t working how I wanted it. I adding stuff to the CSS changing colors and animation. I also added a success animation for when you input is valid.

What I learnt

I am learning a lot more about how flask works and Python, and I think that this is very beneficial for me. I learnt more about how to handle errors and make good error messages.

Devlog 9:

Changing the CSS styling making the website look good.

I changed the CSS styling on the buttons and links. I made sure that the buttons stand out in the white background, by adding a light grey-ish color. I also edited some of the border coloring, sizings, and text shadows, making them pop. This helps me to learn more about CSS styling, and how to make a project really look good.

Devlog 8:

Added error animation on the pages.

I added an error animation on the pages when you dont enter anything or you enter invalid input. I made it with Javascript adding the if statements and stuff, and connected it to my animations in CSS. I added a shake animation with some red text. I also had to re arrange some code for this to work. The final product looks very good and I am very happy with how it turned out.

Devlog 7:

Added the HTML and Javascript for the protein to DNA.

I added the Javascript and HTML for the protein to DNA code, so that it could work on my flask website. The Javascript code was simple, because it was the same as the other one, just switching up the variable names around. I also had to do the HTML for the website and for the flask, which meant that I had to make another HTML file for the new feature. I made the it on another page so you can visit both of them from the website on a link.

What did I learn

I learnt more about how Javascript works in a flask website, and how HTML has to be coded slightly different in order for it to work on flask. This will help me for future projects, using flask and without it.

Devlog 6:

Adding new feature to the website.

I just added a new feature where, you can translate a protein chain into a dna sequence. This is very similar to the other dna to protein translator, except its the other way around. It using mostly the same functions and stuff with slight differences. Right now I have only done the Python backend, and I will be doing the HTML, CSS, and Javascript, to make it work on the website later.

What did I learn.

I learn how to make a protein to DNA translator in Python. I learn how to code the back end, to work with flask aswelll, to display it on the website. I also learn more about the fundamentals of Python and I think I am progressing very well.

Devlog 47:

Add text on icon hover, that displays window name.

I made it so that when you hover over the icons in the icon bar, it will show the name of the window that the icon is connected to. This makes it easier for users to know what icon goes to which window, without guesses based on the icon image.

What did I learn and what was difficult.

At first I thought that making this would only need a bit of HTML and CSS, and normally it would. However I came upon a problem and CSS wasn’t fixing it, nor was the HTML, so I had to adapt and use Javascript to fix my error. Eventually it worked out in the end, and not much Javascipt was actually needed. This helped me to learn how to fix errors outside of the box, and too try different ways to fix them.

This helped me learn more about problem solving and debugging, which will help me in future projects.

Devlog 5:

Edited some comments and other stuff.

Today I just fixed up some comments and code, and just edited a few parts making sure that it all looks good.

Devlog 4:

Writing comments

I just finished writing some comments in the Python and the Javascript code. I wrote in detail what the main functions do and how. I Mainly put comments on important things, and things that may need explaining.

Devlog 3:

Edited the CSS styling of the website to make it look much more appealing.

I improved the design of my website using CSS. I added text shadows to the text to give it more depth, and I added things like smooth hover animations/effects with filters and scale increase. I also added buttons to the links and things, making them stand out more. I experimented with different colors and functions, and picked the one that fitted best.

What I learnt and how difficult was it.

I learnt more about different CSS properties such as text-shadow, box-shadow, box-sizing and many more. I also learnt how different animations and effects can have a big difference on the overall website. This was not extremely difficult, but it did take some experimenting for it too look good, and I had to try different properties and see what they do.