Devlog #3: I updated the User Interface which looks MUCH better (after some troubleshooting) :D

Overview:

• Significantly upgraded user interface so it’s actually interactive
• My website is a website that has flashcards for people to learn about cool space facts, and there is a quiz at the bottom for people to test their skills!

Challenges:

• The biggest challenge for me this time was the User Interface. Before, the UI was pretty basic, and so the HTML and JavaScript had pretty simple variables and id’s for the styling in the CSS. But, when I went to upgrade, I had to change a bunch of variables, but I got it done.
• One challenge in particular was adding a progress bar to my quiz. Since I already had a structure inside my HTML and CSS, putting it there was not a problem. I thought I had it in the right spot for JavaScript. I was wrong. I spent 20 minutes debugging, then finally found out that it was in the wrong spot the whole time. It was in the function nextQuestion(index) instead of showQuestion(index).

Lessons Learned:

• Keep a close eye on which function is which and keep code organized
• Debug carefully and don’t mix up different parts of the code

Looking forward:

• I hope to publish this on GitHub now, thanks for following my project!!

Devlog #2: In this update, I added another flashcard set to my flashcard and quiz website. I edited the HTML, CSS, and JavaScript to make sure that it mirrored the other sets. One challenge with this was to keep each of the information on each flashcard separate. Each flashcard has an image, a title, and a short description specific to the object on the flashcard. Additionally, I had to add another function in JavaScript, but (as I mentioned in the last update), I kept the variables consistent across the functions. One thing I learned from today’s coding is that if the layout is kept consistent across the different flashcard sets and in CSS, it is easier to navigate and make more flashcard sets. In the next update, I plan to update the user interface to level up the experience. Thanks and see you in the next update!

Devlog #1: In this update, on my flashcard website, I added two flashcard sets. I also updated the user interface significantly, and I added a two-question quiz at the bottom of the page. I upgraded my CSS to show “blocks” (the flashcards) to make sure that the cards that were supposed to be hidden were hidden until the buttons were clicked. I also upgraded how the website looks by adding hover features as well as changing the background color and adding images to each flashcard. Overall, my biggest challenge was keeping ID’s and variables sorted from HTML to JavaScript for each of the flashcard sets. I solved this problem by sorting out each part of my JS into two categories for each set, changing the variable names to ones that made sense and were easy to keep track of (set1, container1, etc.), and finally updating the HTML with these new variables. I learned that keeping code organized from the start prevents problems later! I also learned the debugging process through the console in the website preview on my device. Another thing I learned is that divs in HTML can be extremely useful, especially when there are very similar elements on the page. For the future, I hope to add another flashcard set. Thanks and see you in the next update!

Devlog #1
I worked on the behind-the-scenes risk calculation for my rocket launch simulator website. This update focuses on displaying the final results and removing bugs. I removed the score system as that was getting messy and ended up being unnecessary, and I upgraded the rocket launch a little bit as well. I added another factor to it, launch failure reason, so that the user would know if their launch failed and why. The problems that I ran into were when I was trying to remove some of the unnecesary variables from before to clean up my code - my rocket launch was not displaying as a success in any situation. I figured out the problem by going into the console of my project on the web. The error showed up that a variable was not defined because I had taken out so much code. To fix this, I removed all of the unnecessary variables entirely and kept a clean flow in my JavaScript. After this, I learned that I should keep my JavaScript clean and remove unnecessary details as those could get in the way and mess up my code. I am getting close to my project submission. By next time, I hope to have a clean, mess-free user interface.