Create a News App

Day 25 of 100DaysofNoCode

Max Haining
64 steps
32 minutes

Toddle

Newsdata

Navigate to[Toddle](https://toddle.dev?utm_medium=partner&utm_source=100daysofnocode&utm_campaign=100school)

Select '**Blank template**'.

Follow the instructions to add an emoji, name and ID for your project.\ \ You can call this 'news app'.

Click "**Create project**"

If you're using Toddle for the first time, you'll be shown a series of onboarding instructions.\ \ Click '**Next**'.

Read this information and then click '**Next**'.

Read this information and then click '**Done**'.

The blank Toddle template that's created only uses a few blank elements. One of them is a paragraph element that you won't need for this lesson. \ \ Delete the paragraph element by right-clicking it to bring up a sub-menu.

Click "**Delete ⌫**"

Select the '**h1**' element and then under '**Styling**' select '**Absolute**' to move this element to the top of the page.

You should now have something that looks like this.

The first thing you're going to do for your news app is to configure the source of data. In this example you'll use a free news API from newsdata.io.\ \ Head to <https://newsdata.io/> and click '**Get API Key**'.\ \ Follow the instructions to sign-up for an account. Be sure to confirm your email address.

From the homepage, select '**Free News API**'.

Copy the URL you see for one of the example news requests that's listed.

Navigate back to Toddle and click + to add a new API.

In the API field name, add '**News**'.\ \ Copy and paste the URL from newsdata.io into the URL field as shown below.\ \ You'll see the rest of the API fields in this section populate with information that it's pulling from the API.

Now that your API is connected, you're going to take the information from the API and choose how to present this information using Toddle's predefined elements.\ \ Click back into your editor and select the + icon next to '**Homepage**'.

Select '**Snippets**' > '**Card**'. \ \ This will add one card item to your app (this card will later show data from a news item).

For this app, you want to add multiple news items to the app.\ \ Do do this, right click the element and select '**Repeat**' from the sub-menu.

In the formula editor section that appears, select '**News**'.

Now select '**data**'.

Now select '**results**'.

You should now multiple cards added to your app that reflect the multiple news items that are being pulled from the API.

Now let's map the article titles from the API to the news item headings in your app.\ \ Select '**Heading**' from the left-hand menu.

**Click the formula button** within the '**Text**' settings.

Click the '**Value**' icon.

Select '**Item**'

Click "**title**"

Now you're going to repeat this process but using the paragraph element to pull in data for the news article description.\ \ Click the paragraph element from the left-hand menu.

Click the formula button on the right-hand menu within the '**Text**' settings.

Click the '**Value**' icon.

Select '**Item**'.

Click "**description**"

You'll now see that your cards are populated with titles and descriptions from the news API.

You're now going to adjust the size of your cards so that the descriptions can be fully populated from the news API.\ \ Select '**section**' from the left-hand menu.

Remove anything in the '**Height**' field.

To create a gap between your news items, select this option within the layout settings and add '8px'.

Now you're going to pull in images from the API and map them to the image elements in Toddle.\ \ Select the 'img' element from the left-hand menu.

Select '**Attributes**' from the right-hand menu.

**Click the formula button** within the '**src**' field.

Select the '**Value**' icon.

Select '**Item**'

Click "**image_url**"

The images for the news items in your app will now update with the image source which is being pulled from the API.

Next up you're going to add a search function to your app so that users can search for any news that they like by keyword.\ \ **Select the + icon** next to Homepage.

Search and select the '**Input**' element.

**Click and drag the 'input' element** and place it within the 'h1' heading element in the left-hand menu.

The elements in the app are a little close together, so you'll now add a gap between the '**h1**' element and the '**input**' element.\ \ Select the h1 element and in 'Gap between elements' in the right-hand menu, add '20'.

You should now see a gap between the h1 element and the input element.

You're now going to configure and test the search function within the input element.

Click the + icon next to '**Variables**' from the right-hand menu.

**Click inside the 'Initial value' field** and add some text that will act as a filter for the default view of your app. \ \ For a tech news app, it would be logical to set the default articles to show news about 'Tesla'.

Select the '**input**' element.

Click the '**Attributes**' settings within the right-hand menu.

In the '**Bind to variable**' option, select '**Search**'.

Now you're going to adjust the search function so that it pulls data from the API based on what's searched for within the '**input**' element.\ \ **Select the News API from the right-hand menu.**

Click the formula button next to this value field.

Within this field, search for '**Search**'

Click the '**Search**' variable.

Now it's time to test your app!\ \ In the menu-bar at the bottom of the screen, click the '**Test app**' button.

In your search field, type a keyword to filter the news articles.\ \ You'll see your app will automatically update with items that match this search query from the API.

That's it for today's lesson!\ \ If you have any time left within the 30 minutes of today's lesson, feel free to add a little more customisation to your app and then publish it (click '**Publish**' at the bottom of the page and follow the instructions).\ \ Congrats! Today you've built a news app using an API and including a search text function!