Create a News App | Scribe

    Create a News App

    • Scott Colenutt |
    • 64 steps |
    • 32 minutes
    1

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

    2

    Sign up for an account and enter your dashboard. \ \ Select the **App** option.

    3

    Select '**Blank template**'.

    4

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

    5

    Click "**Create project**"

    6

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

    7

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

    8

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

    9

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

    10

    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.

    11

    Click "**Delete ⌫**"

    12

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

    13

    You should now have something that looks like this.

    14

    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.

    15

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

    16

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

    17

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

    18

    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.

    19

    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**'.

    20

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