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