Codebase Mentor - Learn to code with real-world projects
https://codebasementor.com
Codebase Mentor helps level up coding skills by practicing on real-world projects.
Here are the challenges that I've done with codebasementor.com:
------------------------------------------------------------------------------------------------
https://github.com/developer-job-simulation/javascript-photo-gallery
This is an image gallery project with a modal feature. The task is to fix these issues:
Challenges:
-Implement the functionality to display the clicked image in a modal
-Add modal navigation button functionality for moving between images
-Add functionality to close the modal when the close button is clicked and when clicking the modal background
-Disable the navigation buttons when the first or last image is displayed
Learning Objectives:
I learned and gained experience with:
-Adding event listeners in JavaScript.
-Implementing modal functionality with HTML, CSS, and JavaScript.
-Manipulating DOM elements and updating their properties.
-Conditionally disabling buttons based on application state.
My solutions:
https://ralphorland.github.io/javascript-photo-gallery/src/index.html
------------------------------------------------------------------------------------------------
https://github.com/developer-job-simulation/javascript-crm
This is a CRM built with in HTML/CSS/JS. This webapp helps a business department keep track of their interactions with their clients.
The job is to fix 4 issues:
-Company Names are Missing
-Display Dates in 24-hour Time Format
-Display Revenue Numbers in a Human Readable Form
-Make Table Look Prettier
Learning Objectives:
I practiced and gained experience with:
-Using ISO 8601 Dates in JavaScript
-Working with HTML Tables
-Applying CSS Styles to HTML Tables
-Currency Formatting in JavaScript
-Pulling Data from APIs
My solution:
https://github.com/RalphOrland/javascript-crm/commit/a7fabdea33c1847bc68124ce757867c5b9439b21
------------------------------------------------------------------------------------------------
https://github.com/developer-job-simulation/javascript-login-form
This is a simple login form made with vanilla JavaScript, HTML, and CSS. The job is to fix 5 issues:
-Fix Logo Rendering Issue
-Add HTML Email Validation to Email Input
-Update HTML Password Input to Hide Password Visibility
-Adjust CSS so that form is centered on page
-Validate User Credentials & show validation status message
Learning Objectives:
I learned and gained experience with:
-How to use vanilla JavaScript to manipulate the DOM.
-How to use vanilla JavaScript to listen to form submission events.
-How to use Client Side HTML form validation
-Vanilla Javascript methods for searching through array data.
-How to use CSS Flexbox to center elements on the page.
-modern JS syntax (arrow functions, template literals).
stored credentials for testing:
{ id: 1, username: "hello@world.com", password: "badpassword" },
{ id: 2, username: "test@user.com", password: "badpassword" },
{ id: 3, username: "email@domain.com", password: "badpassword" },
My solutions:
https://github.com/RalphOrland/javascript-login-form/commit/822750dab8d9071b497b127c6d9180386a621e5e
https://ralphorland.github.io/javascript-login-form/src/index.html
------------------------------------------------------------------------------------------------
https://github.com/developer-job-simulation/javascript-landing-page
This is a landing page written in HTML/CSS/JS. The job is to fix these issues:
-Nav Buttons Don't Work
-Desktop Nav Is Visible on Mobile
-Invert Banner Image Colors
-Tiles Need to be 2x2 CSS Grid
-Improve Errors on Signup Form Validation
Learning Objectives:
I learned and gained experience with:
-Linking to Page Elements.
-Mobile Responsive Design.
-CSS Filters.
-CSS Grid.
-Clientside Form Validation.
-Navigating a Large, Messy CSS File.
My solutions:
https://ralphorland.github.io/javascript-landing-page/src/index.html#header
stored credentials for testing:
{ id: 1, username: "hello@world.com" },
{ id: 2, username: "test@user.com" },
{ id: 3, username: "email@domain.com" },
------------------------------------------------------------------------------------------------