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 HTNL 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.

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.

Devlog 46:

Edited some of the CSS styling on the windows and top bar.

I edited the CSS styling on things like the, text, the windows, and the top bar. I used functions such as, text-shadow and box-shadow, to make text and windows stand out and look much nicer.
I also edited the border color and size of many things to make them either pop or, look better in between colors. Things like animations scale and filter, also helped make it look much more appealing.

What did I learn and how difficult was it

I learnt more about CSS styling and how to make project look extra nice. I was playing around with the CSS learning new mechanics and functions, to help make different things and parts of project look more nicer and clean. This was fairly easy and I didn’t have any trouble with doing so.

Devlog 45:

Added a lot of in depth comments to my Javascript file.

And adding a download button to the paint window.

I went through my Javascript code and worked on improving my comments and adding more, where they were needed. I focused on being very descriptive with my comments, explaining what things do and how. I also added some hover animations to the paint board buttons.

Download button added

I added a download button to my paint window. I made it so when the user clicks the button, the browser download trigger is activated and the image is downloaded. I did this in Javascript using toDataURL().

Diffuculty

Making the comments was fairly easy, as I just went to important parts with no comments and added explanations about them. Also the Javascript for the download button wasn’t too hard, and I think I am learning more and more about Javascript, which is helping make it easier and easier.

Devlog 2:

Added Javascript and render pages

I added the Javascript to the testing.html page, so it can send the DNA sequence code from my Python file to my Flash backend.

What I learnt

• I learn that Javascript can communicate with Python and the Flask backend to send information back and forth to make the website work.
• I learn more about how to use Javascript with Python and how to make a website with a Python backend.

Devlog 1:

Making a flask website for the first time. Its a simple dna to protein translator. I used python to code the back end that translates the dna/rna sequence to protein. It used html and css aswell, and im just starting to do the javascript.

Devlog 44:

Fixed a z-index error, adjusted the colors and styling

I found a z-index error in the Javascript file, where the images when opened, wouldn’t go to the highest z-index, so I just added z-index 99 when window open.
I also mainly adjusted the colors, experimenting in CSS, to get the best design and the best text to background ratio in CSS.

Difficulty

Not too bad, because I didn’t have to go through hidden Javascript syntax errors and stuff, so it was mostly stuff I could just look around for a bit until I find the missing parenthesis or something.

Devlog 43:

Fix camera animation

Fixing the camera animation, making it so the user cannot spam open the window, making the animation run for however many times the user tapped the icon.

Difficulty

It wasn’t too hard to do, just needed to make some simple if statement to check if the window had been opened.

Edited

Also adjusted some styling in the map window making the text hover change in css.

Devlog 42:

Minimizer button

Added a minimizer button to all of the windows. I made it so that when users press the button, the hover filter glow will show on the corrisponding icon, to let users know the window is open.

Difficulty

This was fairly simple to do, and I just had to make some code for it in the same place near the close button in the Javascript.

Devlog 41:

Styling the windows, making it look nice

Fixed some of the styling on the windows, specifically on the manual window and the welcome window, since my rating said they looked like a power point. Trying to make my website look much cleaner and have a better design.

Devlog 40:

Camera Animation Added

Added a camera flash animation when you open the gallery app. It was quiet hard to make flash show after the camera image, but it works well.