This project consists of three fun JavaScript projects designed to test your knowledge in JavaScript and DOM manipulation. Each folder will contain a different implementation of a problem, and the home page will consist of pages/sections that link to each folder with a problem.
- Basic to Intermediate knowledge of JavaScript
- Familiarity with DOM manipulation
- Accessing properties in objects
- Working with input values in the DOM
- Using the Date object and switch statement
Problem Description: This problem involves creating a random quotes generator. When the “Generate Quote” button is pressed, it should display a new quote along with the author who said it. You'll need to access properties on an object embedded inside an Array.
Pseudo Code:
- Create an array of objects, each representing a quote with its author.
- Write a function to generate a random number within the array's length.
- Use the random number to access a quote and its author from the array.
- Update the DOM to display the random quote and author when the button is clicked.
Why This Project: This project challenges your understanding of object properties, arrays, and DOM manipulation. It's a fun way to practice accessing and displaying dynamic content on a web page.
Problem Description: In this problem, you'll create a message submission form. When the “Submit” button is clicked, the inputted message should be displayed in the “Last Message Delivered” section. You need to select the input element's value from the DOM.
Pseudo Code:
- Select the input element using JavaScript.
- Write a function to handle the click event of the submit button.
- Retrieve the value of the input element when the button is clicked.
- Update the DOM to display the submitted message.
Why This Project: This project focuses on interacting with user input and updating the DOM based on user actions. It helps reinforce your knowledge of event handling and DOM manipulation.
Problem Description: For the final day, you'll create a day of the week application. It should display the current day of the week along with a corresponding quote. You can use the JavaScript Date object and a switch statement for this.
Pseudo Code:
- Create an array of quotes, each associated with a specific day of the week.
- Use the Date object to get the current day of the week.
- Write a switch statement to match the day and display the corresponding quote.
- Update the DOM to show the day and quote dynamically.
Why This Project: This project integrates JavaScript's Date object and conditional statements, enhancing your skills in working with date-related functionalities and decision-making in programming.
Prepared by Lorenah M. for fun JavaScript projects. Each folder contains a different implementation of the problem, and the home page consists of pages/sections linking to each folder with a problem.
This project is licensed under the MIT License - see the LICENSE.md file for details.