Code Monkey home page Code Monkey logo

pwj-module-8-my-blog-app's Introduction

General TODOS

TODO(Together): Create the home page structure for index.html

TODO: Create Blog Post HTML structure and styling

It needs to follow a class structure like this:

class post

    class post-image

    class post-content

        class post-date

        class post-title

        class post-text

HINT: Use Unsplash for image to test

HINT: Set the .post-image to have flex-basis: 40%;

TODO: Add nice hover effect for the blog post

HINT: use translate3d and transition

HINT: Hover box shadow box-shadow: 0 2rem 5rem 0 rgba(0,0,0,.1);

TODO: Add the New Post Button Styling

background-color: #004186;
box-shadow: 0 2px 5px 0 rgba(0,0,0,.26);

On Hover:
background-color: #002349;

<div class="add-post">
    <a href="new-post.html">
        <div class="nav-button new-post-button">+</div>
    </a>
</div>

TODO: Complete the post.html page

It needs to follow a class structure like this:

class navigation

    a link

class post-container

    id individual-post-title

    id individual-post-date

    id individual-post-content

TODO API (Together): Set Up a NodeJS Server

TODO API: Create an API Endpoint to return list of posts

Endpoint: /api/posts Method: GET

[{
    "id": "1581461442206",
    "title": "This is a New Blog Post",
    "content": "This is the content! ",
    "post_image": "uploads/post-image-1581461442199.jpg",
    "added_date": "1581461442206"
}]

TODO API (Together): Create post.js for interacting with data.json

TODO API: Create readData function to get data from data.json

TODO API(Together): Create storeData function to store data into data.json together with add() function

TODO API : Create an API Endpoint to return one post based on id

Endpoint: /api/posts/:post_id Method: GET

HINT: Use post.js for getting data from data.json

TODO(Together): Complete index.js to connect to API and get list of posts

HINT Make sure to make the statis files public

TODO: Complete post.js to get data from API and fill in the post.html

HINT(Together): Think about how you are going to link from index to post.html

TODO API: Create API endpoint for adding a new post without image upload

HINT: Make sure test with postman

HINT: Use post.js add() function

HINT: add "id" with current date

HINT: add "added_date"

Endpoint: /api/posts Method: POST

Payload:

title: <text>
content: <text>
post-image: "uploads/post-image-1581375207393.jpg"

TODO API(Together): Add ability to upload file to API

TODO: Complete new-post.js to be able to submit new post

pwj-module-8-my-blog-app's People

Contributors

nazariy995 avatar

Stargazers

 avatar Mritunjay avatar Kim avatar Code With Eras avatar jwsandeman avatar Logan Fetterly avatar Timothy Mugo Gachengo avatar Ibrahim Banat avatar Jocelyn9090 avatar Jakob Wolitzki avatar

Watchers

James Cloos avatar  avatar banks  avatar Rob Chich avatar Kim avatar

pwj-module-8-my-blog-app's Issues

Blog Posts from the json file are not loading up on the webpage

Hi Naz,

Following the code from this repository, I wasn't able to load the posts from the json file onto 'My Blog' webpage. I've mentioned the error that I'm getting below(the line numbers correspond to your code in index.js file). There is no error found in the 'Network' tab of inspect. Please help me debug this, I'd highly appreciate it!!

Error: Uncaught (in promise) TypeError: blogPosts is not iterable
at buildPosts (index.js:22)
at index.js:16

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.