homework js

• JavaScript Home
• ▼JavaScript Exercises
• Exercises Home
• Fundamental(ES6) Part-I
• Fundamental(ES6) Part-II
• Error Handling
• Conditional statements and loops
• Event Handling
• Asynchronous
• Object-Oriented Programming
• Linked List
• String/Text
• Bit Manipulation
• Validation with Regular expression
• Validation without Regular expression
• Sorting Algorithm
• Searching Algorithm
• ..More to come..

JavaScript - Exercises, Practice, Solution

What is javascript.

JavaScript is a cross-platform, object-oriented scripting language. It is a small and lightweight language. Inside a host environment ( a web browser), JavaScript can be connected to the objects of its environment to provide programmatic control over them.

JavaScript contains a standard library of objects, such as Array, Date, and Math, and a core set of language elements such as operators, control structures, and statements. Core JavaScript can be extended for a variety of purposes by supplementing it with additional objects.

The best way we learn anything is by practice and exercise questions. We have started this section for those (beginner to intermediate) who are familiar with JavaScript . Hope, these exercises help you to improve your JavaScript coding skills. Currently following sections are available, we are working hard to add more exercises. Happy Coding!

Latest Exercises : Object Oriented Programming      JavaScript Error Handling      JavaScript Event Handling     

List of JavaScript Exercises :

• JavaScript Basic [ 150 Exercises with Solution ]
• JavaScript Fundamental (ES6 version) Part-I [ 150 Exercises with Solution ]
• JavaScript Fundamental (ES6 version) Part-II [ 116 Exercises with Solution ]
• JavaScript Error Handling [ 13 Exercises with Solution ]
• JavaScript Functions [ 29 Exercises with Solution ]
• JavaScript Recursion [ 13 Exercises with Solution ]
• JavaScript Conditional Statements and loops [ 12 Exercises with Solution ]
• JavaScript Event Handling [ 10 exercises with solution ]
• JavaScript Asynchronous Programming [ 9 exercises with solution ]
• JavaScript Object-Oriented Programming [ 12 exercises with solution ]
• JavaScript Math [ 114 Exercises with Solution ]
• JavaScript Array [ 53 Exercises with Solution ]
• JavaScript Stack [35 exercises with solution]
• JavaScript Linked List [35 exercises with solution]
• JavaScript Date [ 57 Exercises with Solution ]
• JavaScript String [ 63 Exercises with Solution ]
• JavaScript Bit Manipulation [ 15 Exercises with Solution ]
• JavaScript Validation with Regular expression [ 21 Exercises with Solution ]
• JavaScript HTML DOM [ 13 Exercises with Solution ]
• JavaScript Drawing [ 6 Exercises with Solution ]
• JavaScript Object [ 18 Exercises with Solution ]
• JavaScript Basic Validation without Regular expression [10 Exercises with Solution ]
• JavaScript Sorting Algorithm [31 Exercises with Solution ]
• JavaScript Searching Algorithm [5 Exercises with Solution ]

More to Come !

Do not submit any solution of the above exercises at here, if you want to contribute go to the appropriate exercise page.

Note : Since JavaScript is a loosely-typed, dynamic and expressive language, you may accomplish the same task in various ways. Therefore the ways (solution of the exercises) described here are not the only ways to do stuff. Rather, it would be great, if this helps you anyway to choose your own methods.

[ Want to contribute to JavaScript exercises? Send your code (attached with a .zip file) to us at w3resource[at]yahoo[dot]com. Please avoid copyrighted materials.]

Follow us on Facebook and Twitter for latest update.

• Weekly Trends and Language Statistics

Practice 148 exercises in JavaScript

Learn and practice JavaScript by completing 148 exercises that explore different concepts and ideas.

The Modern JavaScript Tutorial

How it's done now. From the basics to advanced topics with simple, but detailed explanations.

We plan to improve the tutorial. Your feedback is important!

What do you want to see? More features? New content? Let us know here !

Table of contents

Main course contains 2 parts which cover JavaScript as a programming language and working with a browser. There are also additional series of thematic articles.

The JavaScript language

Here we learn JavaScript, starting from scratch and go on to advanced concepts like OOP.

We concentrate on the language itself here, with the minimum of environment-specific notes.

• An Introduction to JavaScript
• Manuals and specifications
• Code editors
• Developer console
• Hello, world!
• Code structure
• The modern mode, "use strict"
• Interaction: alert, prompt, confirm
• Type Conversions
• Basic operators, maths
• Comparisons
• Conditional branching: if, '?'
• Logical operators
• Nullish coalescing operator '??'
• Loops: while and for
• The "switch" statement
• Function expressions
• Arrow functions, the basics
• JavaScript specials
• Debugging in the browser
• Coding Style
• Automated testing with Mocha
• Polyfills and transpilers
• Object references and copying
• Garbage collection
• Object methods, "this"
• Constructor, operator "new"
• Optional chaining '?.'
• Symbol type
• Object to primitive conversion
• Methods of primitives
• Array methods
• Map and Set
• WeakMap and WeakSet
• Object.keys, values, entries
• Destructuring assignment
• Date and time
• JSON methods, toJSON
• Recursion and stack
• Rest parameters and spread syntax
• Variable scope, closure
• The old "var"
• Global object
• Function object, NFE
• The "new Function" syntax
• Scheduling: setTimeout and setInterval
• Decorators and forwarding, call/apply
• Function binding
• Arrow functions revisited
• Property flags and descriptors
• Property getters and setters
• Prototypal inheritance
• F.prototype
• Native prototypes
• Prototype methods, objects without __proto__
• Class basic syntax
• Class inheritance
• Static properties and methods
• Private and protected properties and methods
• Extending built-in classes
• Class checking: "instanceof"
• Error handling, "try...catch"
• Custom errors, extending Error
• Introduction: callbacks
• Promises chaining
• Error handling with promises
• Promise API
• Promisification
• Async/await
• Async iteration and generators
• Modules, introduction
• Export and Import
• Dynamic imports
• Proxy and Reflect
• Eval: run a code string
• Reference Type
• Unicode, String internals
• WeakRef and FinalizationRegistry

Browser: Document, Events, Interfaces

Learning how to manage the browser page: add elements, manipulate their size and position, dynamically create interfaces and interact with the visitor.

• Browser environment, specs
• Walking the DOM
• Searching: getElement*, querySelector*
• Node properties: type, tag and contents
• Attributes and properties
• Modifying the document
• Styles and classes
• Element size and scrolling
• Window sizes and scrolling
• Coordinates
• Introduction to browser events
• Bubbling and capturing
• Event delegation
• Browser default actions
• Dispatching custom events
• Mouse events
• Moving the mouse: mouseover/out, mouseenter/leave
• Drag'n'Drop with mouse events
• Pointer events
• Keyboard: keydown and keyup
• Form properties and methods
• Focusing: focus/blur
• Events: change, input, cut, copy, paste
• Forms: event and method submit
• Page: DOMContentLoaded, load, beforeunload, unload
• Scripts: async, defer
• Resource loading: onload and onerror
• Mutation observer
• Selection and Range
• Event loop: microtasks and macrotasks

Additional articles

• Popups and window methods
• Cross-window communication
• The clickjacking attack
• ArrayBuffer, binary arrays
• TextDecoder and TextEncoder
• File and FileReader
• Fetch: Download progress
• Fetch: Abort
• Fetch: Cross-Origin Requests
• URL objects
• XMLHttpRequest
• Resumable file upload
• Long polling
• Server Sent Events
• Cookies, document.cookie
• LocalStorage, sessionStorage
• Bezier curve
• CSS-animations
• JavaScript animations
• From the orbital height
• Custom elements
• Template element
• Shadow DOM slots, composition
• Shadow DOM styling
• Shadow DOM and events
• Patterns and flags
• Character classes
• Unicode: flag "u" and class \p{...}
• Anchors: string start ^ and end $
• Multiline mode of anchors ^ $, flag "m"
• Word boundary: \b
• Escaping, special characters
• Sets and ranges [...]
• Quantifiers +, *, ? and {n}
• Greedy and lazy quantifiers
• Capturing groups
• Backreferences in pattern: \N and \k<name>
• Alternation (OR) |
• Lookahead and lookbehind
• Catastrophic backtracking
• Sticky flag "y", searching at position
• Methods of RegExp and String
• © 2007—2024  Ilya Kantor
• about the project
• terms of usage
• privacy policy

Learn JavaScript

Learn how to use JavaScript — a powerful and flexible programming language for adding website interactivity.

• AI assistance for guided coding help
• Projects to apply new skills
• Quizzes to test your knowledge
• A certificate of completion

Skill level

Time to complete

Prerequisites

About this course

You interact with JavaScript code all the time — you just might not realize it. It powers dynamic behavior on websites (like this one) and plays an important role in many fields, like front- and back-end engineering, game and mobile development, virtual reality, and more. In this course, you’ll learn JavaScript fundamentals that will be helpful as you dive deeper into more advanced topics.

Skills you'll gain

Build core programming concepts

Learn object-oriented concepts

Read and write JavaScript

Welcome to Learn JavaScript

Learn about what the JavaScript course has in store!

Introduction

In this course, you will learn about JavaScript data types, built-in methods, and variables.

Conditionals

Learn how to use if, else if, else, switch, and ternary syntax to control the flow of a program in JavaScript.

Learn about JavaScript function syntax, passing data to functions, the return keyword, ES6 arrow functions, and concise body syntax.

Learn about global and block level scope in JavaScript.

In this course, you will learn about arrays, a data structure in JavaScript used to store lists of data.

In this course, you will learn how to use for and while loops to execute blocks of code multiple times.

Certificate of completion available with Plus or Pro

The platform

Hands-on learning

Projects in this course

Kelvin weather, magic eight ball.

Earn a certificate of completion

• Show proof Receive a certificate that demonstrates you've completed a course or path.
• Build a collection The more courses and paths you complete, the more certificates you collect.
• Share with your network Easily add certificates of completion to your LinkedIn profile to share your accomplishments.

Learn JavaScript course ratings and reviews

• 5 stars 65%
• 4 stars 23%

Our learners work at

• Google Logo
• Amazon Logo
• Microsoft Logo
• Reddit Logo
• Spotify Logo
• YouTube Logo
• Instagram Logo

Frequently asked questions about JavaScript

What is javascript.

JavaScript is one of the most popular languages in the world. It’s powerful and versatile, and with HTML and CSS, it forms the foundation of modern web development.

What does JavaScript do?

What kind of jobs can javascript get me, why is javascript so popular as a first coding language, why is javascript so popular, what do i need to know before learning javascript, are java and javascript the same, join over 50 million learners and start learn javascript today, looking for something else, related resources, javascript: all the cool kids are doing it, why learn javascript foundations, related courses and paths, learn javascript: fundamentals, learn javascript: functions and scope, create a back-end app with javascript, browse more topics.

• Web Development 4,728,507 learners enrolled
• Code Foundations 7,077,433 learners enrolled
• JavaScript 2,759,595 learners enrolled
• Computer Science 5,525,495 learners enrolled
• Data Science 4,248,394 learners enrolled
• Python 3,433,799 learners enrolled
• For Business 3,111,959 learners enrolled
• Data Analytics 2,249,504 learners enrolled
• HTML & CSS 2,235,450 learners enrolled

Unlock additional features with a paid plan

Practice projects, assessments, certificate of completion.

• Skip to content
• Select language
• Skip to search

The web browser you are using is out of date, please upgrade .

Please use a modern web browser with JavaScript enabled to visit OpenClassrooms.com

Write JavaScript for the Web

Free online content available in this course.

course.header.alt.is_video

course.header.alt.is_certifying

Last updated on 4/2/20

Course introduction

So you've learned the basics of JavaScript , and you want to use that knowledge to create dynamic web apps — this is the course for you!

Using JavaScript, you will be able to:

modify documents after they have finished loading — add new content to a page, change the color of an element to reflect a changing state, or remove an element the user does not need anymore;

interact with your users — whether ticking a box, commenting on a blog post, or submitting a tax form, your users need to be able to communicate with you, and JavaScript allows them to do so;

send and receive data to and from external APIs — harness the power of the thousands of useful APIs that already exist or plug your frontend app into your own custom backend.

You will also learn to use Gulp as a build tool for your JavaScript projects.

Only Premium members can download videos from our courses. However, you can watch them online for free.

The Online Coding & Design School With A

• Entry Level Tech Jobs
• Front End Developer
• Full Stack Developer
• UI/UX Designer
• Learn to Code
• Get Hired in Tech

21 Easy JavaScript Projects for Beginners (Code included!)

Looking to get some practice with JavaScript or to build your portfolio to impress hiring managers? You can level up your JavaScript skills with our instructor approved, curated project tutorials.

According to the 2023 Stack Overflow Developer Survey, JavaScript has spent eleven years in a row as the most commonly used programming language, with 66% of developers using it extensively. If you’re interested in becoming a web developer ( front end, back end, or full stack ), JavaScript is one of the best programming languages you can learn. One way to do that is to do some JavaScript projects for beginners.

Vanilla JavaScript, also known as “plain” JavaScript — meaning without any frameworks — is one of the foundations of coding and web development. Most web pages you see are built using a combination of HTML, CSS, vanilla JavaScript, and API calls.

Getting familiar with JavaScript basics means using those JavaScript skills to build JavaScript practice projects. Luckily, we know some fun JavaScript beginner projects you can do to hone your skills from the thousands of students we’ve trained in our front end development job training program, Break into Tech .

What we see with our successful students who have landed jobs at companies like GoDaddy, Toast, Asics Digital, 1Password, Figure and Apple is that they all have JavaScript practice projects, portfolios that show off their front end developer skills , and are very well versed in JavaScript. Doing JavaScript projects for beginners is a great way to get some practice and build your portfolio.

If you want to practice your front end developer skills, we’ve put together a list of 20+ JavaScript beginner projects you can start working on right now. When you find a JavaScript practice project that piques your interest, follow the project link. Each of these open source JavaScript projects for beginners (and above) have their source code listed on their homepage for you to use as a guide.

Lisa Savoie, one of Skillcrush’s JavaScript instructors, recommends reading the source code out loud to understand it better, looking for features to incorporate into other projects , or even retyping it to work on your muscle memory of how to write functions, variables, and loops.

She says, “You can Google methods you’re unfamiliar with to learn more about them or even break the code and fix it — It’s fun to break things😀.”

Table of Contents

• JavaScript Projects Common Mistakes
• Beginner JavaScript Projects
• Mouseover Element
• Magic 8 Ball
• Build a To-Do List
• Epic Mix Playlist
• Speech Detection
• Sticky Navigation
• Geolocation

Intermediate JavaScript Projects

• Election Map
• Login Authentication
• Guess the Word
• Terminalizer
• Tic Tac Toe Game
• Hotel Booking App
• Advanced JavaScript Project

Want to learn to code? Join our FREE Coding Camp!

You Will Learn: HTML & CSS JavaScript User Experience Design Python—the language of AI 🤖 PLUS How to decide what tech job role is right for you!

JavaScript Beginner Projects Common Mistakes

• Read what the console is telling you, especially if you keep getting error messages
• Are you working with the right type of variable? Is var, let, or const the right choice?
• Is your logic sound? Are you properly using your array methods (when those are appropriate)?
• Are you factoring in edge cases like empty inputs or negative integers?
• Are you passing the right kind/type of argument to a function?

JavaScript Projects for Beginners

1. mouseover element.

Why do this project?

• You’ll see how JavaScript functions work and practice your JavaScript logic
• It’s a fun beginner JavaScript project to do to liven up your user experience
• Learn more about using random, functions, and event listeners.

Mouseover Element Source Code

Key concepts covered:

• Functions and if-else statements
• Event listeners

What to do:

• Copy the source code from CodePen.
• Implement the JavaScript code so that when you hover your mouse over a colored ball, it gets bigger.

Bonus Challenge:

To test your understanding of the concepts behind the mouseover element, your bonus challenge is this custom cursor project .

2. JavaScript Clock

• You get hands-on with the kind of actual work you’ll be doing as a JavaScript developer
• You’ll apply key JavaScript concepts and have an adorable project for your portfolio
• Practice concepts like variables, conditional logic, and date API

JavaScript Clock Source Code

• Conditional logic
• Program flow
• DOM elements
• Implement the JavaScript code so that every time you click the “Party Time!” button in the time range that you specify, you get a different LOLcat. You can set different times to see different images — there are four images total.

Bonus challenge: Now that you’ve mastered the Lolcat JavaScript clock, challenge yourself by building your own countdown timer.

3. Magic 8 Ball

• It gives you a solid foundation for how to use Math.random to produce randomized results for JavaScript projects
• You can use this project to impress your friends and make small life decisions
• Learn more about how to use the random function, nested functions, and event listeners

Magic 8 Ball Source Code

• Math.random
• Nested functions
• Copy the source code from GitHub for HTML and CSS.
• Implement the JavaScript code so that you can grab the 8 ball, ask it a question, shake it, and have the 8 ball respond with a somewhat enigmatic, somewhat applicable answer.

To test your understanding of the concepts behind the Magic 8 Ball, your bonus challenge is this dad joke generator.

4. To-Do List

• You’ll beef up your skills at coding interactive lists, which lets users add, remove, and group items
• You can use this beginner JavaScript project in your daily life and add it to your portfolio
• Learn more about how to use arrays, nested functions, and local storage API

To-Do List Source Code

• Local storage API
• DOM manipulation
• Implement the JavaScript code so that you can add new items and use the buttons to toggle completed items, edit items, or delete items.

To test your understanding of the concepts behind the To-Do list, your bonus challenge is this JavaScript grocery list.

5. Epic Mix Playlist

• It helps you practice core JavaScript skills, such as forEach loops and event listeners, and work with functions and lists
• You can use this project to show people looking at your portfolio your great taste in music
• Learn more about how to classList, innerHTML, forEach, and template literals

Epic Mix Playlist Source Code

• Array loops (forEach)
• document.createElement
• Append to an array
• Template literals
• Copy the source code from CodeSandbox.
• Implement the JavaScript code so that you can create an auto-generated list of your favorite songs and their indexes.

To test your understanding of the concepts behind the epic mix playlist, your bonus challenge is this favorite movie list.

6. Pet Rescue

• It gives you a solid foundation for understanding factory function patterns and parameters
• You can use this project to contribute to pet rescues or display inventory for products on a ecommerce site
• Learn more about how to use factory functions, parameters, methods, and objects

Pet Rescue Source Code

• Factory functions
• Object methods and properties
• Implement the JavaScript code so that you can accept an animal’s name, species, and energy level as a parameter and indicate each animal’s status (whether they are sleeping or awake).

To test your understanding of the concepts behind Pet Rescue, your bonus challenge is this inventory system.

7. Drum Kit

• You can see the interaction between seeing elements on the page and listening to sound and learning how to add and remove elements
• You can use this project to practice your drum skills with your JavaScript skills
• Learn more about how to use audio tags and document.querySelector

Drum Kit Source Code

• Event Listener
• document.querySelector
• Clone the GitHub repo.
• Implement the JavaScript code so that you can play the drums by pressing specific keys in the browser.

To test your understanding of the concepts behind the drum kit, your bonus challenge is this JavaScript piano player.

8. Speech Detection

• It gives you a basis for understanding how speech detection works, which is good (and very cool!) to know
• You’ll have a nifty notetaking method straight in your browser
• Learn more about speech recognition, text content, and event listeners

Speech Detection Source Code

• Window.SpeechRecognition
• .textContent
• Copy the source code from GitHub.
• Implement the JavaScript code so that when you speak, whatever you say is transcribed on the lined paper on your screen.

To test your understanding of the concepts behind speech detection, your bonus challenge is this text to speech in different languages.

9. Sticky Navigation

• It teaches you how to keep your elements in a fixed position on a page, which is a skill you might need in your front end developer role
• You can use this to upgrade the design of your website or portfolio
• Learn more about how to use query electors, event listeners, and offsetting

Sticky Navigation Source Code

• .querySelector
• Implement the JavaScript code so that when you scroll up or down the page, your navigation bar remains in a fixed and visible position.

To test your understanding of the concepts behind sticky navigation, your bonus challenge is to create a sliding navigation.

10. Geolocation

• You can learn more about how to develop for mobile, how geolocation works, and how to test your code using simulators or a different device
• You can use this project in your daily life (if you get lost easily)
• Learn more about how to use query selectors, watch position, and coordinates

Geolocation Source Code

• .watchPosition
• Install packages with npm and run your local server.
• Implement the JavaScript code so that you see your location in real time. You will need iOS or an iOS simulator to test whether or not your code works.

To test your understanding of the concepts behind geolocation, your bonus challenge is this weather forecast tool.

11. Movie App

• It gives you a solid foundation of how JavaScript works with HTML, CSS, and other tools
• You can use this project to make your own custom movie app
• Learn more about how to use JavaScript with jQuery, Bootstrap, and API calls

Movie App Source Code

• On click event
• You’ll need to get yourself an API key!
• Implement the JavaScript code so that you can make your own movie app that lets you view the most popular movies, sort them by genre, and search for other movies.

To test your understanding of the concepts behind the movie app, your bonus challenge is to build an ecommerce landing page.

12. Name Tags

• As a beginner JavaScript project, it lets you practice using React to create a practical and useful tool
• You can use this project to hone your React skills and key concepts
• Learn more about how to handle user input, work with stateful components, and render array data models

Name Tag Generator Source Code

• Handling user input
• Stateful components
• Render array data models
• Implement the JavaScript code so that you can build a text box and button to let users input text and have it respond to the input by generating a new name tag!

To test your understanding of the concepts behind the name tag generator, your bonus challenge is this Pokemon React generator.

(Back to top.)

13. Tone.js

• You’ll learn how to create interactive web browser music with advanced scheduling capabilities, synths and effects, and intuitive musical abstractions built on top of the Web Audio API
• You can use this project to be your own personal DJ and music producer, for free!
• Learn more about how to use event listeners, triggerAttack, triggerRelease, and different kinds of synths

Tone.js Source Code

• triggerAttack and triggerRelease
• Copy the source code from the Tone.js GitHub.io page.
• Implement the JavaScript code so that you can create interactive music in your own browser.

14. Election Map

• It gives you a solid foundation of the difference between JavaScript, HTML, and CSS, especially what JavaScript does and how it does it
• You can use this project in your daily life and add it to your portfolio
• Learn more about how to use arrays and nested functions

Election Map Source Code

• If-else and function practice
• Parent-child relationships
• getElementById
• Copy the source code from JSBin.
• Implement the JavaScript code so that you can add two candidates running for president and display the number of votes they received from each state, both in a table on the bottom right and when you mouse over a state.

To test your understanding of the concepts behind the election map, your bonus challenge is this interactive map.

15. Login Authentication

• It introduces you to Angular JS and more advanced JavaScript concepts
• You can see how login authentication works behind the scenes
• Learn more about how to use function states, app controllers, and dependencies

Login Authenticator Source Code

• State management
• App controller
• Dependencies
• Implement the JavaScript code so that you can enter an email address and password, and have the system tell you if the email address is invalid when you press the “Submit” button.

To test your understanding of the concepts behind the Login Authenticator, your bonus challenge is this password generator.

16. Guess the Word

• It gives you a solid foundation for methods, creating global variables, and working with event listeners
• You can use this project as a party game or challenge with your friends and coworkers
• Learn more about how to use methods, functions, and regular expressions

Guess the Word Source Code

• Methods like match(), split(), trim(), and join()
• Regular expressions
• Implement the JavaScript code so that players start by entering a letter. If they guess correctly, the letter appears in the word. If they guess incorrectly, they learn how many guesses they have remaining. The player can also see which letters they’ve already guessed. The game lets the player know if they’ve already guessed a letter or entered a non-alphabetic character!

To test your understanding of the concepts behind the Guess the Word game, your bonus challenge is this Wordled game.

Warning: the difficulty level for this is advanced, so if you’re having trouble with it, it’s not you!

17. Terminalizer

• It teaches you how to record your terminal screen and share your work with others
• You can use this project to debug and work on coding projects with friends
• Learn more about how to use recording files, frame delays, and set idle times

Terminalizer Source Code

• Recording files
• Using frameDelay
• Setting idle time
• Implement the JavaScript code so that you can record your terminal and generate animated GIF images or share web player links.

To test your understanding of the concepts behind Terminalizer, your bonus challenge is to figure out how to play/pause GIFs.

18. Chat App

• It gives you a solid foundation of how JavaScript and its front and back end libraries can be used to create applications
• You can add this project to your portfolio to show your knowledge of programming concepts as a full stack developer
• Learn more about how to use ReactJS, NodeJS, and sockets along with JavaScript

Chat App Source Code and YouTube tutorial link

• You won’t be able to clone and run the project straight from GitHub because there is no package.json file, but you can build this using the YouTube tutorial
• Implement the JavaScript code so that you can build a real time chat application that lets you send and receive messages using web sockets

To test your understanding of the concepts behind the chat application, your bonus challenge is this React text editor.

19. Tic Tac Toe Game

• This project will test your HTML semantics and your JavaScript logic skills
• You can use this as a practice project and for something to do while your code compiles
• Learn more about how to use arrays, grid methods, and event listeners

Tic-Tac-Toe Source Code

• Implement the JavaScript code so that the player can set difficulty level as easy or hard, choose whether to play as X or O, play a game with the computer, have it remember who won or drew, and play again.

To test your understanding of the concepts behind the Tic-Tac-Toe game, your bonus challenge is this hangman game.

20. Hotel Booking App

• You’ll get to practice key concepts in JavaScript ES6 and React JSX
• You can use this project to practice building sites with more functionality and use some of your creativity by making it look really spiffy
• Learn more about how to manage data flow and manipulate the DOM

Hotel Booking App Source Code

• ES6 and React JSX practice
• Managing data flow
• Implement the JavaScript code so that you can create a sample booking on a hotel site, complete with filtered search results, room inventory display, and hotel ratings.

To test your understanding of the concepts behind the Hotel Booking App, your bonus challenge is this ticket booking app.

Advanced JavaScript Projects

21. maze game.

• It gives you a solid idea of how JavaScript core skills and functions can be used to create interactive games
• You can put this project in your portfolio and challenge friends
• Learn more about how to use JavaScript math concepts, create elements, and use loops

Maze Game Source Code

• Random and Floor
• Element creation
• Implement the JavaScript code so that you can get the pickle from one end of the maze to another using the arrow functions (or AWSD) on your keyboard, have it display the number of steps it took to complete the maze, and be able to set the difficulty level.

To test your understanding of the concepts behind the maze game, your bonus challenge is this Tetris game.

Justina Hwang

Category: Blog , Coding Languages and Tools , Entry Level Tech Jobs , Front End Developer , Full Stack Developer , JavaScript , Learn to Code

Related Articles

• Skip to main content
• Skip to search
• Skip to select language
• Sign up for free

Using classes

JavaScript is a prototype-based language — an object's behaviors are specified by its own properties and its prototype's properties. However, with the addition of classes , the creation of hierarchies of objects and the inheritance of properties and their values are much more in line with other object-oriented languages such as Java. In this section, we will demonstrate how objects can be created from classes.

In many other languages, classes , or constructors, are clearly distinguished from objects , or instances. In JavaScript, classes are mainly an abstraction over the existing prototypical inheritance mechanism — all patterns are convertible to prototype-based inheritance. Classes themselves are normal JavaScript values as well, and have their own prototype chains. In fact, most plain JavaScript functions can be used as constructors — you use the new operator with a constructor function to create a new object.

We will be playing with the well-abstracted class model in this tutorial, and discuss what semantics classes offer. If you want to dive deep into the underlying prototype system, you can read the Inheritance and the prototype chain guide.

This chapter assumes that you are already somewhat familiar with JavaScript and that you have used ordinary objects.

Overview of classes

If you have some hands-on experience with JavaScript, or have followed along with the guide, you probably have already used classes, even if you haven't created one. For example, this may seem familiar to you :

On the first line, we created an instance of the class Date , and called it bigDay . On the second line, we called a method toLocaleDateString() on the bigDay instance, which returns a string. Then, we compared two numbers: one returned from the getTime() method, the other directly called from the Date class itself , as Date.now() .

Date is a built-in class of JavaScript. From this example, we can get some basic ideas of what classes do:

• Classes create objects through the new operator.
• Each object has some properties (data or method) added by the class.
• The class stores some properties (data or method) itself, which are usually used to interact with instances.

These correspond to the three key features of classes:

• Constructor;
• Instance methods and instance fields;
• Static methods and static fields.

Declaring a class

Classes are usually created with class declarations .

Within a class body, there are a range of features available.

If you came from a pre-ES6 world, you may be more familiar with using functions as constructors. The pattern above would roughly translate to the following with function constructors:

Note: Private fields and methods are new features in classes with no trivial equivalent in function constructors.

Constructing a class

After a class has been declared, you can create instances of it using the new operator.

Typical function constructors can both be constructed with new and called without new . However, attempting to "call" a class without new will result in an error.

Class declaration hoisting

Unlike function declarations, class declarations are not hoisted (or, in some interpretations, hoisted but with the temporal dead zone restriction), which means you cannot use a class before it is declared.

This behavior is similar to variables declared with let and const .

Class expressions

Similar to functions, class declarations also have their expression counterparts.

Class expressions can have names as well. The expression's name is only visible to the class's body.

Constructor

Perhaps the most important job of a class is to act as a "factory" for objects. For example, when we use the Date constructor, we expect it to give a new object which represents the date data we passed in — which we can then manipulate with other methods the instance exposes. In classes, the instance creation is done by the constructor .

As an example, we would create a class called Color , which represents a specific color. Users create colors through passing in an RGB triplet.

Open your browser's devtools, paste the above code into the console, and then create an instance:

You should see some output like this:

You have successfully created a Color instance, and the instance has a values property, which is an array of the RGB values you passed in. That is pretty much equivalent to the following:

The constructor's syntax is exactly the same as a normal function — which means you can use other syntaxes, like rest parameters :

Each time you call new , a different instance is created.

Within a class constructor, the value of this points to the newly created instance. You can assign properties to it, or read existing properties (especially methods — which we will cover next).

The this value will be automatically returned as the result of new . You are advised to not return any value from the constructor — because if you return a non-primitive value, it will become the value of the new expression, and the value of this is dropped. (You can read more about what new does in its description .)

Instance methods

If a class only has a constructor, it is not much different from a createX factory function which just creates plain objects. However, the power of classes is that they can be used as "templates" which automatically assign methods to instances.

For example, for Date instances, you can use a range of methods to get different information from a single date value, such as the year , month , day of the week , etc. You can also set those values through the setX counterparts like setFullYear .

For our own Color class, we can add a method called getRed which returns the red value of the color.

Without methods, you may be tempted to define the function within the constructor:

This also works. However, a problem is that this creates a new function every time a Color instance is created, even when they all do the same thing!

In contrast, if you use a method, it will be shared between all instances. A function can be shared between all instances, but still have its behavior differ when different instances call it, because the value of this is different. If you are curious where this method is stored in — it's defined on the prototype of all instances, or Color.prototype , which is explained in more detail in Inheritance and the prototype chain .

Similarly, we can create a new method called setRed , which sets the red value of the color.

Private fields

You might be wondering: why do we want to go to the trouble of using getRed and setRed methods, when we can directly access the values array on the instance?

There is a philosophy in object-oriented programming called "encapsulation". This means you should not access the underlying implementation of an object, but instead use well-abstracted methods to interact with it. For example, if we suddenly decided to represent colors as HSL instead:

The user assumption that values means the RGB value suddenly collapses, and it may cause their logic to break. So, if you are an implementor of a class, you would want to hide the internal data structure of your instance from your user, both to keep the API clean and to prevent the user's code from breaking when you do some "harmless refactors". In classes, this is done through private fields .

A private field is an identifier prefixed with # (the hash symbol). The hash is an integral part of the field's name, which means a private property can never have name clash with a public property. In order to refer to a private field anywhere in the class, you must declare it in the class body (you can't create a private property on the fly). Apart from this, a private field is pretty much equivalent to a normal property.

Accessing private fields outside the class is an early syntax error. The language can guard against this because #privateField is a special syntax, so it can do some static analysis and find all usage of private fields before even evaluating the code.

Note: Code run in the Chrome console can access private properties outside the class. This is a DevTools-only relaxation of the JavaScript syntax restriction.

Private fields in JavaScript are hard private : if the class does not implement methods that expose these private fields, there's absolutely no mechanism to retrieve them from outside the class. This means you are safe to do any refactors to your class's private fields, as long as the behavior of exposed methods stay the same.

After we've made the values field private, we can add some more logic in the getRed and setRed methods, instead of making them simple pass-through methods. For example, we can add a check in setRed to see if it's a valid R value:

If we leave the values property exposed, our users can easily circumvent that check by assigning to values[0] directly, and create invalid colors. But with a well-encapsulated API, we can make our code more robust and prevent logic errors downstream.

A class method can read the private fields of other instances, as long as they belong to the same class.

However, if anotherColor is not a Color instance, #values won't exist. (Even if another class has an identically named #values private field, it's not referring to the same thing and cannot be accessed here.) Accessing a nonexistent private property throws an error instead of returning undefined like normal properties do. If you don't know if a private field exists on an object and you wish to access it without using try / catch to handle the error, you can use the in operator.

Note: Keep in mind that the # is a special identifier syntax, and you can't use the field name as if it's a string. "#values" in anotherColor would look for a property name literally called "#values" , instead of a private field.

There are some limitations in using private properties: the same name can't be declared twice in a single class, and they can't be deleted. Both lead to early syntax errors.

Methods, getters, and setters can be private as well. They're useful when you have something complex that the class needs to do internally but no other part of the code should be allowed to call.

For example, imagine creating HTML custom elements that should do something somewhat complicated when clicked/tapped/otherwise activated. Furthermore, the somewhat complicated things that happen when the element is clicked should be restricted to this class, because no other part of the JavaScript will (or should) ever access it.

In this case, pretty much every field and method is private to the class. Thus, it presents an interface to the rest of the code that's essentially just like a built-in HTML element. No other part of the program has the power to affect any of the internals of Counter .

Accessor fields

color.getRed() and color.setRed() allow us to read and write to the red value of a color. If you come from languages like Java, you will be very familiar with this pattern. However, using methods to simply access a property is still somewhat unergonomic in JavaScript. Accessor fields allow us to manipulate something as if it is an "actual property".

It looks as if the object has a property called red — but actually, no such property exists on the instance! There are only two methods, but they are prefixed with get and set , which allows them to be manipulated as if they were properties.

If a field only has a getter but no setter, it will be effectively read-only.

In strict mode , the red.red = 0 line will throw a type error: "Cannot set property red of #<Color> which has only a getter". In non-strict mode, the assignment is silently ignored.

Public fields

Private fields also have their public counterparts, which allow every instance to have a property. Fields are usually designed to be independent of the constructor's parameters.

Public fields are almost equivalent to assigning a property to this . For example, the above example can also be converted to:

Static properties

With the Date example, we have also encountered the Date.now() method, which returns the current date. This method does not belong to any date instance — it belongs to the class itself. However, it's put on the Date class instead of being exposed as a global DateNow() function, because it's mostly useful when dealing with date instances.

Note: Prefixing utility methods with what they deal with is called "namespacing" and is considered a good practice. For example, in addition to the older, unprefixed parseInt() method, JavaScript also later added the prefixed Number.parseInt() method to indicate that it's for dealing with numbers.

Static properties are a group of class features that are defined on the class itself, rather than on individual instances of the class. These features include:

• Static methods
• Static fields
• Static getters and setters

Everything also has private counterparts. For example, for our Color class, we can create a static method that checks whether a given triplet is a valid RGB value:

Static properties are very similar to their instance counterparts, except that:

• They are all prefixed with static , and
• They are not accessible from instances.

There is also a special construct called a static initialization block , which is a block of code that runs when the class is first loaded.

Static initialization blocks are almost equivalent to immediately executing some code after a class has been declared. The only difference is that they have access to static private properties.

Extends and inheritance

A key feature that classes bring about (in addition to ergonomic encapsulation with private fields) is inheritance , which means one object can "borrow" a large part of another object's behaviors, while overriding or enhancing certain parts with its own logic.

For example, suppose our Color class now needs to support transparency. We may be tempted to add a new field that indicates its transparency:

However, this means every instance — even the vast majority which aren't transparent (those with an alpha value of 1) — will have to have the extra alpha value, which is not very elegant. Plus, if the features keep growing, our Color class will become very bloated and hard to maintain.

Instead, in object-oriented programming, we would create a derived class . The derived class has access to all public properties of the parent class. In JavaScript, derived classes are declared with an extends clause, which indicates the class it extends from.

There are a few things that have immediately come to attention. First is that in the constructor, we are calling super(r, g, b) . It is a language requirement to call super() before accessing this . The super() call calls the parent class's constructor to initialize this — here it's roughly equivalent to this = new Color(r, g, b) . You can have code before super() , but you cannot access this before super() — the language prevents you from accessing the uninitialized this .

After the parent class is done with modifying this , the derived class can do its own logic. Here we added a private field called #alpha , and also provided a pair of getter/setters to interact with them.

A derived class inherits all methods from its parent. For example, although ColorWithAlpha doesn't declare a get red() accessor itself, you can still access red because this behavior is specified by the parent class:

Derived classes can also override methods from the parent class. For example, all classes implicitly inherit the Object class, which defines some basic methods like toString() . However, the base toString() method is notoriously useless, because it prints [object Object] in most cases:

Instead, our class can override it to print the color's RGB values:

Within derived classes, you can access the parent class's methods by using super . This allows you to build enhancement methods and avoid code duplication.

When you use extends , the static methods inherit from each other as well, so you can also override or enhance them.

Derived classes don't have access to the parent class's private fields — this is another key aspect to JavaScript private fields being "hard private". Private fields are scoped to the class body itself and do not grant access to any outside code.

A class can only extend from one class. This prevents problems in multiple inheritance like the diamond problem . However, due to the dynamic nature of JavaScript, it's still possible to achieve the effect of multiple inheritance through class composition and mixins .

Instances of derived classes are also instances of the base class.

Why classes?

The guide has been pragmatic so far: we are focusing on how classes can be used, but there's one question unanswered: why would one use a class? The answer is: it depends.

Classes introduce a paradigm , or a way to organize your code. Classes are the foundations of object-oriented programming, which is built on concepts like inheritance and polymorphism (especially subtype polymorphism ). However, many people are philosophically against certain OOP practices and don't use classes as a result.

For example, one thing that makes Date objects infamous is that they're mutable .

Mutability and internal state are important aspects of object-oriented programming, but often make code hard to reason with — because any seemingly innocent operation may have unexpected side effects and change the behavior in other parts of the program.

In order to reuse code, we usually resort to extending classes, which can create big hierarchies of inheritance patterns.

However, it is often hard to describe inheritance cleanly when one class can only extend one other class. Often, we want the behavior of multiple classes. In Java, this is done through interfaces; in JavaScript, it can be done through mixins. But at the end of the day, it's still not very convenient.

On the brighter side, classes are a very powerful way to organize our code on a higher level. For example, without the Color class, we may need to create a dozen of utility functions:

But with classes, we can congregate them all under the Color namespace, which improves readability. In addition, the introduction of private fields allows us to hide certain data from downstream users, creating a clean API.

In general, you should consider using classes when you want to create objects that store their own internal data and expose a lot of behavior. Take built-in JavaScript classes as examples:

• The Map and Set classes store a collection of elements and allow you to access them by key using get() , set() , has() , etc.
• The Date class stores a date as a Unix timestamp (a number) and allows you to format, update, and read individual date components.
• The Error class stores information about a particular exception, including the error message, stack trace, cause, etc. It's one of the few classes that come with a rich inheritance structure: there are multiple built-in classes like TypeError and ReferenceError that extend Error . In the case of errors, this inheritance allows refining the semantics of errors: each error class represents a specific type of error, which can be easily checked with instanceof .

JavaScript offers the mechanism to organize your code in a canonical object-oriented way, but whether and how to use it is entirely up to the programmer's discretion.

40 JavaScript Projects for Beginners – Easy Ideas to Get Started Coding JS

The best way to learn a new programming language is to build projects.

I have created a list of 40 beginner friendly project tutorials in Vanilla JavaScript, React, and TypeScript.

My advice for tutorials would be to watch the video, build the project, break it apart and rebuild it your own way. Experiment with adding new features or using different methods.

That will test if you have really learned the concepts or not.

You can click on any of the projects listed below to jump to that section of the article.

Vanilla JavaScript Projects

How to create a color flipper.

• How to create a counter
• How to create a review carousel
• How to create a responsive navbar
• How to create a sidebar
• How to create a modal

How to create a FAQ page

How to create a restaurant menu page, how to create a video background, how to create a navigation bar on scroll, how to create tabs that display different content, how to create a countdown clock, how to create your own lorem ipsum, how to create a grocery list, how to create an image slider, how to create a rock paper scissors game, how to create a simon game, how to create a platformer game.

• How to create Doodle Jump
• How to create Flappy Bird
• How to create a Memory game
• How to create a Whack-a-mole game
• How to create Connect Four game
• How to create a Snake game
• How to create a Space Invaders game
• How to create a Frogger game
• How to create a Tetris game

React Projects

How to build a tic-tac-toe game using react hooks, how to build a tetris game using react hooks, how to create a birthday reminder app.

• How to create a tours page

How to create an accordion menu

How to create tabs for a portfolio page, how to create a review slider, how to create a color generator, how to create a stripe payment menu page, how to create a shopping cart page, how to create a cocktail search page, typescript projects, how to build a quiz app with react and typescript, how to create an arkanoid game with typescript.

If you have not learned JavaScript fundamentals, then I would suggest watching this course before proceeding with the projects.

Many of the screenshots below are from here .

In this John Smilga tutorial , you will learn how to create a random background color changer. This is a good project to get you started working with the DOM.

In Leonardo Maldonado's article on why it is important to learn about the DOM, he states:

By manipulating the DOM, you have infinite possibilities. You can create applications that update the data of the page without needing a refresh. Also, you can create applications that are customizable by the user and then change the layout of the page without a refresh.

Key concepts covered:

• document.getElementById()
• document.querySelector()
• addEventListener()
• document.body.style.backgroundColor
• Math.floor()
• Math.random()
• array.length

Before you get started, I would suggest watching the introduction where John goes over how to access the setup files for all of his projects.

How to create a Counter

In this John Smilga tutorial , you will learn how to create a counter and write conditions that change the color based on positive or negative numbers displayed.

This project will give you more practice working with the DOM and you can use this simple counter in other projects like a pomodoro clock.

• document.querySelectorAll()
• currentTarget property
• textContent

How to create a Review carousel

In this tutorial , you will learn how to create a carousel of reviews with a button that generates random reviews.

This is a good feature to have on an ecommerce site to display customer reviews or a personal portfolio to display client reviews.

• DOMContentLoaded

How to create a responsive Navbar

In this tutorial , you will learn how to create a responsive navbar that will show the hamburger menu for smaller devices.

Learning how to develop responsive websites is an important part of being a web developer. This is a popular feature used on a lot of websites.

• classList.toggle()

How to create a Sidebar

In this tutorial , you will learn how to create a sidebar with animation.

This is a cool feature that you can add to your personal website.

• classList.remove()

How to create a Modal

In this tutorial , you will learn how to create a modal window which is used on websites to get users to do or see something specific.

A good example of a modal window would be if a user made changes in a site without saving them and tried to go to another page. You can create a modal window that warns them to save their changes or else that information will be lost.

• classList.add()

In this tutorial , you will learn how to create a frequently asked questions page which educates users about a business and drives traffic to the website through organic search results.

In this tutorial , you will learn how to make a restaurant menu page that filters through the different food menus. This is a fun project that will teach you higher order functions like map, reduce, and filter.

In Yazeed Bzadough's article on higher order functions, he states:

the greatest benefit of HOFs is greater reusability.

• map, reduce, and filter
• includes method

In this tutorial , you will learn how to make a video background with a play and pause feature. This is a common feature found in a lot of websites.

• classList.contains()

In this tutorial , you will learn how to create a navbar that slides down when scrolling and then stays at a fixed position at a certain height.

This is a popular feature found on many professional websites.

• getFullYear()
• getBoundingClientRect()
• slice method
• window.scrollTo()

In this tutorial , you will learn how to create tabs that will display different content which is useful when creating single page applications.

In this tutorial , you will learn how to make a countdown clock which can be used when a new product is coming out or a sale is about to end on an ecommerce site.

• setInterval()
• clearInterval()

In this tutorial , you will learn how to create your own Lorem ipsum generator.

Lorem ipsum is the go to placeholder text for websites. This is a fun project to show off your creativity and create your own text.

• event.preventDefault()

In this tutorial , you will learn how to update and delete items from a grocery list and create a simple CRUD (Create, Read, Update, and Delete) application.

CRUD plays a very important role in developing full stack applications. Without it, you wouldn't be able to do things like edit or delete posts on your favorite social media platform.

• createAttribute()
• setAttributeNode()
• appendChild()

In this tutorial , you will learn how to build an image slider that you can add to any website.

• querySelectorAll()
• if/else statements

In this tutorial , Tenzin will teach you how to create a Rock Paper Scissors game. This is a fun project that will give more practice working with the DOM.

• switch statements

In this tutorial , Beau Carnes will teach you how to create the classic Simon Game. This is a good project that will get you thinking about the different components behind the game and how you would build out each of those functionalities.

• querySelector()
• setTimeout()

In this tutorial , Frank Poth will teach you how to build a platformer game. This project will introduce you to Object Oriented Programming principles and the Model, View, Controller software pattern.

• this keyword
• OOP principles
• MVC pattern

How to create Doodle Jump and Flappy Bird

In this video series , Ania Kubow will teach you how to build Doodle Jump and Flappy Bird .

Building games are a fun way to learn more about JavaScript and will cover many popular JavaScript methods.

• createElement()
• removeChild()
• removeEventListener()

How to create seven classic games with Ania Kubow

You will have a lot of fun creating seven games in this course by Ania Kubow:

• Memory Game
• Whack-a-mole
• Connect Four
• Space Invaders
• onclick event
• arrow functions

If you are not familiar with React fundamentals, then I would suggest taking this course before proceeding with the projects.

In this freeCodeCamp article , Per Harald Borgen talks about Scrimba's Tic-Tac-Toe game tutorial led by Thomas Weibenfalk. You can view the video course on Scimba's YouTube Channel.

This is a good project to start getting comfortable with React basics and working with hooks.

• import / export

In this tutorial , Thomas Weibenfalk will teach you how to build a Tetris game using React Hooks and styled components.

• useEffect()
• useCallback()
• styled components

In this John Smilga course, you will learn how to create a birthday reminder app. This is a good project to start getting comfortable with React basics and working with hooks.

I would also suggest watching John's video on the startup files for this project.

How to create a Tours Page

In this tutorial , you will learn how to create a tours page where the user can delete which tours they are not interested in.

This will give you practice with React hooks and the async/await pattern.

• try...catch statement
• async/await pattern

In this tutorial , you will learn how to create a questions and answers accordion menu. These menus can be helpful in revealing content to users in a progressive way.

• React icons

In this tutorial , you will learn how to create tabs for a mock portfolio page. Tabs are useful when you want to display different content in single page applications.

In this tutorial , you will learn how to create a review slider that changes to a new review every few seconds.

This is a cool feature that you can incorporate into an ecommerce site or portfolio.

In this tutorial , you will learn how to create a color generator. This is a good project to continue practicing working with hooks and setTimeout.

• clearTimeout()

In this tutorial , you will learn how to create a Stripe payment menu page. This project will give you good practice on how to design a product landing page using React components.

• useContext()

In this tutorial , you will learn how to create a shopping cart page that updates and deletes items. This project will also be a good introduction to the useReducer hook.

• <svg> elements
• useReducer()

In this tutorial , you will learn how to create a cocktail search page. This project will give you an introduction to how to use React router.

React router gives you the ability to create a navigation on your website and change views to different components like an about or contact page.

• <Router>
• <Switch>

If you are unfamiliar with TypeScript, then I would suggest watching this course before proceeding with this project.

In this tutorial , Thomas Weibenfalk will teach you how to build a quiz app with React and TypeScript. This is a good opportunity to practice the basics of TypeScript.

• dangerouslySetInnerHTML

In this tutorial , Thomas Weibenfalk will teach you how to build the classic Arkanoid game in TypeScript. This is a good project that will give you practice working with the basic concepts for TypeScript.

• HTMLCanvasElement

I hope you enjoy this list of 40 project tutorials in Vanilla JavaScript, React and TypeScript.

Happy coding!

Read more posts .

If this article was helpful, share it .

Learn to code for free. freeCodeCamp's open source curriculum has helped more than 40,000 people get jobs as developers. Get started

CS98SI: Introduction to JavaScript

Announcements.

Homework 2 is here!

In the AJAX lecture, we build a small web application, which you can download here .

HTML Template

You can get a blank HTML template here .

This quarter we will be using Piazza for class discussion. Please sign up here .

Course information

Course information can be found here .

Previous labs

In-class labs can be found here . (The labs are for practice only and will not count towards your final grade.)

• Homework 1 (released April 22, due May 8)
• Homework 2 (TBD)

Overview of JavaScript (Week 1 Lecture 1)

What is JavaScript? Brief history. Common use-cases. Runtime environments. ECMAScript standards. Overview of language features. Running JavaScript in the browser and at the command line. Debugging JavaScript in the browser. The console and REPL. (Flanagan Chapters 1–2)

Basic syntax (Week 1 Lecture 2)

Values and literals. Primitive types. Numbers. Integer and floating point as a single type. Special floating point numbers. Rounding errors. The Math library. Strings. Immutability of strings. + and [] operators. toString . Common string utilities. Booleans. Ternary operator. Truth-y and False-y values. null and undefined . Regular expressions. Dynamic typing. Weak typing. The typeof operator. The === and !== operators. Control statements. (Flanagan Chapters 3–5)

Arrays and Objects (Week 2 Lecture 1)

Arrays. Array insertion and deletion. Array length. Sparse arrays. Multidimensional arrays. Almost everything is an object. Objects as unordered maps. Object creation, modification and lookup syntax. Nested objects. Object methods. The delete keyword. The for... in statement, and the hasOwnProperty method. The global window object. Object references. Aliasing. Pass-by-reference-copy semantics. (Flanagan Chapters 6–7)

Functions (Week 2 Lecture 2)

Function declaration and invocation syntax. Anonymous functions. Functions as data. The arguments object. Variadic functions. Optional parameters. Named parameters. Function overloading. Duck typing. (Flanagan Chapter 8)

HTML and CSS and The Document Object Model (Week 3 Lecture 1)

Tags. Document structure. Elements. Text, forms, images, blocks and frames. Selectors. Cascading and inheritence. Text and color tyles. The box model. Layout. The DOM as an document API. Browser information. The setTimer and setTimeout . Element lookup. Tree traversal. Attribute getting and setting. Creating and deleting nodes. Events. (Flanagan Chapters 15 and 16)

jQuery (Week 3 Lecture 2)

Overview of jQuery. Cross-browser compatibility. The $ function object. Element selectors. Tree traversal. Node creation, insertion, modification and deletion. Getting and setting attributes, styles and class. Wrapping and unwrapping DOM raw objects. The chaining pattern. (Flanagan Chapter 19)

More jQuery (Week 4 Lecture 1)

Event handling. bind and unbind . Keyboard and mouse events. Event delegation and bubbling. Animation. (Flanagan Chapters 17, 19)

AJAX with jQuery (Week 4 Lecture 2)

AJAX. Asynchronous communication. Callback functions. The get and post formats. Same-origin policy. Cross-origin requests with JSONP. AJAX polling. (Flanagan Chapter 19)

Context (Week 5 Lecture 1)

Object method invocation as method passing. The this variable as an implicit parameter variable. Problems with methods in event handlers and callbacks. Usage of call and apply . Binding context. The new keyword. (Course Reader)

Closures (Week 5 Lecture 2)

Lexical scope. Inner functions. Closure scope. Examining closure scope in the debugger. Functors. Simulation of private object properties. Simulation of namespaces. (Crockford Chapter 4)

Higher-order Functions (Week 6 Lecture 1)

Functional programming. Side effects. Referential transparancy. Iteration over collections without loops. Implementation of map, reduce, find, filter. (Course Reader)

More Higher-Order Functions (Week 6 Lecture 2)

Implementation of curry, memoize, and debounce. (Course Reader)

Security (Week 7 Lecture 1)

Same-origin policy. Cross-site scripting attacks (reflected and persisted). Cookie theft and forgery. Whitelisting and blacklisting.

Node.js (Week 7 Lecture 2)

Server-side scripting. Threaded vs event-based server models. Working with callbacks. The Express web framework.

Backbone.js (Week 9 Lecture 1)

Guest lecture by Min Ming Lo, Pixelapse.

TBD (Week 8 Lecture 2)

Guest lecture from Leith Abdulla, Coursera. The anatomy of a javascript module: the design, layout and components of a typical javascript library used to help a front-end team scale their work.

HTML 5 APIs (Week 8 Lecture 1)

HTML 5 APIs.

d3.js (Week 9 Lecture 2)

Data visualization. Drawing graphics using SVG. Selections with select and selectAll . Adding and deleting elements with enter and exit . Binding data with data . Animation with transition . (Course reader)

The Future of JavaScript (Week 10 Lecture 1)

Current trends in JavaScript. JIT engines. New EMCAScript features. The HTML5 roadmap. Alternative MVC frameworks: AngularJS, Ember.js, Knockout. CoffeeScript. Trends towards fat clients and API-based services. (Course reader)

• JavaScript: The Good Parts by Douglas Crockford
• JavaScript: The Definitive Guide by David Flanagan
• Dive Into HTML5 by Mark Pilgrim
• Learning Advanced Javascript by John Resig
• JavaScript Garden
• MDN JavaScript Wiki

• Search Please fill out this field.
• Manage Your Subscription
• Give a Gift Subscription
• Newsletters
• Sweepstakes

• Entertainment

SZA Calls Herself a 'Math Dummy' as She Tries to Help Fan Failing Geometry with Homework: See the Funny DMs

"Sza I’m failing geometry can you give me math tips," the fan wrote in a private message on Instagram

Gilbert Flores/Billboard via Getty Images

SZA is not a math wiz!

The Grammy winner, 34, shared a screenshot on her Instagram Story on Aug. 28, of an interaction with a fan who desperately needed help with their geometry homework — but she admittedly didn't have much to offer. 

"Sza I’m failing geometry can you give me math tips," the fan wrote in a private message on the app.

The "Shirt" singer responded, "Lmaooo ma’am I’m a math dummy," before asking for more information.

Rachpoot/Bauer-Griffin/GC Images

"I’m not sure what u expected," SZA added. "Tell me bout the shapes chile [...] How can I help?"

The fan responded with a screenshot of their assignment which was labeled "finding coordinates" and displayed two graphs. "I just can’t do this," they wrote along with the image, adding a series of crying face and broken heart emojis.

Unfortunately, SZA ran out of optimism upon seeing the homework assignment. "Oh bitch ur cooked," she replied.

The singer first responded to the fan's message at 8:07 p.m. local time, according to the screenshot, and delivered her last message at 5:32 a.m.

sza/Instagram

SZA has opened up about struggles during her school years in the past, mainly her experience being bullied . "I was bullied because I wasn't quiet and I was awkward at the same time," the singer told PEOPLE in 2023. "I wasn't this tiny sad victim, but I was more so attacked just because it was giving 'What is wrong with you?' energy."

"I always thought, 'Oh my God.' I'll never have the approval of anyone in life, this must be my defining factor, this must be the bottom line," she added.

The "Saturn" singer eventually learned to embrace her differences, saying, "I realized that all the things that made me feel so lame were actually what made me into who I am. It's like, I didn't go to prom because I didn't have any friends and I had no one to go to prom with ... [and now] it's so weird that my life turned into [having] a bodyguard while traveling to parties.were actually what made me into who I am."

She continued, "All these things, if I had such a fulfilling existence and experience in high school, I would've felt validated to the point where I didn't need to do any more. [So] I just had to do more, I had to be more because I was like, 'This s---ty experience can't be the end of it because if it is, I am cooked.'"

Related Articles

• Manage Account

SZA Gets a DM From a Fan Asking for Help With Math Homework: Here’s How She Responded

The R&B star tried to take it back to geometry class.

By Michael Saponara

Michael Saponara

• Share on Facebook
• Share to Flipboard
• Share on Pinterest
• + additional share options added
• Share on Reddit
• Share on LinkedIn
• Share on Whats App
• Send an Email
• Print this article
• Post a Comment
• Share on Tumblr

See latest videos, charts and news

Lee Youngji Wants to Spotlight Her 'Musician Mode' & Get Drunk With Fans on First U.S. Tour

“Lmaooo ma’am I’m a math dummy I’m not sure what u expected,” the four-time Grammy winner replied. “Tell me about the shapes chile how can I help?”

Trending on Billboard

SZA proved to be no match for the geometry questions and couldn’t come up with the answers. “Oh b—h ur cooked,” the TDE artist candidly admitted.

Even though she failed, SZA — born Solana Rowe — posted the exchange to her Instagram Story and appreciated the fan for believing in her intellect. “I appreciate the faith in me,” the star captioned the post.

SZA shares a DM she received from a fan asking for math homework help pic.twitter.com/MFudV8CM8h — CONSEQUENCE (@consequence) August 29, 2024

While her math skills might not be up to par, her songwriting remains elite as she collected another accolade in June when SZA won the Hal David Starlight Award at the 2024 Songwriters Hall of Fame Induction and Awards. She’s the second Black woman to receive the honor behind Alicia Keys.

SZA has laid low on the music side of things after releasing her “Saturn” single in February. Even nearly two years after SOS ‘ release, the project has remained a staple on the Billboard 200 , where it sits at No. 13 on the Aug. 31-dated chart.

Get weekly rundowns straight to your inbox

Want to know what everyone in the music business is talking about?

Get in the know on.

Billboard is a part of Penske Media Corporation. © 2024 Billboard Media, LLC. All Rights Reserved.

optional screen reader

Charts expand charts menu.

• Billboard Hot 100™
• Billboard 200™
• Hits Of The World™
• TikTok Billboard Top 50
• Songs Of The Summer
• Song Breaker
• Year-End Charts
• Decade-End Charts

Music Expand music menu

• R&B/Hip-Hop

Videos Expand videos menu

Culture expand culture menu, media expand media menu, business expand business menu.

• Business News
• Record Labels
• View All Pro

Pro Tools Expand pro-tools menu

• Songwriters & Producers
• Artist Index
• Royalty Calculator
• Market Watch
• Industry Events Calendar

Billboard Español Expand billboard-espanol menu

• Cultura y Entretenimiento

Get Up Anthems by Tres Expand get-up-anthems-by-tres menu

Honda music expand honda-music menu.

• Today's news
• Reviews and deals
• Climate change
• 2024 election
• Newsletters
• Fall allergies
• Health news
• Mental health
• Sexual health
• Family health
• So mini ways
• Unapologetically
• Buying guides
• Labor Day sales

Entertainment

• How to Watch
• My watchlist
• Stock market
• Biden economy
• Personal finance
• Stocks: most active
• Stocks: gainers
• Stocks: losers
• Trending tickers
• World indices
• US Treasury bonds
• Top mutual funds
• Highest open interest
• Highest implied volatility
• Currency converter
• Basic materials
• Communication services
• Consumer cyclical
• Consumer defensive
• Financial services
• Industrials
• Real estate
• Mutual funds
• Credit cards
• Balance transfer cards
• Cash back cards
• Rewards cards
• Travel cards
• Online checking
• High-yield savings
• Money market
• Home equity loan
• Personal loans
• Student loans
• Options pit
• Fantasy football
• Pro Pick 'Em
• College Pick 'Em
• Fantasy baseball
• Fantasy hockey
• Fantasy basketball
• Download the app
• Daily fantasy
• Scores and schedules
• GameChannel
• World Baseball Classic
• Premier League
• CONCACAF League
• Champions League
• Motorsports
• Horse racing

New on Yahoo

• Privacy Dashboard

SZA Hilariously Engages With Fan Over Math Homework Query In Instagram DM: ‘Oh B***h Ur Cooked’

SZA’s musical talent is well-known, but a fan’s recent math homework query exposed her less-than-stellar skills in the school subject.

According to Vibe , the fan messaged the SOS singer via DM, asking if she could help improve their performance in the math class.

“Sza I’m failing Geometry can you give me math tips?” the person asked.  

The 34-year-old responded, hilariously writing, “ Lmaooo  ma’am I’m a math dummy. I’m not sure what you expected. Tell me bout the shapes chile. How can I help.”

Although SZA openly acknowledged her lack of expertise in mathematics, the fan shared a screenshot of their homework, admitting they could not solve it. “I just can’t do this,” they wrote along with several emojis.

The Grammy Award winner responded, “Oh b***h ur cooked,” indicating she could not assist with the math problem.

SZA shares a DM she received from a fan asking for math homework help pic.twitter.com/MFudV8CM8h — CONSEQUENCE (@consequence) August 29, 2024

SZA has always taken pride in establishing a close relationship with her fans . In her 2023 Rolling Stone cover story interview, the St. Louis native shared how she always makes time for her supporters.

“I’m never off the clock for my fans, because I love that s**t. They’re my family, and they’re my people,” SZA told the magazine. “I know what it’s like to feel small or like somebody doesn’t care, because that’s who I was my whole life. In middle school, elementary school, I wasn’t popular.”

She also shared how hard it is to know who is safe to invite to her home .

“How do I determine who’s safe to do that? I don’t. And sometimes it feels really bad,” she added.

Navigation Menu

Search code, repositories, users, issues, pull requests..., provide feedback.

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly.

To see all available qualifiers, see our documentation .

• Notifications You must be signed in to change notification settings

C++ assignments and homeworks starter files includes GitHub Actions to build and run unit tests.

acc-cosc-1337-fall-2024/course-prisillygirl

Folders and files.

Repository files navigation

Acc-cosc-1337-template.

C++ Development examples and homeworks starter code. Includes GitHub Actions for building and unit testing C++ programs.

1-Windows Development Environment Setup

2-Install Visual Studio Extensions

Honor's latest tablet can clean up your messy math homework

The latest AI advancement digitizes that chicken scratch for easy studying later on.

What you need to know

• Honor highlighted a new feature arriving for the upcoming MagicPad 2 called "AI Formula Recognition" alongside YouTuber Patrick Jones.
• The AI software recognizes the complexity of a user's handwritten math equations to digitize them.
• Honor is set to make the tablet's full announcement at IFA 2024 on September 5 in Berlin, Germany at 2 pm CEST (8 am EST).

Honor showed off how its AI software can assist users with complex math in a series of teases for its upcoming event.

In conjunction with YouTuber Patrick Jones , runner of the patrickJMT channel, Honor's AI software was challenged with complex algebraic equations. The video was captured on Honor's new MagicPad 2 using a new AI feature called "AI Formula Recognition."

The company states that its Formula Recognition software lets users convert handwritten math equations into digital text. Honor sees its usefulness as two-pronged. Teachers can seamlessly take those digitized notes and offer them to students. Similarly, students can help make studying easier later on with digitized, searchable, and editable notes.

During Patrick's demo, users can tap the pi icon to produce a double text box. Users can highlight a specific area they want Honor's AI to digitize or they can write in a formula and pop it in after.

The AI's recognition of various math formulas, symbols, and the like was evident during Patrick's example. The video crawled through simple equations (2x + 3y = 8) to others that would boggle your mind if you weren't a mathematician.

Patrick needed to find "X" and "Y" in the video, which held the grand reveal we were waiting for. "X" came out to 9.05 while "Y" was 2024. Math aside, the answer is the date for Honor IFA 2024 in Berlin, Germany on September 5 at 2 pm CEST (8 am EST). Those interested can watch Patrick Jones' video for a complex dive into Honor's AI prowess for math equations and discover a nod to Albert Einstein.

With Honor's IFA event set for next week, the company highlighted "what's next." One of the items listed was its recent launch of foldable phones, which are surprisingly thin. The Magic V3 and Magic Vs3 are Honor's latest book-style foldable devices that measure 9.2mm when folded. The company recently detailed how its foldable defied the odds regarding its thinness as Honor leaned heavily into the R&D behind its silicon-carbon battery.

Be an expert in 5 minutes

Get the latest news from Android Central, your trusted companion in the world of Android

But AI is the star of the show. Honor showed off some AI advancements earlier this year during MWC 2024, including a look at its AI Defocus Eye Protection. This feature was designed to help cut back on eye strain and myopia by blurring peripheral vision.

Nickolas is always excited about tech and getting his hands on it. Writing for him can vary from delivering the latest tech story to scribbling in his journal. When Nickolas isn't hitting a story, he's often grinding away at a game or chilling with a book in his hand.

OnePlus Pad 2 vs. Samsung Galaxy Tab S9 Ultra: Dethroning the tablet champion?

Galaxy Tab S10 Plus, Ultra leak teases Galaxy AI and a familiar design

Samsung Galaxy Ring review: The most useless product in the Galaxy

Most Popular

• 2 Get 50% OFF the new Pixel 9 plus six months of free wireless with this unreal Mint Mobile deal
• 3 Google Pixel Watch 3 vs. Samsung Galaxy Watch Ultra: Different takes, same goal
• 4 Uh, what month is it? My favorite Android phone just got a Prime Day discount during Best Buy's Labor Day sale
• 5 Apple and Samsung can't hold a candle to Google's Magic Eraser

Stay up to date with notifications from The Independent

Notifications can be managed in browser preferences.

UK Edition Change

• UK Politics
• News Videos
• Paris 2024 Olympics
• Rugby Union
• Sport Videos
• John Rentoul
• Mary Dejevsky
• Andrew Grice
• Sean O’Grady
• Photography
• Theatre & Dance
• Culture Videos
• Fitness & Wellbeing
• Food & Drink
• Health & Families
• Royal Family
• Electric Vehicles
• Car Insurance Deals
• Lifestyle Videos
• UK Hotel Reviews
• News & Advice
• Simon Calder
• Australia & New Zealand
• South America
• C. America & Caribbean
• Middle East
• Politics Explained
• News Analysis
• Today’s Edition
• Home & Garden
• Broadband deals
• Fashion & Beauty
• Travel & Outdoors
• Sports & Fitness
• Climate 100
• Sustainable Living
• Climate Videos
• Solar Panels
• Behind The Headlines
• On The Ground
• Decomplicated
• You Ask The Questions
• Binge Watch
• Travel Smart
• Watch on your TV
• Crosswords & Puzzles
• Most Commented
• Newsletters
• Ask Me Anything
• Virtual Events
• Wine Offers
• Betting Sites

Thank you for registering

Please refresh the page or navigate to another page on the site to be automatically logged in Please refresh your browser to be logged in

Teachers to use AI to mark homework under new Government plan

Almost half of teachers are already using ai in some form to help with their work, article bookmarked.

Find your bookmarks in your Independent Premium section, under my profile

The best of Voices delivered to your inbox every week - from controversial columns to expert analysis

Sign up for our free weekly voices newsletter for expert opinion and columns, sign up to our free weekly voices newsletter, thanks for signing up to the independent voices email.

AI is being trained up to mark homework for teachers under a new project announced by the Government.

The £4 million scheme will see documents including curriculum guidance, lesson plans and anonymised pupil assessments used to train AI to create tools which can be used reliably in schools.

Research has shown that parents would be open to teachers using generative AI tools to help them with certain tasks, so they could then spend more time helping children in the classroom.

Tests of the new approach carried out by the Department for Education (DfE) found it could increase accuracy to 92%, up from 67% when no targeted data was provided to an AI model.

“We know teachers work tirelessly to go above and beyond for their students,” Science Secretary Peter Kyle said.

“By making AI work for them, this project aims to ease admin burdens and help them deliver creative and inspiring lessons every day, while reducing time pressures they face.

“This is the first of many projects that will transform how we see and use public sector data. We will put the information we hold to work, using it in a safe and responsible way to reduce waiting lists, cut backlogs and improve outcomes for citizens across the country.”

Minister for Early Education Stephen Morgan said: “We are determined to break down the barriers to opportunity to ensure every child can get the best possible education – and that includes access to the best tech innovations for all.

“Artificial intelligence, when made safe and reliable, represents an exciting opportunity to give our schools leaders and teachers a helping hand with classroom life.

“Today’s announcement marks a huge step forward for AI in the classroom.

“This investment will allow us to safely harness the power of tech to make it work for our hard-working teachers, easing the pressures and workload burdens we know are facing the profession and freeing up time, allowing them to focus on face-to-face teaching.”

To encourage innovation under the new scheme, the Government said it would also make the content store of educational data available to AI companies, with a share of £1 million to be awarded to those who brought forward the best ideas for tools to use the data to aid teachers.

According to a survey from TeacherTapp, almost half of teachers were already using AI in some form to help with their work, but the Government said these tools were not specifically trained on teaching materials used in England.

Subscribe to Independent Premium to bookmark this article

Want to bookmark your favourite articles and stories to read or reference later? Start your Independent Premium subscription today.

New to The Independent?

Or if you would prefer:

Hi {{indy.fullName}}

• My Independent Premium
• Account details
• Help centre

ECE 364: Programming Methods for Machine Learning (Fall 2024)

Teaching Staff

Class Time & Location

Work submission logistics.

Gradescope for assignments (self-enrollment code EV6W7W ): [link]

Course Information

In this course, you will learn how to use auto-differentiation tools like PyTorch, how to leverage them for basic machine learning algorithms (linear regression, logistic regression, deep nets, k-means clustering), and how to extend them with custom methods to fit your needs. Auto-differentiation is one of the most important tools for data analysis and a solid understanding is increasingly important in many disciplines. In contrast to existing courses that focus on algorithmic and theoretical aspects, here we focus on studying material that permits deploying auto-diff tools to your area of interest. Pre-requisites:  Math 257 (Linear Algebra with Computational Applications) or equivalent, basic probability, and proficiency in Python. Recommended Reference Texts: (1) Pattern Recognition and Machine Learning by Christopher Bishop (2) Machine Learning: A Probabilistic Perspective by Kevin Murphy (3) Deep Learning by Ian Goodfellow and Yoshua Bengio and Aaron Courville

Please note that these books are more comprehensive than the material covered in this class. Course Deliverables: (1) Homeworks (submission on Gradescope) (2) Midterm Exams: There will be two midterm exams.

40% Homeworks; 30% each Midterm

The syllabus is subject to minor changes.

Time: Mon/Wed 10:15am-11:44am

Location: Town 100

Instructors: Prof. Dinesh Jayaraman ([email protected]) Prof. Mingmin Zhao ([email protected])

• Tongtong Liu (Head TA) - [email protected]
• Zelong Wang (Head TA) - [email protected]
• Chandler Cheung - [email protected]
• Deeksha Sethi - [email protected]
• Edward Hu - [email protected]
• Guangyao Dou - [email protected]
• Haorui Li - [email protected]
• Harshwardhan Yadav - [email protected]
• Helen Nguyen - [email protected]
• Jianing Qian - [email protected]
• Jocelyn Gao - [email protected]
• Wendy Deng - [email protected]
• Daniel Alexander - [email protected]

Office Hours: We are currently holding the office hours listed below.

Collaboration policy: You are responsible for knowing Penn's Code of Academic Integrity . In particular, copying solutions from other students or other resources (e.g. the web or from students who have taken the class in previous years) is NOT allowed. Making answers to homeworks or exams available to others either directly or by posting on the web is also NOT allowed. We will not have a sense of humor about violations of this policy!

AI/LLM policy: Modern AI tools (e.g., ChatGPT, Claude, Gemini, etc.) can be of great help in understanding concepts, and we have no concerns about you using them to get alternative explanations for topics. Always dig a bit deeper when learning from an LLM, like following up links to make sure the LLM did not simply make something up. Given that we are trying to teach general, reusable skills -- we expect you to write your homework without help from an LLM or from a classmate. Please note that the exams will be tailored with this in mind (i.e., closed-book exams focusing on the ability to tackle problems) so you should make sure you can solve problems on your own!

Links: We will use Ed Discussion for questions and communication, and GradeScope to submit assignments. Canvas is just the “official” LMS of the university, but in practice we will not use it very much after the first week. It serves as the hub for Gradescope, Ed Forum etc. All other materials will be posted on the course website. We encourage students to use Google Colab for coding assignments.

Waitlist: We have a very large amount of demand for just a few remaining slots in the class. As such, we are currently only considering students who are graduating this fall and who need to take the course this fall for credit to graduate. In addition, all prerequisites must be satisfied and all waitlist application questions must have been answered correctly, and all decisions are at the discretion of the instructors. Please only reach out to us if you believe you qualify and have not yet heard back.

Attendance: We expect students to attend classes regularly; weekly quizzes designed to make sure students are following course material. However, please do not come to class if you are not feeling well or test positive for Covid-19. We will provide course recordings (on Canvas) and lecture notes (on this website) for students unable to make it to class.

Description: Machine learning has been essential to the success of many recent technologies, including autonomous vehicles, search engines, genomics, automated medical diagnosis, image recognition, and social network analysis. This course will introduce the fundamental concepts and algorithms that enable computers to learn from experience, with an emphasis on their practical application. It will introduce supervised learning (linear and logistic regression, decision trees, neural networks and deep learning, and Bayesian networks), unsupervised learning (clustering and dimensionality reduction), and reinforcement learning.

CIS 4190 vs. 5190: This course has an undergraduate version (CIS 4190) and a graduate version (CIS 5190). The lectures are the same, but you may be evaluated differently on your homeworks and projects; in particular, some homeworks will have components that are mandatory for CIS 5190 but optional for CIS 4190. Importantly, since the two versions have different requirements, you cannot complete the course as CIS 4190 and petition afterwards to have it changed to CIS 5190 for graduate credit.

CIS 5190 vs. 5200: Penn CIS offers two different introductory machine learning courses: CIS 4190/5190 (Applied Machine Learning) and CIS 5200 (Machine Learning). While there is overlap, the former (this course!) emphasizes practical application of existing machine learning methods, whereas the latter emphasizes the statistical foundations and theory of ML. CIS 5190 is NOT a prerequisite for CIS 5200. It makes little sense to take both courses (though taking CIS 4190/5190 and later CIS 5200 is possible).

CIS 5190 vs. 5450: Penn CIS also offers CIS 5450, which offers a holistic view of the data science pipeline, including data wrangling, data visualization, machine learning, and scalable data processing. In contrast, this course focuses primarily on machine learning, covering machine learning algorithms in greater breadth and depth. The two courses can be taken in either order, but students should consider taking CIS 5450 first.

Prerequisites: Introductory probability and statistics, multivariable calculus, and linear algebra are required (HW 0 will test your knowledge of this material). In addition, you are expected to be able to program comfortably in some language. We will use Python throughout the course, and can help you pick it up (primer + office hours). If you are not confident of your coding skills in any language at all, the homework may be very difficult.

Textbook: There is no required textbook, but you can find useful resources here .

This grading scheme is tentative and will be finalized soon.

Homework (25%): There will be 5 homework assignments, each containing both a written component and a coding component. The written portion will be submitted via GradeScope; the coding portion will be submitted both via GradeScope and programmatically to an autograder. Detailed instructions will be provided in the assignment.

Project (30%): We will provide more details on the final project shortly.

Mid-term Exams (30%): There will be two Mid-term exams, one in the middle of the semester and one at the end. The exams will be closed-book and will test your understanding of the material covered in the course.

Quizzes (10%): There will be 12 (roughly weekly) quizzes testing basic understanding of the material covered that week; these will be submitted on GradeScope. You will receive full credit if you correctly answer at least 50% of the questions.

Good citizenship points (5%): Everyone has them by default, you can lose them for disruptive behaviors in class/on Ed discussions.

Grading scheme: A+: 90+, A: 85-90, A-: 80-85, B+: 75-80, B: 70-75, B-: 65-70, lower passing grades: 50-65. Grades might be curved, but only upwards. i.e. your grade will only improve.

Late policy: For homework assignments, you will lose 0.5% per late hour (rounded up), with a maximum of 48 late hours per assignment. For example, if you submit HW 1 20 hours late, you lose 10% of points on HW 1 (which is 0.5% of your overall course grade). If you have medical reason for an extension, send both professors a copy of your medical visit report, and we will grant an penalty-free extension (typically 2 days); we will consider other requests on a case-by-case basis.

JS Tutorial

Js versions, js functions, js html dom, js browser bom, js web apis, js vs jquery, js graphics, js examples, js references, javascript assignment, javascript assignment operators.

Assignment operators assign values to JavaScript variables.

Shift Assignment Operators

Bitwise Assignment Operators

Logical Assignment Operators

The = Operator

The Simple Assignment Operator assigns a value to a variable.

Simple Assignment Examples

The += operator.

The Addition Assignment Operator adds a value to a variable.

Addition Assignment Examples

The -= operator.

The Subtraction Assignment Operator subtracts a value from a variable.

Subtraction Assignment Example

The *= operator.

The Multiplication Assignment Operator multiplies a variable.

Multiplication Assignment Example

The **= operator.

The Exponentiation Assignment Operator raises a variable to the power of the operand.

Exponentiation Assignment Example

The /= operator.

The Division Assignment Operator divides a variable.

Division Assignment Example

The %= operator.

The Remainder Assignment Operator assigns a remainder to a variable.

Remainder Assignment Example

Advertisement

The <<= Operator

The Left Shift Assignment Operator left shifts a variable.

Left Shift Assignment Example

The >>= operator.

The Right Shift Assignment Operator right shifts a variable (signed).

Right Shift Assignment Example

The >>>= operator.

The Unsigned Right Shift Assignment Operator right shifts a variable (unsigned).

Unsigned Right Shift Assignment Example

The &= operator.

The Bitwise AND Assignment Operator does a bitwise AND operation on two operands and assigns the result to the the variable.

Bitwise AND Assignment Example

The |= operator.

The Bitwise OR Assignment Operator does a bitwise OR operation on two operands and assigns the result to the variable.

Bitwise OR Assignment Example

The ^= operator.

The Bitwise XOR Assignment Operator does a bitwise XOR operation on two operands and assigns the result to the variable.

Bitwise XOR Assignment Example

The &&= operator.

The Logical AND assignment operator is used between two values.

If the first value is true, the second value is assigned.

Logical AND Assignment Example

The &&= operator is an ES2020 feature .

The ||= Operator

The Logical OR assignment operator is used between two values.

If the first value is false, the second value is assigned.

Logical OR Assignment Example

The ||= operator is an ES2020 feature .

The ??= Operator

The Nullish coalescing assignment operator is used between two values.

If the first value is undefined or null, the second value is assigned.

Nullish Coalescing Assignment Example

The ??= operator is an ES2020 feature .

Test Yourself With Exercises

Use the correct assignment operator that will result in x being 15 (same as x = x + y ).

Start the Exercise

COLOR PICKER

Contact Sales

If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail: [email protected]

Report Error

If you want to report an error, or if you want to make a suggestion, send us an e-mail: [email protected]

Top Tutorials

Top references, top examples, get certified.

Cookies on GOV.UK

We use some essential cookies to make this website work.

We’d like to set additional cookies to understand how you use GOV.UK, remember your settings and improve government services.

We also use cookies set by other sites to help us deliver content from their services.

You have accepted additional cookies. You can change your cookie settings at any time.

You have rejected additional cookies. You can change your cookie settings at any time.

Teachers to get more trustworthy AI tech as generative tools learn from new bank of lesson plans and curriculums, helping them mark homework and save time

The UK government announced a new project today that will enhance AI's ability to assist teachers in marking work and planning lessons.

Using AI tools to help reduce teachers' workload.

• Teaching standards, guidelines and lesson plans will form a new optimised content store which will train generative AI to make it more reliable for teachers in England
• new project will bring teachers and tech companies together to develop and use trustworthy AI tools that can help mark homework and save teachers time
• comes as new research shows parents want teachers to use AI to reduce out of hours work and boost time spent teaching children

Artificial intelligence will be better at helping teachers mark work and plan lessons under a new project announced by the UK government today. 

The project, backed by £4 million of government investment, will pool government documents including curriculum guidance, lesson plans and anonymised pupil assessments which will then be used by AI companies to train their tools so they generate accurate, high-quality content, like tailored, creative lesson plans and workbooks, that can be reliably used in schools. 

The content store is targeted at technology companies specialising in education to build tools which will help teachers mark work, create teaching materials for use in the classroom and assist with routine school admin. 

It comes as new research shows parents want teachers to use generative AI to enable them to have more time helping children in the classroom with face-to-face teaching – supporting the government’s mission to break down barriers to opportunity. However, teachers and AI developers are clear better data is needed to make these technologies work properly, which this project looks to help with. 

Science Secretary Peter Kyle said: 

We know teachers work tirelessly to go above and beyond for their students.  By making AI work for them, this project aims to ease admin burdens and help them deliver creative and inspiring lessons every day, while reducing time pressures they face.  This is the first of many projects that will transform how we see and use public sector data. We will put the information we hold to work, using it in a safe and responsible way to reduce waiting lists, cut backlogs and improve outcomes for citizens across the country.

Minister for Early Education Stephen Morgan said: 

We are determined to break down the barriers to opportunity to ensure every child can get the best possible education – and that includes access to the best tech innovations for all. Artificial Intelligence, when made safe and reliable, represents an exciting opportunity to give our schools leaders and teachers a helping hand with classroom life.  Today’s world-leading announcement marks a huge step forward for AI in the classroom. This investment will allow us to safely harness the power of tech to make it work for our hard-working teachers, easing the pressures and workload burdens we know are facing the profession and freeing up time, allowing them to focus on face-to-face teaching.

The content store, backed by £3 million, is a first-of-its kind approach to processing government data for AI , as the UK government forges ahead with using technology to transform public services and improve lives people across the country.   

It includes a partnership with the Open University which is sharing learning resources to be drawn on as part of the project. 

This follows Department for Education tests, published today, which show providing generative AI models with this kind of data can increase accuracy to 92%, up from 67% when no targeted data was provided to a large language model. 

Minister Morgan announced the project today during a speech to international education ministers at the Global Education Innovation Summit ( GEIS ) in Seoul, Republic of Korea.  The three-day event, on the theme of “classroom revolution led by teachers with AI ” will see the launch of the Global Education and Innovation Alliance, of which the UK will be of the founding members. 

He told the delegation the world-leading initiative will mark the first government-approved store of high-quality education material optimised for AI product development and will stimulate the production of safe, legally compliant, evidence-based tools, relevant to our teachers’ needs. 

To encourage AI companies to make use of the datastore, a share of an additional £1 million will be awarded to those who bring forward the best ideas to put the data into practice to reduce teacher workload. Each winner will build an AI tool to help teachers specifically with feedback and marking by March 2025, with applications opening on 9th September. 

Almost half of teachers are already using AI to help with their work, according to a survey from TeacherTapp, but current AI tools are not specifically trained on the documents setting out how teaching should work in England. 

Chris Goodall, a teacher and Head of Digital Education in the Bourne Education Trust, first started using AI when he was teaching business in November 2022. Here, Chris experimented with using ChatGPT to develop a range of lesson activities, such as personalised case studies, to complement his lessons. 

Now, Chris supports teachers across over 26 primary, secondary and specialist schools in the Trust to enhance their lessons and cut down the time they need to spend on admin by using AI . 

With his support, teachers have used generative AI to evaluate their curriculum materials, create case studies and other activities to create engaging lessons. Teachers at Auriol Junior School even illustrated a teacher-written guide encouraging students to read more books with AI -generated text, cartoon creatures and music, encouraging students to become a “literacy monster” and making the programme more engaging. 

Chris Goodall, a teacher and Head of Digital Education in the Bourne Education Trust, said: 

AI has been a hugely powerful tool for me and my colleagues at the Bourne Education Trust. It allows us to create engaging, personalised learning experiences for our students while also significantly reducing the time taken to create them. Personally, I’ve used AI to quickly generate scaffolded activities, adapt materials for students with special educational needs, and create more engaging lessons that are accessible to all. The time saved allows school staff to focus on what matters most, interacting with students and providing individualised feedback and support.  The content store will take this to the next level by offering easy access to high quality evidence based and legally compliant education materials. Developed with input from educators it supports effective teaching practices and fosters collaboration and innovation.  This initiative demonstrates how AI , when implemented responsibly and ethically, can support and empower teachers to create more dynamic, personalised learning experiences for students.

Ian Cunningham, the Chief Technical Office of TeachMate, which makes AI tools to help teachers, said: 

TeachMateAI already saves teachers over 10+ house of time each week through our AI tools, but we are ambitious about what more we can do to support teachers and schools. The AI education store has the potential to enable us and other developers to produce highly accurate tools for the sector in a much more efficient way, reducing cost, compute and the time it takes us to bring new products to market.

The Department for Education is also today committing to publishing a safety framework on AI products for education, due later this year. Minister Morgan will meet education technology companies before setting out clear expectations for the safety of AI products for education. 

Professor Ian Pickup, Pro Vice Chancellor, Students, at The Open University, said:

We’re excited to be a founding strategic partner in this initiative alongside DfE . Since our founding in 1969, we have remained at the forefront of innovation in education. As part of this mission, we have provided free, open-access materials via OpenLearn since 2006, and see the deployment of AI as a means through which even more learners can benefit from the transformative power of education.   By making content accessible to new educational technology tools, we foresee a future where learning materials can be best matched to personal needs, where learning tasks can be pitched at the right level for student success, and where students can progress at a pace that is right for them.

Share this page

The following links open in a new tab

• Share on Facebook (opens in new tab)
• Share on Twitter (opens in new tab)

Updates to this page

Is this page useful.

• Yes this page is useful
• No this page is not useful

Help us improve GOV.UK

Don’t include personal or financial information like your National Insurance number or credit card details.

To help us improve GOV.UK, we’d like to know more about your visit today. Please fill in this survey (opens in a new tab) .