<< Home

Javascript and the DOM

Create a webpage that uses Javascript to interact with the DOM in the following ways:

• Manipulate at least one CSS property through the DOM.
• Manipulate at least one other DOM property that is not a CSS property.
• Respond to at least two different types of events using event listeners
• External CSS/JS

Proposal:

Create a tic-tac-toe game using click events and a reset button. Include a dark/light mode toggle using an html checkbox and the change event. Add simple animations to the game for a smoother and more satisfying user experience.

HTML Form Basics

Create a web page with a form that does the following:

• Use at least one button.
• Use at least two input tags with different types.
• In addition, use at least two of the following other form controls:
  • text box
  • text area
  • check boxes
  • radio buttons
  • list box

Every form element must be within a form parent tag. There must be at least one form tag in the page. The button should use the input from the other elements to manipulate the page.

Event response should use event listeners. Javascript and CSS should be linked in external files.

This project is one that can be linked to a SQL or noSQL database in the future for practice connecting front end to back end.

Javascript Debugging Practice

Find and fix the errors on this quiz and post the fixed version to your portal. Hint: there are no errors in the CSS file, only the HTML file and the JavaScript file.

Playing with APIs and JSON

Create a webpage that uses the fetch API (built into the browser) to send requests any third party API, and display the JSON data that the third party API returns to you on the webpage in a creative fashion.

Proposal:

Make a weather app that takes inspiration from Karen, of the movie Mean Girls, using the Geolocation API and the OpenWeatherApp API. The app only shows two pieces of information: the precipitation probability and the icon data that corresponds to the current weather conditions in the user's location. API data is refreshed every 5 minutes and will display default data if users do not want to allow the app to access their location data.

Practice with JavaScript Libraries

Add animations on scroll using the AOS JS library to a copy of my assignments page (this one) to see if it is a viable design choice in the future. Rebuilt in React JS, using reusable components and conditional rendering.

Design Component Layout for a React To-Do App

Use React JS documentation, knowledge of OOP, and the modular nature of React Functional Components to design the rough layout of a simple to-do app using React.