Website Link: Compiled 50
A CS50 Compilation and more!
It is a responsive web-based application where most project from CS50x 2022 course are compiled. Compiled projects are given a graphical interface with additional/different features. It has a 'login' system which requires users to log in before accessing and trying out the compiled projects. Although logging in as 'guest' works too. A 'contact us' feature allows user to send message to the developers via email. Compiled projects consist of 10 projects derived from labs and problem sets of CS50x 2022.
- Python 3.10
- Flask 2
- SQLite 3
- Bootstrap 5.1
- HTML, CSS, JavaScript
Website Link: Compiled 50
-
Install python and pip. (Not sure how?)
-
Install necessary python packages using pip. (Not sure how?)
-
Try running the command below on the root directory.
flask run -
If an error occurs, try following the steps again.
Your Compiled 50 should work after installing. However the 'contact us' feature won't send the message/email to you. Mail server must be configured that the username and password is from your email. To do this:
-
Add 2-Step Verification on the Google Account you want to receive the message. (Not sure how?)
-
Create an App Password. The given 16-character code will be the password for your the mail server. (Not sure how?)
-
Create an OS environment variable for username and password (Windows) (Linux). Make sure the variable name for username is 'COMPILED50_USERNAME' and variable name for password is 'COMPILED50_PASSWORD'. The environment variable should look like below.
COMPILED50_USERNAME=YourGmail@gmail.com COMPILED50_PASSWORD=abcdefghijklmnop -
Try sending a message using the 'Contact Us' feature, then check if the email has been sent to your gmail.
-
Mario is derived from CS50x 2022 Problem Set 1. This follows the 'feeling more comfortable' version of Mario. It works exactly the same as the problem set. Height is limited to 1-8 inclusive. The main difference is that the blocks are reperesented as an actual image from Super Mario Bros. in the web-app, instead of printing '#' in command line.
-
Credit is derived from CS50x 2022 Problem Set 1. It also works exactly the same as the problem set. It also utilizes Luhn's Algorithm to determine the validity of the card. It shows the type of credit card and a sample image of it.
The added feature here is a 'Not sure what to enter?' dropdown. The dropdown shows sample American Express (AMEX), Mastercard, and Visa credit card numbers. Beside each credit card number is a 'copy' button. Hovering the copy button triggers a tooltip saying 'copy'. Clicking the copy button automatically copy the credit card number it is assign to (or just beside it) as clipboard and automatically type the credit card number in the credit card number input box. A javascript alert informs the user about the automatic copy-paste of the credit card number.
The downside of Credit is that it is limited to the given constraints of the problem set. Card types does not always align with the given conditions, there are always exceptions. For example, according to the problem set, MasterCard starts with numbers from 51-56, but according to PayPal some MasterCard starts at 2.
-
Scrabble is derived from CS50x 2022 Lab 2. It works slightly different from the lab. This only asks one word from the user, instead of asking two words in the lab. It only shows the total score of given word (with each letters' score), instead of comparing the score of the two words in lab. It is also stricter in terms of accepting words. Before showing the score of the word, it verifies the validity of the world by checking it to a dictionary. The dictionary used is the large dictionary from CS50x 2022 Week 5 Problem Set 5: Speller.
-
Readability is derived from CS50x 2022 Problem Set 2. It works similar to the problem set. The readability test used is Coleman-Liau Index which considers the number of letters, words, and sentences of the paragraph. It will show the approximate grade level needed to comprehend the given paragraph.
The added feature here is similar to credit, a 'Not sure what to enter?' dropdown. The dropdown shows a list different grade levels with a 'copy' button beside. Clicking a grade level, shows a sample paragraph intended for that grade level. Hovering the 'copy button triggers a tooltip saying 'copy'. Clicking the copy button, automatically copies the paragraph assigned to (under) the grade level as clipboard and automatically paste the copied paragraph in the paragraph input box. A javascript alerts informs the user about the automatic copy-paste of the paragraph.
A downside of using readability is its lack of validity checks. Any character, including digits, special characters, characters from other languages, are accepted as letter which can affect accuracy of the results. Considering the readability test used is intended only for the English language.
-
Substitution is derived from CS50x 2022 Problem Set 2. it is similar to the problem set, key difference is that this has a function to decrypt. The encryption works by mapping the given key (sequence of 26 distinct letters) to the English alphabet. It allows user to encrypt or decrypt, instead of just encrypt in the problem set. If the user decided to encrypt, the result is the cipher-text of the given plain-text. If the user decided to decrypt, the result is the plain-text of the given cipher-text.
Another additional feature is similar to credit and readability, a 'Not sure what to enter?' dropdown. The dropdown shows a list of different keys with each having a copy button beside it. Hovering the copy button, triggers a tooltip saying 'copy'. Clicking the copy button, copies the key assigned to (beside) it as clipboard and paste the copied key to the key input box. A javascript alert informs the user about the automatic copy-paste of the paragraph.
The downside of substitution is that entering with incorrect/lacking inputs will clear the input boxes. A possible fix would be to check the inputs from the front-end using javascript, preventing incorrect/lacking inputs to reach the back-end (flask).
-
Plurality is derived from CS50x 2022 Problem Set 3. It works similar to the problem set. It is divided into three steps. The first step asks for the number of candidates and voters.
The next step asks for the name of each candidates. It checks the validity of the name by ensuring that the given name does not contains a digit or that it is duplicate. The progress bar represents the progress in naming the candidates. An empty bar means no candidate has been named. A full bar means all candidates have been named. The next step starts, if all candidates have been named.
The next step is voting phase. Each voters cast their vote by selecting the name of the candidate. Similar to the previous step, a progress bar is present. The progress bar represent the progress in voting. Empty bar means no votes has been cast yet. Full bar means all voters have casted their votes. The result can be seen in a table below, updating with each cast of votes. If all voters have voted, then the winner will be presented. User can also see the final tally of votes by clicking the 'see result' button.
-
Filter is derived from CS50x 2022 Problem Set 4. It follows the 'less comfortable' version of Filter. All features from the problem set is present. The four (4) filters available are grayscale, sepia, reflection, and blur.
The additional feature here is that it allows user to upload any images (assuming its file extension is valid). For users hesitant to upload an image, there is also a 'random image' button. Clicking random image button opens up 4 images of dogs. Selecting one of them applies the selected filter to the selected image.
Editing images manually via bitmaps in the problem set is far more complicated than using CSS filers and transforms.
-
Inheritance is derived from CS50x 2022 Lab 5. It works similar to the lab. Although this gives the user an option to select a generation and its alleles. 'Randomize all' button exists which works the same as lab. Clicking randomize all button randomizes both alleles of the all grandparents. And parent and child must inherit one allele from each of their parents randomly.
A downside of inheritance is its implementation. The code could use a more efficient algorithm and a better data structure instead of using conditionals to all possible outcomes.
-
Trivia is derived from CS50x 2022 Lab 8. The lab itself give us freedom to aks any questions that we want. I personalize it to be a 5 item quiz about the Philippines. There are 7 multiple choice questions in the pool of questions. Only 5 from the 7 questions are going to be asked. The probability of each question being picked from the pool is random. Clicking submit redirects to the result page. But users must answer all items before the it proceeds to the result page.
The result page shows the score of user out of 5. Score below 3 are rated as failed. A score of 3 or 4 is rated as passing. And a 5 out of 5 score is rated as perfect. If user has mistakes, a 'see mistakes' button is present. Clicking see mistake button, will show all items answered incorrectly. The user's answer is highlighted as red, and the correct answer is highlighted as green. There are two small dots on top labeled as legends. Hovering the green dot, triggers a tooltip saying 'correct answer.' Hovering red dot, triggers a tooltip saying 'your answer.'
-
Birthday is derived from CS50x 2022 Lab 9. It works similar to the lab. Enter the name, birth month, and birth day of a person to add them to the birthday lists. The list is sorted by upcoming birthday. It has date check feature which ensures that the month date is valid. Hovering on a row of the birthday list displays an 'X' remove button on its right. Clicking the remove button removes that person on the birthday lists. If users logged in as 'guest', their birthday list resets as soon as they logged out.
The downside of birthday is in the implementation of sorting by upcoming date. There seems to be bug where sometimes it does not sort it properly. Adding more person or refreshing the page fixes the bug.
-
In order to access the compiled projects, users must login a registered account. If user does not have a registered account, users may sign up to create an account or login as 'guest.'
Registering an account, requires a username and password. When logged in, users can manage their account details, allowing them to change their username or password.
-
Users may click 'contact us' button on the footer. It opens a modal prompting for a message for the developers. The message is sent via email.
-
-
The web-app responds to size of screen or orientation. Larger (in terms of horizontal length) screens have different layout than smaller screens. Layout is adjusted to give a better user interface that fits the user's screen. It tries to give the same experience for large screen and small screen users.
-
On homepage, the background color changes based on the mouse position. On the left side of the mouse, the background color is black and text color is white. On the right side of the mouse, the background color is white and the text color is black. Left side elements of the homepage are stacked on top of the right side elements. A javascript file, 'mouse-track.js', tracks the position of mouse (also tracks touches for mobile users) and get the current width, then apply that width to as style to the elements designated to the left side. That way the width of the elements of the left side are limited to the current position of the mouse which puts the right side elements on top only on the right side of the mouse.
-
At the footer of every page is a copyright symbol, year, and the developer's name. The year is entered using javascript. Javascript gets the current full year and enter it in the footer. That way the year should change automatically based on the current year. Lessening the maintenance needed.
-
The favicon used for the web-app is an icon from Google Fonts. The favicon color is dependent on the theme of the browser. A light theme browser uses a black favicon. A dark theme browser uses a white favicon.
-
Plenty of icons and fonts used in the web-app are from Google Fonts. Icons includes favicon, copy button, and info button. Each compiled project has a different font for its title. The font style of the the title of the web-app, Compiled 50, is Bebas Neue.
-
- Bootstrap Documentation
- Google Fonts
- Color Based on Mouse Position
- Mario Block
- Credit Card Template
- American Express (AMEX) Logo
- Scrabble Tile Template
- First Dog in Filter
- Second Dog in Filter
- Third Dog in Filter
- Fourth Dog in Filter
- Family Tree in Inheritance
-
Github - SiegfredLorelle
-
Facebook - Siegfred Mina
-
LinkedIn - Siegfred Lorelle Mina