Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/baayeh/notifications-page-main

Last synced: 5 days ago
JSON representation

Host: GitHub
URL: https://github.com/baayeh/notifications-page-main
Owner: Baayeh
License: mit
Created: 2022-09-24T16:36:07.000Z (about 2 years ago)
Default Branch: main
Last Pushed: 2022-09-24T18:25:58.000Z (about 2 years ago)
Last Synced: 2024-10-23T13:38:40.922Z (15 days ago)
Language: JavaScript
Size: 449 KB
Stars: 1
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

        # Frontend Mentor - Notifications page

![Design preview for the Notifications page coding challenge](./screenshot/screenshot.png)

## Welcome! 👋

## Table of contents

- [Overview](#overview)

  - [Screenshot](#screenshot)

  - [Links](#links)

- [My process](#my-process)

  - [Built with](#built-with)

  - [What I learned](#what-i-learned)

- [Author](#author)

- [Acknowledgments](#acknowledgments)

## Overview

### Links

- Solution URL: []

- Live Site URL: [Notification Page](https://baayeh.github.io/notifications-page-main/)

## My process

### Built with

- Semantic HTML5 markup

- CSS custom properties

- Flexbox

- JavaScript

- Mobile-first workflow

### What I learned

I learned how to apply dynamic content using plain JavaScript

```JavaScript

function displayNotifications() {

  notifications.forEach(notification => {

    addNotificationToList(notification);

  });

}

function addNotificationToList(notification) {

  const li = `


    

      

      

        

          

            ${notification.name}

            ${notification.reaction}

            ${

              notification.description ? `${notification.description}` : ''

            }

            ${

              !notification.read ? `` : ''

            }

          

          ${

            notification.img ? `` : ''

          }

        

        ${notification.time}

      

    

    ${

      notification.message ? `${notification.message}` : ''

    }

  `;

  ul.innerHTML += li;

}

```

## Author

- Website - [Kwasi Antwi Baayeh](https://baayeh.github.io/portfolio/)

- Frontend Mentor - [@Baayeh](https://www.frontendmentor.io/profile/Baayeh)

- Twitter - [@Cest_Baayeh](https://twitter.com/Cest_Baayeh)

## Acknowledgments

- Frontend Mentor

- [HTML-CSS-JS.COM](https://html-css-js.com/css/generator/box-shadow/)