---
id: 652f948489abbb81e6bf5a01
title: Step 1
challengeType: 0
dashedName: step-1
---
# --description--
In this project you will learn basic string and array methods by building a music player app. You will be able to play, pause, skip, and shuffle songs.
The HTML and CSS of this project have been provided for you, so you can focus on the JavaScript.
Start by accessing the `#playlist-songs`, `#play`, and `#pause` elements with the `getElementById()` method. Assign them to variables `playlistSongs`, `playButton` and `pauseButton` respectively.
# --hints--
You should use `document.getElementById()` to get the `#playlist-songs` element.
```js
assert.match(code, /document\.getElementById\(\s*('|"|`)playlist\-songs\1\)/);
```
You should assign the `#playlist-songs` element to the variable `playlistSongs`. Don't forget to use `const` to declare the variable.
```js
assert.match(code, /const\s+playlistSongs\s*\=\s*document\.getElementById\(\s*('|"|`)playlist\-songs\1\)/);
```
You should use `document.getElementById()` to get the `#play` element.
```js
assert.match(code, /document\.getElementById\(\s*('|"|`)play\1\)/);
```
You should assign the `#play` element to the variable `playButton`. Don't forget to use `const` to declare the variable.
```js
assert.match(code, /const\s+playButton\s*\=\s*document\.getElementById\(\s*('|"|`)play\1\)/);
```
You should use `document.getElementById()` to get the `#pause` element.
```js
assert.match(code, /document\.getElementById\(\s*('|"|`)pause\1\)/);
```
You should assign the `#pause` element to the variable `pauseButton`. Don't forget to use `const` to declare the variable.
```js
assert.match(code, /const\s+pauseButton\s*\=\s*document\.getElementById\(\s*('|"|`)pause\1\)/);
```
# --seed--
## --seed-contents--
```html
Learn Basic String and Array Methods by Building a Music Player App
